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

View File

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