From 692bac93d58d9223b05ae44d24addeaa71f58791 Mon Sep 17 00:00:00 2001
From: "han\\hanst" <songtao.han@xujiesoft.com>
Date: Sat, 25 Oct 2025 10:56:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9C=9F=E5=AE=9E=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/finished-product-board.vue      | 216 +++++++++---------
 .../dashboard/material-receiving-board.vue    | 206 +++++++++--------
 2 files changed, 212 insertions(+), 210 deletions(-)

diff --git a/src/views/modules/dashboard/finished-product-board.vue b/src/views/modules/dashboard/finished-product-board.vue
index 03aec10..bd9333a 100644
--- a/src/views/modules/dashboard/finished-product-board.vue
+++ b/src/views/modules/dashboard/finished-product-board.vue
@@ -63,8 +63,8 @@
                 <td class="text-center">{{ item.storageLocation }}</td>
                 <td class="text-center">{{ item.palletCode }}</td>
                 <td class="text-center">{{ item.pickingLocation }}</td>
-                <td class="text-left">{{ item.materialName }}</td>
-                <td class="text-right">{{ item.quantity }}</td>
+                <td class="text-center">{{ item.materialName }}</td>
+                <td class="text-center">{{ item.quantity }}</td>
                 <td class="text-center">
                   <span :class="['status-badge', getStatusClass(item.status)]">
                     {{ item.status }}
@@ -127,6 +127,7 @@
 
 <script>
 import {finishedProductBoard} from '@/api/dashboard/dashboard.js'
+import WebSocketClient from '@/utils/websocket'
 
 export default {
   name: 'FinishedProductBoard',
@@ -135,143 +136,138 @@ export default {
     return {
       currentTime: '',
       timeInterval: null,
-      dataInterval: null,
+
+      // WebSocket相关
+      useWebSocket: true,  // 是否使用WebSocket（可切换为false降级到轮询）
+      wsConnected: false,  // WebSocket连接状态
+      wsSubscription: null,  // WebSocket订阅ID
 
       // 成品包装区数据
-      packagingList: [
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00001',
-          pickingLocation: '2-1',
-          materialName: '80501234',
-          quantity: '1,000',
-          status: '已到达'
-        },
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00001',
-          pickingLocation: '1-2',
-          materialName: '80501235',
-          quantity: '5000',
-          status: '已到达'
-        },
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00001',
-          pickingLocation: '1-2',
-          materialName: '80501236',
-          quantity: '1000',
-          status: '已到达'
-        },
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00001',
-          pickingLocation: '1-3',
-          materialName: '80501237',
-          quantity: '1000',
-          status: '已到达'
-        },
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00001',
-          pickingLocation: '1-4',
-          materialName: '80501238',
-          quantity: '5000',
-          status: '已到达'
-        },
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00001',
-          pickingLocation: '2-2',
-          materialName: '80501239',
-          quantity: '1000',
-          status: '已到达'
-        },
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00001',
-          pickingLocation: '2-3',
-          materialName: '80501240',
-          quantity: '2000',
-          status: '已到达'
-        },
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00001',
-          pickingLocation: '2-4',
-          materialName: '80501241',
-          quantity: '123',
-          status: '已到达'
-        }
-      ],
+      packagingList: [],
 
       // 成品入库区数据
