模型加载的更改

shuishen

2023-02-28 a1c2fecb75c9c8fef3345dee6d071faae6d3dccd

 src/views/home/components/leftContainer.vue

@@ -4,8 +4,7 @@
            <div class="box">
                <div class="title">
                    <div class="title-tab">
                        <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
                        <!-- <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> -->
                        <span :class="{ choosed: peopletype == 0 }">现有人员</span>
                    </div>
                    <!-- <div class="title-num">
                        共
@@ -20,7 +19,11 @@
                        @click="personTabClick(0)"
                    >
                        <div class="tab-title-small">户籍人口:</div>
                        <div class="tab-title-small">164.57万人</div>
                        <div class="tab-title-small">
                            {{
                            personAll.total ? personAll.total : 0
                            }}人
                        </div>
                    </div>
                    <div
                        class="tab"
@@ -28,7 +31,11 @@
                        @click="personTabClick(1)"
                    >
                        <div class="tab-title-small">重点人员:</div>
                        <div class="tab-title-small">1人</div>
                        <div class="tab-title-small">
                            {{
                            personAll.emphasisNum ? personAll.emphasisNum : 0
                            }}人
                        </div>
                    </div>
                    <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                        <div class="num">91995人</div>
@@ -39,7 +46,7 @@
                <div
                    class="back"
                    title="返回上一级"
                    v-show="dataDeep == 2 && peopletype == 0"
                    v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"
                ></div>
            </div>
@@ -103,15 +110,15 @@
        </div>
        <div class="house-box" style="position: relative;">
            <div class="box">
                <div class="title">现有房屋</div>
                <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">182万户</div>
                        <div class="tab-title-small">实有楼栋:</div>
                        <div class="tab-title-small">{{ realHouseNum?realHouseNum: 0 }}栋</div>
                    </div>
                    <div
                        class="tab"
@@ -119,7 +126,7 @@
                        @click="houseTabClick(1)"
                    >
                        <div class="tab-title-small">关注场所:</div>
                        <div class="tab-title-small">634个</div>
                        <div class="tab-title-small">{{ keyPlaceNum?keyPlaceNum: 0 }}栋</div>
                    </div>
                </div>
                <div id="houseEcharts" class="echarts-box"></div>
@@ -145,14 +152,14 @@
        <div class="land-box" style="position: relative;">
            <div class="box">
                <div class="title">现有地</div>
                <div class="sub-tab">
                <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">634个</div>
                        <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div>
                    </div>
                    <div
                        class="tab"
@@ -160,9 +167,16 @@
                        @click="landTabClick(1)"
                    >
                        <div class="tab-title-small">责任区:</div>
                        <div class="tab-title-small">634个</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>
            </div>

@@ -188,263 +202,360 @@

<script>
import { fontSize } from '@/utils/fontSize.js'
let homePersonmyChart
import { getAreaStatisticInfo } from "@/api/home/index.js"
import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept"

let homePersonmyChart = null
let keyPersonmyChart = null
let houseMyChart
let landMyChart
let keyPersonmyChart

let leftTiming = null

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']

