From 824ce738a924749ab169b9bbdfb1f995e17201fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Thu, 30 Oct 2025 14:36:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E6=96=B0=E5=A2=9E=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD=E5=8F=8A=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加盐雾试验、力学性能、样品、生产和外标签预览组件
实现标签图片下载和打印功能
调整钢卷管理页面布局和功能
优化大屏展示的全屏处理逻辑
---
 .../KLPService/Renderer/ProductInfo.vue       |   3 +
 klp-ui/src/main.js                            |   3 +-
 klp-ui/src/views/dashboard/demo.vue           |  87 +++++-
 klp-ui/src/views/wms/coil/box.vue             |  10 +-
 klp-ui/src/views/wms/coil/history.vue         |   7 +-
 klp-ui/src/views/wms/coil/index.vue           |   5 +-
 .../panels/LabelRender/ForgeTagPreview.vue    | 120 ++++++++
 .../panels/LabelRender/OuterTagPreview.vue    | 261 ++++++++++++++++++
 .../LabelRender/ProductionTagPreview.vue      | 119 ++++++++
 .../LabelRender/SaltSprayTagPreview.vue       | 112 ++++++++
 .../panels/LabelRender/SampleTagPreview.vue   | 122 ++++++++
 .../wms/coil/panels/LabelRender/index.vue     | 140 ++++++++++
 klp-ui/src/views/wms/coil/panels/base.vue     |  37 ++-
 klp-ui/src/views/wms/coil/product.vue         |   5 +-
 14 files changed, 1006 insertions(+), 25 deletions(-)
 create mode 100644 klp-ui/src/views/wms/coil/panels/LabelRender/ForgeTagPreview.vue
 create mode 100644 klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
 create mode 100644 klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
 create mode 100644 klp-ui/src/views/wms/coil/panels/LabelRender/SaltSprayTagPreview.vue
 create mode 100644 klp-ui/src/views/wms/coil/panels/LabelRender/SampleTagPreview.vue
 create mode 100644 klp-ui/src/views/wms/coil/panels/LabelRender/index.vue

diff --git a/klp-ui/src/components/KLPService/Renderer/ProductInfo.vue b/klp-ui/src/components/KLPService/Renderer/ProductInfo.vue
index 5f679b1e..beac18ec 100644
--- a/klp-ui/src/components/KLPService/Renderer/ProductInfo.vue
+++ b/klp-ui/src/components/KLPService/Renderer/ProductInfo.vue
@@ -43,6 +43,9 @@ export default {
       required: true
     },
   },
