From 85fb13abbeadc1765d2c0056ba99c6c19aa35dfd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sun, 09 Apr 2023 03:44:49 +0800
Subject: [PATCH] 电子沙盘的调整
---
src/views/home/components/leftContainer.vue | 566 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 348 insertions(+), 218 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 09d8437..a8dbeb4 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -6,61 +6,58 @@
<div class="title-tab">
<span :class="{ choosed: peopletype == 0 }">现有人员</span>
</div>
- <!-- <div class="title-num">
- 共
- <span :class="{ choosed: peopletype == 0 }">100</span>人
- <span :class="{ choosed: peopletype == 1 }">1</span>人
- </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-title-small">户籍人口:</div>
- <div class="tab-title-small">
- {{
- personAll.total ? personAll.total : 0
- }}人
+ <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
+ element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
+ <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-title-small">
+ {{
+ personAll.total ? personAll.total : 0
+ }}人
+ </div>
+ </div>
+ <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
+ }}人
+ </div>
</div>
</div>
- <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
- }}人
- </div>
+
+ <div id="PersonEcharts" class="echarts-box">
</div>
- <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
- <div class="num">91995人</div>
- <div class="type">境外人口</div>
- </div>-->
+ </el-main>
+
+
+ <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
</div>
- <div id="PersonEcharts" class="echarts-box"></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"
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%">
+ 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%">
<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)">
+ <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"
+ 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" />
</circle>
</mask>
@@ -76,17 +73,20 @@
<div class="house-box" style="position: relative;">
<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-title-small">实有楼栋:</div>
- <div class="tab-title-small">{{ realHouseNum?realHouseNum: 0 }}栋</div>
+ <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-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-title-small">关注场所:</div>
+ <div class="tab-title-small">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
+ </div>
</div>
- <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>
- </div>
- <div id="houseEcharts" class="echarts-box"></div>
+ <div id="houseEcharts" class="echarts-box"></div>
+ </el-main>
</div>
<svg class="border-svg">
@@ -99,25 +99,27 @@
</div>
<div class="land-box" style="position: relative;">
<div class="box">
- <div class="title">现有地</div>
- <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="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)">
+ <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>
+ <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>
</div>
- <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="sub-tab" v-show="!isAllPoliceStation">
+ <div class="tab1 select-on-tab">
+ <div class="tab-title-small">小区:</div>
+ <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
+ </div>
</div>
- </div>
- <div class="sub-tab" v-show="!isAllPoliceStation">
- <div class="tab1 select-on-tab">
- <div class="tab-title-small">小区:</div>
- <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div>
- </div>
- </div>
-
- <div id="landEcharts" class="echarts-box"></div>
+ <div id="landEcharts" class="echarts-box"></div>
+ </el-main>
</div>
<svg class="border-svg">
@@ -134,14 +136,17 @@
<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } from "@/api/home/index.js"
+import { schoolJSON } from '../homeleft/school'
import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept"
let homePersonmyChart = null
let keyPersonmyChart = null
let houseMyChart
let landMyChart
+let timer
let leftTiming = null
+let keyPeopleDataLength = 0
let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']
@@ -153,107 +158,16 @@
data () {
return {
tabType: 0,
+ personEchartsLoading: false,
+ houseEchartsLoading: false,
+ landEchartsLoading: false,
peopletype: 0,
tabTypeTwo: 0,
tabTypeThree: 0,
- peopleArr: [
- { 'name': '黄XX', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' },
- { 'name': '李某某', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' },
- { 'name': '刘AA', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' },
- { 'name': '张三', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' }
- ],
peopleTitle: '',
peopleVisible: false,
- keyPersonDetailArr: [
- { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
- { 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': '在逃人员' },
- { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
- { 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': '涉恐人员' },
- { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
- { 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': '重大刑事犯罪前科人员' },
- { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
- { 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': '责任区3', 'type': '涉稳人员' },
- { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
- { 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': '肇事肇祸精神病人' },
- { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
- { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
- { 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': '在逃人员' },
- { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
- { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
- { 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': '涉稳人员' },
- { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
- { 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': '肇事肇祸精神病人' },
- { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
- { 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': '责任区3', 'type': '涉毒人员' },
- { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '在逃人员' },
- { 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: {},
- keyPersonSelectArr: [
- { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
- { 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': '在逃人员' },
- { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
- { 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': '涉恐人员' },
- { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
- { 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': '重大刑事犯罪前科人员' },
- { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
- { 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': '责任区3', 'type': '涉稳人员' },
- { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
- { 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': '肇事肇祸精神病人' },
- { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
- { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
- { 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': '在逃人员' },
- { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
- { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
- { 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': '涉稳人员' },
- { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
- { 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': '肇事肇祸精神病人' },
- { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
- { 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': '责任区3', 'type': '涉毒人员' },
- { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '在逃人员' },
- { 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': '重点上访人员' }
- ],
keyPersonSelectSaveArr: [],
areaNum: '',
villageNum: '',
@@ -266,7 +180,8 @@
keyPlaceNum: '',
personAll: '',
// 记录当前选中派出所的ID
- policeStaionID: ''
+ policeStaionID: '',
+ peopleLoading: false,
}
},
@@ -278,6 +193,7 @@
this.getHomeAllData()
if (this.userInfo.dept_id != '1123598813738675201') {
+ // console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442);
this.showBack = false
this.isAllPoliceStation = false
}
@@ -286,7 +202,80 @@
window.addEventListener("resize", this.echartsResize)
})
},
+
methods: {
+ // 设备饼图轮播
+ keyPeopleEchartsCarousel () {
+ let curIndex = 0
+ if (timer) {
+ clearInterval(timer)
+ }
+
+ timer = setInterval(() => {
+ keyPersonmyChart.dispatchAction({
+ type: "downplay",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ curIndex = (curIndex + 1) % keyPeopleDataLength
+ keyPersonmyChart.dispatchAction({
+ type: "highlight",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ keyPersonmyChart.dispatchAction({
+ type: "showTip",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ }, 1000)
+
+ keyPersonmyChart.on("mouseover", function (param) {
+ clearInterval(timer)
+ keyPersonmyChart.dispatchAction({
+ type: "downplay",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ keyPersonmyChart.dispatchAction({
+ type: "highlight",
+ seriesIndex: 0,
+ dataIndex: param.dataIndex,
+ })
+ keyPersonmyChart.dispatchAction({
+ type: "showTip",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ curIndex = param.dataIndex
+ })
+
+ keyPersonmyChart.on("mouseout", function (param) {
+ curIndex = param.dataIndex
+ if (timer) {
+ clearInterval(timer)
+ }
+ timer = setInterval(() => {
+ keyPersonmyChart.dispatchAction({
+ type: "downplay",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ curIndex = (curIndex + 1) % keyPeopleDataLength
+ keyPersonmyChart.dispatchAction({
+ type: "highlight",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ keyPersonmyChart.dispatchAction({
+ type: "showTip",
+ seriesIndex: 0,
+ dataIndex: curIndex,
+ })
+ }, 1000)
+ })
+ },
+
/**
* @description: 获取首页的所有数据
* @return {*}
@@ -332,20 +321,24 @@
personTabClick (type) {
this.tabType = type
this.dataDeep = 1
+ this.personEchartsLoading = true
this.disposeEchart()
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()
+ this.initkeyPersonEcharts()
}
},
@@ -359,14 +352,21 @@
this.disposeEchart()
this.personAll = res.data.data
+
this.policeStationPersonInfo = res.data.data
//异步，因此放进接口方法内部
this.initPersonEcharts()
this.clickPeopleChart()
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
}
+ }).catch(res => {
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
})
},
-
/**
* @description: 获取派出所户籍人口数据
@@ -378,10 +378,14 @@
getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
if (res.data.code == 200) {
this.disposeEchart()
-
var chartDom = document.getElementById('PersonEcharts')
homePersonmyChart = this.$echarts.init(chartDom)
this.personAll = res.data.data
+
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ this.personAll.emphasisNum = 20
+ }
+
this.villagePersonStatisticInfoList = res.data.data
var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
@@ -399,7 +403,17 @@
homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
this.clickPeopleChart()
+
+ setTimeout(() => {
+ this.dataDeep = 2,
+ this.personEchartsLoading = false
+ }, 1000)
+
}
+ }).catch(res => {
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
})
},
@@ -442,13 +456,13 @@
if (xDate.length == 0) {
options = {
title: {
- text: '暂无数据',
+ text: '暂无数据1',
x: 'center',
y: 'center',
textStyle: {
- color: "#fff",
- fontSize: fontSize(14),
+ color: '#fff',
fontWeight: 'normal',
+ fontSize: fontSize(14)
}
}
}
@@ -461,7 +475,7 @@
borderColor: 'rgba(8, 56, 185, 0.9)',
textStyle: {
color: '#fff',
- fontSize: fontSize(14)
+ fontSize: fontSize(12)
}
},
xAxis: {
@@ -472,7 +486,7 @@
color: "#fff",
interval: 0,
rotate: 45,
- fontSize: fontSize(12)
+ fontSize: fontSize(10)
},
axisLine: {
lineStyle: {
@@ -488,7 +502,7 @@
},
axisLabel: {
color: "#fff",
- fontSize: fontSize(14)
+ fontSize: fontSize(12)
}
},
series: [
@@ -532,7 +546,7 @@
top: '4%',
left: '2%',
right: '2%',
- bottom: '4%',
+ bottom: '1%',
containLabel: true
},
}
@@ -549,21 +563,7 @@
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)
+ this.$parent.getAllPoliceStationCenter()
},
/**
@@ -587,8 +587,30 @@
xDate.push(item.name)
yDate.push(item.num)
})
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ this.keyPlaceNum = 28
+ this.realHouseNum = 205
+ if (isFollow == 2) {
+ xDate = ['学校', '医院', '党政机关', '宾馆酒店', '零售业', '数字经济', '批发业', '装修及建筑业', '租赁业', '房地产业', '商务服务业', '餐饮业']
+ yDate = [36, 1, 3, 34, 16, 25, 30, 33, 2, 7, 6, 2]
+ this.inithouseEcharts(xDate, yDate)
+ } else {
+ xDate = ['反恐重点目标', '危爆品单位']
+ yDate = [14, 14]
+ this.inithouseEcharts(xDate, yDate)
+ }
- this.inithouseEcharts(xDate, yDate)
+ this.clickHouseChart()
+ } else {
+ this.inithouseEcharts(xDate, yDate)
+ }
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
+ }).catch(res => {
+ setTimeout(() => {
+ this.houseEchartsLoading = false
+ }, 500)
})
},
@@ -599,6 +621,7 @@
},
initHouseOptions (xDate, y1Date, y2Date) {
+ const that = this
return {
tooltip: {
trigger: 'item',
@@ -617,7 +640,7 @@
borderColor: 'rgba(8, 56, 185, 0.9)',
textStyle: {
color: '#fff',
- fontSize: fontSize(14)
+ fontSize: fontSize(12)
}
},
color: myColor,
@@ -654,16 +677,26 @@
{
data: y1Date,
type: 'bar',
- barWidth: '24%',
+ // barWidth: '10%',
+ barCategoryGap: '80%',
zlevel: 2,
+ cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
itemStyle: {
normal: {
- barBorderRadius: [0, 30, 30, 0],
+ // barBorderRadius: [0, 30, 30, 0],
// color: function (params) {
- // var num = myColor.length
- // return myColor[params.dataIndex % num]
- // },
- color: '#ed7c2f'
+ // var num = myColor.length
+ // return myColor[params.dataIndex % num]
+ // },
+ color: '#ed7c2f',
+ label: {
+ show: true, //开启显示
+ position: 'right', //在上方显示
+ textStyle: { //数值样式
+ color: '#ed7c2f',
+ fontSize: 10
+ }
+ }
}
},
},
@@ -684,15 +717,49 @@
grid: {
top: '2%',
left: '2%',
- right: '-1%',
+ // right: '-1%',
+ right: '10%',
bottom: '2%',
containLabel: true
},
+ // dataZoom: [
+ // {
+ // type: "inside",
+ // startValue: 0,
+ // endValue: 8,
+ // minValueSpan: 2,
+ // maxValueSpan: 2,
+ // yAxisIndex: [0],
+ // zoomOnMouseWheel: false, // 关闭滚轮缩放
+ // moveOnMouseWheel: true, // 开启滚轮平移
+ // moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
+ // },
+ // {
+ // type: 'slider',
+ // realtime: true,
+ // startValue: 0,
+ // endValue: 8,
+ // width: '3.5',
+ // height: '80%',
+ // yAxisIndex: [0], // 控制y轴滚动
+ // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
+ // borderColor: "rgba(17, 100, 210, 0.12)",
+ // backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
+ // handleSize: 0, // 两边手柄尺寸
+ // showDataShadow: false,//是否显示数据阴影 默认auto
+ // showDetail: false, // 拖拽时是否展示滚动条两侧的文字
+ // top: '1%',
+ // right: '5',
+ // }
+
+ // ]
}
},
houseTabClick (type) {
this.tabTypeTwo = type
+
+ this.houseEchartsLoading = true
this.disposeHouseEchart()
if (type == 0) {
@@ -704,6 +771,7 @@
initLandOptions (xDate, yDate) {
return {
+ color: ['#0532ff'],
grid: {
top: '4%',
left: '12%',
@@ -719,18 +787,17 @@
borderColor: 'rgba(8, 56, 185, 0.9)',
textStyle: {
color: '#fff',
- fontSize: fontSize(14)
+ fontSize: fontSize(12)
}
},
xAxis: {
type: 'category',
data: xDate,
-
axisLabel: {
color: "#fff",
interval: 0,
rotate: 45,
- fontSize: fontSize(12)
+ fontSize: fontSize(10)
},
axisLine: {
lineStyle: {
@@ -746,7 +813,7 @@
},
axisLabel: {
color: "#fff",
- fontSize: fontSize(14)
+ fontSize: fontSize(12)
}
},
series: [
@@ -795,11 +862,31 @@
clickPeopleChart () {
homePersonmyChart.on('click', params => {
- this.dataDeep = 2
if (params.data.type == 'policeStation') {
+ const center = this.$parent.getPoliceStationCenter(params.data.id)
+ this.$EventBus.$emit('toPosition', {
+ layerName: 'carLayers',
+ siteJd: center[0],
+ siteWd: center[1]
+ })
+ this.personEchartsLoading = true
this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
} else {
this.$emit('showpeopledetail', params.data.id, params.data.name)
+ }
+ })
+ },
+
+ clickHouseChart () {
+ houseMyChart.on('click', params => {
+ if (params.name == '学校') {
+ this.$parent.xxPopupShow = true
+ this.$parent.houseArr = []
+ this.$parent.houseLoading = true
+ setTimeout(() => {
+ this.$parent.houseLoading = false
+ this.$parent.houseArr = schoolJSON
+ }, 1000)
}
})
},
@@ -815,11 +902,31 @@
keyPersonmyChart = this.$echarts.init(chartDom)
let personInfo = await this.getPersonInfo()
+ keyPeopleDataLength = personInfo.length
+ if (this.userInfo.dept_id == '1596020515064381442') {
+ personInfo = [
+ { count: 11, name: '征地拆迁群体', value: 11 },
+ { count: 3, name: '非涉法涉诉重点个访人员', value: 3 },
+ { count: 4, name: '涉法涉诉重点个访人员', value: 4 },
+ { count: 1, name: '楼盘业主维权群体', value: 1 },
+ { count: 1, name: '欠薪讨债群体', value: 1 }]
+ }
keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))
this.clickkeyPersonChart()
+ if (personInfo.length > 1) {
+ this.keyPeopleEchartsCarousel()
+ } else {
+ clearInterval(timer)
+ keyPersonmyChart.off("mouseover")
+ keyPersonmyChart.off("mouseout")
+ }
+ setTimeout(() => {
+ this.personEchartsLoading = false
+ }, 500)
},
+
/**
* @description: 调用接口获取重点人员数据
* @return {*}
@@ -849,16 +956,17 @@
*/
initkeyPersonOption (dataArr) {
let options
+
if (dataArr.length == 0) {
options = {
title: {
- text: '暂无数据',
+ text: '暂无重点人员数据',
x: 'center',
y: 'center',
textStyle: {
- color: "#fff",
- fontSize: fontSize(14),
+ color: '#fff',
fontWeight: 'normal',
+ fontSize: fontSize(14)
}
}
}
@@ -873,10 +981,15 @@
} else {
msg = params.value + '人'
}
-
- msg = `${params.marker} ${params.name}<strong style="margin-left:10px">${msg}</strong>`
+ msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
return msg
- }
+ },
+ backgroundColor: "rgba(8, 56, 185, 0.9)",
+ borderColor: "rgba(8, 56, 185, 0.9)",
+ textStyle: {
+ fontSize: fontSize(12)
+ },
+ confine: true
},
legend: {
type: 'scroll',
@@ -884,7 +997,7 @@
top: 'middle',
left: '45%',
y: '1%',
- itemGap: 20,
+ itemGap: 15,
textStyle: {
color: '#fff'
},
@@ -897,7 +1010,7 @@
}
}
let v = tarValue
- return `${name} ${v} 人 `
+ return `${name} ${v} 人 `
},
},
series: [
@@ -940,12 +1053,13 @@
},
/**
- * @description: 现有地切换
+ * @description: 现有小区切换
* @param {*} type
* @return {*}
*/
landTabClick (type) {
this.tabTypeThree = type
+ this.landEchartsLoading = true
this.disposeLandEchart()
if (type == 0) {
@@ -956,7 +1070,7 @@
},
/**
- * @description: 获取现有地数据
+ * @description: 获取现有小区数据
* @param {*} type
* @param {*} deptId
* @return {*}
@@ -972,7 +1086,7 @@
let nameArr = []
let countArr = []
res.data.data.data.forEach(item => {
- nameArr.push(item.name.replace('派出', ''))
+ nameArr.push(item.name.replace('派出', '').replace('居民委员会', ''))
countArr.push({ value: item.count, id: item.id })
})
landData = [nameArr, countArr]
@@ -987,17 +1101,25 @@
})
landData = [nameArr, countArr]
}
+ setTimeout(() => {
+ this.landEchartsLoading = false
+ }, 500)
this.initLandEcharts(landData)
+ }).catch(res => {
+ setTimeout(() => {
+ this.landEchartsLoading = false
+ }, 500)
})
},
/**
- * @description: 现有地图表渲染
+ * @description: 现有小区图表渲染
* @param {*} landData
* @return {*}
*/
initLandEcharts (landData) {
+ this.disposeLandEchart()
var chartDom = document.getElementById('landEcharts')
landMyChart = this.$echarts.init(chartDom)
@@ -1008,11 +1130,12 @@
},
/**
- * @description: 现有地图表点击事件
+ * @description: 现有小区图表点击事件
* @return {*}
*/
clickLandChart () {
landMyChart.on('click', params => {
+ console.log('clickLandChart')
if (this.tabTypeThree == 0) {
this.$emit('showlanddetail', params.name, 2, params.data.id)
} else {
@@ -1068,7 +1191,9 @@
landMyChart.dispose()
landMyChart.off('click')
}
- }
+ },
+
+
},
destroyed () {
@@ -1194,11 +1319,11 @@
}
}
- .sub-title {
- display: flex;
- justify-content: space-between;
- height: 36px;
- }
+ // .sub-title {
+ // display: flex;
+ // justify-content: space-between;
+ // height: 36px;
+ // }
.sub-tab {
padding: 10px;
@@ -1244,11 +1369,16 @@
}
}
+ :deep(.el-main) {
+ padding: 0;
+ }
+
.echarts-box {
padding: 12px;
padding-top: 0;
flex: 1;
width: 100%;
+ // height: 100%;
}
}
--
Gitblit v1.9.3