feat(仓库视图): 添加异常状态显示和样式
在仓库鸟瞰图和交错视图中添加异常状态的显示,包括图例和对应的样式。当仓库位被禁用且无当前线圈时,显示为异常状态,使用红色背景和禁止光标样式。
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user