From 182fa3898bc00e1d5d6ddbe239bf84cb5aa3d437 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期一, 24 三月 2025 15:27:45 +0800
Subject: [PATCH] feat
---
src/components/datascreen/LeftPanel.vue | 116 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 73 insertions(+), 43 deletions(-)
diff --git a/src/components/datascreen/LeftPanel.vue b/src/components/datascreen/LeftPanel.vue
index 95a1ca1..136f63b 100644
--- a/src/components/datascreen/LeftPanel.vue
+++ b/src/components/datascreen/LeftPanel.vue
@@ -6,11 +6,11 @@
<div class="box-content">
<div class="box-content-item">
<div class="box-content-item-title">总参与户数(户)</div>
- <div class="box-content-item-value">87695</div>
+ <div class="box-content-item-value">{{ data.selfBuyResponse.householdNum || 0 }}</div>
</div>
<div class="box-content-item" style="margin-left: 35px;">
<div class="box-content-item-title">总参与人数(人)</div>
- <div class="box-content-item-value">876995</div>
+ <div class="box-content-item-value">{{ data.selfBuyResponse.personNum || 0 }}</div>
</div>
</div>
</div>
@@ -22,15 +22,16 @@
<div v-for="(item, index) in rankingList" :key="index" class="ranking-item">
<div class="ranking-item-content">
<span class="rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
- <span class="name">{{ item.name }}</span>
+ <span class="name">{{ item.street }}</span>
<div class="value">
<div class="value-text">
环比
- <span class="value-text-value" :class="{ 'positive': item.growth > 0, 'negative': item.growth < 0 }">
- {{ item.growth > 0 ? '+' : '' }}{{ item.growth }}%
+ <span class="value-text-value"
+ :class="{ 'positive': item.latestBatchHouseholdCount < item.secondLatestBatchHouseholdCount, 'negative': item.latestBatchHouseholdCount > item.secondLatestBatchHouseholdCount }">
+ {{ item.growth > 0 ? '+' : '' }}{{ item.householdNumRate }}
</span>
</div>
- {{ item.value }}
+ {{ item.householdNum }}户
</div>
</div>
<div class="progress-bar">
@@ -55,26 +56,17 @@
<script>
export default {
name: 'LeftPanel',
- components: {
+ props: {
+ data: {
+ type: Object,
+ default: () => ({})
+ },
},
data() {
return {
- totalHouseholds: 87695,
- totalPeople: 876995,
- rankingList: [
- { name: '崇州街道', percentage: 0, value: '999户', growth: 43.2 },
- { name: '羊马乡', percentage: 0, value: '999户', growth: -12.5 },
- { name: '万家镇', percentage: 0, value: '999户', growth: 8.3 },
- { name: '崇阳街道', percentage: 0, value: '999户', growth: -5.2 },
- { name: '白头镇', percentage: 0, value: '999户', growth: 15.7 },
- { name: '金鸡乡', percentage: 0, value: '999户', growth: -3.8 },
- { name: '西江镇', percentage: 0, value: '999户', growth: 22.1 },
- { name: '观胜镇', percentage: 0, value: '999户', growth: -7.4 }
- ],
- finalPercentages: [
- 50, 85, 80, 75, 70, 65, 60, 55
- ],
-
+ totalHouseholds: 0,
+ totalPeople: 0,
+ rankingList: [],
lineOption: {
tooltip: {
trigger: 'axis',
@@ -247,20 +239,34 @@
}
]
}
+
};
},
- mounted() {
- // 使用 setTimeout 确保 DOM 已经渲染
- setTimeout(() => {
- this.animateProgressBars();
- }, 100);
+ watch: {
+ data: {
+ handler(newVal, oldVal) {
+ if (newVal) {
+ this.rankingList = newVal.streetResponses
+ this.$nextTick(() => {
+ this.animateProgressBars();
+ });
+ }
+ },
+ deep: true,
+ immediate: true
+ }
},
methods: {
animateProgressBars() {
- this.rankingList = this.rankingList.map((item, index) => ({
- ...item,
- percentage: this.finalPercentages[index]
- }));
+ let count = 0
+ this.rankingList.map(item => {
+ count += item.householdNum;
+ });
+
+ this.rankingList = this.rankingList.map((item, index) => {
+ item.percentage = (item.householdNum / count) * 100;
+ return item
+ });
}
}
};
@@ -278,11 +284,13 @@
height: 196px;
background: url('@/assets/left-top-bg.png') no-repeat center center;
background-size: 100% 100%;
+
.box-content {
display: flex;
justify-content: center;
margin-top: 30px;
height: 100%;
+
.box-content-item-title {
width: 178px;
height: 38px;
@@ -292,6 +300,7 @@
background: url('@/assets/left/top-number-header.png') no-repeat center center;
background-size: 100% 100%;
}
+
.box-content-item-value {
width: 178px;
height: 64px;
@@ -331,6 +340,17 @@
.ranking-list {
margin-top: 30px;
+ overflow: auto;
+ /* 隐藏滚动条 */
+ scrollbar-width: none;
+ /* Firefox */
+ -ms-overflow-style: none;
+
+ /* IE 和 Edge */
+ &::-webkit-scrollbar {
+ display: none;
+ /* Chrome, Safari 和 Opera */
+ }
}
.ranking-item {
@@ -349,28 +369,28 @@
height: 22px;
line-height: 22px;
padding-left: 2px;
-
+
&.rank-1 {
color: #E9B701;
background: url('@/assets/left/one.png') no-repeat center center;
background-size: 100% 100%;
}
-
+
&.rank-2 {
color: #0ED1A3;
background: url('@/assets/left/two.png') no-repeat center center;
background-size: 100% 100%;
}
-
+
&.rank-3 {
color: #0EBFDA;
background: url('@/assets/left/three.png') no-repeat center center;
background-size: 100% 100%;
}
-
+
&:not(.rank-1):not(.rank-2):not(.rank-3) {
color: #0089FF;
- background: linear-gradient( 270deg, rgba(0,137,255,0) 0%, rgba(0,137,255,0.4) 100%);
+ background: linear-gradient(270deg, rgba(0, 137, 255, 0) 0%, rgba(0, 137, 255, 0.4) 100%);
}
}
@@ -386,15 +406,21 @@
font-size: 15px;
display: flex;
align-items: center;
+ justify-content: space-between;
+ text-align: end;
+ width: 175px;
+
.value-text {
color: #C0CFDC;
font-size: 12px;
- width: 130px;
+
.value-text-value {
margin-left: 12px;
+
&.positive {
color: #FEDB65;
}
+
&.negative {
color: #66FFFF;
}
@@ -415,7 +441,7 @@
width: 0;
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
-
+
.progress-icon {
position: absolute;
right: -8px;
@@ -427,30 +453,34 @@
background-repeat: no-repeat;
background-position: center;
}
-
+
&.rank-1 {
background: linear-gradient(90deg, #2A1802 0%, #C86A01 49%, #E5D704 100%);
+
.progress-icon {
background-image: url('@/assets/left/progress-one.png');
}
}
-
+
&.rank-2 {
background: linear-gradient(270deg, #0ED1A3 0%, #03493E 100%);
+
.progress-icon {
background-image: url('@/assets/left/progress-two.png');
}
}
-
+
&.rank-3 {
background: linear-gradient(90deg, #104461 0%, #0EB2DA 100%);
+
.progress-icon {
background-image: url('@/assets/left/progress-three.png');
}
}
-
+
&:not(.rank-1):not(.rank-2):not(.rank-3) {
background: linear-gradient(90deg, #03142C 0%, #057BFF 49%, #05DBFF 100%);
+
.progress-icon {
background-image: url('@/assets/left/progress-four.png');
}
--
Gitblit v1.7.1