diff --git a/klp-ui/src/api/wms/coil.js b/klp-ui/src/api/wms/coil.js
index 1c309d4a..e57b5b0c 100644
--- a/klp-ui/src/api/wms/coil.js
+++ b/klp-ui/src/api/wms/coil.js
@@ -135,4 +135,15 @@ export function exportCoil(coilId) {
     url: '/wms/materialCoil/exportCoil/' + coilId,
     method: 'get'
   })
+}
+
+// 根据钢卷ID序列查询钢卷列表
+export function listCoilByIds(coilIds) {
+  return request({
+    url: '/wms/materialCoil/list',
+    method: 'get',
+    params: {
+      coilIds
+    }
+  })
 }
\ No newline at end of file
diff --git a/klp-ui/src/components/CoilSelector/index.vue b/klp-ui/src/components/CoilSelector/index.vue
index 98f98994..4046779e 100644
--- a/klp-ui/src/components/CoilSelector/index.vue
+++ b/klp-ui/src/components/CoilSelector/index.vue
@@ -6,13 +6,11 @@
         <el-button type="primary" size="small" @click="handleOpen" class="select-button">
           <i class="el-icon-search"></i>
           <span v-if="selectedCoil">
-            <span>{{ selectedCoil.currentCoilNo }} </span>
-
-            <span>({{ selectedCoil.itemName }}) </span>
-
+            <span>{{ selectedCoil.currentCoilNo }}</span>
+            <span>({{ selectedCoil.itemName }})</span>
             <span>[{{ selectedCoil.netWeight }}t]</span>
           </span>
-          <span v-else>请选择钢卷</span>
+          <span v-else>{{ placeholder }}</span>
         </el-button>
       </slot>
     </div>
@@ -38,16 +36,14 @@
       <!-- 数据表格 -->
       <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
         style="width: 100%">
-        <el-table-column type="index" width="50" align="center" label="序号" />
         <el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
+        <el-table-column label="存储位置" align="center" prop="actualWarehouseName" width="120" :show-overflow-tooltip="true" />
         <el-table-column label="物料" align="center" prop="itemName" width="100" />
+        <el-table-column label="规格" align="center" prop="specification" width="100" />
+        <el-table-column label="材质" align="center" prop="material" width="100" />
+        <el-table-column label="厂家" align="center" prop="manufacturer" width="100" />
         <el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
         <el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="操作" align="center" width="100">
-          <template slot-scope="scope">
-            <el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
-          </template>
-        </el-table-column>
       </el-table>
 
       <!-- 分页 -->
@@ -77,6 +73,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    placeholder: {
+      type: String,
+      default: '请选择钢卷'
+    },
     value: {
       type: [String, Number],
       default: ''
@@ -90,7 +90,7 @@ export default {
     initialCoil: {
       type: Object,
       default: null
-    }
+    },
   },
   data() {
     return {
diff --git a/klp-ui/src/views/mes/qc/template/index.vue b/klp-ui/src/views/mes/qc/template/index.vue
index b2c3ca24..7beea1cf 100644
--- a/klp-ui/src/views/mes/qc/template/index.vue
+++ b/klp-ui/src/views/mes/qc/template/index.vue
@@ -3,22 +3,18 @@
     <el-row :gutter="20">
       <el-col :span="8">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
-          label-width="68px">
+          label-width="60px">
           <el-form-item label="方案名称" prop="templateName">
             <el-input v-model="queryParams.templateName" placeholder="请输入方案名称" clearable
               @keyup.enter.native="handleQuery" />
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
         <el-table highlight-current-row border @row-click="handleRowClick" v-loading="loading"
@@ -213,6 +209,7 @@ export default {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
+              this.checkItemList = [];
             }).finally(() => {
               this.buttonLoading = false;
             });
@@ -221,6 +218,7 @@ export default {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
+              this.handleRowClick(this.form);
             }).finally(() => {
               this.buttonLoading = false;
             });
diff --git a/klp-ui/src/views/wms/coil/panels/do.vue b/klp-ui/src/views/wms/coil/panels/do.vue
index e577f731..85e47487 100644
--- a/klp-ui/src/views/wms/coil/panels/do.vue
+++ b/klp-ui/src/views/wms/coil/panels/do.vue
@@ -297,7 +297,7 @@
       </el-col>
     </el-row>
 
