Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

guanqb

2022-09-20 d057c8fdb1ed9db6cfcebacb146cd0ffbc1ad7fe

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 .gitignore

@@ -1,6 +1,7 @@
.DS_Store
node_modules
/dist
/public/sd


# local env files

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-17 16:21:14
 * @LastEditTime: 2022-09-19 18:19:53
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -34,12 +34,18 @@

var siteEntitylayers = null

let layersObjce = {
let layersObjcect = {
    housingEstateLayer: null,
    patrolWagonLayer: null,
    handMachineLayer: null,
    monitoringLayer: null,
    panoramaLayer: null
}

let tilesetLayer = null

let tilesetObject = {
    sdTilesetLayer: null
}

export default {
@@ -187,17 +193,36 @@

            // 图层加入地图

            layersObjce.housingEstateLayer = new global.DC.VectorLayer('housingEstateLayer')
            global.viewer.addLayer(layersObjce.housingEstateLayer)
            layersObjce.patrolWagonLayer = new global.DC.VectorLayer('patrolWagonLayer')
            global.viewer.addLayer(layersObjce.patrolWagonLayer)
            layersObjce.handMachineLayer = new global.DC.VectorLayer('handMachineLayer')
            global.viewer.addLayer(layersObjce.handMachineLayer)
            layersObjce.monitoringLayer = new global.DC.VectorLayer('monitoringLayer')
            global.viewer.addLayer(layersObjce.monitoringLayer)
            layersObjce.panoramaLayer = new global.DC.VectorLayer('panoramaLayer')
            global.viewer.addLayer(layersObjce.panoramaLayer)
            layersObjcect.housingEstateLayer = new global.DC.VectorLayer('housingEstateLayer')
            global.viewer.addLayer(layersObjcect.housingEstateLayer)
            layersObjcect.patrolWagonLayer = new global.DC.VectorLayer('patrolWagonLayer')
            global.viewer.addLayer(layersObjcect.patrolWagonLayer)
            layersObjcect.handMachineLayer = new global.DC.VectorLayer('handMachineLayer')
            global.viewer.addLayer(layersObjcect.handMachineLayer)
            layersObjcect.monitoringLayer = new global.DC.VectorLayer('monitoringLayer')
            global.viewer.addLayer(layersObjcect.monitoringLayer)
            layersObjcect.panoramaLayer = new global.DC.VectorLayer('panoramaLayer')
            global.viewer.addLayer(layersObjcect.panoramaLayer)

            // 模型图层添加
            tilesetLayer = new global.DC.TilesetLayer('tilesetLayer')
            global.viewer.addLayer(tilesetLayer)

            // 加载围栏
            let layer = new global.DC.VectorLayer('layer')
            global.viewer.addLayer(layer)

            let wall = new global.DC.Wall(
                '116.018142,28.688089,100.0; 116.017756,28.684648,100.0; 116.019507,28.677570,100.0; 116.033653,28.675634,100.0; 116.034223,28.681389,100.0; 116.033483,28.687265,100.0; 116.018142,28.688089,100.0'
            )

            wall.setStyle({
                material: new global.DC.WallTrailMaterialProperty({
                    color: global.DC.Color.BLUE,
                    speed: 8
                })
            })
            layer.addOverlay(wall)



@@ -219,14 +244,7 @@
                })
            )

            let tilesLayer = new global.DC.TilesetLayer('tilesLayer')
            global.viewer.addLayer(tilesLayer)
            let tileset = new global.DC.Tileset(
                '/qx/tileset.json'
            )

            tilesLayer.addOverlay(tileset)
            global.viewer.flyTo(tileset)


            // 加载顺丰底图
