冒泡弹窗配置和设备echarts调整

guanqb

2022-11-15 99e1739d2ac647a51c36bdcd8c04d08069b7b5d4

冒泡弹窗配置和设备echarts调整

 src/assets/data/equimentsDate/car.js

@@ -1,22 +1,22 @@
export default [
    { 'carID': '#11111', 'carType': '大众', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '在线' },
    { 'carID': '#22222', 'carType': '宝马', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '离线' },
    { 'carID': '#33333', 'carType': '奔驰', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '在线' },
    { 'carID': '#44444', 'carType': '红旗', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '离线' },
    { 'carID': '#55555', 'carType': '大众', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '在线' },
    { 'carID': '#66666', 'carType': '宝马', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '离线' },
    { 'carID': '#77777', 'carType': '奔驰', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '离线' },
    { 'carID': '#88888', 'carType': '红旗', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '离线' },
    { 'carID': '*99911', 'carType': '大众', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '在线' },
    { 'carID': '*99922', 'carType': '宝马', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '离线' },
    { 'carID': '*99933', 'carType': '奔驰', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '在线' },
    { 'carID': '*99944', 'carType': '红旗', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '离线' },
    { 'carID': '*99955', 'carType': '大众', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '离线' },
    { 'carID': '*99966', 'carType': '宝马', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '离线' },
    { 'carID': '*99977', 'carType': '奔驰', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '在线' },
    { 'carID': '*99988', 'carType': '红旗', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '离线' },
    { 'carID': '#11***', 'carType': '大众', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '在线' },
    { 'carID': '#22***', 'carType': '宝马', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '离线' },
    { 'carID': '#33***', 'carType': '奔驰', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '在线' },
    { 'carID': '#44***', 'carType': '红旗', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '离线' }
    { 'carID': '#11111', 'carType': '大众', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '运行' },
    { 'carID': '#22222', 'carType': '宝马', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '备用' },
    { 'carID': '#33333', 'carType': '奔驰', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '检修' },
    { 'carID': '#44444', 'carType': '红旗', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '禁用' },
    { 'carID': '#55555', 'carType': '大众', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '运行' },
    { 'carID': '#66666', 'carType': '宝马', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '备用' },
    { 'carID': '#77777', 'carType': '奔驰', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '检修' },
    { 'carID': '#88888', 'carType': '红旗', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '禁用' },
    { 'carID': '*99911', 'carType': '大众', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '运行' },
    { 'carID': '*99922', 'carType': '宝马', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '备用' },
    { 'carID': '*99933', 'carType': '奔驰', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '检修' },
    { 'carID': '*99944', 'carType': '红旗', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '禁用' },
    { 'carID': '*99955', 'carType': '大众', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '运行' },
    { 'carID': '*99966', 'carType': '宝马', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '备用' },
    { 'carID': '*99977', 'carType': '奔驰', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '检修' },
    { 'carID': '*99988', 'carType': '红旗', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '禁用' },
    { 'carID': '#11***', 'carType': '大众', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '运行' },
    { 'carID': '#22***', 'carType': '宝马', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '备用' },
    { 'carID': '#33***', 'carType': '奔驰', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '检修' },
    { 'carID': '#44***', 'carType': '红旗', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '禁用' }
]

 src/assets/data/equimentsDate/phone.js

