代码优化

647556386

2026-01-27 1378fc4cd7abc24ed3a982e09437c2c8a74e9f2f

 ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/views/charts/wms-dashboard.vue

@@ -258,7 +258,6 @@
// èŽ·å–后端大屏数据
const fetchBigGreenData = async () => {
  try {
    debugger
    const res = await http.get('/api/BigScreen/GetBigGreenData');
    console.log('大屏数据', res);
    
@@ -271,10 +270,13 @@
        ? [...bigscreendata.value.taskList.slice(0,5)] 
        : [...bigscreendata.value.taskList];
      startTaskCarousel(); // å¯åŠ¨ä»»åŠ¡è½®æ’­
      refreshCharts();
      // refreshCharts(); // ç§»é™¤è¿™é‡Œçš„调用，改为在数据获取后统一初始化
    });
    // è¿”回Promise，以便在数据获取成功后初始化图表
    return Promise.resolve();
  } catch (error) {
    ElMessage.error('数据获取失败，请检查后端接口是否正常');
    return Promise.reject(error);
  }
};

@@ -362,68 +364,45 @@
};

// åˆå§‹åŒ–è¿‘7日出入库趋势图（关联后端数据）
const initStockTrend = () => {
  debugger
  if (!stockTrendRef.value) return;

  if (stockTrendChart) {
    stockTrendChart.dispose();
  }

  stockTrendChart = echarts.init(stockTrendRef.value);
  // ä¼˜å…ˆä½¿ç”¨åŽç«¯æ•°æ®
  const trendData = bigscreendata.value.dailyInOutBoundList;
  console.log('出入库趋势数据', trendData);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['入库量', '出库量'],
      top: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: trendData.map(item => item.date)
    },
    yAxis: {
      type: 'value',
      name: '数量（千件）',
      max: 25
    },
    series: [
      {
        name: '入库量',
        type: 'bar',
        barWidth: '30%',
        data: trendData.map(item => item.inNum),
        itemStyle: { color: '#52c41a' }
      },
      {
        name: '出库量',
        type: 'bar',
        barWidth: '30%',
        data: trendData.map(item => item.outNum),
        itemStyle: { color: '#1890ff' }
      }
    ]
  };

  stockTrendChart.setOption(option);
  return stockTrendChart;
};
// const initStockTrend = () => {
//   const chart = echarts.init(efficiencyChartRef.value)
//       const option = {
//         tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
//         grid: {
//           left: '3%', right: '4%', bottom: '3%', top: '10%',
//           containLabel: true
//         },
//         xAxis: {
//           type: 'category',
//           data: ['入库作业', '出库作业', '盘点作业', '调拨作业', '补货作业'],
//           axisLine: { lineStyle: { color: '#fff' } },
//           axisLabel: { color: '#fff' }
//         },
//         yAxis: {
//           type: 'value',
//           name: '效率(单位/小时)',
//           axisLine: { lineStyle: { color: '#fff' } },
//           splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
//           axisLabel: { color: '#fff' }
//         },
//         series: [
//           {
//             data: [180, 156, 95, 78, 120],
//             type: 'bar',
//             barWidth: '40%',
//             itemStyle: {
//               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//                 { offset: 0, color: '#83bff6' },
//                 { offset: 1, color: '#188df0' }
//               ]),
//               borderRadius: [5, 5, 0, 0]
//             }
//           }
//         ]
//       }
//       chart.setOption(option)
//       return chart
// };

// åˆå§‹åŒ–库位利用率环形图（修正：统一实例管理，关联后端数据）
const initLocationRate = () => {
@@ -589,11 +568,13 @@
  return exceptionTrendChart;
};

// åˆ·æ–°æ‰€æœ‰å›¾è¡¨ï¼ˆç§»é™¤æ— æ•ˆé›·è¾¾å›¾é€»è¾‘）
// åˆ·æ–°æ‰€æœ‰å›¾è¡¨
const refreshCharts = () => {
  const charts = [
    initInventoryPie,
    initStockTrend,
    initLocationRate,
    initExceptionTrend,
  ];

  charts.forEach(initFunc => {
@@ -622,15 +603,44 @@

// ç»„件挂载时：先请求数据，再初始化图表
onMounted(() => {
  console.log('组件已挂载，开始初始化');

  // å…ˆèŽ·å–后端数据
  fetchBigGreenData();
  // åˆå§‹åŒ–图表（确保DOM已渲染）
  nextTick(() => {
    initInventoryPie();
    initStockTrend();
    initLocationRate();
    initExceptionTrend();
    window.addEventListener('resize', handleResize);
  fetchBigGreenData().then(() => {
    console.log('数据获取成功，开始初始化图表');

    // æ•°æ®èŽ·å–成功后再初始化图表
    nextTick(() => {
      console.log('DOM已更新，开始初始化图表');

      try {
        // ç«‹å³åˆå§‹åŒ–图表
        initInventoryPie();
        console.log('库存分布饼图初始化完成');

        // ç‰¹åˆ«å¤„理出入库趋势图
        if (stockTrendRef.value) {
          console.log('出入库趋势图容器存在，开始初始化');
          initStockTrend();
          console.log('出入库趋势图初始化完成');
        } else {
          console.error('出入库趋势图容器不存在');
        }

        initLocationRate();
        console.log('库位利用率图初始化完成');

        initExceptionTrend();
        console.log('异常趋势图初始化完成');

        window.addEventListener('resize', handleResize);
        console.log('所有图表初始化完成');
      } catch (error) {
        console.error('图表初始化过程中出错:', error);
      }
    });
  }).catch(error => {
    console.error('获取数据失败:', error);
  });
});

@@ -767,6 +777,7 @@
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  min-height: 400px;
}

.chart-card:hover {
@@ -781,9 +792,11 @@
  flex: 1;
  position: relative;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  z-index: 1;
  display: block;
}