|
|
|
@ -2,7 +2,10 @@ |
|
|
|
<div class="haian-sorting-board"> |
|
|
|
<!-- 海安独立大屏：固定分拣位，工单来自标签预定，完成状态来自WMS；不展示原/目标托盘 - rqrq --> |
|
|
|
<header class="board-header"> |
|
|
|
<img src="~@/assets/img/cclbai.png" alt="CCL" class="board-logo"> |
|
|
|
<!-- logo绝对定位贴左上，页面不留顶部外边距，和人工拣选看板一致 - rqrq --> |
|
|
|
<div class="header-logo"> |
|
|
|
<img src="~@/assets/img/cclbai.png" alt="CCL" class="board-logo"> |
|
|
|
</div> |
|
|
|
<div class="board-title"> |
|
|
|
<h1>{{ boardTitle }} |
|
|
|
<!-- 连接灯与业务状态分开：绿灯已连接，红灯断线闪烁，黄灯建连中，灰灯停用 - rqrq --> |
|
|
|
@ -14,10 +17,10 @@ |
|
|
|
</header> |
|
|
|
|
|
|
|
<section class="board-summary"> |
|
|
|
<!-- 顶部只保留总数/未完成/已完成，异常行不单独占位，让表体多显示 - rqrq --> |
|
|
|
<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">--> |
|
|
|
@ -41,7 +44,7 @@ |
|
|
|
<thead> |
|
|
|
<!-- 六屏仅展示标签物料编码，移除产品编码列后将空间分配给物料名称 - rqrq --> |
|
|
|
<!-- 人工四屏暂不展示说明列，异常原因由状态“数据异常”提示；字段仍保留在接口中供后续排查 - rqrq --> |
|
|
|
<tr><th>序号</th><th>工单号</th><th>物料编码</th><th>物料名称</th><th>RFID / 标签号</th><th>状态</th></tr> |
|
|
|
<tr><th>No</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"> |
|
|
|
@ -58,10 +61,7 @@ |
|
|
|
</table> |
|
|
|
</div> |
|
|
|
|
|
|
|
<footer class="board-footer"> |
|
|
|
<!-- <span>{{ pushEnabled ? 'WebSocket 实时推送 · 每轮间隔 5 秒' : '海安看板未启用' }}</span>--> |
|
|
|
<span>数据更新时间：{{ updatedTime }}</span> |
|
|
|
</footer> |
|
|
|
<!-- 底部更新时间行已取消，整块高度留给列表滚动 - rqrq --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -326,19 +326,24 @@ export default { |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 沿用老分拣看板蓝色渐变、CCL白色Logo、青绿色表头和连接灯；海安布局独立维护，长文本可换行 - rqrq */ |
|
|
|
.haian-sorting-board { height: 100vh; width: 100%; box-sizing: border-box; padding: 18px 24px 12px; background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%); color: #f4f7fb; font-family: 'Microsoft YaHei', sans-serif; display: flex; flex-direction: column; overflow: hidden; } |
|
|
|
.board-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px; border-bottom: 2px solid rgba(23, 179, 163, 0.4); background: linear-gradient(180deg, rgba(23, 179, 163, 0.08), transparent); } |
|
|
|
.board-logo { width: auto; height: 40px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); } |
|
|
|
.board-title { flex: 1; text-align: center; } |
|
|
|
.board-title h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: 3px; text-shadow: 0 0 20px rgba(23, 179, 163, 0.5); } |
|
|
|
/* 整屏不留页边距，标题栏内部单独控制留白；logo绝对定位到左上角，和人工拣选看板一致 - rqrq */ |
|
|
|
.haian-sorting-board { height: 100vh; width: 100%; box-sizing: border-box; background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%); color: #f4f7fb; font-family: 'Microsoft YaHei', sans-serif; display: flex; flex-direction: column; overflow: hidden; } |
|
|
|
/* 标题行高度压到56px：内部左右留距，顶部不再额外留白 - rqrq */ |
|
|
|
/* 标题栏左右各放logo和时间，中间标题绝对居中，不受左右内容宽度影响 - rqrq */ |
|
|
|
.board-header { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; border-bottom: 2px solid rgba(23, 179, 163, 0.4); background: linear-gradient(180deg, rgba(23, 179, 163, 0.08), transparent); } |
|
|
|
.header-logo { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 20; } |
|
|
|
.board-logo { width: auto; height: 32px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); } |
|
|
|
.board-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } |
|
|
|
.board-title h1 { margin: 0; font-size: 32px; line-height: 1; letter-spacing: 3px; text-shadow: 0 0 20px rgba(23, 179, 163, 0.5); } |
|
|
|
.board-title span { color: #d2e1ee; font-size: 16px; } |
|
|
|
.board-header time { font-size: 18px; font-variant-numeric: tabular-nums; } |
|
|
|
.board-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0; } |
|
|
|
.board-header time { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; } |
|
|
|
/* 汇总行上下间距收紧，去掉数据异常后剩余三项不挤占表格高度 - rqrq */ |
|
|
|
.board-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 8px 8px; } |
|
|
|
.summary-counts, .summary-refresh { display: flex; align-items: center; gap: 20px; } |
|
|
|
.summary-counts strong { font-size: 26px; margin-left: 8px; } |
|
|
|
.summary-counts span { font-size: 20px; } |
|
|
|
/* 数字和文字同号，不再放大，避免把汇总行重新撑高 - rqrq */ |
|
|
|
.summary-counts strong { font-size: 20px; 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); } |
|
|
|
@ -346,26 +351,27 @@ export default { |
|
|
|
.ws-status-dot.connecting { background: #f59e0b; box-shadow: 0 0 10px rgba(245, 158, 11, 0.7); } |
|
|
|
@keyframes ws-status-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0.2; } } |
|
|
|
.summary-refresh { font-size: 14px; gap: 10px; } |
|
|
|
.table-viewport { flex: 1; min-height: 0; overflow-y: auto; background: rgba(70, 90, 120, 0.9); border: 1px solid #637e9e; border-radius: 6px; } |
|
|
|
.table-viewport { flex: 1; min-height: 0; margin: 0 8px 12px; overflow-y: auto; background: rgba(70, 90, 120, 0.9); border: 1px solid #637e9e; border-radius: 6px; } |
|
|
|
.board-table { width: 100%; table-layout: fixed; border-spacing: 0; } |
|
|
|
.board-table th { position: sticky; top: 0; z-index: 1; background: #1b6676; color: #fff; font-size: 18px; padding: 16px 8px; } |
|
|
|
.board-table td { padding: 18px 8px; font-size: 18px; text-align: center; border-bottom: 1px solid #526b87; overflow-wrap: break-word; word-wrap: break-word; } |
|
|
|
/* 表头表体字号加2px，行高锁在原18px字号的行盒，换行后每一行高度也不跟着涨 - rqrq */ |
|
|
|
.board-table th { position: sticky; top: 0; z-index: 1; background: #1b6676; color: #fff; font-size: 20px; line-height: 22px; padding: 16px 8px; } |
|
|
|
.board-table td { padding: 18px 8px; font-size: 20px; line-height: 22px; text-align: center; border-bottom: 1px solid #526b87; overflow-wrap: break-word; word-wrap: break-word; } |
|
|
|
.board-table tbody tr:nth-child(even) { background: #344b66; } |
|
|
|
.board-table .description { text-align: left; } |
|
|
|
.board-table .barcode { font-family: Consolas, 'Microsoft YaHei', monospace; } |
|
|
|
.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; } |
|
|
|
.board-table .row-message { color: #ffd17d; font-size: 16px; } |
|
|
|
/* 状态字号加2px，行盒保持原高度，避免状态块把表格行撑高 - rqrq */ |
|
|
|
.status-badge { display: inline-block; padding: 5px 10px; border-radius: 4px; white-space: nowrap; font-size: 18px; line-height: 19px; } |
|
|
|
.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 { height: 220px; font-size: 26px; color: #d2e1ee; } |
|
|
|
.board-table .empty-message.is-error { color: #ffd17d; } |
|
|
|
.board-footer { display: flex; justify-content: space-between; padding-top: 12px; color: #d2e1ee; font-size: 14px; } |
|
|
|
@media screen and (max-width: 1280px) { |
|
|
|
.haian-sorting-board { padding: 12px; } |
|
|
|
.board-title h1 { font-size: 26px; } |
|
|
|
.board-header time { font-size: 14px; } |
|
|
|
.board-table th, .board-table td { font-size: 14px; padding: 12px 5px; } |
|
|
|
.status-badge { padding: 4px; font-size: 13px; } |
|
|
|
.board-table th, .board-table td { font-size: 16px; line-height: 17px; padding: 12px 5px; } |
|
|
|
.status-badge { padding: 4px; font-size: 15px; line-height: 16px; } |
|
|
|
} |
|
|
|
</style> |