@@ -242,7 +260,7 @@
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    117.971, 28.44444, 8000.0
                    116.027429, 28.681978, 8000.0
                ),
                orientation: {
                    // 指向
@@ -257,7 +275,7 @@

            global.viewer.use(new global.DC.Measure())

            // global.viewer.locationBar.enable = true
            global.viewer.locationBar.enable = true
            // 缩放
            global.viewer.zoomController.enable = true
            // 比例尺
@@ -300,29 +318,44 @@
        // })


        this.$EventBus.on('mapAddLayer', (params) => {
        this.$EventBus.$on('mapAddLayer', (params) => {
            that.mapAddLayer(params.layerName, params.type)
        })

        this.$EventBus.on('mapRemoveLayer', (params) => {
        this.$EventBus.$on('mapRemoveLayer', (params) => {
            that.mapRemoveLayer(params.layerName, params.type)
        })

        this.$EventBus.on('mapClearLayer', (params) => {
        this.$EventBus.$on('mapClearLayer', (params) => {
            that.mapClearLayer(params.layerName, params.type)
        })

        this.$EventBus.on('layerPointAdd', (params) => {
        this.$EventBus.$on('layerPointAdd', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.layerPointAdd(params.layerName, params.type, params.params, params.incident = (e) => { })
        })

        this.$EventBus.on('layerShow', (params) => {
        this.$EventBus.$on('layerPolygonAdd', (params) => {
            that.layerPolygonAdd(params.layerName, params.positions, params.material)
        })

        this.$EventBus.$on('layerShow', (params) => {
            that.layerShow(params.layerName, params.flag)
        })

        this.$EventBus.on('flyToPosition', (params) => {
        this.$EventBus.$on('flyToPosition', (params) => {
            that.flyToPosition(params.siteJd, params.siteWd, params.siteGd = 0, params.siteHeading = 0, params.sitePitch = -90, params.siteRoll = 0, params.time = 3)
        })


        this.$EventBus.$on('addMxTileset', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.addMxTileset(params.titlesetName, params.titlesetUrl, params.incident = (e) => { })
        })

        this.$EventBus.$on('removeMxTileset', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.removeMxTileset(params.titlesetName, params.incident = (e) => { })
        })
    },

@@ -385,8 +418,9 @@
         */
        mapAddLayer (layerName, type) {
            if (type == 'VectorLayer') {
                layersObjce[layerName] = new global.DC.VectorLayer('layerName')
                global.viewer.addLayer(layersObjce[layerName])
                if (!layersObjcect[layerName]) layersObjcect[layerName] = null
                layersObjcect[layerName] = new global.DC.VectorLayer('layerName')
                global.viewer.addLayer(layersObjcect[layerName])
            }
        },

@@ -397,9 +431,9 @@
         */
        mapRemoveLayer (layerName, type) {
            if (type == 'VectorLayer') {
                layersObjce[layerName].remove()
                layersObjcect[layerName].remove()

                layersObjce[layerName] = null
                layersObjcect[layerName] = null
            }
        },

@@ -410,7 +444,7 @@
         */
        mapClearLayer (layerName, type) {
            if (type == 'VectorLayer') {
                layersObjce[layerName].clear()
                layersObjcect[layerName].clear()
            }
        },

@@ -442,8 +476,30 @@
                })
            }
            pointElement.attrParams = params
            layersObjce[layerName].addOverlay(pointElement)
            layersObjcect[layerName].addOverlay(pointElement)
            pointElement.on(global.DC.MouseEventType.CLICK, incident)
        },

        /**
         * 图层面添加
         * @param {*} layerName 图层名称
         * @param {*} positions 图层位置数据
         * @param {*} material 颜色
         */
        layerPolygonAdd (layerName, positions, material) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')
            }

            let polygon = new global.DC.Polygon(positions)

            polygon.setStyle({
                material: material,
                extrudedHeight: 0,
                perPositionHeight: true
            })

            layersObjcect[layerName].addOverlay(polygon)
        },

        /**
@@ -452,7 +508,7 @@
         * @param {*} flag 显示隐藏
         */
        layerShow (layerName, flag) {
            layersObjce[layerName].show = flag
            layersObjcect[layerName].show = flag
        },

        /**
@@ -478,7 +534,46 @@
                function () { },
                time
            )
        }
        },
        // sdTilesetLayer

        /**
         * 添加模型
         * @param {*} titlesetName 图层名称
         * @param {*} titlesetUrl 模型地址
         * @param {*} incident 模型点击事件
         */
        addMxTileset (titlesetName, titlesetUrl, incident) {
            if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null

            tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, {
                luminanceAtZenith: 0.4,
                // cullWithChildrenBounds: false,
                // cullRequestsWhileMoving: false,
                // skipLevelOfDetail: false,
                shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED
            })

            tilesetObject[titlesetName].setHeight(5)


            tilesetLayer.addOverlay(tilesetObject[titlesetName])

            global.viewer.flyTo(tilesetObject[titlesetName])

            tilesetObject[titlesetName].on(global.DC.MouseEventType.CLICK, incident)
        },

        /**
         * 删除模型
         * @param {*} titlesetName 图层名称
         * @param {*} incident 模型点击事件
         */
        removeMxTileset (titlesetName, incident) {
            tilesetObject[titlesetName].off(global.DC.MouseEventType.CLICK, incident)
            tilesetLayer.removeOverlay(tilesetObject[titlesetName])
            tilesetObject[titlesetName] = null
        },
    },

}

 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-19 14:59:44
 * @LastEditTime: 2022-09-19 17:42:50
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 

 src/views/home/index copy.vue

