1

heshaofeng

2025-12-26 c10661bab41e6161449a6dac8eef40bb53feb235

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

@@ -1,7 +1,7 @@
<template>
  <div class="wms-dashboard">
    <!-- é¡¶éƒ¨æ ‡é¢˜æ  -->
    <div class="header">
    <!-- <div class="header">
      <h1>WMS仓储可视化图表看板</h1>
      <div class="header-right">
        <span>2025-12-24 16:11:44</span>
@@ -11,36 +11,36 @@
        </el-select>
        <el-button type="primary" style="margin-left: 10px;" @click="refreshCharts">刷新</el-button>
      </div>
    </div>
    </div> -->

    <!-- ç»Ÿè®¡å¡ç‰‡åŒºåŸŸ -->
    <!-- ç»Ÿè®¡å¡ç‰‡åŒºåŸŸ - ç»‘定响应式数据 -->
    <el-row :gutter="20" class="stats-card-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="card-title">总库存（件）</div>
          <div class="card-value">269,225</div>
          <div class="card-change"><el-tag type="success">↑ 2.1% è¾ƒæ˜¨æ—¥</el-tag></div>
          <div class="card-value">{{ formatNumber(bigscreendata.totalStockQuantity) }}</div>
          <!-- <div class="card-change"><el-tag type="success">↑ 2.1% è¾ƒæ˜¨æ—¥</el-tag></div> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="card-title">待出库订单</div>
          <div class="card-value">425</div>
          <div class="card-change"><el-tag type="warning">↑ 5.3% è¾ƒ1小时前</el-tag></div>
          <div class="card-value">{{ bigscreendata.unOutBoundOrderCount }}</div>
          <!-- <div class="card-change"><el-tag type="warning">↑ 5.3% è¾ƒ1小时前</el-tag></div> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="card-title">今日作业完成率</div>
          <div class="card-value">93.9%</div>
          <div class="card-change"><el-tag type="success">↑ 1.8% è¾ƒæ˜¨æ—¥</el-tag></div>
          <div class="card-value">{{ bigscreendata.dailyCompletionRate ? `${bigscreendata.dailyCompletionRate}%` : '0%' }}</div>
          <!-- <div class="card-change"><el-tag type="success">↑ 1.8% è¾ƒæ˜¨æ—¥</el-tag></div> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="card-title">未处理异常</div>
          <div class="card-value">7</div>
          <div class="card-change"><el-tag type="danger">↑ 1 è¾ƒ30分钟前</el-tag></div>
          <div class="card-value">{{ bigscreendata.unhandledExceptionCount || 0 }}</div>
          <!-- <div class="card-change"><el-tag type="danger">↑ 1 è¾ƒ30分钟前</el-tag></div> -->
        </el-card>
      </el-col>
    </el-row>
@@ -49,18 +49,18 @@
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="chart-title">库存库位分布（图像化占比）<el-button type="text" class="view-btn">切换视图</el-button></div>
          <div class="chart-title">库存库位分布（图像化占比）</div>
          <div ref="inventoryPieRef" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="chart-title">近7日出入库趋势（图像化走势）
            <el-button-group class="btn-group">
            <!-- <el-button-group class="btn-group">
              <el-button type="primary" size="small">全部</el-button>
              <el-button type="default" size="small">入库</el-button>
              <el-button type="default" size="small">出库</el-button>
            </el-button-group>
            </el-button-group> -->
          </div>
          <div ref="stockTrendRef" class="chart-container"></div>
        </el-card>
@@ -69,19 +69,13 @@

    <!-- å›¾è¡¨åŒºåŸŸï¼ˆç¬¬äºŒè¡Œï¼‰ -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="8">
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="chart-title">库位利用率</div>
          <div ref="locationRateRef" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <div class="chart-title">作业类型分布<el-button type="text" class="view-btn">查看详情</el-button></div>
          <div ref="operationRadarRef" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="chart-title">异常类型统计趋势<el-button type="text" class="view-btn">筛选</el-button></div>
          <div ref="exceptionTrendRef" class="chart-container"></div>
