首页九小场所添加，九小场所页面调整，消防检查显示内容调整，地图点击事件添加

shuishen

2024-02-08 4b4b1456d26e805886c07d27e67ec6b0b981db15

首页九小场所添加，九小场所页面调整，消防检查显示内容调整，地图点击事件添加

 public/img/1755475686263963649.jpg

 public/img/1755475686263963649_1.jpg

 public/img/1755485609337110542.png

 public/img/1755485609337110542_1.jpg

 public/img/1755491748766367759.png

 public/img/1755491748766367759_1.jpg

 public/img/1755520431208087566.jpg

 public/img/1755520431208087566_1.jpg

 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: 2024-02-05 09:35:31
 * @LastEditTime: 2024-02-08 14:55:28
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -324,21 +324,21 @@
            // global.viewer.addTerrain(terrain)

            // 内网
            that.switchImg()
            // that.switchImg()

            // 地形数据添加
            // that.addTerrain()

            // 外网 
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d083e4cf30bfc438ef93436c10c2c20a',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d083e4cf30bfc438ef93436c10c2c20a',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({

 src/components/siteDialog/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-01-17 16:04:08
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-06 11:35:14
 * @LastEditTime: 2024-02-08 17:50:04
 * @FilePath: \srs-police-affairs\src\components\siteDialog\index.vue
 * @Description: 
 * 
@@ -149,24 +149,47 @@
                            <div class="question-name">
                                <div class="key">{{ index + 1 }}、{{ item.itemsName }}</div>
                                <div class="value">
                                    <el-radio v-model="item.state" :label="0" disabled>存在</el-radio>
                                    <el-radio v-model="item.state" :label="1" disabled>不存在</el-radio>
                                    <el-radio v-show="item.state == 0" v-model="item.state" :label="0"
                                        disabled>存在</el-radio>
                                    <el-radio v-show="item.state == 1" v-model="item.state" :label="1"
                                        disabled>不存在</el-radio>
                                </div>
                            </div>
                            <div class="yh-remark">
                                <div class="yh-remark-name">
                                    隐患描述
                            <div v-show="item.state == 0" class="yh-pic-box">
                                <div class="yh-pic-name">
                                    隐患图片：
                                </div>
                                <div class="yh-remark-value">
                                    {{ item.remark }}
                                <div class="yh-pic-list">
                                    <div class="pic-item" v-for="(pic, picIndex) in getImgUrls(item)" :key="picIndex">
                                        <el-image :src="pic" :fit="fit"></el-image>
                                    </div>
                                </div>
                            </div>
                            <div class="yh-remark">
                            <div v-show="item.state == 0" class="yh-remark">
                                <div class="yh-remark-name">
                                    整改后描述
                                    隐患描述：
                                </div>
                                <div class="yh-remark-value">
                                    {{ item.rectificationRemark }}
                                    {{ getRemark(item) }}
                                </div>
                            </div>
                            <div v-show="item.state == 0" class="yh-pic-box">
                                <div class="yh-pic-name">
                                    整改后图片：
                                </div>
                                <div class="yh-pic-list">
                                    <div class="pic-item" v-for="(pic, picIndex)  in getRectificationImageUrls(item)"
                                        :key="picIndex">
                                        <el-image style="width: 100px; height: 100px" :src="pic" :fit="fit"></el-image>
                                    </div>
                                </div>
                            </div>
                            <div v-show="item.state == 0" class="yh-remark">
                                <div class="yh-remark-name">
                                    整改后描述：
                                </div>
                                <div class="yh-remark-value">
                                    {{ getRectificationRemark(item) }}
                                </div>
                            </div>
                        </div>
@@ -180,6 +203,45 @@
</template>

<script>
let siteData = [
    {
        name: '恒源宾馆',
        placeId: '1754773877203464194',
        id: '1755491748766367759',
        imageUrls: '/img/1755491748766367759_1.jpg',
        remark: '恒源宾馆208房间安装了防盗窗',
        rectificationImageUrls: '/img/1755491748766367759.png',
        rectificationRemark: '防盗窗上设置了逃生出口'
    },
    {
        name: '自习公寓',
        placeId: '1755041086035197953',
        id: '1755485609337110542',
        imageUrls: '/img/1755485609337110542_1.jpg',
        remark: '二楼一处房间安装了防盗窗',
        rectificationImageUrls: '/img/1755485609337110542.png',
        rectificationRemark: '加固疏散楼梯，增加疏散指示牌'
    },
    {
        name: '阳阳公寓',
        placeId: '1755041085129228290',
        id: '1755520431208087566',
        imageUrls: '/img/1755520431208087566_1.jpg',
        remark: '二楼一处房间安装了防盗窗',
        rectificationImageUrls: '/img/1755520431208087566.jpg',
        rectificationRemark: '拆除防盗窗'
    },
    {
        name: '尚嘉宾馆',
        placeId: '1755041093131960321',
        id: '1755475686263963649',
        imageUrls: '/img/1755475686263963649_1.jpg',
        remark: '尚嘉宾馆二楼8个房间安装了防盗窗',
        rectificationImageUrls: '/img/1755475686263963649.jpg',
        rectificationRemark: '防盗窗上设置了逃生出口'
    },
]

import {
    getPlaceCheckPage,
    getPlaceCheckInfo,
@@ -219,6 +281,68 @@
        }
    },

    computed: {
        getImgUrls () {
            return (item) => {
                let cur = siteData.find(i => i.id == item.id)

                if (cur) {
                    return cur.imageUrls.split(',')
                } else {
                    if (item.imageUrls && item.imageUrls.length > 0) {
                        item.imageUrls = item.imageUrls.split(',').map(ele => {
                            return 'http://10.141.11.11/place/' + ele
                        })
                    }

                    return item.imageUrls
                }
            }
        },

        getRectificationImageUrls () {
            return (item) => {
                let cur = siteData.find(i => i.id == item.id)

                if (cur) {
                    return cur.rectificationImageUrls.split(',')
                } else {
                    if (item.rectificationImageUrls && item.rectificationImageUrls.length > 0) {
                        item.rectificationImageUrls = item.rectificationImageUrls.split(',').map(ele => {
                            return 'http://10.141.11.11/place/' + ele
                        })
                    }

                    return item.rectificationImageUrls
                }
            }
        },

        getRemark () {
            return (item) => {
                let cur = siteData.find(i => i.id == item.id)

                if (cur) {
                    return cur.remark
                } else {
                    return item.remark
                }
            }
        },

        getRectificationRemark () {
            return (item) => {
                let cur = siteData.find(i => i.id == item.id)

                if (cur) {
                    return cur.rectificationRemark
                } else {
                    return item.rectificationRemark
                }
            }
        }
    },

    methods: {
        // 点击展开收缩
        flodQL (index) {

 src/styles/media/index.scss

@@ -29,32 +29,41 @@
                    }

                    .menu-list {

                        .nav-list {
                            width: countSizeVw(110, 1920);
                            height: countSizeVh(36);
                            font-size: countSizeVh(18);
                        }

                            .sub-nav-list {
                                border-top: countSizeVh(14) solid transparent;
                                top: countSizeVh(28);
                                left: countSizeVw(-72, 1920);
                        .sub-nav-list {
                            top: countSizeVh(28);
                            border-top: countSizeVh(14) solid transparent;

                                div {
                                    height: countSizeVh(36);
                                    line-height: countSizeVh(36);
                                    font-size: countSizeVh(16);
                                }

                                div:first-child {
                                    padding-top: countSizeVh(10);
                                }

                                div:last-child {
                                    padding-bottom: countSizeVh(10);
                                }
                            div {
                                height: countSizeVh(36);
                                line-height: countSizeVh(36);
                                font-size: countSizeVh(16);
                            }

                            div:first-child {
                                padding-top: countSizeVh(10);
                            }

                            div:last-child {
                                padding-bottom: countSizeVh(10);
                            }
                        }

                        &.left {
                            .sub-nav-list {
                                left: countSizeVw(-72, 1920);
                            }
                        }

                        &.right {
                            .sub-nav-list {
                                left: countSizeVw(72, 1920);
                            }
                        }
                    }
                }
@@ -3459,7 +3468,6 @@
                }

                .question-item {
                    margin-bottom: countSizeVh(20);
                    padding: 0 countSizeVw(10, 1920);

                    &>div {
@@ -3470,26 +3478,30 @@
                        display: flex;

                        .key {
                            width: 80%;
                            width: 0;
                            flex: 1;
                            word-break: break-all;
                        }

                        .value {
                            width: 20%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            justify-content: flex-end;

                            label {
                                margin: 0 !important;
                            }
                        }
                    }

                    .yh-pic-box {
                        display: flex;
                        height: countSizeVh(100);
                        align-items: flex-start;

                        .yh-pic-name {
                            width: countSizeVw(100, 1920);
                            display: flex;
                            align-items: center;
                            align-items: flex-start;
                            justify-content: left;
                        }

@@ -3497,16 +3509,31 @@
                            width: 0;
                            flex: 1;
                            display: flex;

                            .pic-item {
                                display: flex;
                                align-items: flex-start;
                            }

                            img {
                                width: countSizeVw(100, 1920);
                                height: countSizeVw(100, 1920);
                                vertical-align: middle;
                            }
                        }
                    }

                    .yh-remark {
                        display: flex;
                        align-items: flex-start;

                        &>div {
                            display: flex;
                            align-items: flex-start;
                        }

                        .yh-remark-name {
                            width: countSizeVw(100, 1920);
                            display: flex;
                            align-items: center;
                            justify-content: left;
                        }


 src/views/home/components/leftContainer.vue

@@ -72,17 +72,17 @@
        </div>
        <div class="house-box" style="position: relative;">
            <div class="box">
                <div class="title">现有住宅</div>
                <div class="title">九小场所</div>
                <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                            <div class="tab-title-small">关注场所:</div>
                            <div class="tab-title-small">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
                            <div class="tab-title-small">场所数量:</div>
                            <div class="tab-title-small">1754</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                            <div class="tab-title-small">实有楼栋:</div>
                            <div class="tab-title-small">{{ realHouseNum ? realHouseNum : 0 }}栋</div>
                            <div class="tab-title-small">隐患数量:</div>
                            <div class="tab-title-small">2465</div>
                        </div>
                    </div>
                    <div id="houseEcharts" class="echarts-box"></div>
@@ -761,7 +761,6 @@
        // 实有住宅统计
        getVillageStatisticData (params) {
            getVillageStatisticData(params).then(res => {
                console.log('getVillageStatisticData', params, res)
                this.disposeHouseEchart()
                let xDate = []
                let yDate = []
@@ -986,6 +985,7 @@
        },

        houseTabClick (type) {
            let typeData = ['小生产加工企业', '小美容洗浴场所', '小歌舞娱乐场所', '小餐饮场所', '小网吧', '小医院', '小学校', '小旅馆', '小商店',]
            this.tabTypeTwo = type

            this.houseEchartsLoading = true
@@ -993,11 +993,23 @@
            this.disposeHouseEchart()
            if (type == 1) {
                // this.getHouseStatisticInfo(2)
                this.getVillageStatisticData({ deptId: this.userInfo.dept_id })
                this.inithouseEcharts(
                    typeData,
                    [297, 130, 62, 376, 7, 26, 38, 45, 1484,]
                )

                // this.getVillageStatisticData({ deptId: this.userInfo.dept_id })
            } else {
                // this.getHouseStatisticInfo(1)
                this.getPlaceOfConcernStatisticData({ deptId: this.userInfo.dept_id })
                this.inithouseEcharts(
                    typeData,
                    [513, 99, 23, 262, 6, 34, 35, 29, 753,]
                )

                // this.getPlaceOfConcernStatisticData({ deptId: this.userInfo.dept_id })
            }

            this.houseEchartsLoading = false
        },

        initLandOptions (xDate, yDate) {

 src/views/home/components/leftContainer现有住宅0208.vue

New file
@@ -0,0 +1,1802 @@
<template>
    <div class="container">
        <div class="person-box" style="position: relative;">
            <div class="box">
                <div class="title">
                    <div class="title-tab">
                        <span :class="{ choosed: peopletype == 0 }">现有人员</span>
                    </div>
                </div>
                <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab" v-show="peopletype == 0">
                        <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                            <div class="tab-title-small">人口总数:</div>
                            <div class="tab-title-small">
                                {{
                                    personAll.total ? personAll.total : 0
                                }}人
                            </div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                            <div class="tab-title-small">重点人员:</div>
                            <div class="tab-title-small">
                                {{
                                    personAll.emphasisNum ? personAll.emphasisNum : 0
                                }}人
                            </div>
                        </div>
                    </div>

                    <div class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
                        <div id="PersonEcharts" :style="{ height: personEchartsHeight }"></div>
                    </div>
                </el-main>

                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
                </div>
            </div>

            <svg class="border-svg">
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
                </defs>

                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <div class="house-box" style="position: relative;">
            <div class="box">
                <div class="title">现有住宅</div>
                <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                            <div class="tab-title-small">关注场所:</div>
                            <div class="tab-title-small">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                            <div class="tab-title-small">实有楼栋:</div>
                            <div class="tab-title-small">{{ realHouseNum ? realHouseNum : 0 }}栋</div>
                        </div>
                    </div>
                    <div id="houseEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <div class="land-box" style="position: relative;">
            <div class="box">
                <div class="title">现有小区</div>
                <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab" v-show="isAllPoliceStation">
                        <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                            <div class="tab-title-small">小区:</div>
                            <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                            <div class="tab-title-small">责任区:</div>
                            <div class="tab-title-small">{{ areaNum ? areaNum : 0 }}个</div>
                        </div>
                    </div>
                    <div class="sub-tab" v-show="!isAllPoliceStation">
                        <div class="tab1 select-on-tab">
                            <div class="tab-title-small">小区:</div>
                            <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
                        </div>
                    </div>
                    <div id="landEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
    </div>
</template>

<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo, getVillageStatisticData, getVillageStatisticDetail, getPlaceOfConcernStatisticData, getPlaceOfConcernStatisticDetail, getVillageDetailAndPlaceStatisticNumber } from "@/api/home/index.js"
import { schoolJSON } from '../homeleft/school'
import { hospitalJSON } from '../homeleft/hospital'
import { hotelJSON } from '../homeleft/hotel'
import { digitalJSON } from '../homeleft/digital'
import { housingJSON } from '../homeleft/housing'
import { wholesaleJSON } from '../homeleft/wholesale'
import { retailJSON } from '../homeleft/retail'
import { antiTerroristJSON } from '../homeleft/antiTerrorist'
import { dExplosionJSON } from '../homeleft/dExplosion'
import { serviceObjJSON } from '../homeleft/serviceObj'
import { difficultyJSON } from '../homeleft/difficulty'

import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo, getHotelList } from "@/api/dept"

let homePersonmyChart = null
let keyPersonmyChart = null
let houseMyChart
let landMyChart
let timer
let curSubofficeData

let leftTiming = null
let keyPeopleDataLength = 0

let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']

const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']

const peopleColor1 = '#53eefe'
const peopleColor2 = '#f26390'

export default {
    inject: ['userInfo'],

    data () {
        return {
            tabType: 0,
            personEchartsLoading: false,
            houseEchartsLoading: false,
            landEchartsLoading: false,
            peopletype: 0,
            tabTypeTwo: 0,
            tabTypeThree: 0,
            peopleTitle: '',
            peopleVisible: false,
            dataDeep: 1,
            keyPersonOption: {},
            keyPersonSelectSaveArr: [],
            areaNum: '',
            villageNum: '',
            policeVillageNum: '',
            policeStationPersonInfo: {},
            villagePersonStatisticInfoList: [],
            showBack: true,
            isAllPoliceStation: true,
            realHouseNum: '',
            keyPlaceNum: '',
            personAll: '',
            // 记录当前选中派出所的ID
            policeStaionID: '',
            peopleLoading: false,
            personEchartsHeight: '100%',
            syldBigType: '',
            syldName: '',
            gzcsType: '',
            gzcsUnitName: '',
            gzcsPerson: '',
            gzcsPhone: '',
            isFirstMounted: true,
            clickPoliceStationId: '',
        }
    },

    mounted () {
        // 获取所有数据并加载
        this.getHomeAllData()

        if (this.userInfo.dept_id != '1123598813738675201') {
            // console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442);
            this.showBack = false
            this.isAllPoliceStation = false
        }

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })

        this.getVillageDetailAndPlaceStatisticNumber({ deptId: this.userInfo.dept_id })
    },

    methods: {
        // 酒店列表
        getHotelList () {
            getHotelList({ deptId: this.$parent.areaChangeValue, orderName: 'hotel_name', hotelName: this.$parent.zhuSuName, orderRule: 'asc', size: this.$parent.zhuSuPage.pageSize, current: this.$parent.zhuSuPage.currentPage }).then(res => {
                console.log(res.data.data.records, 'getHotelList-1234')
                this.$parent.zhuSuPage.total = res.data.data.total
                this.$parent.zhuSuArr = res.data.data.records
                setTimeout(() => {
                    this.$parent.zhuSuLoading = false
                }, 500)
            })
        },

        // 设备饼图轮播
        keyPeopleEchartsCarousel () {
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                keyPersonmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = (curIndex + 1) % keyPeopleDataLength
                keyPersonmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
            }, 1000)

            keyPersonmyChart.on("mouseover", function (param) {
                clearInterval(timer)
                keyPersonmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: param.dataIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = param.dataIndex
            })

            keyPersonmyChart.on("mouseout", function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    keyPersonmyChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    curIndex = (curIndex + 1) % keyPeopleDataLength
                    keyPersonmyChart.dispatchAction({
                        type: "highlight",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    keyPersonmyChart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                }, 1000)
            })
        },

        /**
         * @description: 获取首页的所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
            this.policeStaionID = id
            this.clickPoliceStationId = id

            this.isFirstMounted = true
            if (id != '') {
                this.showBack = false
                this.isAllPoliceStation = false

                this.tabTypeThree = 0
            } else {
                this.showBack = true
                this.isAllPoliceStation = true
            }
            this.tabType = 0//解决下拉选择派出所重点人员显示bug
            this.personTabClick(this.tabType)

            this.houseTabClick(this.tabTypeTwo)

            this.landTabClick(this.tabTypeThree)

            if (leftTiming != null) {
                clearInterval(leftTiming)
                leftTiming = null
            }

            leftTiming = setInterval(async () => {
                this.houseTabClick(this.tabTypeTwo)

                this.landTabClick(this.tabTypeThree)
            }, 600000)
        },

        /**
         * @description: 户籍人口和重点人员切换
         * @param {*} type
         * @return {*}
         */
        personTabClick (type) {
            console.log('type', type, 'this.tabType', this.tabType, 'this.isFirstMounted', this.isFirstMounted)
            if (type == 0) {
                if (this.tabType == 0 && !this.isFirstMounted) {
                    console.log('再次点击人口总数', this.isFirstMounted)
                    this.$emit('showpeopledetail', '', '总人口列表', 'includeKeypeople', this.clickPoliceStationId)
                    return
                }
                this.isFirstMounted = false
                this.dataDeep = 1
                this.disposeEchart()
                this.personEchartsLoading = true
                this.personEchartsHeight = '100%'
                if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {

                    this.getPoliceStationInfo()

                } else {
                    this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
                }

            } else if (type == 1) {
                if (this.tabType == 1 && !this.isFirstMounted) {
                    console.log('再次点击重点人口')
                    this.$emit('showpeopledetail', this.clickPoliceStationId, '重点人员列表', 'onlyKeypeople')
                    return
                }
                this.dataDeep = 1
                this.disposeEchart()
                this.personEchartsLoading = true
                this.initkeyPersonEcharts()
            }
            this.tabType = type
        },

        /**
         * @description: 获取分局户籍人口数据
         * @return {*}
         */
        getPoliceStationInfo () {
            getVillagePersonStatisticInfo().then(res => {
                if (res.data.code == 200) {
                    this.disposeEchart()
                    curSubofficeData = res.data.data
                    this.personAll = res.data.data
                    console.log('getPoliceStationInfo', res.data.data)
                    this.policeStationPersonInfo = res.data.data
                    //异步，因此放进接口方法内部
                    this.initPersonEcharts()
                    this.clickPeopleChart()
                    setTimeout(() => {
                        this.personEchartsLoading = false
                    }, 500)
                }
            }).catch(res => {
                setTimeout(() => {
                    this.personEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 获取派出所户籍人口数据
         * @param {*} policeStationId
         * @param {*} name
         * @return {*}
         */
        getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
            getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
                if (res.data.code == 200) {
                    console.log(res, 'getVillagePersonStatisticInfoByPoliceStationId')
                    this.disposeEchart()
                    var chartDom = document.getElementById('PersonEcharts')
                    homePersonmyChart = this.$echarts.init(chartDom)
                    this.personAll = res.data.data
                    console.log('this.personAll', this.personAll)

                    if (this.userInfo.dept_id == '1596020515064381442') {
                        this.personAll.emphasisNum = 23
                    }

                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate1 = [], yDate2 = []

                    if (this.villagePersonStatisticInfoList.data.length > 0) {
                        this.villagePersonStatisticInfoList.data.forEach(e => {
                            xDate.push(e.name.replace('居民委员会', ''))
                            yDate1.push({
                                value: e.hjnum,
                                name: e.name,
                                id: e.id
                            })
                            yDate2.push({
                                value: e.synum,
                                name: e.name,
                                id: e.id
                            })
                        })
                    }
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2), true)
                    this.clickPeopleChart()

                    setTimeout(() => {
                        this.dataDeep = 2
                        this.personEchartsLoading = false
                    }, 1000)

                }
            }).catch(res => {
                setTimeout(() => {
                    this.personEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 初始化现有人图表
         * @return {*}
         */
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)

            var xDate = [], yDate1 = [], yDate2 = []
            //传入x,y轴数据

            if (this.policeStationPersonInfo.data.length > 0) {
                this.policeStationPersonInfo.data.forEach(e => {
                    xDate.push(e.name.replace('派出', ''))
                    yDate1.push({
                        value: e.hjnum,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
                    })
                    yDate2.push({
                        value: e.synum,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
                    })
                })
            }

            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2))
        },

        /**
         * @description: 图表数据处理
         * @param {*} xDate
         * @param {*} yDate
         * @param {*} colors
         * @return {*}
         */
        initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
            let options

            if (xDate.length == 0) {
                options = {
                    title: {
                        text: '暂无数据1',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: fontSize(14)
                        }
                    }
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        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>',
                        backgroundColor: 'rgba(8, 56, 185, 0.9)',
                        borderColor: 'rgba(8, 56, 185, 0.9)',
                        textStyle: {
                            color: '#fff',
                            fontSize: fontSize(12)
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xDate,

                        axisLabel: {
                            color: "#fff",
                            interval: 0,
                            rotate: 45,
                            fontSize: fontSize(10)
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(12)
                        }
                    },
                    legend: {
                        itemWidth: 15,
                        itemHeight: 15,
                        data: ['户籍人口', '实有人口'],
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function (name) {
                            var data = []
                            if (name == '户籍人口') {
                                data = options.series[0].data
                            } else {
                                data = options.series[1].data
                            }
                            var total = 0
                            for (var i = 0; i < data.length; i++) {
                                total += data[i].value
                            }
                            return `${name} (${total}人)`
                        }
                    },
                    series: [
                        {
                            name: '户籍人口',
                            data: yDate1,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: colors1
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors1[0] },
                                    //             { offset: 0.5, color: colors1[1] },
                                    //             { offset: 1, color: colors1[2] },
                                    //         ]
                                    //     )
                                    // }
                                },
                                emphasis: {
                                    color: colors1
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors1[2] },
                                    //             { offset: 0.7, color: colors1[1] },
                                    //             { offset: 1, color: colors1[0] }
                                    //         ]
                                    //     )
                                    // }
                                }
                            },
                        },
                        {
                            name: '实有人口',
                            data: yDate2,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: colors2
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors2[2] },
                                    //             { offset: 0.5, color: colors2[1] },
                                    //             { offset: 1, color: colors2[0] },
                                    //         ]
                                    //     )
                                    // }
                                },
                                emphasis: {
                                    color: colors2
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors2[0] },
                                    //             { offset: 0.7, color: colors2[1] },
                                    //             { offset: 1, color: colors2[2] }
                                    //         ]
                                    //     )
                                    // }
                                }
                            },
                        },

                    ],
                    grid: {
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '1%',
                        containLabel: true
                    },
                }
            }

            return options

        },

        /**
         * @description: 现有人图表中的返回按钮
         * @return {*}
         */
        backBegin () {
            this.clickPoliceStationId = this.userInfo.dept_id
            this.personAll = curSubofficeData
            this.dataDeep = 1
            this.initPersonEcharts()
            this.$parent.getAllPoliceStationCenter()
        },

        /**
         * @description: 获取现有住宅信息
         * @param {*} deptld
         * @param {*} isFollow
         * @return {*}
         */
        getHouseStatisticInfo (isFollow) {
            getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
                this.disposeHouseEchart()

                let xDate = []
                let yDate = []
                if (isFollow == 1) {
                    this.keyPlaceNum = res.data.data.count
                } else {
                    this.realHouseNum = res.data.data.count
                }
                res.data.data.data.forEach(item => {
                    xDate.push(item.name)
                    yDate.push(item.num)
                })
                if (this.userInfo.dept_id == '1596020515064381442') {
                    this.keyPlaceNum = 28
                    this.realHouseNum = 205
                    if (isFollow == 2) {
                        xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
                        yDate = [34, 2, 33, 11, 22, 30, 14]
                        this.inithouseEcharts(xDate, yDate)
                    } else {
                        xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
                        yDate = [14, 13, 10, 17]
                        this.inithouseEcharts(xDate, yDate)
                    }

                    this.clickHouseChart()
                } else {
                    this.inithouseEcharts(xDate, yDate)
                }
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        // 现有住宅和关注场所统计总数
        getVillageDetailAndPlaceStatisticNumber (params) {
            getVillageDetailAndPlaceStatisticNumber(params).then(res => {
                if (res.data.data.length > 0) {
                    res.data.data.forEach(item => {
                        if (item.typeName == 'gzcs') {
                            this.keyPlaceNum = item.number
                        } else if (item.typeName == 'syld') {
                            this.realHouseNum = item.number
                        }
                    })
                }
                // 茅家岭单独判断
                if (this.userInfo.dept_id == '1596020515064381442') {
                    this.keyPlaceNum = 54
                    this.realHouseNum = 205
                }
            })
        },

        // 实有住宅统计
        getVillageStatisticData (params) {
            getVillageStatisticData(params).then(res => {
                console.log('getVillageStatisticData', params, res)
                this.disposeHouseEchart()
                let xDate = []
                let yDate = []
                res.data.data.forEach(item => {
                    xDate.push(item.typeName)
                    yDate.push(item.number)
                })
                // 茅家岭单独判断
                if (this.userInfo.dept_id == '1596020515064381442') {
                    xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
                    yDate = [34, 2, 33, 11, 22, 30, 14]
                }

                this.inithouseEcharts(xDate, yDate)
                // 点击事件
                this.clickHouseChart('实有住宅')
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        // 实有住宅详情
        getVillageStatisticDetail () {
            getVillageStatisticDetail({ deptId: this.userInfo.dept_id, bigType: this.syldBigType, name: this.syldName, current: this.$parent.syldPage.currentPage, size: this.$parent.syldPage.pageSize }).then(res => {
                console.log('getVillageStatisticDetail', res, res.data.data.records)
                this.$parent.syldPage.total = res.data.data.total
                this.$parent.syldArr = res.data.data.records
                setTimeout(() => {
                    this.$parent.syldLoading = false
                }, 500)
            })
        },

        // 关注场所统计
        getPlaceOfConcernStatisticData (params) {
            getPlaceOfConcernStatisticData(params).then(res => {
                this.disposeHouseEchart()
                let xDate = []
                let yDate = []
                res.data.data.forEach(item => {
                    xDate.push(item.typeName)
                    yDate.push(item.number)
                })

                // 茅家岭单独判断
                if (this.userInfo.dept_id == '1596020515064381442') {
                    xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
                    yDate = [14, 13, 10, 17]
                }

                this.inithouseEcharts(xDate, yDate)
                // 点击事件
                this.clickHouseChart('关注场所')
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        // 关注场所详情
        getPlaceOfConcernStatisticDetail () {
            getPlaceOfConcernStatisticDetail({ deptId: this.userInfo.dept_id, type: this.gzcsType, unitName: this.gzcsUnitName, person: this.gzcsPerson, phone: this.gzcsPhone, current: this.$parent.gzcsPage.currentPage, size: this.$parent.gzcsPage.pageSize }).then(res => {
                console.log('getPlaceOfConcernStatisticDetail', res, res.data.data.records)
                this.$parent.gzcsPage.total = res.data.data.total
                this.$parent.gzcsArr = res.data.data.records
                setTimeout(() => {
                    this.$parent.gzcsLoading = false
                }, 500)
            })
        },

        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
        },

        initHouseOptions (xDate, y1Date, y2Date) {
            const that = this
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2) + '万栋'
                        } else {
                            msg = params.value + '栋'
                        }

                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
                        return msg
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                color: myColor,
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: xDate,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        data: y1Date,
                        type: 'bar',
                        barWidth: '50%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        itemStyle: {
                            normal: {
                                // barBorderRadius: [0, 30, 30, 0],
                                //     color: function (params) {
                                //     var num = myColor.length
                                //     return myColor[params.dataIndex % num]
                                // },
                                color: '#ed7c2f',
                                label: {
                                    show: true, //开启显示
                                    position: 'right', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#ed7c2f',
                                        fontSize: 10
                                    }
                                }
                            }
                        },
                    },
                    // {
                    //     data: y2Date,
                    //     show: true,
                    //     type: 'bar',
                    //     barGap: '-100%',
                    //     barWidth: '35%', //统计条宽度
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'rgba(102, 102, 102,0.5)'
                    //         },
                    //     },
                    //     z: 1,
                    // }
                ],
                grid: {
                    top: '2%',
                    left: '2%',
                    // right: '-1%',
                    right: '10%',
                    bottom: '2%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: "inside",
                        startValue: 0,
                        endValue: 4,
                        minValueSpan: 8,
                        maxValueSpan: 8,
                        yAxisIndex: [0],
                        zoomOnMouseWheel: false,  // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                    },
                    {
                        type: 'slider',
                        realtime: true,
                        startValue: 0,
                        endValue: 4,
                        width: '3.5',
                        height: '90%',
                        yAxisIndex: [0], // 控制y轴滚动
                        // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
                        fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
                        handleSize: 0, // 两边手柄尺寸
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top: '1%',
                        right: '5',
                    }

                ]
            }
        },

        houseTabClick (type) {
            this.tabTypeTwo = type

            this.houseEchartsLoading = true

            this.disposeHouseEchart()
            if (type == 1) {
                // this.getHouseStatisticInfo(2)
                this.getVillageStatisticData({ deptId: this.userInfo.dept_id })
            } else {
                // this.getHouseStatisticInfo(1)
                this.getPlaceOfConcernStatisticData({ deptId: this.userInfo.dept_id })
            }
        },

        initLandOptions (xDate, yDate) {
            return {
                color: ['#0532ff'],
                grid: {
                    top: '4%',
                    left: '12%',
                    right: '4%',
                    bottom: '28%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        return `${params.marker} ${params.name}: ${params.value} 个`
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xDate,
                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(10)
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(12)
                    }
                },
                series: [
                    {
                        data: yDate,
                        type: 'bar',
                        barWidth: '24%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 0, 0],
                                // color: function (params) {
                                //     var num = Math.floor(Math.random() * (myLandColors.length - 1) + 1)
                                //     return myLandColors[params.dataIndex % num]
                                // },
                            }
                        },
                    }
                ],
                // zoomData: [  // 有滚动条 平移
                // dataZoom: [  // 有滚动条 平移
                //     {
                //         type: 'slider',
                //         show: true,
                //         realtime: true,
                //         start: 0,
                //         end: 40,  // 初始展示40%
                //         height: 4,
                //         backgroundColor: 'rgba(47,69,84,0.2)',
                //         fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
                //         borderColor: "rgba(17, 100, 210, 0.12)",
                //         handleSize: 0, // 两边手柄尺寸
                //         showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                //         top: '96%',
                //     },
                //     {
                //         type: "inside",  // 支持内部鼠标滚动平移
                //         start: 0,
                //         end: 40,
                //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
                //         moveOnMouseWheel: true, // 开启滚轮平移
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
                //     }
                // ]
            }
        },

        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                if (params.data.type == 'policeStation') {
                    const center = this.$parent.getPoliceStationCenter(params.data.id)
                    this.$EventBus.$emit('toPosition', {
                        layerName: 'carLayers',
                        siteJd: center[0],
                        siteWd: center[1]
                    })
                    this.personEchartsLoading = true
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
                    this.clickPoliceStationId = params.data.id
                } else {
                    this.$emit('showpeopledetail', params.data.id, params.data.name)
                }
            })
        },

        clickHouseChart (type) {
            houseMyChart.on('click', params => {
                console.log(params, 'clickHouseChart')
                // 茅家岭单独判断
                if (this.userInfo.dept_id == '1596020515064381442') {
                    this.mjlClick(params)
                    return
                }

                if (type == '实有住宅') {
                    if (params.name == '住宿服务') {
                        this.$parent.zhuSuPage.currentPage = 1
                        this.$parent.zhuSuPopupShow = true
                        this.$parent.zhuSuLoading = true
                        this.getHotelList()

                    } else {
                        this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
                        this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
                            layerName: "jiudianLayer",
                            type: "VectorLayer",
                        })
                        this.$parent.syldPage.currentPage = 1
                        this.$parent.syldPopupTitle = params.name
                        this.syldBigType = params.name
                        this.syldName = ''
                        this.$parent.syldArr = []
                        this.$parent.syldPopupShow = true
                        this.$parent.syldLoading = true
                        this.getVillageStatisticDetail()
                    }

                } else {
                    console.log('关注场所')
                    this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
                    this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
                        layerName: "jiudianLayer",
                        type: "VectorLayer",
                    })
                    this.$parent.gzcsPage.currentPage = 1
                    this.gzcsType = params.name
                    this.gzcsUnitName = ''
                    this.gzcsPerson = ''
                    this.gzcsPhone = ''
                    this.$parent.gzcsArr = []
                    this.$parent.gzcsPopupShow = true
                    this.$parent.gzcsLoading = true
                    this.getPlaceOfConcernStatisticDetail()
                }
            })
        },

        // 茅家岭账号点击现有住宅
        mjlClick (params) {
            console.log('params', params)
            this.$parent.architectureTitle = params.name
            if (params.name == '学校') {
                this.$parent.xxPopupShow = true
                this.$parent.houseArr = []
                this.$parent.houseLoading = true
                setTimeout(() => {
                    this.$parent.houseLoading = false
                    this.$parent.houseArr = schoolJSON
                }, 1000)
            } else {
                this.$parent.architectureShow = true
                this.$parent.architectureTable = []
                this.$parent.architectureLoad = true

                if (params.name == '医院') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = hospitalJSON
                    }, 1000)
                }

                if (params.name == '宾馆酒店') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = hotelJSON
                    }, 1000)
                }

                if (params.name == '数字经济') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = digitalJSON
                    }, 1000)
                }

                if (params.name == '房屋建筑业') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = housingJSON
                    }, 1000)
                }

                if (params.name == '批发业') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = wholesaleJSON
                    }, 1000)
                }

                if (params.name == '零售业') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = retailJSON
                    }, 1000)
                }

                if (params.name == '反恐重点目标') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = antiTerroristJSON
                    }, 1000)
                }

                if (params.name == '危爆品') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = dExplosionJSON
                    }, 1000)
                }

                if (params.name == '重点服务对象') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = serviceObjJSON
                    }, 1000)
                }

                if (params.name == '困难儿童') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = difficultyJSON
                    }, 1000)
                }
            }
        },

        /**
         * @description: 初始化重点人员饼状图
         * @return {*}
         */
        async initkeyPersonEcharts () {
            this.disposeEchart()

            let personInfo = await this.getPersonInfo()
            console.log('personInfo', personInfo)
            keyPeopleDataLength = personInfo.length
            if (this.userInfo.dept_id == '1596020515064381442') {
                personInfo = [
                    { count: 3, name: '非涉法涉诉重点个访人员', value: 7 },
                    { count: 1, name: '楼盘业主维权群体', value: 1 },
                    { count: 1, name: '欠薪讨债群体', value: 1 },
                    { count: 4, name: '涉法涉诉重点个访人员', value: 4 },
                    { count: 11, name: '征地拆迁群体', value: 11 },
                ]
            }

            const high = this.$refs.REFPERSONECHARTS.offsetHeight

            if (personInfo.length * (high / 7) > high) {
                this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
            } else {
                this.personEchartsHeight = '100%'
            }

            this.$nextTick(() => {
                var chartDom = document.getElementById('PersonEcharts')
                keyPersonmyChart = this.$echarts.init(chartDom)
                keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))

                this.clickkeyPersonChart()
                if (personInfo.length > 1) {
                    this.keyPeopleEchartsCarousel()
                } else {
                    clearInterval(timer)
                    keyPersonmyChart.off("mouseover")
                    keyPersonmyChart.off("mouseout")
                }
            })


            setTimeout(() => {
                this.personEchartsLoading = false
            }, 500)
        },

        /**
         * @description: 调用接口获取重点人员数据
         * @return {*}
         */
        getPersonInfo () {
            const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                console.log('getPersonInfo', { deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id })

                res.data = res.data.map(item => {
                    item = {
                        ...item,
                        name: item.zdryxl,
                        value: item.count
                    }

                    return item
                })

                return res.data
            })

            return data
        },

        /**
         * @description: 重点人员饼状图渲染的options
         * @param {*} dataArr
         * @return {*}
         */
        initkeyPersonOption (dataArr) {
            let options

            if (dataArr.length == 0) {
                options = {
                    title: {
                        text: '暂无重点人员数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: fontSize(14)
                        }
                    }
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: params => {
                            let msg
                            if (params.value > 10000) {
                                msg = (params.value / 10000).toFixed(2) + '万人'
                            } else {
                                msg = params.value + '人'
                            }
                            msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
                            return msg
                        },
                        backgroundColor: "rgba(8, 56, 185, 0.9)",
                        borderColor: "rgba(8, 56, 185, 0.9)",
                        textStyle: {
                            fontSize: fontSize(12)
                        },
                        confine: true
                    },
                    legend: {
                        orient: 'vertical',
                        top: 'middle',
                        right: '2%',
                        y: '1%',
                        itemGap: 15,
                        textStyle: {
                            color: '#fff'
                        },
                        align: 'left',
                        formatter: function (name) {
                            let data = dataArr
                            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: [
                        {
                            top: 110,
                            left: 60,
                            type: 'pie',
                            radius: [20, 50],
                            center: [0, 0],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: dataArr
                        }
                    ],
                    grid: {
                        x: 10,
                        y: 10,
                        x2: 10,
                        y2: 20
                    },
                }
            }

            return options
        },

        /**
         * @description: 重点人员饼状图的点击事件
         * @return {*}
         */
        async clickkeyPersonChart () {
            keyPersonmyChart.on('click', async params => {
                this.$emit('showkeypersondetail', params.name)
            })
        },

        /**
         * @description: 现有小区切换
         * @param {*} type
         * @return {*}
         */
        landTabClick (type) {
            this.tabTypeThree = type
            this.landEchartsLoading = true

            this.disposeLandEchart()
            if (type == 0) {
                this.getAreaStatisticInfo(2)
            } else if (type == 1) {
                this.getAreaStatisticInfo(1)
            }
        },

        /**
         * @description: 获取现有小区数据
         * @param {*} type
         * @param {*} deptId
         * @return {*}
         */
        getAreaStatisticInfo (type) {
            getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
                this.disposeLandEchart()

                let landData = []
                if (type == 2) {
                    this.areaNum = res.data.data.areaNum
                    this.villageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name.replace('派出', '').replace('居民委员会', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    landData = [nameArr, countArr]
                } else if (type == 1) {
                    // this.areaNum = res.data.data.areaNum
                    // this.villageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name.replace('派出', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    landData = [nameArr, countArr]
                }
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)

                this.initLandEcharts(landData)
            }).catch(res => {
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 现有小区图表渲染
         * @param {*} landData
         * @return {*}
         */
        initLandEcharts (landData) {
            this.disposeLandEchart()
            var chartDom = document.getElementById('landEcharts')

            landMyChart = this.$echarts.init(chartDom)

            landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))

            this.clickLandChart()
        },

        /**
         * @description: 现有小区图表点击事件
         * @return {*}
         */
        clickLandChart () {
            landMyChart.on('click', params => {
                console.log('clickLandChart')
                if (this.tabTypeThree == 0) {
                    this.$emit('showlanddetail', params.name, 2, params.data.id)
                } else {
                    this.$emit('showlanddetail', params.name, 1, params.data.id)
                }
            })
        },

        /**
         * @description: 视图窗口改变时，echarts图表重置
         * @return {*}
         */
        echartsResize () {
            homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
            landMyChart && landMyChart != null && landMyChart.resize()
            keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
            houseMyChart && houseMyChart != null && houseMyChart.resize()
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeEchart () {
            if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
                homePersonmyChart.dispose()
                homePersonmyChart.off('click')
            }

            if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
                keyPersonmyChart.dispose()
                keyPersonmyChart.off('click')
            }
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeHouseEchart () {
            if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) {
                houseMyChart.dispose()
                houseMyChart.off('click')
            }
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeLandEchart () {
            if (landMyChart != null && landMyChart != '' && landMyChart != undefined) {
                landMyChart.dispose()
                landMyChart.off('click')
            }
        },


    },

    destroyed () {
        window.removeEventListener("resize", this.echartsResize)
        this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
        this.disposeEchart()
        this.disposeHouseEchart()
        this.disposeLandEchart()

        if (leftTiming != null) {
            clearInterval(leftTiming)
            leftTiming = null
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;

    .person-box {
        .word {
            color: #fff;
            font-size: 14px;
        }

        .before {
            margin-left: 108px;
        }

        .back {
            color: #fff;
            position: absolute;
            top: 96px;
            right: 16px;
            width: 20px;
            height: 20px;
            font-size: 20px;
            cursor: pointer;
        }

        .back:hover {
            color: #43bafe;
        }

        .back::after {
            font-family: element-icons;
            content: '\e6ea';
        }
    }

    .person-box,
    .house-box,
    .land-box {
        margin: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        // background: $bg-color;

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 18px 0 18px;
            position: relative;
            font-size: 16px;

            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;

            .title-tab {
                span {
                    color: #99cccc;
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .title-num {
                color: #fff;

                span {
                    color: #99cccc;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .choosed {
                color: #fff;
            }

            &>div:nth-of-type(2) {
                font-size: 14px;
            }
        }

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

        .sub-tab {
            padding: 10px;
            display: flex;
            color: #99cccc;

            .tab,
            .tab3 {
                margin: 0 10px;
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;

                &>div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;
                }
            }

            .tab {
                display: flex;
                justify-content: center;
            }

            .tab1 {
                width: 50%;
                margin-left: 25% !important;
                display: flex;
                justify-content: center;
                margin: 0 10px;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
            }
        }

        :deep(.el-main) {
            padding: 0;
        }

        .echarts-box {
            padding: 12px;
            padding-top: 0;
            flex: 1;
            width: 100%;
            // height: 100%;
        }
    }

    .house-box {
        margin-top: 0;
        margin-bottom: 0;

        .title {
            height: 54px;
            line-height: 54px;
        }
    }

    :deep(.el-table__body-wrapper) {
        overflow-x: hidden !important;
    }
}

.border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.mypath {
    stroke: rgba(33, 150, 243, 1);
    stroke-width: 2;
    stroke-dasharray: 888;
    // stroke-dashoffset: 888;
    fill: none;
    animation: go 6s linear infinite forwards;
}

@keyframes go {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 888;
    }
}
</style>

 src/views/layout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-07 15:08:09
 * @LastEditTime: 2024-02-08 15:06:05
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
@@ -57,10 +57,6 @@
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
                    <div class="userBtn">
                        <div class="back-system" @click="goToPath(siteParams)">
                            <i class="el-icon-office-building"></i>
                            九小场所
                        </div>
                        <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
                            <i class="el-icon-user-back"></i>
                            运维管理
@@ -179,10 +175,6 @@
                newPassword1: [{ required: true, message: "必填" }]
            },
            resetPsdPopupShow: false,
            siteParams: {
                menuName: '九小场所',
                path: '/layout/site'
            },
            menuLeftList: [
                {
                    menuName: '首页',
@@ -225,7 +217,19 @@
                },
                {
                    menuName: '扫码应用',
                    path: '/layout/scanOrCode'
                    path: '/layout/scanOrCode',
                    pathT: '/layout/site',
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '群众上报',
                            path: '/layout/scanOrCode'
                        },
                        {
                            menuName: '九小场所',
                            path: '/layout/site'
                        }
                    ]
                },
                {
                    menuName: '智能搜索',
@@ -562,43 +566,55 @@
                font-weight: bold;
                letter-spacing: 0.5px;
                cursor: pointer;
            }

            .sub-nav-list {
                border-top: 14px solid transparent;
                position: absolute;
                top: 28px;
                width: 100%;
                cursor: default;
                z-index: 999;

                div {
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    font-size: 16px;
                    // background: $bg-blue;
                    background: $table-body-tr-n-color;
                    cursor: pointer;
                    box-sizing: content-box;

                    &.on {
                        color: rgba(252, 189, 86, 1);
                    }
                }

                div:first-child {
                    padding-top: 10px;
                }

                div:last-child {
                    padding-bottom: 10px;
                }

                div:hover {
                    background: $table-body-tr-2n-color !important;
                }
            }

            &.left {
                .sub-nav-list {
                    border-top: 14px solid transparent;
                    position: absolute;
                    top: 28px;
                    left: -72px;
                    width: 100%;
                    cursor: default;
                    z-index: 999;
                    transform: skew(-61.5deg);
                }
            }

                    div {
                        height: 36px;
                        text-align: center;
                        line-height: 36px;
                        font-size: 16px;
                        // background: $bg-blue;
                        background: $table-body-tr-n-color;
                        cursor: pointer;
                        box-sizing: content-box;

                        &.on {
                            color: rgba(252, 189, 86, 1);
                        }
                    }

                    div:first-child {
                        padding-top: 10px;
                    }

                    div:last-child {
                        padding-bottom: 10px;
                    }

                    div:hover {
                        background: $table-body-tr-2n-color !important;
                    }
            &.right {
                .sub-nav-list {
                    left: 72px;
                    transform: skew(61.5deg);
                }
            }
        }

 src/views/site/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-07 16:38:38
 * @LastEditTime: 2024-02-08 17:51:12
 * @FilePath: \srs-police-affairs\src\views\site\index.vue
 * @Description: 辖区管理
 * 
@@ -225,13 +225,18 @@
                    lat: lat,
                    alt: 1,
                    size: [25.8, 32.4],
                    url: `/img/icon/site.png`
                    url: `/img/icon/site.png`,
                },
                incident: this.siteClick
            })

            this.$refs.SiteDialogPopup.initOpen(row)
        },

        siteClick (e) {
            this.$refs.SiteDialogPopup.initOpen(e.overlay.attrParams)
        },

        // 清空按钮-清除图标图层
        clearRow () {
            this.$EventBus.$emit('mapClearLayer', {