-    <el-dialog title="新增异常" :visible.sync="exceptionDialogVisible" width="400px">
+    <el-dialog title="新增异常" :visible.sync="exceptionDialogVisible" width="600px">
       <el-form ref="exceptionForm" :model="exceptionForm" label-width="80px">
         <el-form-item label="位置" prop="position">
           <el-radio-group v-model="exceptionForm.position">
diff --git a/klp-ui/src/views/wms/delivery/components/coilsTranfer.vue b/klp-ui/src/views/wms/delivery/components/coilsTranfer.vue
new file mode 100644
index 00000000..f362e635
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/components/coilsTranfer.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <!-- 搜索框，可以设置钢卷搜索条件 -->
+    <!-- 上方是未选的钢卷表格，包含选择按钮 -->
+    <!-- 搜索区域 -->
+    <el-row>
+      <el-form :inline="true" :model="queryParams" class="search-form">
+        <el-form-item label="卷号">
+          <el-input v-model="queryParams.currentCoilNo" placeholder="请输入卷号" clearable size="small"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="钢种">
+          <el-input v-model="queryParams.grade" placeholder="请输入钢种" clearable size="small"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <!-- 分页 -->
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 数据表格 -->
+      <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
+        style="width: 100%">
+        <el-table-column type="index" width="50" align="center" label="序号" />
+        <el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
+        <el-table-column label="物料" align="center" prop="itemName" width="100" />
+        <el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
+        <el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+
+    <el-row>
+      <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
+        style="width: 100%">
+        <el-table-column type="index" width="50" align="center" label="序号" />
+        <el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
+        <el-table-column label="物料" align="center" prop="itemName" width="100" />
+        <el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
+        <el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+  </div>
+
+
+  <!-- 下方的已选的钢卷表格，包含删除按钮 -->
+</template>
+
+<script>
+
+</script>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/delivery/plan/index.vue b/klp-ui/src/views/wms/delivery/plan/index.vue
index 7a250c6e..c8e9200d 100644
--- a/klp-ui/src/views/wms/delivery/plan/index.vue
+++ b/klp-ui/src/views/wms/delivery/plan/index.vue
@@ -2,18 +2,10 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="计划名称" prop="planName">
-        <el-input
-          v-model="queryParams.planName"
-          placeholder="请输入发货计划名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.planName" placeholder="请输入发货计划名称" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="计划日期" prop="planDate">
-        <el-date-picker clearable
-          v-model="queryParams.planDate"
-          type="date"
-          value-format="yyyy-MM-dd HH:mm:ss"
+        <el-date-picker clearable v-model="queryParams.planDate" type="date" value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="请选择计划日期">
         </el-date-picker>
       </el-form-item>