@@ -89,39 +83,9 @@
      </el-col>
    </el-row>

    <!-- è¡¨æ ¼åŒºåŸŸ -->
    <el-row :gutter="20" class="table-row">
      <el-col :span="12">
        <el-card class="table-card">
          <div class="table-title">订单处理进度<el-select v-model="orderType" placeholder="退货入库"
              style="width: 100px; margin-left: 10px;">
              <el-option label="退货入库" value="return"></el-option>
              <el-option label="普通出库" value="normal"></el-option>
            </el-select></div>
          <el-table :data="orderList" border style="width: 100%;">
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="priority" label="优先级">
              <template #default="scope">
                <el-tag
                  :type="scope.row.priority === '紧急' ? 'danger' : scope.row.priority === '加急' ? 'warning' : 'success'">
                  {{ scope.row.priority }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="progress" label="进度">
              <template #default="scope">
                <el-progress :percentage="scope.row.progress" :color="scope.row.progressColor" />
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination">
            <el-button type="text">加载更多订单</el-button>
            <el-pagination layout="prev, pager, next, jumper" :current-page="1" :total="50" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
    <!-- è¡¨æ ¼åŒºåŸŸ - ç»‘定后端作业数据 -->
    <el-row :gutter="20" class="table-row" width="100%">
      <el-col :span="24">
        <el-card class="table-card">
          <div class="table-title">实时作业监控
            <el-button-group class="btn-group">
@@ -131,7 +95,7 @@
              <el-button type="default" size="small">盘点</el-button>
            </el-button-group>
          </div>
          <el-table :data="operationList" border style="width: 100%;">
          <el-table :data="bigscreendata.taskList.length ? bigscreendata.taskList : operationList" border style="width: 100%;">
            <el-table-column prop="opNo" label="作业单号" />
            <el-table-column prop="opType" label="作业类型" />
            <el-table-column prop="operator" label="操作人员" />
@@ -157,18 +121,52 @@
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import http from "@/api/http.js";

// å“åº”式数据
const month = ref('month');
const orderType = ref('return');

// æ¨¡æ‹Ÿæ•°æ®
const orderList = ref([
  { orderNo: 'OD20251224001', type: '普通出库', priority: '紧急', progress: 60, progressColor: '#ff4d4f' },
  { orderNo: 'OD20251224002', type: '退货入库', priority: '普通', progress: 80, progressColor: '#1890ff' },
  { orderNo: 'OD20251224003', type: '调拨订单', priority: '加急', progress: 40, progressColor: '#faad14' },
  { orderNo: 'OD20251224004', type: '普通出库', priority: '常规', progress: 100, progressColor: '#52c41a' }
]);
// åŽç«¯è¿”回数据（响应式）
const bigscreendata = ref({
  totalStockQuantity: 0,
  unOutBoundOrderCount: 0,
  dailyCompletionRate: 0,
  unhandledExceptionCount: 0,
  locationUtilizationRate: 0,
  dailyInOutBoundList: [],
  taskList: [],
  inventoryLocationDist: [], // åº“存库位分布数据
  exceptionTypeTrend: []     // å¼‚常类型趋势数据
});

// æ•°å­—格式化（千分位分隔）
const formatNumber = (num) => {
  if (!num) return '0';
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

// èŽ·å–后端大屏数据
const fetchBigGreenData = async () => {
  try {
    // ä¿®æ­£ï¼šä»£ç†å·²é…ç½®ï¼Œç§»é™¤å¤šä½™çš„/api前缀
    const res = await http.get('/api/BigScreen/GetBigGreenData');
    console.log('大屏数据', res);
    // èµ‹å€¼å“åº”式数据（兼容后端统一返回格式）
    bigscreendata.value = res.data || res;
    // æ•°æ®æ›´æ–°åŽåˆ·æ–°å›¾è¡¨
    nextTick(() => {
      refreshCharts();
    });
  } catch (error) {
    console.error('获取大屏数据失败：', error);
    ElMessage.error('数据获取失败，请检查后端接口是否正常'); // æ›¿æ¢ä¸ºElement Plus消息提示
  }
};

console.log('大屏数据111', bigscreendata.value);

// å¤‡ç”¨æ¨¡æ‹Ÿæ•°æ®
const operationList = ref([
  { opNo: 'JW251224001', opType: '入库', operator: '张三', startTime: '15:30:22', status: '处理中' },
  { opNo: 'CK251224002', opType: '出库', operator: '李四', startTime: '15:25:10', status: '已完成' },
@@ -176,29 +174,38 @@
  { opNo: 'SC251224005', opType: '上架', operator: '孙七', startTime: '15:10:18', status: '异常' }
]);

// å›¾è¡¨å®¹å™¨
// å›¾è¡¨å®¹å™¨Ref
const inventoryPieRef = ref(null);
const stockTrendRef = ref(null);
const locationRateRef = ref(null);
const operationRadarRef = ref(null);
const exceptionTrendRef = ref(null);

// å›¾è¡¨å®žä¾‹
// å›¾è¡¨å®žä¾‹ï¼ˆå…¨å±€ç®¡ç†ï¼Œç”¨äºŽé”€æ¯å’Œresize）
let inventoryPieChart = null;
let stockTrendChart = null;
let locationRateChart = null;
let operationRadarChart = null;
let exceptionTrendChart = null;

// åˆå§‹åŒ–库存库位分布饼图
// åˆå§‹åŒ–库存库位分布饼图（关联后端数据）
const initInventoryPie = () => {
  if (!inventoryPieRef.value) return;

  // é”€æ¯æ—§å®žä¾‹ï¼Œé˜²æ­¢å†…存泄漏
  if (inventoryPieChart) {
    inventoryPieChart.dispose();
  }

  inventoryPieChart = echarts.init(inventoryPieRef.value);
  // ä¼˜å…ˆä½¿ç”¨åŽç«¯æ•°æ®ï¼Œæ— æ•°æ®åˆ™ç”¨é»˜è®¤å€¼
  const locationData = bigscreendata.value.inventoryLocationDist.length 
    ? bigscreendata.value.inventoryLocationDist
    : [
        { value: 48.7, name: '常温区A区', itemStyle: { color: '#5470c6' } },
        { value: 29.2, name: '冷藏区B区', itemStyle: { color: '#91cc75' } },
        { value: 21.9, name: '保税区C区', itemStyle: { color: '#fac858' } },
        { value: 2.2, name: '残次品区D区', itemStyle: { color: '#ee6666' } }
      ];

  const option = {
    tooltip: {
      trigger: 'item',
@@ -207,7 +214,7 @@
    legend: {
      bottom: 0,
      left: 'center',
      data: ['常温区A区', '冷藏区B区', '保税区C区', '残次品区D区']
      data: locationData.map(item => item.name)
    },
    series: [{
      name: '库存库位分布',
@@ -234,12 +241,7 @@
      labelLine: {
        show: false
      },
      data: [
        { value: 48.7, name: '常温区A区', itemStyle: { color: '#5470c6' } },
        { value: 29.2, name: '冷藏区B区', itemStyle: { color: '#91cc75' } },
        { value: 21.9, name: '保税区C区', itemStyle: { color: '#fac858' } },
        { value: 2.2, name: '残次品区D区', itemStyle: { color: '#ee6666' } }
      ]
      data: locationData
    }]
  };

@@ -247,7 +249,7 @@
  return inventoryPieChart;
};

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

@@ -256,6 +258,19 @@
  }

  stockTrendChart = echarts.init(stockTrendRef.value);
  // ä¼˜å…ˆä½¿ç”¨åŽç«¯æ•°æ®
  const trendData = bigscreendata.value.dailyInOutBoundList.length
    ? bigscreendata.value.dailyInOutBoundList
    : [
        { date: '12-18', inNum: 10, outNum: 16 },
        { date: '12-19', inNum: 12, outNum: 18 },
        { date: '12-20', inNum: 10, outNum: 14 },
        { date: '12-21', inNum: 12, outNum: 18 },
        { date: '12-22', inNum: 10, outNum: 16 },
        { date: '12-23', inNum: 12, outNum: 18 },
        { date: '12-24', inNum: 12, outNum: 20 }
      ];

  const option = {
    tooltip: {
      trigger: 'axis',
@@ -277,7 +292,7 @@
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: ['12-18', '12-19', '12-20', '12-21', '12-22', '12-23', '12-24']
      data: trendData.map(item => item.date)
    },
    yAxis: {
      type: 'value',
@@ -289,14 +304,14 @@
        name: '入库量',
        type: 'bar',
        barWidth: '30%',
        data: [10, 12, 10, 12, 10, 12, 12],
        data: trendData.map(item => item.inNum),
        itemStyle: { color: '#52c41a' }
      },
      {
        name: '出库量',
        type: 'bar',
        barWidth: '30%',
        data: [16, 18, 14, 18, 16, 18, 20],
        data: trendData.map(item => item.outNum),
        itemStyle: { color: '#1890ff' }
      }
    ]
@@ -306,161 +321,76 @@
  return stockTrendChart;
};

// åˆå§‹åŒ–库位利用率环形图
// åˆå§‹åŒ–库位利用率环形图（修正：统一实例管理，关联后端数据）
const initLocationRate = () => {
  if (!locationRateRef.value) return;

  // é”€æ¯æ—§å®žä¾‹
  if (locationRateChart) {
    locationRateChart.dispose();
  }

  locationRateChart = echarts.init(locationRateRef.value);
  // ä¼˜å…ˆä½¿ç”¨åŽç«¯æ•°æ®ï¼Œæ— æ•°æ®åˆ™ç”¨é»˜è®¤å€¼
  console.log('库位利用率数据', bigscreendata.value.locationUtilizationRate);
  const utilizationRate = bigscreendata.value.locationUtilizationRate || 86.2;
  const freeRate = 100 - utilizationRate;

  const option = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
      trigger: 'item',
      formatter: '{b}: {c}%'
    },
    series: [{
      name: '库位利用率',
      type: 'gauge',
      min: 0,
      max: 100,
      splitNumber: 10,
      radius: '90%',
      center: ['50%', '55%'],
      startAngle: 180,
      endAngle: 0,
      progress: {
        show: true,
        width: 20,
        itemStyle: {
          color: '#1890ff'
        }
    legend: {
      bottom: 0,
      left: 'center',
      data: ['已占用库位', '空闲库位'],
      textStyle: { fontSize: 12, color: '#666' }
      },
      axisLine: {
        lineStyle: {
          width: 20,
          color: [[1, 'rgba(200,200,200,0.3)']]
        }
      },
      axisTick: {
        distance: -30,
        splitNumber: 5,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        distance: -30,
        length: 14,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: -20,
        color: '#999',
        fontSize: 12
      },
      anchor: {
        show: false
      },
      title: {
        show: true,
        offsetCenter: [0, '30%'],
        fontSize: 16,
        fontWeight: 'bold'
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}%',
        fontSize: 20,
    graphic: [
      {
        type: 'text',
        left: 'right',
        top: '10%',
        style: {
          text: `${utilizationRate}%`,
          fontSize: 24,
        fontWeight: 'bold',
        offsetCenter: [0, '70%']
          fill: '#333'
        }
      },
      data: [{
        value: 86.2,
        name: '库位利用率'
      }]
    }]
      {
        type: 'text',
        left: 'right',
        top: '25%',
        style: {
          text: '库位利用率',
          fontSize: 14,
          fill: '#666'
        }
      }
    ],
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: utilizationRate, name: '已占用库位', itemStyle: { color: '#1890ff' } },
          { value: freeRate, name: '空闲库位', itemStyle: { color: '#e5e9f2' } }
        ]
      }
    ]
  };

  locationRateChart.setOption(option);
  return locationRateChart;
};

