From 32d4a1a6e07a28f81932d05538d0440d3842d028 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Fri, 5 Dec 2025 13:03:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=93=E5=BA=93=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=93=E5=BA=93=E9=B8=9F=E7=9E=B0=E5=9B=BE?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=9B=BE=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在仓库鸟瞰图中添加占用状态图例
- 调整网格布局为两栏显示，优化空间利用率
- 减少网格行数从50到40
- 缩小网格单元格尺寸并移除冗余编码显示
- 添加按钮加载状态控制
---
 .../warehouse/components/WarehouseBird.vue    |  57 +++++-
 .../warehouse/components/WarehouseGrid.vue    | 169 +++++++++---------
 klp-ui/src/views/wms/warehouse/overview.vue   |   5 +-
 3 files changed, 144 insertions(+), 87 deletions(-)

diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
index 46f11373..4e9c1822 100644
--- a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
@@ -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;
   }
 
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue
index 5048e0df..4c8cc7f9 100644
--- a/klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue
@@ -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;
diff --git a/klp-ui/src/views/wms/warehouse/overview.vue b/klp-ui/src/views/wms/warehouse/overview.vue
index b48ac860..6336f4cf 100644
--- a/klp-ui/src/views/wms/warehouse/overview.vue
+++ b/klp-ui/src/views/wms/warehouse/overview.vue
@@ -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() {