From e1fbb7805fd469791222d53674958756f6d70100 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 11 Mar 2026 10:47:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(CoilSelector):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8F=AF=E6=8B=96=E6=8B=BD=E5=BA=93=E4=BD=8D=E8=A7=86=E5=9B=BE?=
 =?UTF-8?q?=E5=92=8C=E5=93=81=E8=B4=A8=E5=88=97=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(WarehouseInterlaced): 修复props格式问题
fix(DuGeTag): 修正电话号码格式
---
 klp-ui/src/components/CoilSelector/index.vue  |  54 ++-
 klp-ui/src/components/DragResizeBox/index.vue | 231 ++++++++++
 .../wms/coil/panels/LabelRender/DuGeTag.vue   |   2 +-
 .../components/WarehouseBirdMini.vue          | 405 ++++++++++++++++++
 .../components/WarehouseInterlaced.vue        |   2 +-
 5 files changed, 689 insertions(+), 5 deletions(-)
 create mode 100644 klp-ui/src/components/DragResizeBox/index.vue
 create mode 100644 klp-ui/src/views/wms/warehouse/components/WarehouseBirdMini.vue

diff --git a/klp-ui/src/components/CoilSelector/index.vue b/klp-ui/src/components/CoilSelector/index.vue
index faa29a13..492186bf 100644
--- a/klp-ui/src/components/CoilSelector/index.vue
+++ b/klp-ui/src/components/CoilSelector/index.vue
@@ -18,7 +18,7 @@
     </div>
 
     <el-dialog title="选择钢卷" :visible.sync="dialogVisible" :width="dialogWidth" :close-on-click-modal="false"
-      @close="handleClose" append-to-body>
+      @close="handleClose" append-to-body :fullscreen="orderBy">
       <!-- 搜索区域 -->
       <el-form v-if="!rangeMode" :model="queryParams" class="search-form">
         <!-- <el-form-item label="类型">
@@ -62,7 +62,7 @@
         </el-form-item>
         <el-form-item label="实际库区" v-if="orderBy">
           <actual-warehouse-select v-model="queryParams.actualWarehouseId" placeholder="请选择实际库区" canSelectLevel2
-            canSelectDisabled />
+            canSelectDisabled @select="handleWarehouseChange" />
         </el-form-item>
 
         <el-form-item>
@@ -77,6 +77,7 @@
         <!-- 自定义列 -->
         <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
           :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
+        <el-table-column v-if="orderBy" label="品质" prop="qualityStatus"></el-table-column>
         <el-table-column v-if="orderBy" label="切边" prop="trimmingRequirement"></el-table-column>
         <el-table-column v-if="orderBy" label="包装" prop="packagingRequirement"></el-table-column>
       </el-table>
@@ -93,6 +94,7 @@
           <!-- 自定义列 -->
           <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align"
             :prop="column.prop" :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
+          <el-table-column v-if="orderBy" label="品质" prop="qualityStatus"></el-table-column>
           <el-table-column v-if="orderBy" label="切边" prop="trimmingRequirement"></el-table-column>
           <el-table-column v-if="orderBy" label="包装" prop="packagingRequirement"></el-table-column>
         </el-table>
@@ -105,6 +107,7 @@
       <el-table v-if="multiple && selectedCoils.length > 0" :data="selectedCoils">
         <el-table-column v-for="column in renderColumns" :label="column.label" :align="column.align" :prop="column.prop"
           :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" />
+        <el-table-column v-if="orderBy" label="品质" prop="qualityStatus"></el-table-column>
 
         <el-table-column label="操作" width="50">
           <template slot-scope="scope">
@@ -117,23 +120,36 @@
         <el-button type="primary" @click="handleConfirm">确认选择</el-button>
         <el-button @click="handleClose">取消</el-button>
       </div>
+
+      <!-- 一个可以拖拽和调节大小的浮层 -->
+      <DragResizeBox v-if="selectedNodeId" @size-change="handleSizeChange">
+        <div style="height: 100%; width: 100%; overflow-y: scroll;">
+          <warehouse-bird-mini ref="warehouseBirdMini" v-loading="warehouseLoading" :warehouseList="warehouseList" :id="selectedNodeId"
+            :canToggle="false" :canRelease="false" />
+        </div>
+      </DragResizeBox>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import { listMaterialCoil } from '@/api/wms/coil';
+import { listActualWarehouse } from "@/api/wms/actualWarehouse";
 import MemoInput from '@/components/MemoInput/index.vue';
 import MutiSelect from '@/components/MutiSelect/index.vue';
 import { defaultColumns } from './data';
 import ActualWarehouseSelect from '@/components/KLPService/ActualWarehouseSelect/index.vue';
