feat(wms): 新增标签预览功能及相关组件

添加盐雾试验、力学性能、样品、生产和外标签预览组件
实现标签图片下载和打印功能
调整钢卷管理页面布局和功能
优化大屏展示的全屏处理逻辑

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>
+</script>
+
+<style scoped>
+/* 确保容器占满父容器，避免全屏后显示异常 */
+.fullscreen-container {
+  width: 100%;
+  height: 100%;
+  /* 可根据需要添加其他样式（如背景色等） */
+}
+</style>