From b5b1383e459be437f5038e02fbbd0aefce4f986e Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期四, 02 四月 2026 10:17:06 +0800
Subject: [PATCH] 固费消纳量API接入，更新图表数据处理
---
src/api/solidWaste/index.js | 52 ++++++++++
src/views/reportAnalysis/solidWasteConsumption/index1.vue | 202 +++++++++++++++++++++------------------
2 files changed, 160 insertions(+), 94 deletions(-)
diff --git a/src/api/solidWaste/index.js b/src/api/solidWaste/index.js
new file mode 100644
index 0000000..166ec25
--- /dev/null
+++ b/src/api/solidWaste/index.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+/**
+ * 鍥哄簾娑堢撼瓒嬪娍 / 娑堢撼閲忔槑缁嗭紙鍚屼竴浠芥椂搴忔暟鎹級
+ * GET /home/solidWaste/trends
+ *
+ * @param {Object} params
+ * @param {string} params.dateType '1' 鏈� / '2' 骞�
+ *
+ * data[]: dateStr, total, flyAsh, gypsum, lime
+ */
+export function getSolidWasteTrends(params) {
+ return request({
+ url: '/home/solidWaste/trends',
+ method: 'get',
+ params,
+ })
+}
+
+/**
+ * 鏍稿績鎸囨爣锛氬悎璁￠噺銆佺疮璁℃秷绾抽噺锛堣嚜 2022 骞磋捣锛�
+ * GET /home/solidWaste/coreIndicators
+ *
+ * @param {Object} params
+ * @param {string} params.dateType '1' 鏈� / '2' 骞�
+ *
+ * data: { totalAmount, cumulativeAmount }
+ */
+export function getSolidWasteCoreIndicators(params) {
+ return request({
+ url: '/home/solidWaste/coreIndicators',
+ method: 'get',
+ params,
+ })
+}
+
+/**
+ * 鍥哄簾绫诲瀷鍒嗗竷
+ * GET /home/solidWaste/typeDistribution
+ *
+ * @param {Object} params
+ * @param {string} params.dateType '1' 鏈� / '2' 骞�
+ *
+ * data[]: { name, value, rate }锛坴alue銆乺ate 澶氫负瀛楃涓诧級
+ */
+export function getSolidWasteTypeDistribution(params) {
+ return request({
+ url: '/home/solidWaste/typeDistribution',
+ method: 'get',
+ params,
+ })
+}
diff --git a/src/views/reportAnalysis/solidWasteConsumption/index1.vue b/src/views/reportAnalysis/solidWasteConsumption/index1.vue
index 6af1d80..63a7263 100644
--- a/src/views/reportAnalysis/solidWasteConsumption/index1.vue
+++ b/src/views/reportAnalysis/solidWasteConsumption/index1.vue
@@ -97,92 +97,63 @@
<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
+ import {
+ getSolidWasteTrends,
+ getSolidWasteCoreIndicators,
+ getSolidWasteTypeDistribution,
+ } from "@/api/solidWaste/index.js";
- // 绛涢�夋潯浠�
- const dateType = ref("month"); // month 鎴� year
+ // 绛涢�夋潯浠讹細鏈堝害 -> dateType 1锛屽勾搴� -> 2
+ const dateType = ref("month");
// 鍥捐〃寮曠敤
const trendChart = ref(null);
const distributionChart = ref(null);
- // 鍥捐〃瀹炰緥
let trendChartInstance = null;
let distributionChartInstance = null;
- // 妯℃嫙鏁版嵁
- const solidWasteData = ref({
- month: [
- { name: "1鏈�", 绮夌叅鐏�: 200, 鐭宠啅: 150, 鐭崇伆: 100 },
- { name: "2鏈�", 绮夌叅鐏�: 220, 鐭宠啅: 160, 鐭崇伆: 110 },
- { name: "3鏈�", 绮夌叅鐏�: 190, 鐭宠啅: 140, 鐭崇伆: 95 },
- { name: "4鏈�", 绮夌叅鐏�: 230, 鐭宠啅: 170, 鐭崇伆: 115 },
- { name: "5鏈�", 绮夌叅鐏�: 240, 鐭宠啅: 180, 鐭崇伆: 120 },
- { name: "6鏈�", 绮夌叅鐏�: 225, 鐭宠啅: 165, 鐭崇伆: 112 },
- ],
- year: [
- { name: "2022", 绮夌叅鐏�: 2300, 鐭宠啅: 1700, 鐭崇伆: 1100 },
- { name: "2023", 绮夌叅鐏�: 2500, 鐭宠啅: 1800, 鐭崇伆: 1200 },
- { name: "2024", 绮夌叅鐏�: 2700, 鐭宠啅: 1950, 鐭崇伆: 1300 },
- { name: "2025", 绮夌叅鐏�: 2900, 鐭宠啅: 2100, 鐭崇伆: 1400 },
- ],
- });
+ /** @type {import('vue').Ref<Array<{ dateStr: string, total?: number, flyAsh: number, gypsum: number, lime: number }>>} */
+ const trendsList = ref([]);
- // 璁＄畻灞炴��
- const totalSolidWaste = computed(() => {
- const data = solidWasteData.value[dateType.value];
- if (dateType.value === "month") {
- return data.reduce(
- (sum, item) => sum + item.绮夌叅鐏� + item.鐭宠啅 + item.鐭崇伆,
- 0
- );
- } else {
- const lastItem = data[data.length - 1];
- return lastItem.绮夌叅鐏� + lastItem.鐭宠啅 + lastItem.鐭崇伆;
- }
- });
+ /** 鍥哄簾绫诲瀷鍒嗗竷 /home/solidWaste/typeDistribution */
+ const typeDistributionList = ref([]);
- const totalSolidWasteSince2022 = computed(() => {
- const data = solidWasteData.value.year;
- return data.reduce(
- (sum, item) => sum + item.绮夌叅鐏� + item.鐭宠啅 + item.鐭崇伆,
- 0
- );
- });
+ /** 鏍稿績鎸囨爣 /home/solidWaste/coreIndicators */
+ const totalSolidWaste = ref(0);
+ const totalSolidWasteSince2022 = ref(0);
const wasteTableData = computed(() => {
- const data = solidWasteData.value[dateType.value];
+ const list = trendsList.value || [];
const result = [];
-
- data.forEach(item => {
+ list.forEach(row => {
result.push({
- time: item.name,
+ time: row.dateStr,
type: "绮夌叅鐏�",
- quantity: item.绮夌叅鐏�,
+ quantity: Number(row.flyAsh) || 0,
unit: "鍚�",
source: "鐢熶骇杩囩▼",
});
result.push({
- time: item.name,
+ time: row.dateStr,
type: "鐭宠啅",
- quantity: item.鐭宠啅,
+ quantity: Number(row.gypsum) || 0,
unit: "鍚�",
source: "鐢熶骇杩囩▼",
});
result.push({
- time: item.name,
+ time: row.dateStr,
type: "鐭崇伆",
- quantity: item.鐭崇伆,
+ quantity: Number(row.lime) || 0,
unit: "鍚�",
source: "鐢熶骇杩囩▼",
});
});
-
return result;
});
- // 鍥捐〃閰嶇疆
const trendChartOption = computed(() => {
- const data = solidWasteData.value[dateType.value];
+ const list = trendsList.value || [];
return {
tooltip: {
trigger: "axis",
@@ -204,7 +175,7 @@
},
xAxis: {
type: "category",
- data: data.map(item => item.name),
+ data: list.map(item => item.dateStr),
axisLabel: {
color: "#333",
},
@@ -220,7 +191,7 @@
{
name: "绮夌叅鐏�",
type: "bar",
- data: data.map(item => item.绮夌叅鐏�),
+ data: list.map(item => Number(item.flyAsh) || 0),
itemStyle: {
color: "#909399",
},
@@ -228,7 +199,7 @@
{
name: "鐭宠啅",
type: "bar",
- data: data.map(item => item.鐭宠啅),
+ data: list.map(item => Number(item.gypsum) || 0),
itemStyle: {
color: "#E6A23C",
},
@@ -236,7 +207,7 @@
{
name: "鐭崇伆",
type: "bar",
- data: data.map(item => item.鐭崇伆),
+ data: list.map(item => Number(item.lime) || 0),
itemStyle: {
color: "#F56C6C",
},
@@ -245,18 +216,34 @@
};
});
+ const typePieColor = name => {
+ const map = { 绮夌叅鐏�: "#909399", 鐭宠啅: "#E6A23C", 鐭崇伆: "#F56C6C" };
+ return map[name] || "#909399";
+ };
+
const distributionChartOption = computed(() => {
- const data = solidWasteData.value[dateType.value];
- const lastItem = data[data.length - 1];
+ const list = typeDistributionList.value || [];
+ const pieData = list.map(item => ({
+ name: item.name,
+ value: parseFloat(String(item.value ?? 0)) || 0,
+ rate: item.rate,
+ }));
return {
tooltip: {
trigger: "item",
- formatter: "{a} <br/>{b}: {c} ({d}%)",
+ formatter: params => {
+ const rate =
+ params.data?.rate != null && params.data.rate !== ""
+ ? `${params.data.rate}%`
+ : `${params.percent}%`;
+ return `${params.seriesName}<br/>${params.marker}${params.name}: ${params.value} 鍚� (${rate})`;
+ },
},
legend: {
orient: "vertical",
left: "left",
+ data: pieData.map(d => d.name),
textStyle: {
color: "#333",
},
@@ -267,11 +254,7 @@
type: "pie",
radius: "60%",
center: ["50%", "50%"],
- data: [
- { value: lastItem.绮夌叅鐏�, name: "绮夌叅鐏�" },
- { value: lastItem.鐭宠啅, name: "鐭宠啅" },
- { value: lastItem.鐭崇伆, name: "鐭崇伆" },
- ],
+ data: pieData,
emphasis: {
itemStyle: {
shadowBlur: 10,
@@ -280,60 +263,96 @@
},
},
itemStyle: {
- color: function (params) {
- const colors = ["#909399", "#E6A23C", "#F56C6C"];
- return colors[params.dataIndex];
- },
+ color: params => typePieColor(params.name),
},
},
],
};
});
- // 浜嬩欢澶勭悊
- const handleDateTypeChange = () => {
+ const mapDateTypeParam = () => (dateType.value === "year" ? "2" : "1");
+
+ const loadCoreIndicators = async () => {
+ try {
+ const res = await getSolidWasteCoreIndicators({
+ dateType: mapDateTypeParam(),
+ });
+ const d = res.data && typeof res.data === "object" ? res.data : {};
+ totalSolidWaste.value = Number(d.totalAmount) || 0;
+ totalSolidWasteSince2022.value = Number(d.cumulativeAmount) || 0;
+ } catch (e) {
+ console.error(e);
+ totalSolidWaste.value = 0;
+ totalSolidWasteSince2022.value = 0;
+ }
+ };
+
+ const loadTrends = async () => {
+ try {
+ const res = await getSolidWasteTrends({ dateType: mapDateTypeParam() });
+ trendsList.value = Array.isArray(res.data) ? res.data : [];
+ } catch (e) {
+ console.error(e);
+ trendsList.value = [];
+ }
+ };
+
+ const loadTypeDistribution = async () => {
+ try {
+ const res = await getSolidWasteTypeDistribution({
+ dateType: mapDateTypeParam(),
+ });
+ typeDistributionList.value = Array.isArray(res.data) ? res.data : [];
+ } catch (e) {
+ console.error(e);
+ typeDistributionList.value = [];
+ }
+ };
+
+ const refreshDashboard = async () => {
+ await Promise.all([
+ loadTrends(),
+ loadCoreIndicators(),
+ loadTypeDistribution(),
+ ]);
+ await nextTick();
updateCharts();
};
- // 鍒濆鍖栧浘琛�
- const initCharts = () => {
- if (trendChart.value) {
- trendChartInstance = echarts.init(trendChart.value);
- trendChartInstance.setOption(trendChartOption.value);
- }
-
- if (distributionChart.value) {
- distributionChartInstance = echarts.init(distributionChart.value);
- distributionChartInstance.setOption(distributionChartOption.value);
- }
+ const handleDateTypeChange = () => {
+ refreshDashboard();
};
- // 鏇存柊鍥捐〃
+ const initCharts = () => {
+ if (trendChart.value && !trendChartInstance) {
+ trendChartInstance = echarts.init(trendChart.value);
+ }
+ if (distributionChart.value && !distributionChartInstance) {
+ distributionChartInstance = echarts.init(distributionChart.value);
+ }
+ updateCharts();
+ };
+
const updateCharts = () => {
if (trendChartInstance) {
trendChartInstance.setOption(trendChartOption.value);
}
-
if (distributionChartInstance) {
distributionChartInstance.setOption(distributionChartOption.value);
}
};
- // 璋冩暣鍥捐〃澶у皬
const resizeCharts = () => {
trendChartInstance?.resize();
distributionChartInstance?.resize();
};
- // 绐楀彛澶у皬鍙樺寲澶勭悊
const handleResize = () => {
- // 寤惰繜鎵ц锛岀‘淇滵OM鏇存柊瀹屾垚
setTimeout(() => {
resizeCharts();
}, 100);
};
- // 鑾峰彇鍥哄簾绫诲瀷鏍囩绫诲瀷
const getWasteTypeType = type => {
const typeMap = {
绮夌叅鐏�: "info",
@@ -343,21 +362,16 @@
return typeMap[type] || "info";
};
- // 鐢熷懡鍛ㄦ湡閽╁瓙
- onMounted(() => {
- // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖�
+ onMounted(async () => {
+ await refreshDashboard();
nextTick(() => {
- // 鍒濆鍖栧浘琛�
initCharts();
});
-
window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", handleResize);
-
- // 閿�姣佸浘琛ㄥ疄渚�
trendChartInstance?.dispose();
distributionChartInstance?.dispose();
});
--
Gitblit v1.9.3