首页图表财务展示更换成销售图表

yyb

9 小时以前 0a5698223416aca7b107de18b3a687461a13e1a8

首页图表财务展示更换成销售图表

 src/views/index.vue

@@ -265,17 +265,38 @@
                 :yAxis="yAxis1"
                 style="height: 260px"></Echarts>
      </div>
      <div class="main-panel">
        <div class="section-title">回款与开票分析</div>
        <Echarts ref="invoiceChart"
                 :chartStyle="chartStyle"
                 :grid="grid"
                 :legend="lineLegend"
                 :series="lineSeries"
                 :tooltip="tooltipLine"
                 :xAxis="xAxis2"
                 :yAxis="yAxis2"
                 style="height: 270px;" />
      <div class="main-panel product-panel">
        <div class="product-panel__header">
          <div class="section-title product-panel__title">销售产品数据分析</div>
          <el-radio-group v-model="productType"
                          size="small"
                          @change="productInOutInfo">
            <el-radio-button :value="1">原材料</el-radio-button>
            <el-radio-button :value="3">半成品</el-radio-button>
            <el-radio-button :value="2">成品</el-radio-button>
          </el-radio-group>
        </div>
        <div class="product-panel__meta">
          <span class="product-panel__unit">单位：件</span>
          <div class="product-panel__legend">
            <span class="legend-item">
              <i class="legend-dot legend-dot--out"></i>出库
            </span>
            <span class="legend-item">
              <i class="legend-dot legend-dot--in"></i>入库
            </span>
          </div>
        </div>
        <div class="product-panel__chart">
          <Echarts ref="productChart"
                   :chartStyle="chartStyle"
                   :grid="productGrid"
                   :legend="lineLegend"
                   :series="lineSeries"
                   :tooltip="tooltipLine"
                   :xAxis="xAxis2"
                   :yAxis="yAxis2" />
        </div>
      </div>
    </div>
  </div>
@@ -288,8 +309,8 @@
  import useUserStore from "@/store/modules/user.js";
  import {
    analysisCustomerContractAmounts,
    getAmountHalfYear,
    getBusiness,
    productInOutAnalysis,
    homeTodos,
    processDataProductionStatistics,
    statisticsReceivablePayable,
@@ -389,9 +410,16 @@
    show: true,
    data: ["预付账款", "应付账款", "预收账款", "应收账款"],
  };
  const productType = ref(1);
  const productGrid = {
    left: "3%",
    right: "4%",
    bottom: "3%",
    top: "8%",
    containLabel: true,
  };
  const lineLegend = {
    show: true,
    data: ["开票", "回款"],
    show: false,
  };
  const tooltip = {
    trigger: "axis",
@@ -450,32 +478,66 @@
  ]);
  const lineSeries = ref([
    {
      name: "出库",
      type: "line",
      data: [],
      label: {
        show: true,
      smooth: false,
      showSymbol: true,
      symbol: "circle",
      symbolSize: 8,
      lineStyle: { color: "rgba(11, 137, 254, 1)", width: 2 },
      itemStyle: { color: "rgba(11, 137, 254, 1)", borderWidth: 0 },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(11, 137, 254, 0.40)" },
          { offset: 1, color: "rgba(11, 137, 254, 0.05)" },
        ]),
      },
      showSymbol: true, // 显示圆点
      data: [],
      emphasis: { focus: "series" },
    },
    {
      name: "入库",
      type: "line",
      smooth: false,
      showSymbol: true,
      symbol: "circle",
      symbolSize: 8,
      lineStyle: { color: "rgba(11, 249, 254, 1)", width: 2 },
      itemStyle: { color: "rgba(11, 249, 254, 1)", borderWidth: 0 },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(11, 249, 254, 0.5)" },
          { offset: 1, color: "rgba(11, 249, 254, 0.05)" },
        ]),
      },
      data: [],
      emphasis: { focus: "series" },
    },
  ]);
  const tooltipLine = {
    trigger: "axis",
    axisPointer: { type: "line" },
    formatter(params) {
      let result = params[0].axisValue + "<br/>";
      params.forEach((item) => {
        result += `${item.marker} ${item.seriesName}: ${item.value} 件<br/>`;
      });
      return result;
    },
  };
  const yAxis2 = ref([
  const yAxis2 = [
    {
      type: "value",
      axisLine: { show: false },
      axisTick: { show: false },
    },
  ]);
  ];
  const xAxis2 = ref([
    {
      type: "category",
      data: [],
      axisLabel: {
        interval: 0,
        formatter: function (value) {
          return value.replace(/~/g, "\n");
        },
      },
      axisTick: { show: false },
      axisLine: { show: false },
    },
  ]);

@@ -505,7 +567,7 @@
    todoInfoS();
    statisticsReceivable();
    qualityStatisticsInfo();
    getAmountHalfYearNum();
    productInOutInfo();
    getProcessList();
  });
  // 数据统计
@@ -594,80 +656,19 @@
      });
    });
  };
  const getAmountHalfYearNum = async () => {
    const res = await getAmountHalfYear();
    console.log(res);
    const monthName = [];
    const receiptAmount = [];
    const invoiceAmount = [];
    res.data.forEach(item => {
      monthName.push(item.month);
      receiptAmount.push(item.receiptAmount);
      invoiceAmount.push(item.invoiceAmount);
    });
    // 正确响应式赋值：创建新的 xAxis 和 series 对象
    xAxis2.value[0].data = monthName;
    xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, "\n~"));
    lineSeries.value = [
      {
        name: "开票",
        type: "line",
        data: invoiceAmount,
        stack: "Total",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(131, 207, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(186, 228, 255, 1)",
            },
          ]),
        },
        itemStyle: {
          color: "#2D99FF",
          borderColor: "#2D99FF",
        },
        emphasis: {
          focus: "series",
        },
        lineStyle: {
          width: 0,
        },
        showSymbol: true,
      },
      {
        name: "回款",
        type: "line",
        data: receiptAmount,
        stack: "Total",
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: "#83CFFF",
          borderColor: "#83CFFF",
        },
        showSymbol: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(54, 153, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(89, 169, 254, 1)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
      },
    ];
  const productInOutInfo = () => {
    productInOutAnalysis({ type: productType.value })
      .then((res) => {
        if (res.code === 200 && Array.isArray(res.data)) {
          const list = res.data;
          xAxis2.value[0].data = list.map((d) => d.date);
          lineSeries.value[0].data = list.map((d) => Number(d.outCount) || 0);
          lineSeries.value[1].data = list.map((d) => Number(d.inCount) || 0);
        }
      })
      .catch((err) => {
        console.error("获取销售产品数据分析失败:", err);
      });
  };

  // 工序数据生产统计明细（假数据 + 图表）
@@ -795,7 +796,7 @@
    todoInfoS();
    statisticsReceivable();
    qualityStatisticsInfo();
    getAmountHalfYearNum();
    productInOutInfo();
    refreshProcessStats();
  });
</script>
@@ -1089,6 +1090,65 @@
    border-radius: 2px;
  }

  .product-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .product-panel__title {
    margin-bottom: 0;
  }

  .product-panel__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 4px;
  }

  .product-panel__unit {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.45);
  }

  .product-panel__legend {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.65);
  }

  .legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .legend-dot--out {
    background: rgba(11, 137, 254, 1);
  }

  .legend-dot--in {
    background: rgba(11, 249, 254, 1);
  }

  .product-panel__chart {
    flex: 1;
    min-height: 240px;
    height: 260px;
  }

  .contract-info {
    display: flex;
    align-items: center;