| | |
| | | <div class="logo"> |
| | | 众泰煤焦化智能化安全管理技术平台 |
| | | </div> |
| | | <div class="title">安全信息大屏</div> |
| | | <div class="title">安全信息公示</div> |
| | | <div class="title-right"> |
| | | <!-- <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />--> |
| | | <span class="datetime">{{currentTime}}</span> |
| | |
| | | <div class="item-head"> |
| | | <div> |
| | | <img src="../../../../assets/images/tit-bg.png"> |
| | | <span>告警风险事件概括</span> |
| | | <span>风险事件概括</span> |
| | | </div> |
| | | <div @click="toEvent()">查看更多>></div> |
| | | </div> |
| | | <el-table :data="eventData" style="width: 100%;height: 90%"> |
| | | <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 align="center"></el-table-column> |
| | | <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip align="center"></el-table-column> |
| | | </el-table> |
| | | <!-- <el-table :data="eventData" style="width: 100%;height: 90%">--> |
| | | <!-- <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 align="center"></el-table-column>--> |
| | | <!-- <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip align="center"></el-table-column>--> |
| | | <!-- </el-table>--> |
| | | <dv-scroll-board :config="riskEventConfig" style="width:100%;height:90%" /> |
| | | </div> |
| | | <div class="table-item"> |
| | | <div class="item-head item-head1"> |
| | |
| | | </div> |
| | | <div @click="toRisk()">查看更多>></div> |
| | | </div> |
| | | <el-table :data="riskStatusData" style="width: 100%;height: 90%"> |
| | | <el-table-column type="index" label="序号" width="60" align="center"/> |
| | | <!-- <el-table :data="riskStatusData" style="width: 100%;height: 90%">--> |
| | | <!-- <el-table-column type="index" label="序号" width="60" align="center"/>--> |
| | | <!-- <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 align="center"> |
| | | <template slot-scope="scope"> |
| | | <div :style="{color: scope.row.dangerLevel==1?'#28c3ff':'#ff0000'}"> |
| | | {{scope.row.dangerLevel==1?'一般隐患':'重大隐患'}} |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="gmtCreate" label="上报时间" show-overflow-tooltip align="center"></el-table-column> |
| | | <el-table-column prop="dangerStatus" label="隐患状态" show-overflow-tooltip align="center"> |
| | | <template slot-scope="scope"> |
| | | <div :style="{color: scope.row.dangerStatus==0 || scope.row.dangerStatus==1 ?'#00ff7e':(scope.row.dangerStatus==2 || scope.row.dangerStatus==3?'#F56C6C':'#28c3ff')}"> |
| | | {{scope.row.dangerStatus==0?'整改中':(scope.row.dangerStatus==1?'待验收':(scope.row.dangerStatus==2?'延期整改':(scope.row.dangerStatus==3?'超期未整改':'已验收')))}} |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- <el-table-column prop="dangerCode" label="隐患名称" show-overflow-tooltip></el-table-column>--> |
| | | <!-- <el-table-column prop="dangerLevel" label="隐患等级" show-overflow-tooltip align="center">--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <div :style="{color: scope.row.dangerLevel==1?'#28c3ff':'#ff0000'}">--> |
| | | <!-- {{scope.row.dangerLevel==1?'一般隐患':'重大隐患'}}--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column prop="gmtCreate" label="上报时间" show-overflow-tooltip align="center"></el-table-column>--> |
| | | <!-- <el-table-column prop="dangerStatus" label="隐患状态" show-overflow-tooltip align="center">--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <div :style="{color: scope.row.dangerStatus==0 || scope.row.dangerStatus==1 ?'#00ff7e':(scope.row.dangerStatus==2 || scope.row.dangerStatus==3?'#F56C6C':'#28c3ff')}">--> |
| | | <!-- {{scope.row.dangerStatus==0?'整改中':(scope.row.dangerStatus==1?'待验收':(scope.row.dangerStatus==2?'延期整改':(scope.row.dangerStatus==3?'超期未整改':'已验收')))}}--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- </el-table>--> |
| | | <dv-scroll-board :config="riskStatusConfig" style="width:100%;height:90%" /> |
| | | </div> |
| | | <div class="table-item"> |
| | | <div class="item-head item-head1"> |
| | |
| | | </div> |
| | | <div @click="toDevices()">查看更多>></div> |
| | | </div> |
| | | <el-table class="deviceTable" :data="deviceData" style="width: 100%"> |
| | | <el-table-column prop="produceDeviceName" label="装置名称" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip align="center"> |
| | | <template slot-scope="scope"> |
| | | <div :style="{color: scope.row.riskLevel==1?'#28c3ff':(scope.row.riskLevel==2?'#00ff7e':(scope.row.riskLevel==3?'#ff9a31':'#ff0000'))}"> |
| | | {{scope.row.riskLevel==1?'低风险':(scope.row.riskLevel==2?'一般风险':(scope.row.riskLevel==3?'较大风险':'重大风险'))}} |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- <el-table class="deviceTable" :data="deviceData" style="width: 100%">--> |
| | | <!-- <el-table-column prop="produceDeviceName" label="装置名称" show-overflow-tooltip></el-table-column>--> |
| | | <!-- <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip align="center">--> |
| | | <!-- <template slot-scope="scope">--> |
| | | <!-- <div :style="{color: scope.row.riskLevel==1?'#28c3ff':(scope.row.riskLevel==2?'#00ff7e':(scope.row.riskLevel==3?'#ff9a31':'#ff0000'))}">--> |
| | | <!-- {{scope.row.riskLevel==1?'低风险':(scope.row.riskLevel==2?'一般风险':(scope.row.riskLevel==3?'较大风险':'重大风险'))}}--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- </el-table>--> |
| | | <dv-scroll-board :config="deviceConfig" style="width:100%;height: 60%"/> |
| | | <div class="deviceLevel"> |
| | | <div class="levelItem red"> |
| | | <span>{{majorRisk}}</span> |
| | |
| | | value2:['',''], |
| | | value3:['',''], |
| | | pageIndex: 1, |
| | | pageSize: this.isScreenfull?7:6, |
| | | smallSize: this.isScreenfull?5:4, |
| | | pageSize: 10, |
| | | smallSize: 10, |
| | | eventData: [], |
| | | riskStatusData: [], |
| | | deviceData: [], |
| | |
| | | openCircuitCout: [], |
| | | heightCount: [], |
| | | temporaryPowerCount: [], |
| | | blindPlatePluggingCount: [] |
| | | blindPlatePluggingCount: [], |
| | | riskEventConfig: {}, |
| | | riskStatusConfig: {}, |
| | | deviceConfig: {}, |
| | | myVar: null |
| | | }; |
| | | }, |
| | | created(){ |
| | |
| | | this.$router.push({ |
| | | path:"/fullScreen" |
| | | }) |
| | | this.$parent.clickFullscreen() |
| | | }, |
| | | back(){ |
| | | window.history.go(-1); |
| | | this.$parent.clickFullscreen() |
| | | }, |
| | | |
| | | // 获取部门列表 |
| | |
| | | let res = await getRiskEvent(data) |
| | | if (res.data.code === '200'){ |
| | | this.eventData = res.data.data |
| | | const conData = res.data.data.map((item)=>{ |
| | | return [item.riskEventName,item.riskUnitName,item.lastEditUserName,item.gmtCreate] |
| | | }) |
| | | this.riskEventConfig = {data: conData, header: ['风险事件名称', '风险分析单元', '创建人','创建时间'], oddRowBGC: 'rgba(1, 155, 255, 0)', evenRowBGC: 'rgba(1, 155, 255, 0.1)', headerBGC: 'rgba(1,216,255,0.1)',rowNum: 7,align:['center','center','center','center']} |
| | | } else { |
| | | this.$message({ |
| | | message:res.data.message, |
| | |
| | | let res = await getDangerManage(data) |
| | | if (res.data.code === '200'){ |
| | | this.riskStatusData = res.data.data |
| | | const conData = res.data.data.map((item)=>{ |
| | | return [item.dangerCode,item.dangerLevel==1?'一般隐患':'重大隐患',item.gmtCreate,item.dangerStatus==0?'整改中':(item.dangerStatus==1?'待验收':(item.dangerStatus==2?'延期整改':(item.dangerStatus==3?'超期未整改':'已验收')))] |
| | | }) |
| | | this.riskStatusConfig = {data: conData, header: ['隐患名称', '隐患等级', '上报时间','隐患状态'], oddRowBGC: 'rgba(1, 155, 255, 0)', evenRowBGC: 'rgba(1, 155, 255, 0.1)', headerBGC: 'rgba(1,216,255,0.1)',rowNum: 7,align:['center','center','center','center']} |
| | | } else { |
| | | this.$message({ |
| | | type: 'warning', |
| | |
| | | this.heightCount = this.reGroup(res.data.data,5) |
| | | this.temporaryPowerCount = this.reGroup(res.data.data,6) |
| | | this.blindPlatePluggingCount = this.reGroup(res.data.data,7) |
| | | console.log(this.depList,'this.depList') |
| | | }else{ |
| | | this.$message({ |
| | | type:'warning', |
| | |
| | | |
| | | reGroup(data,index){ |
| | | let arr = [] |
| | | console.log(data,'data') |
| | | for(let i of data){ |
| | | arr.push(i.typeList[index].count) |
| | | } |
| | |
| | | let res = await getDevicePage(data) |
| | | if (res.data.code === '200'){ |
| | | this.deviceData = res.data.data |
| | | const conData = res.data.data.map((item)=>{ |
| | | return [item.produceDeviceName,item.riskLevel==1?'低风险':(item.riskLevel==2?'一般风险':(item.riskLevel==3?'较大风险':'重大风险'))] |
| | | }) |
| | | this.deviceConfig = {data: conData, header: ['装置名称', '风险等级'], oddRowBGC: 'rgba(1, 155, 255, 0)', evenRowBGC: 'rgba(1, 155, 255, 0.1)', headerBGC: 'rgba(1,216,255,0.1)',rowNum: 5,align:['center','center']} |
| | | } else { |
| | | this.$message({ |
| | | type: 'warning', |
| | |
| | | await this.initRiskLevel() |
| | | }, |
| | | changeInspectionTask() { |
| | | this.updateMission(this.personListQuery) |
| | | this.updateMission(this.taskListQuery) |
| | | }, |
| | | changeTimeTask(){ |
| | | if(this.value3 !== null){ |
| | | this.taskListQuery.startTime = this.value1[0] |
| | | this.taskListQuery.endTime = this.value1[1] |
| | | this.taskListQuery.startTime = this.value3[0] |
| | | this.taskListQuery.endTime = this.value3[1] |
| | | } |
| | | this.updateMission(this.personListQuery) |
| | | this.updateMission(this.taskListQuery) |
| | | }, |
| | | |
| | | // 各部门预约 |
| | | initAppoint(){ |
| | | const t = this |
| | | const dom = document.getElementById(this.appointId); |
| | | let myChart = this.$echarts.init(dom, null, { |
| | | renderer: 'canvas', |
| | |
| | | type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' |
| | | } |
| | | }, |
| | | dataZoom: { |
| | | type: 'slider', |
| | | show: true, |
| | | showDetails: true, |
| | | textStyle: { |
| | | color: '#fff' |
| | | dataZoom: [ |
| | | //滑动条 |
| | | { |
| | | yAxisIndex: 0, //这里是从X轴的0刻度开始 |
| | | show: false, //是否显示滑动条,不影响使用 |
| | | type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
| | | startValue: 0, // 从头开始。 |
| | | endValue: 6, // 一次性展示几个。 |
| | | }, |
| | | realtime: true, |
| | | right: 10, |
| | | height: 200, |
| | | width: 15, |
| | | start: 50, |
| | | end: 100, |
| | | orient: 'vertical' |
| | | }, |
| | | ], |
| | | legend: { |
| | | textStyle: { |
| | | color: '#fff', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: this.hotCount |
| | | data: t.hotCount |
| | | }, |
| | | { |
| | | name: '受限空间作业', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: this.confinedSpaceCount |
| | | data: t.confinedSpaceCount |
| | | }, |
| | | { |
| | | name: '吊装作业', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: this.liftingCount |
| | | data: t.liftingCount |
| | | }, |
| | | { |
| | | name: '动土作业', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: this.groundBreakingCount |
| | | data: t.groundBreakingCount |
| | | }, |
| | | { |
| | | name: '断路作业', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: this.openCircuitCout |
| | | data: t.openCircuitCout |
| | | }, |
| | | { |
| | | name: '高处作业', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: this.heightCount |
| | | data: t.heightCount |
| | | }, |
| | | { |
| | | name: '临时用电作业', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: this.temporaryPowerCount |
| | | data: t.temporaryPowerCount |
| | | }, |
| | | { |
| | | name: '盲板抽堵作业', |
| | |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | data: this.blindPlatePluggingCount |
| | | data: t.blindPlatePluggingCount |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | if (option && typeof option === 'object') { |
| | | myChart.setOption(option); |
| | | t.myVar = window.setInterval(function(){ |
| | | if (option.dataZoom[0].endValue == t.depList.length ) { |
| | | option.dataZoom[0].endValue = 6; |
| | | option.dataZoom[0].startValue = 0; |
| | | } else { |
| | | option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; |
| | | option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; |
| | | } |
| | | myChart.setOption(option); |
| | | }, 6000) |
| | | } |
| | | |
| | | window.addEventListener('resize', myChart.resize); |
| | | setTimeout(()=>{ |
| | | myChart.resize |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '任务数量', |
| | | name: '当日认领数量', |
| | | type: 'bar', |
| | | data: this.claimedData, |
| | | itemStyle:{ |
| | |
| | | } |
| | | }, |
| | | { |
| | | name: '已完成', |
| | | name: '当日完成数量', |
| | | type: 'bar', |
| | | data: this.completedData, |
| | | itemStyle:{ |
| | |
| | | } |
| | | }, |
| | | { |
| | | name: '未完成', |
| | | name: '累计领取未完成数量', |
| | | type: 'bar', |
| | | data: this.uncompletedData, |
| | | itemStyle:{ |
| | |
| | | myChart.resize |
| | | },500) |
| | | } |
| | | }, |
| | | beforeDestroy(){ |
| | | window.clearInterval(this.myVar) |
| | | this.myVar = null |
| | | }, |
| | | destroyed(){ |
| | | // 离开当前路由后的操作 |
| | | window.clearInterval(this.myVar) |
| | | this.myVar = null |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | ::v-deep.dv-scroll-board{ |
| | | .header{ |
| | | color: #00fff6 !important; |
| | | } |
| | | } |
| | | .screen-container{ |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | .main-cont { |
| | | display: grid; |
| | | grid-template-columns: repeat(3, minmax(100px, 1fr)); |
| | | grid-template-rows: repeat(2, 1fr); |
| | | grid-template-rows: repeat(2, calc(50% - 20px)); |
| | | grid-auto-flow: row; |
| | | padding: 10px; |
| | | margin-bottom: 20px; |
| | |
| | | .main-cont { |
| | | display: grid; |
| | | grid-template-columns: repeat(3, minmax(100px, 1fr)); |
| | | grid-template-rows: repeat(2, 1fr); |
| | | grid-template-rows: repeat(2, calc((100% - 35px)/2)); |
| | | grid-auto-flow: row; |
| | | padding: 10px; |
| | | margin-bottom: 20px; |