From 4cea678dd431db704ed6c47f7c486281672fccb6 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 30 三月 2026 15:07:12 +0800
Subject: [PATCH] 销售统计看板
---
src/views/reportAnalysis/unitEnergyConsumption/index.vue | 269 +++++++++++++++++++++++++++++------------------------
1 files changed, 145 insertions(+), 124 deletions(-)
diff --git a/src/views/reportAnalysis/unitEnergyConsumption/index.vue b/src/views/reportAnalysis/unitEnergyConsumption/index.vue
index 9399bf6..81d6679 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="鑳借�楃被鍨�:">
@@ -66,51 +89,48 @@
<el-table :data="tableData"
v-loading="tableLoading"
border>
- <el-table-column prop="energyType"
- label="鑳借��"
- width="100"
- align="center">
+ <el-table-column prop="meterReadingDate"
+ label="鏃ユ湡"
+ align="center"
+ width="120" />
+ <el-table-column prop="type"
+ label="绫诲瀷"
+ align="center"
+ width="100">
<template #default="scope">
- <el-tag :type="getEnergyTypeType(scope.row.energyType)">
- {{ scope.row.energyType }}
+ <el-tag :type="scope.row.type === '鐢熶骇' ? 'primary' : 'success'">
+ {{ 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="energyTyep"
+ label="鑳借�楃被鍨�"
+ align="center"
+ width="100">
+ <template #default="scope">
+ <el-tag :type="getEnergyTypeType(scope.row.energyTyep)">
+ {{ scope.row.energyTyep }}
+ </el-tag>
+ </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="consumption"
+ label="鐢ㄩ噺"
+ align="right"
+ width="120" />
+ <el-table-column prop="cost"
+ label="鎴愭湰"
+ align="right"
+ width="120">
+ <template #default="scope">
+ <span class="data-value">楼{{ scope.row.cost }}</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,10 +142,13 @@
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 searchForm = reactive({
+ timeDimension: "year",
year: new Date().getFullYear(),
+ month: new Date().getMonth() + 1,
energyType: "",
});
@@ -167,32 +190,47 @@
// 鏇存柊鍥捐〃
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 = [];
const energyTypes = ["姘�", "鐢�", "钂告苯"];
energyTypes.forEach(type => {
- const typeData = data.find(item => item.energyType === type);
- if (typeData && typeData.monthlyData) {
+ const typeData = data.find(item => item.energyTyep === type);
+ if (typeData) {
series.push({
name: type,
type: "line",
- data: typeData.monthlyData.map(item => item.unitConsumption),
+ data: typeData.cost,
smooth: true,
symbol: "circle",
symbolSize: 8,
@@ -234,8 +272,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 },
},
@@ -257,17 +298,56 @@
const handleQuery = () => {
tableLoading.value = true;
- // 妯℃嫙鎺ュ彛璋冪敤
- setTimeout(() => {
- generateMockData();
- tableLoading.value = false;
- updateChart();
- }, 500);
+ const params = {
+ type: "",
+ state: searchForm.timeDimension === "year" ? "骞�" : "鏈�",
+ };
+
+ if (searchForm.energyType && searchForm.energyType !== "鍏ㄩ儴") {
+ params.type = searchForm.energyType;
+ }
+
+ if (searchForm.timeDimension === "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;
+ }
+
+ energyConsumptionDetailStatistics(params)
+ .then(res => {
+ if (res.code === 200) {
+ const data = res.data;
+ tableData.value = data.energyCostDtos || [];
+ updateChart();
+ } else {
+ ElMessage.error(res.message || "鑾峰彇鏁版嵁澶辫触");
+ tableData.value = [];
+ }
+ })
+ .catch(err => {
+ console.error("鑾峰彇鏁版嵁寮傚父锛�", err);
+ ElMessage.error("绯荤粺寮傚父锛岃幏鍙栨暟鎹け璐�");
+ tableData.value = [];
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
};
// 閲嶇疆
const handleReset = () => {
+ searchForm.timeDimension = "year";
searchForm.year = new Date().getFullYear();
+ searchForm.month = new Date().getMonth() + 1;
searchForm.energyType = "";
handleQuery();
};
@@ -275,65 +355,6 @@
// 瀵煎嚭
const handleExport = () => {
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;
};
// 绐楀彛澶у皬鍙樺寲鏃堕噸鏂版覆鏌撳浘琛�
--
Gitblit v1.9.3