From 2e0638c03eb37ce8b98dbfe59323406a453c876f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 28 Jan 2026 13:09:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=93=E5=BA=93=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BA=93=E4=BD=8D=E5=88=86=E5=B8=83=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构仓库鸟瞰图组件，将原有的简单文本展示替换为表格形式，展示每列各层的库位占用情况。新增表格数据结构处理和层级统计逻辑，提升数据可视化效果。
---
 .../warehouse/components/WarehouseBird.vue    | 111 +++++++++++++++---
 1 file changed, 95 insertions(+), 16 deletions(-)

diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
index 7542b94b..250688bd 100644
--- a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
@@ -11,14 +11,36 @@
           <span class="label">总列数：</span>
           <span class="value">{{ statistics.columnCount }}</span>
         </div>
-        <div class="statistics-item">
-          <span class="label">各列库位分布：</span>
-          <span class="value">
-            <span v-for="(count, column) in statistics.columnDetail" :key="column">
-              第{{ column }}列：{{ count }}个
-            </span>
-          </span>
-        </div>
+        <el-table :data="tableData" border size="medium" style="width: 100%; margin-bottom: 20px;">
+          <!-- 表头配置：合并表头实现层级展示 -->
+          <el-table-column label="列信息" align="center" width="80">
+            <el-table-column prop="column" label="列号" align="center" />
+          </el-table-column>
+
+          <!-- 第一层合并表头 -->
+          <el-table-column label="第一层" align="center">
+            <el-table-column prop="layer1_total" label="总数" align="center" width="100" />
+            <el-table-column prop="layer1_occupied" label="已占用" align="center" width="100"
+              label-class-name="occupied-label" />
+            <el-table-column prop="layer1_free" label="未占用" align="center" width="100" label-class-name="free-label" />
+          </el-table-column>
+
+          <!-- 第二层合并表头 -->
+          <el-table-column label="第二层" align="center">
+            <el-table-column prop="layer2_total" label="总数" align="center" width="100" />
+            <el-table-column prop="layer2_occupied" label="已占用" align="center" width="100"
+              label-class-name="occupied-label" />
+            <el-table-column prop="layer2_free" label="未占用" align="center" width="100" label-class-name="free-label" />
+          </el-table-column>
+
+          <!-- 该列总计 -->
+          <el-table-column label="该列总计" align="center">
+            <el-table-column prop="column_total" label="总数" align="center" width="100" />
+            <el-table-column prop="column_occupied" label="已占用" align="center" width="100"
+              label-class-name="occupied-label" />
+            <el-table-column prop="column_free" label="未占用" align="center" width="100" label-class-name="free-label" />
+          </el-table-column>
+        </el-table>
       </el-card>
     </div>
 
@@ -52,9 +74,9 @@
         <div class="empty-text">该分类下暂无库位数据</div>
         <el-button type="primary" icon="el-icon-plus" @click="openInitDialog">初始化库位</el-button>
       </div>
-      <warehouse-interlaced v-else="warehouseList.length" :id="id" :columns="columns"
-        :canToggle="canToggle" :canRelease="canRelease"
-        @split-warehouse="handleSplitWarehouse" @merge-warehouse="handleMergeWarehouse" @release-warehouse="handleReleaseWarehouse"/>
+      <warehouse-interlaced v-else="warehouseList.length" :id="id" :columns="columns" :canToggle="canToggle"
+        :canRelease="canRelease" @split-warehouse="handleSplitWarehouse" @merge-warehouse="handleMergeWarehouse"
+        @release-warehouse="handleReleaseWarehouse" />
     </div>
   </div>
 </template>
@@ -92,8 +114,12 @@ export default {
       statistics: {
         total: 0,
         columnCount: 0,
-        columnDetail: {}
+        columnDetail: {},
+        // 占用情况
+        // 每一列每一层的总数和已占用数量
+        layerDetail: {}
       },
+      tableData: []
     };
   },
   watch: {
@@ -110,6 +136,30 @@ export default {
       this.$emit('split-warehouse', warehouse);
     },
 
+    // 1. 转换layerDetail为表格所需的数组格式
+    formatTableData() {
+      const layerDetail = this.statistics.layerDetail;
+      this.tableData = Object.keys(layerDetail).map(column => {
+        const layer1 = layerDetail[column].layer1;
+        const layer2 = layerDetail[column].layer2;
+        return {
+          column: column, // 列号
+          // 第一层数据
+          layer1_total: layer1.total,
+          layer1_occupied: layer1.occupied,
+          layer1_free: layer1.free,
+          // 第二层数据
+          layer2_total: layer2.total,
+          layer2_occupied: layer2.occupied,
+          layer2_free: layer2.free,
+          // 该列总计
+          column_total: layer1.total + layer2.total,
+          column_occupied: layer1.occupied + layer2.occupied,
+          column_free: layer1.free + layer2.free
+        };
+      });
+    },
+
     handleMergeWarehouse(warehouse) {
       this.$emit('merge-warehouse', warehouse);
     },
@@ -179,15 +229,14 @@ export default {
       };
     },
 
-    /**
-     * 重构：按列构建库位数据结构，每列分为两层数组
-     */
     buildWarehouseBox(list) {
       const columnMap = {}; // 按列分组的核心对象
       const statistics = {
         total: list.length,
         columnCount: 0,
         columnDetail: {},
+        // 占用情况：每一列每一层的总数、已占用、未占用数量
+        layerDetail: {}
       };
 
       // 1. 按列分组，每列内部分为layer1和layer2两个数组
@@ -239,12 +288,42 @@ export default {
       // 3. 更新统计信息（适配分列逻辑）
       statistics.columnCount = Object.keys(columnMap).length;
       Object.keys(columnMap).forEach((column) => {
-        statistics.columnDetail[column] = columnMap[column].total;
+        const columnData = columnMap[column];
+        // 列维度总数量
+        statistics.columnDetail[column] = columnData.total;
+
+        // ========== 新增：layerDetail 层级统计逻辑 ==========
+        // 初始化当前列的层级统计结构
+        statistics.layerDetail[column] = {
+          layer1: {
+            total: 0,      // 该层总库位数
+            occupied: 0,   // 已占用（isEnabled=0）
+            free: 0        // 未占用（isEnabled=1）
+          },
+          layer2: {
+            total: 0,
+            occupied: 0,
+            free: 0
+          }
+        };
+
+        // 统计第一层
+        const layer1Data = columnData.layer1;
+        statistics.layerDetail[column].layer1.total = layer1Data.length;
+        statistics.layerDetail[column].layer1.occupied = layer1Data.filter(item => item.isEnabled === 0).length;
+        statistics.layerDetail[column].layer1.free = layer1Data.filter(item => item.isEnabled === 1).length;
+
+        // 统计第二层
+        const layer2Data = columnData.layer2;
+        statistics.layerDetail[column].layer2.total = layer2Data.length;
+        statistics.layerDetail[column].layer2.occupied = layer2Data.filter(item => item.isEnabled === 0).length;
+        statistics.layerDetail[column].layer2.free = layer2Data.filter(item => item.isEnabled === 1).length;
       });
 
       // 4. 赋值到响应式数据
       this.columns = columnMap;
       this.statistics = statistics;
+      this.formatTableData();
     },
 
     /**