From 559b060f7296969954ced4b17c8fc5d46a51cc1d Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 17 Jan 2023 08:57:31 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-affairs
---
src/views/home/components/leftContainer.vue | 184 +++++++++++++++++++--------------------------
1 files changed, 79 insertions(+), 105 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 965812e..8eacebe 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -20,7 +20,7 @@
@click="personTabClick(0)"
>
<div class="tab-title-small">户籍人口:</div>
- <div class="tab-title-small">164.57万人</div>
+ <div class="tab-title-small">{{policeStationPersonInfo.total}}人</div>
</div>
<div
class="tab"
@@ -28,7 +28,7 @@
@click="personTabClick(1)"
>
<div class="tab-title-small">重点人员:</div>
- <div class="tab-title-small">1人</div>
+ <div class="tab-title-small">{{policeStationPersonInfo.emphasisNum}}人</div>
</div>
<!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
<div class="num">91995人</div>
@@ -189,6 +189,7 @@
<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } from "@/api/home/index.js"
+import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId } from "@/api/dept"
let homePersonmyChart
let houseMyChart
@@ -309,6 +310,8 @@
villageNum: '',
areaOptionData: [],
villageOptionData: [],
+ policeStationPersonInfo: {},
+ villagePersonStatisticInfoList: [],
}
},
@@ -319,9 +322,8 @@
mounted () {
this.initLandEcharts()
- this.initPersonEcharts()
+ this.getPoliceStationInfo()
this.inithouseEcharts()
- this.clickPeopleChart()
this.clickLandChart()
this.$nextTick(() => {
@@ -339,7 +341,19 @@
initPersonEcharts () {
var chartDom = document.getElementById('PersonEcharts')
homePersonmyChart = this.$echarts.init(chartDom)
- homePersonmyChart.setOption(this.initPersonOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'], [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232], ['#06B5D7', '#44C0C1', '#71C8B1']))
+
+ 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) {
@@ -362,7 +376,7 @@
color: "#fff",
interval: 0,
rotate: 45,
- fontSize: fontSize(14)
+ fontSize: fontSize(12)
},
axisLine: {
lineStyle: {
@@ -385,6 +399,10 @@
data: yDate,
type: 'bar',
barWidth: '40%',
+ emphasis: {
+ disabled: true,
+ focus: 'none'
+ },
itemStyle: {
normal: {
color: function (params) {
@@ -433,10 +451,10 @@
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)
+ // 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)
}
@@ -523,7 +541,7 @@
// show: true,
// type: 'bar',
// barGap: '-100%',
- // barWidth: '35%', //统计条宽度
+ // barWidth: '35%', //统计条宽度
// itemStyle: {
// normal: {
// color: 'rgba(102, 102, 102,0.5)'
@@ -651,7 +669,7 @@
// end: 40,
// zoomOnMouseWheel: false, // 关闭滚轮缩放
// moveOnMouseWheel: true, // 开启滚轮平移
- // moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
+ // moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
// }
// ]
}
@@ -691,85 +709,11 @@
clickPeopleChart () {
homePersonmyChart.on('click', params => {
- let xDate, yDate, colors
this.dataDeep = 2
- if (params.name == '车站所') {
- xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
- yDate = [88, 221, 641, 432, 123]
- colors = ['#ccf9d0', '#f9d888', '#f7857e']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '沙溪所') {
- xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
- yDate = [641, 423, 221, 123, 88]
- colors = ['#102129', '#1f3942', '#2a4f5f']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '灵溪所') {
- xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
- yDate = [111, 531, 211, 431, 64]
- colors = ['#23b9e9', '#c76ee0', '#f05265']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '北门所') {
- xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
- yDate = [887, 234, 452, 321, 154]
- colors = ['#b22d2b', '#614976', '#4c3042']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '江光所') {
- xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
- yDate = [400, 500, 200, 450, 245]
- colors = ['#3089bf', '#77d8f9', '#f4fcfe']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '湖北') {
- xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市']
- yDate = [88, 221, 641, 432, 123]
- colors = ['#2b5144', '#5a987f', '#94ebc1']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '上海') {
- xDate = ['黄浦区', '长宁区', '静安区', '虹口区', '闵行区']
- yDate = [641, 423, 221, 123, 88]
- colors = ['#f750c2', '#d6369a', '#bc1f76']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '北京') {
- xDate = ['东城区', '西城区', '海淀区', '昌平区', '大兴区']
- yDate = [111, 531, 211, 431, 64]
- colors = ['#7e81d5', '#86abe6', '#8fe5e3']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '广东') {
- xDate = ['珠海市', '东菀市', '佛山市', '中山市', '惠州市']
- yDate = [887, 234, 452, 321, 154]
- colors = ['#ba1432', '#6b0e33', '#2a0b35']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '浙江') {
- xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市']
- yDate = [400, 300, 200, 450, 245]
- colors = ['#f12e10', '#f36c15', '#f4a818']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '日本') {
- xDate = ['东京都', '北海道', '大阪府', '京都府', '43县']
- yDate = [88, 221, 641, 432, 123]
- colors = ['#6e978f', '#ad885a', '#e97b27']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '美国') {
- xDate = ['加利福尼亚州', '德克萨斯州', '纽约州', '俄亥俄州']
- yDate = [641, 423, 221, 123, 88]
- colors = ['#d54956', '#9f976e', '#73d781']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '俄罗斯') {
- xDate = ['西北联邦', '中央联邦', '南方联邦', '伏尔加联邦']
- yDate = [111, 531, 211, 431, 64]
- colors = ['#7d65c0', '#a47db4', '#e0a8c5']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '英国') {
- xDate = ['英格兰', '威尔士', '苏格兰', '北爱尔兰']
- yDate = [887, 234, 452, 321, 154]
- colors = ['#584d7b', '#9b836a', '#f8ce52']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
- } else if (params.name == '印度') {
- xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦']
- yDate = [400, 300, 200, 450, 245]
- colors = ['#0f97f2', '#7d629d', '#e1344f']
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
+ if (params.data.type == 'policeStation') {
+ this.getVillagePersonStatisticInfoByPoliceStationId(params.data.name, params.data.id)
} else {
- this.$emit('showpeopledetail', params.name)
+ this.$emit('showpeopledetail', params.data.id, params.data.name)
}
})
},
@@ -923,21 +867,22 @@
backBegin () {
this.dataDeep = 1
- let xDate, yDate, colors
- if (this.tabType == 0) {
- xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
- yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
- colors = ['#06B5D7', '#44C0C1', '#71C8B1']
- } else if (this.tabType == 1) {
- xDate = ['湖北', '上海', '北京', '广东', '浙江']
- yDate = [6414, 4231, 2211, 1231, 881]
- colors = ['#ef9faa', '#f7bfc6', '#fedade']
- } else if (this.tabType == 2) {
- xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
- yDate = [881, 1231, 2211, 4321, 6414]
- colors = ['#7d65c0', '#a47db4', '#e0a8c5']
- }
- homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
+ 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)
},
getKeyPersonCount (arr) {
@@ -1020,7 +965,36 @@
})
},
+ //获取各个派出所的人口数量
+ getPoliceStationInfo () {
+ getVillagePersonStatisticInfo().then(res => {
+ if (res.data.code == 200) {
+ this.policeStationPersonInfo = res.data.data
+ //异步，因此放进接口方法内部
+ this.initPersonEcharts()
+ this.clickPeopleChart()
+ }
+ })
+ },
+ //获取该派出所下的辖区
+ getVillagePersonStatisticInfoByPoliceStationId (name, policeStationId) {
+ getVillagePersonStatisticInfoByPoliceStationId(name, policeStationId).then(res => {
+ if (res.data.code == 200) {
+ 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)
+ }
+ })
+ }
@@ -1242,4 +1216,4 @@
stroke-dashoffset: 888;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3