警情排行调整

shuishen

2023-05-08 e24f70ababdee2b4fdce71c6b80a9bc928fa0331

 src/views/home/components/leftContainer.vue

@@ -6,36 +6,33 @@
                    <div class="title-tab">
                        <span :class="{ choosed: peopletype == 0 }">现有人员</span>
                    </div>
                    <!-- <div class="title-num">
                        共
                        <span :class="{ choosed: peopletype == 0 }">100</span>人
                        <span :class="{ choosed: peopletype == 1 }">1</span>人
                    </div>-->
                </div>
                <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
                            }}人
                <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="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 class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
                        <div id="PersonEcharts" :style="{ height: personEchartsHeight }"></div>
                    </div>
                    <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                        <div class="num">91995人</div>
                        <div class="type">境外人口</div>
                    </div>-->
                </div>
                <div id="PersonEcharts" class="echarts-box">
                </div>
                </el-main>

                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
                </div>
@@ -45,11 +42,10 @@
                <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" />
                        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" />
@@ -58,10 +54,10 @@
                        <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"
                                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>
@@ -77,17 +73,20 @@
        <div class="house-box" style="position: relative;">
            <div class="box">
                <div class="title">现有住宅</div>
                <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">{{ realHouseNum ? realHouseNum : 0 }}栋</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">{{ realHouseNum ? realHouseNum : 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">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
                        </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">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
                    </div>
                </div>
                <div id="houseEcharts" class="echarts-box"></div>
                    <div id="houseEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
@@ -101,24 +100,26 @@
        <div class="land-box" style="position: relative;">
            <div class="box">
                <div class="title">现有小区</div>
                <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>
                <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="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 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>
                <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>
                    <div id="landEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
@@ -136,14 +137,27 @@
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } 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 { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } 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']

@@ -155,6 +169,9 @@
    data () {
        return {
            tabType: 0,
            personEchartsLoading: false,
            houseEchartsLoading: false,
            landEchartsLoading: false,
            peopletype: 0,
            tabTypeTwo: 0,
            tabTypeThree: 0,
@@ -176,6 +193,7 @@
            // 记录当前选中派出所的ID
            policeStaionID: '',
            peopleLoading: false,
            personEchartsHeight: '100%'
        }
    },

@@ -198,6 +216,78 @@
    },

    methods: {
        // 设备饼图轮播
        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 {*}
@@ -243,27 +333,24 @@
        personTabClick (type) {
            this.tabType = type
            this.dataDeep = 1
            this.personEchartsLoading = true

            this.disposeEchart()

            if (type == 0) {
                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) {

                this.initkeyPersonEcharts()

            }


        },

        /**
@@ -274,18 +361,21 @@
            getVillagePersonStatisticInfo().then(res => {
                if (res.data.code == 200) {
                    this.disposeEchart()

                    curSubofficeData = res.data.data
                    this.personAll = res.data.data

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

                    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)
            })
        },

@@ -298,40 +388,49 @@
        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

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


                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
                    var xDate = [], yDate1 = [], yDate2 = [], colors1 = ['#f1ce0d', '#eea827', '#e87a4a'], colors2 = ['#8ce070', '#4fd690', '#1bcdaf']

                    if (this.villagePersonStatisticInfoList.data.length > 0) {
                        this.villagePersonStatisticInfoList.data.forEach(e => {
                            xDate.push(e.name.replace('居民委员会', ''))
                            yDate.push({
                                value: e.num,
                            yDate1.push({
                                value: e.hjnum,
                                name: e.name,
                                id: e.id
                            })
                            yDate2.push({
                                value: e.synum,
                                name: e.name,
                                id: e.id
                            })
                        })
                    }

                    homePersonmyChart.showLoading({
                        text: '拼命加载中',
                        color: '#c23531',
                        textColor: '#FFF',
                        maskColor: 'rgba(0, 0, 0, 0.2)',
                        zlevel: 0,
                    })
                    setTimeout(() => {
                        homePersonmyChart.hideLoading()
                        homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    }, 500)
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, colors1, colors2), true)
                    this.clickPeopleChart()

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

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

@@ -343,14 +442,20 @@
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)

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

            if (this.policeStationPersonInfo.data.length > 0) {
                this.policeStationPersonInfo.data.forEach(e => {
                    xDate.push(e.name.replace('派出', ''))
                    yDate.push({
                        value: e.num,
                    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
@@ -358,17 +463,7 @@
                })
            }

            homePersonmyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                homePersonmyChart.hideLoading()
                homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
            }, 500)
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, ['#53eefe'], ['#8b25c1', '#b81fee', '#421784']))
        },

        /**
@@ -378,13 +473,13 @@
         * @param {*} colors
         * @return {*}
         */
        initPersonOptions (xDate, yDate, colors) {
        initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
            let options

            if (xDate.length == 0) {
                options = {
                    title: {
                        text: '暂无数据',
                        text: '暂无数据1',
                        x: 'center',
                        y: 'center',
                        textStyle: {
@@ -433,42 +528,94 @@
                            fontSize: fontSize(12)
                        }
                    },
                    legend: {
                        itemWidth: 15,
                        itemHeight: 15,
                        data: ['户籍人口', '实有人口'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            data: yDate,
                            name: '户籍人口',
                            data: yDate1,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return new global.echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                { offset: 0, color: colors[0] },
                                                { offset: 0.5, color: colors[1] },
                                                { offset: 1, color: colors[2] },
                                            ]
                                        )
                                    }
                                    color: colors1[0]
                                    // 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: function (params) {
                                        return new global.echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                { offset: 0, color: colors[2] },
                                                { offset: 0.7, color: colors[1] },
                                                { offset: 1, color: colors[0] }
                                            ]
                                        )
                                    }
                                    color: colors1[0]
                                    // 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[0]
                                    // 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[0]
                                    // 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%',
