| | |
| | | class="equiment" |
| | | :class="{ choosed: linetype == 0 }" |
| | | @click="lineTabClick(0)" |
| | | >在线设备</span> |
| | | >设备种类</span> |
| | | <span>/</span> |
| | | <span |
| | | class="activity" |
| | | :class="{ choosed: linetype == 1 }" |
| | | @click="lineTabClick(1)" |
| | | >离线设备</span> |
| | | >设备状态</span> |
| | | </div> |
| | | <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div> |
| | | </div> |
| | |
| | | tooltip: { |
| | | trigger: 'item', |
| | | confine: true, |
| | | 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">{c0}台</strong><strong style="margin-left:10px;color:#5c7bd9">{d}%</strong>' |
| | | formatter: function (params) { |
| | | let tipHtml = `` |
| | | if ('carCount' in params.data) { |
| | | tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#5470c6">警车:${params.data.carCount}台</span><span style="margin-left:10px;color:#91cc75">监控:${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台:${params.data.phoneCount}台</span><span style="margin-left:10px;color:#ee6666">手持记录仪:${params.data.recorderCount}台</span>` |
| | | } else { |
| | | tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">运行:${params.data.working}台</span><span style="margin-left:10px;color:#949494">备用:${params.data.spare}台</span><br /><span style="color:#fe2929">检修:${params.data.overhaul}台</span><span style="margin-left:10px;color:#69a9ff">禁用:${params.data.disable}台</span>` |
| | | } |
| | | return tipHtml |
| | | } |
| | | }, |
| | | legend: { |
| | | left: '60%', |
| | |
| | | labelLine: { |
| | | show: false |
| | | }, |
| | | data: dataArr |
| | | data: dataArr, |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (params) { |
| | | let colorList = [] |
| | | if ('carCount' in params.data) { |
| | | colorList = ['#00fe01', '#949494', '#fe2929', '#69a9ff'] |
| | | } else { |
| | | colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] |
| | | } |
| | | return colorList[params.dataIndex] |
| | | } |
| | | } |
| | | } |
| | | } |
| | | ], |
| | | grid: { |
| | |
| | | } |
| | | }, |
| | | |
| | | getEquimentDataCount (data, policeStationName) { |
| | | getEquimentDataCountandArr (data, policeStationName) { |
| | | let count = 0 |
| | | let arr = [] |
| | | let obj = {} |
| | | data.some(item => { |
| | | if (item.policeStation == policeStationName) { |
| | | count = Number(count) + 1 |
| | | arr.push(item) |
| | | } |
| | | }) |
| | | return count |
| | | obj = { 'count': count, 'arr': arr } |
| | | return obj |
| | | }, |
| | | |
| | | getEquimentChartData (policeStationName) { |
| | |
| | | let phoneCount = 0 |
| | | let carCount = 0 |
| | | let recorderCount = 0 |
| | | let monitor = 0 |
| | | let monitorCount = 0 |
| | | this.phoneNewArr = [] |
| | | this.carNewArr = [] |
| | | this.recorderNewArr = [] |
| | | if (this.linetype == 0) { |
| | | phoneArr.forEach(item => { |
| | | if (item.state == '在线') { |
| | | this.phoneNewArr.push(item) |
| | | } |
| | | }) |
| | | carArr.forEach(item => { |
| | | if (item.state == '在线') { |
| | | this.carNewArr.push(item) |
| | | } |
| | | }) |
| | | recorderArr.forEach(item => { |
| | | if (item.state == '在线') { |
| | | this.recorderNewArr.push(item) |
| | | } |
| | | }) |
| | | } else { |
| | | phoneArr.forEach(item => { |
| | | if (item.state == '离线') { |
| | | this.phoneNewArr.push(item) |
| | | } |
| | | }) |
| | | carArr.forEach(item => { |
| | | if (item.state == '离线') { |
| | | this.carNewArr.push(item) |
| | | } |
| | | }) |
| | | recorderArr.forEach(item => { |
| | | if (item.state == '离线') { |
| | | this.recorderNewArr.push(item) |
| | | } |
| | | }) |
| | | } |
| | | let phoneState = {} |
| | | let carState = {} |
| | | let recorderState = {} |
| | | let monitorState = { 'working': 4, 'spare': 2, 'overhaul': 3, 'disable': 1 } |
| | | |
| | | if (policeStationName == '全部') { |
| | | phoneCount = this.phoneNewArr.length |
| | | carCount = this.carNewArr.length |
| | | recorderCount = this.recorderNewArr.length |
| | | monitor = 10 |
| | | phoneCount = phoneArr.length |
| | | this.phoneNewArr = phoneArr |
| | | carCount = carArr.length |
| | | this.carNewArr = carArr |
| | | recorderCount = recorderArr.length |
| | | this.recorderNewArr = recorderArr |
| | | monitorCount = 10 |
| | | } else { |
| | | phoneCount = this.getEquimentDataCount(this.phoneNewArr, policeStationName) |
| | | carCount = this.getEquimentDataCount(this.carNewArr, policeStationName) |
| | | recorderCount = this.getEquimentDataCount(this.recorderNewArr, policeStationName) |
| | | monitor = 10 |
| | | 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 |
| | | } |
| | | dataArr = [ |
| | | { value: carCount, name: '车辆' }, |
| | | { value: monitor, name: '摄像头' }, |
| | | { value: recorderCount, name: '执法记录仪' }, |
| | | { value: phoneCount, name: '手台' }, |
| | | ] |
| | | this.regionTotal = phoneCount + monitor + carCount + recorderCount |
| | | 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, spare: carState.spare, overhaul: carState.overhaul, disable: carState.disable }, |
| | | { value: monitorCount, name: '摄像头', working: monitorState.working, spare: monitorState.spare, overhaul: monitorState.overhaul, disable: monitorState.disable }, |
| | | { value: recorderCount, name: '执法记录仪', working: recorderState.working, spare: recorderState.spare, overhaul: recorderState.overhaul, disable: recorderState.disable }, |
| | | { value: phoneCount, name: '手台', working: phoneState.working, spare: phoneState.spare, overhaul: phoneState.overhaul, disable: phoneState.disable }, |
| | | ] |
| | | this.regionTotal = phoneCount + monitorCount + carCount + recorderCount |
| | | } else { |
| | | let workingObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).workingObj |
| | | let spareObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).spareObj |
| | | let overhaulObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).overhaulObj |
| | | let disableObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).disableObj |
| | | dataArr = [ |
| | | { value: workingObj.total, name: '运行', carCount: workingObj.carCount, monitorCount: workingObj.monitorCount, recorderCount: workingObj.recorderCount, phoneCount: workingObj.phoneCount }, |
| | | { value: spareObj.total, name: '备用', carCount: spareObj.carCount, monitorCount: spareObj.monitorCount, recorderCount: spareObj.recorderCount, phoneCount: spareObj.phoneCount }, |
| | | { value: overhaulObj.total, name: '检修', carCount: overhaulObj.carCount, monitorCount: overhaulObj.monitorCount, recorderCount: overhaulObj.recorderCount, phoneCount: overhaulObj.phoneCount }, |
| | | { value: disableObj.total, name: '禁用', carCount: disableObj.carCount, monitorCount: disableObj.monitorCount, recorderCount: disableObj.recorderCount, phoneCount: disableObj.phoneCount }, |
| | | ] |
| | | this.regionTotal = workingObj.total + spareObj.total + overhaulObj.total + disableObj.total |
| | | } |
| | | return dataArr |
| | | }, |
| | | |
| | | getEquimentChartStateData (newArr) { |
| | | let working = 0 |
| | | let spare = 0 |
| | | let overhaul = 0 |
| | | let disable = 0 |
| | | newArr.forEach(item => { |
| | | if (item.state == '运行') { |
| | | working++ |
| | | } else if (item.state == '备用') { |
| | | spare++ |
| | | } else if (item.state == '检修') { |
| | | overhaul++ |
| | | } else if (item.state == '禁用') { |
| | | disable++ |
| | | } |
| | | }) |
| | | return { 'working': working, 'spare': spare, 'overhaul': overhaul, 'disable': disable } |
| | | }, |
| | | |
| | | getEquimentChartTypeData (phoneState, carState, recorderState, monitorState) { |
| | | let workingObj = {} |
| | | let spareObj = {} |
| | | let overhaulObj = {} |
| | | let disableObj = {} |
| | | |
| | | 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 |
| | | |
| | | spareObj.phoneCount = phoneState.spare |
| | | spareObj.carCount = carState.spare |
| | | spareObj.recorderCount = recorderState.spare |
| | | spareObj.monitorCount = monitorState.spare |
| | | spareObj.total = monitorState.spare + recorderState.spare + carState.spare + phoneState.spare |
| | | |
| | | overhaulObj.phoneCount = phoneState.overhaul |
| | | overhaulObj.carCount = carState.overhaul |
| | | overhaulObj.recorderCount = recorderState.overhaul |
| | | overhaulObj.monitorCount = monitorState.overhaul |
| | | overhaulObj.total = monitorState.overhaul + recorderState.overhaul + carState.overhaul + phoneState.overhaul |
| | | |
| | | 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 |
| | | |
| | | return { 'workingObj': workingObj, 'spareObj': spareObj, 'overhaulObj': overhaulObj, 'disableObj': disableObj } |
| | | }, |
| | | |
| | | activityRowClick (row) { |
| | | this.$EventBus.$emit('toPosition', { |
| | | layerName: 'activityLayers', |