From feb57f3e36df96eb6b8da834561eecf3ac9b05e6 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期一, 24 三月 2025 11:25:31 +0800
Subject: [PATCH] feat
---
src/components/datascreen/LeftPanel.vue | 435 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 365 insertions(+), 70 deletions(-)
diff --git a/src/components/datascreen/LeftPanel.vue b/src/components/datascreen/LeftPanel.vue
index d0d3fc1..b71e689 100644
--- a/src/components/datascreen/LeftPanel.vue
+++ b/src/components/datascreen/LeftPanel.vue
@@ -1,76 +1,241 @@
<template>
<div class="left-panel">
- <!-- 参与统计 -->
+ <!-- 已参与自主购房安置统计 -->
<div class="statistics-box">
- <div class="box-title">各街道/乡参与排名</div>
- </div>
-
- <!-- 各街道参与排名 -->
- <div class="ranking-box">
- <div class="box-title">各街道/乡参与排名</div>
- <!-- <<div class="ranking-list">
- <div v-for="(item, index) in rankingList" :key="index" class="ranking-item">
- <span class="rank">{{ index + 1 }}</span>
- <span class="name">{{ item.name }}</span>
- <div class="progress-bar">
- <div class="progress" :style="{ width: item.percentage + '%' }"></div>
- </div>
- <span class="value">{{ item.value }}</span>
+ <div class="box-title">已参与自主购房安置统计</div>
+ <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>
- </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>
+ </div>
</div>
- <!-- 安置房完成比 -->
+ <!-- 各镇/街参与户数排名 -->
+ <div class="ranking-box">
+ <div class="box-title">各镇/街参与户数排名</div>
+ <div class="ranking-list">
+ <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>
+ <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>
+ </div>
+ {{ item.value }}
+ </div>
+ </div>
+ <div class="progress-bar">
+ <div class="progress" :style="{ width: item.percentage + '%' }" :class="'rank-' + (index + 1)">
+ <div class="progress-icon" :class="'rank-' + (index + 1)"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 户主信息导入异常统计 -->
<div class="line-chart">
- <div class="box-title">安置房完成比</div>
- <div class="pie-chart">
- <v-chart class="chart" :option="pieOption" autoresize />
+ <div class="box-title">户主信息导入异常统计</div>
+ <div class="chart-container">
+ <v-chart class="chart" :option="lineOption" autoresize />
</div>
</div>
</div>
</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
+ },
data() {
return {
totalHouseholds: 87695,
totalPeople: 876995,
rankingList: [
- { name: '崇州街道', percentage: 90, value: '999户' },
- { name: '羊马乡', percentage: 85, value: '999户' },
- { name: '万家镇', percentage: 80, value: '999户' },
- { name: '崇阳街道', percentage: 75, value: '999户' },
- { name: '白头镇', percentage: 70, value: '999户' },
- { name: '金鸡乡', percentage: 65, value: '999户' },
- { name: '西江镇', percentage: 60, value: '999户' },
- { name: '观胜镇', percentage: 55, value: '999户' }
+ { 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 }
],
- pieOption: {
+ finalPercentages: [
+ 50, 85, 80, 75, 70, 65, 60, 55
+ ],
+ lineOption: {
tooltip: {
- trigger: 'item'
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ }
},
- series: [{
- type: 'pie',
- radius: ['65%', '80%'],
- label: {
+ legend: {
+ data: ['安置面积异常', '补偿金额异常'],
+ textStyle: {
+ color: '#C0CFDC',
+ fontSize: 12
+ },
+ icon: 'circle',
+ itemWidth: 8,
+ itemHeight: 8,
+ top: 0,
+ right: 0
+ },
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#1B374A'
+ }
+ },
+ axisTick: {
show: false
},
- data: [
- { value: 34.5, name: '商业用房' },
- { value: 30, name: '住宅' },
- { value: 35.5, name: '其他' }
- ],
- itemStyle: {
- color: function(params) {
- const colorList = ['#00ffff', '#7cb9e8', 'rgba(0,255,255,0.5)'];
- return colorList[params.dataIndex];
- }
+ axisLabel: {
+ color: '#C0CFDC',
+ fontSize: 12
}
- }]
+ },
+ yAxis: {
+ type: 'value',
+ name: '单位：次',
+ nameTextStyle: {
+ color: '#C0CFDC',
+ fontSize: 12,
+ padding: [0, 0, 0, 30]
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#1B374A',
+ type: 'dashed'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#C0CFDC',
+ fontSize: 12
+ }
+ },
+ series: [
+ {
+ name: '安置面积异常',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ areaStyle: {
+ opacity: 0.8,
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(255, 187, 0, 0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(255, 187, 0, 0)'
+ }]
+ }
+ },
+ lineStyle: {
+ width: 2,
+ color: '#FFBB00'
+ },
+ data: [150, 180, 230, 280, 260, 100]
+ },
+ {
+ name: '补偿金额异常',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ areaStyle: {
+ opacity: 0.8,
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(0, 255, 255, 0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0, 255, 255, 0)'
+ }]
+ }
+ },
+ lineStyle: {
+ width: 2,
+ color: '#00FFFF'
+ },
+ data: [200, 250, 380, 450, 380, 300]
+ }
+ ]
}
};
+ },
+ mounted() {
+ // 使用 setTimeout 确保 DOM 已经渲染
+ setTimeout(() => {
+ this.animateProgressBars();
+ }, 100);
+ },
+ methods: {
+ animateProgressBars() {
+ this.rankingList = this.rankingList.map((item, index) => ({
+ ...item,
+ percentage: this.finalPercentages[index]
+ }));
+ }
}
};
</script>
@@ -82,24 +247,53 @@
left: 20px;
width: 440px;
bottom: 20px;
+
.statistics-box {
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;
+ text-align: center;
+ line-height: 38px;
+ font-size: 15px;
+ background: url('@/assets/left/top-number-header.png') no-repeat center center;
+ background-size: 100% 100%;
+ }
+ .box-content-item-value {
+ width: 178px;
+ height: 64px;
+ text-align: center;
+ line-height: 64px;
+ font-weight: bold;
+ font-size: 31px;
+ margin-top: 8px;
+ color: #66FFFF;
+ background: url('@/assets/left/top-number-box.png') no-repeat center center;
+ background-size: 100% 100%;
+ }
+ }
}
+
.ranking-box {
height: 466px;
margin-top: 21px;
background: url('@/assets/left-middle-bg.png') no-repeat center center;
background-size: 100% 100%;
}
+
.line-chart {
height: 244px;
margin-top: 21px;
background: url('@/assets/left-bottom-bg.png') no-repeat center center;
background-size: 100% 100%;
}
-
.box-title {
font-size: 14px;
@@ -109,43 +303,144 @@
line-height: 21px;
}
+ .ranking-list {
+ margin-top: 30px;
+ }
.ranking-item {
- display: flex;
- align-items: center;
+ padding: 7px 20px;
- .rank {
- width: 20px;
- color: #00ffff;
- }
+ .ranking-item-content {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 6.5px;
- .name {
- width: 80px;
- }
+ .rank {
+ font-weight: bold;
+ font-size: 18px;
+ width: 22px;
+ 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%);
+ }
+ }
- .progress-bar {
- flex: 1;
- height: 6px;
- background: rgba(0,255,255,0.1);
- border-radius: 3px;
+ .name {
+ flex: 1;
+ color: #C0CFDC;
+ margin: 0 4px;
+ font-size: 15px;
+ }
- .progress {
- height: 100%;
- background: linear-gradient(to right, #00ffff, #7cb9e8);
- border-radius: 3px;
+ .value {
+ color: #fff;
+ font-size: 15px;
+ display: flex;
+ align-items: center;
+ .value-text {
+ color: #C0CFDC;
+ font-size: 12px;
+ width: 130px;
+ .value-text-value {
+ margin-left: 12px;
+ &.positive {
+ color: #FEDB65;
+ }
+ &.negative {
+ color: #66FFFF;
+ }
+ }
+ }
}
}
- .value {
- width: 60px;
- text-align: right;
- color: #00ffff;
+ .progress-bar {
+ height: 6px;
+ background: rgba(0, 255, 255, 0.1);
+ border-radius: 3px;
+ overflow: visible;
+
+ .progress {
+ height: 100%;
+ border-radius: 3px;
+ width: 0;
+ transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+
+ .progress-icon {
+ position: absolute;
+ right: -8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 22px;
+ height: 22px;
+ background-size: contain;
+ 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');
+ }
+ }
+ }
}
+ }
+
+ .chart-container {
+ height: calc(100% - 35px);
+ padding: 10px;
}
.chart {
width: 100%;
- height: calc(100% - 35px);
+ height: 100%;
}
}
-</style>
\ No newline at end of file
+</style>
\ No newline at end of file
--
Gitblit v1.7.1