DeXun/pickling-mes
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(entry): 工位卡片紧凑化，属性左标签右值，空工位收起占位

Browse Source 
- 取消固定 200px 高，空工位仅显示「空闲」占位，去掉大片留白
- 属性改为左对齐标签 + 右对齐数值（不再居中聚拢）
- 行距/内边距收紧

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangyu
2026-06-29 14:49:29 +08:00
parent 72004568e1
commit 630395226e
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/views/EntryTracking.vue
View File

@@ -61,21 +61,22 @@
:class="['pos-cell', { filled: !!occupantOf(pos) }]"
>
<div class="pos-title">{{ pos }}</div>
<table class="pos-table">
<tbody>
<tr><td class="k">冷卷号</td><td class="v">{{ occ(pos,'cold_coil_no') }}</td></tr>
<tr><td class="k">热卷号</td><td class="v">{{ occ(pos,'hot_coil_no') }}</td></tr>
<tr><td class="k">钢种</td><td class="v">{{ occ(pos,'steel_grade') }}</td></tr>
<tr><td class="k">来料厚[mm]</td><td class="v">{{ occNum(pos,'incoming_thickness',2) }}</td></tr>
<tr><td class="k">成品厚[mm]</td><td class="v">{{ occNum(pos,'product_thickness',2) }}</td></tr>
<tr><td class="k">成品宽[mm]</td><td class="v">{{ occNum(pos,'product_width',0) }}</td></tr>
<tr><td class="k">来料重[t]</td><td class="v">{{ occNum(pos,'incoming_weight',3) }}</td></tr>
<tr><td class="k">轧制模式</td><td class="v">{{ occ(pos,'rolling_mode') }}</td></tr>
</tbody>
</table>
<div v-if="occupantOf(pos)" class="pos-act">
<span class="action-link" @click="openMove(occupantOf(pos))">移动</span>
</div>
<template v-if="occupantOf(pos)">
<table class="pos-table">
<tbody>
<tr><td class="k">冷卷号</td><td class="v">{{ occ(pos,'cold_coil_no') }}</td></tr>
<tr><td class="k">热卷号</td><td class="v">{{ occ(pos,'hot_coil_no') }}</td></tr>
<tr><td class="k">钢种</td><td class="v">{{ occ(pos,'steel_grade') }}</td></tr>
<tr><td class="k">来料厚[mm]</td><td class="v">{{ occNum(pos,'incoming_thickness',2) }}</td></tr>
<tr><td class="k">成品厚[mm]</td><td class="v">{{ occNum(pos,'product_thickness',2) }}</td></tr>
<tr><td class="k">成品宽[mm]</td><td class="v">{{ occNum(pos,'product_width',0) }}</td></tr>
<tr><td class="k">来料重[t]</td><td class="v">{{ occNum(pos,'incoming_weight',3) }}</td></tr>
<tr><td class="k">轧制模式</td><td class="v">{{ occ(pos,'rolling_mode') }}</td></tr>
</tbody>
</table>
<div class="pos-act"><span class="action-link" @click="openMove(occupantOf(pos))">移动</span></div>
</template>
<div v-else class="pos-empty">空闲</div>
</div>
</div>
</div>
@@ -253,24 +254,25 @@ export default {
.saddle-empty { text-align: center; padding: 30px; color: $text-muted; font-size: 13px; }
// ── 入口设备网格（恢复原布局，2 行）──
.entry-grid { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-x: auto; }
.entry-row { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px; }
.entry-grid { padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow-x: auto; }
.entry-row { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 6px; }
.pos-cell {
background: $bg-panel; border: 1px solid $border; border-radius: 4px; padding: 4px 6px 6px; min-height: 200px;
background: $bg-panel; border: 1px solid $border; border-radius: 4px; padding: 4px 8px 5px;
display: flex; flex-direction: column;
&.filled { border-color: $sms-teal; background: rgba($sms-teal, .04); }
}
.pos-title {
text-align: center; font-size: 11.5px; font-weight: 700; color: $text-primary;
padding: 3px 0 5px; border-bottom: 1px dashed $border; margin-bottom: 4px; letter-spacing: .3px;
text-align: center; font-size: 11px; font-weight: 700; color: $text-primary;
padding: 2px 0 4px; border-bottom: 1px dashed $border; margin-bottom: 3px; letter-spacing: .3px;
}
.pos-table {
width: 100%; border-collapse: collapse; font-size: 10.5px; line-height: 1.5; flex: 1;
td { padding: 1px 2px; vertical-align: top; white-space: nowrap; }
td.k { color: $text-muted; text-align: right; width: 52%; font-size: 10px; }
td.v { color: $sms-teal; text-align: right; font-family: $font-mono; font-weight: 600; }
width: 100%; border-collapse: collapse; font-size: 10.5px; line-height: 1.35;
td { padding: 0 0 1px; vertical-align: baseline; white-space: nowrap; }
td.k { color: $text-muted; text-align: left; font-size: 10px; padding-right: 6px; }
td.v { color: $sms-teal; text-align: right; font-family: $font-mono; font-weight: 600; width: 100%; }
}
.pos-act { text-align: center; padding-top: 4px; border-top: 1px dashed $border; }
.pos-act { text-align: right; padding-top: 3px; margin-top: 2px; border-top: 1px dashed $border; }
.pos-empty { flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center; color: $text-muted; font-size: 11px; }
.action-link { color: $accent-green; cursor: pointer; font-size: 12px; &:hover { text-decoration: underline; } }