From 20cdb83586daabfb15fc056c4c97eb8e7ccaf928 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期五, 20 三月 2026 17:07:16 +0800
Subject: [PATCH] 2026.3.20
---
src/components/monitor/DistrictRanking.vue | 67 +++++++++++++++++++--------------
1 files changed, 38 insertions(+), 29 deletions(-)
diff --git a/src/components/monitor/DistrictRanking.vue b/src/components/monitor/DistrictRanking.vue
index f471c32..ea1c4e2 100644
--- a/src/components/monitor/DistrictRanking.vue
+++ b/src/components/monitor/DistrictRanking.vue
@@ -24,25 +24,31 @@
</el-radio-group>
</el-col>
</el-row>
- <div ref="rankingChart" class="chart-container"></div>
- <el-table :data="sortedRankingData" style="width: 100%" stripe class="ranking-table">
- <el-table-column label="鎺掑悕" type="index" width="80" />
- <el-table-column prop="name" label="鍖哄幙鍚嶇О" />
- <el-table-column prop="value" label="娴撳害鍧囧�� (mg/m鲁)" />
- <el-table-column label="鎺掑悕鍙樺寲" width="120">
- <template #default="scope">
- <div v-if="scope.row.rankChange > 0" class="rank-up">
- <el-icon><ArrowUp /></el-icon> {{ scope.row.rankChange }}
- </div>
- <div v-else-if="scope.row.rankChange < 0" class="rank-down">
- <el-icon><ArrowDown /></el-icon> {{ Math.abs(scope.row.rankChange) }}
- </div>
- <div v-else class="rank-no-change">
- <el-icon><Minus /></el-icon> 0
- </div>
- </template>
- </el-table-column>
- </el-table>
+ <el-row :gutter="20">
+ <el-col :span="10">
+ <div ref="rankingChart" class="chart-container"></div>
+ </el-col>
+ <el-col :span="14">
+ <el-table :data="sortedRankingData" size="small" stripe class="ranking-table">
+ <el-table-column label="鎺掑悕" type="index" width="80" />
+ <el-table-column prop="name" label="鍖哄幙鍚嶇О" />
+ <el-table-column prop="value" label="娴撳害鍧囧�� (mg/m鲁)" />
+ <el-table-column label="鎺掑悕鍙樺寲" width="120">
+ <template #default="scope">
+ <div v-if="scope.row.rankChange > 0" class="rank-up">
+ <el-icon><ArrowUp /></el-icon> {{ scope.row.rankChange }}
+ </div>
+ <div v-else-if="scope.row.rankChange < 0" class="rank-down">
+ <el-icon><ArrowDown /></el-icon> {{ Math.abs(scope.row.rankChange) }}
+ </div>
+ <div v-else class="rank-no-change">
+ <el-icon><Minus /></el-icon> 0
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-col>
+ </el-row>
</el-card>
</template>
@@ -112,26 +118,29 @@
},
},
grid: {
- left: '3%',
+ left: '0%',
right: '4%',
- bottom: '3%',
+ bottom: '6%',
+ top: '4%',
containLabel: true,
},
xAxis: {
- type: 'category',
- data: this.sortedRankingData.map((item) => item.name),
+ type: 'value',
+ nameLocation: 'middle',
+ nameGap: 30,
+ name: this.rankingType === 'hourly' ? '灏忔椂鍧囧�� (mg/m鲁)' : '鏈堝潎鍊� (mg/m鲁)',
},
yAxis: {
- type: 'value',
- name: this.rankingType === 'hourly' ? '灏忔椂鍧囧�� (mg/m鲁)' : '鏈堝潎鍊� (mg/m鲁)',
+ type: 'category',
+ data: this.sortedRankingData.map((item) => item.name).reverse(),
},
series: [
{
name: '娴撳害鍧囧��',
type: 'bar',
- data: this.sortedRankingData.map((item) => parseFloat(item.value)),
+ data: this.sortedRankingData.map((item) => parseFloat(item.value)).reverse(),
itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' },
@@ -153,7 +162,7 @@
}
</script>
-<style scoped>
+<style scoped lang="scss">
.section {
margin-bottom: 20px;
}
@@ -165,7 +174,7 @@
}
.chart-container {
- height: 300px;
+ height: 400px;
width: 100%;
}
--
Gitblit v1.9.3