From 8d6b140e6cd0a637d29f7bc0e0410049bd1bc930 Mon Sep 17 00:00:00 2001
From: "han\\hanst" <songtao.han@xujiesoft.com>
Date: Sat, 1 Nov 2025 19:02:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E5=B7=A5=E6=8B=A3=E9=80=89=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   4 +-
 .../modules/dashboard/picking-board-1028.vue  | 683 ++++++++++++++++++
 .../modules/dashboard/picking-board-1043.vue  | 683 ++++++++++++++++++
 src/views/modules/dashboard/picking-board.vue | 151 +++-
 .../dashboard/robot-picking-container.vue     | 662 +++++++++++++++++
 .../dashboard/robot-picking-material.vue      | 663 +++++++++++++++++
 6 files changed, 2810 insertions(+), 36 deletions(-)
 create mode 100644 src/views/modules/dashboard/picking-board-1028.vue
 create mode 100644 src/views/modules/dashboard/picking-board-1043.vue
 create mode 100644 src/views/modules/dashboard/robot-picking-container.vue
 create mode 100644 src/views/modules/dashboard/robot-picking-material.vue

diff --git a/src/router/index.js b/src/router/index.js
index 2e20782..6c25209 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,7 +21,9 @@ const globalRoutes = [
   { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
   { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
   { path: '/dashboard-picking-board', component: _import('modules/dashboard/picking-board'), name: 'dashboard-picking-board', meta: { title: '人工拣选看板' } },
-  { path: '/dashboard-robot-picking-board', component: _import('modules/dashboard/robot-picking-board'), name: 'dashboard-robot-picking-board', meta: { title: '机械臂拣选看板' } },
+  { path: '/dashboard-picking2-board', component: _import('modules/dashboard/picking-board-1028'), name: 'dashboard-picking-board', meta: { title: '人工拣选看板' } },
+  { path: '/dashboard-robot-picking-board', component: _import('modules/dashboard/robot-picking-board'), name: 'dashboard-robot-picking-container', meta: { title: '机械臂拣选-周转箱' } },
+  { path: '/dashboard-robot-picking-material', component: _import('modules/dashboard/robot-picking-material'), name: 'dashboard-robot-picking-material', meta: { title: '机械臂拣选-原材' } },
   { path: '/dashboard-slitting-board', component: _import('modules/dashboard/slitting-board'), name: 'dashboard-slitting-board', meta: { title: '分切区看板' } },
   { path: '/dashboard-finished-product-board', component: _import('modules/dashboard/finished-product-board'), name: 'dashboard-finished-product-board', meta: { title: '成品入库出库区看板' } },
   { path: '/dashboard-material-receiving-board', component: _import('modules/dashboard/material-receiving-board'), name: 'dashboard-material-receiving-board', meta: { title: '原材收货区看板' } },
diff --git a/src/views/modules/dashboard/picking-board-1028.vue b/src/views/modules/dashboard/picking-board-1028.vue
new file mode 100644
index 0000000..105dfad
--- /dev/null
+++ b/src/views/modules/dashboard/picking-board-1028.vue
@@ -0,0 +1,683 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <!-- CCL Logo -->
+      <div class="header-logo">
+        <img src="~@/assets/img/cclbai.png" alt="CCL Logo" class="logo-img">
+      </div>
+
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">人工拣选实时看板</h1>
+        <div class="title-subtitle">Manual Picking Real-time Dashboard</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content">
+      <!-- 拣选面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题栏 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">人工拣选2</span>
+              <span class="title-divider">|</span>
+              <span class="title-sub">工单号码: <strong>{{ workOrderNo }}</strong></span>
+              <span class="title-divider">|</span>
+              <span class="title-sub">产品名称: <strong>{{ materialName }}</strong></span>
+              <span class="title-divider"></span>
+              <span class="title-sub">工单时间: <strong>{{ workOrderTime }}</strong></span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 60px;">No.</th>
+                <th style="width: 150px;">拣选托盘码</th>
+                <th style="width: 200px;">拣选物料名称</th>
+                <th style="width: 120px;">RFID</th>
+                <th style="width: 150px;">状态</th>
+                <th style="width: 120px;">存放位置</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in station1028List" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.pickingBatchNo }}</td>
+                <td class="text-center">{{ item.pickingMaterialName }}</td>
+                <td class="text-center">{{ item.rfidBarcode }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WebSocketClient from '@/utils/websocket'
+
+export default {
+  name: 'PickingBoard1028',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      serverTimeOffset: 0,  // 服务器时间偏移量（毫秒）
+
+      // WebSocket相关
+      useWebSocket: true,  // 是否使用WebSocket
+      wsConnected: false,  // WebSocket连接状态
+      wsSubscription: null,  // WebSocket订阅ID
+
+      // 1028站数据
+      station1028List: [],
+      
+      // 工单信息
+      workOrderNo: '',
+      materialName: '',
+      workOrderTime: '',
+      
+      // 自动滚动相关
+      scrollInterval: null,
+      scrollSpeed: 50  // 滚动速度（毫秒）
+    }
+  },
+
+  mounted() {
+    // 初始化时间显示
+    this.currentTime = '等待服务器时间同步...'
+
+    // 启动时钟定时器（每秒更新）
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+
+    // 根据配置选择使用WebSocket
+    if (this.useWebSocket) {
+      this.initWebSocket()
+    }
+    
+    // 启动自动滚动
+    this.$nextTick(() => {
+      this.startAutoScroll()
+    })
+  },
+
+  beforeDestroy() {
+    // 清理时间更新定时器
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    // 清理自动滚动定时器
+    if (this.scrollInterval) {
+      clearInterval(this.scrollInterval)
+    }
+    // 断开WebSocket连接
+    this.disconnectWebSocket()
+  },
+
+  methods: {
+    /**
+     * 更新服务器时间偏移量
+     */
+    updateServerTimeOffset(serverTimeString) {
+      try {
+        const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
+        const serverTime = new Date(timeStr).getTime()
+        const localTime = new Date().getTime()
+
+        if (!isNaN(serverTime)) {
+          this.serverTimeOffset = serverTime - localTime
+        }
+      } catch (error) {
+        console.warn('解析服务器时间失败:', error)
+      }
+    },
+
+    /**
+     * 更新当前时间（使用服务器时间偏移量）
+     */
+    updateTime() {
+      const now = new Date(new Date().getTime() + this.serverTimeOffset)
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '完成': 'status-success',
+        '分拣中': 'status-warning',
+        '等待分拣': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    },
+
+    /**
+     * 初始化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
+          console.log('[1028站看板] WebSocket连接成功')
+
+          // 订阅人工拣选看板主题
+          this.wsSubscription = WebSocketClient.subscribe(
+            '/topic/dashboard/manual-picking',
+            this.handleWebSocketMessage
+          )
+        },
+        (error) => {
+          // 连接失败回调
+          console.error('[1028站看板] WebSocket连接失败', error)
+          this.wsConnected = false
+        }
+      )
+    },
+
+    /**
+     * 处理WebSocket推送的消息
+     *
+     * @param {object} message WebSocket推送的消息
+     */
+    handleWebSocketMessage(message) {
+      if (message && message.code === 0) {
+        // 更新服务器时间偏移量
+        if (message.serverTime) {
+          this.updateServerTimeOffset(message.serverTime)
+        }
+
+        // 更新看板数据
+        if (message.data) {
+          // 更新1028站数据
+          if (message.data.station1028List) {
+            this.station1028List = message.data.station1028List
+            
+            // 更新工单信息（从第一条数据中提取）
+            if (this.station1028List.length > 0) {
+              this.materialName = this.station1028List[0].pickingMaterialName || ''
+              // 如果后端推送了工单号和工单时间，则更新
+              this.workOrderNo = this.station1028List[0].workOrderNo || ''
+              this.workOrderTime = this.station1028List[0].workOrderTime || ''
+            }
+            
+            console.log('[1028站看板] 数据更新成功:', this.station1028List.length, '条')
+          }
+        }
+      }
+    },
+
+    /**
+     * 断开WebSocket连接
+     */
+    disconnectWebSocket() {
+      if (this.wsSubscription) {
+        WebSocketClient.unsubscribe(this.wsSubscription)
+        this.wsSubscription = null
+        console.log('[1028站看板] 已取消订阅')
+      }
+
+      if (this.wsConnected) {
+        WebSocketClient.disconnect()
+        this.wsConnected = false
+        console.log('[1028站看板] WebSocket已断开')
+      }
+    },
+    
+    /**
+     * 启动自动滚动
+     */
+    startAutoScroll() {
+      const tableBody = this.$el.querySelector('.panel-table')
+      if (!tableBody) return
+      
+      // 如果数据少于等于10条，不需要滚动
+      if (this.station1028List.length <= 10) {
+        return
+      }
+      
+      this.scrollInterval = setInterval(() => {
+        if (tableBody.scrollTop + tableBody.clientHeight >= tableBody.scrollHeight) {
+          // 滚动到底部，重置到顶部
+          tableBody.scrollTop = 0
+        } else {
+          // 继续向下滚动
+          tableBody.scrollTop += 1
+        }
+      }, this.scrollSpeed)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+/* CCL Logo */
+.header-logo {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 20;
+}
+
+.logo-img {
+  height: 40px;
+  width: auto;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+  transition: all 0.3s ease;
+
+  &:hover {
+    filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
+    transform: scale(1.05);
+  }
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 34px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 拣选面板 ===== */
+.picking-panel {
+  width: 100%;
+  height: calc(100vh - 100px);
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 16px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 20px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+.title-divider {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 14px;
+}
+
+.title-sub {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.8);
+
+  strong {
+    color: #ffffff;
+    font-weight: 600;
+    font-family: 'Consolas', monospace;
+  }
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 10px;
+  flex: 1;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 10px 6px;
+      color: #fcfdfd;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 8px 6px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 15px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 80px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 30px;
+    letter-spacing: 3px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 38px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 20px;
+      padding: 16px 12px;
+    }
+
+    tbody td {
+      font-size: 20px;
+      padding: 14px 12px;
+    }
+  }
+
+  .status-badge {
+    font-size: 18px;
+    padding: 8px 18px;
+    min-width: 100px;
+  }
+}
+</style>
+
diff --git a/src/views/modules/dashboard/picking-board-1043.vue b/src/views/modules/dashboard/picking-board-1043.vue
new file mode 100644
index 0000000..f183195
--- /dev/null
+++ b/src/views/modules/dashboard/picking-board-1043.vue
@@ -0,0 +1,683 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <!-- CCL Logo -->
+      <div class="header-logo">
+        <img src="~@/assets/img/cclbai.png" alt="CCL Logo" class="logo-img">
+      </div>
+
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">人工拣选实时看板</h1>
+        <div class="title-subtitle">Manual Picking Real-time Dashboard</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content">
+      <!-- 拣选面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题栏 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">人工拣选1</span>
+              <span class="title-divider">|</span>
+              <span class="title-sub">工单号码: <strong>{{ workOrderNo }}</strong></span>
+              <span class="title-divider">|</span>
+              <span class="title-sub">产品名称: <strong>{{ materialName }}</strong></span>
+              <span class="title-divider"></span>
+              <span class="title-sub">工单时间: <strong>{{ workOrderTime }}</strong></span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 60px;">No.</th>
+                <th style="width: 150px;">拣选托盘码</th>
+                <th style="width: 200px;">拣选物料名称</th>
+                <th style="width: 120px;">RFID</th>
+                <th style="width: 150px;">状态</th>
+                <th style="width: 120px;">存放位置</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in station1043List" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.pickingBatchNo }}</td>
+                <td class="text-center">{{ item.pickingMaterialName }}</td>
+                <td class="text-center">{{ item.rfidBarcode }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WebSocketClient from '@/utils/websocket'
+
+export default {
+  name: 'PickingBoard1043',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      serverTimeOffset: 0,  // 服务器时间偏移量（毫秒）
+
+      // WebSocket相关
+      useWebSocket: true,  // 是否使用WebSocket
+      wsConnected: false,  // WebSocket连接状态
+      wsSubscription: null,  // WebSocket订阅ID
+
+      // 1043站数据
+      station1043List: [],
+      
+      // 工单信息
+      workOrderNo: '',
+      materialName: '',
+      workOrderTime: '',
+      
+      // 自动滚动相关
+      scrollInterval: null,
+      scrollSpeed: 50  // 滚动速度（毫秒）
+    }
+  },
+
+  mounted() {
+    // 初始化时间显示
+    this.currentTime = '等待服务器时间同步...'
+
+    // 启动时钟定时器（每秒更新）
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+
+    // 根据配置选择使用WebSocket
+    if (this.useWebSocket) {
+      this.initWebSocket()
+    }
+    
+    // 启动自动滚动
+    this.$nextTick(() => {
+      this.startAutoScroll()
+    })
+  },
+
+  beforeDestroy() {
+    // 清理时间更新定时器
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    // 清理自动滚动定时器
+    if (this.scrollInterval) {
+      clearInterval(this.scrollInterval)
+    }
+    // 断开WebSocket连接
+    this.disconnectWebSocket()
+  },
+
+  methods: {
+    /**
+     * 更新服务器时间偏移量
+     */
+    updateServerTimeOffset(serverTimeString) {
+      try {
+        const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
+        const serverTime = new Date(timeStr).getTime()
+        const localTime = new Date().getTime()
+
+        if (!isNaN(serverTime)) {
+          this.serverTimeOffset = serverTime - localTime
+        }
+      } catch (error) {
+        console.warn('解析服务器时间失败:', error)
+      }
+    },
+
+    /**
+     * 更新当前时间（使用服务器时间偏移量）
+     */
+    updateTime() {
+      const now = new Date(new Date().getTime() + this.serverTimeOffset)
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '完成': 'status-success',
+        '分拣中': 'status-warning',
+        '等待分拣': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    },
+
+    /**
+     * 初始化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
+          console.log('[1043站看板] WebSocket连接成功')
+
+          // 订阅人工拣选看板主题
+          this.wsSubscription = WebSocketClient.subscribe(
+            '/topic/dashboard/manual-picking',
+            this.handleWebSocketMessage
+          )
+        },
+        (error) => {
+          // 连接失败回调
+          console.error('[1043站看板] WebSocket连接失败', error)
+          this.wsConnected = false
+        }
+      )
+    },
+
+    /**
+     * 处理WebSocket推送的消息
+     *
+     * @param {object} message WebSocket推送的消息
+     */
+    handleWebSocketMessage(message) {
+      if (message && message.code === 0) {
+        // 更新服务器时间偏移量
+        if (message.serverTime) {
+          this.updateServerTimeOffset(message.serverTime)
+        }
+
+        // 更新看板数据
+        if (message.data) {
+          // 更新1043站数据
+          if (message.data.station1043List) {
+            this.station1043List = message.data.station1043List
+            
+            // 更新工单信息（从第一条数据中提取）
+            if (this.station1043List.length > 0) {
+              this.materialName = this.station1043List[0].pickingMaterialName || ''
+              // 如果后端推送了工单号和工单时间，则更新
+              this.workOrderNo = this.station1043List[0].workOrderNo || ''
+              this.workOrderTime = this.station1043List[0].workOrderTime || ''
+            }
+            
+            console.log('[1043站看板] 数据更新成功:', this.station1043List.length, '条')
+          }
+        }
+      }
+    },
+
+    /**
+     * 断开WebSocket连接
+     */
+    disconnectWebSocket() {
+      if (this.wsSubscription) {
+        WebSocketClient.unsubscribe(this.wsSubscription)
+        this.wsSubscription = null
+        console.log('[1043站看板] 已取消订阅')
+      }
+
+      if (this.wsConnected) {
+        WebSocketClient.disconnect()
+        this.wsConnected = false
+        console.log('[1043站看板] WebSocket已断开')
+      }
+    },
+    
+    /**
+     * 启动自动滚动
+     */
+    startAutoScroll() {
+      const tableBody = this.$el.querySelector('.panel-table')
+      if (!tableBody) return
+      
+      // 如果数据少于等于10条，不需要滚动
+      if (this.station1043List.length <= 10) {
+        return
+      }
+      
+      this.scrollInterval = setInterval(() => {
+        if (tableBody.scrollTop + tableBody.clientHeight >= tableBody.scrollHeight) {
+          // 滚动到底部，重置到顶部
+          tableBody.scrollTop = 0
+        } else {
+          // 继续向下滚动
+          tableBody.scrollTop += 1
+        }
+      }, this.scrollSpeed)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+/* CCL Logo */
+.header-logo {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 20;
+}
+
+.logo-img {
+  height: 40px;
+  width: auto;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+  transition: all 0.3s ease;
+
+  &:hover {
+    filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
+    transform: scale(1.05);
+  }
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 34px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 拣选面板 ===== */
+.picking-panel {
+  width: 100%;
+  height: calc(100vh - 100px);
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 16px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 20px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+.title-divider {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 14px;
+}
+
+.title-sub {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.8);
+
+  strong {
+    color: #ffffff;
+    font-weight: 600;
+    font-family: 'Consolas', monospace;
+  }
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 10px;
+  flex: 1;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 10px 6px;
+      color: #fcfdfd;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 8px 6px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 15px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 80px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 30px;
+    letter-spacing: 3px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 38px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 20px;
+      padding: 16px 12px;
+    }
+
+    tbody td {
+      font-size: 20px;
+      padding: 14px 12px;
+    }
+  }
+
+  .status-badge {
+    font-size: 18px;
+    padding: 8px 18px;
+    min-width: 100px;
+  }
+}
+</style>
+
diff --git a/src/views/modules/dashboard/picking-board.vue b/src/views/modules/dashboard/picking-board.vue
index 1db810d..69030ba 100644
--- a/src/views/modules/dashboard/picking-board.vue
+++ b/src/views/modules/dashboard/picking-board.vue
@@ -35,7 +35,7 @@
       <div
         class="picking-panel"
         v-for="(order, index) in workOrders"
-        :key="order.workOrderNo"
+        :key="index"
       >
         <!-- 面板标题 -->
         <div class="panel-title-bar">
@@ -111,7 +111,7 @@
 </template>
 
 <script>
-import {manualPicking} from '@/api/dashboard/dashboard.js'
+import WebSocketClient from '@/utils/websocket'
 
 export default {
   name: 'PickingBoard',
@@ -120,9 +120,14 @@ export default {
     return {
       currentTime: '',
       timeInterval: null,
-      dataInterval: null,
+      serverTimeOffset: 0,  // 服务器时间偏移量（毫秒）
 
-      // 模拟工单数据
+      // WebSocket相关
+      useWebSocket: true,  // 是否使用WebSocket
+      wsConnected: false,  // WebSocket连接状态
+      wsSubscription: null,  // WebSocket订阅ID
+
+      // 工单数据
       workOrders: [
         {
           workOrderNo: '',
@@ -145,51 +150,52 @@ export default {
   },
 
   mounted() {
-    // 时间由HTTP API响应自动更新，不再使用定时器
+    // 初始化时间显示
     this.currentTime = '等待服务器时间同步...'
 
-    // 首次加载数据
-    this.getDataList()
+    // 启动时钟定时器（每秒更新）
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
 
-    // 每10秒刷新一次数据
-    this.dataInterval = setInterval(() => {
-      this.getDataList()
-    }, 10000)
+    // 根据配置选择使用WebSocket
+    if (this.useWebSocket) {
+      this.initWebSocket()
+    }
   },
 
   beforeDestroy() {
-    if (this.dataInterval) {
-      clearInterval(this.dataInterval)
+    // 清理时间更新定时器
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
     }
+    // 断开WebSocket连接
+    this.disconnectWebSocket()
   },
 
   methods: {
-    // 获取数据列表
-    getDataList() {
-      manualPicking({}).then(({data}) => {
-        if (data && data.code === 200) {
-          console.log('获取数据成功:', data.data)
-          
-          // 更新服务器时间
-          if (data.serverTime) {
-            this.currentTime = data.serverTime
-          }
-          
-          // TODO: 处理返回的数据，覆盖而非追加，避免内存累积
-          // if (data.data) {
-          //   this.leftPanelList = data.data.leftPanelList || []
-          //   this.rightPanelList = data.data.rightPanelList || []
-          // }
+    /**
+     * 更新服务器时间偏移量
+     */
+    updateServerTimeOffset(serverTimeString) {
+      try {
+        const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
+        const serverTime = new Date(timeStr).getTime()
+        const localTime = new Date().getTime()
+
+        if (!isNaN(serverTime)) {
+          this.serverTimeOffset = serverTime - localTime
         }
-      }).catch(error => {
-        console.error('获取数据失败:', error)
-      })
+      } catch (error) {
+        console.warn('解析服务器时间失败:', error)
+      }
     },
+
     /**
-     * 更新当前时间
+     * 更新当前时间（使用服务器时间偏移量）
      */
     updateTime() {
-      const now = new Date()
+      const now = new Date(new Date().getTime() + this.serverTimeOffset)
       const year = now.getFullYear()
       const month = String(now.getMonth() + 1).padStart(2, '0')
       const day = String(now.getDate()).padStart(2, '0')
@@ -199,7 +205,7 @@ export default {
       const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
       const weekDay = weekDays[now.getDay()]
 
-      this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
     },
 
     /**
@@ -212,6 +218,81 @@ export default {
         '等待分拣': 'status-pending'
       }
       return statusMap[status] || 'status-pending'
+    },
+
+    /**
+     * 初始化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
+          console.log('[人工拣选看板] WebSocket连接成功')
+
+          // 订阅人工拣选看板主题
+          this.wsSubscription = WebSocketClient.subscribe(
+            '/topic/dashboard/manual-picking',
+            this.handleWebSocketMessage
+          )
+        },
+        (error) => {
+          // 连接失败回调
+          console.error('[人工拣选看板] WebSocket连接失败', error)
+          this.wsConnected = false
+        }
+      )
+    },
+
+    /**
+     * 处理WebSocket推送的消息
+     *
+     * @param {object} message WebSocket推送的消息
+     */
+    handleWebSocketMessage(message) {
+      if (message && message.code === 0) {
+        // 更新服务器时间偏移量
+        if (message.serverTime) {
+          this.updateServerTimeOffset(message.serverTime)
+        }
+
+        // 更新看板数据
+        if (message.data) {
+          // 更新第一个表格 - 1043站
+          if (message.data.station1043List) {
+            this.workOrders[0].details = message.data.station1043List
+          }
+
+          // 更新第二个表格 - 1028站
+          if (message.data.station1028List) {
+            this.workOrders[1].details = message.data.station1028List
+          }
+
+          console.log('[人工拣选看板] 数据更新成功 - 1043站:',
+            this.workOrders[0].details.length, '条, 1028站:', this.workOrders[1].details.length, '条')
+        }
+      }
+    },
+
+    /**
+     * 断开WebSocket连接
+     */
+    disconnectWebSocket() {
+      if (this.wsSubscription) {
+        WebSocketClient.unsubscribe(this.wsSubscription)
+        this.wsSubscription = null
+        console.log('[人工拣选看板] 已取消订阅')
+      }
+
+      if (this.wsConnected) {
+        WebSocketClient.disconnect()
+        this.wsConnected = false
+        console.log('[人工拣选看板] WebSocket已断开')
+      }
     }
   }
 }
diff --git a/src/views/modules/dashboard/robot-picking-container.vue b/src/views/modules/dashboard/robot-picking-container.vue
new file mode 100644
index 0000000..7ac28c3
--- /dev/null
+++ b/src/views/modules/dashboard/robot-picking-container.vue
@@ -0,0 +1,662 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <!-- CCL Logo -->
+      <div class="header-logo">
+        <img src="~@/assets/img/cclbai.png" alt="CCL Logo" class="logo-img">
+      </div>
+
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">机械臂拣选 - 周转箱</h1>
+        <div class="title-subtitle">Robot Picking - Container</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content">
+      <!-- 周转箱拣选面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 60px;">No.</th>
+                <th style="width: 150px;">拣选托盘码</th>
+                <th style="width: 200px;">拣选物料名称</th>
+                <th style="width: 120px;">RFID</th>
+                <th style="width: 150px;">状态</th>
+                <th style="width: 150px;">存放托盘码</th>
+                <th style="width: 120px;">存放位置</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in containerPickingList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.pickingBatchNo }}</td>
+                <td class="text-center">{{ item.pickingMaterialName }}</td>
+                <td class="text-center">{{ item.rfidBarcode }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+                <td class="text-center">{{ item.storageBatchNo.length>10?'-':item.storageBatchNo }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {robotPicking} from '@/api/dashboard/dashboard.js'
+import WebSocketClient from '@/utils/websocket'
+
+export default {
+  name: 'RobotPickingContainer',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      serverTimeOffset: 0,  // 服务器时间偏移量（毫秒）
+
+      // WebSocket相关
+      useWebSocket: true,  // 是否使用WebSocket（可切换为false降级到轮询）
+      wsConnected: false,  // WebSocket连接状态
+      wsSubscription: null,  // WebSocket订阅ID
+
+      // 周转箱拣选数据
+      containerPickingList: []
+    }
+  },
+
+  mounted() {
+    // 初始化时间显示
+    this.currentTime = '等待服务器时间同步...'
+
+    // 启动时钟定时器（每秒更新）
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+
+    // 根据配置选择使用WebSocket或轮询
+    if (this.useWebSocket) {
+      this.initWebSocket()
+    }
+  },
+
+  beforeDestroy() {
+    // 清理时间更新定时器
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    // 断开WebSocket连接
+    this.disconnectWebSocket()
+  },
+
+  methods: {
+    /**
+     * 获取数据列表
+     *
+     * <p><b>功能说明：</b>从后端API获取周转箱拣选实时数据</p>
+     * <p><b>数据更新策略：</b>覆盖而非追加，避免内存累积</p>
+     */
+    getDataList() {
+      robotPicking({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取周转箱拣选数据成功:', data.data)
+
+          // 处理返回的数据
+          if (data.data) {
+            // 周转箱拣选数据 (sortingStation=1071)
+            if (data.data.containerList && data.data.containerList.length > 0) {
+              this.containerPickingList = data.data.containerList
+              console.log('周转箱拣选数据已更新，共', this.containerPickingList.length, '条')
+            } else {
+              console.log('暂无周转箱拣选数据')
+            }
+          }
+        } else {
+          console.error('获取周转箱拣选数据失败: 返回码不正确')
+        }
+      }).catch(error => {
+        console.error('获取周转箱拣选数据失败:', error)
+      })
+    },
+
+    /**
+     * 更新服务器时间偏移量
+     */
+    updateServerTimeOffset(serverTimeString) {
+      try {
+        const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
+        const serverTime = new Date(timeStr).getTime()
+        const localTime = new Date().getTime()
+
+        if (!isNaN(serverTime)) {
+          this.serverTimeOffset = serverTime - localTime
+        }
+      } catch (error) {
+        console.warn('解析服务器时间失败:', error)
+      }
+    },
+
+    /**
+     * 更新当前时间（使用服务器时间偏移量）
+     */
+    updateTime() {
+      const now = new Date(new Date().getTime() + this.serverTimeOffset)
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '完成': 'status-success',
+        '分拣中': 'status-warning',
+        '等待分拣': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    },
+
+    /**
+     * 初始化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/robot-picking',
+            this.handleWebSocketMessage
+          )
+        },
+        (error) => {
+          // 连接失败回调
+          console.error('[周转箱拣选看板] WebSocket连接失败，降级到轮询模式', error)
+          this.wsConnected = false
+          this.fallbackToPolling()
+        }
+      )
+    },
+
+    /**
+     * 处理WebSocket推送的消息
+     *
+     * @param {object} message WebSocket推送的消息
+     */
+    handleWebSocketMessage(message) {
+      if (message && message.code === 0) {
+        // 更新服务器时间偏移量
+        if (message.serverTime) {
+          this.updateServerTimeOffset(message.serverTime)
+        }
+
+        this.containerPickingList = message.data.containerList || []
+
+        // 如果 storageBatchNo.length < 10，则 status 改成 分拣中
+        this.containerPickingList.forEach(item => {
+          if (item.storageBatchNo && item.storageBatchNo.length < 10) {
+            item.status = '分拣中'
+          }
+        })
+
+        // 排序：分拣中 在最上面
+        this.containerPickingList.sort((a, b) => {
+          if (a.status === '分拣中' && b.status !== '分拣中') return -1
+          if (a.status !== '分拣中' && b.status === '分拣中') return 1
+          return 0
+        })
+      }
+    },
+
+    /**
+     * 断开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()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+/* CCL Logo */
+.header-logo {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 20;
+}
+
+.logo-img {
+  height: 40px;
+  width: auto;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+  transition: all 0.3s ease;
+
+  &:hover {
+    filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
+    transform: scale(1.05);
+  }
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 34px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  padding: 12px 20px;
+  border-radius: 8px;
+
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 拣选面板 ===== */
+.picking-panel {
+  width: 100%;
+  height: calc(100vh - 100px);
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 16px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 24px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 10px;
+  flex: 1;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 14px 8px;
+      color: #fcfdfd;
+      font-size: 18px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 12px 8px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 18px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 6px 16px;
+  border-radius: 14px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 90px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 30px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 22px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 38px;
+  }
+
+  .panel-title-bar {
+    padding: 16px 24px;
+  }
+
+  .title-main {
+    font-size: 28px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 20px;
+      padding: 16px 12px;
+    }
+
+    tbody td {
+      font-size: 20px;
+      padding: 14px 12px;
+    }
+  }
+
+  .status-badge {
+    font-size: 18px;
+    padding: 8px 18px;
+    min-width: 100px;
+  }
+}
+</style>
+
diff --git a/src/views/modules/dashboard/robot-picking-material.vue b/src/views/modules/dashboard/robot-picking-material.vue
new file mode 100644
index 0000000..196381d
--- /dev/null
+++ b/src/views/modules/dashboard/robot-picking-material.vue
@@ -0,0 +1,663 @@
+<template>
+  <div class="picking-board-screen">
+    <!-- 装饰背景 -->
+    <div class="bg-decoration">
+      <div class="decoration-line line-1"></div>
+      <div class="decoration-line line-2"></div>
+      <div class="decoration-line line-3"></div>
+      <div class="decoration-circle circle-1"></div>
+      <div class="decoration-circle circle-2"></div>
+    </div>
+
+    <!-- 顶部标题栏 -->
+    <div class="screen-header">
+      <!-- CCL Logo -->
+      <div class="header-logo">
+        <img src="~@/assets/img/cclbai.png" alt="CCL Logo" class="logo-img">
+      </div>
+
+      <div class="header-decoration left"></div>
+      <div class="header-center">
+        <div class="title-glow"></div>
+        <h1 class="screen-title">机械臂拣选 - 原材</h1>
+        <div class="title-subtitle">Robot Picking - Material</div>
+      </div>
+      <div class="header-decoration right"></div>
+      <div class="header-time">
+        <div class="time-icon"></div>
+        <div class="time-text">{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="screen-content">
+      <!-- 原材拣选面板 -->
+      <div class="picking-panel">
+        <!-- 面板标题 -->
+
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 60px;">No.</th>
+                <th style="width: 150px;">拣选托盘码</th>
+                <th style="width: 200px;">拣选物料名称</th>
+                <th style="width: 120px;">RFID</th>
+                <th style="width: 150px;">状态</th>
+                <th style="width: 150px;">存放托盘码</th>
+                <th style="width: 120px;">存放位置</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in materialPickingList" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.pickingBatchNo }}</td>
+                <td class="text-center">{{ item.pickingMaterialName }}</td>
+                <td class="text-center">{{ item.rfidBarcode }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+                <td class="text-center">{{ item.storageBatchNo.length>10?'-':item.storageBatchNo }}</td>
+                <td class="text-center">{{ item.storageLocation }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部装饰 -->
+    <div class="screen-footer">
+      <div class="footer-line"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {robotPicking} from '@/api/dashboard/dashboard.js'
+import WebSocketClient from '@/utils/websocket'
+
+export default {
+  name: 'RobotPickingMaterial',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+      serverTimeOffset: 0,  // 服务器时间偏移量（毫秒）
+
+      // WebSocket相关
+      useWebSocket: true,  // 是否使用WebSocket（可切换为false降级到轮询）
+      wsConnected: false,  // WebSocket连接状态
+      wsSubscription: null,  // WebSocket订阅ID
+
+      // 原材拣选数据
+      materialPickingList: []
+    }
+  },
+
+  mounted() {
+    // 初始化时间显示
+    this.currentTime = '等待服务器时间同步...'
+
+    // 启动时钟定时器（每秒更新）
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+
+    // 根据配置选择使用WebSocket或轮询
+    if (this.useWebSocket) {
+      this.initWebSocket()
+    }
+  },
+
+  beforeDestroy() {
+    // 清理时间更新定时器
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+    // 断开WebSocket连接
+    this.disconnectWebSocket()
+  },
+
+  methods: {
+    /**
+     * 获取数据列表
+     *
+     * <p><b>功能说明：</b>从后端API获取原材拣选实时数据</p>
+     * <p><b>数据更新策略：</b>覆盖而非追加，避免内存累积</p>
+     */
+    getDataList() {
+      robotPicking({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取原材拣选数据成功:', data.data)
+
+          // 处理返回的数据
+          if (data.data) {
+            // 原材拣选数据 (sortingStation=1060)
+            if (data.data.materialList && data.data.materialList.length > 0) {
+              this.materialPickingList = data.data.materialList
+              console.log('原材拣选数据已更新，共', this.materialPickingList.length, '条')
+            } else {
+              console.log('暂无原材拣选数据')
+            }
+          }
+        } else {
+          console.error('获取原材拣选数据失败: 返回码不正确')
+        }
+      }).catch(error => {
+        console.error('获取原材拣选数据失败:', error)
+      })
+    },
+
+    /**
+     * 更新服务器时间偏移量
+     */
+    updateServerTimeOffset(serverTimeString) {
+      try {
+        const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
+        const serverTime = new Date(timeStr).getTime()
+        const localTime = new Date().getTime()
+
+        if (!isNaN(serverTime)) {
+          this.serverTimeOffset = serverTime - localTime
+        }
+      } catch (error) {
+        console.warn('解析服务器时间失败:', error)
+      }
+    },
+
+    /**
+     * 更新当前时间（使用服务器时间偏移量）
+     */
+    updateTime() {
+      const now = new Date(new Date().getTime() + this.serverTimeOffset)
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const hours = String(now.getHours()).padStart(2, '0')
+      const minutes = String(now.getMinutes()).padStart(2, '0')
+      const seconds = String(now.getSeconds()).padStart(2, '0')
+      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const weekDay = weekDays[now.getDay()]
+
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '完成': 'status-success',
+        '分拣中': 'status-warning',
+        '等待分拣': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    },
+
+    /**
+     * 初始化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/robot-picking',
+            this.handleWebSocketMessage
+          )
+        },
+        (error) => {
+          // 连接失败回调
+          console.error('[原材拣选看板] WebSocket连接失败，降级到轮询模式', error)
+          this.wsConnected = false
+          this.fallbackToPolling()
+        }
+      )
+    },
+
+    /**
+     * 处理WebSocket推送的消息
+     *
+     * @param {object} message WebSocket推送的消息
+     */
+    handleWebSocketMessage(message) {
+      if (message && message.code === 0) {
+        // 更新服务器时间偏移量
+        if (message.serverTime) {
+          this.updateServerTimeOffset(message.serverTime)
+        }
+
+        this.materialPickingList = message.data.materialList || []
+
+        // 如果 storageBatchNo.length < 10，则 status 改成 分拣中
+        this.materialPickingList.forEach(item => {
+          if (item.storageBatchNo && item.storageBatchNo.length < 10) {
+            item.status = '分拣中'
+          }
+        })
+
+        // 排序：分拣中 在最上面
+        this.materialPickingList.sort((a, b) => {
+          if (a.status === '分拣中' && b.status !== '分拣中') return -1
+          if (a.status !== '分拣中' && b.status === '分拣中') return 1
+          return 0
+        })
+      }
+    },
+
+    /**
+     * 断开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()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  position: relative;
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+}
+
+/* ===== 装饰背景 ===== */
+.bg-decoration {
+  display: none;
+}
+
+/* ===== 顶部标题区 ===== */
+.screen-header {
+  position: relative;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  z-index: 10;
+  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
+}
+
+/* CCL Logo */
+.header-logo {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 20;
+}
+
+.logo-img {
+  height: 40px;
+  width: auto;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+  transition: all 0.3s ease;
+
+  &:hover {
+    filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
+    transform: scale(1.05);
+  }
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 34px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  padding: 12px 20px;
+  border-radius: 8px;
+
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 16px;
+  color: #ffffff;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.5);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.7);
+    }
+  }
+}
+
+/* ===== 拣选面板 ===== */
+.picking-panel {
+  width: 100%;
+  height: calc(100vh - 100px);
+  background: rgba(70, 90, 120, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.5);
+  border-radius: 12px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    border-color: rgba(23, 179, 163, 0.5);
+    box-shadow:
+      0 12px 48px rgba(0, 0, 0, 0.5),
+      0 0 30px rgba(23, 179, 163, 0.2);
+    transform: translateY(-2px);
+  }
+}
+
+/* ===== 面板标题栏 ===== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
+  border-bottom: 1px solid rgba(23, 179, 163, 0.3);
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex: 1;
+}
+
+.title-icon {
+  font-size: 16px;
+  color: #64D8CB;
+}
+
+.title-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 24px;
+  font-weight: bold;
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 10px;
+  flex: 1;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(23, 179, 163, 0.5);
+    }
+  }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    tr {
+      background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
+    }
+
+    th {
+      padding: 14px 8px;
+      color: #fcfdfd;
+      font-size: 18px;
+      font-weight: bold;
+      text-align: center;
+      border-bottom: 2px solid rgba(23, 179, 163, 0.4);
+      text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      background: rgba(60, 80, 105, 0.6);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(70, 90, 115, 0.7);
+      }
+
+      &:hover {
+        background: rgba(23, 179, 163, 0.15);
+        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        td:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
+
+    td {
+      padding: 12px 8px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 18px;
+      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+
+      &.text-center {
+        text-align: center;
+      }
+
+      &.text-left {
+        text-align: left;
+      }
+
+      &.text-right {
+        text-align: right;
+      }
+    }
+  }
+}
+
+/* ===== 状态徽章 ===== */
+.status-badge {
+  display: inline-block;
+  padding: 6px 16px;
+  border-radius: 14px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 90px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &.status-success {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-warning {
+    background: linear-gradient(135deg, #10b981, #34d399);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+  }
+
+  &.status-pending {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
+    color: #ffffff;
+    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
+  }
+}
+
+/* ===== 底部装饰 ===== */
+.screen-footer {
+  display: none;
+}
+
+/* ===== 响应式适配 ===== */
+@media screen and (max-width: 1600px) {
+  .screen-title {
+    font-size: 30px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 22px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 38px;
+  }
+
+  .panel-title-bar {
+    padding: 16px 24px;
+  }
+
+  .title-main {
+    font-size: 28px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 20px;
+      padding: 16px 12px;
+    }
+
+    tbody td {
+      font-size: 20px;
+      padding: 14px 12px;
+    }
+  }
+
+  .status-badge {
+    font-size: 18px;
+    padding: 8px 18px;
+    min-width: 100px;
+  }
+}
+</style>
+