<template>
|
<div class="container" ref="Container">
|
<div class="case-box" ref="caseBox">
|
<div class="box">
|
<div class="title" ref="alertBoxTitle">
|
<div>值班信息(当日)</div>
|
</div>
|
<div class="table-box">
|
<el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
|
:header-cell-style="{ 'text-align': 'center' }"
|
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
|
:row-class-name="tableRowClassName">
|
<el-table-column prop="station" label="岗位"></el-table-column>
|
<el-table-column prop="name" label="姓名"></el-table-column>
|
<el-table-column prop="contact" label="联系方式"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<svg class="border-svg">
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite">
|
</animate>
|
</use>
|
</svg>
|
</div>
|
|
<div class="alert-box" ref="alertBox ">
|
<div class="box">
|
<div class="title">
|
案件统计
|
<div class="timer">
|
<el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
:picker-options="pickerOptions"></el-date-picker>
|
</div>
|
</div>
|
<div id="EventChangeEcharts" class="echarts-box"></div>
|
</div>
|
|
<svg class="border-svg">
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite">
|
</animate>
|
</use>
|
</svg>
|
</div>
|
|
<!-- <div class="alert-box" ref="alertBox">
|
<div class="title" ref="alertBoxTitle">
|
<div>安保活动</div>
|
<div class="title-tab">
|
<span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
|
<span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
|
</div>
|
</div>
|
<div id="peopleList" class="echarts-box">
|
<el-table
|
size="small"
|
:height="tableHeight"
|
:data="acttype == 0 ? underwayArr : historyArr"
|
style="width: 100%"
|
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
|
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
|
:row-class-name="tableRowClassName"
|
ref="activityTable"
|
@row-click="activityRowClick"
|
>
|
<el-table-column prop="activityName" label="活动名称"></el-table-column>
|
<el-table-column prop="startTime" label="开始时间"></el-table-column>
|
<el-table-column prop="endTime" label="结束时间"></el-table-column>
|
<el-table-column prop="scale" label="规模"></el-table-column>
|
</el-table>
|
</div>
|
</div>-->
|
|
<div class="crowd-box" ref="crowdBox">
|
<div class="box">
|
<div class="title">
|
<div>现有设备</div>
|
<div class="title-tab">
|
<span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/
|
<span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
|
</div>
|
</div>
|
<div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
|
</div>
|
|
<svg class="border-svg">
|
<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
|
mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
|
<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
|
repeatCount="indefinite">
|
</animate>
|
</use>
|
</svg>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let equipmentmyChart
|
let eventchangemychart
|
let timer
|
|
import carArr from '@/assets/data/equimentsDate/car.js'
|
import phoneArr from '@/assets/data/equimentsDate/phone.js'
|
import recorderArr from '@/assets/data/equimentsDate/recorder.js'
|
import { getSchedulingList } from '@/api/home/index.js'
|
import { fontSize } from '@/utils/fontSize.js'
|
|
|
const timeEvents = []
|
|
export default {
|
data () {
|
return {
|
eventTime: '',
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近三个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}]
|
},
|
regionTotal: 0,
|
linetype: 0,
|
timetype: 0,
|
policeName: '全部',
|
phoneNewArr: [],
|
carNewArr: [],
|
recorderNewArr: [],
|
workingSaveArr: [],
|
faultSaveArr: [],
|
workingNewArr: [],
|
faultNewArr: [],
|
tableHeight: 0,
|
schedulingList: [],
|
|
}
|
},
|
created () {
|
this.workingSaveArr = this.workingSaveArr.concat(this.getEquimentChartStateData(phoneArr).workingArr).concat(this.getEquimentChartStateData(carArr).workingArr).concat(this.getEquimentChartStateData(recorderArr).workingArr)
|
this.faultSaveArr = this.faultSaveArr.concat(this.getEquimentChartStateData(phoneArr).faultArr).concat(this.getEquimentChartStateData(carArr).faultArr).concat(this.getEquimentChartStateData(recorderArr).faultArr)
|
this.getSchedulingList()
|
},
|
|
mounted () {
|
this.initEquipmentEcharts()
|
this.initEventChangeEcharts()
|
this.clickEquimentChart()
|
|
this.$nextTick(() => {
|
window.addEventListener("resize", this.echartsResize)
|
this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 62
|
})
|
this.equipmentEchartsCarousel()
|
},
|
methods: {
|
// actTabClick (type) {
|
// this.acttype = type
|
// this.$refs.activityTable.bodyWrapper.scrollTop = 0
|
// this.$emit('changeActivityType', type)
|
// this.$emit('activityChange')
|
// },
|
|
getSchedulingList () {
|
getSchedulingList().then(res => {
|
this.schedulingList = res.data.data.records
|
})
|
},
|
|
lineTabClick (type) {
|
this.linetype = type
|
equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(this.policeName)), true)
|
},
|
|
echartsResize () {
|
equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
|
eventchangemychart && eventchangemychart != null && eventchangemychart.resize()
|
},
|
|
initEquipmentEcharts () {
|
var chartDom = document.getElementById('EquipmentEcharts')
|
equipmentmyChart = this.$echarts.init(chartDom)
|
equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData('全部')))
|
},
|
|
initEquipmentOptions (dataArr) {
|
return {
|
tooltip: {
|
trigger: 'item',
|
confine: true,
|
formatter: function (params) {
|
console.log(params, 555)
|
let tipHtml = ``
|
if ('carCount' in params.data) {
|
tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
|
} else {
|
tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><span style="color:#4caf50">正常：${params.data.working}台</span><br /><span style="color:#ccc">故障：${params.data.fault}台</span><br /><span style="margin-left:10px;color:#ccc">设备故障率：${Math.floor(params.data.fault / (params.data.working + params.data.fault) * 100)}%</span><br />`
|
}
|
return tipHtml
|
},
|
backgroundColor: 'rgba(8, 56, 185, 0.9)',
|
borderColor: 'rgba(8, 56, 185, 0.9)',
|
textStyle: {
|
fontSize: fontSize(14)
|
}
|
},
|
graphic: {
|
type: "text",
|
// left: "36.5%",
|
top: "40%",
|
left: "center",
|
style: {
|
text: "设备总数",
|
textAlign: "center",
|
fill: "#fff",
|
fontSize: fontSize(18),
|
fontWeight: 700
|
}
|
},
|
title: {
|
text: `${this.regionTotal}`,
|
top: "52%",
|
left: "center",
|
textStyle: {
|
color: "#27D9C8",
|
fontSize: fontSize(20),
|
fontWeight: 700,
|
align: "center"
|
}
|
},
|
series: [
|
{
|
name: '',
|
type: 'pie',
|
radius: ['90%', '136%'],
|
top: 'middle',
|
left: 'center',
|
data: dataArr,
|
avoidLabelOverlap: false,
|
labelLine: {
|
normal: {
|
length: fontSize(15),
|
lineStyle: {
|
width: fontSize(3)
|
}
|
}
|
},
|
emphasis: {
|
label: {
|
color: 'red',
|
fontSize: fontSize(16)
|
}
|
},
|
label: {
|
color: function (params) {
|
let colorList = []
|
if ('carCount' in params.data) {
|
colorList = ['#4caf50', '#787878']
|
} else {
|
colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
}
|
return colorList[params.dataIndex]
|
},
|
fontSize: fontSize(16)
|
|
},
|
itemStyle: {
|
normal: {
|
color: function (params) {
|
let colorList = []
|
if ('carCount' in params.data) {
|
colorList = ['#4caf50', '#787878']
|
} else {
|
colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
}
|
return colorList[params.dataIndex]
|
}
|
}
|
}
|
}
|
]
|
}
|
},
|
|
equipmentEchartsCarousel () {
|
let dataLen = this.getEquimentChartData(this.policeName).length
|
let curIndex = 0
|
if (timer) {
|
clearInterval(timer)
|
}
|
|
timer = setInterval(() => {
|
equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
|
curIndex = (curIndex + 1) % dataLen
|
equipmentmyChart.dispatchAction({
|
type: 'highlight', seriesIndex: 0, dataIndex: curIndex
|
})
|
}, 1000)
|
|
equipmentmyChart.on('mouseover', function (param) {
|
clearInterval(timer)
|
equipmentmyChart.dispatchAction({
|
type: 'downplay',
|
seriesIndex: 0,
|
dataIndex: curIndex
|
})
|
equipmentmyChart.dispatchAction({
|
type: 'highlight',
|
seriesIndex: 0,
|
dataIndex: param.dataIndex
|
})
|
curIndex = param.dataIndex
|
})
|
|
equipmentmyChart.on('mouseout', function (param) {
|
curIndex = param.dataIndex
|
if (timer) {
|
clearInterval(timer)
|
}
|
timer = setInterval(() => {
|
equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
|
curIndex = (curIndex + 1) % dataLen
|
equipmentmyChart.dispatchAction({
|
type: 'highlight', seriesIndex: 0, dataIndex: curIndex
|
})
|
}, 1000)
|
})
|
},
|
|
initEventChangeEcharts () {
|
var chartDom = document.getElementById('EventChangeEcharts')
|
eventchangemychart = this.$echarts.init(chartDom)
|
eventchangemychart.setOption(this.initEventChangeOption([10, 9, 12, 6, 4, 14, 8]))
|
},
|
|
initEventChangeOption (seriesData) {
|
return {
|
tooltip: {
|
trigger: 'item',
|
formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>'
|
},
|
xAxis: {
|
type: 'category',
|
data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1'],
|
axisLabel: {
|
color: "#fff",
|
fontSize: fontSize(14)
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#fff"
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
show: false
|
},
|
axisLabel: {
|
color: "#fff",
|
fontSize: fontSize(14)
|
},
|
axisLine: {
|
lineStyle: {
|
color: "#fff"
|
}
|
}
|
},
|
series: [
|
{
|
data: seriesData,
|
type: 'line',
|
smooth: true,
|
areaStyle: {
|
normal: {
|
//渐变色
|
color: new this.$echarts.graphic.LinearGradient(
|
0,
|
0,
|
0,
|
1,
|
[
|
{
|
//波形图渐变色样式
|
offset: 0,
|
color: "rgba(3, 108, 255, 0.7)"
|
},
|
{
|
offset: 0.8,
|
color: "rgba(3, 108, 255, 0.1)"
|
}
|
],
|
false
|
)
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: 'red', //改变折线点的颜色
|
lineStyle: {
|
color: 'rgba(3, 108, 255, 1)' //改变折线颜色
|
}
|
}
|
}
|
}
|
],
|
grid: {
|
top: '4%',
|
left: '3%',
|
right: '2%',
|
bottom: '4%',
|
containLabel: true
|
},
|
}
|
},
|
|
clickEquimentChart () {
|
equipmentmyChart.on('click', params => {
|
// 设备类型，监控弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
|
this.$emit('showequimentdetail', params.name, false, true, [false, false, false], [])
|
if (params.name == '摄像头') {
|
this.$emit('showequimentdetail', params.name, true, false, [false, false, false], [])
|
} else if (params.name == '手台') {
|
this.$emit('showequimentdetail', params.name, false, true, [false, false, true], this.phoneNewArr)
|
} else if (params.name == '车辆') {
|
this.$emit('showequimentdetail', params.name, false, true, [false, true, false], this.carNewArr)
|
} else if (params.name == '执法记录仪') {
|
this.$emit('showequimentdetail', params.name, false, true, [true, false, false], this.recorderNewArr)
|
} else if (params.name == '正常') {
|
this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.workingNewArr)
|
} else if (params.name == '故障') {
|
this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.faultNewArr)
|
}
|
})
|
},
|
|
selectPoliceChangeEquimentData (police) {
|
// if (police != '全部') {
|
// let arr1 = []
|
// let arr2 = []
|
// underwayArr.some(item => {
|
// if (item.policeStationName == police) {
|
// arr1.push(item)
|
// }
|
// })
|
// this.underwayArr = arr1
|
// historyArr.some(item => {
|
// if (item.policeStationName == police) {
|
// arr2.push(item)
|
// }
|
// })
|
// this.historyArr = arr2
|
// } else {
|
// this.underwayArr = underwayArr
|
// this.historyArr = historyArr
|
// }
|
equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(police)), true)
|
this.policeName = police
|
},
|
|
selectPoliceChangeEventData (police) {
|
if (police == '全部') {
|
eventchangemychart.setOption(this.initEventChangeOption([10, 9, 12, 6, 4, 14, 8]), true)
|
} else if (police == '车站派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([6, 1, 4, 0, 1, 3, 0]), true)
|
} else if (police == '沙溪派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([1, 4, 0, 1, 0, 2, 1]), true)
|
} else if (police == '北门派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([2, 0, 3, 2, 1, 7, 1]), true)
|
} else if (police == '灵溪派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([0, 3, 2, 1, 1, 2, 4]), true)
|
} else if (police == '江光派出所') {
|
eventchangemychart.setOption(this.initEventChangeOption([1, 1, 3, 2, 1, 0, 2]), true)
|
}
|
},
|
|
getEquimentDataCountandArr (data, policeStationName) {
|
let count = 0
|
let arr = []
|
let obj = {}
|
data.some(item => {
|
if (item.policeStation == policeStationName) {
|
count = Number(count) + 1
|
arr.push(item)
|
}
|
})
|
obj = { 'count': count, 'arr': arr }
|
return obj
|
},
|
|
getEquimentChartData (policeStationName) {
|
const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
|
const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let dataArr = []
|
let phoneCount = 0
|
let carCount = 0
|
let recorderCount = 0
|
let monitorCount = 0
|
// 设备种类
|
this.phoneNewArr = []
|
this.carNewArr = []
|
this.recorderNewArr = []
|
// 设备状态
|
this.workingNewArr = []
|
this.faultNewArr = []
|
let phoneState = {}
|
let carState = {}
|
let recorderState = {}
|
let monitorState = { 'working': 7, 'fault': 3 }
|
|
if (policeStationName == '全部') {
|
phoneCount = phoneArr.length
|
this.phoneNewArr = phoneArr
|
carCount = carArr.length
|
this.carNewArr = carArr
|
recorderCount = recorderArr.length
|
this.recorderNewArr = recorderArr
|
monitorCount = 10
|
this.workingNewArr = this.workingSaveArr
|
this.faultNewArr = this.faultSaveArr
|
} else {
|
this.phoneNewArr = this.getEquimentDataCountandArr(phoneArr, policeStationName).arr
|
phoneCount = this.getEquimentDataCountandArr(phoneArr, policeStationName).count
|
this.carNewArr = this.getEquimentDataCountandArr(carArr, policeStationName).arr
|
carCount = this.getEquimentDataCountandArr(carArr, policeStationName).count
|
this.recorderNewArr = this.getEquimentDataCountandArr(recorderArr, policeStationName).arr
|
recorderCount = this.getEquimentDataCountandArr(recorderArr, policeStationName).count
|
monitorCount = 10
|
this.workingNewArr = this.getEquimentDataCountandArr(this.workingSaveArr, policeStationName).arr
|
this.faultNewArr = this.getEquimentDataCountandArr(this.faultSaveArr, policeStationName).arr
|
}
|
phoneState = this.getEquimentChartStateData(this.phoneNewArr)
|
carState = this.getEquimentChartStateData(this.carNewArr)
|
recorderState = this.getEquimentChartStateData(this.recorderNewArr)
|
if (this.linetype == 0) {
|
dataArr = [
|
{ value: carCount, name: '车辆', working: carState.working, fault: carState.fault, label: { color: twoColor[0] } },
|
{ value: monitorCount, name: '摄像头', working: monitorState.working, fault: monitorState.fault, label: { color: twoColor[1] } },
|
{ value: recorderCount, name: '执法记录仪', working: recorderState.working, fault: recorderState.fault, label: { color: twoColor[2] } },
|
{ value: phoneCount, name: '手台', working: phoneState.working, fault: phoneState.fault, label: { color: twoColor[3] } },
|
]
|
this.regionTotal = phoneCount + monitorCount + carCount + recorderCount
|
} else {
|
let workingObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).workingObj
|
let faultObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).faultObj
|
dataArr = [
|
{ value: workingObj.total, name: '正常', carCount: workingObj.carCount, monitorCount: workingObj.monitorCount, recorderCount: workingObj.recorderCount, phoneCount: workingObj.phoneCount, color: '#4caf50', label: { color: oneColor[0] } },
|
{ value: faultObj.total, name: '故障', carCount: faultObj.carCount, monitorCount: faultObj.monitorCount, recorderCount: faultObj.recorderCount, phoneCount: faultObj.phoneCount, color: '#ffd600', label: { color: oneColor[2] } },
|
]
|
this.regionTotal = workingObj.total + faultObj.total
|
}
|
return dataArr
|
},
|
|
getEquimentChartStateData (newArr) {
|
let working = 0
|
let fault = 0
|
let workingArr = []
|
let faultArr = []
|
|
newArr.forEach(item => {
|
for (let p in item) {
|
if (p.indexOf('ID') != -1) {
|
item['id'] = item[p]
|
}
|
}
|
if (item.state == '正常') {
|
working++
|
workingArr.push(item)
|
} else if (item.state == '故障') {
|
fault++
|
faultArr.push(item)
|
}
|
})
|
return { 'working': working, 'fault': fault, 'workingArr': workingArr, 'faultArr': faultArr }
|
},
|
|
getEquimentChartTypeData (phoneState, carState, recorderState, monitorState) {
|
let workingObj = {}
|
let faultObj = {}
|
let maintainObj = {}
|
let disableObj = {}
|
let sealingObj = {}
|
|
workingObj.phoneCount = phoneState.working
|
workingObj.carCount = carState.working
|
workingObj.recorderCount = recorderState.working
|
workingObj.monitorCount = monitorState.working
|
workingObj.total = monitorState.working + recorderState.working + carState.working + phoneState.working
|
|
faultObj.phoneCount = phoneState.fault
|
faultObj.carCount = carState.fault
|
faultObj.recorderCount = recorderState.fault
|
faultObj.monitorCount = monitorState.fault
|
faultObj.total = monitorState.fault + recorderState.fault + carState.fault + phoneState.fault
|
|
maintainObj.phoneCount = phoneState.maintain
|
maintainObj.carCount = carState.maintain
|
maintainObj.recorderCount = recorderState.maintain
|
maintainObj.monitorCount = monitorState.maintain
|
maintainObj.total = monitorState.maintain + recorderState.maintain + carState.maintain + phoneState.maintain
|
|
disableObj.phoneCount = phoneState.disable
|
disableObj.carCount = carState.disable
|
disableObj.recorderCount = recorderState.disable
|
disableObj.monitorCount = monitorState.disable
|
disableObj.total = monitorState.disable + recorderState.disable + carState.disable + phoneState.disable
|
|
sealingObj.phoneCount = phoneState.sealing
|
sealingObj.carCount = carState.sealing
|
sealingObj.recorderCount = recorderState.sealing
|
sealingObj.monitorCount = monitorState.sealing
|
sealingObj.total = monitorState.sealing + recorderState.sealing + carState.sealing + phoneState.sealing
|
|
return { 'workingObj': workingObj, 'faultObj': faultObj, 'maintainObj': maintainObj, 'disableObj': disableObj, 'sealingObj': sealingObj }
|
},
|
|
// activityRowClick (row) {
|
// this.$EventBus.$emit('toPosition', {
|
// layerName: 'activityLayers',
|
// siteJd: Number(row.position[0]),
|
// siteWd: Number(row.position[1])
|
// })
|
// },
|
|
},
|
|
destroyed () {
|
window.removeEventListener("resize", this.echartsResize)
|
|
if (equipmentmyChart) {
|
equipmentmyChart.dispose()
|
equipmentmyChart = null
|
}
|
|
if (eventchangemychart) {
|
eventchangemychart.dispose()
|
eventchangemychart = null
|
}
|
clearInterval(timer)
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
display: flex;
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
.case-box,
|
.alert-box,
|
.crowd-box {
|
position: relative;
|
margin: 8px;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
// background: $bg-color;
|
|
background-image: url(/img/box/box-bg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
|
// .title::after {
|
// content: '';
|
// position: absolute;
|
// top: 13px;
|
// left: 6px;
|
// width: 10px;
|
// height: 10px;
|
// border-radius: 50%;
|
// background: #43bafe;
|
// box-shadow: 0px 0px 8px 2px #43bafe;
|
// margin-left: 8px;
|
// }
|
|
.box {
|
display: flex;
|
position: absolute;
|
flex-direction: column;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11;
|
}
|
|
.title {
|
display: flex;
|
justify-content: space-between;
|
padding: 0 18px 0 18px;
|
position: relative;
|
text-align: left;
|
height: 54px;
|
line-height: 54px;
|
font-size: 16px;
|
font-weight: bold;
|
font-style: oblique;
|
letter-spacing: 2px;
|
color: #fff;
|
// background-image: linear-gradient(to right, #2e4aba, #010d3e);
|
|
.title-tab {
|
color: #99cccc;
|
|
span {
|
cursor: pointer;
|
}
|
|
span.choosed {
|
color: #fff;
|
}
|
}
|
|
.timer {
|
width: 250px;
|
height: 30px;
|
float: right;
|
}
|
|
.regionTotal {
|
color: #fff;
|
font-size: 22px;
|
font-weight: 700;
|
margin-left: 50%;
|
letter-spacing: 1px;
|
}
|
}
|
|
.sub-title {
|
display: flex;
|
justify-content: space-between;
|
height: 36px;
|
}
|
|
.sub-tab {
|
padding: 10px;
|
display: flex;
|
|
.tab {
|
margin: 0 10px;
|
flex: 1;
|
background: $sub-tab-bg-color;
|
cursor: pointer;
|
|
&>div {
|
height: 26px;
|
line-height: 26px;
|
}
|
}
|
}
|
|
.echarts-box {
|
padding: 12px;
|
flex: 1;
|
}
|
|
.table-box {
|
padding: 0 12px;
|
flex: 1;
|
}
|
|
#peopleList {
|
height: 100%;
|
}
|
}
|
|
.alert-box {
|
margin-top: 0;
|
margin-bottom: 0;
|
|
.title {
|
height: 54px;
|
line-height: 54px;
|
}
|
|
.echarts-box {
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
|
:deep(.el-table__header-wrapper) {
|
height: 40px;
|
}
|
}
|
|
.border-svg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
}
|
</style>
|
