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/api/energyManagement/energyType.js

@@ -94,3 +94,11 @@
    params: query,
  });
}
// èƒ½è€—单耗---按日月年汇总统计
export function energyConsumptionDetailCollectEnergy(query) {
  return request({
    url: "/energyConsumptionDetail/collectEnergy",
    method: "get",
    params: query,
  });
}

 src/api/reportAnalysis/salesStatistics.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,17 @@
import request from '@/utils/request'

// æ–°å¢žå®¢æˆ·è¶‹åŠ¿åˆ†æž
export function getCustomerTrends(params) {
  return request({
    url: '/home/customerTrends?days=' + params.days,
    method: 'get',
  })
}

// ä¸­å¿ƒçœ‹æ¿
export function getDashboardStatistics() {
  return request({
    url: '/home/total',
    method: 'get'
  })
}

 src/views/costAccounting/productionCostAccounting/index.vue

@@ -82,12 +82,12 @@
          </el-button>
          <el-button class="lux-btn"
                     @click="handleReset">重置</el-button>
          <el-button class="lux-btn"
          <!-- <el-button class="lux-btn"
                     type="success"
                     plain
                     @click="handleExport">
            å¯¼å‡º
          </el-button>
          </el-button> -->
        </div>
      </div>
    </el-card>
@@ -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);
  });


 src/views/reportAnalysis/salesStatistics/index.vue

@@ -191,11 +191,11 @@
                     title="新增客户趋势分析" />
        <div class="panel-tabs">
          <span class="tab-item"
                :class="{ active: customerTimeDimension === 'year' }"
                @click="handleCustomerTimeDimensionChange('year')">å¹´</span>
                :class="{ active: customerTimeDimension === 'å¹´' }"
                @click="handleCustomerTimeDimensionChange('å¹´')">å¹´</span>
          <span class="tab-item"
                :class="{ active: customerTimeDimension === 'month' }"
                @click="handleCustomerTimeDimensionChange('month')">月</span>
                :class="{ active: customerTimeDimension === '月' }"
                @click="handleCustomerTimeDimensionChange('月')">月</span>
        </div>
        <div class="bi-panel-body">
          <div class="chart-unit-row chart-unit-single">
@@ -280,7 +280,10 @@
  import * as echarts from "echarts";
  import dayjs from "dayjs";
  import PanelHeader from "@/views/reportAnalysis/PSIDataAnalysis/components/PanelHeader.vue";
  import { findAllQualifiedStockOutRecordTypeOptions } from "../../../api/basicData/enum";
  import {
    getDashboardStatistics,
    getCustomerTrends,
  } from "@/api/reportAnalysis/salesStatistics";

  const router = useRouter();
  const screenRoot = ref(null);
