srs-police-affairs.git

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

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

			<div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack"
			@click="backBegin">
			</div>
			</div>
			<div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
			<div class="tab-title-small">重点人员:</div>
			<div class="tab-title-small">
			{{
			personAll.emphasisNum ? personAll.emphasisNum : 0
			}}人
			</div>
			</div>
			</div>

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

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

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

			<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
			</use>
			</svg>
			</div>
			<div class="house-box" style="position: relative;">
			<div class="box">
			<div class="title">场所信息</div>
			<el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
			<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">{{ placeNum }}</div>
			<use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
			mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
			repeatCount="indefinite" />
			</use>
			</svg>
			</div>
			<div class="house-box" style="position: relative;">
			<div class="box">
			<div class="title">场所信息</div>
			<el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
			style="height: calc(100% - 17.6%);">
			<div class="sub-tab house-sub-tab">
			<div class="sub-child-tab">
			<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
			<div class="tab-title-small">九小场所:</div>
			<div class="tab-title-small">{{ placeNum }}</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">{{ otherPlaceNum }}</div>
			</div>
			</div>
			<div class="sub-child-tab">
			<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 2 }" @click="houseTabClick(2)">
			<div class="tab-title-small">风险隐患场所:</div>
			<div class="tab-title-small">{{ riskNum }}</div>
			</div>
			<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 3 }" @click="houseTabClick(2)">
			<div class="tab-title-small">企业信息:</div>
			<div class="tab-title-small">{{ riskNum }}</div>
			</div>
			</div>
			</div>
			<div id="houseEcharts" class="echarts-box house-echarts-box"></div>
			</el-main>
			</div>
			<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
			<div class="tab-title-small">重点场所:</div>
			<div class="tab-title-small">{{ otherPlaceNum }}</div>
			</div>
			<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 2 }" @click="houseTabClick(2)">
			<div class="tab-title-small">风险隐患场所:</div>
			<div class="tab-title-small">{{ riskNum }}</div>
			</div>
			</div>
			<div id="houseEcharts" class="echarts-box"></div>
			</el-main>
			</div>

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

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

			<script>
			import { fontSize } from '@/utils/fontSize.js'
			import {
			getAreaStatisticInfo,
			getVillageStatisticData,
			getVillageStatisticDetail,
			getPlaceOfConcernStatisticData,
			getPlaceOfConcernStatisticDetail,
			getVillageDetailAndPlaceStatisticNumber,
			getNineStatistics
			getAreaStatisticInfo,
			getVillageStatisticData,
			getVillageStatisticDetail,
			getPlaceOfConcernStatisticData,
			getPlaceOfConcernStatisticDetail,
			getVillageDetailAndPlaceStatisticNumber,
			getNineStatistics
			} from "@/api/home/index.js"
			import { schoolJSON } from '../homeleft/school'
			import { hospitalJSON } from '../homeleft/hospital'
			@@ -176,1886 +193,1878 @@
			const peopleColor2 = '#f26390'

			export default {
			inject: ['userInfo'],
			inject: ['userInfo'],

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

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

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

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

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

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

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

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

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

			keyPersonmyChart.on("mouseout", function (param) {
			curIndex = param.dataIndex
			if (timer) {
			clearInterval(timer)
			data () {
			return {
			placeNum: 0,
			otherPlaceNum: 0,
			riskNum: 0,
			tabType: 0,
			personEchartsLoading: false,
			houseEchartsLoading: false,
			landEchartsLoading: false,
			peopletype: 0,
			tabTypeTwo: 0,
			tabTypeThree: 0,
			peopleTitle: '',
			peopleVisible: false,
			dataDeep: 1,
			keyPersonOption: {},
			keyPersonSelectSaveArr: [],
			areaNum: '',
			villageNum: '',
			policeVillageNum: '',
			policeStationPersonInfo: {},
			villagePersonStatisticInfoList: [],
			showBack: true,
			isAllPoliceStation: true,
			realHouseNum: '',
			keyPlaceNum: '',
			personAll: '',
			// 记录当前选中派出所的ID
			policeStaionID: '',
			peopleLoading: false,
			personEchartsHeight: '100%',
			syldBigType: '',
			syldName: '',
			gzcsType: '',
			gzcsUnitName: '',
			gzcsPerson: '',
			gzcsPhone: '',
			isFirstMounted: true,
			clickPoliceStationId: '',
			areaId: null,
			}
			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)
			})
			},
			/**
			* 责任区查询
			* @param {*} areaId
			*/
			getHomeAllDataByAreaId (policeStationId, areaId) {
			// if(areaId){
			this.policeStaionID = policeStationId
			this.areaId = areaId
			this.getNineStatistics(true)
			// }
			},

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

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

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

			this.getNineStatistics(true)
			this.houseTabClick(this.tabTypeTwo)

			this.landTabClick(this.tabTypeThree)

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

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

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

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

			this.getPoliceStationInfo()

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

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

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

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

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

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

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

			if (this.villagePersonStatisticInfoList.data.length > 0) {
			this.villagePersonStatisticInfoList.data.forEach(e => {
			xDate.push(e.name.replace('居民委员会', ''))
			yDate1.push({
			value: e.hjnum,
			name: e.name,
			id: e.id,
			communityCode: e.communityCode
			})
			yDate2.push({
			value: e.synum,
			name: e.name,
			id: e.id,
			communityCode: e.communityCode
			})
			methods: {
			// 酒店列表
			getHotelList () {
			getHotelList({ deptId: this.$parent.areaChangeValue, orderName: 'hotel_name', hotelName: this.$parent.zhuSuName, orderRule: 'asc', size: this.$parent.zhuSuPage.pageSize, current: this.$parent.zhuSuPage.currentPage }).then(res => {
			console.log(res.data.data.records, 'getHotelList-1234')
			this.$parent.zhuSuPage.total = res.data.data.total
			this.$parent.zhuSuArr = res.data.data.records
			setTimeout(() => {
			this.$parent.zhuSuLoading = false
			}, 500)
			})
			}
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2), true)
			this.clickPeopleChart()
			},

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

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

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

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

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

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

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

			if (xDate.length == 0) {
			options = {
			title: {
			text: '暂无数据1',
			x: 'center',
			y: 'center',
			textStyle: {
			color: '#fff',
			fontWeight: 'normal',
			fontSize: fontSize(14)
			// 设备饼图轮播
			keyPeopleEchartsCarousel () {
			let curIndex = 0
			if (timer) {
			clearInterval(timer)
			}
			}
			}
			} 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,
			max: Math.floor(Math.max(...yDate1.map(i => i.value), ...yDate2.map(i => i.value)) * 1.5),
			splitLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(12)
			}
			},
			legend: {
			itemWidth: 15,
			itemHeight: 15,
			data: ['户籍人口', '实有人口'],
			textStyle: {
			color: '#fff'
			},
			formatter: function (name) {
			var data = []
			if (name == '户籍人口') {
			data = options.series[0].data
			} else {
			data = options.series[1].data
			}
			var total = 0
			for (var i = 0; i < data.length; i++) {
			total += data[i].value
			}
			return `${name} (${total}人)`
			}
			},
			series: [
			{
			name: '户籍人口',
			data: yDate1,
			type: 'bar',
			barWidth: '40%',
			stack: true,
			emphasis: {
			disabled: true,
			focus: 'none'
			},
			itemStyle: {
			normal: {
			color: colors1
			// color: function (params) {
			// return new global.echarts.graphic.LinearGradient(
			// 0, 0, 0, 1,
			// [
			// { offset: 0, color: colors1[0] },
			// { offset: 0.5, color: colors1[1] },
			// { offset: 1, color: colors1[2] },
			// ]
			// )
			// }
			},
			emphasis: {
			color: colors1
			// color: function (params) {
			// return new global.echarts.graphic.LinearGradient(
			// 0, 0, 0, 1,
			// [
			// { offset: 0, color: colors1[2] },
			// { offset: 0.7, color: colors1[1] },
			// { offset: 1, color: colors1[0] }
			// ]
			// )
			// }
			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)
			}
			},
			},
			{
			name: '实有人口',
			data: yDate2,
			type: 'bar',
			barWidth: '40%',
			stack: true,
			emphasis: {
			disabled: true,
			focus: 'none'
			},
			itemStyle: {
			normal: {
			color: colors2
			// color: function (params) {
			// return new global.echarts.graphic.LinearGradient(
			// 0, 0, 0, 1,
			// [
			// { offset: 0, color: colors2[2] },
			// { offset: 0.5, color: colors2[1] },
			// { offset: 1, color: colors2[0] },
			// ]
			// )
			// }
			},
			emphasis: {
			color: colors2
			// color: function (params) {
			// return new global.echarts.graphic.LinearGradient(
			// 0, 0, 0, 1,
			// [
			// { offset: 0, color: colors2[0] },
			// { offset: 0.7, color: colors2[1] },
			// { offset: 1, color: colors2[2] }
			// ]
			// )
			// }
			}
			},
			},
			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)
			})
			},
			/**
			* 责任区查询
			* @param {*} areaId
			*/
			getHomeAllDataByAreaId (policeStationId, areaId) {
			// if(areaId){
			this.policeStaionID = policeStationId
			this.areaId = areaId
			this.getNineStatistics(true)
			// }
			},

			],
			grid: {
			top: '4%',
			left: '2%',
			right: '2%',
			bottom: '1%',
			containLabel: true
			},
			}
			}
			/**
			* @description: 获取首页的所有数据
			* @return {*}
			*/
			getHomeAllData (id = '') {
			this.areaId = null
			this.policeStaionID = id
			this.clickPoliceStationId = id

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

			},

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

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

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

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

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

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

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

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

			// 关注场所详情
			getPlaceOfConcernStatisticDetail () {
			getPlaceOfConcernStatisticDetail({ deptId: this.userInfo.dept_id, type: this.gzcsType, unitName: this.gzcsUnitName, person: this.gzcsPerson, phone: this.gzcsPhone, current: this.$parent.gzcsPage.currentPage, size: this.$parent.gzcsPage.pageSize }).then(res => {
			console.log('getPlaceOfConcernStatisticDetail', res, res.data.data.records)
			this.$parent.gzcsPage.total = res.data.data.total
			this.$parent.gzcsArr = res.data.data.records
			setTimeout(() => {
			this.$parent.gzcsLoading = false
			}, 500)
			})
			},
			// 九小场所echarts
			initPlaceEcharts (xDate, yDate, type) {
			var chartDom = document.getElementById('houseEcharts')
			houseMyChart = this.$echarts.init(chartDom)
			houseMyChart.setOption(this.initPlaceOptions(xDate, yDate))
			// 圆柱点击事件
			this.clickPlaceChart(type)
			},
			// 场所图表点击事件
			clickPlaceChart (type) {
			this.tabTypeThree = type
			this.houseEchartsLoading = true
			houseMyChart.on('click', params => {
			console.log(type, 1122)
			if (type == 1) {
			this.$emit('showplacedetail', type, '重点场所列表', params.name, this.areaId)
			} else if (type == 2) {
			this.$emit('showplacedetail', type, '风险隐患场所列表', params.name, this.areaId)
			} else {
			this.$emit('showplacedetail', type, '九小场所列表', params.name, this.areaId)
			}
			})
			},
			// 九小场所
			initPlaceOptions (xDate, y1Date) {
			const that = this
			return {
			tooltip: {
			trigger: 'item',
			formatter: params => {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2)
			this.tabTypeThree = 0
			} else {
			msg = params.value
			this.showBack = true
			this.isAllPoliceStation = true
			}
			this.tabType = 0//解决下拉选择派出所重点人员显示bug
			this.personTabClick(this.tabType)

			this.getNineStatistics(true)
			this.houseTabClick(this.tabTypeTwo)

			this.landTabClick(this.tabTypeThree)

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

			msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
			return msg
			},
			backgroundColor: 'rgba(8, 56, 185, 0.9)',
			borderColor: 'rgba(8, 56, 185, 0.9)',
			textStyle: {
			color: '#fff',
			fontSize: fontSize(12)
			}
			leftTiming = setInterval(async () => {
			this.houseTabClick(this.tabTypeTwo)

			this.landTabClick(this.tabTypeThree)
			}, 600000)
			},
			color: myColor,
			xAxis: {
			type: 'value',
			splitLine: {
			show: false
			},
			axisLine: {
			show: false
			},
			axisLabel: {
			show: false,
			},
			axisTick: {
			show: false
			},
			},
			yAxis: {
			type: 'category',
			data: xDate,
			axisLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(14)
			},
			axisTick: {
			show: false
			},
			},
			series: [
			{
			data: y1Date,
			type: 'bar',
			barWidth: '50%',
			barCategoryGap: '80%',
			zlevel: 2,
			cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
			itemStyle: {
			normal: {
			color: '#ed7c2f',
			label: {
			show: true, //开启显示
			position: 'right', //在上方显示
			textStyle: { //数值样式
			color: '#ed7c2f',
			fontSize: 10
			}

			/**
			* @description: 户籍人口和重点人员切换
			* @param {*} type
			* @return {*}
			*/
			personTabClick (type) {
			console.log('type', type, 'this.tabType', this.tabType, 'this.isFirstMounted', this.isFirstMounted)
			if (type == 0) {
			if (this.tabType == 0 && !this.isFirstMounted) {
			console.log('再次点击人口总数', this.isFirstMounted)
			this.$emit('showpeopledetail', '', '总人口列表', 'includeKeypeople', this.clickPoliceStationId)
			return
			}
			}
			},
			},
			],
			grid: {
			top: '2%',
			left: '2%',
			// right: '-1%',
			right: '10%',
			bottom: '2%',
			containLabel: true
			},
			dataZoom: [
			{
			type: "inside",
			startValue: 0,
			endValue: 4,
			minValueSpan: 8,
			maxValueSpan: 8,
			yAxisIndex: [0],
			zoomOnMouseWheel: false, // 关闭滚轮缩放
			moveOnMouseWheel: true, // 开启滚轮平移
			moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
			},
			{
			type: 'slider',
			realtime: true,
			startValue: 0,
			endValue: 4,
			width: '3.5',
			height: '90%',
			yAxisIndex: [0], // 控制y轴滚动
			// fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
			fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
			borderColor: "rgba(17, 100, 210, 0.12)",
			backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
			handleSize: 0, // 两边手柄尺寸
			showDataShadow: false,//是否显示数据阴影默认auto
			showDetail: false, // 拖拽时是否展示滚动条两侧的文字
			top: '1%',
			right: '5',
			}
			this.isFirstMounted = false
			this.dataDeep = 1
			this.disposeEchart()
			this.personEchartsLoading = true
			this.personEchartsHeight = '100%'
			if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {

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

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

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

			]
			}
			},

			houseTabClick (type) {
			this.tabTypeTwo = type

			this.houseEchartsLoading = true

			this.disposeHouseEchart()

			this.getNineStatistics()

			// 其它场所
			// this.getHouseStatisticInfo(2)

			// 场所数量
			// this.getHouseStatisticInfo(1)
			},

			getNineStatistics (flag = false) {
			getNineStatistics({
			deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
			areaId: this.areaId
			}).then(res => {
			console.log("九小", res)
			let xDate = []
			let yDate = []

			this.realHouseNum = res.data.data.count

			let otherList = res.data.data.otherList.reverse()
			let placeList = res.data.data.placeList.reverse()
			let riskHazardList = res.data.data.riskHazardList.reverse()
			if (flag) {
			this.placeNum = placeList.reduce((pre, cur) => {
			return pre + cur.num
			}, 0)
			this.otherPlaceNum = otherList.reduce((pre, cur) => {
			return pre + cur.num
			}, 0)
			this.riskNum = riskHazardList.reduce((pre, cur) => {
			return pre + cur.num
			}, 0)

			return
			}

			if (this.tabTypeTwo == 1) {
			otherList.forEach(item => {
			xDate.push(item.nineTypeName)
			yDate.push({
			value: item.num,
			id: item.id
			})
			})
			} else if (this.tabTypeTwo == 2) {
			riskHazardList.forEach(item => {
			xDate.push(item.nineTypeName)
			yDate.push(item.num)
			})
			} else {
			placeList.forEach(item => {
			xDate.push(item.nineTypeName)
			yDate.push(item.num)
			})
			}

			this.initPlaceEcharts(xDate, yDate, this.tabTypeTwo)

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

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

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

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

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

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

			this.$emit('showpeopledetail', params.data.id, params.data.name, params.data.communityCode)
			}
			})
			},

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

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

			} else {
			this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
			this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
			layerName: "jiudianLayer",
			type: "VectorLayer",
			/**
			* @description: 获取分局户籍人口数据
			* @return {*}
			*/
			getPoliceStationInfo () {
			getVillagePersonStatisticInfo().then(res => {
			if (res.data.code == 200) {
			this.disposeEchart()
			curSubofficeData = res.data.data
			this.personAll = res.data.data
			console.log('getPoliceStationInfo', res.data.data)
			this.policeStationPersonInfo = res.data.data
			//异步，因此放进接口方法内部
			this.initPersonEcharts()
			this.clickPeopleChart()
			setTimeout(() => {
			this.personEchartsLoading = false
			}, 500)
			}
			}).catch(res => {
			setTimeout(() => {
			this.personEchartsLoading = false
			}, 500)
			})
			this.$parent.syldPage.currentPage = 1
			this.$parent.syldPopupTitle = params.name
			this.syldBigType = params.name
			this.syldName = ''
			this.$parent.syldArr = []
			this.$parent.syldPopupShow = true
			this.$parent.syldLoading = true
			this.getVillageStatisticDetail()
			}
			},

			} else {
			console.log('关注场所')
			this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
			this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
			layerName: "jiudianLayer",
			type: "VectorLayer",
			})
			this.$parent.gzcsPage.currentPage = 1
			this.gzcsType = params.name
			this.gzcsUnitName = ''
			this.gzcsPerson = ''
			this.gzcsPhone = ''
			this.$parent.gzcsArr = []
			this.$parent.gzcsPopupShow = true
			this.$parent.gzcsLoading = true
			this.getPlaceOfConcernStatisticDetail()
			}
			})
			},
			/**
			* @description: 获取派出所户籍人口数据
			* @param {*} policeStationId
			* @param {*} name
			* @return {*}
			*/
			getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
			getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
			if (res.data.code == 200) {
			console.log(res, 'getVillagePersonStatisticInfoByPoliceStationId')
			this.disposeEchart()
			var chartDom = document.getElementById('PersonEcharts')
			homePersonmyChart = this.$echarts.init(chartDom)
			this.personAll = res.data.data
			console.log('this.personAll', this.personAll)

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

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

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

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

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

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

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

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

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

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

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

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

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

			const high = this.$refs.REFPERSONECHARTS.offsetHeight

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

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

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


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

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

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

			return item
			})

			return res.data
			})

			return data
			},

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

			if (dataArr.length == 0) {
			options = {
			title: {
			text: '暂无重点人员数据',
			x: 'center',
			y: 'center',
			textStyle: {
			color: '#fff',
			fontWeight: 'normal',
			fontSize: fontSize(14)
			}
			}
			}
			} else {
			options = {
			tooltip: {
			trigger: 'item',
			formatter: params => {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2) + '万人'
			} else {
			msg = params.value + '人'
			}
			msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
			return msg
			},
			backgroundColor: "rgba(8, 56, 185, 0.9)",
			borderColor: "rgba(8, 56, 185, 0.9)",
			textStyle: {
			fontSize: fontSize(12)
			},
			confine: true
			},
			// legend: {
			// orient: 'vertical',
			// top: 'middle',
			// right: '2%',
			// y: '1%',
			// itemGap: 15,
			// textStyle: {
			// color: '#fff'
			// },
			// align: 'left',
			// formatter: function (name) {
			// let data = dataArr
			// let tarValue
			// for (let i = 0; i < data.length; i++) {
			// if (data[i].name == name) {
			// tarValue = data[i].value
			// }
			// }
			// let v = tarValue
			// return `${name} ${v} 人 `
			// },
			// },
			series: [
			{

			type: 'pie',
			radius: [20, 50],
			center: ['50%', '50%'],

			data: dataArr,
			label: {
			normal: {
			formatter: function (params, ticket, callback) {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2) + '万人'
			} else {
			msg = params.value + '人'
			if (this.userInfo.dept_id == '1596020515064381442') {
			this.personAll.emphasisNum = 23
			}
			return `{white\|${params.name}}{yellow\|${msg}}`
			},
			rich: {
			yellow: {
			color: "#ffc72b",
			fontSize: fontSize(12),
			padding: [5, 4],
			align: 'center'
			},
			total: {
			color: "#ffc72b",
			fontSize: fontSize(12),
			align: 'center'
			},
			white: {
			color: "#fff",
			align: 'center',
			fontSize: fontSize(12),
			padding: [21, 0]
			},
			blue: {
			color: '#49dff0',
			fontSize: fontSize(12),
			align: 'center'
			},
			}
			},
			},

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

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

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

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

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

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

			if (this.policeStationPersonInfo.data.length > 0) {
			this.policeStationPersonInfo.data.forEach(e => {
			xDate.push(e.name.replace('派出所', ''))
			yDate1.push({
			value: e.hjnum,
			id: e.id,
			type: 'policeStation',
			name: e.name
			})
			yDate2.push({
			value: e.synum,
			id: e.id,
			type: 'policeStation',
			name: e.name
			})
			})
			}
			],
			grid: {
			x: 10,
			y: 10,
			x2: 10,
			y2: 20
			},
			}
			}

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

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

			if (xDate.length == 0) {
			options = {
			title: {
			text: '暂无数据1',
			x: 'center',
			y: 'center',
			textStyle: {
			color: '#fff',
			fontWeight: 'normal',
			fontSize: fontSize(14)
			}
			}
			}
			} else {
			options = {
			tooltip: {
			trigger: 'item',
			formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
			backgroundColor: 'rgba(8, 56, 185, 0.9)',
			borderColor: 'rgba(8, 56, 185, 0.9)',
			textStyle: {
			color: '#fff',
			fontSize: fontSize(12)
			}
			},
			xAxis: {
			type: 'category',
			data: xDate,

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

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

			return options

			},

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

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

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

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

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

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

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

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

			// 关注场所详情
			getPlaceOfConcernStatisticDetail () {
			getPlaceOfConcernStatisticDetail({ deptId: this.userInfo.dept_id, type: this.gzcsType, unitName: this.gzcsUnitName, person: this.gzcsPerson, phone: this.gzcsPhone, current: this.$parent.gzcsPage.currentPage, size: this.$parent.gzcsPage.pageSize }).then(res => {
			console.log('getPlaceOfConcernStatisticDetail', res, res.data.data.records)
			this.$parent.gzcsPage.total = res.data.data.total
			this.$parent.gzcsArr = res.data.data.records
			setTimeout(() => {
			this.$parent.gzcsLoading = false
			}, 500)
			})
			},
			// 九小场所echarts
			initPlaceEcharts (xDate, yDate, type) {
			var chartDom = document.getElementById('houseEcharts')
			houseMyChart = this.$echarts.init(chartDom)
			houseMyChart.setOption(this.initPlaceOptions(xDate, yDate))
			// 圆柱点击事件
			this.clickPlaceChart(type)
			},
			// 场所图表点击事件
			clickPlaceChart (type) {
			this.tabTypeThree = type
			this.houseEchartsLoading = true
			houseMyChart.on('click', params => {
			console.log(type, 1122)
			if (type == 1) {
			this.$emit('showplacedetail', type, '重点场所列表', params.name, this.areaId)
			} else if (type == 2) {
			this.$emit('showplacedetail', type, '风险隐患场所列表', params.name, this.areaId)
			} else {
			this.$emit('showplacedetail', type, '九小场所列表', params.name, this.areaId)
			}
			})
			},
			// 九小场所
			initPlaceOptions (xDate, y1Date) {
			const that = this
			return {
			tooltip: {
			trigger: 'item',
			formatter: params => {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2)
			} else {
			msg = params.value
			}

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

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

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

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

			]
			}
			},

			houseTabClick (type) {
			this.tabTypeTwo = type

			this.houseEchartsLoading = true

			this.disposeHouseEchart()

			this.getNineStatistics()

			// 其它场所
			// this.getHouseStatisticInfo(2)

			// 场所数量
			// this.getHouseStatisticInfo(1)
			},

			getNineStatistics (flag = false) {
			getNineStatistics({
			deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
			areaId: this.areaId
			}).then(res => {
			console.log("九小", res)
			let xDate = []
			let yDate = []

			this.realHouseNum = res.data.data.count

			let otherList = res.data.data.otherList.reverse()
			let placeList = res.data.data.placeList.reverse()
			let riskHazardList = res.data.data.riskHazardList.reverse()
			if (flag) {
			this.placeNum = placeList.reduce((pre, cur) => {
			return pre + cur.num
			}, 0)
			this.otherPlaceNum = otherList.reduce((pre, cur) => {
			return pre + cur.num
			}, 0)
			this.riskNum = riskHazardList.reduce((pre, cur) => {
			return pre + cur.num
			}, 0)

			return
			}

			if (this.tabTypeTwo == 1) {
			otherList.forEach(item => {
			xDate.push(item.nineTypeName)
			yDate.push({
			value: item.num,
			id: item.id
			})
			})
			} else if (this.tabTypeTwo == 2) {
			riskHazardList.forEach(item => {
			xDate.push(item.nineTypeName)
			yDate.push(item.num)
			})
			} else {
			placeList.forEach(item => {
			xDate.push(item.nineTypeName)
			yDate.push(item.num)
			})
			}

			this.initPlaceEcharts(xDate, yDate, this.tabTypeTwo)

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

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

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

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

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

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

			this.$emit('showpeopledetail', params.data.id, params.data.name, params.data.communityCode)
			}
			})
			},

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

			const high = this.$refs.REFPERSONECHARTS.offsetHeight

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

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

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


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

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

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

			return item
			})

			return res.data
			})

			return data
			},

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

			if (dataArr.length == 0) {
			options = {
			title: {
			text: '暂无重点人员数据',
			x: 'center',
			y: 'center',
			textStyle: {
			color: '#fff',
			fontWeight: 'normal',
			fontSize: fontSize(14)
			}
			}
			}
			} else {
			options = {
			tooltip: {
			trigger: 'item',
			formatter: params => {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2) + '万人'
			} else {
			msg = params.value + '人'
			}
			msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
			return msg
			},
			backgroundColor: "rgba(8, 56, 185, 0.9)",
			borderColor: "rgba(8, 56, 185, 0.9)",
			textStyle: {
			fontSize: fontSize(12)
			},
			confine: true
			},
			xAxis: {
			type: 'category',
			data: dataArr.map(item => item.name),

			axisLabel: {
			color: "#fff",
			interval: 0,
			rotate: 45,
			fontSize: fontSize(10),
			formatter: function (params) {
			var val = ""
			if (params.length > 4) {
			val = params.substr(0, 4) + '...'
			return val
			} else {
			return params
			}
			}
			},
			axisLine: {
			lineStyle: {
			color: "#fff"
			}
			}
			},
			yAxis: {
			type: 'value',
			minInterval: 1,
			max: Math.floor(Math.max(...dataArr.map(item => item.value)) * 1.5),
			splitLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(12)
			}
			},
			series: [
			{
			data: dataArr.map(item => item.value),
			type: 'bar',
			barWidth: '40%',
			stack: true,
			emphasis: {
			disabled: true,
			focus: 'none'
			},
			itemStyle: {
			normal: {
			color: '#ed7c2f'
			},
			},
			},
			],
			grid: {
			top: '4%',
			left: '2%',
			right: '2%',
			bottom: '1%',
			containLabel: true
			},
			}
			}

			return options
			},

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

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

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

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

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

			/**
			* @description: 现有小区图表渲染
			* @param {*} landData
			* @return {*}
			*/
			initLandEcharts (landData) {
			this.disposeLandEchart()
			var chartDom = document.getElementById('landEcharts')
			console.log("chartDom", chartDom)
			landMyChart = this.$echarts.init(chartDom)
			console.log("landMyChart", landMyChart)
			landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
			console.log("setOption", landData[0])
			this.clickLandChart()
			},

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

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

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

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

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

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


			},

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

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

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

			/**
			* @description: 获取现有小区数据
			* @param {*} type
			* @param {*} deptId
			* @return {*}
			*/
			getAreaStatisticInfo (type) {
			getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
			destroyed () {
			window.removeEventListener("resize", this.echartsResize)
			this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
			this.disposeEchart()
			this.disposeHouseEchart()
			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]
			if (leftTiming != null) {
			clearInterval(leftTiming)
			leftTiming = null
			}
			setTimeout(() => {
			this.landEchartsLoading = false
			}, 500)
			console.log("landData1", landData)
			this.initLandEcharts(landData)
			}).catch(res => {
			setTimeout(() => {
			this.landEchartsLoading = false
			}, 500)
			})
			},

			/**
			* @description: 现有小区图表渲染
			* @param {*} landData
			* @return {*}
			*/
			initLandEcharts (landData) {
			this.disposeLandEchart()
			var chartDom = document.getElementById('landEcharts')
			console.log("chartDom", chartDom)
			landMyChart = this.$echarts.init(chartDom)
			console.log("landMyChart", landMyChart)
			landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
			console.log("setOption", landData[0])
			this.clickLandChart()
			},

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

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

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

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

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

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


			},

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

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

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

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

			.before {
			margin-left: 108px;
			}

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

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

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

			.person-box,
			.house-box,
			.land-box {
			margin: 8px;
			flex: 1;
			display: flex;
			flex-direction: column;
			// background: $bg-color;
			position: relative;
			width: 100%;
			height: 100%;

			background-image: url(/img/box/box-bg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			.person-box {
			.word {
			color: #fff;
			font-size: 14px;
			}

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

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

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

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

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

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

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

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

			span.choosed {
			color: #fff;
			}
			}

			.title-num {
			color: #fff;

			span {
			color: #99cccc;
			}

			span.choosed {
			color: #fff;
			}
			}

			.choosed {
			color: #fff;
			}

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

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

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

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

			&>div {
			height: 22px;
			line-height: 22px;
			white-space: nowrap;
			background-image: url(/img/box/box-bg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

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

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

			.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;
			}
			padding: 0 18px 0 18px;
			position: relative;
			font-size: 16px;

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

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

			span.choosed {
			color: #fff;
			}
			}

			.title-num {
			color: #fff;

			span {
			color: #99cccc;
			}

			span.choosed {
			color: #fff;
			}
			}

			.choosed {
			color: #fff;
			}

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

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

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

			.sub-child-tab {
			width: 100%;
			display: flex;
			}

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

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

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

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

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

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

			:deep(.el-main) {
			padding: 0;
			.house-box {
			margin-top: 0;
			margin-bottom: 0;

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

			.echarts-box {
			padding: 12px;
			padding-top: 0;
			flex: 1;
			width: 100%;
			// height: 100%;
			:deep(.el-table__body-wrapper) {
			overflow-x: hidden !important;
			}
			}

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

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

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

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

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

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

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

	src/styles/media/index.scss	39 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/leftContainer.vue	3873 ●●●●● patch \| view \| raw \| blame \| history

			@@ -227,10 +227,19 @@
			}
			}

			.house-sub-tab {
			.sub-child-tab:last-child {
			margin-top: countSizeVh(8)
			}
			}

			.echarts-box {
			height: calc(100% - countSizeVh(46));
			}

			.house-echarts-box {
			height: calc(100% - countSizeVh(112));
			}
			}

			.person-box {
			@@ -2688,22 +2697,22 @@

			.popup-dom {

			.content .data-box .line {
			font-size: countSizeVw(14, 1920);
			}

			.close-box {
			padding: 0 countSizeVh(8);
			}

			.url-code {
			img {
			width: countSizeVh(64);
			height: countSizeVh(64);
			vertical-align: middle;
			.content .data-box .line {
			font-size: countSizeVw(14, 1920);
			}
			}
			}

			.close-box {
			padding: 0 countSizeVh(8);
			}

			.url-code {
			img {
			width: countSizeVh(64);
			height: countSizeVh(64);
			vertical-align: middle;
			}
			}
			}

			}