forked from srs-police-affairs
| src/views/home/components/leftContainer.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/home/components/rightContainer.vue | ●●●●● patch | view | raw | blame | history |
src/views/home/components/leftContainer.vue
@@ -141,6 +141,8 @@ let houseMyChart let landMyChart let leftTiming = null let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62'] const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1'] @@ -300,11 +302,24 @@ this.isAllPoliceStation = true } this.personTabClick(0) this.personTabClick(this.tabType) this.houseTabClick(0) this.houseTabClick(this.tabTypeTwo) this.landTabClick(0) this.landTabClick(this.tabTypeThree) if (leftTiming != null) { clearInterval(leftTiming) leftTiming = null } leftTiming = setInterval(async () => { this.personTabClick(this.tabType) this.houseTabClick(this.tabTypeTwo) this.landTabClick(this.tabTypeThree) }, 60000) }, /** @@ -557,6 +572,8 @@ */ getHouseStatisticInfo (isFollow) { getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => { this.disposeHouseEchart() let xDate = [] let yDate = [] if (isFollow == 1) { @@ -674,6 +691,8 @@ houseTabClick (type) { this.tabTypeTwo = type this.disposeHouseEchart() if (type == 0) { this.getHouseStatisticInfo(2) } else { @@ -928,6 +947,7 @@ landTabClick (type) { this.tabTypeThree = type this.disposeLandEchart() if (type == 0) { this.getAreaStatisticInfo(2) } else if (type == 1) { @@ -943,6 +963,8 @@ */ getAreaStatisticInfo (type) { getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => { this.disposeLandEchart() let landData = [] if (type == 2) { this.areaNum = res.data.data.areaNum @@ -1032,22 +1054,18 @@ * @description: 销毁所有echarts实例，解绑点击事件 * @return {*} */ disposeAllEchart () { if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) { homePersonmyChart.dispose() homePersonmyChart.off('click') } if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) { keyPersonmyChart.dispose() keyPersonmyChart.off('click') } disposeHouseEchart () { if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) { houseMyChart.dispose() houseMyChart.off('click') } }, /** * @description: 销毁所有echarts实例，解绑点击事件 * @return {*} */ disposeLandEchart () { if (landMyChart != null && landMyChart != '' && landMyChart != undefined) { landMyChart.dispose() landMyChart.off('click') @@ -1058,7 +1076,9 @@ destroyed () { window.removeEventListener("resize", this.echartsResize) this.disposeAllEchart() this.disposeEchart() this.disposeHouseEchart() this.disposeLandEchart() } } </script> src/views/home/components/rightContainer.vue
@@ -388,7 +388,7 @@ // 现有设备统计 getEquipment () { const typeData = { carCount: '警车', carCount: '车辆', monitorCount: '摄像头', recorderCount: '手台', phoneCount: '手持记录仪' @@ -418,8 +418,8 @@ 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 @@ -428,12 +428,12 @@ 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] @@ -454,7 +454,21 @@ const data = await this.getEquipment() equipmentmyChart.setOption(this.initEquipmentOptions(data), true) const newData = data.filter(item => { if (item.value != 0) { return item } }) equipmentmyChart.setOption(this.initEquipmentOptions(newData)) if (newData.length > 1) { this.equipmentEchartsCarousel() } else { clearInterval(timer) equipmentmyChart.off('mouseover') equipmentmyChart.off('mouseout') } }, // 现有设备饼图初始化 @@ -472,7 +486,7 @@ } }) equipmentmyChart.setOption(this.initEquipmentOptions(data)) equipmentmyChart.setOption(this.initEquipmentOptions(newData)) if (newData.length > 1) { this.equipmentEchartsCarousel() @@ -481,7 +495,6 @@ equipmentmyChart.off('mouseover') equipmentmyChart.off('mouseout') } }, // 现有设备options饼图数据 @@ -493,7 +506,7 @@ 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> @@ -505,7 +518,14 @@ <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 }, @@ -572,16 +592,7 @@ } 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: {
