From f40918f9c3b4de685190ef0aec678fff4d3bca47 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 08 Feb 2023 16:55:25 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs
---
src/views/home/components/leftContainer.vue | 235 ++++++++++++++++++++++++++--------------------------------
1 files changed, 104 insertions(+), 131 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 3e53bc7..1658d13 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -13,27 +13,19 @@
</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">
{{
- 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>
@@ -43,68 +35,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>
@@ -112,19 +77,11 @@
<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>
- <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>
@@ -133,19 +90,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>
@@ -153,19 +101,11 @@
<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" :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>
@@ -181,19 +121,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>
@@ -209,6 +140,8 @@
let keyPersonmyChart = null
let houseMyChart
let landMyChart
+
+let leftTiming = null
let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']
@@ -369,11 +302,24 @@
this.isAllPoliceStation = true
}
- this.personTabClick(0)
+ this.personTabClick(this.tabType)
- this.houseTabClick(0)
+ this.houseTabClick(this.tabTypeTwo)
- this.landTabClick(0)
+ this.landTabClick(this.tabTypeThree)
+
+ if (leftTiming != null) {
+ clearInterval(leftTiming)
+ leftTiming = null
+ }
+
+ leftTiming = setInterval(async () => {
+ this.personTabClick(this.tabType)
+
+ this.houseTabClick(this.tabTypeTwo)
+
+ this.landTabClick(this.tabTypeThree)
+ }, 600000)
},
/**
@@ -385,15 +331,7 @@
this.tabType = type
this.dataDeep = 1
- if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
- homePersonmyChart.dispose()
- homePersonmyChart.off('click')
- }
-
- if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
- keyPersonmyChart.dispose()
- keyPersonmyChart.off('click')
- }
+ this.disposeEchart()
if (type == 0) {
if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {
@@ -416,6 +354,8 @@
getPoliceStationInfo () {
getVillagePersonStatisticInfo().then(res => {
if (res.data.code == 200) {
+ this.disposeEchart()
+
this.personAll = res.data.data
this.policeStationPersonInfo = res.data.data
//异步，因此放进接口方法内部
@@ -435,6 +375,8 @@
getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
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
@@ -630,6 +572,8 @@
*/
getHouseStatisticInfo (isFollow) {
getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
+ this.disposeHouseEchart()
+
let xDate = []
let yDate = []
if (isFollow == 1) {
@@ -747,6 +691,8 @@
houseTabClick (type) {
this.tabTypeTwo = type
+
+ this.disposeHouseEchart()
if (type == 0) {
this.getHouseStatisticInfo(2)
} else {
@@ -861,6 +807,8 @@
* @return {*}
*/
async initkeyPersonEcharts () {
+ this.disposeEchart()
+
var chartDom = document.getElementById('PersonEcharts')
keyPersonmyChart = this.$echarts.init(chartDom)
@@ -999,6 +947,7 @@
landTabClick (type) {
this.tabTypeThree = type
+ this.disposeLandEchart()
if (type == 0) {
this.getAreaStatisticInfo(2)
} else if (type == 1) {
@@ -1014,6 +963,8 @@
*/
getAreaStatisticInfo (type) {
getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
+ this.disposeLandEchart()
+
let landData = []
if (type == 2) {
this.areaNum = res.data.data.areaNum
@@ -1072,8 +1023,6 @@
})
},
-
-
/**
* @description: 视图窗口改变时，echarts图表重置
* @return {*}
@@ -1085,27 +1034,51 @@
houseMyChart && houseMyChart != null && houseMyChart.resize()
},
+ /**
+ * @description: 销毁所有echarts实例，解绑点击事件
+ * @return {*}
+ */
+ disposeEchart () {
+ if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
+ homePersonmyChart.dispose()
+ homePersonmyChart.off('click')
+ }
+
+ if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
+ keyPersonmyChart.dispose()
+ keyPersonmyChart.off('click')
+ }
+ },
+
+ /**
+ * @description: 销毁所有echarts实例，解绑点击事件
+ * @return {*}
+ */
+ disposeHouseEchart () {
+ if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) {
+ houseMyChart.dispose()
+ houseMyChart.off('click')
+ }
+ },
+
+ /**
+ * @description: 销毁所有echarts实例，解绑点击事件
+ * @return {*}
+ */
+ disposeLandEchart () {
+ if (landMyChart != null && landMyChart != '' && landMyChart != undefined) {
+ landMyChart.dispose()
+ landMyChart.off('click')
+ }
+ }
},
destroyed () {
window.removeEventListener("resize", this.echartsResize)
- if (homePersonmyChart) {
- homePersonmyChart.dispose()
- homePersonmyChart = null
- }
- if (houseMyChart) {
- houseMyChart.dispose()
- houseMyChart = null
- }
- if (landMyChart) {
- landMyChart.dispose()
- landMyChart = null
- }
- if (keyPersonmyChart) {
- keyPersonmyChart.dispose()
- keyPersonmyChart = null
- }
+ this.disposeEchart()
+ this.disposeHouseEchart()
+ this.disposeLandEchart()
}
}
</script>
@@ -1213,7 +1186,7 @@
color: #fff;
}
- & > div:nth-of-type(2) {
+ &>div:nth-of-type(2) {
font-size: 14px;
}
}
@@ -1241,7 +1214,7 @@
align-items: center;
justify-content: center;
- & > div {
+ &>div {
height: 22px;
line-height: 22px;
white-space: nowrap;
--
Gitblit v1.9.3