// åˆå§‹åŒ–作业类型雷达图
const initOperationRadar = () => {
  if (!operationRadarRef.value) return;

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

  operationRadarChart = echarts.init(operationRadarRef.value);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: false
    },
    radar: {
      indicator: [
        { name: '出库作业', max: 100 },
        { name: '入库作业', max: 100 },
        { name: '调拨作业', max: 100 },
        { name: '盘点作业', max: 100 }
      ],
      shape: 'circle',
      splitNumber: 5,
      axisName: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,0,0,0.1)'
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(255,255,255,0.8)', 'rgba(200,200,200,0.2)']
        }
      }
    },
    series: [{
      name: '作业类型分布',
      type: 'radar',
      symbolSize: 8,
      areaStyle: {
        color: 'rgba(24,144,255,0.3)'
      },
      lineStyle: {
        width: 2
      },
      itemStyle: {
        color: '#1890ff'
      },
      data: [{
        value: [45, 30, 15, 10],
        name: '作业占比',
        label: {
          show: true,
          formatter: function (params) {
            return params.value + '%';
          }
        }
      }]
    }]
  };

  operationRadarChart.setOption(option);
  return operationRadarChart;
};

// åˆå§‹åŒ–异常趋势折线图
// åˆå§‹åŒ–异常类型统计趋势图（关联后端数据）
const initExceptionTrend = () => {
  if (!exceptionTrendRef.value) return;

@@ -469,6 +399,17 @@
  }

  exceptionTrendChart = echarts.init(exceptionTrendRef.value);
  // ä¼˜å…ˆä½¿ç”¨åŽç«¯æ•°æ®
  const exceptionData = bigscreendata.value.exceptionTypeTrend.length
    ? bigscreendata.value.exceptionTypeTrend
    : {
        dates: ['12-18', '12-19', '12-20', '12-21', '12-22', '12-23', '12-24'],
        stockShort: [10, 11, 9, 12, 10, 13, 12],
        orderTimeout: [8, 9, 7, 8, 7, 9, 8],
        locationException: [4, 5, 2, 4, 3, 5, 4],
        checkDiff: [2, 3, 1, 2, 1, 3, 2]
      };

  const option = {
    tooltip: {
      trigger: 'axis',
@@ -490,7 +431,7 @@
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['12-18', '12-19', '12-20', '12-21', '12-22', '12-23', '12-24']
      data: exceptionData.dates
    },
    yAxis: {
      type: 'value',
@@ -503,11 +444,9 @@
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        data: [10, 11, 9, 12, 10, 13, 12],
        data: exceptionData.stockShort,
        itemStyle: { color: '#ff4d4f' },
        lineStyle: {
          width: 3
        }
        lineStyle: { width: 3 }
      },
      {
        name: '订单超时',
@@ -515,11 +454,9 @@
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        data: [8, 9, 7, 8, 7, 9, 8],
        data: exceptionData.orderTimeout,
        itemStyle: { color: '#faad14' },
        lineStyle: {
          width: 3
        }
        lineStyle: { width: 3 }
      },
      {
        name: '库位异常',
@@ -527,11 +464,9 @@
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        data: [4, 5, 2, 4, 3, 5, 4],
        data: exceptionData.locationException,
        itemStyle: { color: '#722ed1' },
        lineStyle: {
          width: 3
        }
        lineStyle: { width: 3 }
      },
      {
        name: '盘点差异',
@@ -539,11 +474,9 @@
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        data: [2, 3, 1, 2, 1, 3, 2],
        data: exceptionData.checkDiff,
        itemStyle: { color: '#13c2c2' },
        lineStyle: {
          width: 3
        }
        lineStyle: { width: 3 }
      }
    ]
  };