@@ -1,22 +1,22 @@
export default [
    { 'phoneID': '188XXX11111', 'phoneType': '魅族', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '在线' },
    { 'phoneID': '188XXX22222', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '离线' },
    { 'phoneID': '188XXX33333', 'phoneType': '一加', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '在线' },
    { 'phoneID': '188XXX44444', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '在线' },
    { 'phoneID': '188XXX55555', 'phoneType': '三星', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '在线' },
    { 'phoneID': '188XXX66666', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '离线' },
    { 'phoneID': '188XXX77777', 'phoneType': '小米', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '在线' },
    { 'phoneID': '188XXX88888', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '在线' },
    { 'phoneID': '133XXX11111', 'phoneType': '魅族', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '在线' },
    { 'phoneID': '133XXX22222', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '离线' },
    { 'phoneID': '133XXX33333', 'phoneType': '一加', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '在线' },
    { 'phoneID': '133XXX44444', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '在线' },
    { 'phoneID': '133XXX55555', 'phoneType': '三星', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '在线' },
    { 'phoneID': '133XXX66666', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '离线' },
    { 'phoneID': '133XXX77777', 'phoneType': '小米', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '在线' },
    { 'phoneID': '133XXX88888', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '离线' },
    { 'phoneID': '175XXX11111', 'phoneType': '魅族', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '在线' },
    { 'phoneID': '175XXX22222', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '在线' },
    { 'phoneID': '175XXX33333', 'phoneType': '一加', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '在线' },
    { 'phoneID': '175XXX44444', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '离线' }
    { 'phoneID': '188XXX11111', 'phoneType': '魅族', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '检修' },
    { 'phoneID': '188XXX22222', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '禁用' },
    { 'phoneID': '188XXX33333', 'phoneType': '一加', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '运行' },
    { 'phoneID': '188XXX44444', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '运行' },
    { 'phoneID': '188XXX55555', 'phoneType': '三星', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '检修' },
    { 'phoneID': '188XXX66666', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '禁用' },
    { 'phoneID': '188XXX77777', 'phoneType': '小米', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '运行' },
    { 'phoneID': '188XXX88888', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '检修' },
    { 'phoneID': '133XXX11111', 'phoneType': '魅族', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '检修' },
    { 'phoneID': '133XXX22222', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '禁用' },
    { 'phoneID': '133XXX33333', 'phoneType': '一加', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '运行' },
    { 'phoneID': '133XXX44444', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '备用' },
    { 'phoneID': '133XXX55555', 'phoneType': '三星', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '检修' },
    { 'phoneID': '133XXX66666', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '禁用' },
    { 'phoneID': '133XXX77777', 'phoneType': '小米', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '运行' },
    { 'phoneID': '133XXX88888', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '备用' },
    { 'phoneID': '175XXX11111', 'phoneType': '魅族', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '检修' },
    { 'phoneID': '175XXX22222', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '禁用' },
    { 'phoneID': '175XXX33333', 'phoneType': '一加', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '运行' },
    { 'phoneID': '175XXX44444', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '运行' }
]

 src/assets/data/equimentsDate/recorder.js

@@ -1,22 +1,22 @@
export default [
    { 'recorderID': 'ABC111', 'recorderType': '爱国', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '在线' },
    { 'recorderID': 'ABC222', 'recorderType': '百步', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '在线' },
    { 'recorderID': 'ABC333', 'recorderType': '飞利', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '在线' },
    { 'recorderID': 'ABC444', 'recorderType': '途强', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '离线' },
    { 'recorderID': 'ABC555', 'recorderType': '鹰眼', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '在线' },
    { 'recorderID': 'ABC666', 'recorderType': '致业', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '离线' },
    { 'recorderID': 'ABC777', 'recorderType': '联想', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '在线' },
    { 'recorderID': 'ABC888', 'recorderType': '高新', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '在线' },
    { 'recorderID': 'FFF111', 'recorderType': '爱国', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '在线' },
    { 'recorderID': 'FFF222', 'recorderType': '百步', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '离线' },
    { 'recorderID': 'FFF333', 'recorderType': '飞利', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '在线' },
    { 'recorderID': 'FFF444', 'recorderType': '途强', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '离线' },
    { 'recorderID': 'FFF555', 'recorderType': '鹰眼', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '在线' },
    { 'recorderID': 'FFF666', 'recorderType': '致业', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '离线' },
    { 'recorderID': 'FFF777', 'recorderType': '联想', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '在线' },
    { 'recorderID': 'FFF888', 'recorderType': '高新', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '在线' },
    { 'recorderID': 'GGG111', 'recorderType': '爱国', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '在线' },
    { 'recorderID': 'GGG222', 'recorderType': '百步', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '离线' },
    { 'recorderID': 'GGG333', 'recorderType': '飞利', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '在线' },
    { 'recorderID': 'GGG444', 'recorderType': '途强', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '离线' },
    { 'recorderID': 'ABC111', 'recorderType': '爱国', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '检修' },
    { 'recorderID': 'ABC222', 'recorderType': '百步', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '禁用' },
    { 'recorderID': 'ABC333', 'recorderType': '飞利', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '运行' },
    { 'recorderID': 'ABC444', 'recorderType': '途强', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '备用' },
    { 'recorderID': 'ABC555', 'recorderType': '鹰眼', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '检修' },
    { 'recorderID': 'ABC666', 'recorderType': '致业', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '禁用' },
    { 'recorderID': 'ABC777', 'recorderType': '联想', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '运行' },
    { 'recorderID': 'ABC888', 'recorderType': '高新', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '备用' },
    { 'recorderID': 'FFF111', 'recorderType': '爱国', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '检修' },
    { 'recorderID': 'FFF222', 'recorderType': '百步', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '禁用' },
    { 'recorderID': 'FFF333', 'recorderType': '飞利', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '运行' },
    { 'recorderID': 'FFF444', 'recorderType': '途强', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '备用' },
    { 'recorderID': 'FFF555', 'recorderType': '鹰眼', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '检修' },
    { 'recorderID': 'FFF666', 'recorderType': '致业', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '禁用' },
    { 'recorderID': 'FFF777', 'recorderType': '联想', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '运行' },
    { 'recorderID': 'FFF888', 'recorderType': '高新', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '禁用' },
    { 'recorderID': 'GGG111', 'recorderType': '爱国', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '检修' },
    { 'recorderID': 'GGG222', 'recorderType': '百步', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '禁用' },
    { 'recorderID': 'GGG333', 'recorderType': '飞利', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '运行' },
    { 'recorderID': 'GGG444', 'recorderType': '途强', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '禁用' },
]

 src/components/map/components/mapPopup.vue

