From ed8a060f20abb725487d01acd447f78952e4df26 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Thu, 27 Oct 2022 17:32:08 +0800
Subject: [PATCH] 首页数据联动
---
src/views/home/components/leftContainer.vue | 142 +++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 125 insertions(+), 17 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index ac0f777..e088e84 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -38,6 +38,9 @@
<div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
<div id="keyPersonEcharts" class="peopleTable" v-show="peopletype == 1"></div>
+ <div class="back" title="返回上一级" v-show="dataDeep == 2" @click="backBegin">
+ <i class="el-icon-back"></i>
+ </div>
</div>
<div class="house-box">
<div class="title">
@@ -154,7 +157,9 @@
{ name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
{ name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
{ name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门派出所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
- ]
+ ],
+ dataDeep: 1,
+ keyPersonOption: {},
}
},
mounted () {
@@ -429,7 +434,7 @@
clickPeopleChart () {
homePersonmyChart.on('click', params => {
let xDate, yDate
- //户籍人口
+ this.dataDeep = 2
if (params.name == '车站派出所') {
xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
yDate = [88, 221, 641, 432, 123]
@@ -523,29 +528,36 @@
initkeyPersonEcharts () {
var chartDom = document.getElementById('keyPersonEcharts')
keyPersonmyChart = this.$echarts.init(chartDom)
- var option
- let dataArr = [
- { value: 26, name: '涉恐人员' },
- { value: 31, name: '涉稳人员' },
- { value: 27, name: '涉毒人员' },
- { value: 24, name: '在逃人员' },
- { value: 20, name: '重大刑事犯罪前科人员' },
- { value: 10, name: '肇事肇祸精神病人' },
- { value: 30, name: '重点上访人员' },
- ]
- option = {
+ let dataArr = this.getKeyPersonData(this.keyPersonDetailArr)
+ keyPersonmyChart.setOption(this.initkeyPersonOption(dataArr, '全部', ''))
+ },
+ initkeyPersonOption (dataArr, policeStation, area) {
+ return {
+ title: {
+ text: `${policeStation}`,
+ subtext: `${area}`,
+ textStyle: {
+ color: '#FFF',
+ align: 'center'
+ },
+ subtextStyle: {
+ fontFamily: "微软雅黑",
+ color: '#FFF',
+ }
+
+ },
tooltip: {
trigger: 'item'
},
legend: {
left: '48%',
- y: '20%',
+ y: '10%',
itemGap: 20,
textStyle: {
color: '#fff'
},
formatter: function (name) {
- let data = option.series[0].data
+ let data = dataArr
let tarValue
for (let i = 0; i < data.length; i++) {
if (data[i].name == name) {
@@ -580,9 +592,92 @@
y2: 20
},
}
-
- option && keyPersonmyChart.setOption(option)
},
+
+ selectChangeData (name) {
+ if (this.peopletype == 0 && this.tabType == 0) {
+ let xDate, yDate
+ if (name == '车站派出所') {
+ this.dataDeep = 2
+ xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
+ yDate = [88, 221, 641, 432, 123]
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ } else if (name == '沙溪派出所') {
+ this.dataDeep = 2
+ xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
+ yDate = [641, 423, 221, 123, 88]
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ } else if (name == '灵溪派出所') {
+ this.dataDeep = 2
+ xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
+ yDate = [111, 531, 211, 431, 64]
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ } else if (name == '北门派出所') {
+ this.dataDeep = 2
+ xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
+ yDate = [887, 234, 452, 321, 154]
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ } else if (name == '江光派出所') {
+ this.dataDeep = 2
+ xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
+ yDate = [400, 500, 200, 450, 245]
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ } else if (name == '全部') {
+ this.dataDeep = 1
+ xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
+ yDate = [881, 2211, 6414, 4321, 1232]
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ }
+ }
+
+ },
+
+ backBegin () {
+ this.dataDeep = 1
+ let xDate, yDate
+ if (this.tabType == 0) {
+ xDate = ['车站派出所', '沙溪派出所', '灵溪派出所', '北门派出所', '江光派出所']
+ yDate = [881, 2211, 6414, 4321, 1232]
+ } else if (this.tabType == 1) {
+ xDate = ['湖北', '上海', '北京', '广东', '浙江']
+ yDate = [6414, 4231, 2211, 1231, 881]
+ } else if (this.tabType == 2) {
+ xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
+ yDate = [881, 1231, 2211, 4321, 6414]
+ }
+ homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate), true)
+ },
+
+ getKeyPersonData (arr) {
+ let valueArr = [0, 0, 0, 0, 0, 0, 0]
+ arr.some(item => {
+ if (item.type == '涉恐人员') {
+ valueArr[0] = Number(valueArr[0]) + 1
+ } else if (item.type == '涉稳人员') {
+ valueArr[1] = Number(valueArr[0]) + 1
+ } else if (item.type == '涉毒人员') {
+ valueArr[2] = Number(valueArr[0]) + 1
+ } else if (item.type == '在逃人员') {
+ valueArr[3] = Number(valueArr[0]) + 1
+ } else if (item.type == '重大刑事犯罪前科人员') {
+ valueArr[4] = Number(valueArr[0]) + 1
+ } else if (item.type == '肇事肇祸精神病人') {
+ valueArr[5] = Number(valueArr[0]) + 1
+ } else if (item.type == '重点上访人员') {
+ valueArr[6] = Number(valueArr[0]) + 1
+ }
+ })
+ let KeyPersonDataArr = [
+ { value: valueArr[0], name: '涉恐人员' },
+ { value: valueArr[1], name: '涉稳人员' },
+ { value: valueArr[2], name: '涉毒人员' },
+ { value: valueArr[3], name: '在逃人员' },
+ { value: valueArr[4], name: '重大刑事犯罪前科人员' },
+ { value: valueArr[5], name: '肇事肇祸精神病人' },
+ { value: valueArr[6], name: '重点上访人员' }
+ ]
+ return KeyPersonDataArr
+ }
}
}
@@ -623,6 +718,19 @@
width: 400px;
overflow: hidden;
}
+ .back {
+ color: #fff;
+ position: absolute;
+ top: 104px;
+ left: 43px;
+ width: 20px;
+ height: 20px;
+ font-size: 20px;
+ cursor: pointer;
+ }
+ .back:hover {
+ color: #43bafe;
+ }
}
.house-box {
height: 30%;
--
Gitblit v1.9.3