shuishen
2022-11-15 962e7532e52402db3d613863c3a4d75e047e1ed3
src/views/home/components/rightContainer.vue
@@ -57,13 +57,13 @@
                    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>
@@ -165,7 +165,15 @@
                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%',
@@ -222,7 +230,20 @@
                        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: {
@@ -428,14 +449,18 @@
            }
        },
        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) {
@@ -443,64 +468,111 @@
            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',