export default {
    inject: ['userInfo'],

    data () {
        return {
            tabType: 0,
            peopletype: 0,
            tabTypeTwo: 0,
            tabTypeThree: 0,
            peopleArr: [
                { 'name': '黄XX', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' },
                { 'name': '李某某', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' },
                { 'name': '刘AA', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' },
                { 'name': '张三', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' }
            ],
            peopleTitle: '',
            peopleVisible: false,
            landDetailArr1: [
                { 'housingEastate': '阳光小区', 'location': 'XXXXXXXX', 'area': '2122亩', 'superintendent': '王大壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '美丽小区', 'location': 'XXXXXXXX', 'area': '1335亩', 'superintendent': '王二壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '快乐小区', 'location': 'XXXXXXXX', 'area': '4122亩', 'superintendent': '王三壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '健康小区', 'location': 'XXXXXXXX', 'area': '2555亩', 'superintendent': '王四壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '斯哒地小区', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' },
            ],
            landDetailArr2: [
                { 'housingEastate': '责任区1', 'location': 'XXXXXXXX', 'area': '2122亩', 'superintendent': '王大壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '责任区2', 'location': 'XXXXXXXX', 'area': '1335亩', 'superintendent': '王二壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '责任区3', 'location': 'XXXXXXXX', 'area': '4122亩', 'superintendent': '王三壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '责任区4', 'location': 'XXXXXXXX', 'area': '2555亩', 'superintendent': '王四壮', 'phone': '154XXXX6666' },
                { 'housingEastate': '责任区5', 'location': 'XXXXXX', 'area': '1922亩', 'superintendent': '王美丽', 'phone': '154XXXX6666' },
            ],
            keyPersonDetailArr: [
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '在逃人员' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '在逃人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
            ],
            dataDeep: 1,
            keyPersonOption: {},
            keyPersonSelectArr: [
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '在逃人员' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '在逃人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
            ],
            keyPersonSelectSaveArr: [],
            areaNum: '',
            villageNum: '',
            policeVillageNum: '',
            policeStationPersonInfo: {},
            villagePersonStatisticInfoList: [],
            showBack: true,
            isAllPoliceStation: true,
            realHouseNum: '',
            keyPlaceNum: '',
            personAll: '',
            // 记录当前选中派出所的ID
            policeStaionID: ''
        }
    },

    created () {
    },

    mounted () {
        this.initLandEcharts()
        this.initPersonEcharts()
        this.inithouseEcharts()
        this.clickPeopleChart()
        this.clickLandChart()
        // 获取所有数据并加载
        this.getHomeAllData()

        if (this.userInfo.dept_id != '1123598813738675201') {
            this.showBack = false
            this.isAllPoliceStation = false
        }

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })
    },
    methods: {
        echartsResize () {
            homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
            landMyChart && landMyChart != null && landMyChart.resize()
            keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
            houseMyChart && houseMyChart != null && houseMyChart.resize()
        },
        /**
         * @description: 获取首页的所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
            this.policeStaionID = id

        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)
            homePersonmyChart.setOption(this.initPersonOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'], [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232], ['#06B5D7', '#44C0C1', '#71C8B1']))
        },
            if (id != '') {
                this.showBack = false
                this.isAllPoliceStation = false

        initPersonOptions (xDate, yDate, colors) {
            return {
                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>',
                    textStyle: {
                        fontSize: fontSize(14)
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xDate,

                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    }
                },
                series: [
                    {
                        data: yDate,
                        type: 'bar',
                        barWidth: '40%',
                        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] },
                                        ]
                                    )
                                }
                            },
                            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] }
                                        ]
                                    )
                                }
                            }
                        },
                    }
                ],
                grid: {
                    top: '4%',
                    left: '2%',
                    right: '2%',
                    bottom: '4%',
                    containLabel: true
                },
                this.tabTypeThree = 0
            } else {
                this.showBack = true
                this.isAllPoliceStation = true
            }

            this.personTabClick(this.tabType)

            this.houseTabClick(this.tabTypeTwo)

            this.landTabClick(this.tabTypeThree)

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

            leftTiming = setInterval(async () => {
                this.personTabClick(this.tabType)

                this.houseTabClick(this.tabTypeTwo)

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

        /**
         * @description: 户籍人口和重点人员切换
         * @param {*} type
         * @return {*}
         */
        personTabClick (type) {
            this.tabType = type
            this.dataDeep = 1
            let xDate, yDate, colors

            this.disposeEchart()

            if (type == 0) {
                homePersonmyChart.dispose()
                this.initPersonEcharts()
                homePersonmyChart.off('click')
                this.clickPeopleChart()
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
                homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                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.peopleTabClick(type)

                this.initkeyPersonEcharts()

            }
        },

        inithouseEcharts () {
        /**
         * @description: 获取分局户籍人口数据
         * @return {*}
         */
        getPoliceStationInfo () {
            getVillagePersonStatisticInfo().then(res => {
                if (res.data.code == 200) {
                    this.disposeEchart()

                    this.personAll = res.data.data
                    this.policeStationPersonInfo = res.data.data
                    //异步，因此放进接口方法内部
                    this.initPersonEcharts()
                    this.clickPeopleChart()
                }
            })
        },


        /**
         * @description: 获取派出所户籍人口数据
         * @param {*} policeStationId
         * @param {*} name
         * @return {*}
         */
        getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
            getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
                if (res.data.code == 200) {
                    this.disposeEchart()

                    var chartDom = document.getElementById('PersonEcharts')
                    homePersonmyChart = this.$echarts.init(chartDom)
                    this.personAll = res.data.data

                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']

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

                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                    this.clickPeopleChart()
                }
            })
        },

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

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

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

            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
        },

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

            if (xDate.length == 0) {
                options = {
                    title: {
                        text: '暂无数据',
                        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)
                        }
                    },
                    series: [
                        {
                            data: yDate,
                            type: 'bar',
                            barWidth: '40%',
                            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] },
                                            ]
                                        )
                                    }
                                },
                                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] }
                                            ]
                                        )
                                    }
                                }
                            },
                        }
                    ],
                    grid: {
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '1%',
                        containLabel: true
                    },
                }
            }

            return options

        },

        /**
         * @description: 现有人图表中的返回按钮
         * @return {*}
         */
        backBegin () {
            this.dataDeep = 1
            this.initPersonEcharts()
        },

        /**
         * @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)
                })

                this.inithouseEcharts(xDate, yDate)
            })
        },

        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initHouseOptions(['公共设施', '餐饮服务', '风景名胜', '公司企业', '购物服务', '商务住宅', '生活服务', '住宿服务', '政府机构及社会团体'], [88188, 1222211, 464104, 43201, 12302, 88188, 1222211, 464104, 43201, 12302], [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]))
            houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
        },

        initHouseOptions (xDate, y1Date, y2Date) {
@@ -454,16 +565,19 @@
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2) + '万人'
                            msg = (params.value / 10000).toFixed(2) + '万栋'
                        } else {
                            msg = params.value + '人'
                            msg = params.value + '栋'
                        }

                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                        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: {
                        fontSize: fontSize(14)
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                color: myColor,
@@ -481,7 +595,6 @@
                    axisTick: {
                        show: false
                    },

                },
                yAxis: {
                    type: 'category',
@@ -506,10 +619,11 @@
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 30, 30, 0],
                                color: function (params) {
                                    var num = myColor.length
                                    return myColor[params.dataIndex % num]
                                },
                                //     color: function (params) {
                                //         var num = myColor.length
                                //         return myColor[params.dataIndex % num]
                                //     },
                                color: '#ed7c2f'
                            }
                        },
                    },
@@ -518,7 +632,7 @@
                    //     show: true,
                    //     type: 'bar',
                    //     barGap: '-100%',
                    //     barWidth: '35%', //统计条宽度 
                    //     barWidth: '35%', //统计条宽度
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'rgba(102, 102, 102,0.5)'
@@ -534,31 +648,18 @@
                    bottom: '2%',
                    containLabel: true
                },

            }
        },

        houseTabClick (type) {
            this.tabTypeTwo = type

            let xDate, y1Date, y2Date

            this.disposeHouseEchart()
            if (type == 0) {
                xDate = ['公共设施', '餐饮服务', '风景名胜', '公司企业', '购物服务', '商务住宅', '生活服务', '住宿服务', '政府机构及社会团体']
                y1Date = [88188, 1222211, 464104, 43201, 12302, 88188, 1222211, 464104, 43201, 12302]
                y2Date = [{ 'value': 1222211, 'realValue': 88188 }, { 'value': 1222211, 'realValue': 1222211 }, { 'value': 1222211, 'realValue': 464104 }, { 'value': 1222211, 'realValue': 43201 }, { 'value': 1222211, 'realValue': 12302 }]
                this.getHouseStatisticInfo(2)
            } else {
                xDate = ['道路附属设施', '地名地址信息', '风景名胜', '交通设施服务', '金融保险服务', '科教文化服务', '摩托车服务', '汽车服务', '通行设施']
                y1Date = [54, 77, 97, 141, 191, 54, 77, 97, 141, 191]
                y2Date = [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }]
                this.getHouseStatisticInfo(1)
            }
            houseMyChart.setOption(this.initHouseOptions(xDate, y1Date, y2Date), true)
        },

        initLandEcharts () {
            var chartDom = document.getElementById('landEcharts')
            landMyChart = this.$echarts.init(chartDom)
            landMyChart.setOption(this.initLandOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'], [6414, 2211, 4321, 1232, 881, 6414, 2211, 4321, 1232, 881]))
        },

        initLandOptions (xDate, yDate) {
@@ -567,26 +668,28 @@
                    top: '4%',
                    left: '12%',
                    right: '4%',
                    bottom: '24%'
                    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: {
                        fontSize: fontSize(14)
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xDate,

                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(14)
                        fontSize: fontSize(10)
                    },
                    axisLine: {
                        lineStyle: {
@@ -596,12 +699,13 @@
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                        fontSize: fontSize(12)
                    }
                },
                series: [
@@ -612,10 +716,10 @@
                        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]
                                },
                                // color: function (params) {
                                //     var num = Math.floor(Math.random() * (myLandColors.length - 1) + 1)
                                //     return myLandColors[params.dataIndex % num]
                                // },
                            }
                        },
                    }
@@ -642,370 +746,305 @@
                //         end: 40,
                //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
                //         moveOnMouseWheel: true, // 开启滚轮平移
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
                //     }
                // ]
            }
        },

        landTabClick (type) {
            this.tabTypeThree = type
            let xDate, yDate

            if (type == 0) {
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                yDate = [6414, 2211, 4321, 1232, 881, 6414, 2211, 4321, 1232, 881]
            } else if (type == 1) {
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                yDate = [881, 2211, 6414, 4321, 1232, 6414, 2211, 4321, 1232, 881]
            }

            landMyChart.setOption(this.initLandOptions(xDate, yDate), true)
        },

        peopleTabClick (type) {
            // this.peopletype = type
            homePersonmyChart.dispose()
            this.$nextTick(() => {
                if (type == 0) {
                    this.initPersonEcharts()
                    homePersonmyChart.off('click')
                    this.clickPeopleChart()
                } else {
                    this.initkeyPersonEcharts()
                    homePersonmyChart.off('click')
                    this.clickkeyPersonChart()
                }
                homePersonmyChart.resize()
            })
        },

        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                let xDate, yDate, colors
                this.dataDeep = 2
                if (params.name == '车站所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
                    colors = ['#ccf9d0', '#f9d888', '#f7857e']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '沙溪所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [641, 423, 221, 123, 88]
                    colors = ['#102129', '#1f3942', '#2a4f5f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '灵溪所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [111, 531, 211, 431, 64]
                    colors = ['#23b9e9', '#c76ee0', '#f05265']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '北门所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [887, 234, 452, 321, 154]
                    colors = ['#b22d2b', '#614976', '#4c3042']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '江光所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [400, 500, 200, 450, 245]
                    colors = ['#3089bf', '#77d8f9', '#f4fcfe']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '湖北') {
                    xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市']
                    yDate = [88, 221, 641, 432, 123]
                    colors = ['#2b5144', '#5a987f', '#94ebc1']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '上海') {
                    xDate = ['黄浦区', '长宁区', '静安区', '虹口区', '闵行区']
                    yDate = [641, 423, 221, 123, 88]
                    colors = ['#f750c2', '#d6369a', '#bc1f76']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '北京') {
                    xDate = ['东城区', '西城区', '海淀区', '昌平区', '大兴区']
                    yDate = [111, 531, 211, 431, 64]
                    colors = ['#7e81d5', '#86abe6', '#8fe5e3']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '广东') {
                    xDate = ['珠海市', '东菀市', '佛山市', '中山市', '惠州市']
                    yDate = [887, 234, 452, 321, 154]
                    colors = ['#ba1432', '#6b0e33', '#2a0b35']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '浙江') {
                    xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市']
                    yDate = [400, 300, 200, 450, 245]
                    colors = ['#f12e10', '#f36c15', '#f4a818']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '日本') {
                    xDate = ['东京都', '北海道', '大阪府', '京都府', '43县']
                    yDate = [88, 221, 641, 432, 123]
                    colors = ['#6e978f', '#ad885a', '#e97b27']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '美国') {
                    xDate = ['加利福尼亚州', '德克萨斯州', '纽约州', '俄亥俄州']
                    yDate = [641, 423, 221, 123, 88]
                    colors = ['#d54956', '#9f976e', '#73d781']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '俄罗斯') {
                    xDate = ['西北联邦', '中央联邦', '南方联邦', '伏尔加联邦']
                    yDate = [111, 531, 211, 431, 64]
                    colors = ['#7d65c0', '#a47db4', '#e0a8c5']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '英国') {
                    xDate = ['英格兰', '威尔士', '苏格兰', '北爱尔兰']
                    yDate = [887, 234, 452, 321, 154]
                    colors = ['#584d7b', '#9b836a', '#f8ce52']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '印度') {
                    xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦']
                    yDate = [400, 300, 200, 450, 245]
                    colors = ['#0f97f2', '#7d629d', '#e1344f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                if (params.data.type == 'policeStation') {
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
                } else {
                    this.$emit('showpeopledetail', params.name)
                    this.$emit('showpeopledetail', params.data.id, params.data.name)
                }
            })
        },

        clickLandChart () {
            landMyChart.on('click', params => {
                this.landVisible = true
                this.landTitle = params.name
                if (this.tabTypeThree == 0) {
                    this.$emit('showlanddetail', params.name, this.landDetailArr1)
                } else {
                    this.$emit('showlanddetail', params.name, this.landDetailArr2)
                }
            })
        },
        /**
         * @description: 初始化重点人员饼状图
         * @return {*}
         */
        async initkeyPersonEcharts () {
            this.disposeEchart()

        clickkeyPersonChart () {
            keyPersonmyChart.on('click', params => {
                let keyPersonDetailNewArr = []
                this.keyPersonSelectArr.some((item) => {
                    if (item.type == params.name) {
                        keyPersonDetailNewArr.push(item)
                    }
                })
                this.$emit('showkeypersondetail', params.name, keyPersonDetailNewArr)
            })
        },

        initkeyPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            keyPersonmyChart = this.$echarts.init(chartDom)
            let dataArr = this.getKeyPersonCount(this.keyPersonSelectArr)
            keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr))

            let personInfo = await this.getPersonInfo()

            keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))

            this.clickkeyPersonChart()
        },
        /**
         * @description: 调用接口获取重点人员数据
         * @return {*}
         */
        getPersonInfo () {
            const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                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) {
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2) + '万人'
                        } else {
                            msg = params.value + '人'
            let options

            if (dataArr.length == 0) {
                options = {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: fontSize(14)
                        }
                        msg = ` <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #5470c6;"></span> ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
                        return msg
                    }
                },
                legend: {
                    left: '45%',
                    y: '1%',
                    itemGap: 20,
                    textStyle: {
                        color: '#fff'
                    },
                    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
                }
            } else {
                options = {
                    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
                        },
                        textStyle: {
                            color: '#fff',
                            fontSize: fontSize(12)
                        }
                        let v = tarValue
                        return `${name}     ${v} 人    `
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['30%', '60%'],
                        center: ['22%', '55%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        top: 'middle',
                        left: '45%',
                        y: '1%',
                        itemGap: 20,
                        textStyle: {
                            color: '#fff'
                        },
                        labelLine: {
                            show: false
                        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} 人    `
                        },
                        data: dataArr
                    }
                ],
                grid: {
                    x: 10,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
            }
        },

        selectPoliceChangeData (name) {
            if (this.peopletype == 0 && this.tabType == 0) {
                let xDate, yDate, colors
                if (name == '车站所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
                    colors = ['#0f97f2', '#7d629d', '#e1344f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '沙溪所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [641, 423, 221, 123, 88]
                    colors = ['#584d7b', '#9b836a', '#f8ce52']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '灵溪所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [111, 531, 211, 431, 64]
                    colors = ['#7d65c0', '#a47db4', '#e0a8c5']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '北门所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [887, 234, 452, 321, 154]
                    colors = ['#6e978f', '#ad885a', '#e97b27']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '江光所') {
                    this.dataDeep = 2
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [400, 500, 200, 450, 245]
                    colors = ['#7e81d5', '#86abe6', '#8fe5e3']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (name == '全部') {
                    this.dataDeep = 1
                    xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
                    yDate = [881, 2211, 6414, 4321, 1232]
                    colors = ['#f750c2', '#d6369a', '#bc1f76']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                }
            } else if (this.peopletype == 1) {
                let arr = []
                if (name == '全部') {
                    this.keyPersonSelectArr = this.keyPersonDetailArr
                } else {
                    this.keyPersonDetailArr.some(item => {
                        if (item.policeStation == name) {
                            arr.push(item)
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['30%', '60%'],
                            center: ['22%', '55%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: dataArr
                        }
                        this.keyPersonSelectArr = arr
                        this.keyPersonSelectSaveArr = arr
                    })
                    ],
                    grid: {
                        x: 10,
                        y: 10,
                        x2: 10,
                        y2: 20
                    },
                }
                this.initkeyPersonEcharts()
            }

            return options
        },

        backBegin () {
            this.dataDeep = 1
            let xDate, yDate, colors
            if (this.tabType == 0) {
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            } else if (this.tabType == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
                colors = ['#ef9faa', '#f7bfc6', '#fedade']
            } else if (this.tabType == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#7d65c0', '#a47db4', '#e0a8c5']
        /**
         * @description: 重点人员饼状图的点击事件
         * @return {*}
         */
        async clickkeyPersonChart () {
            keyPersonmyChart.on('click', async params => {
                this.$emit('showkeypersondetail', params.name)
            })
        },

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

            this.disposeLandEchart()
            if (type == 0) {
                this.getAreaStatisticInfo(2)
            } else if (type == 1) {
                this.getAreaStatisticInfo(1)
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },

        getKeyPersonCount (arr) {
            let valueArr = [0, 0, 0, 0, 0, 0, 0]
            arr.some(item => {
                if (item.type == '涉恐人员') {
                    valueArr[0] = Number(valueArr[0]) + 1
                } else if (item.type == '涉稳人员') {
                    valueArr[1] = Number(valueArr[1]) + 1
                } else if (item.type == '涉毒人员') {
                    valueArr[2] = Number(valueArr[2]) + 1
                } else if (item.type == '在逃人员') {
                    valueArr[3] = Number(valueArr[3]) + 1
                } else if (item.type == '重大刑事犯罪前科人员') {
                    valueArr[4] = Number(valueArr[4]) + 1
                } else if (item.type == '肇事肇祸精神病人') {
                    valueArr[5] = Number(valueArr[5]) + 1
                } else if (item.type == '重点上访人员') {
                    valueArr[6] = Number(valueArr[6]) + 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]
                }

                this.initLandEcharts(landData)
            })
        },

        /**
         * @description: 现有地图表渲染
         * @param {*} landData
         * @return {*}
         */
        initLandEcharts (landData) {
            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 => {
                if (this.tabTypeThree == 0) {
                    this.$emit('showlanddetail', params.name, 2, params.data.id)
                } else {
                    this.$emit('showlanddetail', params.name, 1, params.data.id)
                }
            })
            let KeyPersonDataArr = [
                { value: valueArr[0], name: '涉恐人员' },
                { value: valueArr[1], name: '涉稳人员' },
                { value: valueArr[2], name: '涉毒人员' },
                { value: valueArr[3], name: '在逃人员' },
                { value: valueArr[4], name: '重大刑事犯罪前科人员' },
                { value: valueArr[5], name: '肇事肇祸精神病人' },
                { value: valueArr[6], name: '重点上访人员' }
            ]
            return KeyPersonDataArr
        },

        selectAreaChangeData (name) {
            if (this.peopletype == 1) {
                if (this.peopletype == 1 && name != '全部') {
                    let arr = []
                    this.keyPersonSelectSaveArr.some(item => {
                        if (item.housingEastate == name) {
                            arr.push(item)
                        }
                    })
                    this.keyPersonSelectArr = arr
                } else {
                    this.keyPersonSelectArr = this.keyPersonSelectSaveArr
                }
                this.initkeyPersonEcharts()
        /**
         * @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')
            }
        },

        // echartsResize (echartsName) {
        //     echartsName.resize()
        // },
        /**
         * @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)

        if (homePersonmyChart) {
            homePersonmyChart.dispose()
            homePersonmyChart = null
        }
        if (houseMyChart) {
            houseMyChart.dispose()
            houseMyChart = null
        }
        if (landMyChart) {
            landMyChart.dispose()
            landMyChart = null
        }
        if (keyPersonmyChart) {
            keyPersonmyChart.dispose()
            keyPersonmyChart = null
        this.disposeEchart()
        this.disposeHouseEchart()
        this.disposeLandEchart()

        if (leftTiming != null) {
            clearInterval(leftTiming)
            leftTiming = null
        }
    }
}
@@ -1031,7 +1070,7 @@
        .back {
            color: #fff;
            position: absolute;
            top: 120px;
            top: 96px;
            right: 16px;
            width: 20px;
            height: 20px;
@@ -1074,14 +1113,14 @@
        }

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

            padding: 0 18px 0 18px;
            position: relative;
            text-align: left;
            height: 54px;
            line-height: 54px;
            font-size: 16px;
            display: flex;
            justify-content: space-between;

            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
@@ -1145,12 +1184,27 @@
                & > div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;
                }
            }

            .tab {
                display: flex;
                justify-content: space-around;
                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;
            }
        }

@@ -1204,4 +1258,4 @@
        stroke-dashoffset: 888;
    }
}
</style>
</style>