From b4cb5238b87154a23d72d7b32d8e8b01c2ff4654 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Tue, 04 Apr 2023 10:01:44 +0800
Subject: [PATCH] 首页图像加载
---
src/views/home/components/leftContainer.vue | 127 +++++++++++++++++++----------------------
1 files changed, 59 insertions(+), 68 deletions(-)
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index 00150b5..19947ea 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -6,36 +6,28 @@
<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
- }}人
- </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 class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
- <div class="num">91995人</div>
- <div class="type">境外人口</div>
- </div>-->
</div>
<el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
+ <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 id="PersonEcharts" class="echarts-box">
</div>
</el-main>
@@ -49,10 +41,10 @@
<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"
+ 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" />
@@ -62,10 +54,10 @@
<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>
@@ -81,18 +73,18 @@
<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>
- </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>
<el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
+ <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 id="houseEcharts" class="echarts-box"></div>
</el-main>
</div>
@@ -108,25 +100,24 @@
<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>
- <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="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>
-
<el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
+ <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="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>
</el-main>
</div>
@@ -1239,11 +1230,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;
@@ -1298,7 +1289,7 @@
padding-top: 0;
flex: 1;
width: 100%;
- height: 100%;
+ // height: 100%;
}
}
--
Gitblit v1.9.3