设备数据完善及echarts数据联动

guanqb

2022-10-29 c07ea67d6c2c1a6df495fd4f29bfae3a0b99598b

设备数据完善及echarts数据联动

 src/views/home/components/rightContainer.vue

@@ -227,7 +227,19 @@
                { 'carID': '#55555', 'carType': '大众', 'policeStation': '沙溪派出所', 'area': '责任区1' },
                { 'carID': '#66666', 'carType': '宝马', 'policeStation': '沙溪派出所', 'area': '责任区1' },
                { 'carID': '#77777', 'carType': '奔驰', 'policeStation': '沙溪派出所', 'area': '责任区2' },
                { 'carID': '#88888', 'carType': '红旗', 'policeStation': '沙溪派出所', 'area': '责任区2' }
                { 'carID': '#88888', 'carType': '红旗', 'policeStation': '沙溪派出所', 'area': '责任区2' },
                { 'carID': '*99911', 'carType': '大众', 'policeStation': '北门派出所', 'area': '责任区1' },
                { 'carID': '*99922', 'carType': '宝马', 'policeStation': '北门派出所', 'area': '责任区1' },
                { 'carID': '*99933', 'carType': '奔驰', 'policeStation': '北门派出所', 'area': '责任区2' },
                { 'carID': '*99944', 'carType': '红旗', 'policeStation': '北门派出所', 'area': '责任区2' },
                { 'carID': '*99955', 'carType': '大众', 'policeStation': '灵溪派出所', 'area': '责任区1' },
                { 'carID': '*99966', 'carType': '宝马', 'policeStation': '灵溪派出所', 'area': '责任区1' },
                { 'carID': '*99977', 'carType': '奔驰', 'policeStation': '灵溪派出所', 'area': '责任区2' },
                { 'carID': '*99988', 'carType': '红旗', 'policeStation': '灵溪派出所', 'area': '责任区2' },
                { 'carID': '#11***', 'carType': '大众', 'policeStation': '江光派出所', 'area': '责任区1' },
                { 'carID': '#22***', 'carType': '宝马', 'policeStation': '江光派出所', 'area': '责任区1' },
                { 'carID': '#33***', 'carType': '奔驰', 'policeStation': '江光派出所', 'area': '责任区2' },
                { 'carID': '#44***', 'carType': '红旗', 'policeStation': '江光派出所', 'area': '责任区2' }
            ],
            phoneArr: [
                { 'phoneID': '188XXX11111', 'phoneType': '魅族', 'policeStation': '车站派出所', 'area': '责任区1' },
@@ -237,7 +249,19 @@
                { 'phoneID': '188XXX55555', 'phoneType': '三星', 'policeStation': '沙溪派出所', 'area': '责任区1' },
                { 'phoneID': '188XXX66666', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区1' },
                { 'phoneID': '188XXX77777', 'phoneType': '小米', 'policeStation': '沙溪派出所', 'area': '责任区2' },
                { 'phoneID': '188XXX88888', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区2' }
                { 'phoneID': '188XXX88888', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区2' },
                { 'phoneID': '133XXX11111', 'phoneType': '魅族', 'policeStation': '北门派出所', 'area': '责任区1' },
                { 'phoneID': '133XXX22222', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区1' },
                { 'phoneID': '133XXX33333', 'phoneType': '一加', 'policeStation': '北门派出所', 'area': '责任区2' },
                { 'phoneID': '133XXX44444', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区2' },
                { 'phoneID': '133XXX55555', 'phoneType': '三星', 'policeStation': '灵溪派出所', 'area': '责任区1' },
                { 'phoneID': '133XXX66666', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区1' },
                { 'phoneID': '133XXX77777', 'phoneType': '小米', 'policeStation': '灵溪派出所', 'area': '责任区2' },
                { 'phoneID': '133XXX88888', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区2' },
                { 'phoneID': '175XXX11111', 'phoneType': '魅族', 'policeStation': '江光派出所', 'area': '责任区1' },
                { 'phoneID': '175XXX22222', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区1' },
                { 'phoneID': '175XXX33333', 'phoneType': '一加', 'policeStation': '江光派出所', 'area': '责任区2' },
                { 'phoneID': '175XXX44444', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区2' }
            ],
            recorderArr: [
                { 'recorderID': 'ABC111', 'recorderType': '爱国者', 'policeStation': '车站派出所', 'area': '责任区1' },
@@ -247,7 +271,19 @@
                { 'recorderID': 'ABC555', 'recorderType': '执法鹰眼', 'policeStation': '沙溪派出所', 'area': '责任区1' },
                { 'recorderID': 'ABC666', 'recorderType': '致业', 'policeStation': '沙溪派出所', 'area': '责任区1' },
                { 'recorderID': 'ABC777', 'recorderType': '联想', 'policeStation': '沙溪派出所', 'area': '责任区2' },
                { 'recorderID': 'ABC888', 'recorderType': '高新兴', 'policeStation': '沙溪派出所', 'area': '责任区2' }
                { 'recorderID': 'ABC888', 'recorderType': '高新兴', 'policeStation': '沙溪派出所', 'area': '责任区2' },
                { 'recorderID': 'FFF111', 'recorderType': '爱国者', 'policeStation': '北门派出所', 'area': '责任区1' },
                { 'recorderID': 'FFF222', 'recorderType': '百步通', 'policeStation': '北门派出所', 'area': '责任区1' },
                { 'recorderID': 'FFF333', 'recorderType': '飞利浦', 'policeStation': '北门派出所', 'area': '责任区2' },
                { 'recorderID': 'FFF444', 'recorderType': '途强', 'policeStation': '北门派出所', 'area': '责任区2' },
                { 'recorderID': 'FFF555', 'recorderType': '执法鹰眼', 'policeStation': '灵溪派出所', 'area': '责任区1' },
                { 'recorderID': 'FFF666', 'recorderType': '致业', 'policeStation': '灵溪派出所', 'area': '责任区1' },
                { 'recorderID': 'FFF777', 'recorderType': '联想', 'policeStation': '灵溪派出所', 'area': '责任区2' },
                { 'recorderID': 'FFF888', 'recorderType': '高新兴', 'policeStation': '灵溪派出所', 'area': '责任区2' },
                { 'recorderID': 'GGG111', 'recorderType': '爱国者', 'policeStation': '江光派出所', 'area': '责任区1' },
                { 'recorderID': 'GGG222', 'recorderType': '百步通', 'policeStation': '江光派出所', 'area': '责任区1' },
                { 'recorderID': 'GGG333', 'recorderType': '飞利浦', 'policeStation': '江光派出所', 'area': '责任区2' },
                { 'recorderID': 'GGG444', 'recorderType': '途强', 'policeStation': '江光派出所', 'area': '责任区2' },
            ],
        }
    },
@@ -265,17 +301,11 @@
        initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')
            equipmentmyChart = this.$echarts.init(chartDom)
            var option
            let dataArr = [
                { value: 4664, name: '车辆' },
                { value: 310, name: '摄像头' },
                { value: 279, name: '执法记录仪' },
                { value: 241, name: '手台' },
            ]
            for (let i = 0; i < dataArr.length; i++) {
                this.regionTotal += dataArr[i].value
            }
            option = {
            equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData('全部')))
        },

        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
                    trigger: 'item'
                },
@@ -287,11 +317,10 @@
                        color: '#fff'
                    },
                    formatter: function (name) {
                        let data = option.series[0].data
                        let tarValue
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].name == name) {
                                tarValue = data[i].value
                        for (let i = 0; i < dataArr.length; i++) {
                            if (dataArr[i].name == name) {
                                tarValue = dataArr[i].value
                            }
                        }
                        let v = tarValue
@@ -322,8 +351,6 @@
                    y2: 20
                },
            }

            option && equipmentmyChart.setOption(option)
        },

        initEventChangeEcharts () {
@@ -413,7 +440,7 @@
                this.underwayArr = this.underwaySaveArr
                this.historyArr = this.historySaveArr
            }

            equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(police)), true)
        },

        selectPoliceChangeEventData (police) {
@@ -430,9 +457,49 @@
            } else if (police == '江光派出所') {
                eventchangemychart.setOption(this.initEventChangeOption([1, 1, 3, 2, 1, 0, 2]), true)
            }
        },

        getEquimentDataCount (data, policeStationName) {
            let count = 0
            data.some(item => {
                if (item.policeStation == policeStationName) {
                    count = Number(count) + 1
                }
            })
            return count
        },

        getEquimentChartData (policeStationName) {
            let dataArr = []
            let phoneCount = 0
            let carCount = 0
            let recorderCount = 0
            let monitor = 0
            if (policeStationName == '全部') {
                phoneCount = this.phoneArr.length
                carCount = this.carArr.length
                recorderCount = this.recorderArr.length
                monitor = 10
            } else {
                phoneCount = this.getEquimentDataCount(this.phoneArr, policeStationName)
                carCount = this.getEquimentDataCount(this.carArr, policeStationName)
                recorderCount = this.getEquimentDataCount(this.recorderArr, policeStationName)
                monitor = 10
            }
            dataArr = [
                { value: carCount, name: '车辆' },
                { value: monitor, name: '摄像头' },
                { value: recorderCount, name: '执法记录仪' },
                { value: phoneCount, name: '手台' },
            ]
            this.regionTotal = phoneCount + monitor + carCount + recorderCount
            return dataArr
        }





    }
}
</script>

 src/views/home/index.vue