+  mounted() {
+    console.log(this.productId, this.productMap);
+  },
   data() {
     return {
       showDetail: false,
diff --git a/klp-ui/src/main.js b/klp-ui/src/main.js
index 3a08ff6b..7934c796 100644
--- a/klp-ui/src/main.js
+++ b/klp-ui/src/main.js
@@ -7,6 +7,7 @@ import * as echarts from 'echarts'
 import dataV from '@jiaminghi/data-view';
 
 import Element from 'element-ui'
+import '@/modules/dashboardBig/assets/scss/style.scss';
 import './assets/styles/element-variables.scss'
 
 import vueFlvPlayer from 'vue-flv-player'
@@ -14,8 +15,6 @@ import vueFlvPlayer from 'vue-flv-player'
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/klp.scss' // klp css
 
-import '@/modules/dashboardBig/assets/scss/style.scss';
-
 import App from './App'
 import store from './store'
 import router from './router'
diff --git a/klp-ui/src/views/dashboard/demo.vue b/klp-ui/src/views/dashboard/demo.vue
index 970c21a4..9209df19 100644
--- a/klp-ui/src/views/dashboard/demo.vue
+++ b/klp-ui/src/views/dashboard/demo.vue
@@ -1,5 +1,8 @@
 <template>
-  <Home></Home>
+  <!-- 给大屏组件套一个容器，并通过ref获取该容器 -->
+  <div ref="fullscreenContainer" class="fullscreen-container">
+    <Home></Home>
+  </div>
 </template>
 
 <script>
@@ -7,5 +10,85 @@ import Home from '@/modules/dashboardBig/views/index.vue'
 
 export default {
   components: { Home },
+  mounted() {
+    // 确保容器DOM已渲染后，对容器执行全屏
+    this.$nextTick(() => {
+      this.enterFullscreen()
+      this.addFullscreenListener()
+    })
+  },
+  beforeDestroy() {
+    // 移除监听，避免内存泄漏
+    this.removeFullscreenListener()
+    // 组件销毁时如果仍在全屏状态，退出全屏
+    this.exitFullscreen()
+  },
+  methods: {
+    // 进入全屏（针对目标容器）
+    enterFullscreen() {
+      // 获取大屏组件的容器元素
+      const container = this.$refs.fullscreenContainer
+      if (!container) return
+
+      // 对容器执行全屏（兼容各浏览器）
+      if (container.requestFullscreen) {
+        container.requestFullscreen()
+      } else if (container.mozRequestFullScreen) { // Firefox
+        container.mozRequestFullScreen()
+      } else if (container.webkitRequestFullscreen) { // Chrome, Safari
+        container.webkitRequestFullscreen()
+      } else if (container.msRequestFullscreen) { // IE/Edge
+        container.msRequestFullscreen()
+      }
+    },
+    // 退出全屏（通用方法）
+    exitFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen()
+      }
+    },
+    // 处理全屏状态变化
+    handleFullscreenChange() {
+      // 检查是否退出全屏（此时全屏元素应为null）
+      const isExit = !document.fullscreenElement &&
+                    !document.mozFullScreenElement &&
+                    !document.webkitFullscreenElement &&
+                    !document.msFullscreenElement
+      
+      if (isExit) {
+        // 退出全屏后返回上一页
+        this.$router.back()
+      }
+    },
+    // 添加全屏状态监听（兼容各浏览器）
+    addFullscreenListener() {
+      document.addEventListener('fullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('mozfullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('MSFullscreenChange', this.handleFullscreenChange)
+    },
+    // 移除监听
+    removeFullscreenListener() {
+      document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange)
+    }
+  }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+/* 确保容器占满父容器，避免全屏后显示异常 */
+.fullscreen-container {
+  width: 100%;
+  height: 100%;
+  /* 可根据需要添加其他样式（如背景色等） */
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/box.vue b/klp-ui/src/views/wms/coil/box.vue
index 8b3a918d..2a5cc919 100644
--- a/klp-ui/src/views/wms/coil/box.vue
+++ b/klp-ui/src/views/wms/coil/box.vue
@@ -264,11 +264,11 @@ export default {
             itemType: item.itemType,
             itemId: item.itemId,
             itemStyle: { color: this.getTechColor(index) },
-            children: [{
-              name: `卷数: ${item.coilCount}`,
-              value: item.coilCount,
-              itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
-            }]
+            // children: [{
+            //   name: `卷数: ${item.coilCount}`,
+            //   value: item.coilCount,
+            //   itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
+            // }]
           }))
         };
       } else {
diff --git a/klp-ui/src/views/wms/coil/history.vue b/klp-ui/src/views/wms/coil/history.vue
index f8eb31c8..d1325508 100644
--- a/klp-ui/src/views/wms/coil/history.vue
+++ b/klp-ui/src/views/wms/coil/history.vue
@@ -1,5 +1,5 @@
 <template>
-  <BasePage :qrcode="qrcode" :querys="querys"/>
+  <BasePage :qrcode="qrcode" :querys="querys" :labelType="labelType" />
 </template>
 
 <script>
@@ -11,10 +11,11 @@ export default {
   },
   data() {
     return {
-      qrcode: false,
+      qrcode: true,
       querys: {
         dataType: 0
-      }
+      },
+      labelType: '2'
     }
   }
 }
diff --git a/klp-ui/src/views/wms/coil/index.vue b/klp-ui/src/views/wms/coil/index.vue
index 3529f685..2a180a3a 100644
--- a/klp-ui/src/views/wms/coil/index.vue
+++ b/klp-ui/src/views/wms/coil/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <BasePage :qrcode="qrcode" :querys="querys"/>
+  <BasePage :qrcode="qrcode" :querys="querys" :labelType="labelType" />
 </template>
 
 <script>
