~admin/srs-police-affairs.git

			@@ -4,8 +4,7 @@
			<div class="box">
			<div class="title">
			<div class="title-tab">
			<span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
			<!-- <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> -->
			<span :class="{ choosed: peopletype == 0 }">现有人员</span>
			</div>
			<!-- <div class="title-num">
			共
			@@ -14,25 +13,17 @@
			</div>-->
			</div>
			<div class="sub-tab" v-show="peopletype == 0">
			<div
			class="tab"
			:class="{ 'select-on-tab': tabType == 0 }"
			@click="personTabClick(0)"
			>
			<div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
			<div class="tab-title-small">户籍人口:</div>
			<div
			class="tab-title-small"
			>{{ policeStationPersonInfo.total?policeStationPersonInfo.total:0 }}人</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" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
			<div class="tab-title-small">重点人员:</div>
			<div
			class="tab-title-small"
			>{{ policeStationPersonInfo.emphasisNum?policeStationPersonInfo.emphasisNum:0 }}人</div>
			<div class="tab-title-small">{{
			personAll.emphasisNum ? personAll.emphasisNum : 0
			}}人</div>
			</div>
			<!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
			<div class="num">91995人</div>
			@@ -40,68 +31,41 @@
			</div>-->
			</div>
			<div id="PersonEcharts" class="echarts-box"></div>
			<div
			class="back"
			title="返回上一级"
			v-show="dataDeep == 2 && peopletype == 0 && showBack"
			@click="backBegin"
			></div>
			<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"
			<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%"
			>
			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"
			<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"
			/>
			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 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>
			@@ -109,68 +73,43 @@
			<div class="box">
			<div class="title">现有住宅</div>
			<div class="sub-tab">
			<div
			class="tab"
			:class="{ 'select-on-tab': tabTypeTwo == 0 }"
			@click="houseTabClick(0)"
			>
			<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
			<div class="tab-title-small">实有楼栋:</div>
			<div class="tab-title-small">{{realHouseNum?realHouseNum:0}}栋</div>
			<div class="tab-title-small">{{ realHouseNum?realHouseNum: 0 }}栋</div>
			</div>
			<div
			class="tab"
			:class="{ 'select-on-tab': tabTypeTwo == 1 }"
			@click="houseTabClick(1)"
			>
			<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
			<div class="tab-title-small">关注场所:</div>
			<div class="tab-title-small">{{keyPlaceNum?keyPlaceNum:0}}栋</div>
			<div class="tab-title-small">{{ keyPlaceNum?keyPlaceNum: 0 }}栋</div>
			</div>
			</div>
			<div id="houseEcharts" class="echarts-box"></div>
			</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 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>
			<div class="sub-tab" v-if="isAllPoliceStation">
			<div
			class="tab"
			:class="{ 'select-on-tab': tabTypeThree == 0 }"
			@click="landTabClick(0)"
			>
			<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 class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div>
			</div>
			<div
			class="tab"
			:class="{ 'select-on-tab': tabTypeThree == 1 }"
			@click="landTabClick(1)"
			>
			<div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
			<div class="tab-title-small">责任区:</div>
			<div class="tab-title-small">{{ areaNum?areaNum:0 }}个</div>
			<div class="tab-title-small">{{ areaNum?areaNum: 0 }}个</div>
			</div>
			</div>
			<div class="sub-tab" v-else>
			<div class="sub-tab" v-show="!isAllPoliceStation">
			<div class="tab1 select-on-tab">
			<div class="tab-title-small">小区:</div>
			<div class="tab-title-small">{{ policeVillageNum?policeVillageNum:0 }}个</div>
			<div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div>
			</div>
			</div>

			@@ -178,19 +117,10 @@
			</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 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>
			@@ -202,7 +132,7 @@
			import { getAreaStatisticInfo } from "@/api/home/index.js"
			import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept"

			let homePersonmyChart
			let homePersonmyChart = null
			let houseMyChart
			let landMyChart
			let keyPersonmyChart
			@@ -322,37 +252,31 @@
			areaNum: '',
			villageNum: '',
			policeVillageNum: '',
			areaOptionData: [],
			villageOptionData: [],
			policeStationPersonInfo: {},
			villagePersonStatisticInfoList: [],
			showBack: true,
			isAllPoliceStation: false,
			policeVillageOptionData: [],
			isAllPoliceStation: true,
			realHouseNum: '',
			keyPlaceNum: '',
			personAll: '',
			// 记录当前选中派出所的ID
			policeStaionID: ''
			}
			},

			created () {
			this.getAreaStatisticInfo(1)
			this.getAreaStatisticInfo(2)
			this.getAreaStatisticInfo(3, this.userInfo.dept_id)
			},

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

			this.inithouseEcharts()
			this.clickLandChart()

			console.log(1312399999)
			console.log(this.userInfo.dept_id, 98999)
			this.getHouseStatisticInfo(this.userInfo.dept_id, 2)
			if (this.userInfo.dept_id != '1123598813738675201') {
			this.showBack = false
			this.getVillagePersonStatisticInfoByPoliceStationId(this.userInfo.dept_id)
			} else {
			this.getPoliceStationInfo()
			this.isAllPoliceStation = false
			}

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

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

			this.personTabClick(0)

			this.houseTabClick(0)

			this.landTabClick(0)
			},

			getHouseStatisticInfo (deptld, isFollow) {
			getHouseStatisticInfo(deptld, isFollow).then(res => {
			/**
			* @description: 户籍人口和重点人员切换
			* @param {*} type
			* @return {*}
			*/
			personTabClick (type) {
			this.tabType = type
			this.dataDeep = 1

			if (homePersonmyChart != null) {
			homePersonmyChart.dispose()
			homePersonmyChart.off('click')
			}

			if (type == 0) {
			if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {
			this.getPoliceStationInfo()
			} else {
			this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
			}

			} else if (type == 1) {

			this.initkeyPersonEcharts()

			}
			},

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


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

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

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

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

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

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

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

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

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

			if (xDate.length == 0) {
			options = {
			title: {
			text: '暂无数据',
			x: 'center',
			y: 'center',
			textStyle: {
			color: "#fff",
			fontSize: fontSize(14),
			fontWeight: 'normal',
			}
			}
			}
			} 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(14)
			}
			},
			xAxis: {
			type: 'category',
			data: xDate,

			axisLabel: {
			color: "#fff",
			interval: 0,
			rotate: 45,
			fontSize: fontSize(12)
			},
			axisLine: {
			lineStyle: {
			color: "#fff"
			}
			}
			},
			yAxis: {
			type: 'value',
			minInterval: 1,
			splitLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(14)
			}
			},
			series: [
			{
			data: yDate,
			type: 'bar',
			barWidth: '40%',
			emphasis: {
			disabled: true,
			focus: 'none'
			},
			itemStyle: {
			normal: {
			color: function (params) {
			return new global.echarts.graphic.LinearGradient(
			0, 0, 0, 1,
			[
			{ offset: 0, color: colors[0] },
			{ offset: 0.5, color: colors[1] },
			{ offset: 1, color: colors[2] },
			]
			)
			}
			},
			emphasis: {
			color: function (params) {
			return new global.echarts.graphic.LinearGradient(
			0, 0, 0, 1,
			[
			{ offset: 0, color: colors[2] },
			{ offset: 0.7, color: colors[1] },
			{ offset: 1, color: colors[0] }
			]
			)
			}
			}
			},
			}
			],
			grid: {
			top: '4%',
			left: '2%',
			right: '2%',
			bottom: '4%',
			containLabel: true
			},
			}
			}

			return options

			},

			/**
			* @description: 现有人图表中的返回按钮
			* @return {*}
			*/
			backBegin () {
			this.dataDeep = 1
			this.initPersonEcharts()
			// let xDate, yDate, colors
			// if (this.tabType == 0) {
			// xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
			// yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
			// colors = ['#06B5D7', '#44C0C1', '#71C8B1']
			// } else if (this.tabType == 1) {
			// xDate = ['湖北', '上海', '北京', '广东', '浙江']
			// yDate = [6414, 4231, 2211, 1231, 881]
			// colors = ['#ef9faa', '#f7bfc6', '#fedade']
			// } else if (this.tabType == 2) {
			// xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
			// yDate = [881, 1231, 2211, 4321, 6414]
			// colors = ['#7d65c0', '#a47db4', '#e0a8c5']
			// }
			// homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			},

			/**
			* @description: 获取现有住宅信息
			* @param {*} deptld
			* @param {*} isFollow
			* @return {*}
			*/
			getHouseStatisticInfo (isFollow) {
			getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
			let xDate = []
			let yDate = []
			if (isFollow == 1) {
			@@ -382,128 +568,6 @@
			})
			this.inithouseEcharts(xDate, yDate)
			})
			},

			initPersonEcharts () {
			var chartDom = document.getElementById('PersonEcharts')
			homePersonmyChart = this.$echarts.init(chartDom)

			var xDate = [], yDate = []
			//传入x,y轴数据
			this.policeStationPersonInfo.data.forEach(e => {
			xDate.push(e.name.replace('派出', ''))
			yDate.push({
			value: e.num,
			id: e.id,
			type: 'policeStation',
			name: e.name
			})
			})
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
			},

			initPersonOptions (xDate, yDate, colors) {
			return {
			tooltip: {
			trigger: 'item',
			formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
			backgroundColor: 'rgba(8, 56, 185, 0.9)',
			borderColor: 'rgba(8, 56, 185, 0.9)',
			textStyle: {
			color: '#fff',
			fontSize: fontSize(14)
			}
			},
			xAxis: {
			type: 'category',
			data: xDate,

			axisLabel: {
			color: "#fff",
			interval: 0,
			rotate: 45,
			fontSize: fontSize(12)
			},
			axisLine: {
			lineStyle: {
			color: "#fff"
			}
			}
			},
			yAxis: {
			type: 'value',
			splitLine: {
			show: false
			},
			axisLabel: {
			color: "#fff",
			fontSize: fontSize(14)
			}
			},
			series: [
			{
			data: yDate,
			type: 'bar',
			barWidth: '40%',
			emphasis: {
			disabled: true,
			focus: 'none'
			},
			itemStyle: {
			normal: {
			color: function (params) {
			return new global.echarts.graphic.LinearGradient(
			0, 0, 0, 1,
			[
			{ offset: 0, color: colors[0] },
			{ offset: 0.5, color: colors[1] },
			{ offset: 1, color: colors[2] },
			]
			)
			}
			},
			emphasis: {
			color: function (params) {
			return new global.echarts.graphic.LinearGradient(
			0, 0, 0, 1,
			[
			{ offset: 0, color: colors[2] },
			{ offset: 0.7, color: colors[1] },
			{ offset: 1, color: colors[0] }
			]
			)
			}
			}
			},
			}
			],
			grid: {
			top: '4%',
			left: '2%',
			right: '2%',
			bottom: '4%',
			containLabel: true
			},
			}
			},

			personTabClick (type) {
			this.tabType = type
			this.dataDeep = 1
			let xDate, yDate, colors

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

			inithouseEcharts (xDate, yDate) {
			@@ -524,7 +588,7 @@
			msg = params.value + '栋'
			}

			msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>'`
			msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
			return msg
			},
			backgroundColor: 'rgba(8, 56, 185, 0.9)',
			@@ -608,22 +672,17 @@
			houseTabClick (type) {
			this.tabTypeTwo = type
			if (type == 0) {
			this.getHouseStatisticInfo(this.userInfo.dept_id, 2)
			this.getHouseStatisticInfo(2)
			} else {
			this.getHouseStatisticInfo(this.userInfo.dept_id, 1)
			this.getHouseStatisticInfo(1)
			}
			},

			initLandEcharts () {
			initLandEcharts (landData) {
			var chartDom = document.getElementById('landEcharts')
			landMyChart = this.$echarts.init(chartDom)
			if (this.userInfo.dept_id != '1123598813738675201') {
			this.isAllPoliceStation = false
			landMyChart.setOption(this.initLandOptions(this.policeVillageOptionData[0], this.policeVillageOptionData[1]))
			} else {
			this.isAllPoliceStation = true
			landMyChart.setOption(this.initLandOptions(this.villageOptionData[0], this.villageOptionData[1]))
			}

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

			initLandOptions (xDate, yDate) {
			@@ -717,38 +776,6 @@
			}
			},

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

			if (type == 0) {
			xDate = this.villageOptionData[0]
			yDate = this.villageOptionData[1]
			} else if (type == 1) {
			xDate = this.areaOptionData[0]
			yDate = this.areaOptionData[1]
			}

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

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

			clickPeopleChart () {
			homePersonmyChart.on('click', params => {
			this.dataDeep = 2
			@@ -787,7 +814,7 @@
			* @return {*}
			*/
			getPersonInfo () {
			const data = getPersonInfo({ deptId: this.userInfo.dept_id }).then(res => {
			const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
			res.data = res.data.map(item => {
			item = {
			...item,
			@@ -810,72 +837,90 @@
			* @return {*}
			*/
			initkeyPersonOption (dataArr) {
			return {
			tooltip: {
			trigger: 'item',
			formatter: params => {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2) + '万人'
			} else {
			msg = params.value + '人'
			let options
			if (dataArr.length == 0) {
			options = {
			title: {
			text: '暂无数据',
			x: 'center',
			y: 'center',
			textStyle: {
			color: "#fff",
			fontSize: fontSize(14),
			fontWeight: 'normal',
			}

			msg = `${params.marker} ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
			return msg
			}
			},
			legend: {
			type: 'scroll',
			orient: 'vertical',
			left: '45%',
			y: '1%',
			itemGap: 20,
			textStyle: {
			color: '#fff'
			},
			formatter: function (name) {
			let data = dataArr
			let tarValue
			for (let i = 0; i < data.length; i++) {
			if (data[i].name == name) {
			tarValue = data[i].value
			}
			} else {
			options = {
			tooltip: {
			trigger: 'item',
			formatter: params => {
			let msg
			if (params.value > 10000) {
			msg = (params.value / 10000).toFixed(2) + '万人'
			} else {
			msg = params.value + '人'
			}

			msg = `${params.marker} ${params.name}<strong style="margin-left:10px">${msg}</strong>'`
			return msg
			}
			let v = tarValue
			return `${name} ${v} 人 `
			},
			},
			series: [
			{
			name: '',
			type: 'pie',
			radius: ['30%', '60%'],
			center: ['22%', '55%'],
			avoidLabelOverlap: false,
			label: {
			show: false,
			position: 'center'
			legend: {
			type: 'scroll',
			orient: 'vertical',
			left: '45%',
			y: '1%',
			itemGap: 20,
			textStyle: {
			color: '#fff'
			},
			labelLine: {
			show: false
			formatter: function (name) {
			let data = dataArr
			let tarValue
			for (let i = 0; i < data.length; i++) {
			if (data[i].name == name) {
			tarValue = data[i].value
			}
			}
			let v = tarValue
			return `${name} ${v} 人 `
			},
			data: dataArr
			}
			],
			grid: {
			x: 10,
			y: 10,
			x2: 10,
			y2: 20
			},
			},
			series: [
			{
			name: '',
			type: 'pie',
			radius: ['30%', '60%'],
			center: ['22%', '55%'],
			avoidLabelOverlap: false,
			label: {
			show: false,
			position: 'center'
			},
			labelLine: {
			show: false
			},
			data: dataArr
			}
			],
			grid: {
			x: 10,
			y: 10,
			x2: 10,
			y2: 20
			},
			}
			}

			return options
			},

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

			selectPoliceChangeData (name) {
			if (this.peopletype == 0 && this.tabType == 0) {
			let xDate, yDate, colors
			if (name == '车站所') {
			this.dataDeep = 2
			xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
			yDate = [88, 221, 641, 432, 123]
			colors = ['#0f97f2', '#7d629d', '#e1344f']
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			} else if (name == '沙溪所') {
			this.dataDeep = 2
			xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
			yDate = [641, 423, 221, 123, 88]
			colors = ['#584d7b', '#9b836a', '#f8ce52']
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			} else if (name == '灵溪所') {
			this.dataDeep = 2
			xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
			yDate = [111, 531, 211, 431, 64]
			colors = ['#7d65c0', '#a47db4', '#e0a8c5']
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			} else if (name == '北门所') {
			this.dataDeep = 2
			xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
			yDate = [887, 234, 452, 321, 154]
			colors = ['#6e978f', '#ad885a', '#e97b27']
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			} else if (name == '江光所') {
			this.dataDeep = 2
			xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
			yDate = [400, 500, 200, 450, 245]
			colors = ['#7e81d5', '#86abe6', '#8fe5e3']
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			} else if (name == '全部') {
			this.dataDeep = 1
			xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所']
			yDate = [881, 2211, 6414, 4321, 1232]
			colors = ['#f750c2', '#d6369a', '#bc1f76']
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			}
			} else if (this.peopletype == 1) {
			let arr = []
			if (name == '全部') {
			this.keyPersonSelectArr = this.keyPersonDetailArr
			} else {
			this.keyPersonDetailArr.some(item => {
			if (item.policeStation == name) {
			arr.push(item)
			}
			this.keyPersonSelectArr = arr
			this.keyPersonSelectSaveArr = arr
			})
			}
			this.initkeyPersonEcharts()
			/**
			* @description: 现有地切换
			* @param {*} type
			* @return {*}
			*/
			landTabClick (type) {

			this.tabTypeThree = type

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

			},

			backBegin () {
			this.dataDeep = 1
			this.initPersonEcharts()
			// let xDate, yDate, colors
			// if (this.tabType == 0) {
			// xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
			// yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
			// colors = ['#06B5D7', '#44C0C1', '#71C8B1']
			// } else if (this.tabType == 1) {
			// xDate = ['湖北', '上海', '北京', '广东', '浙江']
			// yDate = [6414, 4231, 2211, 1231, 881]
			// colors = ['#ef9faa', '#f7bfc6', '#fedade']
			// } else if (this.tabType == 2) {
			// xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
			// yDate = [881, 1231, 2211, 4321, 6414]
			// colors = ['#7d65c0', '#a47db4', '#e0a8c5']
			// }
			// homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			},

			selectAreaChangeData (name) {
			if (this.peopletype == 1) {
			if (this.peopletype == 1 && name != '全部') {
			let arr = []
			this.keyPersonSelectSaveArr.some(item => {
			if (item.housingEastate == name) {
			arr.push(item)
			}
			})
			this.keyPersonSelectArr = arr
			} else {
			this.keyPersonSelectArr = this.keyPersonSelectSaveArr
			}
			this.initkeyPersonEcharts()
			}

			},

			// echartsResize (echartsName) {
			// echartsName.resize()
			// },

			getAreaStatisticInfo (type, deptId) {
			getAreaStatisticInfo(type, deptId).then(res => {
			/**
			* @description: 获取现有地数据
			* @param {*} type
			* @param {*} deptId
			* @return {*}
			*/
			getAreaStatisticInfo (type) {
			getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
			let landData = []
			if (type == 2) {
			this.areaNum = res.data.data.areaNum
			this.villageNum = res.data.data.villageNum
			@@ -997,7 +966,7 @@
			nameArr.push(item.name.replace('派出', ''))
			countArr.push({ value: item.count, id: item.id })
			})
			this.villageOptionData = [nameArr, countArr]
			landData = [nameArr, countArr]
			} else if (type == 1) {
			// this.areaNum = res.data.data.areaNum
			// this.villageNum = res.data.data.villageNum
			@@ -1007,56 +976,23 @@
			nameArr.push(item.name.replace('派出', ''))
			countArr.push({ value: item.count, id: item.id })
			})
			this.areaOptionData = [nameArr, countArr]
			} else if (type == 3) {
			this.policeVillageNum = 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 })
			})
			this.policeVillageOptionData = [nameArr, countArr]
			landData = [nameArr, countArr]
			}
			this.initLandEcharts()

			this.initLandEcharts(landData)
			})
			},

			//获取各个派出所的人口数量
			getPoliceStationInfo () {
			getVillagePersonStatisticInfo().then(res => {
			if (res.data.code == 200) {
			this.policeStationPersonInfo = res.data.data
			//异步，因此放进接口方法内部
			this.initPersonEcharts()
			this.clickPeopleChart()
			}
			})
			/**
			* @description: 视图窗口改变时，echarts图表重置
			* @return {*}
			*/
			echartsResize () {
			homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
			landMyChart && landMyChart != null && landMyChart.resize()
			keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
			houseMyChart && houseMyChart != null && houseMyChart.resize()
			},

			//获取该派出所下的辖区
			getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
			getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
			if (res.data.code == 200) {
			var chartDom = document.getElementById('PersonEcharts')
			homePersonmyChart = this.$echarts.init(chartDom)
			this.villagePersonStatisticInfoList = res.data.data
			var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
			this.villagePersonStatisticInfoList.forEach(e => {
			xDate.push(e.name.replace('居民委员会', ''))
			yDate.push({
			value: e.num,
			name: e.name,
			id: e.id
			})
			})
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			this.clickPeopleChart()
			}
			})
			}



			},

			@@ -1186,7 +1122,7 @@
			color: #fff;
			}

			& > div:nth-of-type(2) {
			&>div:nth-of-type(2) {
			font-size: 14px;
			}
			}
			@@ -1214,7 +1150,7 @@
			align-items: center;
			justify-content: center;

			& > div {
			&>div {
			height: 22px;
			line-height: 22px;
			white-space: nowrap;
			@@ -1223,16 +1159,14 @@

			.tab {
			display: flex;
			justify-content: space-around;
			padding: 0 10%;
			justify-content: center;
			}

			.tab1 {
			width: 50%;
			padding: 0 10%;
			margin-left: 25% !important;
			display: flex;
			justify-content: space-around;
			justify-content: center;
			margin: 0 10px;
			background: $sub-tab-bg-color;
			border-radius: 8px;