New file
@@ -0,0 +1,28 @@
<template>
    <div>
        <div v-if="detailsPopup" id="divFormsDomBox" class="wwwwwwwww">55555555555</div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'mapPopup',
    computed: {
        ...mapGetters([
            'detailsPopup'
        ])
    }
}
</script>

<style>
.wwwwwwwww {
    position: fixed;
    left: 0;
    z-index: 1 !important;
    width: 200px;
    height: 300px;
    background: red;
}
</style>

 src/components/map/index.vue

@@ -49,6 +49,8 @@
                <span :class="{on:imgtype == 1}">矢量</span>
            </div>
        </div>

        <map-popup></map-popup>
    </div>
</template>

@@ -72,9 +74,13 @@
    sdTilesetLayer: null
}

import mapPopup from './components/mapPopup.vue'

export default {
    name: 'mapBox',

    components: { mapPopup },

    data () {
        return {
            fullscreen: false,

 src/divForms/divForms.js

New file
@@ -0,0 +1,105 @@
/*
 * @Descripttion:
 * @version: 0.01
 * @Author: Morpheus
 * @Date: 2020-10-22 11:05:09
 * @LastEditors: Morpheus
 * @LastEditTime: 2020-10-22 13:48:22
 */

import store from '@/store/index'
class DivForms {
    /**
     * @popup 存放 dom 相关
     *
     */
    constructor(viewer, popup) {
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this.appendPopup()
    }

    get viewer () {
        return this._viewer
    }

    get popup () {
        return this._popup
    }

    get position () {
        return this._position
    }

    appendPopup () {
        /**
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId)
    }

    // 创建元素并追加
    createVideoWindowAll (id) {
        this.clearMove(id)

        this._viewer.scene.postRender.addEventListener(this.movePopup(id))
    }

    movePopup (id) {
        var self = this
        return function () {
            var position = global.DC.Transform.transformCartesianToWGS84(self._position[0])
            var positionChange = null
            // if (store.state.viewer.twoOrThree == '三 维') {
            positionChange = global.DC.Transform.transformWGS84ToCartesian(
                new global.DC.Position(
                    Number(position.lng),
                    Number(position.lat),
                    Number(0)
                )
            )
            // } else {
            //     positionChange = global.DC.Transform.transformWGS84ToCartesian(
            //         new global.DC.Position(
            //             Number(position.lng),
            //             Number(position.lat),
            //             Number(150)
            //         )
            //     )
            // }

            const windowCoord = global.DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                positionChange
            )

            self.positionPopUp(windowCoord, id)
        }
    }

    clearMove (id) {
        this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
    }

    positionPopUp (windowCoord, id) {
        if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
            this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
            return
        }
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
            windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
            const x = windowCoord.x
            const y = windowCoord.y - document.getElementById(id).offsetHeight
            // x = windowCoord.x - document.getElementById(id).offsetWidth

            document.getElementById(id).style.cssText = `
            visibility:visible;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
            `
        }
    }
}

export default DivForms

 src/divForms/panoramaBox.js

New file
@@ -0,0 +1,99 @@
/*
 * @Descripttion:
 * @version: 0.01
 * @Author: Morpheus
 * @Date: 2020-10-22 11:05:09
 * @LastEditors: Morpheus
 * @LastEditTime: 2020-10-22 13:48:22
 */
import store from '@/store/index'
class PanoramaBox {
    /**
     * @popup 存放 dom 相关
     *
     */
    constructor(viewer, popup) {
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this.appendPopup()
    }

    get viewer () {
        return this._viewer
    }

    get popup () {
        return this._popup
    }

    get position () {
        return this._position
    }

    appendPopup () {
        /**
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId)
    }

    // 创建元素并追加
    createVideoWindowAll (id) {
        this._viewer.scene.postRender.addEventListener(this.movePopup(id))
    }

    movePopup (id) {
        var self = this
        return function () {
            var position = global.DC.Transform.transformCartesianToWGS84(self._position[0])
            var positionChange = null
            if (store.state.viewer.twoOrThree == '三 维') {
                positionChange = global.DC.Transform.transformWGS84ToCartesian(
                    new global.DC.Position(
                        Number(position.lng),
                        Number(position.lat),
                        Number(0)
                    )
                )
            } else {
                positionChange = global.DC.Transform.transformWGS84ToCartesian(
                    new global.DC.Position(
                        Number(position.lng),
                        Number(position.lat),
                        Number(150)
                    )
                )
            }

            const windowCoord = global.DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                positionChange
            )

            self.positionPopUp(windowCoord, id)
        }
    }

    positionPopUp (windowCoord, id) {
        if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
            this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
            return
        }
        if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
            windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
            const x = windowCoord.x
            const y = windowCoord.y - document.getElementById(id).offsetHeight
            // x = windowCoord.x - document.getElementById(id).offsetWidth

            document.getElementById(id).style.cssText = `
            visibility:visible;
            z-index:1;
            transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
            `
        }
    }
}

export default PanoramaBox

 src/main.js

@@ -17,6 +17,8 @@

import * as echarts from 'echarts'

import DivForms from '@/divForms/divForms'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './styles/index.scss'
@@ -50,6 +52,8 @@
global.echarts = echarts
global.viewer = null

DC.DivForms = DivForms

DC.use(DcCore) //安装DC核心库
DC.use(DcChart) //安装DC图标库，使用前确保echarts为全局函数
DC.use(DcMapv) //安装Mapv库

 src/store/getters.js

New file
@@ -0,0 +1,4 @@
const getters = {
    detailsPopup: (state) => state.popupParams.detailsPopup
}
export default getters

 src/store/index.js

@@ -1,15 +1,16 @@
import Vue from 'vue'
import Vuex from 'vuex'

import popupParams from './modules/popupParams'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
const store = new Vuex.Store({
    modules: {
        popupParams
    },
    getters
})

export default store

 src/store/modules/popupParams.js

New file
@@ -0,0 +1,15 @@
const popupParams = {
    state: {
        detailsPopup: false
    },
    mutations: {
        SET_DETAILSPOPUP (state, detailsPopup) {
            state.detailsPopup = detailsPopup
        }
    },
    actions: {

    }
}

export default popupParams

 src/styles/dc/index.scss

@@ -14,6 +14,7 @@
    bottom: 10px !important;
    transform: translate(-50%, 0);
    background-color: $bg-color !important;
    z-index: 99;

}


 src/views/home/components/bottomContainer.vue

@@ -178,11 +178,22 @@
                    siteJd: Number(item.position[0]),
                    siteWd: Number(item.position[1])
                })
                this.$store.commit('SET_DETAILSPOPUP', true)
                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'divFormsDomBox',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(item.position[0]),
                                Number(item.position[1]),
                                0
                            )
                        )
                    ]
                })
            } else {
                this.$emit('policeSituationSiteClick', item)
                console.log(11, item.index)
            }

        },

        handleSelectClick (e) {

 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:#00fe01">警车：${params.data.carCount}台</span><span style="margin-left:10px;color:#949494">监控：${params.data.monitorCount}台</span><br /><span style="color:#fe2929">手台${params.data.phoneCount}台</span><span style="margin-left:10px;color:#69a9ff">手持记录仪：${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%',
@@ -428,14 +436,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,63 +455,109 @@
            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', {

 src/views/home/index.vue

@@ -371,14 +371,14 @@
                <div>报警人联系人:</div>
                <div>{{ policeSituationDetailArr.callPhone }}</div>
            </div>
            <div class="item">
            <!-- <div class="item">
                <div>经度:</div>
                <div>{{ policeSituationDetailArr.lng }}</div>
            </div>
            <div class="item">
                <div>纬度:</div>
                <div>{{ policeSituationDetailArr.lat }}</div>
            </div>
            </div>-->
            <div class="dialog-content">
                <div>报警内容:</div>
                <div>{{ policeSituationDetailArr.callContent }}</div>
@@ -1525,6 +1525,7 @@
        width: 400px;
        height: calc(100% - 80px);
        background: $bg-color;
        z-index: 99;
    }

    .right-container {
@@ -1536,6 +1537,7 @@
        width: 400px;
        height: calc(100% - 80px);
        background: $bg-color;
        z-index: 99;
    }

    .center-container {
@@ -1544,6 +1546,7 @@
        left: 50%;
        bottom: 320px;
        transform: translate(-50%, 0);
        z-index: 99;

        .layers-control-btn {
            display: flex;
@@ -1667,6 +1670,7 @@
        width: calc(100% - 800px);
        background-color: $bg-color;
        box-sizing: border-box;
        z-index: 99;
    }

    .region-select {
@@ -1675,6 +1679,7 @@
        top: 20px;
        width: 640px;
        height: 36px;
        z-index: 99;

        .map-select {
            margin: 0 5px;