New file
@@ -0,0 +1,635 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-19 18:27:39
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
    <div class="container">
        <div class="left-container">
            <div class="person-box">
                <div class="title">
                    <div class="one-level">现有人员</div>
                    <!-- <div class="two-level">现有人员</div> -->
                </div>

                <div class="sub-title">
                    <div class="one-level">实有人口总数</div>
                    <div class="two-level">183.16万人</div>
                </div>

                <div class="sub-tab">
                    <div class="tab">
                        <div class="num">164.57万人</div>
                        <div class="type">户籍人口</div>
                    </div>
                    <div class="tab">
                        <div class="num">17.52万人</div>
                        <div class="type">流动人口</div>
                    </div>
                    <div class="tab">
                        <div class="num">91995人</div>
                        <div class="type">境外人口</div>
                    </div>
                </div>

                <div id="PersonEcharts" class="echarts-box"></div>
            </div>
            <div class="land-box">
                <div class="title">
                    <div class="one-level">现有房屋</div>
                    <!-- <div class="two-level">现有房屋</div> -->
                </div>

                <div class="sub-tab">
                    <div class="tab">
                        <div class="num">1822603户</div>
                        <div class="num">实有房屋</div>
                    </div>
                    <div class="tab">
                        <div class="num">634个</div>
                        <div class="num">关注场所</div>
                    </div>
                </div>

                <div id="LandEcharts" class="echarts-box"></div>
            </div>
            <div class="equipment-box">
                <div class="title">
                    <div class="one-level">现有设备</div>
                    <!-- <div class="two-level">现有设备</div> -->
                </div>

                <div id="EquipmentEcharts" class="echarts-box"></div>
            </div>
        </div>
        <div class="right-container">
            <div class="case-box">
                <div class="title">
                    <div class="one-level">警情动态</div>
                    <div class="two-level">当前16</div>
                </div>

                <div id="EventChangeEcharts" class="echarts-box"></div>
            </div>
            <div class="alert-box">
                <div class="title">
                    <div class="one-level">警情近一年</div>
                    <div class="two-level">历史累计</div>
                </div>

                <div class="sub-title">
                    <div class="one-level">警情、案事件总量</div>
                    <div class="two-level">555578起</div>
                </div>

                <div id="EventCountEcharts" class="echarts-box"></div>
            </div>
            <div class="crowd-box">
                <div class="title">
                    <div class="one-level">重点稳控/服务人群</div>
                    <div class="two-level">当前38</div>
                </div>

                <div id="peopleList" class="echarts-box">
                    <el-table
                        :data="arr"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center','background-color':'#00204f','borderColor':'#073365'}"
                        :cell-style="{'text-align':'center','borderColor':'#073365'}"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column prop="type" label="人员类型" width="80"></el-table-column>
                        <el-table-column prop="num" label="人数" width="180"></el-table-column>
                        <el-table-column prop="radio" label="占比" width="120"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <div class="center-container">
            <div class="layers-control-btn">
                <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="carLayerShow">警车</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="phoneLayerShow">手台</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="videoLayerShow">监控</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="panoramaLayerShow">全景</el-checkbox>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            navType: 0,
            houseLayerShow: false,
            carLayerShow: false,
            phoneLayerShow: false,
            videoLayerShow: false,
            panoramaLayerShow: false,
            arr: [{ 'type': '孤寡老人', 'num': '0', 'radio': '0.00%' }, { 'type': '邪教人员', 'num': '1', 'radio': '2.00%' }, { 'type': '上访人员', 'num': '8', 'radio': '14.00%' }, { 'type': '涉毒', 'num': '15', 'radio': '27.00%' }, { 'type': '留守儿童', 'num': '6', 'radio': '11.00%' }, { 'type': '重点青少年', 'num': '5', 'radio': '9.00%' }]
        }
    },
    created () {





    },
    mounted () {
        this.initPersonEcharts()
        this.initLandEcharts()
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.initEventCountEcharts()

        this.$nextTick(() => {
            let position = [
                [
                    [115.935114, 28.627012, 100],
                    [115.930150, 28.733535, 100],
                    [115.986738, 28.683523, 100],
                    [116.015526, 28.647454, 100],
                ]
            ]

            position.forEach((item) => {
                let str = ''
                item.forEach(it => {
                    str = str + `${it[0]},${it[1]},${it[2]};`
                })

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'polygonLayer',
                    positions: str,
                    material: global.DC.Namespace.Cesium.Color.fromBytes(
                        3,
                        255,
                        13,
                        10
                    ),
                })
            })
        })
    },
    updated () {
    },
    methods: {
        navClick (e) {
            this.navType = e.target.dataset.type
        },
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option

            option = {
                xAxis: {
                    type: 'category',
                    data: ['湖北', '上海', '北京', '广东', '浙江'],
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0,0,255,0.1)"
                        }
                    }
                },
                series: [
                    {
                        data: [6414, 4231, 2211, 1231, 881],
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#1a94a8',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ],
                grid: {
                    x: 40,
                    y: 10,
                    x2: 20,
                    y2: 20
                },
            }

            option && myChart.setOption(option)
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        },
        initLandEcharts () {
            var chartDom = document.getElementById('LandEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option

            option = {
                color: ['#2967c4', '#112d54'],
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0,0,255,0.1)"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },

                },
                yAxis: {
                    type: 'category',
                    data: ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },

                },
                series: [
                    {
                        data: [54, 77, 97, 141, 191],
                        type: 'bar',
                        zlevel: 2,
                    },
                    {
                        data: [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }],
                        type: 'bar',
                        barGap: '-100%',
                        label: {
                            show: true,
                            color: '#fff',
                            position: 'right', // 标签右对齐
                            distance: 5,// 标签距离柱条的距离
                            formatter: params => {
                                return params.data.realValue + '个'
                            }
                        }
                    }
                ],
                grid: {
                    x: 70,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
            }

            option && myChart.setOption(option)
        },
        initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option
            var regionTotal = 0
            let dataArr = [
                { value: 21438, name: '未知' },
                { value: 4664, name: '固定枪机' },
                { value: 310, name: '固定球机' },
                { value: 279, name: '可控球机' },
                { value: 241, name: '卡口枪击' },
                { value: 5, name: '云台枪击' }
            ]
            for (let i = 0; i < dataArr.length; i++) {
                regionTotal += dataArr[i].value
            }
            console.log(regionTotal)
            option = {
                title: {
                    show: true,
                    text: ['{a|摄像头总数}', `{b|${regionTotal}个}`].join('                                      '), // 主副标题
                    left: 'left',
                    textStyle: {
                        rich: {
                            a: {
                                fontWeight: 'normal',
                                fontSize: 16,
                                color: '#fff'
                            },
                            b: {
                                fontSize: 22,
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '55%',
                    y: '20%',
                    itemGap: 10,
                    textStyle: {
                        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
                            }
                        }
                        let v = tarValue
                        return `${name}     ${v} 个    `
                    },
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['27%', '57%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: dataArr
                    }
                ],
                grid: {
                    x: 10,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
            }

            option && myChart.setOption(option)
        },
        initEventChangeEcharts () {
            var chartDom = document.getElementById('EventChangeEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option

            option = {
                xAxis: {
                    type: 'category',
                    data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1']
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0,0,255,0.1)"
                        }
                    },
                },
                series: [
                    {
                        data: [0, 1, 0, 2, 0, 1, 0],
                        type: 'line'
                    }
                ],
                grid: {
                    x: 30,
                    y: 40,
                    x2: 10,
                    y2: 20
                },
            }

            option && myChart.setOption(option)

        },
        initEventCountEcharts () {
            var chartDom = document.getElementById('EventCountEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '75%',
                    y: '10%',
                    itemGap: 25,
                    textStyle: {
                        color: '#fff'          // 图例文字颜色
                    }
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 4659154, name: '入室盗窃' },
                            { value: 916685, name: '抢劫抢夺' },
                            { value: 916685, name: '汽车被盗' },
                            { value: 916685, name: '交通事故' },
                            { value: 916685, name: '打架斗殴' },
                            { value: 916685, name: '走失人口' }
                        ]
                    }
                ],
                grid: {
                    x: 10,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
            }

            option && myChart.setOption(option)
        },
        tableRowClassName () {
            // if ((rowIndex + 1) % 2 === 0) {
            return "aa"
            // } else {
            //     return "background:rgba(0,8,1,0.1)"
            // }
        },
    }
}
</script>

