vue界面导出

src/views/modules/haianWarehouse/dashboard/sortingBoard54.vue

@@ -17,6 +17,7 @@
       <div class="summary-counts">
         <span>标签 <strong>{{ visibleRows.length }}</strong></span>
         <span>未完成 <strong class="pending-text">{{ pendingCount }}</strong></span>
+        <span>数据异常 <strong class="abnormal-text">{{ abnormalCount }}</strong></span>
         <span>已完成 <strong class="completed-text">{{ completedCount }}</strong></span>
       </div>
 <!--      <div class="summary-refresh">-->
@@ -30,17 +31,17 @@
     <div ref="tableViewport" class="table-viewport" @mouseenter="scrollPaused = true" @mouseleave="scrollPaused = false">
       <table class="board-table">
         <colgroup>
-          <col style="width: 4%">
-          <col style="width: 13%">
-          <col style="width: 12%">
-          <col style="width: 29%">
-          <col style="width: 19%">
-          <col style="width: 8%">
+          <col style="width: 5%">
+          <col style="width: 16%">
           <col style="width: 15%">
+          <col style="width: 34%">
+          <col style="width: 22%">
+          <col style="width: 8%">
         </colgroup>
         <thead>
           <!-- 六屏仅展示标签物料编码，移除产品编码列后将空间分配给物料名称 - rqrq -->
-          <tr><th>序号</th><th>工单号</th><th>物料编码</th><th>物料名称</th><th>RFID / 标签号</th><th>状态</th><th>说明</th></tr>
+          <!-- 人工四屏暂不展示说明列，异常原因由状态“数据异常”提示；字段仍保留在接口中供后续排查 - rqrq -->
+          <tr><th>序号</th><th>工单号</th><th>物料编码</th><th>物料名称</th><th>RFID / 标签号</th><th>状态</th></tr>
         </thead>
         <tbody>
           <tr v-for="(item, index) in visibleRows" :key="item.rfidBarcode">
@@ -50,8 +51,7 @@
             <td :title="item.partNo">{{ item.partNo || '-' }}</td>
             <td class="description" :title="(item.partDesc || '').slice(0, 100)">{{ (item.partDesc || '').slice(0, 100) || '-' }}</td>
             <td class="barcode" :title="item.rfidBarcode">{{ item.rfidBarcode }}</td>
-            <td><span :class="['status-badge', item.status === '已完成' ? 'completed' : 'pending']">{{ item.status }}</span></td>
-            <td class="row-message" :title="item.message">{{ item.message || '-' }}</td>
+            <td><span :class="['status-badge', item.status === '已完成' ? 'completed' : item.status === '数据异常' ? 'abnormal' : 'pending']">{{ item.status }}</span></td>
           </tr>
           <!-- 未返回任务时表体留白，不展示空数据或异常提示；连接状态由标题指示灯表示 - rqrq -->
         </tbody>
@@ -108,6 +108,8 @@ export default {
     stale () { return this.lastReceivedAt > 0 && this.now - this.lastReceivedAt > 20000 },
     visibleRows () { return this.available && !this.stale ? this.rows : [] },
     pendingCount () { return this.visibleRows.filter(item => item.status === '未完成').length },
+    // 数据异常独立计数，避免隐藏说明列后总数与未完成、已完成之和不一致却没有提示 - rqrq
+    abnormalCount () { return this.visibleRows.filter(item => item.status === '数据异常').length },
     completedCount () { return this.visibleRows.filter(item => item.status === '已完成').length },
     // 绿灯只代表STOMP连接正常，WCS/WMS查询异常通过旁边业务提示显示，不混淆连接与任务状态 - rqrq
     connectionText () { return { connected: '连接正常', disconnected: '连接断开，等待重连', connecting: '正在连接', disabled: '推送已停用' }[this.wsState] },
@@ -250,7 +252,28 @@ export default {
       const board = data.row
       this.lastReceivedAt = Date.now()
       this.available = board.available === true
-      this.rows = this.available && Array.isArray(board.rows) ? board.rows : []
+      // 四个人工位置的HTTP与推送数据统一按未完成、数据异常、已完成稳定分组，组内保留原顺序 - rqrq
+      const sourceRows = this.available && Array.isArray(board.rows) ? board.rows : []
+      const unfinishedRows = []
+      const abnormalRows = []
+      const completedRows = []
+      sourceRows.forEach(item => {
+        if (item.status === '已完成') completedRows.push(item)
+        else if (item.status === '未完成') unfinishedRows.push(item)
+        else abnormalRows.push(item)
+      })
+      const nextRows = unfinishedRows.concat(abnormalRows, completedRows)
+      const orderChanged = this.rows.length !== nextRows.length || this.rows.some((item, index) => {
+        const nextItem = nextRows[index]
+        return item.rfidBarcode !== nextItem.rfidBarcode || item.status !== nextItem.status
+      })
+      this.rows = nextRows
+      // 列表顺序或状态变化且仍有待处理/异常项时回到顶部，避免旧滚动位置让已完成项遮住它们 - rqrq
+      if (orderChanged && (unfinishedRows.length > 0 || abnormalRows.length > 0)) {
+        this.$nextTick(() => {
+          if (this.$refs.tableViewport) this.$refs.tableViewport.scrollTop = 0
+        })
+      }
       this.updatedAt = Number(board.updatedAt) || 0
       this.message = board.message || (this.rows.length ? '数据正常' : '当前分拣位暂无任务')
     },
@@ -314,6 +337,8 @@ export default {
 .summary-counts, .summary-refresh { display: flex; align-items: center; gap: 20px; }
 .summary-counts strong { font-size: 26px; margin-left: 8px; }
 .pending-text { color: #ffd17d; }
+/* 人工分拣异常数量和状态使用醒目红色，提醒现场核对标签预留信息 - rqrq */
+.abnormal-text { color: #ffb3b3; }
 .completed-text { color: #80e5bc; }
 .ws-status-dot { display: inline-block; width: 12px; height: 12px; margin-left: 12px; border-radius: 50%; vertical-align: middle; background: #94a3b8; }
 .ws-status-dot.connected { background: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, 0.8); }
@@ -331,6 +356,7 @@ export default {
 .board-table .row-message { color: #ffd17d; font-size: 14px; }
 .status-badge { display: inline-block; padding: 5px 10px; border-radius: 4px; white-space: nowrap; font-size: 16px; }
 .status-badge.pending { background: #745827; color: #fff0cf; }
+.status-badge.abnormal { background: #8b2d2d; color: #ffe2e2; }
 .status-badge.completed { background: #21684e; color: #d4ffeb; }
 .board-table .empty-message { height: 220px; font-size: 24px; color: #d2e1ee; }
 .board-table .empty-message.is-error { color: #ffd17d; }