<template>
|
<div class="screen-container">
|
<div class="header-content">
|
<div class="logo">
|
众泰煤焦化智能化安全管理技术平台
|
</div>
|
<div class="title">安全信息大屏</div>
|
<div class="title-right">
|
<!-- <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />-->
|
<span class="datetime">{{currentTime}}</span>
|
<div class="btns">
|
<div class="fullBtn" v-if="!isFull">
|
<div class="toFull" @click="toFull()">
|
<i class="el-icon-full-screen"></i>
|
<div>全屏</div>
|
</div>
|
</div>
|
<div class="backBtn" v-else>
|
<div class="back" @click="back()">
|
<i class="el-icon-switch-button"></i>
|
<div>退出</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="main-cont">
|
<div class="table-item">
|
<div class="item-head">
|
<div>
|
<img src="../../../../assets/images/tit-bg.png">
|
<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>-->
|
<dv-scroll-board :config="riskEventConfig" style="width:100%;height:90%" />
|
</div>
|
<div class="table-item">
|
<div class="item-head item-head1">
|
<div>
|
<img src="../../../../assets/images/tit-bg.png">
|
<span>作业申请统计</span>
|
</div>
|
</div>
|
<div class="riskLevel" :id="appointId"></div>
|
</div>
|
<div class="table-item">
|
<div class="item-head">
|
<div>
|
<img src="../../../../assets/images/tit-bg.png">
|
<span>隐患状态详情</span>
|
</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-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>-->
|
<dv-scroll-board :config="riskStatusConfig" style="width:100%;height:90%" />
|
</div>
|
<div class="table-item">
|
<div class="item-head item-head1">
|
<div>
|
<img src="../../../../assets/images/tit-bg.png">
|
<span>巡检完成统计</span>
|
</div>
|
</div>
|
<div class="item-head2">
|
<div class="searchBtn">
|
<div class="inspectionStatistics_part_time">
|
<el-select v-model="completeListQuery.depId" @change="changeInspectionComplete" :popper-append-to-body="false">
|
<el-option
|
v-for="item in departmentList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.department"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="inspectionStatistics_part_time">
|
<el-select v-model="completeListQuery.status" @change="changeInspectionComplete" :popper-append-to-body="false">
|
<el-option
|
v-for="item in stateList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.name"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="inspectionStatistics_part_time">
|
<el-date-picker
|
v-model="value2"
|
type="daterange"
|
range-separator="至"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00','23:59:59']"
|
@change="changeCompleteTimeInspectionPerson"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
</div>
|
</div>
|
<div class="riskFix" :id="riskFixId"></div>
|
</div>
|
<div class="table-item">
|
<div class="item-head">
|
<div>
|
<img src="../../../../assets/images/tit-bg.png">
|
<span>风险装置列表</span>
|
</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>-->
|
<dv-scroll-board :config="deviceConfig" style="width:100%;height: 60%"/>
|
<div class="deviceLevel">
|
<div class="levelItem red">
|
<span>{{majorRisk}}</span>
|
<div>重大风险</div>
|
</div>
|
<div class="levelItem orange">
|
<span>{{higherRisk}}</span>
|
<div>较大风险</div>
|
</div>
|
<div class="levelItem green">
|
<span>{{generalRisk}}</span>
|
<div>一般风险</div>
|
</div>
|
<div class="levelItem blue">
|
<span>{{lowRisk}}</span>
|
<div>低风险</div>
|
</div>
|
</div>
|
</div>
|
<div class="table-item">
|
<div class="item-head item-head1">
|
<div>
|
<img src="../../../../assets/images/tit-bg.png">
|
<span>巡检任务统计</span>
|
</div>
|
</div>
|
<div class="item-head2">
|
<div class="searchBtn">
|
<div class="inspectionStatistics_part_time">
|
<el-select v-model="taskListQuery.depId" @change="changeInspectionTask">
|
<el-option
|
v-for="item in departmentList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.department"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
<div class="inspectionStatistics_part_time">
|
|
<el-date-picker
|
v-model="value3"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00','23:59:59']"
|
@change="changeTimeTask"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
</div>
|
</div>
|
<div class="riskLevel" :id="riskLevelId"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import { getRiskEvent, getDangerManage, getDevicePage, getDeviceData } from '@/api/screenData'
|
// import { getAllCompany } from "../../../../api/unitManage";
|
import Cookies from "js-cookie";
|
import {getInspectComplete, getInspectTask, getDepApplyToday} from "../../../../api/inspectStatistics";
|
import {getDepartmentList} from "../../../../api/departmentManage";
|
import * as echarts from 'echarts';
|
|
export default {
|
components: {},
|
props:[ 'isScreenfull' ],
|
name: "doubleIndex",
|
data() {
|
return {
|
value2:['',''],
|
value3:['',''],
|
pageIndex: 1,
|
pageSize: 10,
|
smallSize: 10,
|
eventData: [],
|
riskStatusData: [],
|
deviceData: [],
|
departmentList: [],
|
classGroupList: [],
|
inspectPointAllList: [],
|
riskFixId: '',
|
riskLevelId: '',
|
currentTime: '',
|
isFull: this.isScreenfull,
|
numData:[],
|
timeData:[],
|
claimedData:[],
|
completedData:[],
|
uncompletedData:[],
|
timeData2:[],
|
personListQuery:{
|
depId:41,
|
startTime:'',
|
endTime:'',
|
},
|
completeListQuery:{
|
depId:41,
|
startTime:'',
|
endTime:'',
|
status:1,
|
},
|
stateList:[
|
{id:1,name:'正常'},
|
{id:2,name:'存在隐患'},
|
{id:3,name:'未处理'}
|
],
|
taskListQuery:{
|
depId:41,
|
startTime:'',
|
endTime:'',
|
},
|
majorRisk: '',
|
higherRisk: '',
|
generalRisk: '',
|
lowRisk: '',
|
depList: [],
|
hotCount: [],
|
confinedSpaceCount: [],
|
liftingCount: [],
|
groundBreakingCount: [],
|
openCircuitCout: [],
|
heightCount: [],
|
temporaryPowerCount: [],
|
blindPlatePluggingCount: [],
|
riskEventConfig: {},
|
riskStatusConfig: {},
|
deviceConfig: {}
|
};
|
},
|
created(){
|
this.getTime()
|
this.getDepartment()
|
this.appointId = "eChartapp" + Date.now() + Math.random()
|
this.riskFixId = "eChartFix" + Date.now() + Math.random()
|
this.riskLevelId = "eChartLe" + Date.now() + Math.random()
|
this.getEventRecord();
|
this.getRiskStatusRecord();
|
this.getDeviceRecord();
|
this.getApplyToday();
|
this.getDeviceData()
|
},
|
mounted(){
|
this.setTimeValue();
|
this.initAppoint();
|
this.initRiskFix();
|
this.initRiskLevel()
|
},
|
computed: {
|
|
},
|
methods: {
|
getTime(){
|
this.currentTime = new Date().toLocaleString();
|
},
|
toFull(){
|
this.$router.push({
|
path:"/fullScreen"
|
})
|
},
|
back(){
|
window.history.go(-1);
|
},
|
|
// 获取部门列表
|
async getDepartment(){
|
let res = await getDepartmentList({pageSize:1000,pageIndex:1})
|
if(res.data.code === '200'){
|
this.departmentList = res.data.result.result
|
}else{
|
this.$message({
|
message:res.data.message,
|
type:'warning'
|
})
|
}
|
},
|
|
// 告警列表
|
async getEventRecord(){
|
const data = { pageSize: this.pageSize, pageIndex: this.pageIndex};
|
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,
|
type:'warning'
|
})
|
}
|
},
|
//
|
// 隐患状态列表
|
async getRiskStatusRecord(){
|
const data = { pageSize: this.pageSize, pageIndex: this.pageIndex};
|
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',
|
message: res.data.msg
|
});
|
}
|
},
|
|
toEvent(){
|
this.$router.push({
|
path:"/doublePreventAction/doublePreventAction/riskLevelManage/index/doublePreventAction/riskLevelManage/event/index",
|
})
|
},
|
|
toRisk(){
|
this.$router.push({
|
path:"/doublePreventAction/doublePreventAction/hiddenDanger/index/doublePreventAction/hiddenDanger/hiddenDangerReform/index/doublePreventAction/hiddenDanger/hiddenDangerReform/statistics/index",
|
})
|
},
|
|
toDevices(){
|
this.$router.push({
|
path:"/doublePreventAction/doublePreventAction/riskLevelManage/index/doublePreventAction/riskLevelManage/riskSourceManage/index",
|
})
|
},
|
|
setTimeValue() {
|
let newTime = new Date()
|
this.value2 = [(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' + '01').toString() + ' ' + '00:00:00',(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' + newTime.getDate()).toString() + ' ' + '23:59:59']
|
this.completeListQuery.startTime = this.value2[0]
|
this.completeListQuery.endTime = this.value2[1]
|
this.updateComplete(this.completeListQuery)
|
this.value3 = [(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' + '01').toString() + ' ' + '00:00:00',(newTime.getFullYear()+ '-' + ((newTime.getMonth() + 1) < 10 ? '0' + (newTime.getMonth() + 1) : (newTime.getMonth() + 1)) + '-' + newTime.getDate()).toString() + ' ' + '23:59:59']
|
this.taskListQuery.startTime = this.value3[0]
|
this.taskListQuery.endTime = this.value3[1]
|
this.updateMission(this.taskListQuery)
|
},
|
|
// 各部门作业预约统计
|
async getApplyToday(){
|
let res = await getDepApplyToday()
|
if(res.data.code === '200'){
|
this.depList = Array.from(res.data.data, ({ depName }) => depName);
|
this.hotCount = this.reGroup(res.data.data,0)
|
this.confinedSpaceCount = this.reGroup(res.data.data,1)
|
this.liftingCount = this.reGroup(res.data.data,2)
|
this.groundBreakingCount = this.reGroup(res.data.data,3)
|
this.openCircuitCout = this.reGroup(res.data.data,4)
|
this.heightCount = this.reGroup(res.data.data,5)
|
this.temporaryPowerCount = this.reGroup(res.data.data,6)
|
this.blindPlatePluggingCount = this.reGroup(res.data.data,7)
|
}else{
|
this.$message({
|
type:'warning',
|
message:res.data.message
|
})
|
}
|
this.initAppoint()
|
},
|
|
reGroup(data,index){
|
let arr = []
|
for(let i of data){
|
arr.push(i.typeList[index].count)
|
}
|
return arr
|
},
|
|
// 巡检完成统计
|
async updateComplete(data){
|
let res = await getInspectComplete(data)
|
if(res.data.code === '200'){
|
this.numData = res.data.data.map(item =>{
|
return item.num
|
})
|
this.timeData = res.data.data.map(item =>{
|
return item.taskDate
|
})
|
}else{
|
this.$message({
|
type:'warning',
|
message:res.data.message
|
})
|
}
|
this.initRiskFix()
|
},
|
|
changeInspectionComplete() {
|
this.updateComplete(this.completeListQuery)
|
},
|
|
changeCompleteTimeInspectionPerson() {
|
if(this.value2 !== null){
|
this.completeListQuery.startTime = this.value2[0]
|
this.completeListQuery.endTime = this.value2[1]
|
}
|
this.updateComplete(this.completeListQuery)
|
},
|
|
// 风险装置列表
|
async getDeviceRecord(){
|
const data = { pageSize: this.smallSize, pageIndex: this.pageIndex};
|
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',
|
message: res.data.msg
|
});
|
}
|
},
|
|
// 风险装置数据
|
async getDeviceData(){
|
let res = await getDeviceData()
|
if (res.data.code === '200'){
|
this.majorRisk = res.data.data.majorRisk
|
this.higherRisk = res.data.data.higherRisk
|
this.generalRisk = res.data.data.generalRisk
|
this.lowRisk = res.data.data.lowRisk
|
} else {
|
this.$message({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
},
|
|
|
//巡检任务统计
|
async updateMission(data){
|
let res = await getInspectTask(data)
|
if(res.data.code === '200'){
|
this.claimedData = res.data.data.claimed.map(item =>{
|
return item.num
|
})
|
this.completedData = res.data.data.completed.map(item =>{
|
return item.num
|
})
|
this.uncompletedData = res.data.data.uncompleted.map(item =>{
|
return item.num
|
})
|
this.timeData2 = res.data.data.claimed.map(item =>{
|
return item.taskDate
|
})
|
}else{
|
this.$message({
|
type:'warning',
|
message:res.data.message
|
})
|
}
|
await this.initRiskLevel()
|
},
|
changeInspectionTask() {
|
this.updateMission(this.personListQuery)
|
},
|
changeTimeTask(){
|
if(this.value3 !== null){
|
this.taskListQuery.startTime = this.value1[0]
|
this.taskListQuery.endTime = this.value1[1]
|
}
|
this.updateMission(this.personListQuery)
|
},
|
|
// 各部门预约
|
initAppoint(){
|
const dom = document.getElementById(this.appointId);
|
let myChart = this.$echarts.init(dom, null, {
|
renderer: 'canvas',
|
useDirtyRect: false
|
});
|
let app = {};
|
|
let option;
|
|
option = {
|
tooltip: {
|
// trigger: 'axis',
|
// axisPointer: {
|
// type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
// },
|
// axisPointer: {
|
// type: "cross",
|
// label: {
|
// formatter: function (params) {
|
// if (params.seriesData.length === 0) {
|
// window.mouseCurValue = params.value;
|
// }
|
// }
|
// }
|
// },
|
// formatter: function (params) {
|
// let res = "", sum = 0;
|
// for (let i = 0; i < params.length; i++) {
|
// let series = params[i];
|
// sum += Number(series.data);
|
// if (sum >= window.mouseCurValue) {
|
// res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data + "<br/>";
|
// break;
|
// }
|
// }
|
// return res;
|
// },
|
trigger: 'axis',
|
axisPointer: {
|
// Use axis to trigger tooltip
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
}
|
},
|
dataZoom: {
|
type: 'slider',
|
show: true,
|
showDetails: true,
|
textStyle: {
|
color: '#fff'
|
},
|
realtime: true,
|
right: 10,
|
height: 200,
|
width: 15,
|
start: 50,
|
end: 100,
|
orient: 'vertical'
|
},
|
legend: {
|
textStyle: {
|
color: '#fff',
|
fontSize: '10'
|
},
|
icon: 'circle'
|
},
|
grid: {
|
left: '3%',
|
right: '3%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'value',
|
axisLabel: {
|
color: '#eee'
|
},
|
splitLine:{
|
show: true,
|
lineStyle:{
|
type: 'dashed',
|
color: 'rgba(255,255,255,.4)'
|
}
|
}
|
},
|
yAxis: {
|
type: 'category',
|
data: this.depList,
|
axisLabel: {
|
color: '#fff'
|
},
|
axisLine:{
|
show: true,
|
lineStyle:{
|
color: '#fff'
|
}
|
}
|
},
|
series: [
|
{
|
name: '动火作业',
|
type: 'bar',
|
barCategoryGap: '20%',
|
stack: 'total',
|
label: {
|
show: true,
|
borderColor: 'none'
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.hotCount
|
},
|
{
|
name: '受限空间作业',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.confinedSpaceCount
|
},
|
{
|
name: '吊装作业',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.liftingCount
|
},
|
{
|
name: '动土作业',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.groundBreakingCount
|
},
|
{
|
name: '断路作业',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.openCircuitCout
|
},
|
{
|
name: '高处作业',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.heightCount
|
},
|
{
|
name: '临时用电作业',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.temporaryPowerCount
|
},
|
{
|
name: '盲板抽堵作业',
|
type: 'bar',
|
stack: 'total',
|
label: {
|
show: true
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: this.blindPlatePluggingCount
|
}
|
]
|
};
|
|
if (option && typeof option === 'object') {
|
myChart.setOption(option);
|
}
|
|
window.addEventListener('resize', myChart.resize);
|
setTimeout(()=>{
|
myChart.resize
|
},500)
|
},
|
|
// 巡检完成情况
|
initRiskFix(){
|
const dom = document.getElementById(this.riskFixId);
|
let myChart = this.$echarts.init(dom, null, {
|
renderer: 'canvas',
|
useDirtyRect: false
|
});
|
let app = {};
|
|
let option;
|
|
option = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
grid: {
|
left: '8%',
|
right: '8%',
|
bottom: '10%',
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: this.timeData,
|
axisLine:{
|
show: true,
|
lineStyle:{
|
color: '#999'
|
}
|
},
|
axisLabel:{
|
color: '#fff',
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLine:{
|
show: true,
|
lineStyle:{
|
type: 'dotted'
|
}
|
},
|
axisLabel:{
|
color: '#ccc'
|
},
|
splitLine:{
|
show: true,
|
lineStyle:{
|
type: 'dashed',
|
color: 'rgba(255,255,255,.4)'
|
}
|
}
|
}
|
],
|
series: [
|
{
|
data: this.numData,
|
type: 'line',
|
smooth: true,
|
itemStyle:{
|
color: '#fff'
|
},
|
lineStyle:{
|
color: '#01D8FF'
|
}
|
}
|
]
|
};
|
|
if (option && typeof option === 'object') {
|
myChart.setOption(option);
|
}
|
|
window.addEventListener('resize', myChart.resize);
|
},
|
|
// 巡检任务情况
|
initRiskLevel(){
|
const dom = document.getElementById(this.riskLevelId);
|
let myChart = this.$echarts.init(dom, null, {
|
renderer: 'canvas',
|
useDirtyRect: false
|
});
|
let app = {};
|
|
let option;
|
|
option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
textStyle:{
|
color: '#fff'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: this.timeData2,
|
axisLine:{
|
show: true,
|
lineStyle:{
|
color: '#999'
|
}
|
},
|
axisLabel:{
|
color: '#fff',
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLine:{
|
show: true,
|
lineStyle:{
|
type: 'dotted'
|
}
|
},
|
axisLabel:{
|
color: '#ccc'
|
},
|
splitLine:{
|
show: true,
|
lineStyle:{
|
type: 'dashed',
|
color: 'rgba(255,255,255,.4)'
|
}
|
}
|
},
|
series: [
|
{
|
name: '任务数量',
|
type: 'bar',
|
data: this.claimedData,
|
itemStyle:{
|
color: '#58B7FB'
|
}
|
},
|
{
|
name: '已完成',
|
type: 'bar',
|
data: this.completedData,
|
itemStyle:{
|
color: '#FFFF00'
|
}
|
},
|
{
|
name: '未完成',
|
type: 'bar',
|
data: this.uncompletedData,
|
itemStyle:{
|
color: '#C23531'
|
}
|
}
|
]
|
};
|
|
if (option && typeof option === 'object') {
|
myChart.setOption(option);
|
}
|
|
window.addEventListener('resize', myChart.resize);
|
setTimeout(()=>{
|
myChart.resize
|
},500)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.dv-scroll-board{
|
.header{
|
color: #00fff6 !important;
|
}
|
}
|
.screen-container{
|
width: 100%;
|
height: 100%;
|
background: #001733;
|
.header-content {
|
width: 100%;
|
height: 6.4%;
|
padding: 0 20px;
|
font-size: 1.25rem;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
z-index: 9;
|
background: url("../../../../assets/images/top-bg.png") no-repeat center;
|
background-size: 100% 100%;
|
|
.logo {
|
width: 27%;
|
line-height: 100%;
|
color: #01D8FF;
|
}
|
.title {
|
width: 46%;
|
font-size: 2rem;
|
font-weight: bolder;
|
line-height: 100%;
|
text-align: center;
|
letter-spacing: 30px;
|
color: #01D8FF;
|
}
|
|
.title-right {
|
width: 27%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
font-size: 1rem;
|
padding-left: 30px;
|
|
.datetime {
|
color: #01D8FF;
|
font-size: 0.9rem;
|
line-height: 100%;
|
}
|
.btns{
|
display: flex;
|
align-items: center;
|
|
&>div{
|
display: flex;
|
align-items: center;
|
margin-right: 20px;
|
|
div{
|
margin-left: 0.4rem;
|
color: #01D8FF;
|
display: flex;
|
align-items: center;
|
font-size: 0.9rem;
|
}
|
}
|
.fullBtn{
|
cursor: pointer;
|
}
|
.backBtn{
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.main-cont {
|
width: 100%;
|
height: 93.6%;
|
|
.table-item{
|
width: 100%;
|
height: 100%;
|
border-radius: 8px;
|
background: #fff;
|
padding: 15px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
box-sizing: border-box;
|
background: url("../../../../assets/images/small-bg.png") no-repeat center;
|
background-size: 100% 100%;
|
|
.item-head{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
padding-left: 20px;
|
padding-right: 20px;
|
|
&:last-of-type{
|
margin-bottom: 0;
|
}
|
span{
|
color: #01D8FF;
|
font-weight: bolder;
|
}
|
div{
|
display: flex;
|
align-items: center;
|
color: #01D8FF;
|
&:last-of-type{
|
cursor: pointer;
|
color: rgba(1,216,255,.6);
|
&:hover{
|
color: #01D8FF;
|
}
|
}
|
|
}
|
|
}
|
.item-head1{
|
margin-bottom: 10px;
|
}
|
.item-head2{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
|
.searchBtn{
|
width: 100%;
|
display: flex;
|
justify-content: end;
|
.inspectionStatistics_part_time{
|
margin-right: 10px;
|
|
&:last-of-type{
|
margin-right: 0;
|
}
|
/deep/.el-select .el-input .el-select__caret{
|
line-height: 20px !important;
|
}
|
/deep/.el-select-dropdown{
|
border: none;
|
background-color: rgba(1, 28, 82, 0.8) !important;
|
}
|
|
/deep/.el-input__inner{
|
height: 28px;
|
min-height: 28px;
|
display: flex;
|
align-items: center;
|
color:#eee;
|
font-size: 0.5rem;
|
border-color: rgba(0,255,246,.6);
|
background-color: rgba(1, 28, 82, 0.1) !important;
|
.el-range-separator{
|
color: #eee;
|
line-height: 20px;
|
}
|
.el-range__icon{
|
color: #eee;
|
line-height: 20px;
|
}
|
}
|
|
.el-select .el-input.is-focus .el-input__inner{
|
border-color: #0B61AA;
|
background-color: rgba(1, 28, 82, 0.8);
|
color:#00D3E9;
|
}
|
|
.el-select-dropdown__item{
|
color: #eee;
|
}
|
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover{
|
color:#00D3E9;
|
background-color: #0F3360;
|
}
|
|
/deep/.el-date-editor .el-range-input{
|
background: none;
|
color: #eee;
|
}
|
}
|
}
|
}
|
|
/deep/.el-table{
|
background-color: transparent !important;
|
|
&::before{
|
display: none;
|
}
|
}
|
|
/deep/.el-table tr{
|
background-color: transparent !important;
|
color: #fff;
|
&:nth-of-type(2n){
|
background-color: rgba(1,155,255,.1) !important;
|
}
|
}
|
/deep/.el-table td{
|
background-color: transparent !important;
|
border-bottom: none;
|
color: #fff;
|
}
|
/deep/.el-table th{
|
background-color: rgba(1,216,255,.2) !important;
|
color: #00fff6;
|
border-bottom: none;
|
box-sizing: border-box;
|
padding: 6px 0;
|
}
|
.riskFix{
|
height: calc(100% - 20px);
|
}
|
.riskLevel{
|
height: calc(100% - 20px);
|
}
|
.deviceTable{
|
height: 200px;
|
}
|
.deviceLevel{
|
width: 100%;
|
height: 100px;
|
padding-top: 10px;
|
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;
|
}
|
}
|
}
|
}
|
}
|
@media screen and (min-width: 1366px) {
|
.main-cont {
|
display: grid;
|
grid-template-columns: repeat(3, minmax(100px, 1fr));
|
grid-template-rows: repeat(2, 1fr);
|
grid-auto-flow: row;
|
padding: 10px;
|
margin-bottom: 20px;
|
box-sizing: border-box;
|
grid-gap: 20px;
|
}
|
.logo {
|
font-size: 1.4rem;
|
}
|
.item-head{
|
height: 25px;
|
line-height: 25px;
|
|
img{
|
width: 28px;
|
height: 28px;
|
}
|
span{
|
font-size: 20px;
|
margin-left: 15px;
|
}
|
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 {
|
display: grid;
|
grid-template-columns: repeat(3, minmax(100px, 1fr));
|
grid-template-rows: repeat(2, 1fr);
|
grid-auto-flow: row;
|
padding: 10px;
|
margin-bottom: 20px;
|
box-sizing: border-box;
|
grid-gap: 15px;
|
}
|
.logo {
|
font-size: 1rem;
|
}
|
.item-head{
|
height: 20px;
|
line-height: 20px;
|
img{
|
width: 16px;
|
height: 16px;
|
}
|
span{
|
font-size: 16px;
|
margin-left: 10px;
|
}
|
div{
|
font-size: 14px;
|
}
|
}
|
.levelItem{
|
font-size: 14px;
|
|
span{
|
margin-bottom: 10px;
|
font-size: 20px;
|
font-weight: bolder;
|
}
|
}
|
}
|
|
@media screen and (max-width: 1024px) {
|
.screen-container{
|
.header-content{
|
.logo {
|
font-size: 10px;
|
}
|
|
.title{
|
font-size: 18px;
|
letter-spacing: 16px;
|
}
|
|
.title-right{
|
font-size: 10px;
|
}
|
}
|
|
.main-cont {
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
overflow: auto;
|
.table-item{
|
.item-head{
|
height: 20px;
|
line-height: 20px;
|
img{
|
width: 12px;
|
height: 12px;
|
}
|
span{
|
font-size: 16px;
|
margin-left: 6px;
|
}
|
div{
|
font-size: 14px;
|
}
|
}
|
.riskFix{
|
height: 320px;
|
}
|
.riskLevel{
|
height: 320px;
|
}
|
.deviceTable{
|
height: 320px;
|
}
|
}
|
|
.levelItem{
|
font-size: 12px;
|
|
span{
|
margin-bottom: 10px;
|
font-size: 12px;
|
font-weight: bolder;
|
}
|
}
|
}
|
}
|
}
|
.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>
|
