生产成品核算页面接口对接

zhangwencui

昨天 beecb6a56aee1460095d4f9a949eff165238e535

生产成品核算页面接口对接

 src/api/costAccounting/productionCost.js

@@ -33,4 +33,13 @@
    method: 'get',
    params
  });
}

// 产品物料Top10
export function getProductionCostTopProducts(params) {
  return request({
    url: '/cost/productionCost/top/product',
    method: 'get',
    params
  });
}

 src/views/costAccounting/productionCostAccounting/index.vue

@@ -196,7 +196,7 @@
              <span class="card-title">产品物料Top10</span>
            </div>
          </template>
          <div ref="topOrdersChartRef"
          <div ref="topProductChartRef"
               class="chart-container"
               style="height: 300px;"></div>
        </el-card>
@@ -209,6 +209,9 @@
              <span class="card-title">生产订单Top10</span>
            </div>
          </template>
          <div ref="topOrdersChartRef"
               class="chart-container"
               style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
@@ -289,6 +292,7 @@
    getProductionCostAggregateByProduct,
    getProductionCostAggregateByOrder,
    getProductionCostTopOrders,
    getProductionCostTopProducts,
  } from "@/api/costAccounting/productionCost.js";

  const statisticsType = ref("day");
@@ -614,6 +618,9 @@
  // 图表相关
  const topOrdersChartRef = ref(null);
  let topOrdersChartInstance = null;
  const topProductChartRef = ref(null);
  let topProductChartInstance = null;
  const topProductData = ref([]);

  const detailVisible = ref(false);
  const detailRow = ref(null);
@@ -635,6 +642,16 @@
      if (topOrdersChartRef.value) {
        topOrdersChartInstance = echarts.init(topOrdersChartRef.value);
        updateTopOrdersChart();
      }
    });
  };

  // 初始化产品物料Top10图表
  const initTopProductChart = () => {
    nextTick(() => {
      if (topProductChartRef.value) {
        topProductChartInstance = echarts.init(topProductChartRef.value);
        updateTopProductChart();
      }
    });
  };
@@ -661,7 +678,7 @@
      grid: {
        left: "3%",
        right: "4%",
        bottom: "15%",
        bottom: "5%",
        top: "3%",
        containLabel: true,
      },
@@ -702,9 +719,73 @@
    topOrdersChartInstance.setOption(option);
  };

  // 更新产品物料Top10图表
  const updateTopProductChart = () => {
    if (!topProductChartInstance) return;

    const data = topProductData.value;
    const xAxisData = data.map(item => item.name);
    const seriesData = data.map(item => item.totalCost);

    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        backgroundColor: "rgba(255, 255, 255, 0.95)",
        borderColor: "#409EFF",
        borderWidth: 1,
        textStyle: { color: "#303133" },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "5%",
        top: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        axisLabel: {
          color: "#606266",
          rotate: 45,
        },
        axisLine: { lineStyle: { color: "#ebeef5" } },
        splitLine: { show: false },
      },
      yAxis: {
        type: "value",
        name: "成本(元)",
        nameTextStyle: { color: "#606266" },
        axisLabel: { color: "#606266" },
        axisLine: { show: false },
        splitLine: { lineStyle: { color: "#f0f2f5" } },
      },
      series: [
        {
          name: "成本",
          type: "bar",
          data: seriesData,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#16a34a" },
              { offset: 1, color: "#4ade80" },
            ]),
          },
          barWidth: "60%",
        },
      ],
    };

    topProductChartInstance.setOption(option);
  };

  // 窗口大小变化时重新渲染图表
  const handleResize = () => {
    topOrdersChartInstance && topOrdersChartInstance.resize();
    topProductChartInstance && topProductChartInstance.resize();
  };

  const handleTypeChange = () => {
@@ -790,6 +871,21 @@
        console.error("获取生产订单Top10数据失败：", err);
        ElMessage.error("系统异常，获取生产订单Top10数据失败");
      });

    // 调用API获取产品物料Top10数据
    getProductionCostTopProducts(apiParams)
      .then(res => {
        if (res.code === 200) {
          topProductData.value = res.data || [];
          updateTopProductChart();
        } else {
          ElMessage.error(res.message || "获取产品物料Top10数据失败");
        }
      })
      .catch(err => {
        console.error("获取产品物料Top10数据失败：", err);
        ElMessage.error("系统异常，获取产品物料Top10数据失败");
      });
  };

  const handleReset = () => {
@@ -813,6 +909,7 @@
    loadOrders();
    handleQuery();
    initTopOrdersChart();
    initTopProductChart();
    window.addEventListener("resize", handleResize);
  });