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 | 548 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 381 insertions(+), 167 deletions(-)
diff --git a/src/views/reportAnalysis/unitEnergyConsumption/index.vue b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
index 9399bf6..d7a1867 100644
--- a/src/views/reportAnalysis/unitEnergyConsumption/index.vue
+++ b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
@@ -4,22 +4,19 @@
<div class="search_form">
<el-form :model="searchForm"
:inline="true">
- <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 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-form-item label="鑳借�楃被鍨�:">
<el-select v-model="searchForm.energyType"
placeholder="鍏ㄩ儴"
clearable
- style="width: 140px;"
+ style="width: 120px;"
@change="handleQuery">
<el-option label="鍏ㄩ儴"
value="鍏ㄩ儴" />
@@ -29,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>
@@ -63,54 +90,47 @@
</el-icon>
鑳借�楀崟鑰楁暟鎹�
</h2>
- <el-table :data="tableData"
+ <el-table :data="tableValue"
v-loading="tableLoading"
border>
- <el-table-column prop="energyType"
- label="鑳借��"
- width="100"
+ <el-table-column prop="meterReadingDate"
+ label="鏃ユ湡"
+ align="center" />
+ <!-- <el-table-column prop="type"
+ label="绫诲瀷"
+ align="center"
+ width="100">
+ <template #default="scope">
+ <el-tag :type="scope.row.type === '鐢熶骇' ? 'primary' : 'success'">
+ {{ scope.row.type }}
+ </el-tag>
+ </template>
+ </el-table-column> -->
+ <el-table-column prop="energyTyep"
+ label="鑳借�楃被鍨�"
align="center">
<template #default="scope">
- <el-tag :type="getEnergyTypeType(scope.row.energyType)">
- {{ scope.row.energyType }}
+ <el-tag :type="getEnergyTypeType(scope.row.type)">
+ {{ scope.row.type }}
</el-tag>
</template>
</el-table-column>
- <el-table-column prop="unit"
- label="鍗曚綅"
- width="120"
- align="center" />
- <el-table-column label="鏈堝害鏁版嵁">
- <el-table-column prop="monthlyUnitConsumption"
- label="鏈堝害绱鍗曡��"
- align="right">
- <template #default="scope">
- <span class="data-value">{{ scope.row.monthlyUnitConsumption }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="monthlyConsumption"
- label="鏈堝害绱鐢ㄩ噺/鏈堝害绱浜ч噺"
- align="right">
- <template #default="scope">
- <span class="data-value">{{ scope.row.monthlyConsumption }}/{{ scope.row.monthlyProduction }}</span>
- </template>
- </el-table-column>
+ <el-table-column prop="consumption"
+ label="鐢ㄩ噺"
+ align="right" />
+ <el-table-column prop="cost"
+ label="鎴愭湰"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">楼{{ scope.row.cost }}</span>
+ </template>
</el-table-column>
- <el-table-column label="骞村害鏁版嵁">
- <el-table-column prop="annualUnitConsumption"
- label="骞村害绱鍗曡��"
- align="right">
- <template #default="scope">
- <span class="data-value">{{ scope.row.annualUnitConsumption }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="annualConsumption"
- label="骞村害绱鐢ㄩ噺/骞村害绱浜ч噺"
- align="right">
- <template #default="scope">
- <span class="data-value">{{ scope.row.annualConsumption }}/{{ scope.row.annualProduction }}</span>
- </template>
- </el-table-column>
+ <el-table-column prop="unitConsumption"
+ label="鍗曡��"
+ align="right">
+ <template #default="scope">
+ <span class="data-value">{{ scope.row.unitConsumption }}</span>
+ </template>
</el-table-column>
</el-table>
</div>
@@ -122,19 +142,58 @@
import { ElMessage } from "element-plus";
import { TrendCharts, List } from "@element-plus/icons-vue";
import * as echarts from "echarts";
+ import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";
+
+ // 缁熻缁村害
+ const statisticsType = ref("day");
// 鎼滅储琛ㄥ崟
const searchForm = reactive({
- year: new Date().getFullYear(),
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([]);
@@ -167,49 +226,110 @@
// 鏇存柊鍥捐〃
const updateChart = () => {
const data = tableData.value;
- const months = [
- "1鏈�",
- "2鏈�",
- "3鏈�",
- "4鏈�",
- "5鏈�",
- "6鏈�",
- "7鏈�",
- "8鏈�",
- "9鏈�",
- "10鏈�",
- "11鏈�",
- "12鏈�",
- ];
+ let xAxisData = [];
- // 鍑嗗鍥捐〃鏁版嵁
- const series = [];
- const energyTypes = ["姘�", "鐢�", "钂告苯"];
+ // 鏍规嵁缁熻缁村害鍑嗗鏁版嵁
+ if (statisticsType.value === "year") {
+ // 骞村害妯″紡锛�12涓湀
+ xAxisData = [
+ "1鏈�",
+ "2鏈�",
+ "3鏈�",
+ "4鏈�",
+ "5鏈�",
+ "6鏈�",
+ "7鏈�",
+ "8鏈�",
+ "9鏈�",
+ "10鏈�",
+ "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("-");
- energyTypes.forEach(type => {
- const typeData = data.find(item => item.energyType === type);
- if (typeData && typeData.monthlyData) {
- series.push({
- name: type,
- type: "line",
- data: typeData.monthlyData.map(item => item.unitConsumption),
- smooth: true,
- symbol: "circle",
- symbolSize: 8,
- lineStyle: {
- width: 3,
- },
- itemStyle: {
- color:
- getEnergyTypeType(type) === "primary"
- ? "#409EFF"
- : getEnergyTypeType(type) === "warning"
- ? "#E6A23C"
- : "#67C23A",
- },
- });
+ 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 {
+ // 鎸夋棩缁熻锛氭牴鎹�夋嫨鐨勬棩鏈熻寖鍥�
+ 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")}`
+ );
+ }
+ }
+ }
+
+ // 鎻愬彇鎵�鏈夊敮涓�鐨刴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: {
@@ -220,7 +340,7 @@
textStyle: { color: "#303133" },
},
legend: {
- data: energyTypes,
+ data: ["鍗曡��"],
top: 0,
right: 10,
textStyle: { color: "#606266" },
@@ -234,8 +354,11 @@
},
xAxis: {
type: "category",
- data: months,
- axisLabel: { color: "#606266" },
+ data: xAxisData,
+ axisLabel: {
+ color: "#606266",
+ rotate: statisticsType.value === "month" ? 45 : 0,
+ },
axisLine: { lineStyle: { color: "#ebeef5" } },
splitLine: { show: false },
},
@@ -247,28 +370,152 @@
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 = () => {
tableLoading.value = true;
- // 妯℃嫙鎺ュ彛璋冪敤
- setTimeout(() => {
- generateMockData();
- tableLoading.value = false;
- updateChart();
- }, 500);
+ const params = {
+ type: "",
+ state:
+ statisticsType.value === "year"
+ ? "骞�"
+ : statisticsType.value === "month"
+ ? "鏈�"
+ : "鏃�",
+ };
+
+ if (searchForm.energyType && searchForm.energyType !== "鍏ㄩ儴") {
+ params.type = searchForm.energyType;
+ }
+
+ if (statisticsType.value === "year") {
+ params.startDate = searchForm.year + "-01-01";
+ params.endDate = searchForm.year + "-12-31";
+ // 璁＄畻澶╂暟
+ 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)
+ .then(res => {
+ 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 || "鑾峰彇鏁版嵁澶辫触");
+ tableData.value = [];
+ }
+ })
+ .catch(err => {
+ console.error("鑾峰彇鏁版嵁寮傚父锛�", err);
+ ElMessage.error("绯荤粺寮傚父锛岃幏鍙栨暟鎹け璐�");
+ tableData.value = [];
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
};
// 閲嶇疆
const handleReset = () => {
- searchForm.year = new Date().getFullYear();
+ // 閲嶇疆鎼滅储琛ㄥ崟
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();
};
@@ -277,71 +524,38 @@
ElMessage.success("鎶ヨ〃瀵煎嚭鎴愬姛");
};
- // 鐢熸垚鍋囨暟鎹�
- const generateMockData = () => {
- const energyTypes = [
- {
- energyType: "姘�",
- unit: "鍚�/绔嬫柟绫�",
- monthlyUnitConsumption: (Math.random() * 0.5 + 0.8).toFixed(4),
- monthlyConsumption: Math.floor(Math.random() * 5000 + 10000),
- monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
- annualUnitConsumption: (Math.random() * 0.3 + 0.9).toFixed(4),
- annualConsumption: Math.floor(Math.random() * 60000 + 120000),
- annualProduction: Math.floor(Math.random() * 120000 + 240000),
- monthlyData: generateMonthlyData(0.8, 1.3),
- },
- {
- energyType: "鐢�",
- unit: "搴�/绔嬫柟绫�",
- monthlyUnitConsumption: (Math.random() * 2 + 5).toFixed(4),
- monthlyConsumption: Math.floor(Math.random() * 50000 + 100000),
- monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
- annualUnitConsumption: (Math.random() * 1.5 + 5.5).toFixed(4),
- annualConsumption: Math.floor(Math.random() * 600000 + 1200000),
- annualProduction: Math.floor(Math.random() * 120000 + 240000),
- monthlyData: generateMonthlyData(5, 7),
- },
- {
- energyType: "钂告苯",
- unit: "鍚�/绔嬫柟绫�",
- monthlyUnitConsumption: (Math.random() * 0.3 + 0.5).toFixed(4),
- monthlyConsumption: Math.floor(Math.random() * 3000 + 6000),
- monthlyProduction: Math.floor(Math.random() * 10000 + 20000),
- annualUnitConsumption: (Math.random() * 0.2 + 0.55).toFixed(4),
- annualConsumption: Math.floor(Math.random() * 36000 + 72000),
- annualProduction: Math.floor(Math.random() * 120000 + 240000),
- monthlyData: generateMonthlyData(0.5, 0.8),
- },
- ];
-
- if (searchForm.energyType && searchForm.energyType !== "鍏ㄩ儴") {
- tableData.value = energyTypes.filter(
- item => item.energyType === searchForm.energyType
- );
- } else {
- tableData.value = energyTypes;
- }
- };
-
- // 鐢熸垚鏈堝害鏁版嵁
- const generateMonthlyData = (min, max) => {
- const data = [];
- for (let i = 1; i <= 12; i++) {
- data.push({
- month: i,
- unitConsumption: (Math.random() * (max - min) + min).toFixed(4),
- });
- }
- return data;
- };
-
// 绐楀彛澶у皬鍙樺寲鏃堕噸鏂版覆鏌撳浘琛�
const handleResize = () => {
consumptionChartInstance && consumptionChartInstance.resize();
};
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