From 278151dbbe700c6fcbe918fd9014752cf6a480c0 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 30 三月 2026 15:55:29 +0800
Subject: [PATCH] 单耗对接
---
src/views/reportAnalysis/unitEnergyConsumption/index.vue | 413 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 303 insertions(+), 110 deletions(-)
diff --git a/src/views/reportAnalysis/unitEnergyConsumption/index.vue b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
index 81d6679..d7a1867 100644
--- a/src/views/reportAnalysis/unitEnergyConsumption/index.vue
+++ b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
@@ -4,45 +4,19 @@
<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 label="缁熻缁村害:">
+ <el-radio-group v-model="statisticsType"
+ @change="handleTypeChange">
+ <el-radio-button label="day">鎸夋棩缁熻</el-radio-button>
+ <el-radio-button label="month">鎸夋湀缁熻</el-radio-button>
+ <el-radio-button label="year">鎸夊勾缁熻</el-radio-button>
+ </el-radio-group>
</el-form-item>
- <el-form-item label="骞翠唤:">
- <el-select v-model="searchForm.year"
- placeholder="璇烽�夋嫨骞翠唤"
- style="width: 120px;"
- @change="handleQuery">
- <el-option v-for="year in years"
- :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="鑳借�楃被鍨�:">
+ <!-- <el-form-item label="鑳借�楃被鍨�:">
<el-select v-model="searchForm.energyType"
placeholder="鍏ㄩ儴"
clearable
- style="width: 140px;"
+ style="width: 120px;"
@change="handleQuery">
<el-option label="鍏ㄩ儴"
value="鍏ㄩ儴" />
@@ -52,6 +26,36 @@
value="鐢�" />
<el-option label="钂告苯"
value="钂告苯" />
+ </el-select>
+ </el-form-item> -->
+ <el-form-item label="鏃堕棿鑼冨洿:">
+ <el-date-picker v-if="statisticsType === 'day'"
+ v-model="searchForm.dateRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ value-format="YYYY-MM-DD"
+ style="width: 240px;"
+ @change="handleQuery" />
+ <el-date-picker v-else-if="statisticsType === 'month'"
+ v-model="searchForm.monthRange"
+ type="monthrange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫湀浠�"
+ end-placeholder="缁撴潫鏈堜唤"
+ value-format="YYYY-MM"
+ style="width: 240px;"
+ @change="handleQuery" />
+ <el-select v-else
+ v-model="searchForm.year"
+ placeholder="閫夋嫨骞翠唤"
+ style="width: 140px;"
+ @change="handleQuery">
+ <el-option v-for="year in yearOptions"
+ :key="year"
+ :label="year + '骞�'"
+ :value="year" />
</el-select>
</el-form-item>
<el-form-item>
@@ -86,14 +90,13 @@
</el-icon>
鑳借�楀崟鑰楁暟鎹�
</h2>
- <el-table :data="tableData"
+ <el-table :data="tableValue"
v-loading="tableLoading"
border>
<el-table-column prop="meterReadingDate"
label="鏃ユ湡"
- align="center"
- width="120" />
- <el-table-column prop="type"
+ align="center" />
+ <!-- <el-table-column prop="type"
label="绫诲瀷"
align="center"
width="100">
@@ -102,25 +105,22 @@
{{ scope.row.type }}
</el-tag>
</template>
- </el-table-column>
+ </el-table-column> -->
<el-table-column prop="energyTyep"
label="鑳借�楃被鍨�"
- align="center"
- width="100">
+ align="center">
<template #default="scope">
- <el-tag :type="getEnergyTypeType(scope.row.energyTyep)">
- {{ scope.row.energyTyep }}
+ <el-tag :type="getEnergyTypeType(scope.row.type)">
+ {{ scope.row.type }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="consumption"
label="鐢ㄩ噺"
- align="right"
- width="120" />
+ align="right" />
<el-table-column prop="cost"
label="鎴愭湰"
- align="right"
- width="120">
+ align="right">
<template #default="scope">
<span class="data-value">楼{{ scope.row.cost }}</span>
</template>
@@ -144,20 +144,56 @@
import * as echarts from "echarts";
import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";
+ // 缁熻缁村害
+ const statisticsType = ref("day");
+
// 鎼滅储琛ㄥ崟
const searchForm = reactive({
- timeDimension: "year",
- year: new Date().getFullYear(),
- month: new Date().getMonth() + 1,
energyType: "",
+ dateRange: null,
+ monthRange: null,
+ year: new Date().getFullYear(),
});
- // 鐢熸垚骞翠唤閫夐」
- const years = [];
+ // 鐢熸垚骞翠唤閫夐」锛堟渶杩�7骞达級
+ const yearOptions = [];
const currentYear = new Date().getFullYear();
- for (let i = currentYear - 5; i <= currentYear; i++) {
- years.push(i);
+ for (let i = currentYear - 6; i <= currentYear; i++) {
+ yearOptions.push(i);
}
+
+ // 澶勭悊缁熻缁村害鍙樺寲
+ const handleTypeChange = () => {
+ // 閲嶇疆鏃堕棿閫夋嫨
+ if (statisticsType.value === "day") {
+ // 璁剧疆榛樿鏃ユ湡鑼冨洿涓烘渶杩�30澶�
+ const end = new Date();
+ const start = new Date();
+ start.setDate(start.getDate() - 29);
+ searchForm.dateRange = [
+ `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}-${String(start.getDate()).padStart(2, "0")}`,
+ `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}-${String(end.getDate()).padStart(2, "0")}`,
+ ];
+ } else if (statisticsType.value === "month") {
+ // 璁剧疆榛樿鏈堜唤鑼冨洿涓烘渶杩�6涓湀
+ const end = new Date();
+ const start = new Date();
+ start.setMonth(start.getMonth() - 5);
+ searchForm.monthRange = [
+ `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}`,
+ `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}`,
+ ];
+ } else {
+ searchForm.year = currentYear;
+ }
+ handleQuery();
+ };
// 琛ㄦ牸鏁版嵁
const tableData = ref([]);
@@ -191,11 +227,9 @@
const updateChart = () => {
const data = tableData.value;
let xAxisData = [];
- let seriesDataKey = "monthlyData";
- let seriesDataMap = item => item.unitConsumption;
- // 鏍规嵁鏃堕棿缁村害鍑嗗鏁版嵁
- if (searchForm.timeDimension === "year") {
+ // 鏍规嵁缁熻缁村害鍑嗗鏁版嵁
+ if (statisticsType.value === "year") {
// 骞村害妯″紡锛�12涓湀
xAxisData = [
"1鏈�",
@@ -211,43 +245,91 @@
"11鏈�",
"12鏈�",
];
+ } else if (statisticsType.value === "month") {
+ // 鏈堝害妯″紡锛氭牴鎹�夋嫨鐨勬湀浠借寖鍥�
+ if (searchForm.monthRange && searchForm.monthRange.length === 2) {
+ const startMonth = searchForm.monthRange[0];
+ const endMonth = searchForm.monthRange[1];
+ const [startYear, startMonthNum] = startMonth.split("-");
+ const [endYear, endMonthNum] = endMonth.split("-");
+
+ xAxisData = [];
+ let currentYear = parseInt(startYear);
+ let currentMonth = parseInt(startMonthNum);
+ const endYearInt = parseInt(endYear);
+ const endMonthInt = parseInt(endMonthNum);
+
+ while (
+ currentYear < endYearInt ||
+ (currentYear === endYearInt && currentMonth <= endMonthInt)
+ ) {
+ xAxisData.push(
+ `${currentYear}-${String(currentMonth).padStart(2, "0")}`
+ );
+ currentMonth++;
+ if (currentMonth > 12) {
+ currentMonth = 1;
+ currentYear++;
+ }
+ }
+ } else {
+ // 榛樿鏄剧ず鏈�杩�6涓湀
+ xAxisData = [];
+ const end = new Date();
+ for (let i = 5; i >= 0; i--) {
+ const date = new Date();
+ date.setMonth(date.getMonth() - i);
+ xAxisData.push(
+ `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}`
+ );
+ }
+ }
} 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";
+ // 鎸夋棩缁熻锛氭牴鎹�夋嫨鐨勬棩鏈熻寖鍥�
+ if (searchForm.dateRange && searchForm.dateRange.length === 2) {
+ const startDate = searchForm.dateRange[0];
+ const endDate = searchForm.dateRange[1];
+
+ xAxisData = [];
+ let currentDate = new Date(startDate);
+ const end = new Date(endDate);
+
+ while (currentDate <= end) {
+ xAxisData.push(
+ `${currentDate.getFullYear()}-${String(
+ currentDate.getMonth() + 1
+ ).padStart(2, "0")}-${String(currentDate.getDate()).padStart(2, "0")}`
+ );
+ currentDate.setDate(currentDate.getDate() + 1);
+ }
+ } else {
+ // 榛樿鏄剧ず鏈�杩�30澶�
+ xAxisData = [];
+ const end = new Date();
+ for (let i = 29; i >= 0; i--) {
+ const date = new Date();
+ date.setDate(date.getDate() - i);
+ xAxisData.push(
+ `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}-${String(date.getDate()).padStart(2, "0")}`
+ );
+ }
+ }
}
- // 鍑嗗鍥捐〃鏁版嵁
- const series = [];
- const energyTypes = ["姘�", "鐢�", "钂告苯"];
-
- energyTypes.forEach(type => {
- const typeData = data.find(item => item.energyTyep === type);
- if (typeData) {
- series.push({
- name: type,
- type: "line",
- data: typeData.cost,
- smooth: true,
- symbol: "circle",
- symbolSize: 8,
- lineStyle: {
- width: 3,
- },
- itemStyle: {
- color:
- getEnergyTypeType(type) === "primary"
- ? "#409EFF"
- : getEnergyTypeType(type) === "warning"
- ? "#E6A23C"
- : "#67C23A",
- },
- });
+ // 鎻愬彇鎵�鏈夊敮涓�鐨刴eterReadingDate骞舵帓搴�
+ const allDates = [...new Set(data.map(item => item.meterReadingDate))].sort(
+ (a, b) => {
+ return new Date(a) - new Date(b);
}
- });
+ );
+ // 浣跨敤瀹為檯鐨刴eterReadingDate浣滀负妯酱鏁版嵁
+ xAxisData = allDates;
const option = {
tooltip: {
@@ -258,7 +340,7 @@
textStyle: { color: "#303133" },
},
legend: {
- data: energyTypes,
+ data: ["鍗曡��"],
top: 0,
right: 10,
textStyle: { color: "#606266" },
@@ -275,7 +357,7 @@
data: xAxisData,
axisLabel: {
color: "#606266",
- rotate: searchForm.timeDimension === "month" ? 45 : 0,
+ rotate: statisticsType.value === "month" ? 45 : 0,
},
axisLine: { lineStyle: { color: "#ebeef5" } },
splitLine: { show: false },
@@ -288,11 +370,25 @@
axisLine: { show: false },
splitLine: { lineStyle: { color: "#f0f2f5" } },
},
- series: series,
+ series: {
+ name: "鍗曡��",
+ type: "line",
+ data: data.map(item => item.totalCost),
+ smooth: true,
+ symbol: "circle",
+ symbolSize: 8,
+ lineStyle: {
+ width: 3,
+ },
+ itemStyle: {
+ color: "#409EFF",
+ },
+ },
};
consumptionChartInstance.setOption(option);
};
+ const tableValue = ref([]);
// 鏌ヨ
const handleQuery = () => {
@@ -300,26 +396,51 @@
const params = {
type: "",
- state: searchForm.timeDimension === "year" ? "骞�" : "鏈�",
+ state:
+ statisticsType.value === "year"
+ ? "骞�"
+ : statisticsType.value === "month"
+ ? "鏈�"
+ : "鏃�",
};
if (searchForm.energyType && searchForm.energyType !== "鍏ㄩ儴") {
params.type = searchForm.energyType;
}
- if (searchForm.timeDimension === "year") {
+ if (statisticsType.value === "year") {
params.startDate = searchForm.year + "-01-01";
params.endDate = searchForm.year + "-12-31";
- params.days = 365;
- } else if (searchForm.timeDimension === "month") {
- const year = searchForm.year;
- const month = searchForm.month;
- const lastDay = new Date(year, month, 0).getDate();
- params.startDate = `${year}-${String(month).padStart(2, "0")}-01`;
- params.endDate = `${year}-${String(month).padStart(2, "0")}-${String(
- lastDay
- ).padStart(2, "0")}`;
- params.days = lastDay;
+ // 璁＄畻澶╂暟
+ const start = new Date(params.startDate);
+ const end = new Date(params.endDate);
+ params.days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
+ } else if (statisticsType.value === "month" && searchForm.monthRange) {
+ const [startMonth, endMonth] = searchForm.monthRange;
+ const [startYearStr, startMonthStr] = startMonth.split("-");
+ const [endYearStr, endMonthStr] = endMonth.split("-");
+
+ params.startDate = `${startYearStr}-${startMonthStr}-01`;
+
+ const endYear = Number(endYearStr);
+ const endMonthNum = Number(endMonthStr);
+ const lastDay = new Date(endYear, endMonthNum, 0).getDate();
+ params.endDate = `${endYearStr}-${endMonthStr}-${String(lastDay).padStart(
+ 2,
+ "0"
+ )}`;
+
+ // 璁＄畻澶╂暟
+ const start = new Date(params.startDate);
+ const end = new Date(params.endDate);
+ params.days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
+ } else if (statisticsType.value === "day" && searchForm.dateRange) {
+ params.startDate = searchForm.dateRange[0];
+ params.endDate = searchForm.dateRange[1];
+ // 璁＄畻澶╂暟
+ const start = new Date(params.startDate);
+ const end = new Date(params.endDate);
+ params.days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
}
energyConsumptionDetailStatistics(params)
@@ -327,6 +448,27 @@
if (res.code === 200) {
const data = res.data;
tableData.value = data.energyCostDtos || [];
+ tableValue.value = [];
+ tableData.value.forEach(item => {
+ tableValue.value.push({
+ meterReadingDate: item.meterReadingDate,
+ consumption: item.waterConsumption,
+ cost: item.waterCost,
+ type: "姘�",
+ });
+ tableValue.value.push({
+ consumption: item.electricityConsumption,
+ cost: item.electricityCost,
+ meterReadingDate: item.meterReadingDate,
+ type: "鐢�",
+ });
+ tableValue.value.push({
+ consumption: item.gasConsumption,
+ cost: item.gasCost,
+ meterReadingDate: item.meterReadingDate,
+ type: "钂告苯",
+ });
+ });
updateChart();
} else {
ElMessage.error(res.message || "鑾峰彇鏁版嵁澶辫触");
@@ -345,10 +487,35 @@
// 閲嶇疆
const handleReset = () => {
- searchForm.timeDimension = "year";
- searchForm.year = new Date().getFullYear();
- searchForm.month = new Date().getMonth() + 1;
+ // 閲嶇疆鎼滅储琛ㄥ崟
searchForm.energyType = "";
+ if (statisticsType.value === "day") {
+ // 璁剧疆榛樿鏃ユ湡鑼冨洿涓烘渶杩�30澶�
+ const end = new Date();
+ const start = new Date();
+ start.setDate(start.getDate() - 29);
+ searchForm.dateRange = [
+ `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}-${String(start.getDate()).padStart(2, "0")}`,
+ `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}-${String(end.getDate()).padStart(2, "0")}`,
+ ];
+ } else if (statisticsType.value === "month") {
+ // 璁剧疆榛樿鏈堜唤鑼冨洿涓烘渶杩�6涓湀
+ const end = new Date();
+ const start = new Date();
+ start.setMonth(start.getMonth() - 5);
+ searchForm.monthRange = [
+ `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}`,
+ `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}`,
+ ];
+ } else {
+ searchForm.year = new Date().getFullYear();
+ }
handleQuery();
};
@@ -363,6 +530,32 @@
};
onMounted(() => {
+ // 鍒濆鍖栨椂闂磋寖鍥�
+ if (statisticsType.value === "day") {
+ // 璁剧疆榛樿鏃ユ湡鑼冨洿涓烘渶杩�30澶�
+ const end = new Date();
+ const start = new Date();
+ start.setDate(start.getDate() - 29);
+ searchForm.dateRange = [
+ `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}-${String(start.getDate()).padStart(2, "0")}`,
+ `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(
+ 2,
+ "0"
+ )}-${String(end.getDate()).padStart(2, "0")}`,
+ ];
+ } else if (statisticsType.value === "month") {
+ // 璁剧疆榛樿鏈堜唤鑼冨洿涓烘渶杩�6涓湀
+ const end = new Date();
+ const start = new Date();
+ start.setMonth(start.getMonth() - 5);
+ searchForm.monthRange = [
+ `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}`,
+ `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}`,
+ ];
+ }
handleQuery();
initChart();
window.addEventListener("resize", handleResize);
--
Gitblit v1.9.3