guanqb
2023-02-08 f40918f9c3b4de685190ef0aec678fff4d3bca47
src/views/home/components/rightContainer.vue
@@ -81,8 +81,8 @@
                <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>
@@ -103,6 +103,7 @@
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
@@ -201,7 +202,18 @@
            this.initEventChangeEcharts()
            this.initEquipmentEcharts()
            this.initEquipmentEcharts(this.linetype)
            if (rightTiming != null) {
                clearInterval(rightTiming)
                rightTiming = null
            }
            rightTiming = setInterval(async () => {
                this.initEquipmentEcharts(this.linetype)
            }, 600000)
        },
        getSchedulingList () {
@@ -388,7 +400,7 @@
        // 现有设备统计
        getEquipment () {
            const typeData = {
                carCount: '警车',
                carCount: '车辆',
                monitorCount: '摄像头',
                recorderCount: '手台',
                phoneCount: '手持记录仪'
@@ -418,8 +430,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 +440,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]
@@ -448,20 +460,16 @@
            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()
@@ -472,7 +480,7 @@
                }
            })
            equipmentmyChart.setOption(this.initEquipmentOptions(data))
            equipmentmyChart.setOption(this.initEquipmentOptions(newData))
            if (newData.length > 1) {
                this.equipmentEchartsCarousel()
@@ -481,7 +489,6 @@
                equipmentmyChart.off('mouseover')
                equipmentmyChart.off('mouseout')
            }
        },
        // 现有设备options饼图数据
@@ -493,7 +500,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 +512,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 +586,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: {