From ccfbe532d740b2133d1f8d299cf560a2602393a4 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 25 三月 2026 17:40:14 +0800
Subject: [PATCH] 能耗单号页面修改
---
src/views/reportAnalysis/unitEnergyConsumption/index.vue | 105 ++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 85 insertions(+), 20 deletions(-)
diff --git a/src/views/reportAnalysis/unitEnergyConsumption/index.vue b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
index 9399bf6..6aa4912 100644
--- a/src/views/reportAnalysis/unitEnergyConsumption/index.vue
+++ b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
@@ -4,6 +4,17 @@
<div class="search_form">
<el-form :model="searchForm"
:inline="true">
+ <el-form-item label="鏃堕棿缁村害:">
+ <el-select v-model="searchForm.timeDimension"
+ placeholder="璇烽�夋嫨鏃堕棿缁村害"
+ style="width: 120px;"
+ @change="handleQuery">
+ <el-option label="骞村害"
+ value="year" />
+ <el-option label="鏈堝害"
+ value="month" />
+ </el-select>
+ </el-form-item>
<el-form-item label="骞翠唤:">
<el-select v-model="searchForm.year"
placeholder="璇烽�夋嫨骞翠唤"
@@ -13,6 +24,18 @@
:key="year"
:label="year + '骞�'"
:value="year" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏈堜唤:"
+ v-if="searchForm.timeDimension === 'month'">
+ <el-select v-model="searchForm.month"
+ placeholder="璇烽�夋嫨鏈堜唤"
+ style="width: 120px;"
+ @change="handleQuery">
+ <el-option v-for="month in 12"
+ :key="month"
+ :label="month + '鏈�'"
+ :value="month" />
</el-select>
</el-form-item>
<el-form-item label="鑳借�楃被鍨�:">
@@ -80,7 +103,8 @@
label="鍗曚綅"
width="120"
align="center" />
- <el-table-column label="鏈堝害鏁版嵁">
+ <el-table-column label="鏈堝害鏁版嵁"
+ v-if="searchForm.timeDimension === 'month'">
<el-table-column prop="monthlyUnitConsumption"
label="鏈堝害绱鍗曡��"
align="right">
@@ -96,7 +120,8 @@
</template>
</el-table-column>
</el-table-column>
- <el-table-column label="骞村害鏁版嵁">
+ <el-table-column label="骞村害鏁版嵁"
+ v-if="searchForm.timeDimension === 'year'">
<el-table-column prop="annualUnitConsumption"
label="骞村害绱鍗曡��"
align="right">
@@ -125,7 +150,9 @@
// 鎼滅储琛ㄥ崟
const searchForm = reactive({
+ timeDimension: "year",
year: new Date().getFullYear(),
+ month: new Date().getMonth() + 1,
energyType: "",
});
@@ -167,20 +194,35 @@
// 鏇存柊鍥捐〃
const updateChart = () => {
const data = tableData.value;
- const months = [
- "1鏈�",
- "2鏈�",
- "3鏈�",
- "4鏈�",
- "5鏈�",
- "6鏈�",
- "7鏈�",
- "8鏈�",
- "9鏈�",
- "10鏈�",
- "11鏈�",
- "12鏈�",
- ];
+ let xAxisData = [];
+ let seriesDataKey = "monthlyData";
+ let seriesDataMap = item => item.unitConsumption;
+
+ // 鏍规嵁鏃堕棿缁村害鍑嗗鏁版嵁
+ if (searchForm.timeDimension === "year") {
+ // 骞村害妯″紡锛�12涓湀
+ xAxisData = [
+ "1鏈�",
+ "2鏈�",
+ "3鏈�",
+ "4鏈�",
+ "5鏈�",
+ "6鏈�",
+ "7鏈�",
+ "8鏈�",
+ "9鏈�",
+ "10鏈�",
+ "11鏈�",
+ "12鏈�",
+ ];
+ } else {
+ // 鏈堝害妯″紡锛氳鏈堢殑姣忎竴澶�
+ const year = searchForm.year;
+ const month = searchForm.month;
+ const daysInMonth = new Date(year, month, 0).getDate();
+ xAxisData = Array.from({ length: daysInMonth }, (_, i) => `${i + 1}鏃);
+ seriesDataKey = "dailyData";
+ }
// 鍑嗗鍥捐〃鏁版嵁
const series = [];
@@ -188,11 +230,11 @@
energyTypes.forEach(type => {
const typeData = data.find(item => item.energyType === type);
- if (typeData && typeData.monthlyData) {
+ if (typeData && typeData[seriesDataKey]) {
series.push({
name: type,
type: "line",
- data: typeData.monthlyData.map(item => item.unitConsumption),
+ data: typeData[seriesDataKey].map(seriesDataMap),
smooth: true,
symbol: "circle",
symbolSize: 8,
@@ -234,8 +276,11 @@
},
xAxis: {
type: "category",
- data: months,
- axisLabel: { color: "#606266" },
+ data: xAxisData,
+ axisLabel: {
+ color: "#606266",
+ rotate: searchForm.timeDimension === "month" ? 45 : 0,
+ },
axisLine: { lineStyle: { color: "#ebeef5" } },
splitLine: { show: false },
},
@@ -267,7 +312,9 @@
// 閲嶇疆
const handleReset = () => {
+ searchForm.timeDimension = "year";
searchForm.year = new Date().getFullYear();
+ searchForm.month = new Date().getMonth() + 1;
searchForm.energyType = "";
handleQuery();
};
@@ -290,6 +337,7 @@
annualConsumption: Math.floor(Math.random() * 60000 + 120000),
annualProduction: Math.floor(Math.random() * 120000 + 240000),
monthlyData: generateMonthlyData(0.8, 1.3),
+ dailyData: generateDailyData(0.7, 1.4),
},
{
energyType: "鐢�",
@@ -301,6 +349,7 @@
annualConsumption: Math.floor(Math.random() * 600000 + 1200000),
annualProduction: Math.floor(Math.random() * 120000 + 240000),
monthlyData: generateMonthlyData(5, 7),
+ dailyData: generateDailyData(4.5, 7.5),
},
{
energyType: "钂告苯",
@@ -312,6 +361,7 @@
annualConsumption: Math.floor(Math.random() * 36000 + 72000),
annualProduction: Math.floor(Math.random() * 120000 + 240000),
monthlyData: generateMonthlyData(0.5, 0.8),
+ dailyData: generateDailyData(0.4, 0.9),
},
];
@@ -336,6 +386,21 @@
return data;
};
+ // 鐢熸垚姣忔棩鏁版嵁
+ const generateDailyData = (min, max) => {
+ const year = searchForm.year;
+ const month = searchForm.month;
+ const daysInMonth = new Date(year, month, 0).getDate();
+ const data = [];
+ for (let i = 1; i <= daysInMonth; i++) {
+ data.push({
+ day: i,
+ unitConsumption: (Math.random() * (max - min) + min).toFixed(4),
+ });
+ }
+ return data;
+ };
+
// 绐楀彛澶у皬鍙樺寲鏃堕噸鏂版覆鏌撳浘琛�
const handleResize = () => {
consumptionChartInstance && consumptionChartInstance.resize();
--
Gitblit v1.9.3