@@ -25,96 +17,95 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
+          @click="handleUpdate">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-row :gutter="20" v-loading="loading">
-      <el-col :span="6" v-for="(row, index) in deliveryPlanList" :key="row.planId">
-        <el-card shadow="hover" class="delivery-plan-card">
-          <div class="card-header">
-            <el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
-            <div class="card-title">{{ row.planName }}</div>
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <el-row :gutter="20" v-loading="loading">
+          <el-col :span="12" v-for="(row, index) in deliveryPlanList" :key="row.planId">
+            <el-card shadow="hover" class="delivery-plan-card" @click.native="handleCardClick(row)">
+              <div class="card-header">
+                <el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
+                <div class="card-title">{{ row.planName }}</div>
+              </div>
+              <div class="card-content">
+                <div class="content-item">
+                  <span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
+                  <span>
+                    <el-tag type="success" v-if="row.auditStatus == 1">已审批</el-tag>
+                    <el-tag type="primary" v-else>待审批</el-tag>
+                  </span>
+                </div>
+                <div class="content-item">
+                  <span>{{ row.createBy }}({{ parseTime(row.updateTime, '{y}-{m}-{d}') }})</span>
+                </div>
+                <div class="content-item">
+                  <span class="label">备注：</span>
+                  <span>{{ row.remark || '-' }}</span>
+                </div>
+              </div>
+              <div class="card-actions">
+                 <el-button size="mini" type="text" icon="el-icon-edit" @click="handleApprove(row)" v-if="row.auditStatus != 1">审批</el-button>
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </el-col>
+
+      <!-- 钢卷列表 -->
+      <el-col :span="16" v-loading="rightLoading">
+        <!-- 选中的钢卷表格为空时的提示 -->
+        <div v-if="!currentPlan.planId" class="empty-tip">
+          <el-empty description="请先选择发货计划" />
+        </div>
+
+        <div v-else>
+          <coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange"></coil-selector>
+          <div v-if="selectedCoilList.length > 0 && currentPlan.planId">
+            <el-table :data="selectedCoilList" highlight-current-row height="400px" style="width: 100%">
+              <el-table-column type="index" width="50" align="center" label="序号" />
+              <el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
+              <el-table-column label="存储位置" align="center" prop="actualWarehouseName" width="120"
+                :show-overflow-tooltip="true" />
+              <el-table-column label="物料" align="center" prop="itemName" width="100" />
+              <el-table-column label="规格" align="center" prop="specification" width="100" />
+              <el-table-column label="材质" align="center" prop="material" />
+              <el-table-column label="厂家" align="center" prop="manufacturer" />
+              <el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
+              <el-table-column label="库区" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
+              <el-table-column label="操作" align="center" width="100">
+                <template slot-scope="scope">
+                  <el-button type="danger" size="small" @click.stop="handleDeleteCoil(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-          <div class="card-content">
-            <div class="content-item">
-              <span class="label">计划日期：</span>
-              <span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
-            </div>
-            <div class="content-item">
-              <span class="label">备注：</span>
-              <span>{{ row.remark || '-' }}</span>
-            </div>
-            <div class="content-item">
-              <span class="label">创建人：</span>
-              <span>{{ row.createBy }}</span>
-            </div>
-            <div class="content-item">
-              <span class="label">更新时间：</span>
-              <span>{{ parseTime(row.updateTime, '{y}-{m}-{d}') }}</span>
-            </div>
+          <div v-else class="empty-tip">
+            <el-empty description="暂无数据" />
           </div>
-          <div class="card-actions">
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(row)"
-            >修改</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(row)"
-            >删除</el-button>
-          </div>
-        </el-card>
+        </div>
       </el-col>
     </el-row>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改发货计划对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -123,10 +114,7 @@
           <el-input v-model="form.planName" placeholder="请输入发货计划名称" />
         </el-form-item>
         <el-form-item label="计划日期" prop="planDate">
-          <el-date-picker clearable
-            v-model="form.planDate"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
+          <el-date-picker clearable v-model="form.planDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="请选择计划日期">
           </el-date-picker>
         </el-form-item>
@@ -144,9 +132,14 @@
 
 <script>
 import { listDeliveryPlan, getDeliveryPlan, delDeliveryPlan, addDeliveryPlan, updateDeliveryPlan } from "@/api/wms/deliveryPlan";