<style scoped lang="scss">
.container {
    color: #fff;

    .left-container {
        position: fixed;
        top: 80px;
        left: 0;
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);

        .person-box {
            height: 40%;
        }

        .land-box,
        .equipment-box {
            height: 30%;
        }
    }

    .right-container {
        position: fixed;
        top: 80px;
        right: 0;
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);

        .case-box {
            height: 30%;
        }

        .alert-box,
        .crowd-box {
            height: 35%;
            .el-table__row.statistics-warning-row {
                background: #ff0000;
            }
        }
        ::v-deep .el-table tr:nth-child(2n) {
            background: #03254c;
            color: #fff;
        }
        ::v-deep .el-table tr:nth-child(2n-1) {
            background: #26426a;
            color: #fff;
        }
        ::v-deep .el-table tr:hover td {
            color: #000;
        }
    }

    .left-container,
    .right-container {
        .person-box,
        .land-box,
        .equipment-box,
        .case-box,
        .alert-box,
        .crowd-box {
            display: flex;
            flex-direction: column;
            padding: 10px;

            .title {
                display: flex;
                justify-content: space-between;
                height: 40px;
            }

            .sub-title {
                display: flex;
                justify-content: space-between;
                height: 36px;
            }

            .sub-tab {
                display: flex;

                .tab {
                    margin: 0 10px;
                    flex: 1;
                    background: rgba(5, 21, 38, 0.8);
                    border: 1px solid #fff;

                    & > div {
                        height: 26px;
                        line-height: 26px;
                    }
                }
            }

            .echarts-box {
                flex: 1;
            }

            .sub-tab + .echarts-box {
                margin-top: 10px;
            }
        }
    }

    .center-container {
        display: flex;
        position: fixed;
        left: 50%;
        bottom: 80px;
        transform: translate(-50%, 0);

        .layers-control-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            width: 160px;
            height: 60px;
            background: rgba(7, 22, 37, 0.8);
        }
    }
}
</style>

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-17 10:40:49
 * @LastEditTime: 2022-09-19 18:29:26
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -114,7 +114,7 @@

        <div class="center-container">
            <div class="layers-control-btn">
                <el-checkbox v-model="houseLayerShow">小区</el-checkbox>
                <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="carLayerShow">警车</el-checkbox>