@@ -350,27 +350,62 @@
    {
        label: '全部',
        id: '1',
        children: [{
            label: '车站派出所',
            id: '2',
            children: [{
                label: '责任区1',
                id: '4',
            }, {
                label: '责任区2',
                id: '5',
        children: [
            {
                label: '车站派出所',
                id: '2',
                children: [{
                    label: '责任区1',
                    id: '4',
                }, {
                    label: '责任区2',
                    id: '5',
                }]
            },
            {
                label: '沙溪派出所',
                id: '3',
                children: [{
                    label: '责任区1',
                    id: '6',
                }, {
                    label: '责任区2',
                    id: '7',
                }]
            },
            {
                label: '北门派出所',
                id: '8',
                children: [{
                    label: '责任区1',
                    id: '9',
                }, {
                    label: '责任区2',
                    id: '10',
                }]
            },
            {
                label: '灵溪派出所',
                id: '11',
                children: [{
                    label: '责任区1',
                    id: '12',
                }, {
                    label: '责任区2',
                    id: '13',
                }]
            },
            {
                label: '江光派出所',
                id: '14',
                children: [{
                    label: '责任区1',
                    id: '15',
                }, {
                    label: '责任区2',
                    id: '16',
                }]
            }]
        }, {
            label: '沙溪派出所',
            id: '3',
            children: [{
                label: '责任区1',
                id: '6',
            }, {
                label: '责任区2',
                id: '7',
            }]
        }]
    }
]

@@ -458,28 +493,58 @@
                ),
            ],
            jurisdictionData: [{
                label: '全部',
                id: '1',
                label: '车站派出所',
                id: '2',
                children: [{
                    label: '车站派出所',
                    id: '2',
                    children: [{
                        label: '责任区1',
                        id: '4',
                    }, {
                        label: '责任区2',
                        id: '5',
                    }]
                    label: '责任区1',
                    id: '4',
                }, {
                    label: '沙溪派出所',
                    id: '3',
                    children: [{
                        label: '责任区1',
                        id: '6',
                    }, {
                        label: '责任区2',
                        id: '7',
                    }]
                    label: '责任区2',
                    id: '5',
                }]
            },
            {
                label: '沙溪派出所',
                id: '3',
                children: [{
                    label: '责任区1',
                    id: '6',
                }, {
                    label: '责任区2',
                    id: '7',
                }]
            },
            {
                label: '北门派出所',
                id: '8',
                children: [{
                    label: '责任区1',
                    id: '9',
                }, {
                    label: '责任区2',
                    id: '10',
                }]
            },
            {
                label: '灵溪派出所',
                id: '11',
                children: [{
                    label: '责任区1',
                    id: '12',
                }, {
                    label: '责任区2',
                    id: '13',
                }]
            },
            {
                label: '江光派出所',
                id: '14',
                children: [{
                    label: '责任区1',
                    id: '15',
                }, {
                    label: '责任区2',
                    id: '16',
                }]
            }],
            defaultProps: {
@@ -1044,6 +1109,78 @@
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 8) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '北门派出所') {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 9) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '北门派出所' && item.area == "责任区1") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 10) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '北门派出所' && item.area == "责任区2") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 11) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '灵溪派出所') {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 12) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '灵溪派出所' && item.area == "责任区1") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 13) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '灵溪派出所' && item.area == "责任区2") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 14) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '江光派出所') {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 15) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '江光派出所' && item.area == "责任区1") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 16) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '江光派出所' && item.area == "责任区2") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            }
        },

@@ -1082,7 +1219,10 @@
                    }
                })
                this.showArr = arr1
            } else {
                this.jurisdictionData = treeData
            }

        },

        showkeypersondetail (name, arr) {