From 9a0508f506f05191b6915d5037507af0117853d1 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期一, 15 八月 2022 19:47:59 +0800
Subject: [PATCH] Default Changelist
---
src/views/doublePrevent/dpIndex/index.vue | 484 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 484 insertions(+), 0 deletions(-)
diff --git a/src/views/doublePrevent/dpIndex/index.vue b/src/views/doublePrevent/dpIndex/index.vue
new file mode 100644
index 0000000..c25b2c8
--- /dev/null
+++ b/src/views/doublePrevent/dpIndex/index.vue
@@ -0,0 +1,484 @@
+<template>
+ <div class="home-container">
+ <div class="main-cont">
+ <div class="table-item">
+ <div class="item-head">
+ <span>告警风险事件概括</span>
+ <div @click="toRiskEve">查看更多>></div>
+ </div>
+ <el-table :data="eventData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column prop="riskEventName" label="风险事件名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="riskUnitName" label="风险分析单元名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
+ </el-table>
+ </div>
+ <div class="table-item table-item2">
+ <div class="item-head">
+ <span>隐患状态详情</span>
+ <div @click="toRiskStatus">查看更多>></div>
+ </div>
+ <el-table :data="riskStatusData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column type="index" label="序号" width="60" />
+<!-- <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip width="170px"></el-table-column>-->
+ <el-table-column prop="dangerCode" label="隐患名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="dangerLevel" label="隐患等级" show-overflow-tooltip>
+ <template #default="scope">
+ <div :style="{color: scope.row.dangerLevel==1?'#409eff':'#ff0000'}">
+ {{scope.row.dangerLevel==1?'一般隐患':'重大隐患'}}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="dangerStatus" label="隐患状态" show-overflow-tooltip>
+ <template #default="scope">
+ <div :style="{color: scope.row.dangerStatus==0 || scope.row.dangerStatus==1 ?'#67C23A':(scope.row.dangerStatus==2 || scope.row.dangerStatus==3?'#F56C6C':'#409EFF')}">
+ {{scope.row.dangerStatus==0?'整改中':(scope.row.dangerStatus==1?'待验收':(scope.row.dangerStatus==2?'延期整改':(scope.row.dangerStatus==3?'超期未整改':'已验收')))}}
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="table-item">
+ <div class="item-head">
+ <span>隐患整改情况</span>
+ </div>
+ <div id="riskFix"></div>
+ </div>
+ <div class="table-item">
+ <div class="item-head">
+ <span>风险装置列表</span>
+ <div @click="toRevice">查看更多>></div>
+ </div>
+ <el-table class="deviceTable" :data="deviceData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table-column prop="produceDeviceName" label="装置名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip>
+ <template #default="scope">
+ <div :style="{color: scope.row.riskLevel==1?'#409EFF':(scope.row.riskLevel==2?'#67C23A':(scope.row.riskLevel==3?'#E6A23C':'#F56C6C'))}">
+ {{scope.row.riskLevel==1?'低风险':(scope.row.riskLevel==2?'一般风险':(scope.row.riskLevel==3?'较大风险':'重大风险'))}}
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="deviceLevel">
+ <div class="levelItem red">
+ <span>0</span>
+ <div>重大风险</div>
+ </div>
+ <div class="levelItem orange">
+ <span>2</span>
+ <div>较大风险</div>
+ </div>
+ <div class="levelItem green">
+ <span>8</span>
+ <div>一般风险</div>
+ </div>
+ <div class="levelItem blue">
+ <span>10</span>
+ <div>低风险</div>
+ </div>
+ </div>
+ </div>
+ <div class="table-item">
+ <div class="item-head">
+ <span>隐患等级分布</span>
+ </div>
+ <div id="riskLevel"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+ import { toRefs, reactive, ref, onMounted } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { initBackEndControlRoutes } from '/@/router/backEnd';
+ import { useUserInfo } from '/@/stores/userInfo';
+ import { Session } from '/@/utils/storage';
+ import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
+ import { ElTable } from 'element-plus';
+ import { FormInstance, FormRules, ElMessage } from 'element-plus';
+ import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
+ import { useRouter } from 'vue-router';
+ import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
+ import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
+ import * as echarts from 'echarts/core';
+ import {TooltipComponent, TooltipComponentOption, LegendComponent, LegendComponentOption} from 'echarts/components';
+ import {PieChart, PieSeriesOption} from 'echarts/charts';
+ import {LabelLayout} from 'echarts/features';
+ import {CanvasRenderer} from 'echarts/renderers';
+ echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
+ // 定义接口来定义对象的类型
+ interface stateType {
+ eventData: Array<any>;
+ riskStatusData: Array<any>;
+ deviceData: Array<any>;
+ pageIndex: number;
+ pageSize: number;
+ totalSize: number;
+ departmentList: [];
+ classGroupList: Array<classGroup>;
+ inspectPointAllList: [];
+ }
+ interface type {
+ id: number;
+ name: string;
+ }
+ interface classGroup {
+ id: number;
+ groupName: string;
+ }
+ export default {
+ name: 'workingHours',
+ components: {},
+ setup() {
+ const router = useRouter();
+ const state = reactive<stateType>({
+ pageIndex: 1,
+ pageSize: 5,
+ totalSize: 0,
+ eventData: [],
+ riskStatusData: [],
+ deviceData: [],
+ departmentList: [],
+ classGroupList: [],
+ inspectPointAllList: []
+ });
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ getEventRecord();
+ getRiskStatusRecord();
+ getDeviceRecord();
+ initRiskFix();
+ initRiskLevel()
+ });
+
+ // 告警列表
+ const getEventRecord = async () => {
+ const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
+ let res = await safetyRiskEventApi().getSafetyRiskEventList(data)
+ if (res.data.code === '200'){
+ state.eventData = res.data.data
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 隐患状态列表
+ const getRiskStatusRecord = async () => {
+ const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
+ let res = await hiddenReportApi().getHiddenReportList(data)
+ if (res.data.code === '200'){
+ state.riskStatusData = res.data.data
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 隐患状态列表
+ const getDeviceRecord = async () => {
+ const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
+ let res = await productionDeviceApi().getProductionDeviceList(data)
+ if (res.data.code === '200'){
+ state.deviceData = res.data.data
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ };
+
+ // 隐患整改情况
+ const initRiskFix =()=>{
+ var dom = document.getElementById('riskFix');
+ var myChart = echarts.init(dom, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+ var app = {};
+
+ var option;
+
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '10%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['35%', '60%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 6,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 1048, name: '整改中' },
+ { value: 735, name: '待验收' },
+ { value: 580, name: '延期整改' },
+ { value: 484, name: '超期未整改' },
+ { value: 300, name: '已验收' }
+ ],
+ center: ['50%','35%']
+ }
+ ]
+ };
+
+ if (option && typeof option === 'object') {
+ myChart.setOption(option);
+ }
+
+ window.addEventListener('resize', myChart.resize);
+ }
+
+ // 隐患整改情况
+ const initRiskLevel =()=>{
+ var dom = document.getElementById('riskLevel');
+ var myChart = echarts.init(dom, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+ var app = {};
+
+ var option;
+
+ option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ bottom: '10%',
+ left: 'center'
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['35%', '60%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 6,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 1048, name: '一般隐患' },
+ { value: 235, name: '重大隐患' }
+ ],
+ center: ['50%','35%']
+ }
+ ]
+ };
+
+ if (option && typeof option === 'object') {
+ myChart.setOption(option);
+ }
+
+ window.addEventListener('resize', myChart.resize);
+ }
+
+ const toRiskEve = ()=>{
+ router.push({
+ path: 'event',
+ });
+ }
+
+ const toRiskStatus = ()=>{
+ router.push({
+ path: 'hiddenReport',
+ });
+ }
+
+ const toRevice = ()=>{
+ router.push({
+ path: 'device',
+ });
+ }
+
+ return {
+ View,
+ Edit,
+ Delete,
+ Refresh,
+ Plus,
+ router,
+ toRiskEve,
+ toRiskStatus,
+ toRevice,
+ ...toRefs(state)
+ };
+ }
+ };
+</script>
+
+<style scoped lang="scss">
+ $homeNavLengh: 8;
+ .home-container {
+ /*height: calc(100vh - 144px);*/
+ height: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ overflow: hidden;
+ .main-cont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 20px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+ .table-item{
+ border-radius: 8px;
+ background: #fff;
+ padding: 20px;
+
+ .item-head{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 30px;
+ margin-bottom: 20px;
+ span{
+ font-size: 20px;
+ color: #333;
+ font-weight: bolder;
+ }
+ div{
+ cursor: pointer;
+
+ &:hover{
+ color: #409eff;
+ }
+ }
+ }
+ #riskFix{
+ height: calc(50vh - 80px);
+ }
+ #riskLevel{
+ height: calc(50vh - 80px);
+ }
+ .deviceTable{
+ height: calc((50vh - 100px) / 3 * 2);
+ }
+ .deviceLevel{
+ height: calc((50vh - 100px) / 3);
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: repeat(4, 1fr);
+ align-items: center;
+ justify-content: space-between;
+
+ .levelItem{
+ display: flex;
+ margin-top: 20px;
+ flex-direction: column;
+ align-items: center;
+ padding: 15px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ color: #fff;
+ font-size: 16px;
+
+ span{
+ margin-bottom: 10px;
+ font-size: 24px;
+ font-weight: bolder;
+ }
+ }
+ .red{
+ background: #F56C6C;
+ }
+ .orange{
+ background: #E6A23C;
+ }
+ .green{
+ background: #67C23A;
+ }
+ .blue{
+ background: #409EFF;
+ }
+ }
+ }
+ .table-item2{
+ grid-column-start: 2;
+ grid-column-end: 4;
+ }
+ }
+ .el-row {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .grid-content {
+ align-items: center;
+ min-height: 36px;
+ }
+
+ .topInfo {
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ font-weight: bold;
+
+ & > div {
+ white-space: nowrap;
+ margin-right: 20px;
+ }
+ }
+ }
+ }
+ .el-input {
+ width: 100% !important;
+ }
+ .el-date-editor::v-deep {
+ width: 100%;
+ }
+ .el-select {
+ width: 100%;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.2