<template>
|
<div class="home-container">
|
<el-scrollbar height="100%">
|
<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%;height: 90%" :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%;height: 90%" :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 class="riskFix" :id="riskFixId"></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 class="riskLevel" :id="riskLevelId"></div>
|
</div>
|
</div>
|
</el-scrollbar>
|
</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: []
|
});
|
const riskFixId = ref("eChartFix" + Date.now() + Math.random())
|
const riskLevelId = ref("eChartLe" + Date.now() + Math.random())
|
|
// 页面载入时执行方法
|
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 =()=>{
|
const dom = document.getElementById(riskFixId.value);
|
let myChart = echarts.init(dom, null, {
|
renderer: 'canvas',
|
useDirtyRect: false
|
});
|
let app = {};
|
|
let option;
|
|
option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
bottom: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['35%', '60%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 6,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
alignTo: 'labelLine',
|
formatter: '{name|{b}}\n{value|{c}}',
|
minMargin: 5,
|
edgeDistance: 5,
|
lineHeight: 15,
|
rich: {
|
name: {
|
fontSize: 14,
|
color: '#666'
|
}
|
}
|
},
|
labelLine: {
|
length: 15,
|
maxSurfaceAngle: 80
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '40',
|
fontWeight: 'bold'
|
}
|
},
|
data: [
|
{ value: 1048, name: '整改中' },
|
{ value: 735, name: '待验收' },
|
{ value: 580, name: '延期整改' },
|
{ value: 484, name: '超期未整改' },
|
{ value: 300, name: '已验收' }
|
],
|
center: ['50%','40%']
|
}
|
]
|
};
|
|
if (option && typeof option === 'object') {
|
myChart.setOption(option);
|
}
|
|
window.addEventListener('resize', myChart.resize);
|
}
|
|
// 隐患整改情况
|
const initRiskLevel =()=>{
|
const dom = document.getElementById(riskLevelId.value);
|
let myChart = echarts.init(dom, null, {
|
renderer: 'canvas',
|
useDirtyRect: false
|
});
|
let app = {};
|
|
let option;
|
|
option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
bottom: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['35%', '60%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 6,
|
borderColor: '#fff',
|
borderWidth: 2
|
},
|
label: {
|
alignTo: 'labelLine',
|
formatter: '{name|{b}}\n{value|{c}}',
|
minMargin: 5,
|
edgeDistance: 5,
|
lineHeight: 15,
|
rich: {
|
name: {
|
fontSize: 14,
|
color: '#666'
|
}
|
}
|
},
|
labelLine: {
|
length: 15,
|
maxSurfaceAngle: 80
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '40',
|
fontWeight: 'bold'
|
}
|
},
|
data: [
|
{ value: 1048, name: '一般隐患' },
|
{ value: 235, name: '重大隐患' }
|
],
|
center: ['50%','40%']
|
}
|
]
|
};
|
|
if (option && typeof option === 'object') {
|
myChart.setOption(option);
|
}
|
|
window.addEventListener('resize', myChart.resize);
|
setTimeout(()=>{
|
myChart.resize
|
},500)
|
}
|
|
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,
|
riskFixId,
|
riskLevelId,
|
toRiskEve,
|
toRiskStatus,
|
toRevice,
|
...toRefs(state)
|
};
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
|
@media screen and (min-width: 1366px) {
|
.main-cont {
|
width: 100%;
|
height: 100%;
|
display: grid;
|
margin-bottom: 40px;
|
box-sizing: border-box;
|
grid-gap: 20px;
|
grid-template-columns: repeat(3, 1fr);
|
grid-template-rows: repeat(2, 1fr);
|
grid-auto-flow: row;
|
justify-content: center;
|
}
|
.item-head{
|
height: 25px;
|
line-height: 25px;
|
span{
|
font-size: 20px;
|
}
|
div{
|
font-size: 16px;
|
}
|
}
|
|
.levelItem{
|
font-size: 16px;
|
|
span{
|
margin-bottom: 10px;
|
font-size: 24px;
|
font-weight: bolder;
|
}
|
}
|
}
|
|
@media screen and (min-width: 1024px) and (max-width: 1366px){
|
.main-cont {
|
width: 100%;
|
height: 100%;
|
display: grid;
|
margin-bottom: 40px;
|
box-sizing: border-box;
|
grid-gap: 15px;
|
grid-template-columns: repeat(3, 1fr);
|
grid-template-rows: repeat(2, 1fr);
|
grid-auto-flow: row;
|
justify-content: center;
|
}
|
.item-head{
|
height: 20px;
|
line-height: 20px;
|
span{
|
font-size: 16px;
|
}
|
div{
|
font-size: 14px;
|
}
|
}
|
.levelItem{
|
font-size: 14px;
|
|
span{
|
margin-bottom: 10px;
|
font-size: 20px;
|
font-weight: bolder;
|
}
|
}
|
}
|
|
@media screen and (max-width: 1024px) {
|
.main-cont {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 40px;
|
box-sizing: border-box;
|
justify-content: center;
|
}
|
.item-head{
|
height: 20px;
|
line-height: 20px;
|
span{
|
font-size: 16px;
|
}
|
div{
|
font-size: 14px;
|
}
|
}
|
.levelItem{
|
font-size: 12px;
|
|
span{
|
margin-bottom: 10px;
|
font-size: 16px;
|
font-weight: bolder;
|
}
|
}
|
}
|
.home-container {
|
height: 100%;
|
box-sizing: border-box;
|
overflow: hidden;
|
|
.main-cont {
|
|
.table-item{
|
border-radius: 8px;
|
background: #fff;
|
padding: 15px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
box-sizing: border-box;
|
|
.item-head{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
border-left: 4px solid #409eff;
|
padding-left: 10px;
|
span{
|
color: #333;
|
font-weight: bolder;
|
}
|
div{
|
cursor: pointer;
|
|
&:hover{
|
color: #409eff;
|
}
|
}
|
}
|
.riskFix{
|
height: 300px;
|
}
|
.riskLevel{
|
height: 300px
|
}
|
.deviceTable{
|
height: 200px;
|
}
|
.deviceLevel{
|
width: 100%;
|
height: 100px;
|
display: grid;
|
grid-gap: 10px;
|
grid-template-columns: repeat(4, 1fr);
|
align-items: center;
|
justify-content: space-between;
|
|
.levelItem{
|
display: flex;
|
height: 100%;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
padding: 15px;
|
box-sizing: border-box;
|
border-radius: 8px;
|
color: #fff;
|
|
span{
|
margin-bottom: 10px;
|
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;
|
}
|
}
|
}
|
.el-input {
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep {
|
width: 100%;
|
}
|
.el-select {
|
width: 100%;
|
}
|
</style>
|