@@ -146,6 +146,11 @@
        }
    },
    created () {





    },
    mounted () {
        this.initPersonEcharts()
@@ -153,6 +158,35 @@
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.initEventCountEcharts()

        this.$nextTick(() => {
            let position = [
                [
                    [115.935114, 28.627012, 100],
                    [115.930150, 28.733535, 100],
                    [115.986738, 28.683523, 100],
                    [116.015526, 28.647454, 100],
                ]
            ]

            position.forEach((item) => {
                let str = ''
                item.forEach(it => {
                    str = str + `${it[0]},${it[1]},${it[2]};`
                })

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'polygonLayer',
                    positions: str,
                    material: global.DC.Namespace.Cesium.Color.fromBytes(
                        3,
                        255,
                        13,
                        10
                    ),
                })
            })
        })
    },
    updated () {
    },
@@ -465,6 +499,29 @@

            option && myChart.setOption(option)
        },
<<<<<<< HEAD
        tableRowClassName () {
            // if ((rowIndex + 1) % 2 === 0) {
            return "aa"
            // } else {
            //     return "background:rgba(0,8,1,0.1)"
            // }
        },

        houseChange (e) {
            if (e == true) {
                this.$EventBus.$emit('addMxTileset', {
                    titlesetName: 'sdTilesetLayer',
                    titlesetUrl: "/sd/tileset.json"
                })
            } else {
                this.$EventBus.$emit('removeMxTileset', {
                    titlesetName: 'sdTilesetLayer'
                })
            }
        }
=======
>>>>>>> 0296d220b566f61bbedd8f422bbf3f03b5641a47
    }
}
</script>