From c5fa84df98522f0b6531441e82f3fa88948cbf74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Fri, 24 Apr 2026 17:49:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(router):=20=E6=B7=BB=E5=8A=A0=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E9=92=A2=E5=8D=B7=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat(components): 为MutiSelect组件添加collapseTags属性

feat(views): 新增酸连轧系统页面及组件

feat(views): 添加数字钢卷信息展示组件

refactor(views): 重构基础面板组件，支持数字钢卷功能
---
 klp-ui/src/components/MutiSelect/index.vue    |    5 +
 klp-ui/src/router/index.js                    |    6 +
 .../micro/pages/acid/components/Inventory.vue |   48 +
 .../pages/acid/components/Processing.vue      |   77 +
 .../micro/pages/acid/components/Quality.vue   |   88 +
 .../micro/pages/acid/components/Report.vue    |   67 +
 .../micro/pages/acid/components/Shipping.vue  |   92 +
 klp-ui/src/views/micro/pages/acid/index.vue   |  125 ++
 .../views/wms/coil/components/CoilInfo.vue    |   86 +
 klp-ui/src/views/wms/coil/info.vue            | 1702 +++++++++++++++++
 klp-ui/src/views/wms/coil/panels/base.vue     |   50 +-
 11 files changed, 2339 insertions(+), 7 deletions(-)
 create mode 100644 klp-ui/src/views/micro/pages/acid/components/Inventory.vue
 create mode 100644 klp-ui/src/views/micro/pages/acid/components/Processing.vue
 create mode 100644 klp-ui/src/views/micro/pages/acid/components/Quality.vue
 create mode 100644 klp-ui/src/views/micro/pages/acid/components/Report.vue
 create mode 100644 klp-ui/src/views/micro/pages/acid/components/Shipping.vue
 create mode 100644 klp-ui/src/views/micro/pages/acid/index.vue
 create mode 100644 klp-ui/src/views/wms/coil/components/CoilInfo.vue
 create mode 100644 klp-ui/src/views/wms/coil/info.vue

diff --git a/klp-ui/src/components/MutiSelect/index.vue b/klp-ui/src/components/MutiSelect/index.vue
index af805587..a1e33fe3 100644
--- a/klp-ui/src/components/MutiSelect/index.vue
+++ b/klp-ui/src/components/MutiSelect/index.vue
@@ -11,6 +11,7 @@
         :allow-create="allowAdd"
         :disabled="disabled"
         :size="size"
+        :collapse-tags="collapseTags"
         @change="handleChange"
       >
         <!-- 全选选项 -->
@@ -98,6 +99,10 @@
       showSelectAll: {
         type: Boolean,
         default: true
+      },
+      collapseTags: {
+        type: Boolean,
+        default: true
       }
     },
     // 计算属性捕获实现双向绑定
diff --git a/klp-ui/src/router/index.js b/klp-ui/src/router/index.js
index cb9bf7b5..de5f0aba 100644
--- a/klp-ui/src/router/index.js
+++ b/klp-ui/src/router/index.js
@@ -112,6 +112,12 @@ export const constantRoutes = [
         component: () => import('@/views/wms/todo/index'),
         name: 'Task',
         meta: { title: '待办任务', icon: 'checkbox' }
+      },
+      {
+        path: 'coil/:coilId',
+        component: () => import('@/views/wms/coil/info'),
+        name: 'CoilInfo',
+        meta: { title: '数字钢卷', icon: 'checkbox' }
       }
     ],
   },