+import WarehouseBirdMini from '@/views/wms/warehouse/components/WarehouseBirdMini.vue';
+import DragResizeBox from '@/components/DragResizeBox/index.vue';
 
 export default {
   name: 'CoilSelector',
   components: {
     MemoInput,
     MutiSelect,
-    ActualWarehouseSelect
+    ActualWarehouseSelect,
+    WarehouseBirdMini,
+    DragResizeBox
   },
   dicts: ['coil_itemname', 'coil_material', 'coil_manufacturer'],
   props: {
@@ -223,6 +239,9 @@ export default {
       columns: defaultColumns,
       currentTab: 'my',
       selectedCoils: [],
+      warehouseList: [],
+      selectedNodeId: null,
+      warehouseLoading: false,
     };
   },
   computed: {
@@ -306,6 +325,35 @@ export default {
     }
   },
   methods: {
+    // 获取库位列表
+    getWarehouseList(parentId) {
+      this.warehouseLoading = true;
+      return listActualWarehouse({ parentId })
+        .then((res) => { this.warehouseList = res.data || []; this.warehouseLoading = false; })
+        .catch((err) => {
+          this.$message.error("获取库位数据失败：" + err.message);
+          this.warehouseList = [];
+          this.warehouseLoading = false;
+        });
+    },
+    // 处理大小变化
+    handleSizeChange(size) {
+      console.log('size', size);
+      this.$refs.warehouseBirdMini.resize();
+    },
+    // 处理实际库区选择变化
+    handleWarehouseChange(val) {
+      console.log('val', val);
+      if (!val) {
+        this.selectedNodeId = null;
+        this.warehouseList = [];
+        return;
+      }
+      if (val.pathIds.length == 2) {
+        this.selectedNodeId = val;
+        this.getWarehouseList(val.id);
+      }
+    },
     // 动态生成表格行类名 - 综合处理选中、禁用等状态
     getRowClassName({ row }) {
       const classNames = [];
diff --git a/klp-ui/src/components/DragResizeBox/index.vue b/klp-ui/src/components/DragResizeBox/index.vue
new file mode 100644
index 00000000..518c9ee9
--- /dev/null
+++ b/klp-ui/src/components/DragResizeBox/index.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="drag-resize-container" ref="containerRef">
+    <!-- 可拖拽调整的元素 -->
+    <div
+      class="draggable-element"
+      ref="elementRef"
+      :style="{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        width: `${size.width}px`,
+        height: `${size.height}px`
+      }"
+      @mousedown="startDrag"
+    >
+      <!-- 元素内容区 -->
+      <div class="element-content">
+        <slot>可拖拽调整的元素</slot>
+      </div>
+      <!-- 右下角调整大小的控制点 -->
+      <div class="resize-handle" @mousedown="startResize"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DragResizeBox',
+  props: {
+    // 初始位置
+    initPosition: {
+      type: Object,
+      default: () => ({ x: 100, y: 100 })
+    },
+    // 初始尺寸
+    initSize: {
+      type: Object,
+      default: () => ({ width: 200, height: 150 })
+    },
+    // 移除容器尺寸限制（保留prop但默认值改为屏幕尺寸）
+    containerSize: {
+      type: Object,
+      default: () => ({ 
+        width: window.innerWidth, 
+        height: window.innerHeight 
+      })
+    },
+    // 元素最小尺寸
+    minSize: {
+      type: Object,
+      default: () => ({ width: 100, height: 80 })
+    }
+  },
+  data() {
+    return {
+      // 当前位置
+      position: { x: 0, y: 0 },
+      // 当前尺寸
+      size: { width: 0, height: 0 },
+      // 拖拽状态
+      isDragging: false,
+      // 调整大小状态
+      isResizing: false,
+      // 鼠标初始位置
+      startMouse: { x: 0, y: 0 },
+      // 元素初始状态
+      startState: { x: 0, y: 0, width: 0, height: 0 }
+    };
+  },
+  mounted() {
+    // 初始化位置和尺寸
+    this.position = { ...this.initPosition };
+    this.size = { ...this.initSize };
+    // 监听全局鼠标移动和松开事件
+    document.addEventListener('mousemove', this.handleMouseMove);
+    document.addEventListener('mouseup', this.handleMouseUp);
+    // 监听窗口大小变化，更新屏幕尺寸
+    window.addEventListener('resize', this.updateScreenSize);
+  },
+  beforeDestroy() {
+    // 移除全局事件监听，防止内存泄漏
+    document.removeEventListener('mousemove', this.handleMouseMove);
+    document.removeEventListener('mouseup', this.handleMouseUp);
+    window.removeEventListener('resize', this.updateScreenSize);
+  },
+  methods: {
+    /**
+     * 更新屏幕尺寸（窗口大小变化时）
+     */
+    updateScreenSize() {
+      this.containerSize = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+    },
+
+    /**
+     * 开始拖拽（移动位置）
+     */
+    startDrag(e) {
+      // 阻止事件冒泡，避免和调整大小冲突
+      if (e.target.classList.contains('resize-handle')) return;
+      
+      this.isDragging = true;
+      // 记录鼠标初始位置
+      this.startMouse = { x: e.clientX, y: e.clientY };
+      // 记录元素初始位置
+      this.startState = {
+        x: this.position.x,
+        y: this.position.y,
+        width: this.size.width,
+        height: this.size.height
+      };
+      // 更改鼠标样式
+      document.body.style.cursor = 'move';
+    },
+
+    /**
+     * 开始调整大小
+     */
+    startResize(e) {
+      e.stopPropagation(); // 阻止事件冒泡
+      this.isResizing = true;
+      // 记录鼠标初始位置
+      this.startMouse = { x: e.clientX, y: e.clientY };
+      // 记录元素初始尺寸
+      this.startState = {
+        x: this.position.x,
+        y: this.position.y,
+        width: this.size.width,
+        height: this.size.height
+      };
+      // 更改鼠标样式
+      document.body.style.cursor = 'se-resize';
+    },
+
+    /**
+     * 处理鼠标移动
+     */
+    handleMouseMove(e) {
+      if (this.isDragging) {
+        // 计算鼠标移动的偏移量
+        const dx = e.clientX - this.startMouse.x;
+        const dy = e.clientY - this.startMouse.y;
+        
+        // 核心修改：移除容器边界限制，仅限制不超出屏幕左侧/顶部（右侧/底部可任意移动）
+        this.position.x = Math.max(0, this.startState.x + dx);
+        this.position.y = Math.max(0, this.startState.y + dy);
+        
+        // 触发位置变化事件
+        this.$emit('position-change', { ...this.position });
+      }
+
+      if (this.isResizing) {
+        // 计算鼠标移动的偏移量
+        const dx = e.clientX - this.startMouse.x;
+        const dy = e.clientY - this.startMouse.y;
+        
+        // 调整大小仅限制最小尺寸，不限制屏幕边界
+        this.size.width = Math.max(this.minSize.width, this.startState.width + dx);
+        this.size.height = Math.max(this.minSize.height, this.startState.height + dy);
+        
+        // 触发尺寸变化事件
+        this.$emit('size-change', { ...this.size });
+      }
+    },
+
+    /**
+     * 处理鼠标松开
+     */
+    handleMouseUp() {
+      // 重置状态
+      this.isDragging = false;
+      this.isResizing = false;
+      // 恢复鼠标样式
+      document.body.style.cursor = 'default';
+      
+      // 触发结束事件
+      this.$emit('drag-end', { position: { ...this.position }, size: { ...this.size } });
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 容器样式：改为全屏且无视觉样式 */
+.drag-resize-container {
+  position: fixed; /* 固定定位覆盖整个屏幕 */
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none; /* 容器不拦截鼠标事件，不影响页面其他元素 */
+  box-sizing: border-box;
+}
+
+/* 可拖拽元素样式：fixed定位确保基于屏幕移动 */
+.draggable-element {
+  position: fixed;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  user-select: none; /* 禁止文本选中 */
+  box-sizing: border-box;
+  overflow: hidden;
+  pointer-events: auto; /* 元素本身响应鼠标事件 */
+  z-index: 9999; /* 确保元素在最上层 */
+}
+
+/* 元素内容区 */
+.element-content {
+  height: calc(100% - 20px);
+  padding: 10px;
+  cursor: move;
+}
+
+/* 调整大小控制点 */
+.resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 20px;
+  height: 20px;
+  background-color: #1e88e5;
+  cursor: se-resize;
+  border-top-left-radius: 4px;
+}
+
+/* 控制点hover效果 */
+.resize-handle:hover {
+  background-color: #1976d2;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/DuGeTag.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/DuGeTag.vue
index 766c2365..a05b5484 100644
--- a/klp-ui/src/views/wms/coil/panels/LabelRender/DuGeTag.vue
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/DuGeTag.vue
@@ -114,7 +114,7 @@
             Jiaxiang County,Jining City,Shandong Province</span>
           <br />
           <span>
-            TEL：1905-3728822 1905-3728835
+            TEL：19053728822 19053728835
           </span>
         </div>
         <div class="contact-timestamp">
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseBirdMini.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseBirdMini.vue
new file mode 100644
index 00000000..aeb4ce35
--- /dev/null
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseBirdMini.vue
@@ -0,0 +1,405 @@
+<template>
+  <div class="bird-container">
+    <!-- 图例 -->
+    <div class="legend-container">
+      <div class="legend-item">
+        <div class="legend-color layer-1"></div>
+        <span class="legend-text">一层</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color layer-2"></div>
+        <span class="legend-text">二层</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color occupied"></div>
+        <span class="legend-text">已占用</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color error"></div>
+        <span class="legend-text">异常</span>
+      </div>
+    </div>
+
+    <!-- 分列库位容器 -->
+    <div class="layers-container">
+      <!-- 无数据提示 -->
+      <div class="empty-tip" v-if="Object.keys(columns).length === 0 && warehouseList.length > 0">
+        暂无解析到有效的库位分列数据
+      </div>
+      <div class="empty-tip" v-else-if="warehouseList.length === 0">
+        <el-empty description="暂无库位数据"></el-empty>
+      </div>
+      <warehouse-interlaced ref="warehouseInterlaced" v-else="warehouseList.length" :id="id" :columns="columns" :canToggle="canToggle"
+        :canRelease="canRelease" @split-warehouse="handleSplitWarehouse" @merge-warehouse="handleMergeWarehouse"
+        @release-warehouse="handleReleaseWarehouse" />
+    </div>
+  </div>
+</template>
+
+<script>
+import WarehouseInterlaced from './WarehouseInterlaced.vue';
+
+export default {
+  name: "WarehouseBirdMini",
+  components: { WarehouseInterlaced },
+  props: {
+    // 原始库位列表
+    warehouseList: {
+      type: Array,
+      default: () => []
+    },
+    id: {
+      type: String,
+      default: ''
+    },
+    canToggle: {
+      default: true,
+      type: Boolean
+    },
+    canRelease: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      // 分列库位数据（核心修改：从layers改为columns）
+      columns: {},
+      // 统计信息（适配分列逻辑）
+      statistics: {
+        total: 0,
+        columnCount: 0,
+        columnDetail: {},
+        // 占用情况
+        // 每一列每一层的总数和已占用数量
+        layerDetail: {}
+      },
+      tableData: []
+    };
+  },
+  watch: {
+    // 监听库位列表变化，重新构建分列数据
+    warehouseList: {
+      immediate: true,
+      handler(newVal) {
+        this.buildWarehouseBox(newVal);
+      }
+    }
+  },
+  methods: {
+    // 处理分列数据调整
+    resize() {
+      this.$refs.warehouseInterlaced.handleResize();
+    },
+    handleSplitWarehouse(warehouse) {
+      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);
+    },
+
+    handleReleaseWarehouse(warehouse) {
+      this.$emit('release-warehouse', warehouse);
+    },
+    /**
+     * 解析第三级库位编码
+     * 新规则：
+     * 1. 前三位：数字或字母的任意组合
+     * 2. column：从第五位开始到第一个"-"为止（支持多位数）
+     * 3. 保留 row（两位数字）、layer（数字）的解析规则
+     */
+    parseWarehouseCode(code) {
+      if (!code) return null;
+
+      // 新正则表达式解析规则
+      // ^([A-Za-z0-9]{3}) ：匹配前3位（数字/字母）
+      // .                  ：匹配第4位（任意单个字符）
+      // ([^-]+)            ：匹配column（到第一个"-"为止，至少1位）
+      // -(\d{2})           ：匹配row（两位数字）
+      // -(\d+)             ：匹配layer（一位或多位数字）
+      const reg = /^([A-Za-z0-9]{3})([^-]+)-(\d{2})-(\d+)$/;
+      const match = code.match(reg);
+
+      if (!match) {
+        console.warn(`库位编码解析失败：${code}，格式不符合规范`);
+        return null;
+      }
+
+      return {
+        level: 3,
+        warehousePrefix: match[1], // 前三位（数字/字母），替代原warehouseFirst/warehouseSecond
+        warehouseFirst: match[1].slice(0, 2), // 前三位的前两个字符
+        warehouseSecond: match[1].slice(2, 3), // 前三位的第三个字符
+        column: Number(match[2]),  // 第五位到第一个"-"的内容（多位数）
+        row: Number(match[3]),     // 两位数字的行号
+        layer: match[4]            // 层级数字（可多位数）
+      };
+    },
+
+    /**
+     * 解析第四级库位编码，格式为F2A1-X01-1
+     */
+    parseWarehouseCodeFourth(code) {
+      if (!code) return null;
+      const reg = /^([A-Za-z0-9]{3})([^-]+)-X(\d{2})-(\d+)$/;
+      const match = code.match(reg);
+
+      if (!match) {
+        console.warn(`库位编码解析失败：${code}，格式不符合规范`);
+        return null;
+      }
+
+      // console.log('match:', match);
+
+      return {
+        level: 4,
+        warehousePrefix: match[1],
+        warehouseFirst: match[1].slice(0, 2), // 前三位的前两个字符
+        warehouseSecond: match[1].slice(2, 3), // 前三位的第三个字符
+        // warehouseSecond: match[2],
+        column: Number(match[2]),
+        row: Number(match[3]),
+        layer: match[4],
+      };
+    },
+
+    buildWarehouseBox(list) {
+      const columnMap = {}; // 按列分组的核心对象
+      const statistics = {
+        total: list.length,
+        columnCount: 0,
+        columnDetail: {},
+        // 占用情况：每一列每一层的总数、已占用、未占用数量
+        layerDetail: {}
+      };
+
+      // 1. 按列分组，每列内部分为layer1和layer2两个数组
+      list.forEach((warehouse) => {
+        let codeInfo = {}
+        if (warehouse.actualWarehouseType == 4) {
+          codeInfo = this.parseWarehouseCodeFourth(warehouse.actualWarehouseCode);
+        } else {
+          codeInfo = this.parseWarehouseCode(warehouse.actualWarehouseCode);
+        }
+        if (!codeInfo) return;
+
+        const { layer, row, column } = codeInfo;
+        warehouse.parsedInfo = codeInfo;
+
+        // 初始化列数据结构：每列包含layer1、layer2数组，以及最大行号
+        if (!columnMap[column]) {
+          columnMap[column] = {
+            maxRow: 0,
+            layer1: [], // 第一层库位数组
+            layer2: [], // 第二层库位数组
+            total: 0    // 该列总库位数
+          };
+        }
+
+        // 更新列的最大行号
+        columnMap[column].maxRow = Math.max(columnMap[column].maxRow, row);
+
+        // 根据层数将库位放入对应数组
+        if (layer === '1' || layer === 1) {
+          columnMap[column].layer1.push(warehouse);
+        } else if (layer === '2' || layer === 2) {
+          columnMap[column].layer2.push(warehouse);
+        }
+
+        // 更新该列总库位数
+        columnMap[column].total = columnMap[column].layer1.length + columnMap[column].layer2.length;
+      });
+
+      // 2. 对每列的两层数据分别按行号排序
+      Object.keys(columnMap).forEach((column) => {
+        const columnData = columnMap[column];
+
+        // 按行号排序（保证展示顺序正确）
+        columnData.layer1.sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
+        columnData.layer2.sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
+      });
+
+      // 3. 更新统计信息（适配分列逻辑）
+      statistics.columnCount = Object.keys(columnMap).length;
+      Object.keys(columnMap).forEach((column) => {
+        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();
+    },
+
+    /**
+     * 打开初始化弹窗（透传至根组件）
+     */
+    openInitDialog() {
+      this.$emit('open-init-dialog');
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bird-container {
+  width: 100%;
+  height: 100%;
+}
+
+// 统计卡片样式
+.statistics-card {
+  margin-bottom: 16px;
+
+  .statistics-item {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .label {
+      color: #606266;
+      font-size: 14px;
+    }
+
+    .value {
+      color: #303133;
+      font-size: 14px;
+      font-weight: 500;
+      margin-left: 8px;
+    }
+  }
+}
+
+// 图例样式
+.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;
+    }
+
+    .layer-1 {
+      background-color: #fff3e0;
+    }
+
+    .layer-2 {
+      background-color: #e8f5e9;
+    }
+
+    .occupied {
+      background-color: #fafafa;
+    }
+
+    .error {
+      background-color: #fdecea;
+    }
+
+    .legend-text {
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+}
+
+// 分列容器样式
+.layers-container {
+  display: flex;
+
+  .layer-section {
+    flex: 1;
+    max-width: 50%;
+    margin-bottom: 24px;
+  }
+
+  .empty-tip {
+    text-align: center;
+    padding: 32px;
+    color: #909399;
+    font-size: 14px;
+    background: #fff;
+    border-radius: 8px;
+
+    .empty-text {
+      margin-bottom: 16px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
index bdc2f232..3bbf5773 100644
--- a/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
@@ -125,7 +125,7 @@ export default {
     canRelease: {
       default: false,
       type: Boolean
-    }
+    },
   },
   data() {
     return {