From 572a1b3aba19e1ffaa7ca785fec91aad7e6c0bcd Mon Sep 17 00:00:00 2001
From: "han\\hanst" <songtao.han@xujiesoft.com>
Date: Mon, 20 Oct 2025 16:33:14 +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/api/dashboard/dashboard.js                |   6 +
 src/router/index.js                           |   3 +-
 src/views/modules/dashboard/picking-board.vue | 721 ++++++++++++++++++
 3 files changed, 729 insertions(+), 1 deletion(-)
 create mode 100644 src/api/dashboard/dashboard.js
 create mode 100644 src/views/modules/dashboard/picking-board.vue

diff --git a/src/api/dashboard/dashboard.js b/src/api/dashboard/dashboard.js
new file mode 100644
index 0000000..0fa0d23
--- /dev/null
+++ b/src/api/dashboard/dashboard.js
@@ -0,0 +1,6 @@
+import { createAPI } from "@/utils/httpRequest.js";
+
+
+export const manualPicking = data => createAPI('/api/dashboard/manualPicking', 'POST', data)
+
+
diff --git a/src/router/index.js b/src/router/index.js
index 19aa3e6..30aa1fe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,8 @@ const _import = require('./import-' + process.env.NODE_ENV)
 // 全局路由(无需嵌套上左右整体布局)
 const globalRoutes = [
   { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
-  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } }
+  { 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: '人工拣选看板' } }
 ]
 
 // 主入口路由(需嵌套上左右整体布局)
