From a1ec81c3b932a6758617c585a8397ced799936ff Mon Sep 17 00:00:00 2001
From: yuan <123@>
Date: 星期二, 16 六月 2026 10:58:29 +0800
Subject: [PATCH] feat: 优化能耗数据展示界面，调整布局和样式
---
src/views/energyManagement/energyStatistics/index.vue | 47 ++++++++++++++++++++++++++++++++++-------------
1 files changed, 34 insertions(+), 13 deletions(-)
diff --git a/src/views/energyManagement/energyStatistics/index.vue b/src/views/energyManagement/energyStatistics/index.vue
index 15889b5..4a63035 100644
--- a/src/views/energyManagement/energyStatistics/index.vue
+++ b/src/views/energyManagement/energyStatistics/index.vue
@@ -13,25 +13,25 @@
<el-col :span="6">
<div class="metric-box highlight">
<div class="metric-label">鎬荤敤鐢甸噺</div>
- <div class="metric-value">{{ yesterdaySummary.totalConsumption ?? 0 }} <span>kWh</span></div>
+ <div class="metric-value">{{ formatKwh(yesterdaySummary.totalConsumption) }} <span>kWh</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="metric-box">
<div class="metric-label">骞冲潎鐢ㄧ數閲�</div>
- <div class="metric-value">{{ yesterdaySummary.avgConsumption ?? 0 }} <span>kWh</span></div>
+ <div class="metric-value">{{ formatKwh(yesterdaySummary.avgConsumption) }} <span>kWh</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="metric-box">
<div class="metric-label">鏈�澶х敤鐢甸噺</div>
- <div class="metric-value">{{ yesterdaySummary.maxConsumption ?? 0 }} <span>kWh</span></div>
+ <div class="metric-value">{{ formatKwh(yesterdaySummary.maxConsumption) }} <span>kWh</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="metric-box">
<div class="metric-label">鏈�灏忕敤鐢甸噺</div>
- <div class="metric-value">{{ yesterdaySummary.minConsumption ?? 0 }} <span>kWh</span></div>
+ <div class="metric-value">{{ formatKwh(yesterdaySummary.minConsumption) }} <span>kWh</span></div>
</div>
</el-col>
</el-row>
@@ -96,25 +96,25 @@
<el-col :span="6">
<div class="summary-card total">
<div class="label">鎬荤敤鐢甸噺</div>
- <div class="value">{{ summary.totalConsumption ?? 0 }} <span>kWh</span></div>
+ <div class="value">{{ formatKwh(summary.totalConsumption) }} <span>kWh</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="summary-card">
<div class="label">骞冲潎鐢ㄧ數閲�</div>
- <div class="value">{{ summary.avgConsumption ?? 0 }} <span>kWh</span></div>
+ <div class="value">{{ formatKwh(summary.avgConsumption) }} <span>kWh</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="summary-card">
<div class="label">鏈�澶х敤鐢甸噺</div>
- <div class="value">{{ summary.maxConsumption ?? 0 }} <span>kWh</span></div>
+ <div class="value">{{ formatKwh(summary.maxConsumption) }} <span>kWh</span></div>
</div>
</el-col>
<el-col :span="6">
<div class="summary-card">
<div class="label">鏈�灏忕敤鐢甸噺</div>
- <div class="value">{{ summary.minConsumption ?? 0 }} <span>kWh</span></div>
+ <div class="value">{{ formatKwh(summary.minConsumption) }} <span>kWh</span></div>
</div>
</el-col>
</el-row>
@@ -138,10 +138,21 @@
<el-table-column prop="meterId" label="鐢佃〃ID" width="100" />
<el-table-column prop="address" label="琛ㄥ湴鍧�" min-width="120" show-overflow-tooltip />
<el-table-column prop="collectorNo" label="閲囬泦鍣ㄥ彿" min-width="120" show-overflow-tooltip />
- <el-table-column prop="totalConsumption" label="鎬荤數閲�(kWh)" width="120" />
- <el-table-column prop="peakConsumption" label="宄�(kWh)" width="100" />
- <el-table-column prop="flatConsumption" label="骞�(kWh)" width="100" />
- <el-table-column prop="valleyConsumption" label="璋�(kWh)" width="100" />
+ <el-table-column prop="totalConsumption" label="鎬荤數閲�(kWh)" width="120">
+ <template #default="{ row }">{{ formatKwh(row.totalConsumption) }}</template>
+ </el-table-column>
+ <el-table-column prop="sharpConsumption" label="灏�(kWh)" width="100">
+ <template #default="{ row }">{{ formatKwh(row.sharpConsumption) }}</template>
+ </el-table-column>
+ <el-table-column prop="peakConsumption" label="宄�(kWh)" width="100">
+ <template #default="{ row }">{{ formatKwh(row.peakConsumption) }}</template>
+ </el-table-column>
+ <el-table-column prop="flatConsumption" label="骞�(kWh)" width="100">
+ <template #default="{ row }">{{ formatKwh(row.flatConsumption) }}</template>
+ </el-table-column>
+ <el-table-column prop="valleyConsumption" label="璋�(kWh)" width="100">
+ <template #default="{ row }">{{ formatKwh(row.valleyConsumption) }}</template>
+ </el-table-column>
<el-table-column prop="startTime" label="寮�濮嬫椂闂�" min-width="150" />
<el-table-column prop="endTime" label="缁撴潫鏃堕棿" min-width="150" />
</el-table>
@@ -183,6 +194,14 @@
const yearRange = ref([]);
const yesterdayLabel = computed(() => getYesterdayDayPicker());
+
+function formatKwh(value, digits = 2) {
+ const n = Number(value);
+ if (!Number.isFinite(n)) {
+ return (0).toFixed(digits);
+ }
+ return n.toFixed(digits);
+}
function initDefaultRange() {
const yesterday = getYesterdayDayPicker();
@@ -255,7 +274,9 @@
const labels = chartRecords.value.map((item) =>
parseTimeKey(item.timeKey, queryForm.dimension)
);
- const values = chartRecords.value.map((item) => item.totalConsumption || 0);
+ const values = chartRecords.value.map((item) =>
+ Number(formatKwh(item.totalConsumption))
+ );
chartInstance.setOption({
tooltip: { trigger: "axis" },
grid: { left: 50, right: 20, top: 30, bottom: 50 },
--
Gitblit v1.9.3