@@ -552,13 +485,12 @@
  return exceptionTrendChart;
};

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

@@ -570,13 +502,12 @@
  });
};

// ç›‘听窗口大小变化
// çª—口大小变化监听
const handleResize = () => {
  const charts = [
    inventoryPieChart,
    stockTrendChart,
    locationRateChart,
    operationRadarChart,
    exceptionTrendChart
  ];

@@ -587,26 +518,26 @@
  });
};

// æŒ‚载后初始化图表
// ç»„件挂载时：先请求数据，再初始化图表
onMounted(() => {
  // å…ˆèŽ·å–后端数据
  fetchBigGreenData();
  // åˆå§‹åŒ–图表（确保DOM已渲染）
  nextTick(() => {
    initInventoryPie();
    initStockTrend();
    initLocationRate();
    initOperationRadar();
    initExceptionTrend();

    window.addEventListener('resize', handleResize);
  });
});

// ç»„件卸载时清理
// ç»„件卸载时：销毁图表实例，移除事件监听
onUnmounted(() => {
  const charts = [
    inventoryPieChart,
    stockTrendChart,
    locationRateChart,
    operationRadarChart,
    exceptionTrendChart
  ];

@@ -677,7 +608,7 @@
}

.chart-card {
  height: 320px;
  height: 350px;
  padding: 15px;
  display: flex;
  flex-direction: column;
@@ -686,7 +617,7 @@
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 250px;
  min-height: 240px;
  flex: 1;
}