From 4223c358f1ad9ffa4fcbc8fb0e350dc5bf342b51 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 24 三月 2025 18:06:53 +0800
Subject: [PATCH] 字体
---
src/components/datascreen/LeftPanel.vue | 222 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 139 insertions(+), 83 deletions(-)
diff --git a/src/components/datascreen/LeftPanel.vue b/src/components/datascreen/LeftPanel.vue
index b71e689..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">
@@ -53,46 +54,19 @@
</template>
<script>
-import { use } from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import { LineChart } from 'echarts/charts';
-import {
- GridComponent,
- TooltipComponent,
- LegendComponent
-} from 'echarts/components';
-import VChart from 'vue-echarts';
-
-use([
- CanvasRenderer,
- LineChart,
- GridComponent,
- TooltipComponent,
- LegendComponent
-]);
-
export default {
name: 'LeftPanel',
- components: {
- VChart
+ 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',
@@ -103,17 +77,18 @@
legend: {
data: ['安置面积异常', '补偿金额异常'],
textStyle: {
- color: '#C0CFDC',
+ color: 'rgba(255, 255, 255, 0.6)',
fontSize: 12
},
+ color: ['#FEDB65', '#00F2F0'],
icon: 'circle',
- itemWidth: 8,
- itemHeight: 8,
- top: 0,
+ itemWidth: 6,
+ itemHeight: 6,
+ top: 5,
right: 0
},
grid: {
- top: '15%',
+ top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
@@ -126,14 +101,14 @@
axisLine: {
show: true,
lineStyle: {
- color: '#1B374A'
+ color: '#1F2C5C'
}
},
axisTick: {
show: false
},
axisLabel: {
- color: '#C0CFDC',
+ color: '#495F88',
fontSize: 12
}
},
@@ -141,14 +116,13 @@
type: 'value',
name: '单位：次',
nameTextStyle: {
- color: '#C0CFDC',
+ color: '#495F88',
fontSize: 12,
- padding: [0, 0, 0, 30]
},
splitLine: {
lineStyle: {
- color: '#1B374A',
- type: 'dashed'
+ color: '#1F2C5C',
+ type: 'solid'
}
},
axisLine: {
@@ -158,7 +132,7 @@
show: false
},
axisLabel: {
- color: '#C0CFDC',
+ color: '#495F88',
fontSize: 12
}
},
@@ -168,6 +142,9 @@
type: 'line',
smooth: true,
symbol: 'none',
+ itemStyle: {
+ color: '#FEDB65'
+ },
areaStyle: {
opacity: 0.8,
color: {
@@ -178,16 +155,35 @@
y2: 1,
colorStops: [{
offset: 0,
- color: 'rgba(255, 187, 0, 0.3)'
+ color: '#6C1F0D'
}, {
- offset: 1,
- color: 'rgba(255, 187, 0, 0)'
+ offset: 0.7,
+ color: 'rgba(255,102,0,0)'
}]
}
},
lineStyle: {
- width: 2,
- color: '#FFBB00'
+ width: 4,
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: '#AE5112' // 0% 处的颜色
+ }, {
+ offset: 0.3,
+ color: '#FEDB65' // 50% 处的颜色
+ }, {
+ offset: 0.7,
+ color: '#FEDB65' // 50% 处的颜色
+ }, {
+ offset: 1,
+ color: '#AE5112' // 100% 处的颜色
+ }]
+ }
},
data: [150, 180, 230, 280, 260, 100]
},
@@ -196,6 +192,9 @@
type: 'line',
smooth: true,
symbol: 'none',
+ itemStyle: {
+ color: '#00F2EF'
+ },
areaStyle: {
opacity: 0.8,
color: {
@@ -206,35 +205,68 @@
y2: 1,
colorStops: [{
offset: 0,
- color: 'rgba(0, 255, 255, 0.3)'
+ color: 'rgba(28,0,255,0.8)'
}, {
- offset: 1,
- color: 'rgba(0, 255, 255, 0)'
+ offset: 0.7,
+ color: 'rgba(28,0,255,0)'
}]
}
},
lineStyle: {
- width: 2,
- color: '#00FFFF'
+ width: 4,
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: '#0E5FFF' // 0% 处的颜色
+ }, {
+ offset: 0.3,
+ color: '#00F2EF' // 50% 处的颜色
+ }, {
+ offset: 0.7,
+ color: '#00F2EF' // 50% 处的颜色
+ }, {
+ offset: 1,
+ color: '#0E5FFF' // 100% 处的颜色
+ }]
+ }
},
data: [200, 250, 380, 450, 380, 300]
}
]
}
+
};
},
- 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
+ });
}
}
};
@@ -252,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;
@@ -266,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;
@@ -305,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 {
@@ -323,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%);
}
}
@@ -360,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;
}
@@ -389,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;
@@ -401,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