+import { listCoilByIds, getMaterialCoil } from "@/api/wms/coil";
+import coilSelector from "@/components/CoilSelector";
 
 export default {
   name: "DeliveryPlan",
+  components: {
+    coilSelector,
+  },
   data() {
     return {
       // 按钮loading
@@ -165,6 +158,7 @@ export default {
       total: 0,
       // 发货计划表格数据
       deliveryPlanList: [],
+      rightLoading: false,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -183,8 +177,12 @@ export default {
         planDate: '',
       },
       // 表单校验
-      rules: {
-      }
+      rules: {},
+      // 选中的钢卷列表
+      selectedCoilList: [],
+      currentPlan: {},
+      // 防抖定时器
+      debounceTimer: null,
     };
   },
   created() {
@@ -212,6 +210,99 @@ export default {
       this.open = false;
       this.reset();
     },
+    handleApprove(row) {
+      // 二次确认
+      this.$confirm('确定审批通过该发货计划吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true;
+        this.buttonLoading = true;
+        const auditTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
+        updateDeliveryPlan({
+          planId: row.planId,
+          auditStatus: 1,
+          auditBy: this.$store.getters.name,
+          auditTime: auditTime,
+        }).then(res => {
+          this.loading = false;
+          this.buttonLoading = false;
+          this.$message({
+            message: '审批成功',
+            type: 'success'
+          });
+          this.getList();
+        })
+      })
+    },
+    handleCardClick(row) {
+      // 防抖处理，防止频繁点击
+      if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer);
+      }
+      this.debounceTimer = setTimeout(() => {
+        this.currentPlan = row;
+        if (!row.coil) {
+          this.selectedCoilList = [];
+          return;
+        }
+        this.rightLoading = true;
+        listCoilByIds(row.coil).then(response => {
+          this.selectedCoilList = response.rows || [];
+          this.rightLoading = false;
+        });
+      }, 300); // 300ms防抖时间
+    },
+    handleCoilChange(coilId) {
+      const ids = this.selectedCoilList.map(item => item.coilId);
+      if (coilId) {
+        // 检查是否已存在
+        if (!ids.includes(coilId)) {
+          ids.push(coilId);
+          // 从后端查询详细信息
+          this.rightLoading = true;
+          updateDeliveryPlan({
+            planId: this.currentPlan.planId,
+            coil: ids.join(',')
+          }).then(_ => {
+            this.getList();
+          })
+          getMaterialCoil(coilId).then(res => {
+            this.selectedCoilList.push(res.data);
+            this.rightLoading = false;
+            this.$message({
+              message: '添加成功',
+              type: 'success'
+            });
+          })
+        } else {
+          this.$message({
+            message: '钢卷已存在',
+            type: 'warning'
+          });
+        }
+      }
+    },
+    // 处理删除选中钢卷
+    handleDeleteCoil(row) {
+      // 从选中的钢卷列表中删除选中的行
+      this.selectedCoilList = this.selectedCoilList.filter(item => item !== row);
+      // 更新发货计划
+      this.rightLoading = true;
+      updateDeliveryPlan({
+        planId: this.currentPlan.planId,
+        coil: this.selectedCoilList.map(item => item.coilId).join(',')
+      }).then(res => {
+        this.rightLoading = false;
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        });
+        this.getList();
+      })
+
+    },
     // 表单重置
     reset() {
       this.form = {
@@ -344,8 +435,9 @@ export default {
 
 .content-item {
   margin-bottom: 10px;
-  display: flex;
-  align-items: flex-start;
+  display: flex; 
+  gap: 10px;
+  align-items: center;
 }
 
 .content-item:last-child {
@@ -361,7 +453,7 @@ export default {
 
 .card-actions {
   display: flex;
-  justify-content: flex-end;
-  gap: 10px;
+  justify-content: center;
+  gap: 5px;
 }
 </style>
diff --git a/klp-ui/src/views/wms/delivery/waybill/index.vue b/klp-ui/src/views/wms/delivery/waybill/index.vue
index fe35a2d0..6e7cc010 100644
--- a/klp-ui/src/views/wms/delivery/waybill/index.vue
+++ b/klp-ui/src/views/wms/delivery/waybill/index.vue
@@ -211,9 +211,10 @@ export default {
       selectedPlan: null,
       planQueryParams: {
         pageNum: 1,
-        pageSize: 100, // 增大分页大小以确保树形结构显示足够数据
+        pageSize: 20, // 增大分页大小以确保树形结构显示足够数据
         planName: undefined,
         planType: 0,
+        auditStatus: 1,
       }
     };
   },
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
index fec2d7fb..c8e54638 100644
--- a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
@@ -25,8 +25,12 @@
     <!-- 图例 -->
     <div class="legend-container">
       <div class="legend-item">
-        <div class="legend-color normal"></div>
-        <span class="legend-text">正常未占用</span>
+        <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>
@@ -36,29 +40,26 @@
 
     <!-- 分层库位容器 -->
     <div class="layers-container">
-      <!-- 遍历每层，渲染 Grid 组件 -->
-      <div v-for="(layerData, layer) in layers" :key="layer" class="layer-section">
-        <WarehouseGrid :layer="layer" :layer-data="layerData" />
-      </div>
-
       <!-- 无数据提示 -->
       <div class="empty-tip" v-if="Object.keys(layers).length === 0 && warehouseList.length > 0">
         暂无解析到有效的库位分层数据
       </div>
-      <div class="empty-tip" v-if="warehouseList.length === 0">
+      <div class="empty-tip" v-else-if="warehouseList.length === 0">
         <div class="empty-text">该分类下暂无库位数据</div>
         <el-button type="primary" icon="el-icon-plus" @click="openInitDialog">初始化库位</el-button>
       </div>
+      <warehouse-interlaced v-else="warehouseList.length" :layers="layers" />
     </div>
   </div>
 </template>
 
 <script>
 import WarehouseGrid from './WarehouseGrid.vue';
+import WarehouseInterlaced from './WarehouseInterlaced.vue';
 
 export default {
   name: "WarehouseBird",
-  components: { WarehouseGrid },
+  components: { WarehouseGrid, WarehouseInterlaced },
   props: {
     // 原始库位列表
     warehouseList: {
@@ -93,7 +94,7 @@ export default {
      */
     parseWarehouseCode(code) {
       if (!code) return null;
-      const reg = /^([A-Za-z])(\d+[A-Za-z])(\d)(\d{2})-(\d+)$/;
+      const reg = /^([A-Za-z])(\d+[A-Za-z])(\d)-(\d{2})-(\d+)$/;
       const match = code.match(reg);
 
       if (!match) {
@@ -239,8 +240,16 @@ export default {
       background-color: #ffffff;
     }
 
+    .layer-1 {
+      background-color: #fff3e0;
+    }
+
+    .layer-2 {
+      background-color: #e8f5e9;
+    }
+
     .occupied {
-      background-color: #eeff6f;
+      background-color: #111;
     }
 
     .legend-text {
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
new file mode 100644
index 00000000..cad63b94
--- /dev/null
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
@@ -0,0 +1,372 @@
+<template>
+  <div class="multi-layer-grid">
+    <!-- 顶部列标尺 -->
+    <div class="col-ruler" :style="{ '--cell-width': `${cellWidth}px` }">
+      <div class="ruler-empty"></div>
+      <div v-for="col in maxColumn" :key="`col-${col}`" class="ruler-item">
+        {{ col }}
+      </div>
+    </div>
+
+    <!-- 左侧行标尺 + 库位网格 -->
+    <div class="row-grid-wrapper">
+      <!-- 左侧行标尺 -->
+      <div class="row-ruler">
+        <div v-for="row in maxRow" :key="`row-${row}`" class="ruler-item">
+          {{ row }}
+        </div>
+      </div>
+
+      <!-- 库位网格容器 -->
+      <div 
+        class="grid-container" 
+        :style="{ 
+          '--half-cell-width': `${halfCellWidth}px`,
+          '--cell-width': `${cellWidth}px`,
+          '--column-count': maxColumn * 2,
+          '--row-height': '80px'
+        }"
+      >
+        <!-- 第一层库位（左半列） -->
+        <div 
+          v-for="warehouse in layer1Warehouses" 
+          :key="`warehouse-1-${warehouse.actualWarehouseId}`"
+          class="warehouse-cell layer-1"
+          :class="{ disabled: warehouse.isEnabled === 0 }"
+          :style="{
+            gridRow: `${warehouse.parsedInfo.row} / ${warehouse.parsedInfo.row + 1}`,
+            gridColumn: `${(warehouse.parsedInfo.column - 1) * 2 + 1} / ${(warehouse.parsedInfo.column - 1) * 2 + 2}`
+          }"
+          @click="handleCellClick(warehouse)"
+        >
+          <div class="cell-name">
+            <div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
+            <div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</div>
+          </div>
+        </div>
+
+        <!-- 第二层库位（右半列 + 下移半格） -->
+        <div 
+          v-for="warehouse in layer2Warehouses" 
+          :key="`warehouse-2-${warehouse.actualWarehouseId}`"
+          class="warehouse-cell layer-2"
+          :class="{ disabled: warehouse.isEnabled === 0 }"
+          :style="{
+            gridRow: `${warehouse.parsedInfo.row} / ${warehouse.parsedInfo.row + 1}`,
+            gridColumn: `${(warehouse.parsedInfo.column - 1) * 2 + 2} / ${(warehouse.parsedInfo.column - 1) * 2 + 3}`
+          }"
+          @click="handleCellClick(warehouse)" 
+        >
+          <div class="cell-name">
+            <div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
+            <div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</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.currentCoilNo || '无' }}</el-descriptions-item>
+        <el-descriptions-item label="所属层级">{{ currentWarehouse.parsedInfo.layer || '未知' }}</el-descriptions-item>
+        <el-descriptions-item label="行号">{{ currentWarehouse.parsedInfo.row || '未知' }}</el-descriptions-item>
+        <el-descriptions-item label="列号">{{ currentWarehouse.parsedInfo.column || '未知' }}</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="创建时间" span="2">{{ currentWarehouse.createTime || '无' }}</el-descriptions-item>
+      </el-descriptions>
+      <template slot="footer">
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SteelCoilWarehouse",
+  props: {
+    layers: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      currentWarehouse: null,
+      containerWidth: 0,
+      resizeTimer: null
+    };
+  },
+  computed: {
+    layer1Warehouses() {
+      return this.layers['1']?.warehouses || [];
+    },
+    layer2Warehouses() {
+      return this.layers['2']?.warehouses || [];
+    },
+    maxRow() {
+      let max = 0;
+      Object.keys(this.layers).forEach(layer => {
+        max = Math.max(max, this.layers[layer].maxRow);
+      });
+      return max;
+    },
+    maxColumn() {
+      let max = 0;
+      Object.keys(this.layers).forEach(layer => {
+        max = Math.max(max, this.layers[layer].maxColumn);
+      });
+      return max;
+    },
+    cellWidth() {
+      if (!this.containerWidth || this.maxColumn === 0) return 60;
+      const availableWidth = Math.max(0, this.containerWidth - 30);
+      const averageWidth = availableWidth / this.maxColumn;
+      return averageWidth;
+    },
+    halfCellWidth() {
+      return this.cellWidth / 2;
+    }
+  },
+  mounted() {
+    this.calcContainerWidth();
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+    clearTimeout(this.resizeTimer);
+  },
+  methods: {
+    calcContainerWidth() {
+      this.containerWidth = this.$el.parentElement?.clientWidth || this.$el.clientWidth || 0;
+    },
+    handleResize() {
+      clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        this.calcContainerWidth();
+      }, 100);
+    },
+    handleCellClick(warehouse) {
+      this.currentWarehouse = warehouse;
+      this.dialogVisible = true;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+/* 外层容器：填满父元素 + 隐藏滚动条 */
+.multi-layer-grid {
+  width: 100% !important;
+  height: 100%;
+  box-sizing: border-box;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+}
+
+/* 列标尺 */
+.col-ruler {
+  display: flex;
+  height: 30px;
+  line-height: 30px;
+  background: #f5f7fa; /* 更柔和的标尺背景 */
+  border-bottom: 1px solid #e4e7ed;
+  width: 100% !important;
+  box-sizing: border-box;
+  overflow: hidden !important;
+
+  .ruler-empty {
+    width: 30px;
+    text-align: center;
+    font-weight: 600;
+    color: #606266;
+    border-right: 1px solid #e4e7ed;
+    flex-shrink: 0;
+  }
+
+  .ruler-item {
+    width: var(--cell-width);
+    text-align: center;
+    font-weight: 600;
+    color: #606266;
+    border-right: 1px solid #e4e7ed;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.row-grid-wrapper {
+  display: flex;
+  width: 100% !important;
+  height: calc(100% - 30px);
+  box-sizing: border-box;
+  overflow: hidden !important;
+}
+
+/* 行标尺 */
+.row-ruler {
+  width: 30px;
+  background: #f5f7fa; /* 更柔和的标尺背景 */
+  border-right: 1px solid #e4e7ed;
+  flex-shrink: 0;
+  overflow: hidden !important;
+
+  .ruler-item {
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    font-weight: 600;
+    color: #606266;
+    border-bottom: 1px solid #e4e7ed;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+/* 网格容器 */
+.grid-container {
+  display: grid;
+  width: 100% !important;
+  grid-template-columns: repeat(var(--column-count), minmax(0, var(--half-cell-width)));
+  grid-auto-rows: var(--row-height);
+  gap: 1px;
+  box-sizing: border-box;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+}
+
+/* 库位单元格基础样式 */
+.warehouse-cell {
+  height: var(--row-height);
+  border: 1px solid #e4e7ed;
+  border-radius: 4px; /* 圆角更柔和 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+
+  /* 启用状态 - 第一层：柔和暖橙（低饱和度） */
+  &.layer-1:not(.disabled) {
+    background: #fff3e0; /* 柔和浅橙 */
+    color: #e65100; /* 文字用深一点的橙，保证可读性 */
+  }
+
+  /* 启用状态 - 第二层：柔和薄荷绿（低饱和度） */
+  &.layer-2:not(.disabled) {
+    background: #e8f5e9; /* 柔和浅绿 */
+    color: #2e7d32; /* 文字用深一点的绿，保证可读性 */
+    transform: translateY(50%);
+    position: relative;
+    top: 0;
+  }
+
+  /* 禁用状态 - 通用浅灰 */
+  &.disabled {
+    background: #111; /* 浅灰背景 */
+    color: #909399; /* 浅灰文字 */
+    cursor: not-allowed; /* 禁用光标 */
+    opacity: 0.8; /* 降低透明度 */
+    /* 禁用状态取消hover效果 */
+    &:hover {
+      border-color: #e4e7ed;
+      background: #fafafa;
+      z-index: 1;
+    }
+  }
+
+  /* 启用状态hover效果（更柔和） */
+  &:not(.disabled):hover {
+    border-color: #90caf9; /* 柔和的蓝色边框 */
+    background: #f0f8ff; /* 极浅的蓝背景 */
+    z-index: 2;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 轻微阴影，提升层次感 */
+  }
+
+  /* 两行文字样式 */
+  .cell-name {
+    width: 100%;
+    height: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 0 4px;
+    box-sizing: border-box;
+
+    /* 第一行：库位名称 */
+    .cell-line1 {
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1.2;
+      margin-bottom: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    /* 第二行：currentCoilNo */
+    .cell-line2 {
+      font-size: 13px;
+      line-height: 1.2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    /* 禁用状态文字颜色 */
+    .disabled & .cell-line1,
+    .disabled & .cell-line2 {
+      color: #909399 !important;
+    }
+
+    /* 启用状态文字颜色适配 */
+    .layer-1:not(.disabled) & .cell-line1,
+    .layer-1:not(.disabled) & .cell-line2 {
+      color: #e65100;
+    }
+    .layer-2:not(.disabled) & .cell-line1,
+    .layer-2:not(.disabled) & .cell-line2 {
+      color: #2e7d32;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/warehouse/overview.vue b/klp-ui/src/views/wms/warehouse/overview.vue
index 0189ada9..6b4bd5a2 100644
--- a/klp-ui/src/views/wms/warehouse/overview.vue
+++ b/klp-ui/src/views/wms/warehouse/overview.vue
@@ -43,10 +43,6 @@
             </div>
           </div>
         </el-form-item>
-        <el-form-item label="层数" prop="layerCount">
-          <el-input-number size="mini" v-model="initForm.layerCount" :min="1" :max="99" placeholder="请输入层数（1-99）"
-            style="width: 100%;" />
-        </el-form-item>
         <el-form-item label="编码前缀" prop="prefix">
           <el-input v-model="initForm.prefix" disabled placeholder="系统自动生成" />
         </el-form-item>
@@ -189,7 +185,7 @@ export default {
 
       const prefix = await this.generateWarehousePrefix(this.selectedNode);
       this.initForm = {
-        rowCount: '', columnCount: '', layerCount: '',
+        rowCount: '', columnCount: '',
         prefix: prefix,
         parentId: this.selectedNode.actualWarehouseId
       };