diff --git a/klp-ui/src/views/micro/pages/acid/components/Inventory.vue b/klp-ui/src/views/micro/pages/acid/components/Inventory.vue
new file mode 100644
index 00000000..f03915c9
--- /dev/null
+++ b/klp-ui/src/views/micro/pages/acid/components/Inventory.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="inventory-container">
+    <BasePage 
+      :qrcode="qrcode" 
+      :querys="querys" 
+      :showControl="showControl" 
+      :useWarehouseIds="useWarehouseIds"
+      :warehouseOptions="warehouseOptions"
+      :showMaterialType="showMaterialType"
+    />
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidInventory',
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      qrcode: false,
+      querys: {
+        dataType: 1,
+        status: 0
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      showControl: false,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.inventory-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/klp-ui/src/views/micro/pages/acid/components/Processing.vue b/klp-ui/src/views/micro/pages/acid/components/Processing.vue
new file mode 100644
index 00000000..dc118f88
--- /dev/null
+++ b/klp-ui/src/views/micro/pages/acid/components/Processing.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="processing-container">
+    <el-tabs v-model="activeTab" type="border-card">
+      <el-tab-pane v-for="tab in tabs" :label="tab.title" :name="tab.name">
+        <DoPage 
+          v-if="activeTab === tab.name"
+          :label="tab.label" 
+          :tabs="tab.tabs" 
+          :useSpecialSplit="tab.useSpecialSplit" 
+        />
+      </el-tab-pane>
+    </el-tabs>
+    
+  </div>
+</template>
+
+<script>
+import DoPage from '@/views/wms/coil/panels/do.vue';
+
+export default {
+  name: 'AcidProcessing',
+  components: {
+    DoPage
+  },
+  data() {
+    return {
+      activeTab: 'typing',
+      tabs: [
+        { 
+          title: '酸轧加工',
+          name: 'typing',
+          label: '酸轧工序',
+          tabs: [
+            {value: '1988150044862377986', label: '酸连轧原料库'},
+            {value: '1988150099140866050', label: '酸连轧成品库'}, 
+            {value: '1988150263284953089', label: '镀锌原料库'}, 
+            {value: '1988150545175736322', label: '脱脂原料库'},
+          ],
+          useSpecialSplit: false,
+        },
+        {
+          title: '酸轧分条',
+          name: 'split',
+          label: '分条',
+          useSpecialSplit: false,
+        },
+        {
+          title: '合卷',
+          name: 'merge',
+          label: '酸轧合卷',
+          useSpecialSplit: false,
+        },
+        { 
+          title: '酸轧修复',
+          name: 'repair',
+          label: '酸轧修复工序',
+          tabs: [
+            {value: '1988150044862377986', label: '酸连轧原料库'},
+            {value: '1988150099140866050', label: '酸连轧成品库'}, 
+            {value: '1988150263284953089', label: '镀锌原料库'}, 
+            {value: '1988150545175736322', label: '脱脂原料库'},
+          ],
+          useSpecialSplit: true,
+        },
+      ]
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.processing-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/klp-ui/src/views/micro/pages/acid/components/Quality.vue b/klp-ui/src/views/micro/pages/acid/components/Quality.vue
new file mode 100644
index 00000000..14d1c3e2
--- /dev/null
+++ b/klp-ui/src/views/micro/pages/acid/components/Quality.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="quality-container">
+    <el-tabs v-model="activeTab" class="quality-tabs">
+      <el-tab-pane label="异常钢卷" name="abnormal">
+        <div class="tab-content" v-if="activeTab === 'abnormal'">
+          <BasePage 
+            :qrcode="qrcode" 
+            :querys="abnormalQuerys" 
+            :labelType="labelType" 
+            :hideType="hideType" 
+            :showAbnormal="showAbnormal" 
+            :showControl="showControl" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="钢卷判级" name="gradeCoil">
+        <div class="tab-content" v-if="activeTab === 'gradeCoil'">
+          <BasePage 
+            :qrcode="false" 
+            :querys="{
+              dataType: 0,
+              status: 1,
+            }" 
+            :hideType="false" 
+            :showControl="false" 
+            :showGrade="true"
+            :showStatus="false"
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidQuality',
+  components: {
+    BasePage,
+  },
+  data() {
+    return {
+      activeTab: 'abnormal',
+      qrcode: false,
+      abnormalQuerys: {
+        dataType: 1,
+        orderByAbnormal: true,
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      labelType: '2',
+      hideType: false,
+      showAbnormal: true,
+      showControl: false,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.quality-container {
+  width: 100%;
+  height: 100%;
+  
+  .quality-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+  
+  .tab-content {
+    height: 100%;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/micro/pages/acid/components/Report.vue b/klp-ui/src/views/micro/pages/acid/components/Report.vue
new file mode 100644
index 00000000..8c152b83
--- /dev/null
+++ b/klp-ui/src/views/micro/pages/acid/components/Report.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="report-container">
+    <el-tabs v-model="activeTab" class="report-tabs">
+      <el-tab-pane label="综合报表" name="comprehensive">
+        <Comprehensive v-if="activeTab === 'comprehensive'"/>
+      </el-tab-pane>
+      <el-tab-pane label="日报表" name="day">
+        <DayReport v-if="activeTab === 'day'"/>
+      </el-tab-pane>
+      <el-tab-pane label="月报表" name="month">
+        <MonthReport v-if="activeTab === 'month'"/>
+      </el-tab-pane>
+      <el-tab-pane label="年报表" name="year">
+        <YearReport v-if="activeTab === 'year'"/>
+      </el-tab-pane>
+      <el-tab-pane label="损耗报表" name="loss">
+        <LossReport v-if="activeTab === 'loss'"/>
+      </el-tab-pane>
+      <el-tab-pane label="产出报表" name="out">
+        <OutReport v-if="activeTab === 'out'"/>
+      </el-tab-pane>
+      <el-tab-pane label="班报表" name="team">
+        <TeamReport v-if="activeTab === 'team'"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import Comprehensive from '@/views/wms/report/zha/comprehensive.vue';
+import DayReport from '@/views/wms/report/zha/day.vue';
+import MonthReport from '@/views/wms/report/zha/month.vue';
+import YearReport from '@/views/wms/report/zha/year.vue';
+import LossReport from '@/views/wms/report/zha/loss.vue';
+import OutReport from '@/views/wms/report/zha/out.vue';
+import TeamReport from '@/views/wms/report/zha/team.vue';
+
+export default {
+  name: 'AcidReport',
+  components: {
+    Comprehensive,
+    DayReport,
+    MonthReport,
+    YearReport,
+    LossReport,
+    OutReport,
+    TeamReport,
+  },
+  data() {
+    return {
+      activeTab: 'comprehensive',
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.report-container {
+  width: 100%;
+  height: 100%;
+  
+  .report-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/micro/pages/acid/components/Shipping.vue b/klp-ui/src/views/micro/pages/acid/components/Shipping.vue
new file mode 100644
index 00000000..b1590205
--- /dev/null
+++ b/klp-ui/src/views/micro/pages/acid/components/Shipping.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="shipping-container">
+    <el-tabs v-model="activeTab" class="shipping-tabs">
+      <el-tab-pane label="配卷情况" name="waybill">
+        <div class="tab-content">
+          <BasePage 
+            :qrcode="qrcode" 
+            :showWaybill="showWaybill"
+            :showNewExport="showNewExport"
+            :querys="waybillQuerys" 
+            :showStatus="showStatus" 
+            :hideType="hideType" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="发货记录" name="ship">
+        <div class="tab-content">
+          <BasePage 
+            :qrcode="qrcode" 
+            :querys="shipQuerys" 
+            :showStatus="showStatus" 
+            :hideType="hideType" 
+            :useWarehouseIds="useWarehouseIds"
+            :warehouseOptions="warehouseOptions"
+            :showControl="false" 
+            :showExportTime="true" 
+            :showMaterialType="showMaterialType"
+          />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  name: 'AcidShipping',
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      activeTab: 'waybill',
+      qrcode: false,
+      waybillQuerys: {
+        dataType: 1,
+        includeBindInfo: true,
+      },
+      shipQuerys: {
+        dataType: 1,
+        status: 1,
+      },
+      useWarehouseIds: true,
+      warehouseOptions: [
+        {value: '1988150044862377986', label: '酸连轧原料库'},
+        {value: '1988150099140866050', label: '酸连轧成品库'}, 
+        {value: '1988150263284953089', label: '镀锌原料库'}, 
+        {value: '1988150545175736322', label: '脱脂原料库'},
+      ],
+      showControl: false,
+      labelType: '3',
+      showStatus: false,
+      hideType: false,
+      showExportTime: false,
+      showWaybill: true,
+      showNewExport: true,
+      showMaterialType: true,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.shipping-container {
+  width: 100%;
+  height: 100%;
+  
+  .shipping-tabs {
+    height: 100%;
+    overflow-y: auto;
+  }
+  
+  .tab-content {
+    height: 100%;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/micro/pages/acid/index.vue b/klp-ui/src/views/micro/pages/acid/index.vue
new file mode 100644
index 00000000..245d9407
--- /dev/null
+++ b/klp-ui/src/views/micro/pages/acid/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="acid-container">
+    <div class="acid-sidebar">
+      <el-menu
+        :default-active="activeMenu"
+        class="sidebar-menu"
+        @select="handleMenuSelect"
+      >
+        <el-menu-item index="inventory">
+          <i class="el-icon-box"></i>
+          <span slot="title">库存</span>
+        </el-menu-item>
+        <el-menu-item index="processing">
+          <i class="el-icon-s-operation"></i>
+          <span slot="title">加工</span>
+        </el-menu-item>
+        <el-menu-item index="report">
+          <i class="el-icon-document"></i>
+          <span slot="title">报表</span>
+        </el-menu-item>
+        <el-menu-item index="shipping">
+          <i class="el-icon-truck"></i>
+          <span slot="title">发货</span>
+        </el-menu-item>
+        <el-menu-item index="quality">
+          <i class="el-icon-warning-outline"></i>
+          <span slot="title">品质</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div>
+      <component :is="currentComponent" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Inventory from './components/Inventory.vue';
+import Processing from './components/Processing.vue';
+import Report from './components/Report.vue';
+import Shipping from './components/Shipping.vue';
+import Quality from './components/Quality.vue';
+
+export default {
+  name: 'AcidSystem',
+  components: {
+    Inventory,
+    Processing,
+    Report,
+    Shipping,
+    Quality,
+  },
+  data() {
+    return {
+      activeMenu: 'inventory',
+    };
+  },
+  computed: {
+    currentComponent() {
+      const componentMap = {
+        inventory: 'Inventory',
+        processing: 'Processing',
+        report: 'Report',
+        shipping: 'Shipping',
+        quality: 'Quality',
+      };
+      return componentMap[this.activeMenu];
+    },
+  },
+  methods: {
+    handleMenuSelect(index) {
+      this.activeMenu = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.acid-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  height: calc(100vh - 84px);
+  background-color: #f5f7fa;
+}
+
+.acid-sidebar {
+  width: 100px;
+  background-color: #fff;
+  border-right: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+
+  .sidebar-menu {
+    border: none;
+    background-color: transparent;
+    flex: 1;
+    overflow-y: auto;
+    border-right: none;
+
+    ::v-deep .el-menu-item {
+      color: #606266;
+      padding: 0 20px;
+      font-size: 14px;
+      
+      &:hover {
+        background-color: #ecf5ff;
+        color: #409eff;
+      }
+      
+      &.is-active {
+        background-color: #ecf5ff;
+        color: #409eff;
+        border-right: 3px solid #409eff;
+      }
+      
+      i {
+        font-size: 18px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>
diff --git a/klp-ui/src/views/wms/coil/components/CoilInfo.vue b/klp-ui/src/views/wms/coil/components/CoilInfo.vue
new file mode 100644
index 00000000..dd36ca1a
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/components/CoilInfo.vue
@@ -0,0 +1,86 @@
+<template>
+  <el-descriptions
+    :column="column"
+    :border="true"
+    size="small"
+  >
+    <el-descriptions-item label="入场卷号">{{ coilInfo.enterCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="当前卷号">{{ coilInfo.currentCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="厂家原料号">{{ coilInfo.supplierCoilNo || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="逻辑库位">{{ coilInfo.warehouseName || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实际库区">{{ coilInfo.actualWarehouseName || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="班组">{{ coilInfo.team || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="材料类型">{{ coilInfo.materialType || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="产品/原料">{{ coilInfo.itemName || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="规格">{{ coilInfo.specification || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="材质">{{ coilInfo.material || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="厂家">{{ coilInfo.manufacturer || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="镀层质量">{{ coilInfo.zincLayer || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="表面处理">{{ coilInfo.surfaceTreatmentDesc || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="质量状态">
+      <span :class="getStatusClass(coilInfo.qualityStatus)">{{ coilInfo.qualityStatus || '-' }}</span>
+    </el-descriptions-item>
+    <el-descriptions-item label="切边要求">{{ coilInfo.trimmingRequirement || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="原料材质">{{ coilInfo.packingStatus || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="包装要求">{{ coilInfo.packagingRequirement || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实测厚度">{{ coilInfo.actualThickness ? `${coilInfo.actualThickness} m` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="实测宽度">{{ coilInfo.actualWidth ? `${coilInfo.actualWidth} m` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="长度">{{ coilInfo.length ? `${coilInfo.length} m` : '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="毛重">{{ coilInfo.grossWeight ? `${coilInfo.grossWeight} t` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="净重">{{ coilInfo.netWeight ? `${coilInfo.netWeight} t` : '-' }}</el-descriptions-item>
+    <el-descriptions-item label="生产开始">{{ coilInfo.productionStartTime || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="生产结束">{{ coilInfo.productionEndTime || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="调制度">{{ coilInfo.temperGrade || '-' }}</el-descriptions-item>
+
+    <el-descriptions-item label="镀层种类">{{ coilInfo.coatingType || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="表面处理">{{ coilInfo.coilSurfaceTreatment || '-' }}</el-descriptions-item>
+    <el-descriptions-item label="备注" :span="column - 2">{{ coilInfo.remark || '-' }}</el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script>
+export default {
+  name: 'CoilInfo',
+  props: {
+    coilInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    column: {
+      type: Number,
+      default: 5
+    }
+  },
+  methods: {
+    getStatusClass(status) {
+      if (!status) return ''
+      const statusLower = status.toLowerCase()
+      if (statusLower.includes('合格')) return 'status-success'
+      if (statusLower.includes('不合格')) return 'status-danger'
+      if (statusLower.includes('待检')) return 'status-warning'
+      return ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.status-success {
+  color: #67c23a;
+  font-weight: 500;
+}
+
+.status-danger {
+  color: #f56c6c;
+  font-weight: 500;
+}
+
+.status-warning {
+  color: #e6a23c;
+  font-weight: 500;
+}
+</style>
diff --git a/klp-ui/src/views/wms/coil/info.vue b/klp-ui/src/views/wms/coil/info.vue
new file mode 100644
index 00000000..84f976e7
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/info.vue
@@ -0,0 +1,1702 @@
+<template>
+  <div class="coil-info-page" v-loading="loading">
+    <div class="content-container">
+      <div class="section basic-info-section">
+        <div class="section-header">
+          <span class="section-icon">📦</span>
+          <span class="section-title">基本信息</span>
+        </div>
+        <div class="section-body">
+          <CoilInfoRender :coilInfo="coilInfo" :column="5" />
+        </div>
+      </div>
+
+      <div class="section trace-section">
+        <div class="section-header">
+          <span class="section-icon">🔄</span>
+          <span class="section-title">生命周期追踪</span>
+        </div>
+        <div class="section-body">
+          <div v-if="standardSteps && standardSteps.length > 0" class="trace-content">
+            <div v-for="(step, index) in standardSteps" :key="index" class="step-item">
+              <!-- 第一个步骤是入库（创建） -->
+              <div v-if="index === 0 && step.action === '创建'" class="step-content step-content-inbound">
+                <!-- 入库钢卷卡片 -->
+                <div class="coil-card-wrapper inbound-coil-wrapper">
+                  <div class="coil-card-header inbound-header">
+                    <span class="card-label">📦 入库</span>
+                  </div>
+                  <div v-for="(coil, idx) in getInboundCoil(step, index)" :key="idx" class="coil-card-futuristic" v-if="coil.currentCoilNo !== '-'">
+                    <div class="coil-futuristic-header">
+                      <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
+                      <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
+                    </div>
+                    
+                    <div class="coil-futuristic-body">
+                      <!-- 钢卷图标 -->
+                      <div class="coil-icon-container">
+                        <svg class="coil-svg" viewBox="0 0 200 200">
+                          <defs>
+                            <linearGradient id="coilGradInbound1" x1="0%" y1="0%" x2="100%" y2="100%">
+                              <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.5" />
+                              <stop offset="50%" style="stop-color:#2563eb;stop-opacity:0.4" />
+                              <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0.5" />
+                            </linearGradient>
+                            <linearGradient id="coilGradInbound2" x1="0%" y1="0%" x2="100%" y2="0%">
+                              <stop offset="0%" style="stop-color:#93c5fd;stop-opacity:0.4" />
+                              <stop offset="100%" style="stop-color:#bfdbfe;stop-opacity:0.3" />
+                            </linearGradient>
+                          </defs>
+                          
+                          <!-- 外圈 -->
+                          <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGradInbound1)" stroke-width="2.5">
+                            <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
+                          </circle>
+                          <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGradInbound2)" stroke-width="1.8" opacity="0.6">
+                            <animate attributeName="stroke-dashoffset" values="0;377" dur="4s" repeatCount="indefinite" />
+                          </circle>
+                          
+                          <!-- 内层钢卷 -->
+                          <circle cx="100" cy="100" r="45" fill="url(#coilGradInbound1)" opacity="0.15">
+                            <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
+                          </circle>
+                          <circle cx="100" cy="100" r="35" fill="url(#coilGradInbound2)" opacity="0.2" />
+                          <circle cx="100" cy="100" r="25" fill="url(#coilGradInbound1)" opacity="0.25" />
+                          <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
+                          
+                          <!-- 装饰线条 -->
+                          <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGradInbound1)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGradInbound1)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGradInbound1)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGradInbound1)" stroke-width="1" opacity="0.4" />
+                          
+                          <!-- 中心点 -->
+                          <circle cx="100" cy="100" r="4" fill="#3b82f6">
+                            <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
+                          </circle>
+                        </svg>
+                      </div>
+                      
+                      <!-- 属性标签 -->
+                      <div class="coil-attr-tags">
+                        <!-- 顶部 - 材质 -->
+                        <div class="attr-tag attr-top">
+                          <div class="attr-line attr-line-top"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">材质</span>
+                            <span class="attr-value">{{ coil.material || '-' }}</span>
+                          </div>
+                        </div>
+                        
+                        <!-- 右侧 - 规格 -->
+                        <div class="attr-tag attr-right">
+                          <div class="attr-line attr-line-right"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">规格</span>
+                            <span class="attr-value">{{ coil.specification || '-' }}</span>
+                          </div>
+                        </div>
+                        
+                        <!-- 左侧 - 质量状态 -->
+                        <div class="attr-tag attr-left">
+                          <div class="attr-line attr-line-left"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">质量状态</span>
+                            <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus)">{{ coil.qualityStatus }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 左上角 - 入场卷号 -->
+                        <div class="attr-tag attr-top-left" v-if="coil.enterCoilNo && coil.enterCoilNo !== '-'">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">入场卷号</span>
+                            <span class="attr-value">{{ coil.enterCoilNo }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 右上角 - 厂家原料号 -->
+                        <div class="attr-tag attr-top-right" v-if="coil.supplierCoilNo && coil.supplierCoilNo !== '-'">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">厂家原料号</span>
+                            <span class="attr-value">{{ coil.supplierCoilNo }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 左下角 - 班组 -->
+                        <div class="attr-tag attr-bottom-left">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">班组</span>
+                            <span class="attr-value">{{ coil.team || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 右下角 - 厂家 -->
+                        <div class="attr-tag attr-bottom-right">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">厂家</span>
+                            <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 备注信息在底部 -->
+                        <div class="attr-tag attr-remark">
+                          <div class="attr-content attr-content-remark">
+                            <span class="attr-label">备注</span>
+                            <span class="attr-value">{{ coil.remark || '-' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <!-- 底部信息 -->
+                    <div class="coil-futuristic-footer">
+                      <div class="footer-item">
+                        <span class="footer-label">镀层</span>
+                        <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
+                      </div>
+                      <div class="footer-item">
+                        <span class="footer-label">表面处理</span>
+                        <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
+                      </div>
+                      <div class="footer-item">
+                        <span class="footer-label">逻辑库位</span>
+                        <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-if="getInboundCoil(step, index).length === 0 || getInboundCoil(step, index).every(c => c.currentCoilNo === '-')" class="empty-coil">
+                    <span>无钢卷信息</span>
+                  </div>
+                </div>
+
+                <!-- 中间入库信息 -->
+                <div class="action-center">
+                  <div class="action-arrow action-arrow-inbound">
+                    <i class="el-icon-download"></i>
+                  </div>
+                  <div class="action-info">
+                    <el-tag size="mini" type="primary" class="action-tag">入库</el-tag>
+                    <span class="action-operator">{{ step.operation }}</span>
+                    <span class="action-time">{{ step.time }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 其他步骤是变更 -->
+              <div v-if="index !== 0 && step.action !== '创建'" class="step-content">
+                <!-- 左侧旧钢卷卡片 -->
+                <div class="coil-card-wrapper old-coil-wrapper">
+                  <div class="coil-card-header">
+                    <span class="card-label">变更前</span>
+                  </div>
+                  <div v-for="(coil, idx) in step.oldCoilInfoList" :key="idx" class="coil-card-futuristic" v-if="coil.currentCoilNo != '-'">
+                    <div class="coil-futuristic-header">
+                      <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
+                      <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
+                    </div>
+                    
+                    <div class="coil-futuristic-body">
+                      <!-- 钢卷图标 -->
+                      <div class="coil-icon-container">
+                        <svg class="coil-svg" viewBox="0 0 200 200">
+                          <defs>
+                            <linearGradient id="coilGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
+                              <stop offset="0%" style="stop-color:#6366f1;stop-opacity:0.5" />
+                              <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:0.4" />
+                              <stop offset="100%" style="stop-color:#6366f1;stop-opacity:0.5" />
+                            </linearGradient>
+                            <linearGradient id="coilGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
+                              <stop offset="0%" style="stop-color:#a78bfa;stop-opacity:0.4" />
+                              <stop offset="100%" style="stop-color:#c084fc;stop-opacity:0.3" />
+                            </linearGradient>
+                          </defs>
+                          
+                          <!-- 外圈 -->
+                          <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGrad1)" stroke-width="2.5">
+                            <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
+                          </circle>
+                          <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGrad2)" stroke-width="1.8" opacity="0.6">
+                            <animate attributeName="stroke-dashoffset" values="0;377" dur="4s" repeatCount="indefinite" />
+                          </circle>
+                          
+                          <!-- 内层钢卷 -->
+                          <circle cx="100" cy="100" r="45" fill="url(#coilGrad1)" opacity="0.15">
+                            <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
+                          </circle>
+                          <circle cx="100" cy="100" r="35" fill="url(#coilGrad2)" opacity="0.2" />
+                          <circle cx="100" cy="100" r="25" fill="url(#coilGrad1)" opacity="0.25" />
+                          <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
+                          
+                          <!-- 装饰线条 -->
+                          <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGrad1)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGrad1)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGrad1)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGrad1)" stroke-width="1" opacity="0.4" />
+                          
+                          <!-- 中心点 -->
+                          <circle cx="100" cy="100" r="4" fill="#6366f1">
+                            <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
+                          </circle>
+                        </svg>
+                      </div>
+                      
+                      <!-- 属性标签 -->
+                      <div class="coil-attr-tags">
+                        <!-- 顶部 - 材质 -->
+                        <div class="attr-tag attr-top">
+                          <div class="attr-line attr-line-top"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">材质</span>
+                            <span class="attr-value">{{ coil.material || '-' }}</span>
+                          </div>
+                        </div>
+                        
+                        <!-- 右侧 - 规格 -->
+                        <div class="attr-tag attr-right">
+                          <div class="attr-line attr-line-right"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">规格</span>
+                            <span class="attr-value">{{ coil.specification || '-' }}</span>
+                          </div>
+                        </div>
+                        
+                        <!-- 左侧 - 质量状态 -->
+                        <div class="attr-tag attr-left">
+                          <div class="attr-line attr-line-left"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">状态</span>
+                            <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus)">{{ coil.qualityStatus || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 左上角 - 入场卷号 -->
+                        <div class="attr-tag attr-top-left">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">入场卷号</span>
+                            <span class="attr-value">{{ coil.enterCoilNo || '-' }}</span> 
+                          </div>
+                        </div>
+
+                        <!-- 右上角 - 厂家原料号 -->
+                        <div class="attr-tag attr-top-right">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">厂家原料号</span>
+                            <span class="attr-value">{{ coil.supplierCoilNo || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 左下角 - 班组 -->
+                        <div class="attr-tag attr-bottom-left">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">班组</span>
+                            <span class="attr-value">{{ coil.team || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 右下角 - 厂家 -->
+                        <div class="attr-tag attr-bottom-right">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">厂家</span>
+                            <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 备注信息在底部 -->
+                        <div class="attr-tag attr-remark">
+                          <div class="attr-content attr-content-remark">
+                            <span class="attr-label">备注</span>
+                            <span class="attr-value">{{ coil.remark || '-' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <!-- 底部信息 -->
+                    <div class="coil-futuristic-footer">
+                      <div class="footer-item">
+                        <span class="footer-label">镀层</span>
+                        <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
+                      </div>
+                      <div class="footer-item">
+                        <span class="footer-label">表面处理</span>
+                        <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
+                      </div>
+                      <div class="footer-item">
+                        <span class="footer-label">逻辑库位</span>
+                        <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-if="step.oldCoilInfoList.length === 0 || step.oldCoilInfoList.every(c => c.currentCoilNo === '-')" class="empty-coil">
+                    <span>无钢卷信息</span>
+                  </div>
+                </div>
+
+                <!-- 中间操作信息 -->
+                <div class="action-center">
+                  <div class="action-arrow">
+                    <i class="el-icon-right"></i>
+                  </div>
+                  <div class="action-info">
+                    <el-tag size="mini" type="info" class="action-tag">{{ step.action }}</el-tag>
+                    <span class="action-operator">{{ step.operation }}</span>
+                    <span class="action-time">{{ step.time }}</span>
+                  </div>
+                </div>
+
+                <!-- 右侧新钢卷卡片 -->
+                <div class="coil-card-wrapper new-coil-wrapper">
+                  <div class="coil-card-header">
+                    <span class="card-label">变更后</span>
+                  </div>
+                  <div v-for="(coil, idx) in step.newCoilInfoList" :key="idx" class="coil-card-futuristic" v-if="coil.currentCoilNo != '-'">
+                    <div class="coil-futuristic-header">
+                      <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
+                      <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
+                    </div>
+                    
+                    <div class="coil-futuristic-body">
+                      <!-- 钢卷图标 -->
+                      <div class="coil-icon-container">
+                        <svg class="coil-svg" viewBox="0 0 200 200">
+                          <defs>
+                            <linearGradient id="coilGrad3" x1="0%" y1="0%" x2="100%" y2="100%">
+                              <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.5" />
+                              <stop offset="50%" style="stop-color:#34d399;stop-opacity:0.4" />
+                              <stop offset="100%" style="stop-color:#10b981;stop-opacity:0.5" />
+                            </linearGradient>
+                            <linearGradient id="coilGrad4" x1="0%" y1="0%" x2="100%" y2="0%">
+                              <stop offset="0%" style="stop-color:#a7f3d0;stop-opacity:0.4" />
+                              <stop offset="100%" style="stop-color:#fbcfe8;stop-opacity:0.3" />
+                            </linearGradient>
+                          </defs>
+                          
+                          <!-- 外圈 -->
+                          <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGrad3)" stroke-width="2.5">
+                            <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
+                          </circle>
+                          <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGrad4)" stroke-width="1.8" opacity="0.6" stroke-dasharray="50 50">
+                            <animate attributeName="stroke-dashoffset" values="0;100" dur="3s" repeatCount="indefinite" />
+                          </circle>
+                          
+                          <!-- 内层钢卷 -->
+                          <circle cx="100" cy="100" r="45" fill="url(#coilGrad3)" opacity="0.15">
+                            <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
+                          </circle>
+                          <circle cx="100" cy="100" r="35" fill="url(#coilGrad4)" opacity="0.2" />
+                          <circle cx="100" cy="100" r="25" fill="url(#coilGrad3)" opacity="0.25" />
+                          <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
+                          
+                          <!-- 装饰线条 -->
+                          <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGrad3)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGrad3)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGrad3)" stroke-width="1" opacity="0.4" />
+                          <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGrad3)" stroke-width="1" opacity="0.4" />
+                          
+                          <!-- 中心点 -->
+                          <circle cx="100" cy="100" r="4" fill="#10b981">
+                            <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
+                          </circle>
+                        </svg>
+                      </div>
+                      
+                      <!-- 属性标签 -->
+                      <div class="coil-attr-tags">
+                        <!-- 顶部 - 材质 -->
+                        <div class="attr-tag attr-top">
+                          <div class="attr-line attr-line-top"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">材质</span>
+                            <span class="attr-value">{{ coil.material || '-' }}</span>
+                          </div>
+                        </div>
+                        
+                        <!-- 右侧 - 规格 -->
+                        <div class="attr-tag attr-right">
+                          <div class="attr-line attr-line-right"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">规格</span>
+                            <span class="attr-value">{{ coil.specification || '-' }}</span>
+                          </div>
+                        </div>
+                        
+                        <!-- 左侧 - 质量状态 -->
+                        <div class="attr-tag attr-left">
+                          <div class="attr-line attr-line-left"></div>
+                          <div class="attr-content">
+                            <span class="attr-label">状态</span>
+                            <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus || '-')">{{ coil.qualityStatus || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 左上角 - 入场卷号 -->
+                        <div class="attr-tag attr-top-left">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">入场卷号</span>
+                            <span class="attr-value">{{ coil.enterCoilNo || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 右上角 - 厂家原料号 -->
+                        <div class="attr-tag attr-top-right">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">厂家原料号</span>
+                            <span class="attr-value">{{ coil.supplierCoilNo || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 左下角 - 班组 -->
+                        <div class="attr-tag attr-bottom-left">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">班组</span>
+                            <span class="attr-value">{{ coil.team || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 右下角 - 厂家 -->
+                        <div class="attr-tag attr-bottom-right">
+                          <div class="attr-content attr-content-small">
+                            <span class="attr-label">厂家</span>
+                            <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
+                          </div>
+                        </div>
+
+                        <!-- 备注信息在底部 -->
+                        <div class="attr-tag attr-remark">
+                          <div class="attr-content attr-content-remark">
+                            <span class="attr-label">备注</span>
+                            <span class="attr-value">{{ coil.remark || '-' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <!-- 底部信息 -->
+                    <div class="coil-futuristic-footer">
+                      <div class="footer-item">
+                        <span class="footer-label">镀层</span>
+                        <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
+                      </div>
+                      <div class="footer-item">
+                        <span class="footer-label">表面处理</span>
+                        <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
+                      </div>
+                      <div class="footer-item">
+                        <span class="footer-label">逻辑库位</span>
+                        <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-if="step.newCoilInfoList.length === 0 || step.newCoilInfoList.every(c => c.currentCoilNo === '-')" class="empty-coil">
+                    <span>无钢卷信息</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-else class="empty-state">
+            <i class="el-icon-document"></i>
+            <span>未找到相关钢卷记录</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="section sales-section">
+        <div class="section-header">
+          <span class="section-icon">💰</span>
+          <span class="section-title">销售信息</span>
+        </div>
+        <div class="section-body">
+          <el-descriptions :column="3" border size="small">
+            <el-descriptions-item label="合同号">{{ salesInfo.contractCode || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="客户名称">{{ salesInfo.customer || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="销售人员">{{ salesInfo.salesman || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="签订时间">{{ salesInfo.signTime || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="交货时间">{{ salesInfo.deliveryTime || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="订单总额">{{ salesInfo.orderAmount || '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </div>
+
+      <div class="section combined-section">
+        <div class="section-header">
+          <span class="section-icon">📋</span>
+          <span class="section-title">移库记录 & 调拨记录</span>
+        </div>
+        <div class="section-body tables-row">
+          <!-- 移库记录 - 占3份 -->
+          <div class="table-wrapper warehouse-table">
+            <div class="table-title">移库记录</div>
+            <div class="table-container">
+              <el-table :data="warehouseTranferList" size="small" border stripe style="width: 100%">
+                <el-table-column prop="createTime" label="操作时间" width="170"></el-table-column>
+                <el-table-column prop="operationType" label="操作类型" width="90">
+                  <template slot-scope="scope">
+                    <span v-if="scope.row.operationType === 1">收货</span>
+                    <span v-else-if="scope.row.operationType === 2">加工</span>
+                    <span v-else-if="scope.row.operationType === 3">调拨</span>
+                    <span v-else-if="scope.row.operationType === 4">发货</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="inOutType" label="出入库" width="80">
+                  <template slot-scope="scope">
+                    {{ scope.row.inOutType === 1 ? '入库' : '出库' }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="warehouse.actualWarehouseName" label="库位" width="140">
+                  <template slot-scope="scope">
+                    {{ scope.row.warehouse.actualWarehouseName || '-' }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="remark" label="备注" min-width="120"></el-table-column>
+              </el-table>
+            </div>
+          </div>
+
+          <!-- 调拨记录 - 占2份 -->
+          <div class="table-wrapper transfer-table">
+            <div class="table-title">调拨记录</div>
+            <div class="table-container">
+              <el-table :data="tranferList" size="small" border stripe style="width: 100%">
+                <el-table-column label="调拨前">
+                  <template slot-scope="scope">
+                    {{ scope.row.createTime }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="调拨后">
+                  <template slot-scope="scope">
+                    {{ scope.row.createTime }}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="section abnormal-section">
+        <div class="section-header">
+          <span class="section-icon">⚠️</span>
+          <span class="section-title">异常信息</span>
+        </div>
+        <div class="section-body">
+          <abnormal-table ref="abnormalTable" :list="abmornalList" :editable="false" :show-coil="false" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMaterialCoil, listMaterialCoil, getMaterialCoilTrace } from '@/api/wms/coil';
+import { getCoilWarehouseOperationLogByCoilId } from '@/api/wms/coilWarehouseOperationLog';
+import { listCoilAbnormal } from '@/api/wms/coilAbnormal'
+
+import CoilInfoRender from '@/views/wms/coil/components/CoilInfo.vue';
+import AbnormalTable from '@/views/wms/coil/components/AbnormalTable.vue';
+
+
+export default {
+  name: 'CoilInfo',
+  components: {
+    CoilInfoRender,
+    AbnormalTable
+  },
+  data() {
+    return {
+      loading: false,
+      coilInfoLoading: false,
+      traceLoading: false,
+      traceResult: null,
+      coilDetails: {},
+      loadingCoilDetails: false,
+      coilInfo: {},
+      coilList: [],
+      wipList: [],
+      annealList: [],
+      standardSteps: [],
+      coilId: '',
+      warehouseTranferList: [],
+      abmornalList: []
+    }
+  },
+  computed: {
+    salesInfo() {
+      return this.coilInfo.orderList?.[0] || {};
+    }
+  },
+  async created() {
+    this.coilId = this.$route.params.coilId;
+    this.loading = true;
+    await this.getCoilInfo();
+    await this.getTraceInfo();
+    await this.getAbnormalList();
+    await this.getWarehouseTransferList();
+    this.loading = false;
+  },
+  methods: {
+    async getCoilInfo() {
+      const res = await getMaterialCoil(this.coilId);
+      this.coilInfo = res.data;
+    },
+    async getTraceInfo() {
+      const res = await getMaterialCoilTrace({
+        coilId: this.coilId,
+        currentCoilNo: this.coilInfo.currentCoilNo
+      });
+      this.traceResult = res.data;
+      this.standardSteps = this.traceResult.steps?.map(step => this.formatStep(step)) || [];
+      this.fetchCoilDetails();
+    },
+    async getCoilList() {
+      const res = await listMaterialCoil({ enterCoilNo: this.coilInfo.enterCoilNo, pageNum: 1, pageSize: 100 });
+      this.coilList = res.rows;
+    },
+    async getAbnormalList() {
+      const res = await listCoilAbnormal({
+        coilId: this.coilId
+      });
+      this.abmornalList = res.rows || [];
+    },
+    async getWarehouseTransferList() {
+      const res = await getCoilWarehouseOperationLogByCoilId({
+        coilId: this.coilId
+      });
+      this.warehouseTranferList = res.data || [];
+    },
+    formatTime(timeStamp) {
+      if (!timeStamp) return '-';
+      const date = new Date(timeStamp);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hour = String(date.getHours()).padStart(2, '0');
+      const minute = String(date.getMinutes()).padStart(2, '0');
+      const second = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    },
+    parseChangedFields(changedFieldsStr) {
+      if (!changedFieldsStr) return [];
+      const items = changedFieldsStr.split(';').filter(item => item.trim());
+      return items.map(item => {
+        const [fieldPart, valuePart] = item.split(':').map(part => part.trim());
+        if (!valuePart) return { field: fieldPart, oldVal: '-', newVal: '-' };
+        const [oldVal, newVal] = valuePart.split('→').map(val => {
+          const trimmedVal = val.trim();
+          return trimmedVal === 'null' ? '-' : trimmedVal;
+        });
+        return {
+          field: fieldPart,
+          oldVal: oldVal || '-',
+          newVal: newVal || '-'
+        };
+      });
+    },
+    formatStep(originalStep) {
+      const standardStep = {
+        action: '',
+        time: '-',
+        operation: '-',
+        oldCoilIds: [],
+        newCoilIds: [],
+        changedFields: '',
+        oldCoilInfoList: [],
+        newCoilInfoList: [],
+        deletedCoilInfo: null,
+        restoredCoilInfo: null,
+        original: originalStep
+      };
+
+      if (originalStep.action === '新增') {
+        standardStep.action = '创建';
+      } else if (originalStep.action === '更新') {
+        if (originalStep.operation === '信息更新') {
+          standardStep.action = '更新';
+        } else if (originalStep.operation === '分卷') {
+          standardStep.action = '分卷';
+        } else if (originalStep.operation === '合卷') {
+          standardStep.action = '合卷';
+        } else {
+          standardStep.action = '更新';
+        }
+      } else if (originalStep.action === '回滚') {
+        standardStep.action = '回滚';
+      } else {
+        standardStep.action = originalStep.action || '-';
+      }
+
+      if (originalStep.update_time || originalStep.create_time) {
+        standardStep.time = this.formatTime(originalStep.update_time || originalStep.create_time);
+      } else if (originalStep.rollback_time) {
+        standardStep.time = this.formatTime(originalStep.rollback_time);
+      }
+
+      standardStep.operation = originalStep.operator_nickname || originalStep.operator || originalStep.create_by || '-';
+
+      switch (standardStep.action) {
+        case '创建':
+          standardStep.oldCoilIds = [];
+          break;
+        case '更新':
+          standardStep.oldCoilIds = originalStep.old_coil_id ? [originalStep.old_coil_id.trim()] : [];
+          break;
+        case '退火':
+          standardStep.oldCoilIds = originalStep.old_coil_id ? [originalStep.old_coil_id.trim()] : [];
+          break;
+        case '分卷':
+          standardStep.oldCoilIds = originalStep.old_coil_id ? [originalStep.old_coil_id.trim()] : [];
+          break;
+        case '合卷':
+          standardStep.oldCoilIds = originalStep.parent_coil_ids
+            ? originalStep.parent_coil_ids.split(',').map(id => id.trim()).filter(Boolean)
+            : [];
+          break;
+        case '回滚':
+          standardStep.oldCoilIds = originalStep.deleted_coil_id ? [originalStep.deleted_coil_id.trim()] : [];
+          break;
+        default:
+          standardStep.oldCoilIds = [];
+      }
+
+      switch (standardStep.action) {
+        case '创建':
+          standardStep.newCoilIds = originalStep.current_coil_id ? [originalStep.current_coil_id.trim()] : [];
+          break;
+        case '更新':
+          standardStep.newCoilIds = originalStep.new_coil_id ? [originalStep.new_coil_id.trim()] : [];
+          break;
+        case '退火':
+          standardStep.newCoilIds = originalStep.new_coil_id ? [originalStep.new_coil_id.trim()] : [];
+          break;
+        case '分卷':
+          standardStep.newCoilIds = originalStep.child_coil_ids
+            ? originalStep.child_coil_ids.split(',').map(id => id.trim()).filter(Boolean)
+            : [];
+          break;
+        case '合卷':
+          standardStep.newCoilIds = originalStep.new_coil_id ? [originalStep.new_coil_id.trim()] : [];
+          break;
+        case '回滚':
+          standardStep.newCoilIds = originalStep.restored_coil_id ? [originalStep.restored_coil_id.trim()] : [];
+          break;
+        default:
+          standardStep.newCoilIds = [];
+      }
+
+      if (standardStep.action === '更新') {
+        standardStep.changedFields = originalStep.changed_fields || '';
+      }
+
+      if (standardStep.action === '创建') {
+        listMaterialCoil({ currentCoilNo: originalStep.current_coil_no, enterCoilNo: originalStep.current_coil_no }).then(res => {
+          standardStep.newCoilInfoList = res.rows[0] || [];
+        });
+      }
+
+      standardStep.newCoilInfoList = this.mapCoilInfoList(standardStep.newCoilIds);
+
+      if (standardStep.action === '回滚') {
+        standardStep.deletedCoilInfo = standardStep.oldCoilInfoList[0] || null;
+        standardStep.restoredCoilInfo = standardStep.newCoilInfoList[0] || null;
+      }
+
+      return standardStep;
+    },
+    mapCoilInfoList(coilIds) {
+      if (!coilIds || !coilIds.length) return [];
+      return coilIds.map(coilId => {
+        const coil = this.coilDetails[coilId] || {};
+        return {
+          ...coil,
+          enterCoilNo: coil.enterCoilNo || '-',
+          currentCoilNo: coil.currentCoilNo || '-',
+          materialType: coil.materialType || '-',
+          itemName: coil.itemName || '-',
+          specification: coil.specification || '-',
+          material: coil.material || '-',
+          netWeight: coil.netWeight || 0,
+          warehouseName: coil.warehouseName || '-',
+          actualWarehouseName: coil.actualWarehouseName || '-',
+          manufacturer: coil.manufacturer || '-',
+          zincLayer: coil.zincLayer || '-',
+          qualityStatus: coil.qualityStatus || '-',
+          createTime: coil.createTime || '-',
+        };
+      });
+    },
+    collectCoilIds() {
+      if (!this.standardSteps.length) return [];
+      const coilIds = new Set();
+      this.standardSteps.forEach(step => {
+        step.oldCoilIds.forEach(id => id && coilIds.add(id));
+        step.newCoilIds.forEach(id => id && coilIds.add(id));
+      });
+      return [...coilIds];
+    },
+    async fetchCoilDetails() {
+      const coilIds = this.collectCoilIds().filter(id => id);
+      if (coilIds.length === 0) {
+        this.coilDetails = {};
+        return;
+      }
+      if (this.loadingCoilDetails) return;
+      this.loadingCoilDetails = true;
+      try {
+        const res = await listMaterialCoil({ coilIds: coilIds.join(',') });
+        if (res && res.code === 200 && res.rows) {
+          const coilList = res.rows;
+          const coilIdMap = {};
+          coilList.forEach(coil => {
+            if (coil.coilId) coilIdMap[coil.coilId] = coil;
+          });
+          this.coilDetails = coilIdMap;
+          this.standardSteps.forEach(step => {
+            step.oldCoilInfoList = this.mapCoilInfoList(step.oldCoilIds);
+            step.newCoilInfoList = this.mapCoilInfoList(step.newCoilIds);
+            if (step.action === '回滚') {
+              step.deletedCoilInfo = step.oldCoilInfoList[0] || null;
+              step.restoredCoilInfo = step.newCoilInfoList[0] || null;
+            }
+          });
+        } else {
+          this.$message.warning('获取钢卷详情失败');
+        }
+      } catch (error) {
+        console.error('获取钢卷详情接口异常：', error);
+        this.$message.error('获取钢卷详情异常，请刷新重试');
+      } finally {
+        this.loadingCoilDetails = false;
+      }
+    },
+    getMiniStatusClass(status) {
+      if (!status) return '';
+      const statusLower = status.toLowerCase();
+      if (statusLower.includes('合格')) return 'mini-status-success';
+      if (statusLower.includes('不合格')) return 'mini-status-danger';
+      if (statusLower.includes('待检')) return 'mini-status-warning';
+      return 'mini-status-default';
+    },
+    getFuturisticStatusClass(status) {
+      if (!status) return '';
+      const statusLower = status.toLowerCase();
+      if (statusLower.includes('合格')) return 'futuristic-status-success';
+      if (statusLower.includes('不合格')) return 'futuristic-status-danger';
+      if (statusLower.includes('待检')) return 'futuristic-status-warning';
+      return 'futuristic-status-default';
+    },
+    getInboundCoil(step, index) {
+      // 如果只有一个步骤，用当前步骤的newCoilInfoList
+      if (this.standardSteps.length === 1) {
+        return step.newCoilInfoList;
+      }
+      // 如果有多个步骤，用第二个步骤的oldCoilInfoList
+      if (index === 0 && this.standardSteps[1]) {
+        return this.standardSteps[1].oldCoilInfoList;
+      }
+      return step.newCoilInfoList;
+    },
+  },
+}
+</script>
+
+<style scoped>
+.coil-info-page {
+  background: linear-gradient(135deg, #e8eef5 0%, #f5f7fa 50%, #ffffff 100%);
+  min-height: 100vh;
+  padding: 20px 28px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.header-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #2c3e50;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.header-divider {
+  height: 4px;
+  width: 56px;
+  background: linear-gradient(90deg, #cd7f32 0%, #ffd700 50%, #cd7f32 100%);
+  border-radius: 2px;
+  margin-top: 10px;
+  box-shadow: 0 0 12px rgba(205, 127, 50, 0.4);
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.section {
+  border: 1px solid rgba(200, 200, 200, 0.4);
+  overflow: hidden;
+  position: relative;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid rgba(200, 200, 200, 0.5);
+}
+
+.section-icon {
+  font-size: 18px;
+  margin-right: 10px;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #334155;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+  letter-spacing: 0.5px;
+}
+
+.section-body {
+  padding: 20px 24px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(248, 250, 252, 0.8) 100%);
+}
+
+.trace-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.step-item {
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
+  border-radius: 10px;
+  padding: 18px 22px;
+  border: 1px solid rgba(180, 180, 180, 0.4);
+  box-shadow: 
+    0 4px 12px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+}
+
+.step-content {
+  display: flex;
+  align-items: stretch;
+  gap: 16px;
+}
+
+.coil-card-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.coil-card-header {
+  padding: 8px 16px;
+  background: linear-gradient(145deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 1) 100%);
+  border-radius: 8px 8px 0 0;
+  border: 1px solid rgba(180, 180, 180, 0.4);
+  border-bottom: none;
+}
+
+.card-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #334155;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.coil-card {
+  padding: 12px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
+  border: 1px solid rgba(180, 180, 180, 0.4);
+  border-radius: 0 0 8px 8px;
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.old-coil-wrapper .coil-card-header {
+  background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
+  border-color: rgba(217, 119, 6, 0.4);
+}
+
+.new-coil-wrapper .coil-card-header {
+  background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 100%);
+  border-color: rgba(22, 163, 74, 0.4);
+}
+
+.inbound-header {
+  background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%) !important;
+  border-color: rgba(59, 130, 246, 0.4) !important;
+}
+
+.step-content-inbound {
+  display: flex;
+  align-items: stretch;
+  gap: 16px;
+}
+
+.inbound-coil-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.action-arrow-inbound {
+  color: #3b82f6 !important;
+  font-size: 32px;
+  margin-bottom: 12px;
+  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
+  animation: bounce-in 2s ease-in-out infinite !important;
+}
+
+@keyframes bounce-in {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+.empty-coil {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
+  border: 1px solid rgba(180, 180, 180, 0.4);
+  border-radius: 0 0 8px 8px;
+  color: #94a3b8;
+  font-size: 14px;
+}
+
+.action-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+  padding: 16px 12px;
+  background: linear-gradient(145deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 1) 100%);
+  border-radius: 10px;
+  border: 1px solid rgba(180, 180, 180, 0.4);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.action-arrow {
+  color: #f59e0b;
+  font-size: 32px;
+  margin-bottom: 12px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+.action-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-tag {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.action-operator {
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.action-time {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+  color: #64748b;
+  font-size: 15px;
+}
+
+.empty-state i {
+  font-size: 56px;
+  margin-bottom: 16px;
+  color: #94a3b8;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+::v-deep .el-descriptions--small .el-descriptions__cell {
+  padding: 12px 18px;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.9) 100%);
+  border-color: rgba(180, 180, 180, 0.4) !important;
+}
+
+::v-deep .el-descriptions__label {
+  background: linear-gradient(145deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 1) 100%) !important;
+  color: #334155 !important;
+  font-weight: 600;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+::v-deep .el-descriptions__content {
+  color: #1e293b !important;
+}
+
+::v-deep .el-table {
+  background: transparent !important;
+}
+
+::v-deep .el-table th,
+::v-deep .el-table td {
+  padding: 12px 0;
+  background: transparent !important;
+  border-color: rgba(180, 180, 180, 0.4) !important;
+  color: #1e293b !important;
+}
+
+::v-deep .el-table th {
+  background: linear-gradient(180deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 1) 100%) !important;
+  color: #0f172a !important;
+  font-weight: 700;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: rgba(248, 250, 252, 0.6) !important;
+}
+
+::v-deep .el-table--border,
+::v-deep .el-table--group {
+  border-color: rgba(180, 180, 180, 0.5) !important;
+}
+
+::v-deep .el-tag {
+  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%) !important;
+  border: 1px solid #cbd5e1 !important;
+  color: #334155 !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* CoilInfo组件样式优化 */
+.coil-card ::v-deep .el-descriptions--small .el-descriptions__cell {
+  padding: 8px 10px;
+  font-size: 12px;
+}
+
+.coil-card ::v-deep .el-descriptions__label {
+  background: linear-gradient(145deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 1) 100%) !important;
+  color: #475569 !important;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.coil-card ::v-deep .el-descriptions__content {
+  color: #1e293b !important;
+  font-size: 12px;
+}
+
+/* 炫酷版钢卷卡片样式 */
+.coil-card-futuristic {
+  padding: 10px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 50%, #f0f4ff 100%);
+  border: 1px solid rgba(100, 100, 255, 0.2);
+  border-radius: 0 0 10px 10px;
+  box-shadow: 
+    0 4px 16px rgba(0, 0, 0, 0.1),
+    0 0 30px rgba(100, 100, 255, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  position: relative;
+  overflow: hidden;
+}
+
+/* 发光边框效果 */
+.coil-card-futuristic::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(100, 100, 255, 0.05) 0%, transparent 70%);
+  animation: rotateGlow 8s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes rotateGlow {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.coil-futuristic-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.coil-futuristic-no {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+  text-shadow: 0 0 10px rgba(100, 100, 255, 0.3);
+  letter-spacing: 0.5px;
+  font-family: 'Courier New', monospace;
+}
+
+.coil-futuristic-weight {
+  font-size: 16px;
+  font-weight: 600;
+  color: #d97706;
+  padding: 5px 14px;
+  background: linear-gradient(145deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.2) 100%);
+  border-radius: 6px;
+  border: 1px solid rgba(217, 119, 6, 0.3);
+  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
+  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
+}
+
+.coil-futuristic-body {
+  position: relative;
+  height: 220px;
+  margin-bottom: 10px;
+  z-index: 1;
+}
+
+/* SVG钢卷图标容器 */
+.coil-icon-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+}
+
+.coil-svg {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.25));
+}
+
+/* 属性标签容器 */
+.coil-attr-tags {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* 通用属性标签样式 */
+.attr-tag {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+}
+
+.attr-content {
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 255, 0.98) 100%);
+  border: 1px solid rgba(100, 100, 255, 0.25);
+  border-radius: 6px;
+  padding: 6px 10px;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  min-width: 80px;
+}
+
+.attr-label {
+  display: block;
+  font-size: 11px;
+  color: #6366f1;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  margin-bottom: 2px;
+  font-weight: 600;
+}
+
+.attr-value {
+  display: block;
+  font-size: 13px;
+  color: #1e293b;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+/* 属性连接线 */
+.attr-line {
+  position: absolute;
+  background: linear-gradient(90deg, transparent, rgba(100, 100, 255, 0.8));
+  animation: linePulse 2s ease-in-out infinite;
+}
+
+@keyframes linePulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+/* 顶部属性标签 */
+.attr-top {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column;
+}
+
+.attr-top .attr-line-top {
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(180deg, transparent, rgba(100, 100, 255, 0.7));
+  margin-bottom: 6px;
+}
+
+.attr-top .attr-content {
+  text-align: center;
+}
+
+/* 右侧属性标签 */
+.attr-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: row-reverse;
+}
+
+.attr-right .attr-line-right {
+  width: 20px;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(100, 100, 255, 0.7), transparent);
+  margin-left: 6px;
+}
+
+/* 底部属性标签 */
+.attr-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+}
+
+.attr-bottom .attr-line-bottom {
+  width: 2px;
+  height: 20px;
+  background: linear-gradient(0deg, transparent, rgba(100, 100, 255, 0.7));
+  margin-top: 6px;
+}
+
+.attr-bottom .attr-content {
+  text-align: center;
+}
+
+/* 左侧属性标签 */
+.attr-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: row;
+}
+
+.attr-left .attr-line-left {
+  width: 20px;
+  height: 2px;
+  background: linear-gradient(270deg, rgba(100, 100, 255, 0.7), transparent);
+  margin-right: 6px;
+}
+
+/* 左上角标签 */
+.attr-top-left {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+
+/* 右上角标签 */
+.attr-top-right {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+/* 左下角标签 */
+.attr-bottom-left {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+}
+
+/* 右下角标签 */
+.attr-bottom-right {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+}
+
+/* 小尺寸标签样式 */
+.attr-content-small {
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 255, 0.98) 100%);
+  border: 1px solid rgba(100, 100, 255, 0.25);
+  border-radius: 6px;
+  padding: 5px 8px;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  min-width: 70px;
+}
+
+.attr-content-small .attr-label {
+  font-size: 10px;
+  letter-spacing: 0.5px;
+}
+
+.attr-content-small .attr-value {
+  font-size: 12px;
+}
+
+/* 备注标签 */
+.attr-remark {
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.attr-content-remark {
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 255, 1) 100%);
+  border: 1px solid rgba(100, 100, 255, 0.3);
+  border-radius: 6px;
+  padding: 6px 10px;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  max-width: 180px;
+  text-align: center;
+}
+
+.attr-content-remark .attr-value {
+  word-break: break-word;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+/* 状态标签颜色 */
+.futuristic-status-success {
+  color: #22c55e !important;
+  text-shadow: 0 0 8px rgba(34, 197, 94, 0.4) !important;
+}
+
+.futuristic-status-danger {
+  color: #ef4444 !important;
+  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
+}
+
+.futuristic-status-warning {
+  color: #f59e0b !important;
+  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important;
+}
+
+.futuristic-status-default {
+  color: #64748b !important;
+  text-shadow: 0 0 8px rgba(100, 116, 139, 0.3) !important;
+}
+
+/* 底部信息 */
+.coil-futuristic-footer {
+  display: flex;
+  justify-content: space-around;
+  padding-top: 10px;
+  border-top: 1px solid rgba(100, 100, 255, 0.15);
+  position: relative;
+  z-index: 1;
+}
+
+.footer-item {
+  text-align: center;
+}
+
+.footer-label {
+  display: block;
+  font-size: 11px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  margin-bottom: 3px;
+  font-weight: 600;
+}
+
+.footer-value {
+  display: block;
+  font-size: 13px;
+  color: #475569;
+  font-weight: 500;
+}
+
+/* 简化版钢卷卡片样式（保留用于其他地方使用）
+.coil-card-mini {
+  padding: 16px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
+  border: 1px solid rgba(180, 180, 180, 0.4);
+  border-radius: 0 0 8px 8px;
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.coil-mini-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.coil-mini-no {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+  letter-spacing: 0.5px;
+}
+
+.coil-mini-weight {
+  font-size: 16px;
+  font-weight: 600;
+  color: #f59e0b;
+  padding: 4px 12px;
+  background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 6px;
+}
+
+.coil-mini-sub {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.coil-mini-item {
+  font-size: 13px;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.coil-mini-status {
+  padding-top: 12px;
+  border-top: 1px dashed rgba(180, 180, 180, 0.3);
+}
+
+.mini-status-success {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #22c55e;
+  background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 100%);
+  border-radius: 6px;
+}
+
+.mini-status-danger {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #ef4444;
+  background: linear-gradient(145deg, #fee2e2 0%, #fecaca 100%);
+  border-radius: 6px;
+}
+
+.mini-status-warning {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #f59e0b;
+  background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 6px;
+}
+
+.mini-status-default {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #64748b;
+  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
+  border-radius: 6px;
+}
+
+/* 表格行布局 */
+.tables-row {
+  display: flex;
+  gap: 20px;
+  min-height: 400px;
+}
+
+.table-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.table-wrapper.warehouse-table {
+  flex: 3;
+}
+
+.table-wrapper.transfer-table {
+  flex: 2;
+}
+
+.table-title {
+  padding: 8px 16px;
+  margin-bottom: 12px;
+  background: linear-gradient(145deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 1) 100%);
+  border-radius: 8px;
+  border: 1px solid rgba(180, 180, 180, 0.4);
+  font-size: 14px;
+  font-weight: 700;
+  color: #334155;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.table-container {
+  flex: 1;
+  overflow: hidden;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
+  border-radius: 8px;
+  border: 1px solid rgba(180, 180, 180, 0.4);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+/* 确保表格高度一致 */
+.table-container ::v-deep .el-table {
+  height: 100%;
+}
+
+.table-container ::v-deep .el-table__body-wrapper {
+  flex: 1;
+  overflow-y: auto;
+}
+</style>
diff --git a/klp-ui/src/views/wms/coil/panels/base.vue b/klp-ui/src/views/wms/coil/panels/base.vue
index d86e5ab7..070e44a1 100644
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -1,16 +1,21 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
-      <el-form-item label="入场钢卷号" prop="enterCoilNo">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
+      <el-form-item label="入场卷号" prop="enterCoilNo">
         <el-input v-model="queryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
           @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="当前钢卷号" prop="currentCoilNo">
+      <el-form-item label="当前卷号" prop="currentCoilNo">
         <el-input v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
           @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="逻辑库位" prop="warehouseId" v-if="!hideWarehouseQuery && !leftWarehouseQuery">
-        <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位"
+      <el-form-item label="逻辑库位" prop="warehouseId" v-if="useWarehouseIds">
+        <muti-select v-model="warehouseIds" placeholder="请选择逻辑库位" 
+          style="width: 100%; display: inline-block;" clearable :options="warehouseOptions">
+        </muti-select>
+      </el-form-item>
+      <el-form-item label="逻辑库位" prop="warehouseId" v-else-if="!hideWarehouseQuery && !leftWarehouseQuery">
+        <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择逻辑库位"
           style="width: 100%; display: inline-block;" clearable />
       </el-form-item>
 
@@ -20,6 +25,13 @@
           :clearInput="false" :showEmpty="true" />
       </el-form-item>
 
+      <el-form-item v-if="showMaterialType" label="物料类型" prop="materialType">
+        <el-select v-model="queryParams.materialType" placeholder="请选择物料类型" clearable>
+          <el-option label="原料" value="原料"></el-option>
+          <el-option label="成品" value="成品"></el-option>
+        </el-select>
+      </el-form-item>
+
       <el-form-item label="产品名称" prop="itemName">
         <muti-select v-model="queryParams.itemName" :options="dict.type.coil_itemname" placeholder="请选择物料" clearable />
       </el-form-item>
@@ -298,6 +310,9 @@
               <el-button size="mini" type="text" icon="el-icon-printer" @click="handlePrintLabel(scope.row)">
                 打印标签
               </el-button>
+              <el-button size="mini" type="text" icon="el-icon-view" @click="handleNumberCoilClick(scope.row)">
+                数字钢卷
+              </el-button>
               <el-button size="mini" v-if="showStatus" type="text" icon="el-icon-upload"
                 @click="handleExportCoil(scope.row)">
                 发货
@@ -680,7 +695,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    hideType: {
+    showMaterialType: {
       type: Boolean,
       default: false,
     },
@@ -762,6 +777,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    useWarehouseIds: {
+      type: Boolean,
+      default: false,
+    },
+    warehouseOptions: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -883,6 +906,7 @@ export default {
         loading: false,
         list: [],
       },
+      warehouseIds: '',
       __printOldTitle: document.title,
       floatLayerConfig: {
         columns: [
@@ -974,12 +998,21 @@ export default {
     },
   },
   created() {
-    this.getList();
     if (this.showExportTime) {
       this.getUserList();
     }
+    if (this.useWarehouseIds) {
+      this.warehouseIds = this.warehouseOptions.map(item => item.value).join(',');
+    }
+    this.getList();
   },
   methods: {
+    // 进入数字钢卷页面
+    handleNumberCoilClick(row) {
+      this.$router.push({
+        path: '/wms/coil/' + row.coilId,
+      });
+    },
     // 处理行点击事件
     handleRowClick(row) {
       this.currentCoilId = row.coilId;
@@ -1186,6 +1219,9 @@ export default {
       }
       // 如果没有设置itemType，则设置为raw_material
       query.selectType = this.querys.materialType === '原料' ? 'raw_material' : 'product';
+      if (this.useWarehouseIds) {
+        query.warehouseIds = this.warehouseIds;
+      }
       if (this.showWaybill) {
         const { shipmentTime, ...query } = {
           ...this.queryParams,