From 08e2db5b94d878189f5377fc5ed0f7bd4b2bb19e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 03 Feb 2023 15:26:46 +0800
Subject: [PATCH] 接口及首页数据联动调整
---
src/views/home/components/leftContainer.vue | 944 +++++++++++++++++++++++++++-------------------------------
1 files changed, 439 insertions(+), 505 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 0f98507..932832e 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -4,8 +4,7 @@
<div class="box">
<div class="title">
<div class="title-tab">
- <span :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
- <!-- <span :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span> -->
+ <span :class="{ choosed: peopletype == 0 }">现有人员</span>
</div>
<!-- <div class="title-num">
共
@@ -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;
--
Gitblit v1.9.3