~admin/srs-police-affairs.git

			@@ -7,35 +7,23 @@
			<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%);"
			>
			<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" :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
			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">
			{{
			personAll.emphasisNum ? personAll.emphasisNum : 0
			personAll.emphasisNum ? personAll.emphasisNum : 0
			}}人
			</div>
			</div>
			@@ -46,94 +34,53 @@
			</div>
			</el-main>

			<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>
			<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)"
			>
			<el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
			<div class="sub-tab">
			<div
			class="tab"
			:class="{ 'select-on-tab': tabTypeTwo == 0 }"
			@click="houseTabClick(0)"
			>
			<div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
			<div class="tab-title-small">实有楼栋:</div>
			<div class="tab-title-small">{{ realHouseNum ? realHouseNum : 0 }}栋</div>
			</div>
			<div
			class="tab"
			:class="{ 'select-on-tab': tabTypeTwo == 1 }"
			@click="houseTabClick(1)"
			>
			<div class="tab" :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>
			@@ -143,45 +90,24 @@
			</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>
			<el-main
			v-loading="landEchartsLoading"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.5)"
			>
			<el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
			<div class="sub-tab" v-show="isAllPoliceStation">
			<div
			class="tab"
			:class="{ 'select-on-tab': tabTypeThree == 0 }"
			@click="landTabClick(0)"
			>
			<div class="tab" :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" :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>
			@@ -197,19 +123,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>
			@@ -428,7 +345,6 @@
			this.getPoliceStationInfo()

			} else {

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

			@@ -447,7 +363,7 @@
			this.disposeEchart()
			curSubofficeData = res.data.data
			this.personAll = res.data.data

			console.log('getPoliceStationInfo', res.data.data)
			this.policeStationPersonInfo = res.data.data
			//异步，因此放进接口方法内部
			this.initPersonEcharts()
			@@ -472,7 +388,7 @@
			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)
			@@ -484,25 +400,30 @@


			this.villagePersonStatisticInfoList = res.data.data
			var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
			var xDate = [], yDate1 = [], yDate2 = [], colors1 = ['#ccf9d0', '#f9d888', '#f7857e'], colors2 = ['#FF6666', '#FFFF00', '#0066CC']

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

			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, colors1, colors2), true)
			this.clickPeopleChart()

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

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

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

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

			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
			homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, ['#06B5D7', '#44C0C1', '#71C8B1'], ['#FF6666', '#9a76dc', '#602ac2']))
			},

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

			if (xDate.length == 0) {
			@@ -601,42 +528,94 @@
			fontSize: fontSize(12)
			}
			},
			legend: {
			itemWidth: 15,
			itemHeight: 15,
			data: ['户籍人口', '实有人口'],
			textStyle: {
			color: '#fff'
			}
			},
			series: [
			{
			data: yDate,
			name: '户籍人口',
			data: yDate1,
			type: 'bar',
			barWidth: '40%',
			stack: true,
			emphasis: {
			disabled: true,
			focus: 'none'
			},
			itemStyle: {
			normal: {
			color: function (params) {
			return new global.echarts.graphic.LinearGradient(
			0, 0, 0, 1,
			[
			{ offset: 0, color: colors[0] },
			{ offset: 0.5, color: colors[1] },
			{ offset: 1, color: colors[2] },
			]
			)
			}
			color: colors1[0],
			// color: function (params) {
			// return new global.echarts.graphic.LinearGradient(
			// 0, 0, 0, 1,
			// [
			// { offset: 0, color: colors1[0] },
			// { offset: 0.5, color: colors1[1] },
			// { offset: 1, color: colors1[2] },
			// ]
			// )
			// }
			},
			emphasis: {
			color: function (params) {
			return new global.echarts.graphic.LinearGradient(
			0, 0, 0, 1,
			[
			{ offset: 0, color: colors[2] },
			{ offset: 0.7, color: colors[1] },
			{ offset: 1, color: colors[0] }
			]
			)
			}
			color: colors1[0],
			// color: function (params) {
			// return new global.echarts.graphic.LinearGradient(
			// 0, 0, 0, 1,
			// [
			// { offset: 0, color: colors1[2] },
			// { offset: 0.7, color: colors1[1] },
			// { offset: 1, color: colors1[0] }
			// ]
			// )
			// }
			}
			},
			}
			},
			{
			name: '实有人口',
			data: yDate2,
			type: 'bar',
			barWidth: '40%',
			stack: true,
			emphasis: {
			disabled: true,
			focus: 'none'
			},
			itemStyle: {
			normal: {
			color: colors2[0]
			// color: function (params) {
			// return new global.echarts.graphic.LinearGradient(
			// 0, 0, 0, 1,
			// [
			// { offset: 0, color: colors2[2] },
			// { offset: 0.5, color: colors2[1] },
			// { offset: 1, color: colors2[0] },
			// ]
			// )
			// }
			},
			emphasis: {
			color: colors2[0]
			// color: function (params) {
			// return new global.echarts.graphic.LinearGradient(
			// 0, 0, 0, 1,
			// [
			// { offset: 0, color: colors2[0] },
			// { offset: 0.7, color: colors2[1] },
			// { offset: 1, color: colors2[2] }
			// ]
			// )
			// }
			}
			},
			},

			],
			grid: {
			top: '4%',
			@@ -1497,7 +1476,7 @@
			color: #fff;
			}

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

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