| | |
| | | <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> |
| | | <span :class="{ choosed: linetype == 0 }" @click="initEquipmentEcharts(0)">设备种类</span>/ |
| | | <span :class="{ choosed: linetype == 1 }" @click="initEquipmentEcharts(1)">设备状态</span> |
| | | </div> |
| | | </div> |
| | | <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div> |
| | |
| | | const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c'] |
| | | const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] |
| | | |
| | | let rightTiming = null |
| | | let equipmentmyChart = null |
| | | let eventchangemychart = null |
| | | let timer |
| | |
| | | |
| | | this.initEventChangeEcharts() |
| | | |
| | | this.initEquipmentEcharts() |
| | | this.initEquipmentEcharts(this.linetype) |
| | | |
| | | if (rightTiming != null) { |
| | | clearInterval(rightTiming) |
| | | rightTiming = null |
| | | } |
| | | |
| | | rightTiming = setInterval(async () => { |
| | | |
| | | this.initEquipmentEcharts(this.linetype) |
| | | |
| | | }, 600000) |
| | | }, |
| | | |
| | | getSchedulingList () { |
| | |
| | | // 现有设备统计 |
| | | getEquipment () { |
| | | const typeData = { |
| | | carCount: '警车', |
| | | carCount: '车辆', |
| | | monitorCount: '摄像头', |
| | | recorderCount: '手台', |
| | | phoneCount: '手持记录仪' |
| | |
| | | |
| | | return data |
| | | } else { |
| | | let normalData = { value: 0, name: '正常', color: '#4caf50', online: true, label: { color: oneColor[0] } } |
| | | let faultData = { value: 0, name: '故障', color: '#ffd600', online: false, label: { color: oneColor[2] } } |
| | | let normalData = { value: 0, name: '在线', color: '#4caf50', online: true, label: { color: oneColor[0] } } |
| | | let faultData = { value: 0, name: '离线', color: '#ffd600', online: false, label: { color: oneColor[2] } } |
| | | |
| | | res.data.forEach(item => { |
| | | this.regionTotal += item.count |
| | |
| | | |
| | | for (let key in typeData) { |
| | | if (item.type == typeData[key]) { |
| | | normalData[key] = item.online |
| | | faultData[key] = item.offline |
| | | normalData[key] = Number(item.online) |
| | | faultData[key] = Number(item.offline) |
| | | } |
| | | } |
| | | |
| | | faultData.value += item.offline |
| | | faultData.value = Number(faultData.value) + Number(item.offline) |
| | | }) |
| | | |
| | | data = [normalData, faultData] |
| | |
| | | return dataAll |
| | | }, |
| | | |
| | | // 设备种类,设备状态切换 |
| | | async lineTabClick (type) { |
| | | // 现有设备饼图初始化 |
| | | async initEquipmentEcharts (type) { |
| | | this.linetype = type |
| | | |
| | | const data = await this.getEquipment() |
| | | if (equipmentmyChart != null && equipmentmyChart != '' && equipmentmyChart != undefined) { |
| | | equipmentmyChart.dispose() |
| | | equipmentmyChart.off('click') |
| | | } |
| | | |
| | | equipmentmyChart.setOption(this.initEquipmentOptions(data), true) |
| | | }, |
| | | |
| | | // 现有设备饼图初始化 |
| | | async initEquipmentEcharts () { |
| | | var chartDom = document.getElementById('EquipmentEcharts') |
| | | if (equipmentmyChart != null && equipmentmyChart != '' && equipmentmyChart != undefined) equipmentmyChart.dispose() |
| | | |
| | | equipmentmyChart = this.$echarts.init(chartDom) |
| | | |
| | | const data = await this.getEquipment() |
| | |
| | | } |
| | | }) |
| | | |
| | | equipmentmyChart.setOption(this.initEquipmentOptions(data)) |
| | | equipmentmyChart.setOption(this.initEquipmentOptions(newData)) |
| | | |
| | | if (newData.length > 1) { |
| | | this.equipmentEchartsCarousel() |
| | |
| | | equipmentmyChart.off('mouseover') |
| | | equipmentmyChart.off('mouseout') |
| | | } |
| | | |
| | | }, |
| | | |
| | | // 现有设备options饼图数据 |
| | |
| | | formatter: function (params) { |
| | | let tipHtml = `` |
| | | |
| | | if ('carCount' in params.data) { |
| | | if ('carCount' in params.data || 'monitorCount' in params.data) { |
| | | tipHtml = ` |
| | | ${params.marker} |
| | | <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong> |
| | |
| | | <span style="margin-left:10px;color:#91cc75">摄像头:${params.data.monitorCount}台</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 />` |
| | | 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 |
| | | }, |
| | |
| | | } |
| | | return colorList[params.dataIndex] |
| | | }, |
| | | fontSize: fontSize(16), |
| | | normal: { |
| | | formatter (e) { |
| | | if (e.data.value == 0) { |
| | | e.data.emphasis.label.show = false |
| | | } else { |
| | | return `${e.data.name}` |
| | | } |
| | | } |
| | | } |
| | | fontSize: fontSize(16) |
| | | }, |
| | | itemStyle: { |
| | | normal: { |