大屏优化

This commit is contained in:
jhd
2026-05-28 14:23:14 +08:00
parent a2ff005437
commit b4a1b736c1

View File

@@ -304,7 +304,7 @@
</div>
<div class="legend-item">
<span class="legend-dot has-coil-icon"></span>
<span>有钢卷 </span>
<span>有钢卷</span>
</div>
</div>
<!-- 库位网格外层容器负责裁剪内层负责 flex 布局 + transform 移动 -->
@@ -328,7 +328,7 @@
@click="showDetail(wh, $event)"
>
<span class="cell-code">{{ wh.actualWarehouseCode }}</span>
<span v-if="wh.currentCoilNo" class="cell-coil-dot"></span>
<span v-if="wh.currentCoilNo" class="cell-coil">{{ wh.currentCoilNo }}</span>
</div>
</div>
<div class="layer-cells layer2-cells" :style="{ marginTop: cellMarginOffset + 'px' }">
@@ -341,7 +341,7 @@
@click="showDetail(wh, $event)"
>
<span class="cell-code">{{ wh.actualWarehouseCode }}</span>
<span v-if="wh.currentCoilNo" class="cell-coil-dot"></span>
<span v-if="wh.currentCoilNo" class="cell-coil">{{ wh.currentCoilNo }}</span>
</div>
</div>
</div>
@@ -549,7 +549,7 @@ export default {
const h = (ch - 120 - (mRows - 1) * 4) / mRows
// 大屏下按容器高度比例放大,不再固定封顶 120
const maxH = Math.floor(ch * 0.15)
return Math.max(36, Math.min(Math.max(maxH, 120), Math.floor(h)))
return Math.max(48, Math.min(Math.max(maxH, 120), Math.floor(h)))
})
const cellWidth = computed(() => {
@@ -578,7 +578,7 @@ export default {
const cellStyle = computed(() => {
const h = cellHeight.value
const w = cellWidth.value
const fs = Math.max(9, Math.min(13, Math.floor(Math.min(w, h) * 0.15)))
const fs = Math.max(9, Math.min(11, Math.floor(Math.min(w, h) * 0.14)))
return { width: w + 'px', height: h + 'px', fontSize: fs + 'px' }
})
@@ -1955,12 +1955,8 @@ export default {
.legend-dot.occupied { background: #7c63ff; }
.legend-dot.error { background: #ff6b6b; }
.legend-dot.has-coil-icon {
background: transparent;
color: #00d4ff;
font-size: 14px;
line-height: 12px;
text-align: center;
border: none;
background: rgba(0, 212, 255, 0.5);
border-color: #00d4ff;
}
/* 库位网格 */
@@ -2069,13 +2065,19 @@ export default {
word-break: break-all;
}
.cell-coil-dot {
font-size: 8px;
color: #00d4ff;
position: absolute;
top: 2px;
right: 4px;
text-shadow: 0 0 6px #00d4ff;
.cell-coil {
font-size: 0.75em;
color: #4fc3f7;
line-height: 1.2;
text-align: center;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
max-width: 100%;
padding: 0 2px;
}
.column-pair {