@@ -14,7 +14,8 @@ export default {
       qrcode: true,
       querys: {
         dataType: 1
-      }
+      },
+      labelType: '2'
     }
   }
 }
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/ForgeTagPreview.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/ForgeTagPreview.vue
new file mode 100644
index 00000000..aaa554fd
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/ForgeTagPreview.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="label-container">
+    <div class="company-name">嘉祥科伦普重工有限公司</div>
+    <div class="label-title">力学性能标签</div>
+    <table class="info-table">
+      <tr>
+        <td class="label-cell">卷号</td>
+        <td class="value-cell">{{ content.coilNumber || '' }}</td>
+        <td class="label-cell">屈服</td>
+        <td class="value-cell">{{ content.yieldStrength || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">规格</td>
+        <td class="value-cell">{{ content.specification || '' }}</td>
+        <td class="label-cell">抗拉</td>
+        <td class="value-cell">{{ content.tensileStrength || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">{{ content.material || '' }}</td>
+        <td class="label-cell">延伸</td>
+        <td class="value-cell">{{ content.elongation || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">原料厂家</td>
+        <td class="value-cell">{{ content.rawMaterialFactory || '' }}</td>
+        <td class="label-cell">锌层质量</td>
+        <td class="value-cell">{{ content.platingQuality || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">备注</td>
+        <td class="value-cell" colspan="3">{{ content.remark || '' }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MechanicalPropertyLabel',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        coilNumber: '',
+        yieldStrength: '',
+        specification: '',
+        tensileStrength: '',
+        material: '',
+        elongation: '',
+        rawMaterialFactory: '',
+        platingQuality: '',
+        remark: ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.label-container {
+  width: 50em; /* 容器宽度（可根据需求调整） */
+  min-height: 30em; /* 容器最小高度 */
+  border: 1px solid #000;
+  padding: 2px;
+  box-sizing: border-box;
+  font-family: "SimSun", serif;
+  font-size: 8px;
+  line-height: 1.2;
+  display: flex;
+  flex-direction: column; /* 垂直分布子元素 */
+}
+
+.company-name {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 1px;
+  font-size: 2em;
+}
+
+.label-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 2px;
+  border-bottom: 1px solid #000;
+  padding-bottom: 1px;
+  font-size: 2em;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse; /* 合并边框 */
+  font-size: 7px;
+  flex-grow: 1; /* 拉伸占据剩余垂直空间 */
+}
+
+.info-table td {
+  border: 1px solid #000; /* 表格单元格边框 */
+  text-align: center;
+  vertical-align: middle;
+  font-size: 2em;
+  width: 25%; /* 4列均分宽度，每列占25%，确保 label/value 空间相同 */
+}
+
+.label-cell {
+  font-weight: bold;
+  /* 去掉背景色：删除原有的 background-color 声明 */
+}
+
+.value-cell {
+  background-color: #fff; /* 可根据需求保留/删除，与原图视觉一致 */
+}
+
+.label-footnote {
+  margin-top: 2px;
+  text-align: center;
+  font-size: 7px;
+  color: #555;
+}
+</style>
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
new file mode 100644
index 00000000..4f04a20d
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="label-container">
+    <!-- 顶部公司信息 -->
+    <div class="company-header">
+      <img :src="logo" alt="Company Logo" class="company-logo" />
+      <div class="company-name">
+        嘉祥科伦普重工有限公司<br />
+        <span class="english-name">Jiaxiang KLP Heavy Industry Co., Ltd.</span>
+      </div>
+    </div>
+
+    <!-- 核心信息网格布局：替代原表格 -->
+    <div class="info-grid">
+      <!-- 第一行：订货单位 + 合同号 -->
+      <div class="info-grid-item label-cell">订货单位</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.orderUnit || ''" />
+      </div>
+      <div class="info-grid-item label-cell">合同号</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.contractNumber || ''" />
+      </div>
+
+      <!-- 第二行：执行标准 + 钢卷号 -->
+      <div class="info-grid-item label-cell">产品名称</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.productName || ''" />
+      </div>
+      <div class="info-grid-item label-cell">执行标准</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.executionStandard || ''" />
+      </div>
+      <div class="info-grid-item label-cell">钢卷号</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.currentCoilNo || ''" />
+      </div>
+
+      <!-- 第三行：原料卷号 + 规格 -->
+      <div class="info-grid-item label-cell">原料卷号</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.enterCoilNo || ''" />
+      </div>
+      <div class="info-grid-item label-cell">规格</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.specification || ''" />
+      </div>
+
+      <!-- 第四行：材质 + 表面质量 -->
+      <div class="info-grid-item label-cell">材质</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.material || ''" />
+      </div>
+      <div class="info-grid-item label-cell">表面质量</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.surfaceQuality || ''" />
+      </div>
+
+      <!-- 第五行：表面处理 + 剪切要求 -->
+      <div class="info-grid-item label-cell">表面处理</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.surfaceTreatment || ''" />
+      </div>
+      <div class="info-grid-item label-cell">剪切要求</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.cuttingRequirements || ''" />
+      </div>  
+
+      <!-- 第六行：包装种类 + 毛重 -->
+      <div class="info-grid-item label-cell">包装种类</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.packagingType || ''" />
+      </div>
+      <div class="info-grid-item label-cell">毛重</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.grossWeight || ''" />
+      </div>
+
+      <!-- 第七行：净重 + 参考长度 -->
+      <div class="info-grid-item label-cell">净重</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.netWeight || ''" />
+      </div>
+      <div class="info-grid-item label-cell">参考长度</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.referenceLength || ''" />
+      </div>
+
+      <!-- 第八行：生产日期（跨3列） -->
+      <div class="info-grid-item label-cell">生产日期</div>
+      <div class="info-grid-item value-cell">
+        <input type="text" class="nob" :value="content.productionDate || ''" />
+      </div>
+    </div>
+
+    <!-- 底部信息 -->
+    <div class="footer-info">
+      <div class="address">
+        地址：山东省济宁市嘉祥县开发区生物产业园区新民路北<br />
+        <span class="english-address">Address: Donghai special steel, ciyutuo Industrial Zone, Luanzhou, Tangshan, Hebei province, China.</span>
+        <span>
+          TEL：0537-6625068
+        </span>
+      </div>
+      <div class="contact-timestamp">
+        <QRCode :content="content.qrcodeRecordId || ''" :size="10" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import logo from '@/assets/logo/logo.png'
+import QRCode from '../../../print/components/QRCode.vue';
+
+export default {
+  name: 'MetalSheetLabel',
+  components: {
+    QRCode
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        // form3 所有字段
+        orderUnit: '',
+        contractNumber: '',
+        productName: '镀锌卷板合格品(GI)',
+        executionStandard: '',
+        coilNumber: 'D2Z125031809202',
+        rawBlankNumber: '',
+        specification: '2.28*1250',
+        material: '',
+        surfaceQuality: '',
+        surfaceTreatment: '环保钝化/不涂油',
+        cuttingRequirements: '',
+        packagingType: 'A03',
+        grossWeight: '',
+        netWeight: '7080',
+        referenceLength: '320',
+        productionDate: '2025-03-19',
+        // 底部信息字段
+        address: '唐山市滦州市茨榆坨工业区',
+        englishAddress: 'Donghai special steel, ciyutuo Industrial Zone, Luanzhou, Tangshan, Hebei province, China.',
+        tel: '0315-7560777',
+        timestamp: '2025.04.12 10:14'
+      })
+    }
+  },
+  data() {
+    return {
+      logo,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.label-container {
+  width: 45em;
+  height: 25em;
+  padding: 0.5em;
+  box-sizing: border-box;
+  font-family: 'Arial', sans-serif;
+  border: 1px solid #000;
+}
+
+.company-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.3em;
+}
+
+.company-logo {
+  width: 2.8em;
+  height: 2.8em;
+  margin-right: 0.5em;
+}
+
+.company-name {
+  font-size: 0.95em;
+  width: 100%;
+  line-height: 1.1;
+}
+
+.english-name {
+  width: 100%;
+  font-size: 0.6em;
+  opacity: 0.8;
+}
+
+.product-title {
+  font-size: 1.4em;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 0.4em;
+  border-bottom: 1.5px solid #000;
+  padding-bottom: 0.2em;
+}
+
+/* 网格布局核心样式 */
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); /* 4列等宽 */
+  gap: 0; /* 消除网格间距，确保边框连贯 */
+  margin-bottom: 0.5em;
+}
+
+.info-grid-item {
+  border: 1px solid #000;
+  padding: 0.25em;
+  font-size: 0.78em;
+  height: 2.1em;
+  text-align: center;
+  vertical-align: middle;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.label-cell {
+  font-weight: bold;
+}
+
+/* 生产日期跨3列 */
+.date-colspan {
+  grid-column: span 3; /* 占据3列 */
+}
+
+.footer-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 0.7em;
+  margin-top: 0.3em;
+}
+
+.address {
+  line-height: 1.2;
+  width: 65%;
+}
+
+.english-address {
+  opacity: 0.8;
+  font-size: 0.9em;
+}
+
+.contact-timestamp {
+  text-align: right;
+  line-height: 1.4;
+}
+
+.nob {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
new file mode 100644
index 00000000..98211007
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="material-label-container">
+    <table class="material-label-table">
+      <!-- 调整第一行结构，使label和value各占2列（等宽） -->
+      <tr>
+        <td class="label-cell" colspan="1">料卷号</td>
+        <td class="value-cell" colspan="2">
+          <input type="text" class="nob" :value="content.enterCoilNo || ''" />
+        </td>
+        <td class="value-cell" colspan="1">
+          <QRCode :content="content.qrcodeRecordId || ' '" :size="5" />
+        </td>
+      </tr>
+      <tr>
+        <td class="label-cell">规格(mm)</td>
+        <td class="value-cell">
+          <input type="text" class="nob" :value="content.specification || ''" />
+        </td>
+        <td class="label-cell">净重</td>
+        <td class="value-cell">
+          <input type="text" class="nob" :value="content.netWeight || ''" />
+        </td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">
+          <input type="text" class="nob" :value="content.material || ''" />
+        </td>
+        <td class="label-cell">下道</td>
+        <td class="value-cell">
+          <input type="text" class="nob" :value="content.nextProcess || ''" />
+        </td>
+      </tr>
+      <tr>
+        <td class="label-cell">生产班组</td>
+        <td class="value-cell">
+          <input type="text" class="nob" :value="content.team || ''" />
+        </td>
+        <td class="label-cell">时间</td>
+        <td class="value-cell">
+          <input type="text" class="nob" :value="content.productionDate || ''" />
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import QRCode from '../../../print/components/QRCode.vue';
+
+export default {
+  name: 'MaterialLabel',
+  components: {
+    QRCode
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        coilNumber: '',
+        specification: '',
+        netWeight: '',
+        material: '',
+        nextProcess: '',
+        productionTeam: '',
+        productionDate: ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.material-label-container {
+  width: 25em;
+  height: 15em;
+  padding: 0px;
+  display: flex; /* 启用Flex布局 */
+  flex-direction: column; /* 子元素垂直排列 */
+  font-family: "SimSun", serif;
+  box-sizing: border-box; /* 确保内边距/边框不影响总尺寸 */
+}
+
+.material-label-table {
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+  flex-grow: 1; /* 让表格拉伸，占满剩余垂直空间 */
+  height: 0; /* 配合flex-grow，自动计算高度 */
+}
+
+/* 四列均分宽度，每列占25% */
+.material-label-table td {
+  border: 1px solid #333;
+  padding: 0;
+  font-size: 14px;
+  /* width: 25%; */
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.label-cell {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+
+.value-cell {
+  text-align: center;
+}
+
+.nob {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/SaltSprayTagPreview.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/SaltSprayTagPreview.vue
new file mode 100644
index 00000000..704bc599
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/SaltSprayTagPreview.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="label-container">
+    <div class="company-name">嘉祥科伦普重工有限公司</div>
+    <div class="label-title">盐雾试验标签</div>
+    <table class="info-table">
+      <tr>
+        <td class="label-cell">卷号</td>
+        <td class="value-cell">{{ content.coilNumber || '' }}</td>
+        <td class="label-cell">开始时间</td>
+        <td class="value-cell">{{ content.startDate || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">规格</td>
+        <td class="value-cell">{{ content.specification || '' }}</td>
+        <td class="label-cell">结束时间</td>
+        <td class="value-cell">{{ content.endDate || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">{{ content.material || '' }}</td>
+        <td class="label-cell">锌层质量</td>
+        <td class="value-cell">{{ content.platingQuality || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">原料厂家</td>
+        <td class="value-cell" colspan="3">{{ content.rawMaterialFactory || '' }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SaltSprayTestLabel',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        coilNumber: '',
+        startDate: '',
+        specification: '',
+        endDate: '',
+        material: '',
+        rawMaterialFactory: '',
+        platingQuality: ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.label-container {
+  width: 50em; /* 容器宽度（可根据需求调整） */
+  min-height: 30em; /* 容器最小高度 */
+  border: 1px solid #000;
+  padding: 2px;
+  box-sizing: border-box;
+  font-family: "SimSun", serif;
+  font-size: 8px;
+  line-height: 1.2;
+  display: flex;
+  flex-direction: column; /* 垂直分布子元素 */
+}
+
+.company-name {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 1px;
+  font-size: 2em;
+}
+
+.label-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 2px;
+  border-bottom: 1px solid #000;
+  padding-bottom: 1px;
+  font-size: 2em;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse; /* 合并边框 */
+  font-size: 7px;
+  flex-grow: 1; /* 拉伸占据剩余垂直空间 */
+}
+
+.info-table td {
+  border: 1px solid #000; /* 表格单元格边框 */
+  text-align: center;
+  vertical-align: middle;
+  font-size: 2em;
+  width: 25%; /* 4列均分宽度，每列占25%，确保 label/value 空间相同 */
+}
+
+.label-cell {
+  font-weight: bold;
+  /* 去掉背景色：删除原有的 background-color 声明 */
+}
+
+.value-cell {
+  background-color: #fff; /* 可根据需求保留/删除，与原图视觉一致 */
+}
+
+.label-footnote {
+  margin-top: 2px;
+  text-align: center;
+  font-size: 7px;
+  color: #555;
+}
+</style>
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/SampleTagPreview.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/SampleTagPreview.vue
new file mode 100644
index 00000000..1c9bb07b
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/SampleTagPreview.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="sample-label-container">
+    <div class="company-title">嘉祥科伦普重工有限公司</div>
+    <div class="label-title">样品标签</div>
+    <table class="info-table">
+      <tr>
+        <td class="label-cell">品名</td>
+        <td class="value-cell" colspan="3">{{ content.productName || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">执行标准</td>
+        <td class="value-cell" colspan="3">{{ content.executionStandard || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">{{ content.material || '' }}</td>
+        <td class="label-cell">厚度</td>
+        <td class="value-cell">{{ content.thickness || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">镀层种类</td>
+        <td class="value-cell">{{ content.platingType || '' }}</td>
+        <td class="label-cell">镀层质量</td>
+        <td class="value-cell">{{ content.platingQuality || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">表面状态</td>
+        <td class="value-cell">{{ content.surfaceState || '' }}</td>
+        <td class="label-cell">表面处理</td>
+        <td class="value-cell">{{ content.surfaceTreatment || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">样品日期</td>
+        <td class="value-cell" colspan="3">{{ content.sampleDate || '' }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SampleLabelRenderer',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        productName: '',
+        executionStandard: '',
+        material: '',
+        thickness: '',
+        platingType: '',
+        platingQuality: '',
+        surfaceState: '',
+        surfaceTreatment: '',
+        sampleDate: ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sample-label-container {
+  width: 50em;
+  height: 40em;
+  border: 1px solid #000;
+  padding: 2px;
+  box-sizing: border-box;
+  font-family: "SimSun", serif;
+  font-size: 10px;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+}
+
+.company-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 2px;
+  font-size: 11px;
+}
+
+.label-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 3px;
+  border-bottom: 1px solid #000;
+  padding-bottom: 1px;
+  font-size: 11px;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+  flex-grow: 1; /* 让表格占据剩余空间 */
+  table-layout: fixed; /* 固定表格布局，确保列宽均匀 */
+}
+
+.info-table td {
+  border: 1px solid #000;
+  padding: 4px 2px;
+  text-align: center;
+  vertical-align: middle;
+  word-break: break-all; /* 处理长文本 */
+}
+
+.label-cell {
+  font-weight: bold;
+  width: 25%; /* 标签单元格固定占25%宽度 */
+  background-color: #f9f9f9;
+}
+
+/* 调整不同单元格的宽度比例 */
+.value-cell {
+  width: 75%; /* 单标签对应的值占75% */
+}
+
+/* 四列布局时，每个单元格占25% */
+tr:nth-child(n+3) td:not([colspan]) {
+  width: 25%;
+}
+</style>
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
new file mode 100644
index 00000000..ce7f7694
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="label-render-container">
+    <!-- 操作按钮 -->
+    <div class="action-buttons">
+      <el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
+      <el-button type="primary" @click="printLabel" style="margin-left: 10px;">打印标签</el-button>
+    </div>
+    <!-- 标签预览容器 -->
+    <div class="preview-container" id="label-preview-container" ref="labelRef">
+      <ProductionTagPreview v-if="labelType === '2'" :content="content" />
+      <OuterTagPreview v-if="labelType === '3'" :content="content" />
+      <SampleTagPreview v-if="labelType === '4'" :content="content" />
+      <ForgeTagPreview v-if="labelType === '5'" :content="content" />
+      <SaltSprayTagPreview v-if="labelType === '6'" :content="content" />
+    </div>
+  </div>
+</template>
+
+<script>
+import domToImage from 'dom-to-image';
+import printJS from 'print-js';
+import { Message } from 'element-ui'; // 若使用Element UI，引入消息提示
+
+import ProductionTagPreview from './ProductionTagPreview.vue';
+import OuterTagPreview from './OuterTagPreview.vue';
+import SampleTagPreview from './SampleTagPreview.vue';
+import ForgeTagPreview from './ForgeTagPreview.vue';
+import SaltSprayTagPreview from './SaltSprayTagPreview.vue';
+
+export default {
+  name: 'LabelRender',
+  components: {
+    ProductionTagPreview,
+    OuterTagPreview,
+    SampleTagPreview,
+    ForgeTagPreview,
+    SaltSprayTagPreview,
+  },
+  props: {
+    labelType: {
+      type: String,
+      required: true,
+    },
+    content: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    // -------- 图片下载方法 --------
+    async downloadLabelAsImage() {
+      // 1. 获取要转换的DOM容器
+      const labelContainer = document.getElementById('label-preview-container');
+      if (!labelContainer) {
+        Message.error('未找到标签容器，无法下载');
+        return;
+      }
+
+      try {
+        // 2. 用dom-to-image生成PNG图片的DataURL
+        const dataUrl = await domToImage.toPng(labelContainer);
+
+        // 3. 创建临时a标签，触发下载
+        const downloadLink = document.createElement('a');
+        downloadLink.href = dataUrl;
+        downloadLink.download = `标签_${new Date().getTime()}.png`; // 自定义文件名（带时间戳防重复）
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink); // 下载后移除临时标签
+      } catch (error) {
+        console.error('标签图片下载失败：', error);
+        Message.error('标签图片下载失败，请重试');
+      }
+    },
+
+    // 打印方法
+    printLabel() {
+      // 1. 获取标签容器DOM
+      const labelContainer = document.getElementById('label-preview-container');
+      if (!labelContainer) {
+        Message.error('未找到标签容器，无法打印');
+        return;
+      }
+
+      // 4. 调用print-js打印
+      printJS({
+        printable: 'label-preview-container', // 要打印的元素ID
+        type: 'html', // 打印类型为HTML
+        header: null, // 不显示页眉
+        footer: null, // 不显示页脚
+        // style: printStyles, // 注入打印样式
+        scanStyles: true, // 禁用自动扫描页面样式（避免冲突）
+        targetStyles: ['*'], // 允许所有样式生效
+        printContainer: true, // 打印指定容器
+        onError: (error) => { // 错误处理
+          console.error('打印失败:', error);
+          Message.error('打印失败，请重试');
+        }
+      });
+    }
+  },
+};
+</script>
+
+<style scoped>
+.label-render-container {
+  width: 100%;
+  height: calc(100vh - 200px);
+  display: flex;
+  flex-direction: column;
+  /* 按钮与预览垂直排列 */
+  justify-content: flex-start;
+  align-items: center;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.action-buttons {
+  margin-bottom: 1rem;
+  /* 按钮与预览区的间距 */
+}
+
+.preview-container {
+  background-color: #fff;
+  color: #000;
+  padding: 1.5rem;
+  width: fit-content;
+  min-width: 200px;
+  border-radius: 6px;
+  box-shadow: 0 0 60px rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.preview-container:hover {
+  box-shadow: 0 0 80px rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/base.vue b/klp-ui/src/views/wms/coil/panels/base.vue
index c27e9266..da536bc3 100644
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -56,9 +56,10 @@
           {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
         </template>
       </el-table-column>
+      <el-table-column label="仓库" align="center" prop="warehouseName" />
       <el-table-column label="物品" align="center" prop="itemName">
         <template slot-scope="scope">
-          <ProductInfo v-if="scope.row.itemType == 'product'" productId="scope.row.itemId">
+          <ProductInfo v-if="scope.row.itemType == 'product'" :productId="scope.row.itemId">
             <template slot-scope="{ product }">
               {{ product.productName }}({{ product.productCode }})
             </template>
@@ -83,8 +84,6 @@
       <el-table-column label="班组" align="center" prop="team" />
       <el-table-column label="毛重" align="center" prop="grossWeight" />
       <el-table-column label="净重" align="center" prop="netWeight" />
-      <el-table-column label="仓库" align="center" prop="warehouseName" />
-      
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -92,6 +91,9 @@
             v-if="qrcode">
             下载二维码
           </el-button>
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreviewLabel(scope.row)">
+            预览标签
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCheck(scope.row)">修正</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
           <el-button size="mini" type="text" icon="el-icon-search" @click="handleTrace(scope.row)">追溯</el-button>
@@ -150,6 +152,11 @@
     <el-dialog title="钢卷追溯" :visible.sync="traceOpen" width="90%" append-to-body>
       <coil-trace-result :trace-result="traceResult"></coil-trace-result>
     </el-dialog>
+
+    <!-- 标签预览弹窗 -->
+    <el-dialog title="标签预览" :visible.sync="labelRender.visible" append-to-body>
+      <label-render :content="labelRender.data" :labelType="labelType" />
+    </el-dialog>
   </div>
 </template>
 
@@ -164,10 +171,9 @@ import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
 import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
 import BomInfoMini from "@/components/KLPService/Renderer/BomInfoMini";
 import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
-import RightToolbar from "@/components/RightToolbar";
-import Pagination from "@/components/Pagination";
 // 引入封装的追溯结果组件
 import CoilTraceResult from "./CoilTraceResult.vue"; // 路径根据实际存放位置调整
+import LabelRender from './LabelRender/index.vue'
 
 export default {
   name: "MaterialCoil",
@@ -180,9 +186,8 @@ export default {
     ProductInfo,
     RawMaterialInfo,
     BomInfoMini,
-    RightToolbar,
-    Pagination,
-    CoilTraceResult // 注册组件
+    CoilTraceResult,
+    LabelRender
   },
   props: {
     qrcode: {
@@ -192,6 +197,10 @@ export default {
     querys: {
       type: Object,
       default: () => {},
+    },
+    labelType: {
+      type: String,
+      default: '2'
     }
   },
   data() {
@@ -254,6 +263,11 @@ export default {
         itemType: [
           { required: true, message: "物品类型不能为空", trigger: "change" }
         ]
+      },
+      labelRender: {
+        visible: false,
+        data: {},
+        type: '2'
       }
     };
   },
@@ -284,6 +298,11 @@ export default {
         this.$message.error('溯源查询失败，请重试');
       });
     },
+    /** 预览标签 */
+    handlePreviewLabel(row) {
+      this.labelRender.visible = true;
+      this.labelRender.data = row;
+    },
     /** 下载二维码 */
     handleDownloadQRCode(row) {
       try {
@@ -424,7 +443,7 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('system/materialCoil/export', {
+      this.download('wms/materialCoil/export', {
         ...this.queryParams
       }, `materialCoil_${new Date().getTime()}.xlsx`)
     }
diff --git a/klp-ui/src/views/wms/coil/product.vue b/klp-ui/src/views/wms/coil/product.vue
index 0d6413c8..3102059f 100644
--- a/klp-ui/src/views/wms/coil/product.vue
+++ b/klp-ui/src/views/wms/coil/product.vue
@@ -1,5 +1,5 @@
 <template>
-  <BasePage :qrcode="qrcode" :querys="querys"/>
+  <BasePage :qrcode="qrcode" :querys="querys" :labelType="labelType" />
 </template>
 
 <script>
@@ -14,7 +14,8 @@ export default {
       qrcode: false,
       querys: {
         itemType: 'product'
-      }
+      },
+      labelType: '3'
     }
   }
 }