From bbfdcd61c8140bc54975b9d5568a39df538a0a2d Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 13 三月 2026 13:58:13 +0800
Subject: [PATCH] 字段展示修改
---
src/views/energyManagement/energyConsumptionStatistical/index.vue | 157 ++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 126 insertions(+), 31 deletions(-)
diff --git a/src/views/energyManagement/energyConsumptionStatistical/index.vue b/src/views/energyManagement/energyConsumptionStatistical/index.vue
index 9363511..8e540b8 100644
--- a/src/views/energyManagement/energyConsumptionStatistical/index.vue
+++ b/src/views/energyManagement/energyConsumptionStatistical/index.vue
@@ -180,9 +180,13 @@
label="搴忓彿"
width="60"
align="center" />
- <el-table-column prop="timePeriod"
- :label="timeColumnLabel"
- align="center" />
+ <el-table-column prop="meterReadingDate"
+ label="鏃ユ湡"
+ align="right">
+ <template #default="scope">
+ <span class="consumption-value">{{ scope.row.meterReadingDate }}</span>
+ </template>
+ </el-table-column>
<el-table-column prop="waterConsumption"
label="鐢ㄦ按閲�(鍚�)"
align="right">
@@ -190,11 +194,11 @@
<span class="consumption-value">{{ scope.row.waterConsumption }}</span>
</template>
</el-table-column>
- <el-table-column prop="waterAmount"
+ <el-table-column prop="waterCost"
label="姘磋垂(鍏�)"
align="right">
<template #default="scope">
- <span class="amount-value">{{ scope.row.waterAmount }}</span>
+ <span class="amount-value">{{ scope.row.waterCost }}</span>
</template>
</el-table-column>
<el-table-column prop="electricityConsumption"
@@ -204,11 +208,11 @@
<span class="consumption-value">{{ scope.row.electricityConsumption }}</span>
</template>
</el-table-column>
- <el-table-column prop="electricityAmount"
+ <el-table-column prop="electricityCost"
label="鐢佃垂(鍏�)"
align="right">
<template #default="scope">
- <span class="amount-value">{{ scope.row.electricityAmount }}</span>
+ <span class="amount-value">{{ scope.row.electricityCost }}</span>
</template>
</el-table-column>
<el-table-column prop="gasConsumption"
@@ -218,11 +222,11 @@
<span class="consumption-value">{{ scope.row.gasConsumption }}</span>
</template>
</el-table-column>
- <el-table-column prop="gasAmount"
+ <el-table-column prop="gasCost"
label="姘旇垂(鍏�)"
align="right">
<template #default="scope">
- <span class="amount-value">{{ scope.row.gasAmount }}</span>
+ <span class="amount-value">{{ scope.row.gasCost }}</span>
</template>
</el-table-column>
<el-table-column prop="totalConsumption"
@@ -237,7 +241,7 @@
align="right"
fixed="right">
<template #default="scope">
- <span class="total-amount-value">楼{{ scope.row.totalAmount }}</span>
+ <span class="total-amount-value">楼{{ scope.row.totalCost }}</span>
</template>
</el-table-column>
</el-table>
@@ -267,15 +271,28 @@
ArrowDown,
} from "@element-plus/icons-vue";
import * as echarts from "echarts";
+ import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";
// 缁熻缁村害锛歞ay-鎸夋棩锛宮onth-鎸夋湀锛寉ear-鎸夊勾
const statisticsType = ref("day");
// 鎼滅储琛ㄥ崟
const searchForm = reactive({
- energyType: "",
- dateRange: [],
- monthRange: [],
+ energyType: "鍏ㄩ儴",
+ dateRange: (() => {
+ // 榛樿鏈�杩�7澶�
+ const end = new Date();
+ const start = new Date();
+ start.setDate(start.getDate() - 6);
+ return [start.toISOString().split("T")[0], end.toISOString().split("T")[0]];
+ })(),
+ monthRange: (() => {
+ // 榛樿鏈�杩�3涓湀
+ const end = new Date();
+ const start = new Date();
+ start.setMonth(start.getMonth() - 2);
+ return [start.toISOString().slice(0, 7), end.toISOString().slice(0, 7)];
+ })(),
year: new Date().getFullYear(),
});
@@ -430,7 +447,7 @@
},
xAxis: {
type: "category",
- data: data.map(item => item.timePeriod),
+ data: data.map(item => item.meterReadingDate),
axisLabel: { rotate: statisticsType.value === "day" ? 45 : 0 },
},
yAxis: {
@@ -481,7 +498,7 @@
},
xAxis: {
type: "category",
- data: data.map(item => item.timePeriod),
+ data: data.map(item => item.meterReadingDate),
axisLabel: { rotate: statisticsType.value === "day" ? 45 : 0 },
},
yAxis: {
@@ -492,21 +509,21 @@
{
name: "姘磋垂",
type: "line",
- data: data.map(item => item.waterAmount),
+ data: data.map(item => item.waterCost),
smooth: true,
itemStyle: { color: "#409EFF" },
},
{
name: "鐢佃垂",
type: "line",
- data: data.map(item => item.electricityAmount),
+ data: data.map(item => item.electricityCost),
smooth: true,
itemStyle: { color: "#E6A23C" },
},
{
name: "姘旇垂",
type: "line",
- data: data.map(item => item.gasAmount),
+ data: data.map(item => item.gasCost),
smooth: true,
itemStyle: { color: "#67C23A" },
},
@@ -582,15 +599,15 @@
const updateAmountTypeChart = () => {
const data = tableData.value;
const totalWaterAmount = data.reduce(
- (sum, item) => sum + parseFloat(item.waterAmount),
+ (sum, item) => sum + parseFloat(item.waterCost),
0
);
const totalElectricityAmount = data.reduce(
- (sum, item) => sum + parseFloat(item.electricityAmount),
+ (sum, item) => sum + parseFloat(item.electricityCost),
0
);
const totalGasAmount = data.reduce(
- (sum, item) => sum + parseFloat(item.gasAmount),
+ (sum, item) => sum + parseFloat(item.gasCost),
0
);
@@ -651,13 +668,73 @@
// 鏌ヨ
const handleQuery = () => {
tableLoading.value = true;
- setTimeout(() => {
- const data = generateMockData();
- tableData.value = data;
- page.total = data.length;
- tableLoading.value = false;
- updateCharts();
- }, 300);
+ const params = {
+ type: "",
+ };
+
+ // 鏋勯�犺姹傚弬鏁�
+ if (searchForm.energyType != "鍏ㄩ儴") {
+ params.type = searchForm.energyType;
+ }
+
+ if (statisticsType.value === "day") {
+ if (searchForm.dateRange && searchForm.dateRange.length === 2) {
+ params.startDate = searchForm.dateRange[0];
+ params.endDate = searchForm.dateRange[1];
+ // 璁＄畻澶╂暟
+ const start = new Date(searchForm.dateRange[0]);
+ const end = new Date(searchForm.dateRange[1]);
+ params.days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
+ }
+ } else if (statisticsType.value === "month") {
+ if (searchForm.monthRange && searchForm.monthRange.length === 2) {
+ params.startDate = searchForm.monthRange[0] + "-01";
+ params.endDate = searchForm.monthRange[1] + "-01";
+ // 璁＄畻鏈堟暟
+ const start = new Date(searchForm.monthRange[0] + "-01");
+ const end = new Date(searchForm.monthRange[1] + "-01");
+ params.days =
+ (end.getFullYear() - start.getFullYear()) * 12 +
+ (end.getMonth() - start.getMonth()) +
+ 1;
+ }
+ } else if (statisticsType.value === "year") {
+ params.startDate = searchForm.year + "-01-01";
+ params.endDate = searchForm.year + "-12-31";
+ params.days = 365;
+ }
+
+ // 璋冪敤鎺ュ彛鑾峰彇鏁版嵁
+ energyConsumptionDetailStatistics(params)
+ .then(res => {
+ if (res.code === 200) {
+ const data = res.data;
+
+ // 鏇存柊缁熻姒傝鏁版嵁
+ overview.totalConsumption = data.totalEnergyConsumption || "0";
+ overview.totalAmount = data.totalEnergyCost || "0";
+ overview.avgConsumption = data.averageConsumption || "0";
+ overview.compareRate = data.changeVite || 0;
+
+ // 澶勭悊琛ㄦ牸鏁版嵁
+ tableData.value = data.energyCostDtos || [];
+ page.total = tableData.value.length || 0;
+ } else {
+ ElMessage.error(res.message || "鑾峰彇鏁版嵁澶辫触");
+ tableData.value = [];
+ page.total = 0;
+ }
+ })
+ .catch(err => {
+ console.error("鑾峰彇鏁版嵁寮傚父锛�", err);
+ ElMessage.error("绯荤粺寮傚父锛岃幏鍙栨暟鎹け璐�");
+ tableData.value = [];
+ page.total = 0;
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ updateCharts();
+ });
};
// 鏇存柊鎵�鏈夊浘琛�
@@ -672,10 +749,28 @@
// 閲嶇疆
const handleReset = () => {
- searchForm.energyType = "";
- searchForm.dateRange = [];
- searchForm.monthRange = [];
+ searchForm.energyType = "鍏ㄩ儴";
+ // 閲嶇疆涓洪粯璁ゆ椂闂磋寖鍥�
+ const end = new Date();
+ const start = new Date();
+
+ // 榛樿鏈�杩�7澶�
+ start.setDate(start.getDate() - 6);
+ searchForm.dateRange = [
+ start.toISOString().split("T")[0],
+ end.toISOString().split("T")[0],
+ ];
+
+ // 榛樿鏈�杩�3涓湀
+ start.setMonth(start.getMonth() - 2);
+ searchForm.monthRange = [
+ start.toISOString().slice(0, 7),
+ end.toISOString().slice(0, 7),
+ ];
+
+ // 榛樿褰撳墠骞翠唤
searchForm.year = new Date().getFullYear();
+
page.current = 1;
handleQuery();
};
--
Gitblit v1.9.3