@@ -489,6 +636,7 @@
         * @return {*}
         */
        backBegin () {
            this.personAll = curSubofficeData
            this.dataDeep = 1
            this.initPersonEcharts()
            this.$parent.getAllPoliceStationCenter()
@@ -519,38 +667,37 @@
                    this.keyPlaceNum = 28
                    this.realHouseNum = 205
                    if (isFollow == 2) {
                        xDate = ['学校', '医院', '党政机关', '宾馆酒店', '零售业', '数字经济', '批发业', '装修及建筑业', '租赁业', '房地产业', '商务服务业', '餐饮业']
                        yDate = [36, 1, 3, 34, 16, 25, 30, 33, 2, 7, 6, 2]
                        xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
                        yDate = [34, 2, 33, 11, 22, 30, 14]
                        this.inithouseEcharts(xDate, yDate)
                    } else {
                        xDate = ['反恐重点目标', '危爆品单位']
                        yDate = [14, 14]
                        xDate = ['反恐重点目标', '危爆品', '重点服务对象']
                        yDate = [14, 13, 10]
                        this.inithouseEcharts(xDate, yDate)
                    }

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

        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                houseMyChart.hideLoading()
                houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
            }, 500)
            houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
        },

        initHouseOptions (xDate, y1Date, y2Date) {
            const that = this
            return {
                tooltip: {
                    trigger: 'item',
@@ -609,7 +756,7 @@
                        // barWidth: '10%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: this.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        itemStyle: {
                            normal: {
                                // barBorderRadius: [0, 30, 30, 0],
@@ -687,6 +834,8 @@

        houseTabClick (type) {
            this.tabTypeTwo = type

            this.houseEchartsLoading = true

            this.disposeHouseEchart()
            if (type == 0) {
@@ -796,6 +945,7 @@
                        siteJd: center[0],
                        siteWd: center[1]
                    })
                    this.personEchartsLoading = true
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
                } else {
                    this.$emit('showpeopledetail', params.data.id, params.data.name)
@@ -805,7 +955,8 @@

        clickHouseChart () {
            houseMyChart.on('click', params => {
                console.log('clickHouseChart', params)
                this.$parent.architectureTitle = params.name

                if (params.name == '学校') {
                    this.$parent.xxPopupShow = true
                    this.$parent.houseArr = []
@@ -814,7 +965,77 @@
                        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)
                    }

                }


            })
        },

@@ -825,29 +1046,46 @@
        async initkeyPersonEcharts () {
            this.disposeEchart()

            var chartDom = document.getElementById('PersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)

            let personInfo = await this.getPersonInfo()

            keyPeopleDataLength = personInfo.length
            if (this.userInfo.dept_id == '1596020515064381442') {
                personInfo = [{ count: 8, name: '征地拆迁群体', value: 8 }, { count: 4, name: '非涉法涉诉重点个访人员', value: 4 }, { count: 4, name: '涉法涉诉重点个访人员', value: 4 }, { count: 1, name: '楼盘业主维权群体', value: 1 }]

                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 },
                ]
            }

            keyPersonmyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                keyPersonmyChart.hideLoading()
                keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
            }, 500)
            const high = this.$refs.REFPERSONECHARTS.offsetHeight

            this.clickkeyPersonChart()
            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)
        },

        /**
@@ -883,7 +1121,7 @@
            if (dataArr.length == 0) {
                options = {
                    title: {
                        text: '暂无数据',
                        text: '暂无重点人员数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
@@ -904,26 +1142,26 @@
                            } else {
                                msg = params.value + '人'
                            }

                            msg = `<div style="color: #000;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
                            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: {
                            color: '#fff',
                            fontSize: fontSize(12)
                        },
                        confine: true
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        top: 'middle',
                        left: '45%',
                        right: '2%',
                        y: '1%',
                        itemGap: 20,
                        itemGap: 15,
                        textStyle: {
                            color: '#fff'
                        },
                        align: 'left',
                        formatter: function (name) {
                            let data = dataArr
                            let tarValue
@@ -933,15 +1171,16 @@
                                }
                            }
                            let v = tarValue
                            return `${name}     ${v} 人    `
                            return `${name}  ${v} 人    `
                        },
                    },
                    series: [
                        {
                            name: '',
                            top: 110,
                            left: 60,
                            type: 'pie',
                            radius: ['30%', '60%'],
                            center: ['22%', '55%'],
                            radius: [20, 50],
                            center: [0, 0],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
@@ -982,6 +1221,7 @@
         */
        landTabClick (type) {
            this.tabTypeThree = type
            this.landEchartsLoading = true

            this.disposeLandEchart()
            if (type == 0) {
@@ -1023,8 +1263,15 @@
                    })
                    landData = [nameArr, countArr]
                }
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)

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

@@ -1039,17 +1286,7 @@

            landMyChart = this.$echarts.init(chartDom)

            landMyChart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                landMyChart.hideLoading()
                landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
            }, 500)
            landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))

            this.clickLandChart()
        },
@@ -1244,11 +1481,11 @@
            }
        }

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

        .sub-tab {
            padding: 10px;
@@ -1294,11 +1531,16 @@
            }
        }

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

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