From eae12ffeaa667f271a2c548b5e16557cac3686e3 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 18 三月 2026 20:35:46 +0800
Subject: [PATCH] 能耗成本核算图表相关优化
---
src/views/costAccounting/energyCosts/index.vue | 102 +++++++++++++++++++++++++++++++-------------------
1 files changed, 63 insertions(+), 39 deletions(-)
diff --git a/src/views/costAccounting/energyCosts/index.vue b/src/views/costAccounting/energyCosts/index.vue
index f292d5b..89e1a2a 100644
--- a/src/views/costAccounting/energyCosts/index.vue
+++ b/src/views/costAccounting/energyCosts/index.vue
@@ -474,14 +474,14 @@
<button
class="chart-tool"
type="button"
- @click="downloadChart('consumption', '鑳借�楃敤閲忓姣�')"
+ @click="downloadChart('unit', '鑳借�楃敤閲忓姣�')"
>
涓嬭浇
</button>
<button
class="chart-tool"
type="button"
- @click="openBigChart('consumption', '鑳借�楃敤閲忓姣�')"
+ @click="openBigChart('unit', '鑳借�楃敤閲忓姣�')"
>
澶у浘
</button>
@@ -489,13 +489,13 @@
</div>
</template>
<div
- ref="consumptionChartWrap"
+ ref="unitChartWrap"
class="chart-wrap"
v-loading="tableLoading"
>
<div
- ref="consumptionChart"
- class="chart-content"
+ ref="unitChart"
+ class="chart-content"
v-show="hasTableData"
></div>
<div class="chart-empty" v-show="!hasTableData">
@@ -605,10 +605,10 @@
</el-table-column>
<el-table-column prop="dosage" label="鐢ㄩ噺" align="right">
<template #default="scope">
- <span class="consumption-value">{{
+ <span class="unit-value">{{
formatNumber(scope.row.dosage, 2)
}}</span>
- <span class="consumption-unit">{{ scope.row.unit }}</span>
+ <span class="unit-unit">{{ scope.row.unit }}</span>
</template>
</el-table-column>
<el-table-column
@@ -875,13 +875,13 @@
if (key === "cost") return costChartInstance;
if (key === "type") return typeChartInstance;
if (key === "purpose") return purposeChartInstance;
- if (key === "consumption") return consumptionChartInstance;
+ if (key === "unit") return unitChartInstance;
return null;
};
const ensurePanelForChart = (key) => {
if (key === "cost" || key === "type") chartPanel.value = "core";
- if (key === "purpose" || key === "consumption") chartPanel.value = "advanced";
+ if (key === "purpose" || key === "unit") chartPanel.value = "advanced";
};
const downloadChart = (key, title) => {
@@ -967,7 +967,7 @@
const prop = sortState.prop;
const direction = sortState.order === "ascending" ? 1 : -1;
- const numFields = new Set(["price", "cost", "consumption"]);
+ const numFields = new Set(["price", "cost", "unit"]);
return data.sort((a, b) => {
const av = a?.[prop];
@@ -1011,12 +1011,12 @@
const costChart = ref(null);
const typeChart = ref(null);
const purposeChart = ref(null);
-const consumptionChart = ref(null);
+const unitChart = ref(null);
const costChartWrap = ref(null);
const typeChartWrap = ref(null);
const purposeChartWrap = ref(null);
-const consumptionChartWrap = ref(null);
+const unitChartWrap = ref(null);
const tableAnchor = ref(null);
@@ -1044,28 +1044,32 @@
let costChartInstance = null;
let typeChartInstance = null;
let purposeChartInstance = null;
-let consumptionChartInstance = null;
+let unitChartInstance = null;
// 鍥捐〃鍖哄垏鎹細core | advanced | none锛堢偣鍑诲綋鍓嶉�変腑鍙敹璧凤級
const chartPanel = ref("core");
const ensureChartsReady = (panel) => {
if (panel === "core") {
- if (costChart.value && !costChartInstance)
+ if (costChart.value && !costChartInstance) {
costChartInstance = echarts.init(costChart.value);
- if (typeChart.value && !typeChartInstance)
+ setTimeout(() => costChartInstance?.resize(), 50);
+ }
+ if (typeChart.value && !typeChartInstance) {
typeChartInstance = echarts.init(typeChart.value);
- if (costChartInstance) updateCostChart();
- if (typeChartInstance) updateTypeChart();
+ setTimeout(() => typeChartInstance?.resize(), 50);
+ }
return;
}
if (panel === "advanced") {
- if (purposeChart.value && !purposeChartInstance)
+ if (purposeChart.value && !purposeChartInstance) {
purposeChartInstance = echarts.init(purposeChart.value);
- if (consumptionChart.value && !consumptionChartInstance)
- consumptionChartInstance = echarts.init(consumptionChart.value);
- if (purposeChartInstance) updatePurposeChart();
- if (consumptionChartInstance) updateConsumptionChart();
+ setTimeout(() => purposeChartInstance?.resize(), 50);
+ }
+ if (unitChart.value && !unitChartInstance) {
+ unitChartInstance = echarts.init(unitChart.value);
+ setTimeout(() => unitChartInstance?.resize(), 50);
+ }
}
};
@@ -1089,6 +1093,16 @@
watch(chartPanel, (val) => {
if (val !== "none") resizeChartsAfterExpand();
});
+
+// 鐩戝惉琛ㄦ牸鏁版嵁鍙樺寲锛岀‘淇濇暟鎹姞杞藉悗鍥捐〃姝ｇ‘娓叉煋
+watch(tableData, () => {
+ nextTick(() => {
+ updateCharts();
+ nextTick(() => {
+ handleResize();
+ });
+ });
+}, { deep: true });
// 鑾峰彇鑳借�楃被鍨嬫爣绛剧被鍨�
const getEnergyTypeType = (type) => {
@@ -1199,10 +1213,10 @@
const typeCosts = {};
data.forEach((item) => {
- if (!typeCosts[item.energyType]) {
- typeCosts[item.energyType] = 0;
+ if (!typeCosts[item.energyTyep]) {
+ typeCosts[item.energyTyep] = 0;
}
- typeCosts[item.energyType] += parseFloat(item.cost);
+ typeCosts[item.energyTyep] += parseFloat(item.cost);
});
const chartData = Object.entries(typeCosts).map(([name, value]) => ({
@@ -1334,28 +1348,28 @@
// 鏇存柊鑳借�楃敤閲忓姣斿浘
const updateConsumptionChart = () => {
const data = tableData.value;
- const consumptionData = {};
+ const unitData = {};
data.forEach((item) => {
- if (!consumptionData[item.energyType]) {
- consumptionData[item.energyType] = {
+ if (!unitData[item.energyTyep]) {
+ unitData[item.energyTyep] = {
鐢熶骇: 0,
鍔炲叕: 0,
};
}
- if (consumptionData[item.energyType].hasOwnProperty(item.type)) {
- consumptionData[item.energyType][item.type] = parseFloat(
- item.consumption
+ if (unitData[item.energyTyep].hasOwnProperty(item.type)) {
+ unitData[item.energyTyep][item.type] += parseFloat(
+ item.dosage || 0
);
}
});
- const energyTypes = Object.keys(consumptionData);
+ const energyTypes = Object.keys(unitData);
const productionConsumptions = energyTypes.map(
- (type) => consumptionData[type].鐢熶骇
+ (type) => unitData[type].鐢熶骇
);
const officeConsumptions = energyTypes.map(
- (type) => consumptionData[type].鍔炲叕
+ (type) => unitData[type].鍔炲叕
);
const option = {
@@ -1424,7 +1438,7 @@
},
],
};
- consumptionChartInstance.setOption(option);
+ unitChartInstance.setOption(option);
};
// 缁熻缁村害鍒囨崲
@@ -1453,6 +1467,7 @@
// 鏌ヨ
const handleQuery = () => {
+
queryPulse.value = true;
window.setTimeout(() => {
queryPulse.value = false;
@@ -1551,10 +1566,19 @@
// 鏇存柊鎵�鏈夊浘琛�
const updateCharts = () => {
nextTick(() => {
+ // 纭繚 core 闈㈡澘鐨勫浘琛ㄥ缁堝垵濮嬪寲锛堝洜涓洪粯璁ゆ樉绀虹殑鏄� core锛�
+ ensureChartsReady("core");
+
+ // 鍚屾椂涔熷垵濮嬪寲褰撳墠鍙闈㈡澘鐨勫浘琛�
+ if (chartPanel.value === "advanced") {
+ ensureChartsReady("advanced");
+ }
+
+ // 鏇存柊鎵�鏈夊凡鍒濆鍖栫殑鍥捐〃
if (costChartInstance) updateCostChart();
if (typeChartInstance) updateTypeChart();
if (purposeChartInstance) updatePurposeChart();
- if (consumptionChartInstance) updateConsumptionChart();
+ if (unitChartInstance) updateConsumptionChart();
});
};
@@ -1606,7 +1630,7 @@
costChartInstance && costChartInstance.resize();
typeChartInstance && typeChartInstance.resize();
purposeChartInstance && purposeChartInstance.resize();
- consumptionChartInstance && consumptionChartInstance.resize();
+ unitChartInstance && unitChartInstance.resize();
};
onMounted(() => {
@@ -2613,12 +2637,12 @@
width: 100%;
}
-.consumption-value {
+.unit-value {
font-weight: bold;
color: var(--lux-primary);
}
-.consumption-unit {
+.unit-unit {
font-size: 12px;
color: var(--lux-muted);
margin-left: 2px;
--
Gitblit v1.9.3