From 628d3b4f2ddb24bfcaddf89a1da15010d3199870 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 31 Oct 2022 15:30:46 +0800
Subject: [PATCH] 1
---
src/views/home/components/leftContainer.vue | 82 +++++++++++++++++++++++++++-------------
1 files changed, 55 insertions(+), 27 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 6d73a69..ba084df 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -3,34 +3,26 @@
<div class="person-box">
<div class="title">
<i></i>
- <span
- class="peopleTap"
- :class="{choosed:peopletype == 0}"
- @click="peopleTabClick(0)"
- >现有人员</span>
+ <span class="peopleTap" :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
<span>/</span>
- <span
- class="peopleTap"
- :class="{choosed:peopletype == 1}"
- @click="peopleTabClick(1)"
- >重点人员</span>
+ <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
<span class="word before">共</span>
- <span class="peopleNum" :class="{choosed:peopletype == 0}">100</span>
+ <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>
<span class="word">/</span>
- <span class="peopleNum" :class="{choosed:peopletype == 1}">1</span>
+ <span class="peopleNum" :class="{ choosed: peopletype == 1 }">1</span>
<span class="word">人</span>
</div>
<div class="sub-tab" v-show="peopletype == 0">
- <div class="tab" :class="{on:tabType==0}" @click="personTabClick(0)">
+ <div class="tab" :class="{ on: tabType == 0 }" @click="personTabClick(0)">
<div class="num">164.57万人</div>
<div class="type">户籍人口</div>
</div>
- <div class="tab" :class="{on:tabType==1}" @click="personTabClick(1)">
+ <div class="tab" :class="{ on: tabType == 1 }" @click="personTabClick(1)">
<div class="num">17.52万人</div>
<div class="type">流动人口</div>
</div>
- <div class="tab" :class="{on:tabType==2}" @click="personTabClick(2)">
+ <div class="tab" :class="{ on: tabType == 2 }" @click="personTabClick(2)">
<div class="num">91995人</div>
<div class="type">境外人口</div>
</div>
@@ -38,14 +30,12 @@
<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 && peopletype == 0"
- @click="backBegin"
- >
+
+
+ <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin">
<i class="el-icon-back"></i>
</div>
+
</div>
<div class="house-box">
<div class="title">
@@ -53,11 +43,11 @@
</div>
<div class="sub-tab">
- <div class="tab" :class="{on:tabTypeTwo==0}" @click="houseTabClick(0)">
+ <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
<div class="num">1822603户</div>
<div class="num">实有房屋</div>
</div>
- <div class="tab" :class="{on:tabTypeTwo==1}" @click="houseTabClick(1)">
+ <div class="tab" :class="{ on: tabTypeTwo == 1 }" @click="houseTabClick(1)">
<div class="num">634个</div>
<div class="num">关注场所</div>
</div>
@@ -70,11 +60,11 @@
<i></i> 现有地
</div>
<div class="sub-tab">
- <div class="tab" :class="{on:tabTypeThree==0}" @click="landTabClick(0)">
+ <div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
<div class="num">634个</div>
<div class="num">小区</div>
</div>
- <div class="tab" :class="{on:tabTypeThree==1}" @click="landTabClick(1)">
+ <div class="tab" :class="{ on: tabTypeThree == 1 }" @click="landTabClick(1)">
<div class="num">634个</div>
<div class="num">责任区</div>
</div>
@@ -741,6 +731,31 @@
this.initkeyPersonEcharts()
}
+ },
+
+ destroyed () {
+ if (!homePersonmyChart) {
+ return
+ }
+ if (!houseMyChart) {
+ return
+ }
+ if (!landMyChart) {
+ return
+ }
+ if (!keyPersonmyChart) {
+ return
+ }
+
+ homePersonmyChart.dispose()
+ houseMyChart.dispose()
+ landMyChart.dispose()
+ keyPersonmyChart.dispose()
+
+ homePersonmyChart = null
+ houseMyChart = null
+ landMyChart = null
+ keyPersonmyChart = null
}
}
</script>
@@ -753,33 +768,41 @@
.person-box {
height: 35%;
+
.peopleTap {
color: rgb(98, 95, 95);
cursor: pointer;
}
+
.peopleTap:hover {
text-decoration: underline;
}
+
.choosed {
color: #fff;
}
+
.peopleNum {
color: rgb(98, 95, 95);
font-size: 14px;
}
+
.word {
color: #fff;
font-size: 14px;
}
+
.before {
margin-left: 108px;
}
+
.peopleTable {
height: calc(100% - 40px);
height: 250px;
width: 400px;
overflow: hidden;
}
+
.back {
color: #fff;
position: absolute;
@@ -790,10 +813,12 @@
font-size: 20px;
cursor: pointer;
}
+
.back:hover {
color: #43bafe;
}
}
+
.house-box {
height: 30%;
}
@@ -801,6 +826,7 @@
.land-box {
height: 35%;
}
+
.person-box,
.house-box,
.land-box {
@@ -822,6 +848,7 @@
background: #43bafe;
box-shadow: 0px 0px 8px 2px #43bafe;
}
+
.choosed {
color: #fff;
}
@@ -843,7 +870,7 @@
border: 1px solid rgba(20, 50, 123, 1);
cursor: pointer;
- & > div {
+ &>div {
height: 26px;
line-height: 26px;
}
@@ -860,10 +887,11 @@
height: calc(100% - 104px);
}
- .sub-tab + .echarts-box {
+ .sub-tab+.echarts-box {
margin-top: 10px;
}
}
+
:deep(.el-table__body-wrapper) {
overflow-x: hidden !important;
}
--
Gitblit v1.9.3