diff --git a/src/views/modules/dashboard/picking-board.vue b/src/views/modules/dashboard/picking-board.vue
new file mode 100644
index 0000000..04a86ff
--- /dev/null
+++ b/src/views/modules/dashboard/picking-board.vue
@@ -0,0 +1,721 @@
+<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">
+      <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"
+        v-for="(order, index) in workOrders"
+        :key="order.workOrderNo"
+      >
+        <!-- 面板标题 -->
+        <div class="panel-title-bar">
+          <div class="title-left">
+            <div class="title-icon"></div>
+            <div class="title-text">
+              <span class="title-main">人工拣选{{ index + 1 }}</span>
+              <span class="title-divider">|</span>
+              <span class="title-sub">工单号码: <strong>{{ order.workOrderNo }}</strong></span>
+              <span class="title-divider">|</span>
+              <span class="title-sub">物料名称: <strong>{{ order.materialName }}</strong></span>
+            </div>
+          </div>
+<!--          <div class="title-right">
+            <div class="progress-display">
+              <div class="progress-numbers">
+                <span class="num-current">{{ order.completedCount }}</span>
+                <span class="num-divider">/</span>
+                <span class="num-total">{{ order.totalCount }}</span>
+              </div>
+              <div class="progress-bar-container">
+                <div class="progress-bar-bg">
+                  <div
+                    class="progress-bar-fill"
+                    :style="{ width: (order.completedCount / order.totalCount * 100) + '%' }"
+                  ></div>
+                </div>
+                <div class="progress-percent">{{ Math.round(order.completedCount / order.totalCount * 100) }}%</div>
+              </div>
+            </div>
+          </div>-->
+        </div>
+
+        <!-- 数据表格 -->
+        <div class="panel-table">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th style="width: 15px;">No.</th>
+                <th style="width: 110px;">拣选托盘码</th>
+                <th style="width: 180px;">拣选物料名称</th>
+                <th style="width: 80px;">拣选数量</th>
+                <th style="width: 100px;">状态</th>
+                <th style="width: 110px;">存放托盘码</th>
+                <th style="width: 80px;">存放位置</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, idx) in order.details" :key="idx">
+                <td class="text-center">{{ idx + 1 }}</td>
+                <td class="text-center">{{ item.pickingBatchNo }}</td>
+                <td class="text-left">{{ item.pickingMaterialName }}</td>
+                <td class="text-right">{{ item.pickingQty }}</td>
+                <td class="text-center">
+                  <span :class="['status-badge', getStatusClass(item.status)]">
+                    {{ item.status }}
+                  </span>
+                </td>
+                <td class="text-center">{{ 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 {manualPicking} from '@/api/dashboard/dashboard.js'
+
+export default {
+  name: 'PickingBoard',
+
+  data() {
+    return {
+      currentTime: '',
+      timeInterval: null,
+
+      // 模拟工单数据
+      workOrders: [
+        {
+          workOrderNo: '3020124',
+          materialName: '80506561',
+          completedCount: 2,
+          totalCount: 5,
+          details: [
+            {
+              pickingBatchNo: 'W00001',
+              pickingMaterialName: '70000213-0045',
+              pickingQty: '1,000',
+              status: '完成',
+              storageBatchNo: 'W01100',
+              storageLocation: 'RG01'
+            },
+            {
+              pickingBatchNo: 'W00010',
+              pickingMaterialName: '70000235-0046',
+              pickingQty: '5,000',
+              status: '分拣中',
+              storageBatchNo: 'W01100',
+              storageLocation: 'RG01'
+            },
+            {
+              pickingBatchNo: 'W00012',
+              pickingMaterialName: '70004562-0075',
+              pickingQty: '1,000',
+              status: '等待分拣',
+              storageBatchNo: 'W01100',
+              storageLocation: 'RG01'
+            },
+            {
+              pickingBatchNo: 'W00012',
+              pickingMaterialName: '70004358-0254',
+              pickingQty: '1,000',
+              status: '等待分拣',
+              storageBatchNo: 'W01101',
+              storageLocation: 'RG02'
+            },
+            {
+              pickingBatchNo: 'W00033',
+              pickingMaterialName: '70000220-0335',
+              pickingQty: '5,000',
+              status: '等待分拣',
+              storageBatchNo: 'W01101',
+              storageLocation: 'RG02'
+            }
+          ]
+        },
+        {
+          workOrderNo: '3020125',
+          materialName: '80506562',
+          completedCount: 1,
+          totalCount: 5,
+          details: [
+            {
+              pickingBatchNo: 'W00002',
+              pickingMaterialName: '70000213-0046',
+              pickingQty: '1,000',
+              status: '完成',
+              storageBatchNo: 'W01102',
+              storageLocation: 'RG03'
+            },
+            {
+              pickingBatchNo: 'W00011',
+              pickingMaterialName: '70000235-0047',
+              pickingQty: '5,000',
+              status: '分拣中',
+              storageBatchNo: 'W01102',
+              storageLocation: 'RG03'
+            },
+            {
+              pickingBatchNo: 'W00013',
+              pickingMaterialName: '70004562-0078',
+              pickingQty: '1,000',
+              status: '等待分拣',
+              storageBatchNo: 'W01102',
+              storageLocation: 'RG03'
+            },
+            {
+              pickingBatchNo: 'W00013',
+              pickingMaterialName: '70004358-0256',
+              pickingQty: '1,000',
+              status: '等待分拣',
+              storageBatchNo: 'W01103',
+              storageLocation: 'RG04'
+            },
+            {
+              pickingBatchNo: 'W00034',
+              pickingMaterialName: '70000220-0337',
+              pickingQty: '5,000',
+              status: '等待分拣',
+              storageBatchNo: 'W01103',
+              storageLocation: 'RG04'
+            }
+          ]
+        }
+      ]
+    }
+  },
+
+  mounted() {
+    this.updateTime()
+    this.timeInterval = setInterval(() => {
+      this.updateTime()
+    }, 1000)
+    this.getDataList()
+  },
+
+  beforeDestroy() {
+    if (this.timeInterval) {
+      clearInterval(this.timeInterval)
+    }
+  },
+
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      manualPicking({}).then(({data}) => {
+        if (data && data.code === 200) {
+          console.log('获取数据成功:', data.data)
+        }
+      }).catch(error => {
+        console.error('获取数据失败:', error)
+        this.$message.error('获取数据失败')
+      })
+    },
+    /**
+     * 更新当前时间
+     */
+    updateTime() {
+      const now = new Date()
+      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} ${weekDay} ${hours}:${minutes}:${seconds}`
+    },
+
+    /**
+     * 根据状态获取样式类名
+     */
+    getStatusClass(status) {
+      const statusMap = {
+        '完成': 'status-success',
+        '分拣中': 'status-warning',
+        '等待分拣': 'status-pending'
+      }
+      return statusMap[status] || 'status-pending'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* ===== 整体容器 ===== */
+.picking-board-screen {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #1a1f35 0%, #2d3548 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%);
+}
+
+.header-decoration {
+  display: none;
+}
+
+.header-center {
+  position: relative;
+  text-align: center;
+}
+
+.title-glow {
+  display: none;
+}
+
+.screen-title {
+  position: relative;
+  font-size: 28px;
+  font-weight: bold;
+  color: #17B3A3;
+  margin: 0;
+  letter-spacing: 3px;
+  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+}
+
+.title-subtitle {
+  font-size: 10px;
+  color: rgba(23, 179, 163, 0.8);
+  letter-spacing: 2px;
+  margin-top: 3px;
+  font-family: Arial, sans-serif;
+  text-transform: uppercase;
+}
+
+.header-time {
+  position: absolute;
+  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(23, 179, 163, 0.15);
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: 1px solid rgba(23, 179, 163, 0.4);
+  backdrop-filter: blur(10px);
+}
+
+.time-icon {
+  font-size: 14px;
+  color: #17B3A3;
+}
+
+.time-text {
+  font-size: 11px;
+  color: #64D8CB;
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+/* ===== 主内容区 ===== */
+.screen-content {
+  position: relative;
+  z-index: 1;
+  padding: 10px 5px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  display: flex;
+  gap: 30px;
+
+  &::-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 {
+  margin-left: 5px;
+  flex: 1;
+  background: rgba(35, 45, 65, 0.8);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(23, 179, 163, 0.3);
+  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: 10px 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: 8px;
+  flex-wrap: wrap;
+}
+
+.title-main {
+  font-size: 13px;
+  font-weight: bold;
+  color: #64D8CB;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+.title-divider {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 11px;
+}
+
+.title-sub {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.8);
+
+  strong {
+    color: #ffffff;
+    font-weight: 600;
+    font-family: 'Consolas', monospace;
+  }
+}
+
+.title-right {
+  min-width: 280px;
+}
+
+/* ===== 进度显示 ===== */
+.progress-display {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.progress-numbers {
+  font-size: 18px;
+  font-weight: bold;
+  font-family: 'Arial', sans-serif;
+  white-space: nowrap;
+
+  .num-current {
+    color: #FFD54F;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .num-divider {
+    color: rgba(255, 255, 255, 0.7);
+    margin: 0 3px;
+  }
+
+  .num-total {
+    color: #ffffff;
+  }
+}
+
+.progress-bar-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.progress-bar-bg {
+  flex: 1;
+  height: 6px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+  overflow: hidden;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #17B3A3, #64D8CB);
+  border-radius: 3px;
+  transition: width 0.5s ease;
+  box-shadow: 0 0 15px rgba(23, 179, 163, 0.6);
+  position: relative;
+}
+
+.progress-percent {
+  font-size: 11px;
+  color: #64D8CB;
+  font-weight: bold;
+  min-width: 38px;
+  text-align: right;
+  text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
+}
+
+/* ===== 数据表格 ===== */
+.panel-table {
+  padding: 5px 5px;
+  flex: 1;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(23, 179, 163, 0.05);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(23, 179, 163, 0.3);
+    border-radius: 2px;
+
+    &: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: 8px 10px;
+      color: #64D8CB;
+      font-size: 10px;
+      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(25, 33, 50, 0.4);
+      transition: all 0.3s ease;
+
+      &:nth-child(even) {
+        background: rgba(35, 43, 60, 0.5);
+      }
+
+      &: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: 7px 10px;
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 10px;
+      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: 3px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  min-width: 60px;
+  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: 26px;
+    letter-spacing: 3px;
+  }
+
+  .title-main {
+    font-size: 12px;
+  }
+
+  .title-sub {
+    font-size: 10px;
+  }
+
+  .progress-numbers {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .screen-title {
+    font-size: 32px;
+  }
+
+  .panel-title-bar {
+    padding: 12px 20px;
+  }
+
+  .title-main {
+    font-size: 15px;
+  }
+
+  .data-table {
+    thead th {
+      font-size: 12px;
+      padding: 9px 12px;
+    }
+
+    tbody td {
+      font-size: 12px;
+      padding: 8px 12px;
+    }
+  }
+}
+</style>
+
+