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

feat(仓库管理): 优化仓库鸟瞰图布局并添加图例

Browse Source 
- 在仓库鸟瞰图中添加占用状态图例
- 调整网格布局为两栏显示，优化空间利用率
- 减少网格行数从50到40
- 缩小网格单元格尺寸并移除冗余编码显示
- 添加按钮加载状态控制
This commit is contained in:
砂糖
2025-12-05 13:03:08 +08:00
parent b20cda4e73
commit 32d4a1a6e0
3 changed files with 144 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
View File

@@ -22,11 +22,22 @@
</el-card>
</div>
<!-- 图例 -->
<div class="legend-container">
<div class="legend-item">
<div class="legend-color normal"></div>
<span class="legend-text">正常未占用</span>
</div>
<div class="legend-item">
<div class="legend-color occupied"></div>
<span class="legend-text">已占用</span>
</div>
</div>
<!-- 分层库位容器 -->
<div class="layers-container">
<!-- 遍历每层，渲染 Grid 组件 -->
<div v-for="(layerData, layer) in layers" :key="layer" class="layer-section">
<el-divider content-position="left">第{{ layer }}层库位</el-divider>
<WarehouseGrid :layer="layer" :layer-data="layerData" />
</div>
@@ -198,9 +209,53 @@ export default {
}
}
// 图例样式
.legend-container {
display: flex;
align-items: center;
margin-bottom: 16px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 4px;
.legend-item {
display: flex;
align-items: center;
margin-right: 24px;
&:last-child {
margin-right: 0;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 2px;
margin-right: 8px;
border: 1px solid #e6e6e6;
}
.normal {
background-color: #ffffff;
}
.occupied {
background-color: #c0c4cc;
}
.legend-text {
font-size: 14px;
color: #606266;
}
}
}
// 分层容器样式
.layers-container {
display: flex;
.layer-section {
flex: 1;
max-width: 50%;
margin-bottom: 24px;
}

169
klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue
View File

@@ -1,87 +1,89 @@
<template>
<div class="grid-wrapper">
<!-- 转置按钮 -->
<el-button
type="text"
icon="el-icon-refresh-left"
size="mini"
@click="toggleTranspose"
class="transpose-btn"
>
{{ isTransposed ? '恢复行列' : '行列转置' }}
</el-button>
<!-- 核心滚动容器：列标尺 + 网格区域共享滚动条 -->
<div class="grid-scroll-container" ref="scrollContainerRef">
<!-- 滚动内容容器：列标尺 + 行标尺+网格 -->
<div class="scroll-content">
<!-- 列标尺（顶部） -->
<div class="col-ruler">
<div class="ruler-empty"></div>
<div v-for="col in transposedLayerData.maxColumn" :key="`col-${layer}-${col}`" class="ruler-item">
{{ col }}
</div>
</div>
<!-- 行标尺 + 库位网格 -->
<div class="row-grid-wrapper">
<!-- 行标尺（左侧） -->
<div class="row-ruler">
<div v-for="row in transposedLayerData.maxRow" :key="`row-${layer}-${row}`" class="ruler-item">
{{ row }}
<div>
<div style="display: flex; align-items: center;">
<el-divider content-position="left">第{{ layer }}层库位</el-divider>
<!-- 转置按钮 -->
<el-button type="text" icon="el-icon-refresh-left" size="mini" @click="toggleTranspose">
{{ isTransposed ? '恢复行列' : '行列转置' }}
</el-button>
</div>
<div class="grid-wrapper">
<!-- 核心滚动容器：列标尺 + 网格区域共享滚动条 -->
<div class="grid-scroll-container" ref="scrollContainerRef">
<!-- 滚动内容容器：列标尺 + 行标尺+网格 -->
<div class="scroll-content">
<!-- 列标尺（顶部） -->
<div class="col-ruler">
<div class="ruler-empty"></div>
<div v-for="col in transposedLayerData.maxColumn" :key="`col-${layer}-${col}`" class="ruler-item">
{{ col }}
</div>
</div>
<!-- 库位网格 -->
<div class="grid-container" :style="{ gridTemplateColumns: `repeat(${transposedLayerData.maxColumn}, 80px)` }">
<!-- 库位格子 -->
<div v-for="warehouse in transposedLayerData.warehouses" :key="warehouse.actualWarehouseId"
class="warehouse-cell" :class="{ disabled: warehouse.isEnabled === 0 }"
@click="handleCellClick(warehouse)">
<div class="cell-code">{{ warehouse.actualWarehouseCode }}</div>
<div class="cell-name">{{ warehouse.actualWarehouseName || '-' }}</div>
<!-- 行标尺 + 库位网格 -->
<div class="row-grid-wrapper">
<!-- 行标尺（左侧） -->
<div class="row-ruler">
<div v-for="row in transposedLayerData.maxRow" :key="`row-${layer}-${row}`" class="ruler-item">
{{ row }}
</div>
</div>
<!-- 空库位占位 -->
<div class="warehouse-cell empty-cell" v-for="i in transposedLayerData.emptyCount" :key="`empty-${layer}-${i}`">
<div class="cell-code">-</div>
<!-- 库位网格 -->
<div class="grid-container"
:style="{ gridTemplateColumns: `repeat(${transposedLayerData.maxColumn}, 60px)` }">
<!-- 库位格子 -->
<div v-for="warehouse in transposedLayerData.warehouses" :key="warehouse.actualWarehouseId"
class="warehouse-cell" :class="{ disabled: warehouse.isEnabled === 0 }"
@click="handleCellClick(warehouse)">
<div class="cell-name">{{ warehouse.actualWarehouseName || '-' }}</div>
</div>
<!-- 空库位占位 -->
<div class="warehouse-cell empty-cell" v-for="i in transposedLayerData.emptyCount"
:key="`empty-${layer}-${i}`">
<div class="cell-code">-</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 库位详情弹窗 -->
<el-dialog title="库位详情" :visible.sync="dialogVisible" width="600px" destroy-on-close append-to-body center>
<el-descriptions :column="2" border size="small" v-if="currentWarehouse">
<el-descriptions-item label="库位编码">{{ currentWarehouse.actualWarehouseCode }}</el-descriptions-item>
<el-descriptions-item label="库位名称">{{ currentWarehouse.actualWarehouseName || '无' }}</el-descriptions-item>
<el-descriptions-item label="所属层级">{{ currentWarehouse.parsedInfo.layer || '未知' }}</el-descriptions-item>
<!-- 弹窗内行列显示适配转置状态 -->
<el-descriptions-item label="行号">
{{ isTransposed ? currentWarehouse.parsedInfo.column : currentWarehouse.parsedInfo.row || '未知' }}
</el-descriptions-item>
<el-descriptions-item label="列号">
{{ isTransposed ? currentWarehouse.parsedInfo.row : currentWarehouse.parsedInfo.column || '未知' }}
</el-descriptions-item>
<el-descriptions-item label="一级编码">{{ currentWarehouse.parsedInfo.warehouseFirst || '未知' }}</el-descriptions-item>
<el-descriptions-item label="二级编码">{{ currentWarehouse.parsedInfo.warehouseSecond || '未知' }}</el-descriptions-item>
<el-descriptions-item label="启用状态">
<el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'">
{{ currentWarehouse.isEnabled === 1 ? '启用' : '禁用' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="库位码">
<QRCode :content="currentWarehouse.actualWarehouseId" size="60" />
</el-descriptions-item>
<el-descriptions-item label="创建时间" span="2">{{ currentWarehouse.createTime || '无' }}</el-descriptions-item>
<el-descriptions-item label="备注信息" span="2">{{ currentWarehouse.remark || '无' }}</el-descriptions-item>
</el-descriptions>
<template slot="footer">
<el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
<!-- 库位详情弹窗 -->
<el-dialog title="库位详情" :visible.sync="dialogVisible" width="600px" destroy-on-close append-to-body center>
<el-descriptions :column="2" border size="small" v-if="currentWarehouse">
<el-descriptions-item label="库位编码">{{ currentWarehouse.actualWarehouseCode }}</el-descriptions-item>
<el-descriptions-item label="库位名称">{{ currentWarehouse.actualWarehouseName || '无' }}</el-descriptions-item>
<el-descriptions-item label="所属层级">{{ currentWarehouse.parsedInfo.layer || '未知' }}</el-descriptions-item>
<!-- 弹窗内行列显示适配转置状态 -->
<el-descriptions-item label="行号">
{{ isTransposed ? currentWarehouse.parsedInfo.column : currentWarehouse.parsedInfo.row || '未知' }}
</el-descriptions-item>
<el-descriptions-item label="列号">
{{ isTransposed ? currentWarehouse.parsedInfo.row : currentWarehouse.parsedInfo.column || '未知' }}
</el-descriptions-item>
<el-descriptions-item label="一级编码">{{ currentWarehouse.parsedInfo.warehouseFirst || '未知'
}}</el-descriptions-item>
<el-descriptions-item label="二级编码">{{ currentWarehouse.parsedInfo.warehouseSecond || '未知'
}}</el-descriptions-item>
<el-descriptions-item label="启用状态">
<el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'">
{{ currentWarehouse.isEnabled === 1 ? '启用' : '禁用' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="库位码">
<QRCode :content="currentWarehouse.actualWarehouseId" size="60" />
</el-descriptions-item>
<el-descriptions-item label="创建时间" span="2">{{ currentWarehouse.createTime || '无' }}</el-descriptions-item>
<el-descriptions-item label="备注信息" span="2">{{ currentWarehouse.remark || '无' }}</el-descriptions-item>
</el-descriptions>
<template slot="footer">
<el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</div>
</div>
</template>
<script>
@@ -123,7 +125,7 @@ export default {
*/
transposedLayerData() {
const { maxRow, maxColumn, warehouses } = this.layerData;
// 转置后的基础行列数
const transMaxRow = this.isTransposed ? maxColumn : maxRow;
const transMaxColumn = this.isTransposed ? maxRow : maxColumn;
@@ -217,21 +219,26 @@ export default {
overflow-y: hidden;
position: relative;
padding-bottom: 8px; // 给滚动条留空间
// 优化滚动条样式
&::-webkit-scrollbar {
height: 8px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
&:hover {
background: #a8a8a8;
}
}
// 兼容非webkit浏览器
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
@@ -261,7 +268,7 @@ export default {
}
.ruler-item {
width: 80px;
width: 60px;
text-align: center;
font-weight: 600;
color: #606266;
@@ -285,8 +292,8 @@ export default {
flex-shrink: 0;
.ruler-item {
height: 80px;
line-height: 80px;
height: 60px;
line-height: 60px;
text-align: center;
font-weight: 600;
color: #606266;
@@ -303,8 +310,8 @@ export default {
// 库位格子
.warehouse-cell {
height: 80px;
width: 80px;
height: 60px;
width: 60px;
border: 1px solid #e6e6e6;
border-radius: 0;
display: flex;
@@ -333,12 +340,6 @@ export default {
}
}
.cell-code {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.cell-name {
font-size: 12px;
color: #606266;

5
klp-ui/src/views/wms/warehouse/overview.vue
View File

@@ -21,7 +21,7 @@
<!-- 右侧仓库信息区域 - 替换为 Bird 组件 -->
<div class="warehouse-container" v-if="selectedNodeId" v-loading="rightLoading"
element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
<WarehouseBird :warehouse-list="warehouseList" />
<WarehouseBird :warehouse-list="warehouseList" @open-init-dialog="openInitDialog" />
</div>
<!-- 未选中节点提示 -->
@@ -43,7 +43,7 @@
@mousemove="handleGridHover"
@click="confirmGridSelect"
@mouseleave="resetGridHover">
<div v-for="row in 50" :key="`grid-row-${row}`" class="grid-selector-row">
<div v-for="row in 40" :key="`grid-row-${row}`" class="grid-selector-row">
<div
v-for="col in 10"
:key="`grid-col-${col}`"
@@ -124,6 +124,7 @@ export default {
rightLoading: false,
isSwitching: false,
nodeClickTimer: null,
buttonLoading: false,
};
},
created() {