-      inboundList: [
-        {
-          storageLocation: 'CP01',
-          palletCode: 'P00002',
-          taskType: '入库',
-          status: 'AGV运送中'
-        },
-        {
-          storageLocation: 'CP02',
-          palletCode: 'P00003',
-          taskType: '入库',
-          status: '已组盘'
-        },
-        {
-          storageLocation: 'CP03',
-          palletCode: 'P00004',
-          taskType: '入库',
-          status: '已组盘'
-        },
-        {
-          storageLocation: 'CP04',
-          palletCode: 'P00010',
-          taskType: '生产送货',
-          status: '已到达'
-        }
-      ]
+      inboundList: []
     }
   },
 
   mounted() {
+    // 启动时钟
     this.updateTime()
     this.timeInterval = setInterval(() => {
       this.updateTime()
     }, 1000)
 
-    // 首次加载数据
-    this.getDataList()
-
-    // 每10秒刷新一次数据
-    this.dataInterval = setInterval(() => {
-      this.getDataList()
-    }, 10000)
+    // 根据配置选择使用WebSocket或轮询
+    if (this.useWebSocket) {
+      this.initWebSocket()
+    }
   },
 
   beforeDestroy() {
+    // 清理时钟
     if (this.timeInterval) {
       clearInterval(this.timeInterval)
     }
-    if (this.dataInterval) {
-      clearInterval(this.dataInterval)
-    }
+
+    // 断开WebSocket连接
+    this.disconnectWebSocket()
   },
 
   methods: {
+    /**
+     * 初始化WebSocket连接
+     */
+    initWebSocket() {
+      var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
+      // 连接WebSocket服务器
+      const wsUrl = apiServer + '/ws/dashboard'
+
+      WebSocketClient.connect(
+        wsUrl,
+        () => {
+          this.wsConnected = true
+
+          // 订阅成品入库出库区看板主题
+          this.wsSubscription = WebSocketClient.subscribe(
+            '/topic/dashboard/finished-product-board',
+            this.handleWebSocketMessage
+          )
+        },
+        (error) => {
+          // 连接失败回调
+          console.error('[成品入库出库区看板] WebSocket连接失败，降级到轮询模式', error)
+          this.wsConnected = false
+          this.fallbackToPolling()
+        }
+      )
+    },
+
+    /**
+     * 处理WebSocket推送的消息
+     *
+     * @param {object} message WebSocket推送的消息
+     */
+    handleWebSocketMessage(message) {
+      if (message && message.code === 0) {
+        this.packagingList = message.data.packagingList || []
+        this.inboundList = message.data.inboundList || []
+      }
+    },
+
+    /**
+     * 断开WebSocket连接
+     */
+    disconnectWebSocket() {
+      if (this.wsSubscription) {
+        WebSocketClient.unsubscribe(this.wsSubscription)
+        this.wsSubscription = null
+      }
+
+      if (this.wsConnected) {
+        WebSocketClient.disconnect()
+        this.wsConnected = false
+        console.log('[成品入库出库区看板] WebSocket已断开')
+      }
+    },
+
+    /**
+     * 降级到轮询模式
+     */
+    fallbackToPolling() {
+      this.getDataList()
+    },
+
     /**
      * 获取数据列表
+     *
+     * <p><b>功能说明：</b>从后端API获取成品入库出库区看板实时数据</p>
+     * <p><b>数据更新策略：</b>覆盖而非追加，避免内存累积</p>
      */
     getDataList() {
       finishedProductBoard({}).then(({data}) => {
         if (data && data.code === 200) {
           console.log('获取成品入库出库区数据成功:', data.data)
-          // TODO: 处理返回的数据，覆盖而非追加，避免内存累积
-          // if (data.data) {
-          //   this.packagingList = data.data.packagingList || []
-          //   this.inboundList = data.data.inboundList || []
-          // }
+
+          // 处理返回的数据
+          if (data.data) {
+            // 成品包装区数据
+            if (data.data.packagingList && data.data.packagingList.length > 0) {
+              this.packagingList = data.data.packagingList
+              console.log('成品包装区数据已更新，共', this.packagingList.length, '条')
+            } else {
+              console.log('暂无成品包装区数据')
+            }
+
+            // 成品入库区数据
+            if (data.data.inboundList && data.data.inboundList.length > 0) {
+              this.inboundList = data.data.inboundList
+              console.log('成品入库区数据已更新，共', this.inboundList.length, '条')
+            } else {
+              console.log('暂无成品入库区数据')
+            }
+          }
+        } else {
+          console.error('获取成品入库出库区数据失败: 返回码不正确')
         }
       }).catch(error => {
         console.error('获取成品入库出库区数据失败:', error)
diff --git a/src/views/modules/dashboard/material-receiving-board.vue b/src/views/modules/dashboard/material-receiving-board.vue
index 945ccc2..dcee28c 100644
--- a/src/views/modules/dashboard/material-receiving-board.vue
+++ b/src/views/modules/dashboard/material-receiving-board.vue
@@ -125,6 +125,7 @@
 
 <script>
 import {materialReceivingBoard} from '@/api/dashboard/dashboard.js'
+import WebSocketClient from '@/utils/websocket'
 
 export default {
   name: 'MaterialReceivingBoard',
@@ -133,135 +134,140 @@ export default {
     return {
       currentTime: '',
       timeInterval: null,
-      dataInterval: null,
+
+      // WebSocket相关
+      useWebSocket: true,  // 是否使用WebSocket（可切换为false降级到轮询）
+      wsConnected: false,  // WebSocket连接状态
+      wsSubscription: null,  // WebSocket订阅ID
 
       // 原材收货区数据
-      receivingList: [
-        {
-          arrivalTime: '2025/10/15',
-          materialName: '80501234',
-          quantity: '1,000',
-          location: 'FMQ',
-          status: '待检验'
-        },
-        {
-          arrivalTime: '2025/10/15',
-          materialName: '80501235',
-          quantity: '5000',
-          location: 'FMQ',
-          status: '待检验'
-        },
-        {
-          arrivalTime: '2025/10/15',
-          materialName: '80501236',
-          quantity: '1000',
-          location: 'FMQ',
-          status: '检验OK'
-        },
-        {
-          arrivalTime: '2025/10/15',
-          materialName: '80501237',
-          quantity: '1000',
-          location: 'FMQ',
-          status: '检验OK'
-        },
-        {
-          arrivalTime: '2025/10/15',
-          materialName: '80501238',
-          quantity: '5000',
-          location: 'FMQ',
-          status: '检验NG'
-        },
-        {
-          arrivalTime: '1902/10/10',
-          materialName: '80501239',
-          quantity: '1000',
-          location: 'YCHC01',
-          status: '待入库'
-        },
-        {
-          arrivalTime: '1902/10/10',
-          materialName: '80501240',
-          quantity: '2000',
-          location: 'YCHC01',
-          status: '待入库'
-        },
-        {
-          arrivalTime: '1902/10/10',
-          materialName: '80501241',
-          quantity: '123',
-          location: 'YCHC01',
-          status: '待入库'
-        }
-      ],
+      receivingList: [],
 
       // 原材入库区数据
-      inboundList: [
-        {
-          storageLocation: 'YC01',
-          palletCode: 'G00002',
-          taskType: '入库',
-          status: 'AGV运送中'
-        },
-        {
-          storageLocation: 'YC02',
-          palletCode: 'G00003',
-          taskType: '入库',
-          status: '已组盘'
-        },
-        {
-          storageLocation: 'YC03',
-          palletCode: 'G00004',
-          taskType: '入库',
-          status: '已组盘'
-        },
-        {
-          storageLocation: 'YC04',
-          palletCode: 'G00010',
-          taskType: '退料',
-          status: '已到达'
-        }
-      ]
+      inboundList: []
     }
   },
 
   mounted() {
+    // 启动时钟
     this.updateTime()
     this.timeInterval = setInterval(() => {
       this.updateTime()
     }, 1000)
 
-    // 首次加载数据
-    this.getDataList()
-
-    // 每10秒刷新一次数据
-    this.dataInterval = setInterval(() => {
-      this.getDataList()
-    }, 10000)
+    // 根据配置选择使用WebSocket或轮询
+    if (this.useWebSocket) {
+      this.initWebSocket()
+    }
   },
 
   beforeDestroy() {
+    // 清理时钟
     if (this.timeInterval) {
       clearInterval(this.timeInterval)
     }
-    if (this.dataInterval) {
-      clearInterval(this.dataInterval)
-    }
+
+    // 断开WebSocket连接
+    this.disconnectWebSocket()
   },
 
   methods: {
+    /**
+     * 初始化WebSocket连接
+     */
+    initWebSocket() {
+      var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
+      // 连接WebSocket服务器
+      const wsUrl = apiServer + '/ws/dashboard'
+
+      WebSocketClient.connect(
+        wsUrl,
+        () => {
+          this.wsConnected = true
+
+          // 订阅原材收货区看板主题
+          this.wsSubscription = WebSocketClient.subscribe(
+            '/topic/dashboard/material-receiving-board',
+            this.handleWebSocketMessage
+          )
+        },
+        (error) => {
+          // 连接失败回调
+          console.error('[原材收货区看板] WebSocket连接失败，降级到轮询模式', error)
+          this.wsConnected = false
+          this.fallbackToPolling()
+        }
+      )
+    },
+
+    /**
+     * 处理WebSocket推送的消息
+     *
+     * @param {object} message WebSocket推送的消息
+     */
+    handleWebSocketMessage(message) {
+      if (message && message.code === 0) {
+        this.receivingList = message.data.receivingList || []
+        this.inboundList = message.data.inboundList || []
+      }
+    },
+
+    /**
+     * 断开WebSocket连接
+     */
+    disconnectWebSocket() {
+      if (this.wsSubscription) {
+        WebSocketClient.unsubscribe(this.wsSubscription)
+        this.wsSubscription = null
+      }
+
+      if (this.wsConnected) {
+        WebSocketClient.disconnect()
+        this.wsConnected = false
+        console.log('[原材收货区看板] WebSocket已断开')
+      }
+    },
+
+    /**
+     * 降级到轮询模式
+     */
+    fallbackToPolling() {
+      console.log('[原材收货区看板] 启动轮询模式，每10秒刷新一次')
+      // 首次立即获取数据
+      this.getDataList()
+    },
+
     /**
      * 获取数据列表
+     *
+     * <p><b>功能说明：</b>从后端API获取原材收货区看板实时数据</p>
+     * <p><b>数据更新策略：</b>覆盖而非追加，避免内存累积</p>
      */
     getDataList() {
       materialReceivingBoard({}).then(({data}) => {
         if (data && data.code === 200) {
           console.log('获取原材收货区数据成功:', data.data)
-          // TODO: 处理返回的数据，覆盖而非追加，避免内存累积
-          // if (data.data) {
-          //   this.receivingList = data.data.receivingList || []
-          //   this.inboundList = data.data.inboundList || []
-          // }
+
+          // 处理返回的数据
+          if (data.data) {
+            // 原材收货区数据
+            if (data.data.receivingList && data.data.receivingList.length > 0) {
+              this.receivingList = data.data.receivingList
+              console.log('原材收货区数据已更新，共', this.receivingList.length, '条')
+            } else {
+              console.log('暂无原材收货区数据')
+            }
+
+            // 原材入库区数据
+            if (data.data.inboundList && data.data.inboundList.length > 0) {
+              this.inboundList = data.data.inboundList
+              console.log('原材入库区数据已更新，共', this.inboundList.length, '条')
+            } else {
+              console.log('暂无原材入库区数据')
+            }
+          }
+        } else {
+          console.error('获取原材收货区数据失败: 返回码不正确')
         }
       }).catch(error => {
         console.error('获取原材收货区数据失败:', error)