固费消纳量API接入，更新图表数据处理

yyb

3 天以前 b5b1383e459be437f5038e02fbbd0aefce4f986e

固费消纳量API接入，更新图表数据处理

 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 }（value、rate å¤šä¸ºå­—符串）
 */
export function getSolidWasteTypeDistribution(params) {
  return request({
    url: '/home/solidWaste/typeDistribution',
    method: 'get',
    params,
  })
}

 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 = () => {
    // å»¶è¿Ÿæ‰§è¡Œï¼Œç¡®ä¿DOM更新完成
    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();
  });