@@ -346,7 +349,7 @@
  const boardTimeDimension = ref("year");
  const boardSelectedArea = ref("全部");
  const boardProductType = ref("板材");
  const customerTimeDimension = ref("year");
  const customerTimeDimension = ref("å¹´");

  const salesAreas = [
    "全部",
@@ -650,6 +653,9 @@
  });

  const totalSalesAmount = ref(1299);
  const centerNewCustomerCount = ref(112);
  const completedOrders = ref(1829);
  const totalSalesAreaCount = ref(12);

  const newCustomerCount = computed(() => {
    return filteredData.value.reduce((sum, item) => sum + item.newCustomers, 0);
@@ -667,17 +673,49 @@
    return Object.values(customerMap).reduce((sum, count) => sum + count, 0);
  });

  // ä¸­é—´ä¸­å¿ƒçŽ¯æŒ‡æ ‡ï¼ˆç”¨äºŽå¤§å±å±•ç¤ºï¼Œä½¿ç”¨çŽ°æœ‰ç»Ÿè®¡æ•°æ®åšæ˜ å°„）
  const centerNewCustomerCount = computed(() => 112);
  const completedOrders = computed(() => 1829);
  const salesOrderCount = computed(() => 34);
  const totalSalesAreaCount = computed(() => 12);
  // å®¢æˆ·è¶‹åŠ¿æ•°æ®
  const customerTrendsData = ref([]);

  // å˜åŒ–率计算（模拟）
  const salesVolumeChange = ref("+5.2");
  const salesAmountChange = ref("+7.8");
  const customerCountChange = ref("+3.5");
  const totalCustomerChange = ref("+2.1");

  // èŽ·å–中心看板数据
  const fetchDashboardData = async () => {
    try {
      const response = await getDashboardStatistics();
      if (response && response.data) {
        totalSalesAmount.value = response.data.price || 0;
        completedOrders.value = response.data.delivery || 0;
        centerNewCustomerCount.value = response.data.customer || 0;
        totalSalesAreaCount.value = response.data.volume || 0;
      }
    } catch (error) {
      console.error("获取中心看板数据失败:", error);
    }
  };

  // èŽ·å–客户趋势数据
  const fetchCustomerTrendsData = async () => {
    try {
      const response = await getCustomerTrends({
        days: customerTimeDimension.value,
      });
      if (response && response.data) {
        // API返回的数据结构如下：
        // {
        //   "dates": ["2026-01-01", "2025-01-01", ...],
        //   "customerTrends": [{"ALLIN": 4, "银川": 3, ...}, ...]
        // }
        customerTrendsData.value = response.data;
        updateCharts();
      }
    } catch (error) {
      console.error("获取客户趋势数据失败:", error);
    }
  };

  // è¡¨æ ¼æ•°æ®
  const tableData = computed(() => {
@@ -785,7 +823,7 @@
        right: "1%",
        textStyle: {
          color: "#B8C8E0",
          fontSize: getResponsiveValue(9),
          fontSize: getResponsiveValue(10),
        },
        itemWidth: getResponsiveValue(10),
        itemHeight: getResponsiveValue(10),
@@ -912,7 +950,7 @@
        right: "1%",
        textStyle: {
          color: "#B8C8E0",
          fontSize: getResponsiveValue(9),
          fontSize: getResponsiveValue(10),
        },
        itemWidth: getResponsiveValue(10),
        itemHeight: getResponsiveValue(10),
@@ -1092,15 +1130,6 @@

  // æ–°å¢žå®¢æˆ·è¶‹åŠ¿å›¾è¡¨é…ç½®ï¼ˆæŒ‰é”€å”®åŒºå’Œå¹´æœˆç»´åº¦ï¼‰
  const productTypeTrendChartOption = computed(() => {
    // ä¸ºæ¯ä¸ªé”€å”®åŒºç”Ÿæˆæ•°æ®
    const salesAreas = [
      "全部",
      "A销售区",
      "B销售区",
      "C销售区",
      "D销售区",
      "E销售区",
    ];
    const colors = [
      "#00A4ED",
      "#34D8F7",
@@ -1108,46 +1137,91 @@
      "#8A6BFF",
      "#C8C447",
      "#FF6B6B",
      "#FF8B6B",
      "#FFCB6B",
      "#8BC34A",
      "#4CAF50",
    ];
    const year = 2024;
    const periodType = customerTimeDimension.value;

    // ç”Ÿæˆæ—¶é—´æ®µ
    let periods = [];
    if (periodType === "year") {
      // å¹´åº¦æ•°æ®ï¼š12个月
      for (let month = 1; month <= 12; month++) {
        periods.push(`${year}-${month.toString().padStart(2, "0")}`);
      }
    } else {
      // æœˆåº¦æ•°æ®ï¼š30天
      const month = 1;
      for (let day = 1; day <= 30; day++) {
        periods.push(
          `${year}-${month.toString().padStart(2, "0")}-${day
            .toString()
            .padStart(2, "0")}`
        );
      }
    }
    let salesAreas = [];
    let series = [];

    // ä¸ºæ¯ä¸ªé”€å”®åŒºç”Ÿæˆæ•°æ®
    const series = salesAreas.map((area, index) => {
      const data = periods.map(() => {
        return periodType === "year"
          ? Math.floor(Math.random() * 10) + 2
          : Math.floor(Math.random() * 3) + 1;
    if (
      customerTrendsData.value &&
      customerTrendsData.value.dates &&
      customerTrendsData.value.customerTrends
    ) {
      // ä½¿ç”¨API返回的数据
      periods = customerTrendsData.value.dates;

      // æå–所有销售区域
      const areaSet = new Set();
      customerTrendsData.value.customerTrends.forEach(item => {
        Object.keys(item).forEach(key => {
          areaSet.add(key);
        });
      });
      salesAreas = Array.from(areaSet);

      return {
        name: area,
        data: data,
        type: "line",
        smooth: false,
        lineStyle: { width: getResponsiveValue(1), color: colors[index] },
        itemStyle: { color: colors[index] },
      };
    });
      // ä¸ºæ¯ä¸ªé”€å”®åŒºåŸŸç”Ÿæˆæ•°æ®
      series = salesAreas.map((area, index) => {
        const data = customerTrendsData.value.customerTrends.map((item, i) => {
          return item[area] || 0;
        });

        return {
          name: area,
          data: data,
          type: "line",
          smooth: false,
          lineStyle: {
            width: getResponsiveValue(1),
            color: colors[index % colors.length],
          },
          itemStyle: { color: colors[index % colors.length] },
        };
      });
    } else {
      // æ¨¡æ‹Ÿæ•°æ®
      const year = 2024;
      if (periodType === "year") {
        // å¹´åº¦æ•°æ®ï¼š12个月
        for (let month = 1; month <= 12; month++) {
          periods.push(`${year}-${month.toString().padStart(2, "0")}`);
        }
      } else {
        // æœˆåº¦æ•°æ®ï¼š30天
        const month = 1;
        for (let day = 1; day <= 30; day++) {
          periods.push(
            `${year}-${month.toString().padStart(2, "0")}-${day
              .toString()
              .padStart(2, "0")}`
          );
        }
      }

      salesAreas = [];
      series = salesAreas.map((area, index) => {
        const data = periods.map(() => {
          return periodType === "year"
            ? Math.floor(Math.random() * 10) + 2
            : Math.floor(Math.random() * 3) + 1;
        });

        return {
          name: area,
          data: data,
          type: "line",
          smooth: false,
          lineStyle: { width: getResponsiveValue(1), color: colors[index] },
          itemStyle: { color: colors[index] },
        };
      });
    }

    return {
      backgroundColor: "transparent",
@@ -1171,7 +1245,7 @@
        right: "1%",
        textStyle: {
          color: "#B8C8E0",
          fontSize: getResponsiveValue(9),
          fontSize: getResponsiveValue(10),
        },
        itemWidth: getResponsiveValue(10),
        itemHeight: getResponsiveValue(10),
@@ -1414,7 +1488,7 @@
  // å¤„理新增客户趋势时间维度切换
  const handleCustomerTimeDimensionChange = dimension => {
    customerTimeDimension.value = dimension;
    updateCharts();
    fetchCustomerTrendsData();
  };

  // ç”Ÿæˆç Œå—销售数据
@@ -1525,7 +1599,7 @@
  };

  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
  onMounted(async () => {
    // å¯åŠ¨é¡¶éƒ¨æ æ—¶é—´åˆ·æ–°
    if (!timeTicker) {
      timeTicker = setInterval(() => {
@@ -1544,6 +1618,10 @@
    // ç”Ÿæˆåˆå§‹æ•°æ®
    generateBlockSalesData();
    generateBoardSalesData();

    // èŽ·å–数据
    await fetchDashboardData();
    await fetchCustomerTrendsData();

    // ç­‰å¾…DOM更新后初始化图表
    nextTick(() => {
@@ -1880,12 +1958,12 @@
  }

  /* .scroll-table tbody tr:nth-child(odd) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                background-color: rgba(64, 158, 255, 0.05);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                background-color: rgba(64, 158, 255, 0.05);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              .scroll-table tbody tr:nth-child(even) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  background-color: rgba(64, 158, 255, 0.1);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    } */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              .scroll-table tbody tr:nth-child(even) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  background-color: rgba(64, 158, 255, 0.1);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    } */
  .oddTableTr {
    background-color: rgba(64, 158, 255, 0.05);
  }

 src/views/reportAnalysis/unitEnergyConsumption/index.vue

@@ -64,10 +64,10 @@
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
      <!-- <div>
        <el-button type="success"
                   @click="handleExport">导出报表</el-button>
      </div>
      </div> -->
    </div>
    <!-- å›¾è¡¨åŒºåŸŸ -->
    <div class="chart-section">
@@ -90,48 +90,38 @@
        </el-icon>
        èƒ½è€—单耗数据
      </h2>
      <el-table :data="tableValue"
      <el-table :data="tableData2"
                v-loading="tableLoading"
                border>
        <el-table-column prop="meterReadingDate"
        <!-- <el-table-column prop="meterReadingDate"
                         label="日期"
                         align="center" />
        <!-- <el-table-column prop="type"
                         label="类型"
                         align="center"
                         width="100">
          <template #default="scope">
            <el-tag :type="scope.row.type === '生产' ? 'primary' : 'success'">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column> -->
                         align="center" /> -->
        <el-table-column prop="energyTyep"
                         label="能耗类型"
                         align="center">
          <template #default="scope">
            <el-tag :type="getEnergyTypeType(scope.row.type)">
              {{ scope.row.type }}
            <el-tag :type="getEnergyTypeType(scope.row.energyTyep)">
              {{ scope.row.energyTyep }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="consumption"
        <el-table-column prop="energyConsumption"
                         label="用量"
                         align="right" />
        <el-table-column prop="cost"
        <el-table-column prop="energyCost"
                         label="成本"
                         align="right">
          <template #default="scope">
            <span class="data-value">Â¥{{ scope.row.cost }}</span>
            <span class="data-value">Â¥{{ scope.row.energyCost }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unitConsumption"
        <!-- <el-table-column prop="unitConsumption"
                         label="单耗"
                         align="right">
          <template #default="scope">
            <span class="data-value">{{ scope.row.unitConsumption }}</span>
          </template>
        </el-table-column>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
@@ -142,7 +132,7 @@
  import { ElMessage } from "element-plus";
  import { TrendCharts, List } from "@element-plus/icons-vue";
  import * as echarts from "echarts";
  import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";
  import { energyConsumptionDetailCollectEnergy } from "@/api/energyManagement/energyType";

  // ç»Ÿè®¡ç»´åº¦
  const statisticsType = ref("day");
@@ -208,7 +198,7 @@
    const typeMap = {
      æ°´: "primary",
      ç”µ: "warning",
      è’¸æ±½: "success",
      æ°”: "success",
    };
    return typeMap[type] || "info";
  };
@@ -330,7 +320,51 @@
    );
    // ä½¿ç”¨å®žé™…çš„meterReadingDate作为横轴数据
    xAxisData = allDates;

    const energyTypesList = ["æ°´", "电", "气"];
    const seriesData = [
      {
        name: "æ°´",
        type: "line",
        data: data.map(item => item.waterConsumption),
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        lineStyle: {
          width: 3,
        },
        itemStyle: {
          color: "#409EFF",
        },
      },
      {
        name: "电",
        type: "line",
        data: data.map(item => item.electricityConsumption),
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        lineStyle: {
          width: 3,
        },
        itemStyle: {
          color: "#FF4D4F",
        },
      },
      {
        name: "气",
        type: "line",
        data: data.map(item => item.gasConsumption),
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        lineStyle: {
          width: 3,
        },
        itemStyle: {
          color: "#FF9900",
        },
      },
    ];
    const option = {
      tooltip: {
        trigger: "axis",
@@ -340,7 +374,7 @@
        textStyle: { color: "#303133" },
      },
      legend: {
        data: ["单耗"],
        data: energyTypesList,
        top: 0,
        right: 10,
        textStyle: { color: "#606266" },
@@ -370,26 +404,13 @@
        axisLine: { show: false },
        splitLine: { lineStyle: { color: "#f0f2f5" } },
      },
      series: {
        name: "单耗",
        type: "line",
        data: data.map(item => item.totalCost),
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        lineStyle: {
          width: 3,
        },
        itemStyle: {
          color: "#409EFF",
        },
      },
      series: seriesData,
    };

    consumptionChartInstance.setOption(option);
  };
  const tableValue = ref([]);

  const tableData2 = ref([]);
  // æŸ¥è¯¢
  const handleQuery = () => {
    tableLoading.value = true;
@@ -443,11 +464,12 @@
      params.days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
    }

    energyConsumptionDetailStatistics(params)
    energyConsumptionDetailCollectEnergy(params)
      .then(res => {
        if (res.code === 200) {
          const data = res.data;
          tableData.value = data.energyCostDtos || [];
          tableData2.value = data.energyConsumptionTypeProportion || [];
          tableValue.value = [];
          tableData.value.forEach(item => {
            tableValue.value.push({