feat(仓库视图): 添加异常状态显示和样式

在仓库鸟瞰图和交错视图中添加异常状态的显示,包括图例和对应的样式。当仓库位被禁用且无当前线圈时,显示为异常状态,使用红色背景和禁止光标样式。
This commit is contained in:
砂糖
2026-01-14 08:52:50 +08:00
parent 5283f36d48
commit afbc2db77f
2 changed files with 17 additions and 2 deletions

View File

@@ -36,6 +36,10 @@
<div class="legend-color occupied"></div>
<span class="legend-text">已占用</span>
</div>
<div class="legend-item">
<div class="legend-color error"></div>
<span class="legend-text">异常</span>
</div>
</div>
<!-- 分列库位容器 -->
@@ -313,6 +317,10 @@ export default {
background-color: #fafafa;
}
.error {
background-color: #fdecea;
}
.legend-text {
font-size: 14px;
color: #606266;

View File

@@ -41,7 +41,7 @@
}">
<div v-for="warehouse in columnWarehouseData[column].layer1"
:key="`warehouse-1-${warehouse.actualWarehouseId}`" class="warehouse-cell layer-1"
:class="{ disabled: warehouse.isEnabled === 0 }" @click.stop="handleCellClick(warehouse)">
:class="{ disabled: warehouse.isEnabled === 0, error: warehouse.isEnabled === 0 && warehouse.currentCoilNo == null }" @click.stop="handleCellClick(warehouse)">
<div class="cell-name">
<div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
<div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</div>
@@ -58,7 +58,7 @@
}">
<div v-for="warehouse in columnWarehouseData[column].layer2"
:key="`warehouse-2-${warehouse.actualWarehouseId}`" class="warehouse-cell layer-2"
:class="{ disabled: warehouse.isEnabled === 0 }" :style="{
:class="{ disabled: warehouse.isEnabled === 0, error: warehouse.isEnabled === 0 && warehouse.currentCoilNo == null }" :style="{
transform: `translateY(var(--offset-value))`,
position: 'relative'
}" @click.stop="handleCellClick(warehouse)">
@@ -651,6 +651,13 @@ export default {
}
}
&.error {
background: #ffcdd2;
color: #f44336;
cursor: not-allowed;
opacity: 0.8;
}
&:not(.disabled):hover {
border-color: #90caf9;
background: #f0f8ff;