From bdf08481ea905679fdc1f70048531ee406fd04dc Mon Sep 17 00:00:00 2001
From: chenxx <398384209@qq.com>
Date: Thu, 30 Oct 2025 14:44:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=90=8E=E5=88=9D=E7=89=88?=
 =?UTF-8?q?=E6=9A=82=E5=AD=98=EF=BC=88=E6=9C=AA=E6=B5=8B=E8=AF=95=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cy_large_screen/README.md   |  228 +-
 cy_large_screen/src/App.vue | 5575 +++++++++++++++++++++++++----------
 2 files changed, 4204 insertions(+), 1599 deletions(-)

diff --git a/cy_large_screen/README.md b/cy_large_screen/README.md
index 33895ab..90c4ff6 100644
--- a/cy_large_screen/README.md
+++ b/cy_large_screen/README.md
@@ -1,5 +1,227 @@
-# Vue 3 + TypeScript + Vite
+# 大屏展示系统 (cy_large_screen) - 优化版本
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## 项目简介
+这是一个基于 Vue 3 + TypeScript + Vite 开发的大屏数据展示系统，主要用于实时监控和展示福泉公司1号火车采样机的运行状态。系统支持 WebSocket 实时数据推送，能够动态更新大屏内容。
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+## 🚀 最新优化内容
+
+### 1. WebSocket 连接优化
+- **智能重连机制**: 限制重连次数，避免无限重连
+- **心跳检测**: 定期发送心跳包，保持连接活跃
+- **连接状态监控**: 实时显示连接状态
+- **错误处理**: 完善的错误处理和日志记录
+
+### 2. API 请求优化
+- **请求缓存**: 5秒缓存机制，减少重复请求
+- **请求超时**: 10秒超时保护
+- **重试机制**: 自动重试失败的请求
+- **并行请求**: 使用 Promise.allSettled 并行执行多个API调用
+
+### 3. 错误处理机制
+- **统一错误处理**: 集中管理所有错误
+- **用户友好提示**: 清晰的错误信息显示
+- **错误日志**: 记录错误历史，便于调试
+- **自动恢复**: 智能的错误恢复机制
+
+### 4. 性能监控
+- **实时性能指标**: API请求次数、响应时间、缓存命中率等
+- **调试面板**: 可视化调试界面
+- **性能分析**: 详细的性能数据统计
+- **内存管理**: 自动清理过期缓存和定时器
+
+### 5. 数据流优化
+- **智能轮询**: 根据连接状态调整轮询频率
+- **设备状态映射**: 使用Map提高数据查找性能
+- **并行数据加载**: 初始化时并行加载所有数据
+- **资源清理**: 组件卸载时完整清理所有资源
+
+## 技术栈
+- **前端框架**: Vue 3 (Composition API)
+- **开发语言**: TypeScript
+- **构建工具**: Vite
+- **UI组件库**: Element Plus
+- **HTTP客户端**: Axios
+- **时间处理**: Day.js
+- **实时通信**: WebSocket
+
+## 项目结构
+```
+cy_large_screen/
+├── src/
+│   ├── App.vue          # 主应用组件（已优化）
+│   ├── components/      # 组件目录
+│   └── main.ts         # 应用入口
+├── index.html          # HTML模板
+├── package.json        # 项目配置
+└── README.md          # 项目说明
+```
+
+## 核心功能
+
+### 1. 实时设备监控
+- **斗提机** - 物料提升设备
+- **二级皮带** - 输送设备  
+- **螺旋输送机** - 物料输送
+- **初级给料皮带** - 给料控制
+- **破碎机** - 物料破碎
+- **缩分器** - 样品缩分
+- **采样头** - 采样控制
+- **封装机** - 样品封装
+
+### 2. 数据展示模块
+- **运行日志** - 设备运行状态记录
+- **操作记录** - 人工操作历史
+- **报警信息** - 设备异常报警
+- **采样桶信息** - 当前采样批次详情
+
+### 3. 实时通信
+- **WebSocket** - 实时数据推送
+- **HTTP API** - 数据查询和控制指令
+- **自动重连** - 网络断开自动恢复
+- **心跳检测** - 保持连接活跃
+
+### 4. 控制功能
+- 设备启停控制
+- 采样模式切换
+- 报警解除操作
+
+## 使用方法
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 启动开发服务器
+```bash
+npm run dev
+```
+
+### 构建生产版本
+```bash
+npm run build
+```
+
+### 预览生产版本
+```bash
+npm run preview
+```
+
+## 配置说明
+
+### WebSocket 配置
+- 修改 `src/App.vue` 中的 `url` 变量来更改服务器地址
+- WebSocket 连接会自动根据 HTTP URL 生成对应的 WebSocket URL
+- 支持最大重连次数限制和心跳检测
+
+### API 接口配置
+- 所有 HTTP 请求都基于 `url` 变量配置的服务器地址
+- 支持动态切换服务器地址
+- 内置请求缓存和重试机制
+
+## 调试功能
+
+### 调试面板
+- 点击右下角的"开启调试"按钮
+- 查看实时连接状态和性能指标
+- 监控API请求和WebSocket消息
+- 查看错误日志和系统状态
+
+### 调试控制
+- **导出信息**: 将调试信息输出到控制台
+- **重置指标**: 重置性能统计数据
+- **清除错误**: 清除错误历史记录
+- **刷新数据**: 手动刷新所有数据
+- **重连WS**: 手动重连WebSocket
+
+## 性能优化
+
+### 缓存机制
+- API请求结果缓存5秒
+- 自动清理过期缓存
+- 缓存命中率统计
+
+### 智能轮询
+- WebSocket连接正常时：60秒轮询一次
+- WebSocket断开时：30秒轮询一次
+- 连续失败3次后停止轮询
+
+### 资源管理
+- 组件卸载时完整清理所有资源
+- 自动清理定时器和WebSocket连接
+- 防止内存泄漏
+
+## 错误处理
+
+### 统一错误处理
+- 所有错误都会记录到错误日志
+- 用户友好的错误提示
+- 自动重试机制
+
+### 连接状态监控
+- WebSocket连接状态实时显示
+- API连接状态监控
+- 最后更新时间记录
+
+## 开发指南
+
+### 添加新组件
+1. 在 `src/components/` 目录下创建新的 Vue 组件
+2. 在 `App.vue` 中引入并使用组件
+3. 确保组件支持响应式数据更新
+
+### 处理实时数据
+1. WebSocket 消息会自动触发数据更新
+2. 使用 Vue 3 的响应式系统 (`ref`, `reactive`) 管理状态
+3. 监听数据变化并更新 UI
+
+### 错误处理
+- 使用统一的 `handleError` 函数处理错误
+- 使用 `handleSuccess` 函数处理成功操作
+- 错误会自动记录到错误日志
+
+## 注意事项
+- 确保服务器 WebSocket 服务正常运行
+- 大屏展示建议使用全屏模式
+- 定期检查网络连接状态
+- 生产环境建议配置 HTTPS/WSS 安全连接
+- 使用调试面板监控系统状态
+
+## 故障排除
+
+### WebSocket 连接失败
+1. 检查服务器地址是否正确
+2. 确认服务器 WebSocket 服务是否启动
+3. 检查网络连接和防火墙设置
+4. 查看调试面板中的连接状态
+
+### 数据不更新
+1. 检查 WebSocket 连接状态
+2. 查看浏览器控制台错误信息
+3. 确认服务器数据推送是否正常
+4. 使用调试面板查看API请求状态
+
+### 构建失败
+1. 检查 TypeScript 类型错误
+2. 确认所有依赖已正确安装
+3. 使用 `npm run build:no-check` 跳过类型检查
+
+## 更新日志
+
+### v2.0.0 (最新优化版本)
+- ✅ 优化 WebSocket 连接和消息处理逻辑
+- ✅ 添加 API 请求缓存和重试机制
+- ✅ 改进错误处理和用户反馈机制
+- ✅ 优化数据流和状态管理
+- ✅ 添加性能监控和调试功能
+- ✅ 智能轮询机制
+- ✅ 资源管理和内存优化
+
+### v1.0.0 (初始版本)
+- 基于 Vue 3 + TypeScript + Vite 的大屏展示系统
+- 集成 WebSocket 实时通信功能
+- 添加 Element Plus UI 组件库支持
+- 实现自动重连机制
+
+## 联系方式
+如有问题或建议，请联系开发团队。
\ No newline at end of file
diff --git a/cy_large_screen/src/App.vue b/cy_large_screen/src/App.vue
index 3561a7e..33b4328 100644
--- a/cy_large_screen/src/App.vue
+++ b/cy_large_screen/src/App.vue
@@ -1,73 +1,306 @@
 <script setup lang="ts">
-import { ref, watchEffect, onUnmounted } from 'vue'
+import { ref, computed, watchEffect, onUnmounted } from 'vue'
 import axios from 'axios'
-import { ElMessage } from 'element-plus' // 添加这行引入Message组件
+import { ElMessage, ElConfigProvider } from 'element-plus' // 添加这行引入Message组件
+import zhCn from 'element-plus/es/locale/lang/zh-cn' // 导入中文语言包
 import dayjs from 'dayjs'
 
-const url = 'http://112.33.111.160:8070'
-// const url = 'http://192.200.200.196:8070'
+// const url = 'http://112.33.111.160:8070'
+const url = 'http://192.200.200.196:8070'
 
-// ----websocket
+// Element Plus 中文语言配置
+const locale = zhCn
+
+// API 请求优化和缓存机制
+const apiCache = new Map<string, { data: any; timestamp: number }>()
+const CACHE_DURATION = 5000 // 缓存5秒
+const REQUEST_TIMEOUT = 10000 // 请求超时10秒
+
+// 优化的 API 请求函数
+const apiRequest = async (url: string, options: any = {}, useCache: boolean = false) => {
+  const cacheKey = `${url}?${JSON.stringify(options.params || {})}`
+
+  // 检查缓存
+  if (useCache && apiCache.has(cacheKey)) {
+    const cached = apiCache.get(cacheKey)!
+    if (Date.now() - cached.timestamp < CACHE_DURATION) {
+      console.log('使用缓存数据:', cacheKey)
+      performanceMetrics.value.cacheHits++
+      return cached.data
+    }
+  }
+
+  performanceMetrics.value.cacheMisses++
+
+  try {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT)
+
+    const response = await axios({
+      url,
+      method: options.method || 'GET',
+      params: options.params,
+      data: options.data,
+      signal: controller.signal,
+      timeout: REQUEST_TIMEOUT
+    })
+
+    clearTimeout(timeoutId)
+
+    // 缓存响应数据
+    if (useCache && response.data) {
+      apiCache.set(cacheKey, {
+        data: response.data,
+        timestamp: Date.now()
+      })
+    }
+
+    performanceMetrics.value.lastUpdate = new Date()
+    return response.data
+  } catch (error: any) {
+    if (error.name === 'AbortError') {
+      console.error('请求超时:', url)
+      throw new Error('请求超时，请检查网络连接')
+    }
+    console.error('API请求失败:', url, error)
+    throw error
+  }
+}
+
+// 清除过期缓存
+const clearExpiredCache = () => {
+  const now = Date.now()
+  for (const [key, value] of apiCache.entries()) {
+    if (now - value.timestamp > CACHE_DURATION) {
+      apiCache.delete(key)
+    }
+  }
+}
+
+// 定期清理缓存
+setInterval(clearExpiredCache, CACHE_DURATION)
+
+// 性能监控和调试功能
+const performanceMetrics = ref({
+  apiRequests: 0,
+  apiErrors: 0,
+  websocketMessages: 0,
+  websocketErrors: 0,
+  cacheHits: 0,
+  cacheMisses: 0,
+  lastUpdate: null as Date | null,
+  averageResponseTime: 0,
+  totalResponseTime: 0
+})
+
+const debugMode = ref(false)
+const debugLogs = ref<string[]>([])
+
+
+// 导出调试信息到控制台
+const exportDebugInfo = () => {
+  console.group('🔍 大屏系统调试信息')
+  console.log('连接状态:', connectionStatus.value)
+  console.log('性能指标:', performanceMetrics.value)
+  console.log('缓存状态:', { size: apiCache.size, keys: Array.from(apiCache.keys()) })
+  console.log('WebSocket状态:', wsConnectionStatus.value)
+  console.log('轮询状态:', { isPolling, pollingErrors, interval: pollingInterval.value })
+  console.log('错误信息:', errorMessages.value)
+  console.log('调试日志:', debugLogs.value)
+  console.groupEnd()
+}
+
+// 重置性能指标
+const resetPerformanceMetrics = () => {
+  performanceMetrics.value = {
+    apiRequests: 0,
+    apiErrors: 0,
+    websocketMessages: 0,
+    websocketErrors: 0,
+    cacheHits: 0,
+    cacheMisses: 0,
+    lastUpdate: null,
+    averageResponseTime: 0,
+    totalResponseTime: 0
+  }
+}
+
+// 切换调试模式
+const toggleDebugMode = () => {
+  debugMode.value = !debugMode.value
+  if (debugMode.value) {
+    console.log('🐛 调试模式已开启')
+    exportDebugInfo()
+  } else {
+    console.log('🐛 调试模式已关闭')
+  }
+}
+
+// 定期导出调试信息（仅在调试模式下）
+if (debugMode.value) {
+  setInterval(() => {
+    exportDebugInfo()
+  }, 30000) // 每30秒导出一次
+}
+
+// ----websocket 优化版本
 // 从HTTP URL转换为WSS URL
 const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + ''
 
 // WebSocket相关变量
 let ws: WebSocket | null = null
 let wsReconnectTimer: number | null = null
+let wsHeartbeatTimer: number | null = null
+let wsHeartbeatCheckTimer: number | null = null // 心跳响应检测定时器
 const wsReconnectInterval = 5000 // 重连间隔时间（毫秒）
+const wsHeartbeatInterval = 30000 // 心跳间隔时间（毫秒）
+const wsHeartbeatTimeout = 10000 // 心跳响应超时时间（毫秒）
+const maxReconnectAttempts = 10 // 最大重连次数
+let reconnectAttempts = 0
+let lastHeartbeatTime = 0 // 最后一次心跳响应时间
 const isWsConnected = ref(false)
+const wsConnectionStatus = ref('disconnected') // disconnected, connecting, connected, error
+
+// ===== can_status=true 设备状态映射表 - 用于 WebSocket 实时更新 =====
+const canStatusDeviceMap = new Map([
+  // 基础状态
+  ['ns4;i=18', 'yangtonzhongliang'], // 样桶重量
+  ['ns4;i=19', 'chujigeiliaopidai'], // 初级给料皮带
+  ['ns4;i=20', 'posuiji'], // 破碎机
+  ['ns4;i=21', 'erjipidai'], // 二级皮带（缩分皮带）
+  ['ns4;i=22', 'suofenqi'], // 缩分器
+  ['ns4;i=23', 'luoxuanshusongji'], // 螺旋输送机
+  ['ns4;i=24', 'doutiji'], // 斗提机
+  ['ns4;i=25', 'caiyangtoudongzuodaojishi'], // 采样机间隔时间计时
+  ['ns4;i=26', 'fengzhuangji'], // 封装系统当前模式
+  ['ns4;i=27', 'caiyangtou'], // 采样头动作输出
+  ['ns4;i=29', 'kaigaijifenggai'], // 开盖机封盖指令
+  ['ns4;i=30', 'kaigaijifuwei'], // 开盖机复位指令
+  ['ns4;i=31', 'fengzhuangjibuzongzhong'], // 封装机补桶中
+  ['ns4;i=32', 'fengzhuangjibutongchenggong'], // 封装机补桶成功
+  ['ns4;i=34', 'fengzhuangjichutongzhong'], // 封装机出桶中
+  ['ns4;i=35', 'fengzhuangjichutong'], // 封装机出桶成功
+  ['ns4;i=37', 'fengzhuangjijiuetonjiuxu'], // 封装机接桶就绪
+  ['ns4;i=38', 'fengzhuangjibutongjiuxu'], // 封装机补桶就绪
+  ['ns4;i=39', 'fengzhuangjichutongjiuxu'], // 封装机出桶就绪
+  ['ns4;i=66', 'shodongcaiyangtougeshijian'], // 封装机出桶就绪
+  ['ns4;i=69', 'suofendaojishixianshi'], // 缩分倒计时显示
+  ['ns4;i=72', 'fengzhuangjishouzidong'], // 封装机手自动反馈
+  ['ns4;i=73', 'huancunqidakaidaowei'], // 缓存器打开到位反馈
+  ['ns4;i=74', 'huancunqiguanbidaowei'], // 缓存器关闭到位反馈
+  ['ns4;i=75', 'fengzhuangxitongjiuxu'], // 封装系统就绪反馈
+  ['ns4;i=41', 'fengzhuangjijigouguzhang'], // 封装机机构总故障
+  ['ns4;i=60', 'fengzhuangxitongjiting'], // 封装系统急停报警
+
+  // 其他必要状态
+  ['ns4;i=2', 'manualAutoMode'], // 当前运行模式（上位机手自动模式）
+  ['ns4;i=3', 'sampleMode'], // 采样模式
+  ['ns4;i=4', 'jiangejiangshijijiishi'], // 采样动作间隔时间
+  ['ns4;i=5', 'suofenshijianjiange'], // 缩分间隔时间（上位机采样头缩分间隔）
+  ['ns4;i=8', 'zhengfan'] // 正反转（手动模式一级皮带）
+])
 
 // 初始化WebSocket连接
 const initWebSocket = () => {
-  console.log(wsUrl, 'wsUrl')
+  // 防止重复连接
+  if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
+    console.log('⚠️  WebSocket已连接或正在连接中，跳过初始化')
+    return
+  }
+
+  console.log('🔌 正在初始化WebSocket连接:', wsUrl + '/ws/cyopcua')
+  wsConnectionStatus.value = 'connecting'
+
   // 关闭已存在的连接
   if (ws) {
-    ws.close()
+    try {
+      ws.close()
+    } catch (e) {
+      console.warn('关闭旧连接失败:', e)
+    }
+    ws = null
   }
 
   try {
     // 创建WebSocket连接
-    ws = new WebSocket(wsUrl+'/ws/cyopcua')
-    
+    ws = new WebSocket(wsUrl + '/ws/cyopcua')
+
     // 连接成功事件
     ws.onopen = () => {
-      console.log('WebSocket连接成功')
+      console.log('✅ WebSocket连接成功')
       isWsConnected.value = true
-      
+      wsConnectionStatus.value = 'connected'
+      connectionStatus.value.websocket = 'connected'
+      reconnectAttempts = 0
+      lastHeartbeatTime = Date.now()
+
       // 清除重连定时器
       if (wsReconnectTimer) {
         clearTimeout(wsReconnectTimer)
         wsReconnectTimer = null
       }
-      
-      // 连接成功后可以发送消息给服务器，如认证信息等
-      // ws.send(JSON.stringify({ type: 'auth', data: 'some-token' }))
+
+      // 启动心跳检测
+      startHeartbeat()
+
+      // 显示成功提示
+      if (debugMode.value) {
+        ElMessage.success('WebSocket连接成功')
+      }
     }
 
     // 接收消息事件
     ws.onmessage = (event) => {
       try {
-        console.log(event.data, '我是webSocket响应event.data')
-        // 假设服务器返回的是JSON格式数据
+        performanceMetrics.value.websocketMessages++
         const data = JSON.parse(event.data)
-        console.log(data, '我是webSocket响应data')
         handleWebSocketMessage(data)
       } catch (error) {
-        console.error('解析WebSocket消息失败:', error)
+        performanceMetrics.value.websocketErrors++
+        console.error('解析WebSocket消息失败:', error, '原始数据:', event.data)
       }
     }
 
     // 连接关闭事件
-    ws.onclose = () => {
-      console.log('WebSocket连接关闭')
+    ws.onclose = (event) => {
+      console.log('🔌 WebSocket连接关闭:', {
+        code: event.code,
+        reason: event.reason || '无原因',
+        wasClean: event.wasClean
+      })
+
       isWsConnected.value = false
-      
-      // 自动重连
-      if (!wsReconnectTimer) {
-        wsReconnectTimer = window.setTimeout(() => {
-          console.log('尝试重新连接WebSocket...')
-          initWebSocket()
-        }, wsReconnectInterval)
+      wsConnectionStatus.value = 'disconnected'
+      connectionStatus.value.websocket = 'disconnected'
+
+      // 停止心跳检测
+      stopHeartbeat()
+
+      // 判断是否需要重连
+      // 1000 = 正常关闭，不需要重连
+      // 1001 = 服务器主动关闭或客户端离开
+      // 1006 = 异常关闭（网络问题等）
+      const shouldReconnect = event.code !== 1000 && event.code !== 1001
+
+      if (shouldReconnect && reconnectAttempts < maxReconnectAttempts) {
+        reconnectAttempts++
+        console.log(`⏳ 尝试重新连接WebSocket... (${reconnectAttempts}/${maxReconnectAttempts})`)
+
+        if (!wsReconnectTimer) {
+          wsReconnectTimer = window.setTimeout(() => {
+            wsReconnectTimer = null
+            initWebSocket()
+          }, wsReconnectInterval)
+        }
+      } else if (reconnectAttempts >= maxReconnectAttempts) {
+        console.error('❌ WebSocket重连次数已达上限，停止重连')
+        wsConnectionStatus.value = 'error'
+        connectionStatus.value.websocket = 'error'
+        if (debugMode.value) {
+          ElMessage.error('WebSocket连接失败，已停止重连')
+        }
+      } else {
+        console.log('✅ WebSocket正常关闭，不重连')
       }
     }
 
@@ -75,527 +308,1303 @@ const initWebSocket = () => {
     ws.onerror = (error) => {
       console.error('WebSocket连接错误:', error)
       isWsConnected.value = false
+      wsConnectionStatus.value = 'error'
+      connectionStatus.value.websocket = 'error'
     }
   } catch (error) {
     console.error('创建WebSocket连接失败:', error)
+    wsConnectionStatus.value = 'error'
+  }
+}
+
+// 心跳检测 - 优化版本
+const startHeartbeat = () => {
+  stopHeartbeat()
+
+  // 发送心跳
+  wsHeartbeatTimer = window.setInterval(() => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      try {
+        const now = Date.now()
+
+        // 检查上次心跳响应时间，如果超时则认为连接异常
+        if (lastHeartbeatTime > 0 && (now - lastHeartbeatTime) > wsHeartbeatTimeout + wsHeartbeatInterval) {
+          console.warn('⚠️  心跳响应超时，主动关闭连接')
+          ws.close()
+          return
+        }
+
+        ws.send(JSON.stringify({ type: 'ping', timestamp: now }))
+
+        if (debugMode.value) {
+          console.log('💓 发送心跳 ping')
+        }
+      } catch (error) {
+        console.error('❌ 发送心跳失败:', error)
+        // 发送失败，可能连接已断开
+        if (ws) {
+          ws.close()
+        }
+      }
+    }
+  }, wsHeartbeatInterval)
+}
+
+const stopHeartbeat = () => {
+  if (wsHeartbeatTimer) {
+    clearInterval(wsHeartbeatTimer)
+    wsHeartbeatTimer = null
   }
+  if (wsHeartbeatCheckTimer) {
+    clearTimeout(wsHeartbeatCheckTimer)
+    wsHeartbeatCheckTimer = null
+  }
+}
+
+// 手动重连WebSocket
+const reconnectWebSocket = () => {
+  reconnectAttempts = 0
+  initWebSocket()
 }
 //当前批次
 const currentBatch = ref('')
 const currentTong = ref({})
-// 处理WebSocket消息
+// 处理WebSocket消息 - 优化版本
 const handleWebSocketMessage = (data: any) => {
-  // 根据消息类型处理不同的数据
-  if(data.type ==1){
-    updateDeviceStatus(data.content)
-  }
-  if(data.type ==2){
-    if('bucketNo' in data.content){
-      console.log(data.content,'data.content')
-      currentBatch.value = data.content.batchNo
-       let obj:any = {
-        samplecard2: data.content.bucketNo, // 当前桶号
-        batchNo: data.content.batchNo, // 批次号
-        sampleCode: data.content.sampleCode, // 采样码
-        sampleWeight: data.content.weight, // 重量
+  try {
+    // 处理心跳响应（服务器可能返回 pong 或原样返回 ping）
+    if (data.type === 'pong' || data.type === 'ping') {
+      lastHeartbeatTime = Date.now()
+      if (debugMode.value) {
+        console.log('💓 收到心跳响应:', data.type)
       }
-      currentTong.value = obj
-      console.log(currentTong.value,'currentTong.value')
-      batchList()
+      return
     }
-  }
-}
 
-// 更新设备状态
-const updateDeviceStatus = (data: any[]) => {
-  
-  if (data.length > 0) {
-    data.forEach((item: any) => {
-      if (item.point.plcNodeId === 'ns4;i=3') {
-        if (modelData) modelData.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=24') { // 斗提机
-        if (doutiji) doutiji.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=21') { // 二级皮带
-        if (erjipidai) erjipidai.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=23') { // 螺旋输送机
-        if (luoxuanshusongji) luoxuanshusongji.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=19') { // 初级给料皮带
-        if (chujigeiliaopidai) chujigeiliaopidai.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=8') { // 正反转
-        if (zhengfan) zhengfan.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=20') { // 破碎机
-        if (posuiji) posuiji.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=22') { // 缩分器
-        if (suofenqi) suofenqi.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=5') { // 缩分间隔时间
-        if (suofenshijianjiange) suofenshijianjiange.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=2') { // 当前运行模式
-        if (value) value.value = item.value == 1 ? false : true
-      }
-      if (item.point.plcNodeId === 'ns4;i=26') { // 封装机当前运行模式
-        if (fengzhuangji) fengzhuangji.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=35') { // 封装机出桶成功
-        if (fengzhuangjichutong) fengzhuangjichutong.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=39') { // 封装机出桶就绪
-        if (fengzhuangjichutongjiuxu) fengzhuangjichutongjiuxu.value.val = item.value
-      }
-      if (item.point.plcNodeId === 'ns4;i=27') { // 采样头
-        if (caiyangtou) caiyangtou.value.val = item.value
+    //     {
+    //   "content": {
+    //     "id": 55,
+    //     "point": {
+    //       "address": "%M3074.2",
+    //       "canAlarm": true,
+    //       "canLog": false,
+    //       "canStatus": true,
+    //       "canWrite": false,
+    //       "dataType": "BIT",
+    //       "device": "PLC",
+    //       "direction": "→",
+    //       "id": 60,
+    //       "infoDesc": "破碎机堵转报警",
+    //       "plcNodeId": "ns4;i=61",
+    //       "signalName": "破碎机堵转报警",
+    //       "valueDesc": "{\"false\": \"无\", \"true\": \"报警\"}",
+    //       "valueDescType": "enum"
+    //     },
+    //     "pointId": 60,
+    //     "updateTime": "2025-10-29 13:23:59",
+    //     "value": "false"
+    //   },
+    //   "type": 1
+    // }
+
+    // 处理设备状态更新 (type=1)
+    if (data.type === 1) {
+      // WebSocket 返回的是单个对象，需要转换为数组格式
+      const contentArray = Array.isArray(data.content) ? data.content : [data.content]
+
+      if (debugMode.value) {
+        console.log('📡 收到设备状态更新 (type=1):', {
+          plcNodeId: data.content?.point?.plcNodeId,
+          signalName: data.content?.point?.signalName,
+          value: data.content?.value,
+          canStatus: data.content?.point?.canStatus,
+          updateTime: data.content?.updateTime
+        })
       }
-    })
-  }
-}
+      console.log("收到：：：", data)
 
-// websocket
-let value:any = ref(false)
-let modelData:any = ref({
-  id:2,
-  val: ''
-})
-// 换桶重量
-const huanbuckezhongliang = ref('')
-const setHuanBuckeZhongLiang = async (weight:any) => {
-  try {
-    const response = await axios.put(url+'/opc/pointValue/updateMaxWeight?value='+weight)
-    console.log(response.data,'换桶重量')
-    if(response.data.code === 200){
-      ElMessage.success('换桶重量设置成功')
-    }else{
-      ElMessage.error('换桶重量设置失败')
+      updateDeviceStatusOptimized(contentArray)
+      return
+    }
+
+    // 处理批次信息更新
+    if (data.type === 2) {
+      if ('bucketNo' in data.content) {
+        console.log('收到批次信息更新:', data.content)
+        currentBatch.value = data.content.batchNo
+        const obj: any = {
+          samplecard2: data.content.bucketNo, // 当前桶号
+          batchNo: data.content.batchNo, // 批次号
+          sampleCode: data.content.sampleCode, // 采样码
+          sampleWeight: data.content.weight, // 重量
+        }
+        currentTong.value = obj
+        console.log('更新当前桶信息:', currentTong.value)
+        batchList()
+      }
+      return
     }
+
+    // 处理其他类型的消息
+    console.log('收到未知类型消息:', data)
   } catch (error) {
-    console.error('请求失败:', error)
-    ElMessage.error('换桶重量设置失败')
+    console.error('处理WebSocket消息失败:', error, data)
   }
 }
-// 运行日志
-const runData = async () => {
-  try {
-    const response = await axios.get(url+'/opc/pointValue/getAll')
-    console.log(response.data,'运行日志')
-    if(response.data.code === 200){
-      if(response.data.data.length > 0){
-        response.data.data.forEach((item:any) => {
-         let valueDesc:any
-          if(item.point['plcNodeId']){
-             valueDesc = JSON.parse(item.point['valueDesc'])
-          }else{
-             item['val'] = item.value
-          }
-          console.log(valueDesc,item.value,'valueDesc')
-          if(item.value ==='false'){
-             item['val'] = valueDesc[false as any] || item.value
-          }
-          if(item.value ==='true'){
-            item['val'] = valueDesc[true as any]|| item.value
-          }
-          if(item.value ==='1'){
-            item['val'] = valueDesc[1 as any]|| item.value
-          }
-          if(item.value ==='2'){
-             item['val'] = valueDesc[2 as any]|| item.value
-          }
-          if(item.value ==='0'){
-             item['val'] = valueDesc[0 as any]|| item.value
-          }
-          if(item.value !=='false' && item.value !=='true' && item.value !=='1' && item.value !=='2' && item.value !=='0'){
-            console.log(item.value,'其他')
-            item['val'] = item.value
-          }
-          if(item.point.signalName === '最大重量'){ // 换桶重量 29
-            huanbuckezhongliang.value = item.value
+
+// ===== 优化设备状态更新 - 使用can_status映射表 =====
+const updateDeviceStatusOptimized = (data: any[]) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    console.warn('⚠️  WebSocket数据为空或格式错误')
+    return
+  }
+
+  if (debugMode.value) {
+    console.log(`📡 处理 ${data.length} 条设备状态更新`)
+  }
+
+  data.forEach((item: any) => {
+    if (!item.point?.plcNodeId) {
+      return
+    }
+
+    const plcNodeId = item.point.plcNodeId
+    const deviceVarName = canStatusDeviceMap.get(plcNodeId)
+
+    if (!deviceVarName) {
+      // 忽略不在can_status列表中的设备
+      return
+    }
+
+    try {
+      const oldValue = eval(deviceVarName).value?.val
+      const newValue = item.value
+
+      // 根据设备变量名动态更新
+      switch (deviceVarName) {
+        case 'manualAutoMode':
+          // 确保 manualAutoMode 是对象
+          if (typeof manualAutoMode.value !== 'object' || manualAutoMode.value === null) {
+            manualAutoMode.value = { id: 1, val: newValue }
+          } else if (manualAutoMode.value) {
+            manualAutoMode.value.val = newValue
           }
-          if(item.point.plcNodeId === 'ns4;i=3'){
-            console.log(item.value,'item.value采样模式')
-            modelData.value.val = item.value
+          if (debugMode.value) {
+            console.log(`🔄 [${plcNodeId}] 运行模式更新: ${oldValue} → ${newValue}`)
           }
-          if(item.point.plcNodeId === 'ns4;i=24'){ // 斗提机 
-            console.log(item,'item')
-            doutiji.value.val = item.value
+          break
+
+        case 'sampleMode':
+          // 确保 sampleMode 是对象
+          if (typeof sampleMode.value !== 'object' || sampleMode.value === null) {
+            sampleMode.value = { id: 2, val: newValue }
+          } else if (sampleMode.value) {
+            sampleMode.value.val = newValue
           }
-          if(item.point.plcNodeId === 'ns4;i=21'){ // 二级皮带
-            erjipidai.value.val = item.value
+          if (debugMode.value) {
+            console.log(`🔄 [${plcNodeId}] 采样模式更新: ${oldValue} → ${newValue}`)
           }
-          if(item.point.plcNodeId === 'ns4;i=23'){ // 螺旋输送机 22
-            luoxuanshusongji.value.val = item.value
+          break
+
+        // can_status=true 的所有设备
+        case 'yangtonzhongliang':
+          yangtonzhongliang.value.val = newValue
+          if (debugMode.value) {
+            console.log(`⚖️  [${plcNodeId}] 样桶重量: ${newValue}kg`)
           }
-          if(item.point.plcNodeId === 'ns4;i=19'){ // 初级给料皮带 18
-            chujigeiliaopidai.value.val = item.value
+          break
+
+        case 'chujigeiliaopidai':
+          chujigeiliaopidai.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 初级给料皮带: ${oldValue} → ${newValue}`)
           }
-          if(item.point.plcNodeId === 'ns4;i=8'){ // 正反转2
-            console.log(item.value,'item.value正反转')
-            zhengfan.value.val = item.value
+          break
+
+        case 'posuiji':
+          posuiji.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 破碎机: ${oldValue} → ${newValue}`)
           }
-          if(item.point.plcNodeId === 'ns4;i=20'){ // 破碎机 19
-            posuiji.value.val = item.value
+          break
+
+        case 'erjipidai':
+          erjipidai.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 二级皮带: ${oldValue} → ${newValue}`)
           }
-          if(item.point.plcNodeId === 'ns4;i=22'){ // 缩分器 21
-            suofenqi.value.val = item.value
+          break
+
+        case 'suofenqi':
+          suofenqi.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 缩分器: ${oldValue} → ${newValue}`)
           }
-          if(item.point.plcNodeId === 'ns4;i=5'){ // 缩分间隔时间3
-            suofenshijianjiange.value.val = item.value
+          break
+
+        case 'luoxuanshusongji':
+          luoxuanshusongji.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 螺旋输送机: ${oldValue} → ${newValue}`)
           }
-          
-          if(item.point.plcNodeId === 'ns4;i=2'){ // 当前运行模式 1
-           
-            value.value=  item.value ==1?false:true
+          break
+
+        case 'doutiji':
+          doutiji.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 斗提机: ${oldValue} → ${newValue}`)
           }
-          if(item.point.plcNodeId === 'ns4;i=26'){ // 封装机当前运行模式 25
-            fengzhuangji.value.val = item.value
+          break
+
+        case 'caiyangtoudongzuodaojishi':
+          caiyangtoudongzuodaojishi.value.val = newValue
+          if (debugMode.value) {
+            console.log(`⏱️  [${plcNodeId}] 间隔时间计时: ${newValue}秒`)
           }
-          if(item.point.plcNodeId === 'ns4;i=35'){ // 封装机出桶成功 34
-            console.log(item,'封装机出桶成功')
-            fengzhuangjichutong.value.val = item.value
+          break
+        case 'shodongcaiyangtougeshijian':
+          shodongcaiyangtougeshijian.value.val = newValue
+          if (debugMode.value) {
+            console.log(`⏱️手动  [${plcNodeId}] 间隔时间计时: ${newValue}秒`)
           }
-          if(item.point.plcNodeId === 'ns4;i=39'){ // 封装机出桶就绪 38
-            console.log(item,'封装机出桶就绪')
-            fengzhuangjichutongjiuxu.value.val = item.value
+          break
+
+        case 'fengzhuangji':
+          fengzhuangji.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 封装机模式: ${oldValue} → ${newValue}`)
           }
-          if(item.point.plcNodeId === 'ns4;i=27'){ // 采样头 26
-            console.log(item,'采样头')
-            caiyangtou.value.val = item.value
+          break
+
+        case 'caiyangtou':
+          caiyangtou.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 采样头: ${oldValue} → ${newValue}`)
           }
-        })
-      }
-       tableData.value = response.data.data
-    }
-  } catch (error) {
-    console.error('请求失败:', error)
-  }
-}
-// 控制历史记录dialog显示的变量
-const historyDialogVisible:any = ref(false)
+          break
 
+        case 'kaigaijifenggai':
+          kaigaijifenggai.value.val = newValue
+          break
 
+        case 'kaigaijifuwei':
+          kaigaijifuwei.value.val = newValue
+          break
 
-// 打开历史记录dialog
-const historyData:any = ref([])
-const openHistoryDialog = async() => {
-  // 打开dialog
-  const response = await axios.get(url+'/opc/log/sampleHeaderOut?pageNum=1&pageSize=1000&poindId=ns4;i=27') //?point.plcNodeId=ns4;i=27
-  if(response.data.code === 200){
-    let arr:any = []
-     response.data.rows.forEach((item:any) => {
-        if(item.point.plcNodeId === 'ns4;i=27'){
-          
-          let valueDesc:any
-          if(item.point['plcNodeId']){
-             valueDesc = JSON.parse(item.point['valueDesc'])
-          }else{
-             item['val'] = item.newValue
-          }
-          if(item.newValue ==='false'){
-             item['val'] = valueDesc[false as any]
-          }
-          if(item.newValue ==='true'){
-            item['val'] = valueDesc[true as any]
-          }
-          if(item.newValue ==='1'){
-            item['val'] = valueDesc[1 as any]
+        case 'fengzhuangjibuzongzhong':
+          fengzhuangjibuzongzhong.value.val = newValue
+          break
+
+        case 'fengzhuangjibutongchenggong':
+          fengzhuangjibutongchenggong.value.val = newValue
+          break
+
+        case 'fengzhuangjichutongzhong':
+          fengzhuangjichutongzhong.value.val = newValue
+          break
+
+        case 'fengzhuangjichutong':
+          fengzhuangjichutong.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`📦 [${plcNodeId}] 封装机出桶成功: ${newValue}`)
           }
-          if(item.newValue ==='2'){
-             item['val'] = valueDesc[2 as any]
+          break
+
+        case 'fengzhuangjijiuetonjiuxu':
+          fengzhuangjijiuetonjiuxu.value.val = newValue
+          break
+
+        case 'fengzhuangjibutongjiuxu':
+          fengzhuangjibutongjiuxu.value.val = newValue
+          break
+
+        case 'fengzhuangjichutongjiuxu':
+          fengzhuangjichutongjiuxu.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`✅ [${plcNodeId}] 封装机出桶就绪: ${newValue}`)
           }
-          if(item.newValue ==='0'){
-             item['val'] = valueDesc[0 as any]
+          break
+
+        case 'suofendaojishixianshi':
+          suofendaojishixianshi.value.val = newValue
+          break
+
+        case 'fengzhuangjishouzidong':
+          fengzhuangjishouzidong.value.val = newValue
+          break
+
+        case 'zhengfan':
+          zhengfan.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 正反转: ${oldValue} → ${newValue}`)
           }
-          arr.push(item)
-        }
-         
-      })
-    historyData.value = arr
-  }else{
-    ElMessage.error('获取失败')
-  }
-  // historyData.value = res.data.rows
-  historyDialogVisible.value = true
-}
-const closeHistoryDialog = () => {
-  historyDialogVisible.value = false
-}
-// 操作记录
-const operationData = async () => {
-  try {
-    const response = await axios.get(url+'/opc/log/operation/list?pageNum=1&pageSize=1000')
-    console.log(response.data,'操作记录')
-    if(response.data.code === 200){
-      response.data.rows.forEach((item:any) => {
-         let valueDesc:any
-          if(item.point['plcNodeId']){
-             valueDesc = JSON.parse(item.point['valueDesc'])
-          }else{
-             item['val'] = item.newValue
+          break
+
+        case 'suofenshijianjiange':
+          suofenshijianjiange.value.val = newValue
+          break
+
+        case 'jiangejiangshijijiishi':
+          jiangejiangshijijiishi.value.val = newValue
+          if (debugMode.value) {
+            console.log(`⏱️  [${plcNodeId}] 采样动作间隔时间: ${newValue}秒`)
           }
-          if(item.newValue ==='false'){
-             item['val'] = valueDesc[false as any] || item.newValue
+          break
+
+        case 'huancunqidakaidaowei':
+          huancunqidakaidaowei.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 缓存器打开到位: ${oldValue} → ${newValue}`)
           }
-          if(item.newValue ==='true'){
-            item['val'] = valueDesc[true as any] || item.newValue
+          break
+
+        case 'huancunqiguanbidaowei':
+          huancunqiguanbidaowei.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 缓存器关闭到位: ${oldValue} → ${newValue}`)
           }
-          if(item.newValue ==='1'){
-            item['val'] = valueDesc[1 as any] || item.newValue
+          break
+
+        case 'fengzhuangxitongjiuxu':
+          fengzhuangxitongjiuxu.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🔄 [${plcNodeId}] 封装系统就绪: ${oldValue} → ${newValue}`)
           }
-          if(item.newValue ==='2'){
-             item['val'] = valueDesc[2 as any] || item.newValue
+          break
+
+        case 'fengzhuangjijigouguzhang':
+          fengzhuangjijigouguzhang.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`⚠️  [${plcNodeId}] 封装机机构总故障: ${oldValue} → ${newValue}`)
           }
-          if(item.newValue ==='0'){
-             item['val'] = valueDesc[0 as any] || item.newValue
+          break
+
+        case 'fengzhuangxitongjiting':
+          fengzhuangxitongjiting.value.val = newValue
+          if (debugMode.value && oldValue !== newValue) {
+            console.log(`🚨 [${plcNodeId}] 封装系统急停报警: ${oldValue} → ${newValue}`)
           }
-      })
-      operationTableData.value = response.data.rows
-    }else{
-      ElMessage.error('获取失败')
-    }
-  } catch (error) {
-    console.error('请求失败:', error)
-  }
-}
+          break
+      }
 
-// 报警数据
-const alarmData = async () => {
-  try {
-    const response = await axios.get(url+'/opc/alarm/list?cleared=false')
-    console.log(response.data,'报警数据')
-    if(response.data.code === 200){
-      alarmTableData.value = response.data.rows
-    }else{
-      ElMessage.error('获取失败')
+      // 添加到调试日志
+      if (debugMode.value && oldValue !== newValue) {
+        debugLogs.value.unshift(`[${new Date().toLocaleTimeString()}] ${item.point.signalName}: ${oldValue} → ${newValue}`)
+        if (debugLogs.value.length > 50) {
+          debugLogs.value = debugLogs.value.slice(0, 50)
+        }
+      }
+
+    } catch (error) {
+      console.error(`❌ 更新设备状态失败 [${deviceVarName}/${plcNodeId}]:`, error, item)
     }
-  } catch (error) {
-    console.error('请求失败:', error)
-    ElMessage.error('获取失败')
-  }
+  })
 }
-const currentBatchIndex = ref(0) // 当前显示的桶样索引
 
-// ... 然后添加左右箭头点击事件处理函数
-// 切换到上一个桶样
-const prevBatch = () => {
-  if (batchRecord.value.length > 0) {
-    currentBatchIndex.value = (currentBatchIndex.value - 1 + batchRecord.value.length) % batchRecord.value.length
-  }
-}
+// ===== can_status=true 的所有状态属性 =====
+// 这些状态会通过 WebSocket 实时更新
 
-// 切换到下一个桶样
-const nextBatch = () => {
-  if (batchRecord.value.length > 0) {
-    currentBatchIndex.value = (currentBatchIndex.value + 1) % batchRecord.value.length
-  }
-}
-const batchRecord:any = ref([])
-// 获取桶列表数据
-const batchList = async()=>{
-  try {
-    const response = await axios.get(url+'/opc/batch/pagelist?batchNo='+currentBatch.value)
-    console.log(response.data,'桶列表数据')
-    if(response.data.code === 200){
-      batchRecord.value = [currentTong.value,...response.data.rows]
+// 样桶重量 (ns4;i=18)
+const yangtonzhongliang = ref({
+  id: 17,
+  plcNodeId: 'ns4;i=18',
+  signalName: '样桶重量',
+  val: 0,
+  unit: '千克'
+})
 
-    }else{
-      ElMessage.error('获取失败')
-    }
-  } catch (error) {
-    console.error('请求失败:', error)
-    ElMessage.error('获取失败')
-  }
-}
+// 初级给料皮带 (ns4;i=19)
+const chujigeiliaopidai = ref({
+  id: 18,
+  plcNodeId: 'ns4;i=19',
+  signalName: '初级给料皮带',
+  val: 0
+})
 
-const doutiji:any = ref({
-  id:23,
-  nodeId:'',
-  signalName: '斗提机',
-  val: ''
+// 破碎机状态反馈 (ns4;i=20)
+const posuiji = ref({
+  id: 19,
+  plcNodeId: 'ns4;i=20',
+  signalName: '破碎机',
+  val: 0
 })
-const erjipidai:any = ref({
-  id:20,
-  nodeId:'',
+
+// 缩分皮带状态反馈 (ns4;i=21) - 二级皮带
+const erjipidai = ref({
+  id: 20,
+  plcNodeId: 'ns4;i=21',
   signalName: '二级皮带',
-  val: ''
+  val: 0
+})
+
+// 缩分机状态反馈 (ns4;i=22)
+const suofenqi = ref({
+  id: 21,
+  plcNodeId: 'ns4;i=22',
+  signalName: '缩分器',
+  val: 0
 })
-const luoxuanshusongji:any = ref({
-  id:22,
-  nodeId:'',
+
+// 螺旋输送机状态反馈 (ns4;i=23)
+const luoxuanshusongji = ref({
+  id: 22,
+  plcNodeId: 'ns4;i=23',
   signalName: '螺旋输送机',
-  val: ''
+  val: 0
 })
-const chujigeiliaopidai:any = ref({
-  id:18,
-  nodeId:'',
-  signalName: '初级给料皮带',
-  val: ''
+
+// 斗提机状态反馈 (ns4;i=24)
+const doutiji = ref({
+  id: 23,
+  plcNodeId: 'ns4;i=24',
+  signalName: '斗提机',
+  val: 0
 })
-const zhengfan:any = ref({
-  id:2,
-  nodeId:'',
-  signalName: '上位机采样模式_opc',
-  val: ''
+
+// 采样动作间隔时间 (ns4;i=4)  
+const jiangejiangshijijiishi = ref({
+  id: 24,
+  plcNodeId: 'ns4;i=4',
+  signalName: '采样动作间隔时间',
+  val: 0,
+  unit: '秒'
 })
-const posuiji:any = ref({
-  id:19,
-  nodeId:'',
-  signalName: '破碎机',
-  val: ''
+// 采样动作倒计时 (ns4;i=25) caiyangtoudongzuodaojishi
+const caiyangtoudongzuodaojishi = ref({
+  id: 24,
+  plcNodeId: 'ns4;i=25',
+  signalName: '采样头动作倒计时',
+  val: 0,
+  unit: '秒'
 })
-const suofenqi:any = ref({
-  id:21,
-  nodeId:'',
-  signalName: '缩分器',
-  val: ''
+// 手动采样机间隔时间设置 (ns4;i=25)
+const shodongcaiyangtougeshijian = ref({
+  id: 66,
+  plcNodeId: 'ns4;i=66',
+  signalName: '手动采样头动作时间',
+  val: 0,
+  unit: '秒'
 })
-const suofenshijianjiange:any = ref({
-  id:3,
-  nodeId:'',
-  signalName: '缩分间隔时间',
+
+
+
+// 封装系统当前模式 (ns4;i=26)
+const fengzhuangji = ref({
+  id: 25,
+  plcNodeId: 'ns4;i=26',
+  signalName: '封装机当前运行模式',
   val: ''
 })
-const caiyangtou:any= ref({
-  id:26,
-  nodeId:'',
+
+// 采样头动作输出 (ns4;i=27)
+const caiyangtou = ref({
+  id: 26,
+  plcNodeId: 'ns4;i=27',
   signalName: '采样头',
   val: ''
 })
 
-const fengzhuangji = ref({
-  id: 25,
-  nodeId:'',
-  signalName: '封装机当前运行模式',
+// 开盖机封盖指令 (ns4;i=29)
+const kaigaijifenggai = ref({
+  id: 28,
+  plcNodeId: 'ns4;i=29',
+  signalName: '开盖机封盖指令',
   val: ''
 })
+
+// 开盖机复位指令 (ns4;i=30)
+const kaigaijifuwei = ref({
+  id: 29,
+  plcNodeId: 'ns4;i=30',
+  signalName: '开盖机复位指令',
+  val: ''
+})
+
+// 封装机补桶中 (ns4;i=31)
+const fengzhuangjibuzongzhong = ref({
+  id: 30,
+  plcNodeId: 'ns4;i=31',
+  signalName: '封装机补桶中',
+  val: ''
+})
+
+// 封装机补桶成功 (ns4;i=32)
+const fengzhuangjibutongchenggong = ref({
+  id: 31,
+  plcNodeId: 'ns4;i=32',
+  signalName: '封装机补桶成功',
+  val: ''
+})
+
+// 封装机出桶中 (ns4;i=34)
+const fengzhuangjichutongzhong = ref({
+  id: 33,
+  plcNodeId: 'ns4;i=34',
+  signalName: '封装机出桶中',
+  val: ''
+})
+
+// 封装机出桶成功 (ns4;i=35)
 const fengzhuangjichutong = ref({
   id: 34,
-  nodeId:'',
+  plcNodeId: 'ns4;i=35',
   signalName: '封装机出桶成功',
   val: ''
 })
+
+// 封装机接桶就绪 (ns4;i=37)
+const fengzhuangjijiuetonjiuxu = ref({
+  id: 36,
+  plcNodeId: 'ns4;i=37',
+  signalName: '封装机接桶就绪',
+  val: ''
+})
+
+// 封装机补桶就绪 (ns4;i=38)
+const fengzhuangjibutongjiuxu = ref({
+  id: 37,
+  plcNodeId: 'ns4;i=38',
+  signalName: '封装机补桶就绪',
+  val: ''
+})
+
+// 封装机出桶就绪 (ns4;i=39)
 const fengzhuangjichutongjiuxu = ref({
   id: 38,
-  nodeId:'',
+  plcNodeId: 'ns4;i=39',
   signalName: '封装机出桶就绪',
   val: ''
 })
 
-const tableData = ref([])
-const operationTableData = ref([])
-const alarmTableData = ref([])
+// 缩分倒计时显示 (ns4;i=69)
+const suofendaojishixianshi = ref({
+  id: 69,
+  plcNodeId: 'ns4;i=69',
+  signalName: '缩分倒计时显示',
+  val: 0,
+  unit: '秒'
+})
+
+// 封装机手自动反馈 (ns4;i=72)
+const fengzhuangjishouzidong = ref({
+  id: 72,
+  plcNodeId: 'ns4;i=72',
+  signalName: '封装机手自动反馈',
+  val: ''
+})
+
+// 缓存器打开到位反馈 (ns4;i=73)
+const huancunqidakaidaowei = ref({
+  id: 73,
+  plcNodeId: 'ns4;i=73',
+  signalName: '缓存器打开到位反馈',
+  val: ''
+})
+
+// 缓存器关闭到位反馈 (ns4;i=74)
+const huancunqiguanbidaowei = ref({
+  id: 74,
+  plcNodeId: 'ns4;i=74',
+  signalName: '缓存器关闭到位反馈',
+  val: ''
+})
+
+// 封装系统就绪反馈 (ns4;i=75)
+const fengzhuangxitongjiuxu = ref({
+  id: 75,
+  plcNodeId: 'ns4;i=75',
+  signalName: '封装系统就绪反馈',
+  val: ''
+})
+
+// 封装机机构总故障 (ns4;i=41)
+const fengzhuangjijigouguzhang = ref({
+  id: 41,
+  plcNodeId: 'ns4;i=41',
+  signalName: '封装机机构总故障',
+  val: ''
+})
+
+// 封装系统急停报警 (ns4;i=60)
+const fengzhuangxitongjiting = ref({
+  id: 60,
+  plcNodeId: 'ns4;i=60',
+  signalName: '封装系统急停报警',
+  val: ''
+})
+
+// websocket 
+/// ns4;i=2 1手动，2自动，3检修
+
+let manualAutoMode: any = ref({
+  id: 1,
+  val: '1'
+})
+
+// 计算属性：用于开关显示（true=自动，false=手动）
+const manualAutoModeSwitch = computed(() => {
+  return manualAutoMode.value.val === '2' // '2'表示自动
+})
+
+/// 1采样 2溜管
+let sampleMode: any = ref({
+  id: 2,
+  val: '1'
+})
+
+
+// 制样方式状态 (对应正反转)
+const zhiyangFangshi = ref({
+  id: 7,
+  plcNodeId: 'ns4;i=8',
+  val: '1' // 默认制样口，1=正转(制样口), 2=反转(溜管口), 3=停止
+})
+// 换桶重量 - 优化版本
+const huanbuckezhongliang = ref('')
+const setHuanBuckeZhongLiang = async (weight: any) => {
+  try {
+    isLoading.value = true
+    const response = await retryOperation(async () => {
+      return await apiRequest(`${url}/opc/pointValue/updateMaxWeight`, {
+        method: 'PUT',
+        params: { value: weight }
+      })
+    })
+
+    if (response.code === 200) {
+      handleSuccess('换桶重量设置成功', '换桶重量设置')
+      // 清除相关缓存
+      apiCache.delete(`${url}/opc/pointValue/getAll`)
+    } else {
+      handleError(new Error('服务器返回错误'), '换桶重量设置')
+    }
+  } catch (error) {
+    handleError(error, '换桶重量设置')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 日志导出功能
+const showLogExportDialog = ref(false) // 控制对话框显示
+const logExportDateRange = ref<[string, string]>(['', ''])
+const logExportType = ref('alarm') // alarm: 报警日志, operation: 操作日志, sample: 采样日志
+
+const logTypeOptions = [
+  { label: '报警日志', value: 'alarm' },
+  { label: '操作日志', value: 'operation' },
+  { label: '采样日志', value: 'sample' }
+]
+
+// 打开导出对话框
+const openLogExportDialog = () => {
+  showLogExportDialog.value = true
+}
+
+// 导出日志函数
+const exportLogs = async () => {
+  if (!logExportDateRange.value[0] || !logExportDateRange.value[1]) {
+    ElMessage.warning('请选择日期范围')
+    return
+  }
+
+  try {
+    isLoading.value = true
+    const startDate = logExportDateRange.value[0]
+    const endDate = logExportDateRange.value[1]
+
+    let endpoint = ''
+    let filename = ''
+
+    switch (logExportType.value) {
+      case 'alarm':
+        endpoint = `${url}/opc/alarm/export`
+        filename = `报警日志_${startDate}_${endDate}.xlsx`
+        break
+      case 'operation':
+        endpoint = `${url}/opc/log/export`
+        filename = `操作日志_${startDate}_${endDate}.xlsx`
+        break
+      case 'sample':
+        endpoint = `${url}/opc/batch/export`
+        filename = `采样日志_${startDate}_${endDate}.xlsx`
+        break
+    }
+
+    const response = await axios.get(endpoint, {
+      params: { startDate, endDate },
+      responseType: 'blob'
+    })
+
+    // 创建下载链接
+    const blob = new Blob([response.data], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    })
+    const link = document.createElement('a')
+    link.href = window.URL.createObjectURL(blob)
+    link.download = filename
+    link.click()
+    window.URL.revokeObjectURL(link.href)
+    
+    ElMessage.success('日志导出成功')
+    showLogExportDialog.value = false // 导出成功后关闭对话框
+  } catch (error) {
+    console.error('日志导出失败:', error)
+    ElMessage.error('日志导出失败')
+  } finally {
+    isLoading.value = false
+  }
+}
+// 错误处理和用户反馈机制
+const errorMessages = ref<string[]>([])
+const isLoading = ref(false)
+const connectionStatus = ref({
+  websocket: 'disconnected',
+  api: 'unknown',
+  lastUpdate: null as Date | null
+})
+
+// 统一的错误处理函数
+const handleError = (error: any, context: string, showMessage: boolean = true) => {
+  const errorMsg = error.message || error.toString()
+  const timestamp = new Date().toLocaleTimeString()
+  const fullError = `[${timestamp}] ${context}: ${errorMsg}`
+
+  console.error(fullError, error)
+
+  // 添加到错误列表
+  errorMessages.value.unshift(fullError)
+  if (errorMessages.value.length > 10) {
+    errorMessages.value = errorMessages.value.slice(0, 10)
+  }
+
+  // 显示用户提示
+  if (showMessage) {
+    ElMessage.error(`${context}失败: ${errorMsg}`)
+  }
+
+  // 更新连接状态
+  connectionStatus.value.api = 'error'
+}
+
+// 成功处理函数
+const handleSuccess = (message: string, context: string) => {
+  console.log(`[${new Date().toLocaleTimeString()}] ${context}: ${message}`)
+  ElMessage.success(message)
+  connectionStatus.value.api = 'connected'
+  connectionStatus.value.lastUpdate = new Date()
+}
+
+// 清除错误信息
+const clearErrors = () => {
+  errorMessages.value = []
+}
+
+// 重试机制
+const retryOperation = async (operation: () => Promise<any>, maxRetries: number = 3) => {
+  for (let i = 0; i < maxRetries; i++) {
+    try {
+      return await operation()
+    } catch (error) {
+      if (i === maxRetries - 1) {
+        throw error
+      }
+      console.log(`重试第 ${i + 1} 次...`)
+      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)))
+    }
+  }
+}
+
+// 辅助函数：将原始值转换为显示值
+const parseDisplayValue = (value: any, valueDescJson: string | null): any => {
+  if (!valueDescJson) {
+    return value
+  }
+
+  try {
+    const valueDesc: any = JSON.parse(valueDescJson)
+
+    // 尝试匹配各种可能的值类型
+    if (value === 'false' || value === false) {
+      return valueDesc[false as any] || valueDesc['false'] || value
+    } else if (value === 'true' || value === true) {
+      return valueDesc[true as any] || valueDesc['true'] || value
+    } else if (value === '0' || value === 0) {
+      return valueDesc[0] || valueDesc['0'] || value
+    } else if (value === '1' || value === 1) {
+      return valueDesc[1] || valueDesc['1'] || value
+    } else if (value === '2' || value === 2) {
+      return valueDesc[2] || valueDesc['2'] || value
+    } else if (value === '3' || value === 3) {
+      return valueDesc[3] || valueDesc['3'] || value
+    } else {
+      // 其他值直接显示原值
+      return value
+    }
+  } catch (e) {
+    console.error('解析valueDesc失败:', e)
+    return value
+  }
+}
+
+// 运行日志 - 优化版本
+const runData = async () => {
+  try {
+    const response = await retryOperation(async () => {
+      return await apiRequest(`${url}/opc/pointValue/getAll`, { method: 'GET' }, true)
+    })
+
+    if (response.code === 200 && response.data?.length > 0) {
+      // 使用优化后的设备状态更新函数
+      updateDeviceStatusOptimized(response.data)
+
+      // 处理每条记录的显示值（val字段）
+      response.data.forEach((item: any) => {
+        // 处理最大重量字段
+        if (item.point?.signalName === '最大重量') {
+          huanbuckezhongliang.value = item.value
+        }
+
+        // 使用辅助函数转换显示值
+        item.val = parseDisplayValue(item.value, item.point?.valueDesc || null)
+      })
+
+      tableData.value = response.data
+      connectionStatus.value.api = 'connected'
+      connectionStatus.value.lastUpdate = new Date()
+    } else {
+      handleError(new Error('数据为空或格式错误'), '获取运行日志', false)
+    }
+  } catch (error) {
+    handleError(error, '获取运行日志', false)
+  }
+}
+// 控制历史记录dialog显示的变量
+const historyDialogVisible: any = ref(false)
+
+
+
+// 打开历史记录dialog
+const historyData = ref<any[]>([])
+const openHistoryDialog = async () => {
+  // 打开dialog
+  const response = await axios.get(url + '/opc/log/sampleHeaderOut?pageNum=1&pageSize=1000&poindId=ns4;i=27') //?point.plcNodeId=ns4;i=27
+  if (response.data.code === 200) {
+    let arr: any = []
+    response.data.rows.forEach((item: any) => {
+      if (item.point.plcNodeId === 'ns4;i=27') {
+
+        let valueDesc: any
+        if (item.point['plcNodeId']) {
+          valueDesc = JSON.parse(item.point['valueDesc'])
+        } else {
+          item['val'] = item.newValue
+        }
+        if (item.newValue === 'false') {
+          item['val'] = valueDesc[false as any]
+        }
+        if (item.newValue === 'true') {
+          item['val'] = valueDesc[true as any]
+        }
+        if (item.newValue === '1') {
+          item['val'] = valueDesc[1 as any]
+        }
+        if (item.newValue === '2') {
+          item['val'] = valueDesc[2 as any]
+        }
+        if (item.newValue === '0') {
+          item['val'] = valueDesc[0 as any]
+        }
+        arr.push(item)
+      }
+
+    })
+    historyData.value = arr
+  } else {
+    ElMessage.error('获取失败')
+  }
+  // historyData.value = res.data.rows
+  historyDialogVisible.value = true
+}
+const closeHistoryDialog = () => {
+  historyDialogVisible.value = false
+}
+const currentBatchIndex = ref(0) // 当前显示的桶样索引
+const batchRecord = ref<any[]>([]) // 桶列表数据
+
+// 切换到上一个桶样
+const prevBatch = () => {
+  if (batchRecord.value.length > 0) {
+    currentBatchIndex.value = (currentBatchIndex.value - 1 + batchRecord.value.length) % batchRecord.value.length
+  }
+}
+
+// 切换到下一个桶样
+const nextBatch = () => {
+  if (batchRecord.value.length > 0) {
+    currentBatchIndex.value = (currentBatchIndex.value + 1) % batchRecord.value.length
+  }
+}
+// id	signal_name	info_desc	data_type	value_desc	value_desc_type	address	device	direction	plc_node_id	can_write	can_alarm	can_status	can_log
+// 1	上位机手自动模式	上位机手自动模式	INT16	{"1": "手动", "2": "自动"}	enum	%MW3000	PLC	←	ns4;i=2	t	f	f	t
+// 2	上位机采样模式	上位机采样模式	INT16	{"1": "采样", "2": "溜管", "3": "清洁"}	enum	%MW3002	PLC	←	ns4;i=3	t	f	f	t
+// 3	上位机采样头采样间隔	上位机采样头采样间隔	INT16	{"单位": "秒"}	unit	%MW3004	PLC	←	ns4;i=4	t	f	f	t
+// 4	上位机采样头缩分间隔	上位机采样头缩分间隔	INT16	{"单位": "秒"}	unit	%MW3006	PLC	←	ns4;i=5	t	f	f	t
+// 5	采样系统启停命令	采样系统启停命令	INT16	{"1": "启动", "2": "停止"}	enum	%MW3008	PLC	←	ns4;i=6	t	f	f	t
+// 6	开盖机执行反馈	开盖机执行反馈	INT16	{"1": "开盖成功", "2": "开盖失败", "3": "封盖成功", "4": "封盖失败", "5": "复位成功", "6": "复位失败"}	enum	%MW3010	PLC	←	ns4;i=7	t	f	f	t
+// 7	手动模式一级皮带启停命令	手动模式一级皮带启停命令	INT16	{"1": "正转", "2": "反转", "3": "停止"}	enum	%MW3012	PLC	←	ns4;i=8	t	f	f	t
+// 8	手动模式破碎机启停命令	手动模式破碎机启停命令	INT16	{"1": "启动", "2": "停止"}	enum	%MW3014	PLC	←	ns4;i=9	t	f	f	t
+// 9	手动模式缩分皮带启停命令	手动模式缩分皮带启停命令	INT16	{"1": "启动", "2": "停止"}	enum	%MW3016	PLC	←	ns4;i=10	t	f	f	t
+// 10	手动模式缩分电机启停命令	手动模式缩分电机启停命令	INT16	{"1": "启动", "2": "停止"}	enum	%MW3018	PLC	←	ns4;i=11	t	f	f	t
+// 11	手动模式螺旋输送机启停命令	手动模式螺旋输送机启停命令	INT16	{"1": "启动", "2": "停止"}	enum	%MW3020	PLC	←	ns4;i=12	t	f	f	t
+// 12	手动模式斗提机启停命令	手动模式斗提机启停命令	INT16	{"1": "启动", "2": "停止"}	enum	%MW3022	PLC	←	ns4;i=13	t	f	f	t
+// 13	采样以及封装系统急停命令	采样以及封装系统急停命令	BIT	{"false": "正常", "true": "执行"}	enum	%M3030.0	PLC	←	ns4;i=14	t	t	f	t
+// 14	采样以及封装系统故障复位	采样以及封装系统故障复位	BIT	{"false": "正常", "true": "执行"}	enum	%M3030.1	PLC	←	ns4;i=15	t	t	f	t
+// 15	封装系统补桶命令	封装系统补桶命令	BIT	{"false": "正常", "true": "执行"}	enum	%M3030.2	PLC	←	ns4;i=16	t	t	f	t
+// 16	封装系统出桶命令	封装系统出桶命令	BIT	{"false": "正常", "true": "执行"}	enum	%M3030.3	PLC	←	ns4;i=17	t	t	f	t
+// 17	样桶重量	样桶重量	REAL	{"单位": "千克"}	unit	%MD3048	PLC	→	ns4;i=18	f	f	t	f
+// 18	初级给料皮带	初级给料皮带	INT16	{"0": "停止", "1": "采样口", "2": "溜管口","3":"故障"}	enum	%MW3052	PLC	→	ns4;i=19	f	f	t	f
+// 19	破碎机状态反馈	破碎机状态反馈	INT16	{"0": "停止", "1": "运行", "2": "故障"}	enum	%MW3054	PLC	→	ns4;i=20	f	f	t	f
+// 20	缩分皮带状态反馈	缩分皮带状态反馈	INT16	{"0": "停止", "1": "运行", "2": "故障"}	enum	%MW3056	PLC	→	ns4;i=21	f	f	t	f
+// 21	缩分机状态反馈	缩分机状态反馈	INT16	{"0": "停止", "1": "运行", "2": "故障"}	enum	%MW3058	PLC	→	ns4;i=22	f	f	t	f
+// 22	螺旋输送机状态反馈	螺旋输送机状态反馈	INT16	{"0": "停止", "1": "运行", "2": "故障"}	enum	%MW3060	PLC	→	ns4;i=23	f	f	t	f
+// 23	斗提机状态反馈	斗提机状态反馈	INT16	{"0": "停止", "1": "运行", "2": "故障"}	enum	%MW3062	PLC	→	ns4;i=24	f	f	t	f
+// 24	采样机间隔时间计时	采样机间隔时间计时	INT16	{"单位": "秒"}	unit	%MW3064	PLC	→	ns4;i=25	f	f	t	f
+// 25	封装系统当前模式	封装系统当前模式	INT16	{"1": "手动", "2": "自动"}	enum	%MW3066	PLC	→	ns4;i=26	f	f	t	f
+// 26	采样头动作输出	采样头动作输出	BIT	{"false": "停止", "true": "采样头动作"}	enum	%M3070.0	PLC	→	ns4;i=27	f	f	t	t
+// 27	开盖机开盖指令	开盖机开盖指令	BIT	{"false": "未执行", "true": "执行开盖"}	enum	%M3070.1	PLC	→	ns4;i=28	f	t	t	f
+// 28	开盖机封盖指令	开盖机封盖指令	BIT	{"false": "未执行", "true": "执行封盖"}	enum	%M3070.2	PLC	→	ns4;i=29	f	f	t	f
+// 29	开盖机复位指令	开盖机复位指令	BIT	{"false": "未执行", "true": "执行复位"}	enum	%M3070.3	PLC	→	ns4;i=30	f	f	t	f
+// 30	封装机补桶中	封装机补桶中	BIT	{"false": "无", "true": "补桶中"}	enum	%M3070.4	PLC	→	ns4;i=31	f	f	t	f
+// 31	封装机补桶成功	封装机补桶成功	BIT	{"false": "无", "true": "补桶成功"}	enum	%M3070.5	PLC	→	ns4;i=32	f	f	t	f
+// 32	封装机补桶失败	封装机补桶失败	BIT	{"false": "无", "true": "补桶失败"}	enum	%M3070.6	PLC	→	ns4;i=33	f	t	t	f
+// 33	封装机出桶中	封装机出桶中	BIT	{"false": "无", "true": "出桶中"}	enum	%M3070.7	PLC	→	ns4;i=34	f	f	t	f
+// 34	封装机出桶成功	封装机出桶成功	BIT	{"false": "无", "true": "出桶成功"}	enum	%M3071.0	PLC	→	ns4;i=35	f	f	t	f
+// 35	封装机出桶失败	封装机出桶失败	BIT	{"false": "无", "true": "出桶失败"}	enum	%M3071.1	PLC	→	ns4;i=36	f	t	t	f
+// 36	封装机接桶就绪	封装机接桶就绪	BIT	{"false": "无", "true": "接桶就绪"}	enum	%M3071.2	PLC	→	ns4;i=37	f	f	t	f
+// 37	封装机补桶就绪	封装机补桶就绪	BIT	{"false": "无", "true": "补桶就绪"}	enum	%M3071.3	PLC	→	ns4;i=38	f	f	t	f
+// 38	封装机出桶就绪	封装机出桶就绪	BIT	{"false": "无", "true": "出桶就绪"}	enum	%M3071.4	PLC	→	ns4;i=39	f	f	t	f
+// 39	封装机接桶长时间未就绪报警	封装机接桶长时间未就绪报警	BIT	{"false": "无", "true": "报警"}	enum	%M3071.5	PLC	→	ns4;i=40	f	t	t	f
+// 40	封装机机构总故障	封装机机构总故障	BIT	{"false": "无", "true": "报警"}	enum	%M3071.6	PLC	→	ns4;i=41	f	t	t	f
+// 41	封装机帆布电机故障	封装机帆布电机故障	BIT	{"false": "无", "true": "报警"}	enum	%M3071.7	PLC	→	ns4;i=42	f	t	t	f
+// 42	封装机落料滚筒电机故障	封装机落料滚筒电机故障	BIT	{"false": "无", "true": "报警"}	enum	%M3072.0	PLC	→	ns4;i=43	f	t	t	f
+// 43	封装机夹桶电机故障	封装机夹桶电机故障	BIT	{"false": "无", "true": "报警"}	enum	%M3072.1	PLC	→	ns4;i=44	f	t	t	f
+// 44	封装机顶升移载电机故障	封装机顶升移载电机故障	BIT	{"false": "无", "true": "报警"}	enum	%M3072.2	PLC	→	ns4;i=45	f	t	t	f
+// 45	封装机靠封装提升机滚筒故障	封装机靠封装提升机滚筒故障	BIT	{"false": "无", "true": "报警"}	enum	%M3072.3	PLC	→	ns4;i=46	f	t	t	f
+// 46	输送带靠门口提升机滚筒故障	输送带靠门口提升机滚筒故障	BIT	{"false": "无", "true": "报警"}	enum	%M3072.4	PLC	→	ns4;i=47	f	t	t	f
+// 47	输送带没有空桶报警	输送带没有空桶报警	BIT	{"false": "无", "true": "报警"}	enum	%M3072.5	PLC	→	ns4;i=48	f	t	t	f
+// 48	采样头空开	采样头空开	BIT	{"false": "无", "true": "报警"}	enum	%M3072.6	PLC	→	ns4;i=49	f	t	t	f
+// 49	采样头制动器空开	采样头制动器空开	BIT	{"false": "无", "true": "报警"}	enum	%M3072.7	PLC	→	ns4;i=50	f	t	t	f
+// 50	给料皮带空开	给料皮带空开	BIT	{"false": "无", "true": "报警"}	enum	%M3073.0	PLC	→	ns4;i=51	f	t	t	f
+// 51	破碎电机空开	破碎电机空开	BIT	{"false": "无", "true": "报警"}	enum	%M3073.1	PLC	→	ns4;i=52	f	t	t	f
+// 52	缩分皮带空开	缩分皮带空开	BIT	{"false": "无", "true": "报警"}	enum	%M3073.2	PLC	→	ns4;i=53	f	t	t	f
+// 53	缩分电机空开	缩分电机空开	BIT	{"false": "无", "true": "报警"}	enum	%M3073.3	PLC	→	ns4;i=54	f	t	t	f
+// 54	斗式提升机空开	斗式提升机空开	BIT	{"false": "无", "true": "报警"}	enum	%M3073.4	PLC	→	ns4;i=55	f	t	t	f
+// 55	螺旋弃料机空开	螺旋弃料机空开	BIT	{"false": "无", "true": "报警"}	enum	%M3073.5	PLC	→	ns4;i=56	f	t	t	f
+// 56	采样系统动力直流电源跳闸	采样系统动力直流电源跳闸	BIT	{"false": "无", "true": "报警"}	enum	%M3073.6	PLC	→	ns4;i=57	f	t	t	f
+// 57	采样系统相序报警	采样系统相序报警	BIT	{"false": "无", "true": "报警"}	enum	%M3073.7	PLC	→	ns4;i=58	f	t	t	f
+// 58	采样系统急停报警	采样系统急停报警	BIT	{"false": "无", "true": "报警"}	enum	%M3074.0	PLC	→	ns4;i=59	f	t	t	f
+// 59	封装系统急停报警	封装系统急停报警	BIT	{"false": "无", "true": "报警"}	enum	%M3074.1	PLC	→	ns4;i=60	f	t	t	f
+// 60	破碎机堵转报警	破碎机堵转报警	BIT	{"false": "无", "true": "报警"}	enum	%M3074.2	PLC	→	ns4;i=61	f	t	t	f
+// 61	采样头重故障报警	采样头重故障报警	BIT	{"false": "无", "true": "报警"}	enum	%M3074.3	PLC	→	ns4;i=62	f	t	t	f
+// 62	采样头不在原点位报警	采样头不在原点位报警	BIT	{"false": "无", "true": "报警"}	enum	%M3074.4	PLC	→	ns4;i=63	f	t	t	f
+// 63	最大重量	换桶最大重量	INT16	{"单位": "KG"}	unit					f	f	f	f
+// 64	采样口运行反馈	采样口运行反馈	INT16	{"true": "运行", "false": "停止"}	enum	%MW3076	PLC	←	ns4;i=64	f	f	t	f
+// 65	采样间隔时间来源选择	采样间隔时间来源选择	INT16	{"1": "系统批次下发时间", "2": "本地操作员设置时间"}	enum	%MW3076	PLC	←	ns4;i=65	t	f	t	f
+// 66	手动设置的采样间隔时间	手动设置的采样间隔时间	INT16	{"单位": "秒"}	unit	%MW3078	PLC	←	ns4;i=66	t	f	t	f
+// 67	全自动启停命令	全自动启停命令	INT16	{"1": "启动", "2": "停止"}	enum	%MW3080	PLC	←	ns4;i=67	t	f	t	f
+// 68	采样头启停	检修模式上位机手动启停采样头	INT16	{"1": "启动", "2": "停止"}	enum	%MW3082	PLC	←	ns4;i=68	t	f	t	f
+// 69	缩分倒计时显示	缩分倒计时显示	INT16	{"单位": "秒"}	string	%MW3084	PLC	→	ns4;i=69	f	f	t	f
+// 70	溜管口运行反馈	溜管口运行反馈	BIT	{"true": "运行", "false": "停止"}	enum	%M3086.0	PLC	→	ns4;i=70	f	t	t	f
+// 71	输煤皮带运行反馈	输煤皮带运行反馈	BIT	{"true": "运行", "false": "停止"}	enum	%M3086.1	PLC	→	ns4;i=71	f	t	t	f
+// 72	封装机手自动反馈	封装机手自动反馈	BIT	{"true": "自动", "false": "手动"}	enum	%M3086.2	PLC	→	ns4;i=72	f	f	t	f
+// 73	缓存器打开到位反馈	缓存器打开到位反馈	BIT	{"true": "开到位", "false": "未到位"}	enum	%M3086.3	PLC	→	ns4;i=73	f	t	t	f
+// 74	缓存器关闭到位反馈	缓存器关闭到位反馈	BIT	{"true": "关到位", "false": "未到位"}	enum	%M3086.4	PLC	→	ns4;i=74	f	t	t	f
+// 75	封装系统就绪反馈	封装系统就绪反馈	BIT	{"true": "系统就绪", "false": "未就绪"}	enum	%M3086.5	PLC	→	ns4;i=75	f	t	t	f
+// 76	煤流信号反馈	煤流信号反馈	BIT	{"true": "有煤流", "false": "无煤流"}	enum	%M3086.6	PLC	→	ns4;i=76	f	t	t	f
+
+// 正反转 - 上位机采样模式 (ns4;i=8)
+const zhengfan: any = ref({
+  id: 2,
+  plcNodeId: 'ns4;i=8',
+  signalName: '上位机采样模式_opc',
+  val: ''
+})
+
+// 缩分间隔时间 - 上位机采样头缩分间隔 (ns4;i=5)
+const suofenshijianjiange: any = ref({
+  id: 3,
+  plcNodeId: 'ns4;i=5',
+  signalName: '缩分间隔时间',
+  val: ''
+})
+
+const tableData = ref<any[]>([])
+const operationTableData = ref<any[]>([])
+const alarmTableData = ref<any[]>([])
+const tongjiData = ref<any[]>([]) // 统计数据
 
-// 轮询相关设置
-const pollingInterval = ref(30000) // 5秒轮询一次
+// 优化轮询机制
+const pollingInterval = ref(30000) // 30秒轮询一次
 let pollingTimer: number | null = null
 let isPolling = false
+let pollingErrors = 0
+const maxPollingErrors = 3
 
-// 实现自动轮询功能
+// 智能轮询 - 根据连接状态调整轮询频率
 const startPolling = () => {
-  // 防止重复启动轮询
   if (isPolling) return
-  
+
   isPolling = true
-  
+  pollingErrors = 0
+
   // 先立即执行一次
-  runData()
-  operationData()
-  alarmData()
-  
+  executePollingTasks()
+
   // 设置定时器进行轮询
   pollingTimer = window.setInterval(() => {
-    runData()
-    operationData()
-    alarmData()
+    executePollingTasks()
   }, pollingInterval.value)
 }
 
+// 执行轮询任务
+const executePollingTasks = async () => {
+  try {
+    // 并行执行多个API调用
+    await Promise.allSettled([
+      runData(),
+      operationData(),
+      alarmData()
+    ])
+
+    // 重置错误计数
+    pollingErrors = 0
+
+    // 如果WebSocket连接正常，可以减少轮询频率
+    if (isWsConnected.value) {
+      pollingInterval.value = 60000 // 1分钟
+    } else {
+      pollingInterval.value = 30000 // 30秒
+    }
+
+  } catch (error) {
+    pollingErrors++
+    console.error(`轮询任务执行失败 (${pollingErrors}/${maxPollingErrors}):`, error)
+
+    // 如果连续失败次数过多，停止轮询
+    if (pollingErrors >= maxPollingErrors) {
+      console.error('轮询失败次数过多，停止轮询')
+      stopPolling()
+    }
+  }
+}
+
 // 停止轮询
 const stopPolling = () => {
   if (pollingTimer !== null) {
     clearInterval(pollingTimer)
     pollingTimer = null
     isPolling = false
+    pollingErrors = 0
+  }
+}
+
+// 手动刷新数据
+const refreshData = async () => {
+  try {
+    isLoading.value = true
+    await executePollingTasks()
+    handleSuccess('数据刷新成功', '数据刷新')
+  } catch (error) {
+    handleError(error, '数据刷新')
+  } finally {
+    isLoading.value = false
+  }
+}
+// 操作记录 - 优化版本
+const operationData = async () => {
+  try {
+    const response = await retryOperation(async () => {
+      return await apiRequest(`${url}/opc/log/operation/list`, {
+        method: 'GET',
+        params: { pageNum: 1, pageSize: 1000 }
+      }, true)
+    })
+
+    if (response.code === 200) {
+      // 优化数据处理逻辑
+      response.rows.forEach((item: any) => {
+        // 使用辅助函数转换显示值
+        item.val = parseDisplayValue(item.newValue, item.point?.valueDesc || null)
+      })
+      operationTableData.value = response.rows
+      connectionStatus.value.api = 'connected'
+      connectionStatus.value.lastUpdate = new Date()
+    } else {
+      handleError(new Error('服务器返回错误'), '获取操作记录')
+    }
+  } catch (error) {
+    handleError(error, '获取操作记录', false)
+  }
+}
+
+// 报警数据 - 优化版本
+const alarmData = async () => {
+  try {
+    const response = await retryOperation(async () => {
+      return await apiRequest(`${url}/opc/alarm/list`, {
+        method: 'GET',
+        params: { cleared: false }
+      }, true)
+    })
+
+    if (response.code === 200) {
+      alarmTableData.value = response.rows || []
+      connectionStatus.value.api = 'connected'
+      connectionStatus.value.lastUpdate = new Date()
+    } else {
+      handleError(new Error('服务器返回错误'), '获取报警数据')
+    }
+  } catch (error) {
+    handleError(error, '获取报警数据', false)
+  }
+}
+
+// 获取桶列表数据 - 优化版本
+const batchList = async () => {
+  if (!currentBatch.value) return
+
+  try {
+    const response = await retryOperation(async () => {
+      return await apiRequest(`${url}/opc/batch/pagelist`, {
+        method: 'GET',
+        params: { batchNo: currentBatch.value }
+      })
+    })
+
+    if (response.code === 200) {
+      batchRecord.value = [currentTong.value, ...response.rows]
+      connectionStatus.value.api = 'connected'
+      connectionStatus.value.lastUpdate = new Date()
+    } else {
+      handleError(new Error('服务器返回错误'), '获取桶列表数据')
+    }
+  } catch (error) {
+    handleError(error, '获取桶列表数据', false)
   }
 }
-// 统计
-const tongjiData:any=ref([])
+
+// 统计数据 - 优化版本
 const getTongjiData = async () => {
   const startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
   const endTime = dayjs().format('YYYY-MM-DD')
+
   try {
-    const response = await axios.get(url+'/opc/batch/grouplist?startTime='+startTime+'&endTime='+endTime)
-    console.log(response.data,'统计数据')
-    if(response.data.code === 200){
-     
-      const result:any = []
-      response.data.data.forEach((item: { list: any[]; batchNo: any; sampleCode: any }) => {
-          if (item.list && item.list.length > 0) {
-            item.list.forEach(bucket => {
-              result.push({
-                batchNo: item.batchNo,
-                sampleCode: item.sampleCode,
-                bucketNo: bucket.bucketNo,
-                sampleWeight: bucket.sampleWeight || '-'
-              })
+    const response = await retryOperation(async () => {
+      return await apiRequest(`${url}/opc/batch/grouplist`, {
+        method: 'GET',
+        params: { startTime, endTime }
+      }, true)
+    })
+
+    if (response.code === 200) {
+      const result: any[] = []
+      response.data.forEach((item: { list: any[]; batchNo: any; sampleCode: any }) => {
+        if (item.list && item.list.length > 0) {
+          item.list.forEach(bucket => {
+            result.push({
+              batchNo: item.batchNo,
+              sampleCode: item.sampleCode,
+              bucketNo: bucket.bucketNo,
+              sampleWeight: bucket.sampleWeight || '-'
             })
-          }
+          })
+        }
       })
       tongjiData.value = result
-    }else{
-      ElMessage.error('获取失败')
+      connectionStatus.value.api = 'connected'
+      connectionStatus.value.lastUpdate = new Date()
+    } else {
+      handleError(new Error('服务器返回错误'), '获取统计数据')
     }
   } catch (error) {
-    console.error('请求失败:', error)
+    handleError(error, '获取统计数据', false)
   }
 }
 
 
-// 在组件挂载时开始轮询
+// 在组件挂载时开始轮询 - 优化版本
 watchEffect(() => {
   // 初始化WebSocket连接
   initWebSocket()
+
   // 初始化时获取所有数据
-  runData()
-  operationData()
-  alarmData()
-  getTongjiData()
-  
-  // 然后开始runData的自动轮询
-  startPolling()
+  const initializeData = async () => {
+    try {
+      isLoading.value = true
+
+      // 并行执行初始数据加载
+      await Promise.allSettled([
+        runData(),
+        operationData(),
+        alarmData(),
+        getTongjiData()
+      ])
+
+      // 然后开始智能轮询
+      startPolling()
+
+    } catch (error) {
+      handleError(error, '初始化数据')
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  initializeData()
 })
 
-// 在组件卸载时清除定时器，防止内存泄漏
+// 在组件卸载时清理资源 - 优化版本
 onUnmounted(() => {
+  console.log('组件卸载，清理资源...')
+
+  // 停止轮询
   stopPolling()
+
   // 关闭WebSocket连接
   if (ws) {
     ws.close()
     ws = null
   }
-  
-  // 清除重连定时器
+
+  // 清除所有定时器
   if (wsReconnectTimer) {
     clearTimeout(wsReconnectTimer)
     wsReconnectTimer = null
   }
+
+  if (wsHeartbeatTimer) {
+    clearInterval(wsHeartbeatTimer)
+    wsHeartbeatTimer = null
+  }
+
+  // 清除API缓存
+  apiCache.clear()
+
+  console.log('资源清理完成')
 })
 // 斗提机启停设置
-const setDouTiji = async (val:any) => {
+const setDouTiji = async (val: any) => {
   try {
-    const response = await axios.post(url+'/opc/control/manualBucketElevatorStartStop?value='+val, {
+    const response = await axios.post(url + '/opc/control/manualBucketElevatorStartStop?value=' + val, {
       // nodeId: 'ns4;i=13',
       value: val
     })
-    console.log(response.data,'斗提机启停设置')
-    if(response.data.code === 200){
+    console.log(response.data, '斗提机启停设置')
+    if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
@@ -603,17 +1612,17 @@ const setDouTiji = async (val:any) => {
   }
 }
 //二级皮带启停设置
-const setErjiPidai = async (val:any) => {
+const setErjiPidai = async (val: any) => {
   try {
-    const response = await axios.post(url+'/opc/control/manualDivisionBeltStartStop?value='+val, {
+    const response = await axios.post(url + '/opc/control/manualDivisionBeltStartStop?value=' + val, {
       // nodeId: 'ns4;i=10',
       value: val
     })
-    console.log(response.data,'二级皮带启停设置')
-    if(response.data.code === 200){
+    console.log(response.data, '二级皮带启停设置')
+    if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
@@ -621,17 +1630,17 @@ const setErjiPidai = async (val:any) => {
   }
 }
 //螺旋输送机启停设置
-const setLuoxuanshusongji = async (val:any) => {
+const setLuoxuanshusongji = async (val: any) => {
   try {
-    const response = await axios.post(url+'/opc/control/manualScrewConveyorStartStop?value='+val, {
+    const response = await axios.post(url + '/opc/control/manualScrewConveyorStartStop?value=' + val, {
       // nodeId: 'ns4;i=12',
       value: val
     })
-    console.log(response.data,'螺旋输送机启停设置')
-    if(response.data.code === 200){
+    console.log(response.data, '螺旋输送机启停设置')
+    if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
@@ -639,33 +1648,19 @@ const setLuoxuanshusongji = async (val:any) => {
   }
 }
 
-//溜管制样启停设置
-const setLiuguankou = async (val:any) => {
-  try {
-    const response = await axios.post(url+'/opc/control/manualBelt1StartStop?value='+val)
-    console.log(response.data,'溜管制样启停设置')
-    if(response.data.code === 200){
-      ElMessage.success('指令发送成功')
-      runData()
-    }else{
-      ElMessage.error('指令发送失败')
-    }
-  } catch (error) {
-    console.error('请求失败:', error)
-  }
-}
+
 //破碎机启动停止设置
-const setPosuiji = async (val:any) => {
+const setPosuiji = async (val: any) => {
   try {
-    const response = await axios.post(url+'/opc/control/manualCrusherStartStop?value='+val, {
+    const response = await axios.post(url + '/opc/control/manualCrusherStartStop?value=' + val, {
       nodeId: 'ns4;i=3',
       value: 1
     })
-    console.log(response.data,'破碎机启动停止设置')
-    if(response.data.code === 200){
+    console.log(response.data, '破碎机启动停止设置')
+    if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
@@ -673,113 +1668,195 @@ const setPosuiji = async (val:any) => {
   }
 }
 //缩分器启动停止设置
-const setSuofenqi = async (val:any) => {
+const setSuofenqi = async (val: any) => {
   try {
-    const response = await axios.post(url+'/opc/control/manualDivisionMotorStartStop?&value='+val, {
+    const response = await axios.post(url + '/opc/control/manualDivisionMotorStartStop?&value=' + val, {
       nodeId: '',
       value: val
     })
-    console.log(response.data,'缩分器启动停止设置')
-    if(response.data.code === 200){
+    console.log(response.data, '缩分器启动停止设置')
+    if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
     console.error('请求失败:', error)
   }
 }
-//缩分时间间隔设置
-const setSuofenjiedian = async (val:any) => {
-  console.log(val,'valxxx')
+//采样头缩分间隔时间设置
+const setSampleHeadDivisionInterval = async (val: any) => {
+  console.log(val, '采样头缩分间隔时间设置')
   try {
-    const response = await axios.post(url+'/opc/control/sampleHeadDivisionInterval?value='+val.target.value)
-    console.log(response.data,'缩分时间间隔设置')
-    if(response.data.code === 200){
-      ElMessage.success('指令发送成功')
+    // 判断是修改哪个时间
+    const value = val.target ? val.target.value : val
+    const response = await axios.post(url + '/opc/control/sampleHeadDivisionInterval?value=' + value)
+    console.log(response.data, '采样头缩分间隔时间设置')
+    if (response.data.code === 200) {
+      ElMessage.success('采样头缩分间隔时间设置成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
     console.error('请求失败:', error)
   }
 }
-//当前采样系统运行模式设置 , {nodeId: 'ns4;i=2',value: val?'1':'0'}
-const setRunningMode = async (val:any) => {
-  //  value.value = val==2?true:false
-  console.log(val,'当前采样系统运行模式设置')
+//手动采样头缩分间隔时间设置
+const setManualSampleInterval = async (val: any) => {
+  console.log(val, '手动采样头间隔时间设置')
   try {
-    const response = await axios.post(url+'/opc/control/manualAutoMode?value='+val)
-    console.log(response.data,'当前采样系统运行模式设置')
-    if(response.data.code === 200){
-      ElMessage.success('指令发送成功')
+    // 判断是修改哪个时间
+    const value = val.target ? val.target.value : val
+    const response = await axios.post(url + '/opc/control/manualSampleInterval?value=' + value)
+    console.log(response.data, '手动采样头间隔时间设置')
+    if (response.data.code === 200) {
+      ElMessage.success('手动采样头间隔时间设置成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
     console.error('请求失败:', error)
   }
 }
-// 采样系统启动停止
-const setcaiyangSystem = async (val:any) => {
-  console.log(val,'当前采样系统运行模式设置')
+//自动采样间隔时间设置
+const setSampleHeadSampleInterval = async (val: any) => {
+  console.log(val, '采样间隔时间设置')
   try {
-    const response = await axios.post(url+'/opc/control/sampleSystemStartStop?value='+val)
-    console.log(response.data,'当前采样系统运行模式设置')
-    if(response.data.code === 200){
-      ElMessage.success('指令发送成功')
+    // 判断是修改哪个时间
+    const value = val.target ? val.target.value : val
+    const response = await axios.post(url + '/opc/control/sampleHeadSampleInterval?value=' + value)
+    console.log(response.data, '采样间隔时间设置')
+    if (response.data.code === 200) {
+      ElMessage.success('采样间隔时间设置成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
     console.error('请求失败:', error)
   }
 }
-const setCaiYangJiModel = async (val:any) => {
- 
-  console.log(val,'当前采样系统运行模式设置')
+
+// 采样系统启动停止
+const setcaiyangSystem = async (val: any) => {
+  console.log(val, '当前采样系统运行模式设置')
   try {
-    const response = await axios.post(url+'/opc/control/sampleMode?value='+val)
-    console.log(response.data,'当前采样系统运行模式设置')
-    if(response.data.code === 200){
+    const response = await axios.post(url + '/opc/control/sampleSystemStartStop?value=' + val)
+    console.log(response.data, '当前采样系统运行模式设置')
+    if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
     console.error('请求失败:', error)
   }
 }
-const jinjitingzhi = async (val:any) => {
+
+//当前采样系统运行模式设置 , {nodeId: 'ns4;i=2',value: val?'1':'0'}
+const setManualAutoMode = async (val: any) => {
+  console.log(val, '当前采样系统运行模式设置')
   try {
-    const response = await axios.post(url+'/opc/control/emergencyStop?value='+val, {
-      nodeId: 'ns4;i=14',
-      value: '1'
+    const response = await axios.post(url + '/opc/control/manualAutoMode?value=' + val)
+    console.log(response.data, '当前采样系统运行模式设置')
+    if (response.data.code === 200) {
+      // 确保 manualAutoMode.value 是对象而不是布尔值
+      if (typeof manualAutoMode.value !== 'object' || manualAutoMode.value === null) {
+        manualAutoMode.value = { id: 1, val: val }
+      } else {
+        manualAutoMode.value.val = val
+      }
+      ElMessage.success('指令发送成功')
+      runData()
+    } else {
+      ElMessage.error('指令发送失败')
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+  }
+}
+const setCaiYangJiModel = async (val: any) => {
+  console.log(val, '当前采样模式设置')
+  try {
+    const response = await axios.post(url + '/opc/control/sampleMode?value=' + val)
+    console.log(response.data, '当前采样模式设置')
+    if (response.data.code === 200) {
+      sampleMode.value.val = val // 更新本地状态
+      ElMessage.success('采样模式切换成功')
+      runData()
+    } else {
+      ElMessage.error('指令发送失败')
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+  }
+}
+
+// 检修模式下的采样头启停控制
+const setCaiYangTouControl = async (val: any) => {
+  console.log(val, '检修模式采样头启停控制')
+  try {
+    const response = await axios.post(url + '/opc/control/repairModeSampleHeadControl?value=' + val)
+    console.log(response.data, '检修模式采样头启停控制')
+    if (response.data.code === 200) {
+      ElMessage.success(val === 1 ? '采样头启动成功' : '采样头停止成功')
+      runData()
+    } else {
+      ElMessage.error('指令发送失败')
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+    ElMessage.error('请求失败')
+  }
+}
+
+// 制样方式设置（对应手动模式一级皮带启停命令）
+const setZhiYangFangShi = async (val: any) => {
+  console.log(val, '制样方式设置')
+  try {
+    // val: 1=正转(制样口), 2=反转(溜管口), 3=停止
+    const response = await axios.post(url + '/opc/control/manualBelt1StartStop?value=' + val)
+    console.log(response.data, '制样方式设置')
+    if (response.data.code === 200) {
+      zhiyangFangshi.value.val = val // 更新本地状态
+      ElMessage.success('制样方式切换成功')
+      runData()
+    } else {
+      ElMessage.error('指令发送失败')
+    }
+  } catch (error) {
+    console.error('请求失败:', error)
+  }
+}
+const jinjitingzhi = async (val: any) => {
+  try {
+    const response = await axios.post(url + '/opc/control/emergencyStop?value=' + val, {
+      nodeId: 'ns4;i=14',
+      value: '1'
     })
-    console.log(response.data,'初级给料皮带启停设置')
-    if(response.data.code === 200){
+    console.log(response.data, '初级给料皮带启停设置')
+    if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
       runData()
-    }else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
     console.error('请求失败:', error)
   }
 }
-const guzhangfuwei = async (val:any) => {
+const guzhangfuwei = async (val: any) => {
   try {
-    const response = await axios.post(url+'/opc/control/faultReset?value='+val)
-    console.log(response.data,'故障反馈设置')
-    if(response.data.code === 200){
+    const response = await axios.post(url + '/opc/control/faultReset?value=' + val)
+    console.log(response.data, '故障反馈设置')
+    if (response.data.code === 200) {
       ElMessage.success('指令发送成功')
       runData()
-    } else{
+    } else {
       ElMessage.error('指令发送失败')
     }
   } catch (error) {
@@ -788,13 +1865,13 @@ const guzhangfuwei = async (val:any) => {
   }
 }
 
-const jiechu = async (item:any) => {
+const jiechu = async (item: any) => {
   try {
-    const response = await axios.put(url+'/opc/alarm/clear/'+item.id)
-    if(response.data.code === 200){
+    const response = await axios.put(url + '/opc/alarm/clear/' + item.id)
+    if (response.data.code === 200) {
       ElMessage.success('解除报警成功')
       alarmData()
-    }else{
+    } else {
       ElMessage.error('解除报警失败')
     }
   } catch (error) {
@@ -804,1151 +1881,2457 @@ const jiechu = async (item:any) => {
 </script>
 
 <template>
-  <div>
+  <el-config-provider :locale="locale">
+    <div class="app-container">
     <div class="top">
       <img id="bg-image" src="./assets/header.png" alt="">
       <span>福泉公司1号火车采样机</span>
     </div>
     <div class="belt-sampling">
-        <div class="left">
-            <div class="item yunxingrizhi">
-                <div class="title">运行日志</div>
-                <el-table :data="tableData" :max-height="240">
-                  <el-table-column prop="updateTime" label="时间" />
-                  <el-table-column prop="point.signalName" label="设备"  />
-                  <el-table-column prop="val" label="状态" >
-                    <template #default="scope">
-                     <div >{{scope.row.val}}</div>
-                    </template>
-                  </el-table-column>
-                </el-table>
+      <div class="left">
+        <div class="item yunxingrizhi">
+          <div class="title">运行日志</div>
+          <el-table :data="tableData" :max-height="240">
+            <el-table-column prop="updateTime" label="时间" />
+            <el-table-column prop="point.signalName" label="设备" />
+            <el-table-column prop="val" label="状态">
+              <template #default="scope">
+                <div>{{ scope.row.val }}</div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="item caozuojilu">
+          <div class="title">操作记录</div>
+          <el-table :data="operationTableData" :max-height="240">
+            <el-table-column prop="operateTime" label="时间" />
+            <el-table-column prop="point.signalName" label="设备" />
+            <el-table-column prop="newValue" label="操作状态">
+              <template #default="scope">
+                <div>{{ scope.row.val }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="operator" label="操作员" />
+          </el-table>
+        </div>
+        <div class="item baojingxinxi">
+          <div class="title">报警信息</div>
+          <el-table :data="alarmTableData" :max-height="240">
+            <el-table-column prop="alarmTime" label="时间" />
+            <el-table-column prop="alarmDesc" label="报警信息" />
+            <el-table-column label="操作">
+              <template #default="scope">
+                <el-button type="primary" size="small" @click="jiechu(scope.row)">解除报警</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="center">
+        <div class="devices">
+          <div class="center-top">
+            <div />
+            <div class="oprate">
+              <img width="24" src="./assets/screen/common/video.png" alt="">
+              <div>
+                <span class="model">当前运行模式:</span>
+                <el-switch v-model="manualAutoModeSwitch" inline-prompt active-text="自动" inactive-text="手动"
+                  style="--el-switch-on-color: #1890ff; --el-switch-off-color: rgba(255, 255, 255, 0.5)" disabled />
+              </div>
             </div>
-            <div class="item caozuojilu">
-                <div class="title">操作记录</div>
-                <el-table :data="operationTableData" :max-height="240">
-                  <el-table-column prop="operateTime" label="时间" />
-                  <el-table-column prop="point.signalName" label="设备"  />
-                  <el-table-column prop="newValue" label="操作状态" >
-                    <template #default="scope">
-                      <div >{{scope.row.val}}</div> 
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="operator" label="操作员"  />
-                </el-table>
+            <!-- 右上角状态信息 -->
+            <div class="status-info-panel">
+              <div class="status-info-item">
+                <span class="info-label">当前批次</span>
+                <span class="info-value">{{ currentBatch || '-' }}</span>
+              </div>
+              <div class="status-info-item">
+                <span class="info-label">当前采样方案</span>
+                <span class="info-value">{{ jiangejiangshijijiishi.val || '-' }}<span class="info-unit">s</span></span>
+              </div>
+              <div class="status-info-item">
+                <span class="info-label">采样头动作倒计时</span>
+                <span class="info-value">{{ caiyangtoudongzuodaojishi.val || '-' }}<span
+                    class="info-unit">s</span></span>
+              </div>
+              <div class="status-info-item">
+                <span class="info-label">缩分停止倒计时</span>
+                <span class="info-value">{{ suofendaojishixianshi.val || '-' }}<span class="info-unit">s</span></span>
+              </div>
             </div>
-            <div class="item baojingxinxi">
-                <div class="title">报警信息</div>
-                <el-table :data="alarmTableData" :max-height="240">
-                  <el-table-column prop="alarmTime" label="时间" />
-                  <el-table-column prop="alarmDesc" label="报警信息"  />
-                  <el-table-column  label="操作" >
-                    <template #default="scope">
-                        <el-button type="primary" size="small" @click="jiechu(scope.row)">解除报警</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
+          </div>
+          <div class="device-content">
+            <img class="caiyang" width="95%" src="./assets/screen/belt-sampling/cai.png" alt="">
+            <div class="caiyangtong">
+              <div class="caiyangtong-left caiyangtong-item" @click="prevBatch">&lt;</div>
+              <div class="caiyangtong-center">
+                <div class="center-item">
+                  <img src="./assets/screen/belt-sampling/down.png" alt="">
+                  <img width="35" src="./assets/screen/belt-sampling/bottle.png" alt="">
+                </div>
+                <div class="bottle-content">
+                  <table>
+                    <tbody>
+                      <tr>
+                        <td>当前桶号</td>
+                        <td>{{ batchRecord[currentBatchIndex]?.samplecard2 || '-' }}</td>
+                      </tr>
+                      <tr>
+                        <td>批次号</td>
+                        <td>{{ batchRecord[currentBatchIndex]?.batchNo || '-' }}</td>
+                      </tr>
+                      <tr>
+                        <td>采样码</td>
+                        <td>{{ batchRecord[currentBatchIndex]?.sampleCode || '-' }}</td>
+                      </tr>
+                      <tr>
+                        <td>重量</td>
+                        <td>{{ batchRecord[currentBatchIndex]?.sampleWeight || '-' }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <div class="caiyangtong-right caiyangtong-item" @click="nextBatch">&gt;</div>
             </div>
-        </div>
-        <div class="center">
-            <div class="devices">
-                <div class="center-top">
-                    <img width="24" src="./assets/screen/common/video.png" alt="">
-                    <div class="oprate">
-                        <div>
-                            <span class="model">当前运行模式:</span>
-                             <el-switch
-                                v-model="value"
-                                inline-prompt
-                                active-text="自动"
-                                inactive-text="手动"
-                                style="--el-switch-on-color: #1890ff; --el-switch-off-color: rgba(255, 255, 255, 0.5)"
-                                disabled
-                              />
-                        </div>
-                    </div>
+            <div class="infos">
+              <div class="caiyangtou info-item">
+                <div class="caiyangtou-item">
+                  <div class="name">采样头</div>
+                  <div>
+                    <i
+                      :class="{ 'green': String(caiyangtou.val) === 'true' || String(caiyangtou.val) === '1', 'red': String(caiyangtou.val) !== 'true' && String(caiyangtou.val) !== '1' }"></i>
+                    <span>{{ (String(caiyangtou.val) === 'true' || String(caiyangtou.val) === '1') ? '运行' : '停止'
+                      }}</span>
+                  </div>
                 </div>
-                <div class="device-content">
-                    <img class="caiyang" width="95%" src="./assets/screen/belt-sampling/cai.png" alt="">
-                    <div class="caiyangtong" >
-                      <div class="caiyangtong-left caiyangtong-item" @click="prevBatch">&lt;</div>
-                      <div class="caiyangtong-center">
-                        <div class="center-item">
-                          <img src="./assets/screen/belt-sampling/down.png" alt="">
-                          <img width="35" src="./assets/screen/belt-sampling/bottle.png" alt="">
-                        </div>
-                        <div class="bottle-content">
-                          <table>
-                            <tbody>
-                              <tr>
-                                <td>当前桶号</td>
-                                <td>{{ batchRecord[currentBatchIndex]?.samplecard2 || '-' }}</td>
-                              </tr>
-                              <tr>
-                                <td>批次号</td>
-                                <td>{{ batchRecord[currentBatchIndex]?.batchNo|| '-'  }}</td>
-                              </tr>
-                              <tr>
-                                <td>采样码</td>
-                                <td>{{ batchRecord[currentBatchIndex]?.sampleCode|| '-' }}</td>
-                              </tr>
-                              <tr>
-                                <td>重量</td>
-                                <td>{{ batchRecord[currentBatchIndex]?.sampleWeight|| '-'  }}</td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      </div>
-                      <div class="caiyangtong-right caiyangtong-item" @click="nextBatch">&gt;</div>
+                <!-- 检修模式下显示启动停止按钮 -->
+                <div v-if="manualAutoMode.val === '3'" class="caiyangtou-controls">
+                  <div class="btns">
+                    <div>
+                      <div class="btn blue" @click="setCaiYangTouControl(1)">启动</div>
+                    </div>
+                    <div>
+                      <div class="btn red" @click="setCaiYangTouControl(2)">停止</div>
                     </div>
-                    <div class="infos">
-                      <div class="tishengji info">
-                            <div class="flex">
-                              <div class="name">斗提机</div>
-                              <div>
-                                <i :class="{ 'green': doutiji.val == 1, 'red': doutiji.val != 1 }"></i>
-                                <span>{{doutiji.val == 1 ? '运行' : '停止'}}</span>
-                              </div>
-                            </div>
-                            <div class="btns">
-                              <div><div class="btn blue" @click="setDouTiji(1)">启动</div></div>
-                              <div><div class="btn red" @click="setDouTiji(2)">停止</div></div>
-                            </div>
-                        </div>
-                        <div class="cijigeiliaopidai info">
-                            <div class="flex">
-                               <div class="name">二级皮带</div>
-                              <div>
-                                  <i :class="{ 'green': erjipidai.val == 1, 'red': erjipidai.val != 1 }"></i>
-                                  <span>{{erjipidai.val ==1?'运行':'停止'}}</span>
-                              </div>
-                            </div>
-                           
-                             <div class="btns">
-                                <div><div class="btn blue" @click="setErjiPidai(1)">启动</div></div>
-                                <div><div class="btn red" @click="setErjiPidai(2)">停止</div></div>
-                            </div>
-                        </div>
-                        <div class="luoxuanshusongji info">
-                            <div class="flex">
-                              <div class="name">螺旋<br/>输送机</div>
-                              <div style="line-height: 36px;">
-                                  <i :class="{ 'green': luoxuanshusongji.val == 1, 'red': luoxuanshusongji.val != 1 }"></i>
-                                  <span>{{luoxuanshusongji.val ==1?'运行':'停止'}}</span>
-                              </div>
-                            </div>
-                            <div class="btns">
-                               <div><div class="btn blue" @click="setLuoxuanshusongji(1)">启动</div></div>
-                              <div><div class="btn red" @click="setLuoxuanshusongji(2)">停止</div></div>
-                            </div>
-                        </div>
-                        <div class="chujigeiliaopidai">
-                          <div class="chujigeiliaopidai-item" style="border-bottom:1px solid #1890ff;">
-                            <div class="name" style="width:100px;">初级给料皮带</div>
-                            <div >
+                  </div>
+                </div>
+                <div style="border-top: 1px solid #1890ff;padding-top:4px;">
+                  <div class="btn blue history" @click="openHistoryDialog">查询历史</div>
+                </div>
+              </div>
+              <div class="tishengji info">
+                <div class="flex">
+                  <div class="name">斗提机</div>
+                  <div>
+                    <i :class="{ 'green': doutiji.val == 1, 'red': doutiji.val != 1 }"></i>
+                    <span>{{ doutiji.val == 1 ? '运行' : '停止' }}</span>
+                  </div>
+                </div>
+                <div class="btns">
+                  <div>
+                    <div class="btn blue" @click="setDouTiji(1)">启动</div>
+                  </div>
+                  <div>
+                    <div class="btn red" @click="setDouTiji(2)">停止</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="cijigeiliaopidai info">
+                <div class="flex">
+                  <div class="name">二级皮带</div>
+                  <div>
+                    <i :class="{ 'green': erjipidai.val == 1, 'red': erjipidai.val != 1 }"></i>
+                    <span>{{ erjipidai.val == 1 ? '运行' : '停止' }}</span>
+                  </div>
+                </div>
+
+                <div class="btns">
+                  <div>
+                    <div class="btn blue" @click="setErjiPidai(1)">启动</div>
+                  </div>
+                  <div>
+                    <div class="btn red" @click="setErjiPidai(2)">停止</div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="luoxuanshusongji info">
+                <div class="flex">
+                  <div class="name">螺旋<br />输送机</div>
+                  <div style="line-height: 36px;">
+                    <i :class="{ 'green': luoxuanshusongji.val == 1, 'red': luoxuanshusongji.val != 1 }"></i>
+                    <span>{{ luoxuanshusongji.val == 1 ? '运行' : '停止' }}</span>
+                  </div>
+                </div>
+                <div class="btns">
+                  <div>
+                    <div class="btn blue" @click="setLuoxuanshusongji(1)">启动</div>
+                  </div>
+                  <div>
+                    <div class="btn red" @click="setLuoxuanshusongji(2)">停止</div>
+                  </div>
+                </div>
+              </div>
+              <div class="chujigeiliaopidai">
+                <div class="chujigeiliaopidai-item" style="border-bottom:1px solid #1890ff;">
+                  <div class="name" style="width:100px;">初级给料皮带</div>
+                  <!-- <div>
                                 <i :class="{ 'green': chujigeiliaopidai.val == 1, 'red': chujigeiliaopidai.val != 1 }"></i>
-                                <span>{{chujigeiliaopidai.val ==1?'运行':'停止'}}</span>
-                            </div>
-                          </div>
-                          <div class="chujigeiliaopidai-item">
-                            <div style="border-right: 1px solid #1890ff;">
-                              <div style="border-bottom:1px solid #1890ff;">溜管口</div>
-                              <div>制样口</div>
-                            </div>
-                            <div >
-                              <div style="border-bottom:1px solid #1890ff;">
-                                <i :class="{ 'green': zhengfan.val == 2, 'red': luoxuanshusongji.val != 2 }"></i>
-                                <span>{{zhengfan.val ==2?'运行':'停止'}}</span>
-                              </div>
-                              <div>
-                                <i :class="{ 'green': zhengfan.val == 1, 'red': zhengfan.val != 1 }"></i>
-                                <span>{{zhengfan.val ==1?'运行':'停止'}}</span>
-                              </div>
-                              
-                            </div>
-                            <div class="btns" > 
-                              <div><div class="btn blue" @click="setLiuguankou(2)">启动</div></div>
-                              <div><div class="btn blue" @click="setLiuguankou(1)">启动</div></div>
-                            </div>
-                            <div class="btns" >
-                              <div><div class="btn red" @click="setLiuguankou(3)">停止</div></div>
-                            </div>
-                            <div>
-                             
-                            </div>
-                          </div>
-                        </div>
-                        <div class="posuiji info">
-                            <div class="name" style="width:77px;">破碎机</div>
-                            <div>
-                                <i :class="{ 'green': posuiji.val == 1, 'red': posuiji.val != 1 }"></i>
-                                <span>{{posuiji.val ==1?'运行':'停止'}}</span>
-                            </div>
-                            <div class="btns">
-                              <div><div class="btn blue" @click="setPosuiji(1)">启动</div></div>
-                              <div><div class="btn red" @click="setPosuiji(2)">停止</div></div>
-                            </div>
-                        </div>
-                        <div class="suofenqi info-item">
-                            <div>
-                              <div class="suofenqi-item">
-                                  <div class="name">缩分器</div>
-                                  <div>
-                                      <i :class="{ 'green': suofenqi.val == 1, 'red': suofenqi.val != 1 }"></i>
-                                      <span>{{suofenqi.val ==1?'运行':'停止'}}</span>
-                                  </div>
-                                  
-                              </div>
-                              <div class="suofenqi-item">
-                                <div>缩分间隔时间</div>
-                                
-                              </div>
-                            </div>
-                            <div class="model-time" >
-                              <div>
-                                <span  class="blue" @click="setSuofenqi(1)">启动</span>
-                              </div>
-                              <div><input style="width:20px;" type="text" v-model="suofenshijianjiange.val" @change="setSuofenjiedian" />s</div>
-                            </div>
-                        </div>
-                        <div class="caiyangtou info-item">
-                          <div class="caiyangtou-item">
-                            <div class="name">采样头</div>
-                            <div>
-                              <i :class="{ 'green': caiyangtou.val == 1, 'red': caiyangtou.val != 1 }"></i>
-                              <span>{{caiyangtou.val==1?'运行':'停止'}}</span>
-                            </div>
-                          </div>
-                          <div style="border-top: 1px solid #1890ff;padding-top:4px;">
-                            <div class="btn blue history" @click="openHistoryDialog">查询历史</div>
-                          </div>
-                        </div>
+                    <span>{{ chujigeiliaopidai.val == 1 ? '运行' : '停止' }}</span>
+                  </div> -->
+                </div>
+                <div class="chujigeiliaopidai-item">
+                  <div style="border-right: 1px solid #1890ff;">
+                    <div style="border-bottom:1px solid #1890ff;">溜管口</div>
+                    <div>制样口</div>
+                  </div>
+                  <div>
+                    <div style="border-bottom:1px solid #1890ff;">
+                      <i :class="{ 'green': zhengfan.val == 2, 'red': luoxuanshusongji.val != 2 }"></i>
+                      <span>{{ zhengfan.val == 2 ? '运行' : '停止' }}</span>
+                    </div>
+                    <div>
+                      <i :class="{ 'green': zhengfan.val == 1, 'red': zhengfan.val != 1 }"></i>
+                      <span>{{ zhengfan.val == 1 ? '运行' : '停止' }}</span>
+                    </div>
+
+                  </div>
+                  <div class="btns">
+                    <div>
+                      <div class="btn blue" @click="setZhiYangFangShi(2)">启动</div>
+                    </div>
+                    <div>
+                      <div class="btn blue" @click="setZhiYangFangShi(1)">启动</div>
                     </div>
+                  </div>
+                  <div class="btns">
+                    <div>
+                      <div class="btn red" @click="setZhiYangFangShi(3)">停止</div>
+                    </div>
+                  </div>
+                  <div>
+
+                  </div>
+                </div>
+              </div>
+              <div class="posuiji info">
+                <div class="name">破碎机</div>
+                <div>
+                  <i :class="{ 'green': posuiji.val == 1, 'red': posuiji.val != 1 }"></i>
+                  <span>{{ posuiji.val == 1 ? '运行' : '停止' }}</span>
+                </div>
+                <div class="btns">
+                  <div>
+                    <div class="btn blue" @click="setPosuiji(1)">启动</div>
+                  </div>
+                  <div>
+                    <div class="btn red" @click="setPosuiji(2)">停止</div>
+                  </div>
+                </div>
+              </div>
+              <div class="suofenqi info">
+                <div class="name" style="width:60px;">缩分器</div>
+                <div>
+                  <i :class="{ 'green': suofenqi.val == 1, 'red': suofenqi.val != 1 }"></i>
+                  <span>{{ suofenqi.val == 1 ? '运行' : '停止' }}</span>
+                </div>
+                <div class="btns">
+                  <div>
+                    <div class="btn blue" @click="setSuofenqi(1)">启动</div>
+                  </div>
+                  <div>
+                    <div class="btn red" @click="setSuofenqi(2)">停止</div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="right">
+        <div class="item task">
+          <div class="title">采样系统</div>
+          <div class="caiyang-system-panel">
+            <!-- 第一行：采样模式（滑块样式） -->
+            <div class="panel-row">
+              <div class="row-label">采样模式</div>
+              <div class="slider-buttons-group">
+                <div class="slider-background" :style="{
+                  left: manualAutoMode.val === '1' ? '0%' : manualAutoMode.val === '2' ? '33.33%' : '66.66%',
+                  width: '33.33%'
+                }"></div>
+                <div class="slider-btn" :class="{ 'active': manualAutoMode.val === '1' }"
+                  @click="setManualAutoMode('1')">手动
+                </div>
+                <div class="slider-btn" :class="{ 'active': manualAutoMode.val === '2' }"
+                  @click="setManualAutoMode('2')">自动
+                </div>
+                <div class="slider-btn" :class="{ 'active': manualAutoMode.val === '3' }"
+                  @click="setManualAutoMode('3')">检修
+                </div>
+              </div>
+            </div>
+            <!-- 第二行：制样方式（滑块样式） -->
+            <div class="panel-row">
+              <div class="row-label">制样方式</div>
+              <div class="slider-buttons-group">
+                <div class="slider-background" :style="{
+                  left: sampleMode.val === '1' ? '0%' : '50%',
+                  width: '50%'
+                }"></div>
+                <div class="slider-btn" :class="{ 'active': sampleMode.val === '1' }" @click="setCaiYangJiModel('1')">
+                  制样口
+                </div>
+                <div class="slider-btn" :class="{ 'active': sampleMode.val === '2' }" @click="setCaiYangJiModel('2')">
+                  溜管口
+                </div>
+              </div>
+            </div>
+            <!-- 第三行：手动模式 -->
+            <div class="panel-row">
+              <div class="row-label">手动模式</div>
+              <div class="row-buttons">
+                <div class="system-btn" @click="setcaiyangSystem(1)">启动</div>
+                <div class="system-btn stop-btn" @click="setcaiyangSystem(2)">停止</div>
+              </div>
+            </div>
+            <!-- 第四行：紧急作业 -->
+            <div class="panel-row">
+              <div class="row-label">紧急作业</div>
+              <div class="row-buttons">
+                <div class="system-btn stop-btn" @click="jinjitingzhi(1)">紧急停止</div>
+                <div class="system-btn" @click="guzhangfuwei(1)">故障复位</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item task status-panel">
+          <div class="title">采样系统</div>
+          <div class="status-content">
+            <!-- 输入框区域 -->
+            <div class="input-section">
+              <!-- <div class="input-row">
+                <label>自动采样间隔时间</label>
+                <div class="input-wrapper">
+                  <input type="number" v-model="jiangejiangshijijiishi.val"  @change="setSampleHeadSampleInterval" />
+                  <span class="unit">s</span>
+                </div>
+              </div> -->
+              <div class="input-row">
+                <label>手动采样间隔时间</label>
+                <div class="input-wrapper">
+                  <input type="number" v-model="shodongcaiyangtougeshijian.val" @change="setManualSampleInterval" />
+                  <span class="unit">s</span>
+                </div>
+              </div>
+
+              <div class="input-row">
+                <label>缩分间隔时间</label>
+                <div class="input-wrapper">
+                  <input type="number" v-model="suofenshijianjiange.val" @change="setSampleHeadDivisionInterval" />
+                  <span class="unit">s</span>
                 </div>
+              </div>
+            </div>
+
+            <!-- 状态指示区域 - 2x2网格布局 -->
+            <div class="status-indicators">
+              <div class="status-item">
+                <span class="status-label">制样口运行中</span>
+                <span class="status-dot" :class="{ 'active': zhiyangFangshi.val === '1' }"></span>
+              </div>
+              <div class="status-item">
+                <span class="status-label">输煤皮带运行中</span>
+                <span class="status-dot" :class="{ 'active': chujigeiliaopidai.val == 1 }"></span>
+              </div>
+              <div class="status-item">
+                <span class="status-label">溜管口运行中</span>
+                <span class="status-dot" :class="{ 'active': zhiyangFangshi.val === '2' }"></span>
+              </div>
+              <div class="status-item">
+                <span class="status-label">采样系统故障</span>
+                <span class="status-dot error"></span>
+              </div>
+            </div>
+
+            <!-- 日志导出按钮 -->
+            <div class="log-export-btn-wrapper">
+              <div class="log-export-trigger-btn" @click="openLogExportDialog">
+                <span>日志导出</span>
+              </div>
             </div>
-            
+          </div>
         </div>
-        <div class="right">
-            <div class="item task">
-                <div class="title">采样系统</div>
-                <table>
-                  
-                  <tbody>
-                    <tr>
-                      <td>采样模式</td>
-                      <td>
-                        <select class="se" style="width:145px;" v-model="modelData.val" @change="setCaiYangJiModel(modelData.val)">
-                          <option value="1">采样</option>
-                          <option value="2">溜管</option>
-                        </select>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td colspan="2">
-                        <div class="caiyang-caozuo">
-                          <div class="caozuo-btn fw" @click="setRunningMode(2)">自动</div>
-                          <div class="caozuo-btn fw" @click="setRunningMode(1)">手动</div>
-                          <div class="caozuo-btn fw" @click="setcaiyangSystem(1)">启动</div>
-                          <div class="caozuo-btn tz" @click="setcaiyangSystem(2)">停止</div>
-                          <div class="caozuo-btn tz" @click="jinjitingzhi(1)">紧急停止</div>
-                          <div class="caozuo-btn fw" @click="guzhangfuwei(1)">故障复位</div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
+        <div class="item task fengzhuang-panel">
+          <div class="title">封装系统</div>
+          <div class="fengzhuang-content">
+            <!-- 封装模式 -->
+            <div class="fengzhuang-row">
+              <span class="fz-label">封装模式</span>
+              <div class="slider-buttons-group fz-slider">
+                <div class="slider-background" :style="{
+                  left: fengzhuangjishouzidong.val === 'false' ? '0%' : '50%',
+                  width: '50%'
+                }"></div>
+                <div class="slider-btn" :class="{ 'active': fengzhuangjishouzidong.val === 'false' }">手动</div>
+                <div class="slider-btn" :class="{ 'active': fengzhuangjishouzidong.val === 'true' }">自动</div>
+              </div>
+            </div>
+
+            <!-- 当前重量 -->
+            <div class="fengzhuang-row">
+              <span class="fz-label">当前重量</span>
+              <div class="fz-value-box">
+                <span class="fz-value">{{ ((yangtonzhongliang.val || 0) / 1000).toFixed(2) }}</span>
+                <span class="fz-unit">kg</span>
+              </div>
+            </div>
+
+            <!-- 换桶重量 -->
+            <div class="fengzhuang-row">
+              <span class="fz-label">换桶重量</span>
+              <div class="input-wrapper fz-input">
+                <input type="number" v-model="huanbuckezhongliang"
+                  @change="setHuanBuckeZhongLiang(huanbuckezhongliang)" />
+                <span class="unit">kg</span>
+              </div>
+            </div>
+
+            <!-- 状态指示器 - 2列布局 -->
+            <div class="fengzhuang-status">
+              <div class="fz-status-item">
+                <span class="status-label">缓存器打开到位</span>
+                <span class="status-dot" :class="{ 'active': huancunqidakaidaowei.val === 'true' }"></span>
+              </div>
+
+              <div class="fz-status-item">
+                <span class="status-label">封装系统就绪</span>
+                <span class="status-dot" :class="{ 'active': fengzhuangxitongjiuxu.val === 'true' }"></span>
+              </div>
+              <div class="fz-status-item">
+                <span class="status-label">缓存器关闭到位</span>
+                <span class="status-dot" :class="{ 'active': huancunqiguanbidaowei.val === 'true' }"></span>
+              </div>
+              <div class="fz-status-item">
+                <span class="status-label">封装机补桶中</span>
+                <span class="status-dot" :class="{ 'active': fengzhuangjibuzongzhong.val === 'true' }"></span>
+              </div>
+              <div class="fz-status-item">
+                <span class="status-label">封装系统故障</span>
+                <span class="status-dot error" :class="{ 'active': fengzhuangjijigouguzhang.val === 'true' }"></span>
               </div>
-            <div class="item task">
-                <div class="title">封装机状态</div>
-                <table>
-                  <thead>
-                    <tr>
-                      <th>名称</th>
-                      <th>状态</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>封装模式</td>
-                      <td>{{fengzhuangji.val =='1'?'手动':'自动'}}</td>
-                    </tr>
-                    <tr>
-                      <td>封装机出桶就绪</td>
-                      <td>{{fengzhuangjichutongjiuxu.val==='false'?'无':'状态反馈' }}</td>
-                    </tr>
-                    <tr>
-                      <td>封装机出桶成功</td>
-                      <td>{{fengzhuangjichutong.val==='false'?'无':'状态反馈' }}</td>
-                    </tr>
-                    
-                    <tr>
-                      <td>换桶重量<input v-model="huanbuckezhongliang" type="text" style="width:40px;" @change="setHuanBuckeZhongLiang(huanbuckezhongliang)"/>kg</td>
-                      <td></td>
-                    </tr> 
-                  </tbody>
-                </table>
+
+              <div class="fz-status-item">
+                <span class="status-label">封装机出桶就绪</span>
+                <span class="status-dot" :class="{ 'active': fengzhuangjichutongjiuxu.val === 'true' }"></span>
+              </div>
+              <div class="fz-status-item">
+                <span class="status-label">封装机出桶中</span>
+                <span class="status-dot" :class="{ 'active': fengzhuangjichutongzhong.val === 'true' }"></span>
+              </div>
+
+              <div class="fz-status-item">
+                <span class="status-label">封装系统急停</span>
+                <span class="status-dot error" :class="{ 'active': fengzhuangxitongjiting.val === 'true' }"></span>
               </div>
-             <div class="item task">
-                <div class="title">统计</div>
-                <el-table :data="tongjiData" :max-height="200">
-                  <el-table-column prop="batchNo" label="批次号" />
-                  <el-table-column prop="sampleCode" label="采样码"  />
-                  <el-table-column prop="bucketNo" label="编号" />
-                  <el-table-column prop="sampleWeight" label="桶重" />
-                </el-table>
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog v-model="historyDialogVisible" title="采样头历史记录" width="26%" :before-close="closeHistoryDialog"
+      class="dark-dialog">
+      <el-table :data="historyData" style="width: 100%" max-height="200px">
+        <el-table-column prop="batchNo" label="批次号" width="180" />
+        <el-table-column prop="point.signalName" label="名称" width="120" />
+        <el-table-column prop="newValue" label="状态" width="120">
+          <template #default="scope">
+            {{ scope.row.val }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 日志导出对话框 -->
+    <el-dialog 
+      v-model="showLogExportDialog" 
+      title="日志导出" 
+      width="500px" 
+      class="dark-dialog log-export-dialog"
+    >
+      <div class="log-export-dialog-content">
+        <!-- 日期范围选择 -->
+        <div class="dialog-export-row">
+          <label class="dialog-export-label">日期范围</label>
+          <el-date-picker
+            v-model="logExportDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            size="default"
+            style="width: 100%;"
+          />
+        </div>
+
+        <!-- 日志类型选择 -->
+        <div class="dialog-export-row">
+          <label class="dialog-export-label">日志类型</label>
+          <el-select 
+            v-model="logExportType" 
+            placeholder="请选择日志类型"
+            size="default"
+            style="width: 100%;"
+          >
+            <el-option
+              v-for="item in logTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="showLogExportDialog = false">取消</el-button>
+          <el-button type="primary" @click="exportLogs" :loading="isLoading">导出</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 调试面板 -->
+    <div v-if="debugMode" class="debug-panel">
+      <div class="debug-header">
+        <h3>🔍 调试面板</h3>
+        <div class="debug-controls">
+          <button @click="exportDebugInfo" class="debug-btn">导出信息</button>
+          <button @click="resetPerformanceMetrics" class="debug-btn">重置指标</button>
+          <button @click="clearErrors" class="debug-btn">清除错误</button>
+          <button @click="refreshData" class="debug-btn">刷新数据</button>
+          <button @click="reconnectWebSocket" class="debug-btn">重连WS</button>
+        </div>
+      </div>
+
+      <div class="debug-content">
+        <div class="debug-section">
+          <h4>连接状态</h4>
+          <p>WebSocket: {{ connectionStatus.websocket }}</p>
+          <p>API: {{ connectionStatus.api }}</p>
+          <p>最后更新: {{ connectionStatus.lastUpdate?.toLocaleTimeString() || '无' }}</p>
+        </div>
+
+        <div class="debug-section">
+          <h4>性能指标</h4>
+          <p>API请求: {{ performanceMetrics.apiRequests }}</p>
+          <p>API错误: {{ performanceMetrics.apiErrors }}</p>
+          <p>WS消息: {{ performanceMetrics.websocketMessages }}</p>
+          <p>WS错误: {{ performanceMetrics.websocketErrors }}</p>
+          <p>缓存命中: {{ performanceMetrics.cacheHits }}</p>
+          <p>缓存未命中: {{ performanceMetrics.cacheMisses }}</p>
+          <p>平均响应时间: {{ performanceMetrics.averageResponseTime.toFixed(2) }}ms</p>
+        </div>
+
+        <div class="debug-section">
+          <h4>系统状态</h4>
+          <p>轮询状态: {{ isPolling ? '运行中' : '已停止' }}</p>
+          <p>轮询错误: {{ pollingErrors }}</p>
+          <p>缓存大小: {{ apiCache.size }}</p>
+          <p>错误数量: {{ errorMessages.length }}</p>
+          <p>加载状态: {{ isLoading ? '加载中' : '空闲' }}</p>
+        </div>
+
+        <div class="debug-section" v-if="errorMessages.length > 0">
+          <h4>最近错误</h4>
+          <div class="error-list">
+            <div v-for="(error, index) in errorMessages.slice(0, 5)" :key="index" class="error-item">
+              {{ error }}
+            </div>
+          </div>
         </div>
+      </div>
+    </div>
+
+    <!-- 调试按钮 -->
+    <div class="debug-toggle">
+      <button @click="toggleDebugMode" class="debug-toggle-btn">
+        {{ debugMode ? '关闭调试' : '开启调试' }}
+      </button>
     </div>
-     <el-dialog
-        v-model="historyDialogVisible"
-        title="采样头历史记录"
-        width="26%" 
-        :before-close="closeHistoryDialog"
-        class="dark-dialog"
-      >
-        <el-table :data="historyData" style="width: 100%" max-height="200px">
-          <el-table-column prop="batchNo" label="批次号" width="180" />
-          <el-table-column prop="point.signalName" label="名称" width="120" />
-          <el-table-column prop="newValue" label="状态" width="120" >
-            <template #default="scope">
-              {{scope.row.val}}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-dialog>
-  </div>
+    </div>
+  </el-config-provider>
 </template>
 
 <style>
-  .caiyangtong{
-    width: 510px;
-    margin: 0 auto;
-    background-color: #172f4b;
-    border-radius: 4px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: auto;
-    z-index: 9;
-    height: calc(100% - 690px);
-    top:640px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .caiyangtong-left{
-      width: 30px;
-      height: 50px;
-      font-size: 30px;
-      color: #1f3c5d;
-      font-weight: bold;
-      margin-left:16px;
-    }
-  
-    .caiyangtong-right{
-      width: 30px;
-      height: 50px;
-      font-size: 30px;
-      color: #1f3c5d;
-      font-weight: bold;
-      margin-left:10px;
-    }
-    .caiyangtong-item:hover{
-      cursor: pointer;
-      color: #1890ff;
-     
-    }
-    .center-item{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    .more{
-      background-color: #1890ff;
-      color: #fff;
-      padding: 4px 8px;
-      border-radius: 4px;
-      margin-top: 8px;
-      cursor: pointer;
-    }
-    .caiyangtong-center{
-      width:calc(100% - 80px);
-      display: flex;
-      justify-content: space-around;
-      gap:16px;
-    }
-  }
-  .caiyang-caozuo{
-    display: flex;
-    justify-content: center;
-    >div{
-      padding: 4px 8px;
-      border-radius: 4px;
-      margin: 0 8px;
-    }
-  }
-  .fw{
-    background-color: #1890ff;
-  }
-  .tz{
-    background-color: #ff4d4f;
-  }
-  .top{
-    color: #fff;
-    height: 90px;
-    background-color: #0b2441;
-    text-align: center;
-    line-height: 60px;
-    font-size: 24px;
-    font-weight: bold;
-  }
-  #bg-image{
-    position: absolute;
-    top: 32px;
-    left: 0;
-    width: 100% !important;
-    height: 49px !important;
-  }
-  table{
-    width: 100%;
-    margin: 0 auto;
-    border-collapse: collapse !important;
-  }
-  thead th{
-    text-align: left;
-    font-size: 14px;
-    background-color: #263c57;
-    padding: 8px 16px;
-    border:none !important
-  }
-  td{
-    padding: 8px 16px;
-    font-size: 14px;
-  }
-  tr:nth-child(even) td{
-    background-color:#263c57 ;
-  }
-  tr:hover{
-    background-color: #263c57;
-    cursor: pointer;
-  }
- .belt-sampling{
-    padding: 0 16px;
-    display: flex;
-    justify-self: space-between;
-    gap:8px;
-    background-color: #0b2441;
-    height: calc(100% - 90px);
-    overflow: hidden;
-    color:#fff;
-    font-family: "Helvetica Neue", Helvetica, "PingFang Sc", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
- }
- .btns{
-    border-left:1px solid #1890ff;
-     display: flex;
-     flex-direction: column;
-     align-items: center;
-     justify-content: center;
-     width: 30px;
-     height: 44px;
- }
- .btns>div{
-  flex:1;
-  width:100%;
+/* ===== 全局样式重置和自适应基础 ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  font-size: 16px;
+  /* 基础字体大小 */
+}
+
+/* 根容器 - 占满整个视口 */
+.app-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #0b2441;
+  overflow: hidden;
+}
+
+/* 采样桶信息区域 - 自适应 */
+/* 采样系统面板样式 */
+.caiyang-system-panel {
+  padding: 1vh 1vw;
   display: flex;
   flex-direction: column;
+  gap: 1vh;
+}
+
+.panel-row {
+  display: flex;
   align-items: center;
-  justify-content: center;
- }
- .btns>div:first-child{
-  border-bottom:1px solid #1890ff;
- }
-.btn{
-  border-radius: 4px;
+  gap: 1vw;
+  min-height: 36px;
+}
+
+.row-label {
+  font-size: clamp(11px, 1vw, 14px);
   color: #fff;
-  font-size: 12px;
+  min-width: 70px;
+  white-space: nowrap;
+}
+
+/* 滑块按钮组容器 */
+.slider-buttons-group {
+  flex: 1;
+  display: flex;
+  position: relative;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 2px;
+  overflow: hidden;
+}
+
+/* 滑块背景 - 平滑滑动效果 */
+.slider-background {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
+  border-radius: 4px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4);
+}
+
+/* 滑块按钮 */
+.slider-btn {
+  flex: 1;
+  padding: 0.5vh 1vw;
   cursor: pointer;
-  width: 26px;
-  margin:0 auto;
-  padding:1px;
+  font-size: clamp(10px, 0.9vw, 13px);
+  text-align: center;
+  min-width: 50px;
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 2;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+}
+
+.slider-btn:hover {
+  color: rgba(255, 255, 255, 0.9);
 }
-.flex{
+
+.slider-btn.active {
+  color: #fff;
+  font-weight: 500;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* 普通按钮组 */
+.row-buttons {
+  flex: 1;
   display: flex;
-  width: 100px;
+  gap: 0.5vw;
+  flex-wrap: wrap;
 }
 
-.name{
-  width:60px;
+.system-btn {
+  background-color: #1890ff;
+  color: #fff;
+  padding: 0.5vh 1vw;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: clamp(10px, 0.9vw, 13px);
   text-align: center;
+  min-width: 50px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.system-btn:hover {
+  background-color: #40a9ff;
+  transform: translateY(-1px);
+}
+
+.system-btn.active {
+  background-color: #52c41a;
+  border-color: #52c41a;
 }
-.left{
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 100%;
-        flex:1;
-}
-.title{
-        font-weight: bold;
-        font-size:14px;
-        color:#fff;
-        padding:16px;
-        text-align: center;
-}
-.model-time{
-  border-left:1px solid #1890ff;
+
+.system-btn.stop-btn {
+  background-color: #ff4d4f;
+}
+
+.system-btn.stop-btn:hover {
+  background-color: #ff7875;
+}
+
+/* 状态面板样式 */
+.status-panel .status-content {
+  padding: 1vh 1vw;
   display: flex;
-  width:36px;
   flex-direction: column;
+  gap: 2vh;
 }
-.model-time>div{
-  line-height: 26px;
-  text-align: center;
+
+/* 输入框区域 */
+.input-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5vh;
 }
-.model-time>div:nth-child(1){
-  border-bottom:1px solid #1890ff;
+
+.input-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1vw;
 }
-.se{
-    background: none;
-    color: #fff;
-    border: 1px solid #1830ff;
+
+.input-row label {
+  font-size: clamp(11px, 1vw, 14px);
+  color: #fff;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
-/* 设置option的样式 */
-.se option {
-    background-color: rgba(11, 36, 65, 0.95) !important;
-    color: white !important;
-    border: none !important;
-    padding: 8px !important;
-}
-            
-            /* 设置选中的option样式 */
-            .se option:checked {
-              background-color: rgba(24, 144, 255, 0.8) !important;
-            }
-            
-            /* 悬停时的样式 */
-            .se option:hover {
-              background-color: rgba(24, 144, 255, 0.6) !important;
-            }
-            
-      .item{
-        background-color: #172F4B;
-        margin-bottom:16px;
-        padding: 0 16px;
-        border-radius: 4px;
-      }
-     
-        .yunxingrizhi{
-            flex:1;
-        }
-        .caozuojilu{
-             flex:1;
-        }
-           
-        .baojingxinxi{
-            flex:1;
-        }
-         .device-label{
-        font-size: 14px;
-      }
-      .state-box{
-        display: flex;
-        align-items: center;
-      }
-      .state{
-            display: inline-block;
-            height: 10px;
-            width: 10px;
-            border-radius: 50%;
-            margin-right: 2px;
-      }
-      .state-text{
-        font-size: 12px;
-      }
-      .state-box{
-        display: flex;
-         gap: 18px;
-      }
-      .state-item{
-        display: flex;
-        align-items: center;
-      }
-      .green{
-        background-color: #53c41a;
-      }
-      .yellow{
-        background-color: #ffd500;
-      }
-      .red{
-        background-color: #ff4d4f;
-      }
-      .blue{
-        background-color: #1890ff;
-      }
-      .history{
-        width:60px;
-        margin: 0 auto;
-        text-align: center;
-        margin-bottom:4px;
-      }
-     
-        .center{
-        min-width: 936px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        flex:2;
-        }
-        .devices{
-            flex:3;
-            position: relative;
-        }
-         .center-top{
-                height: 24px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-top: 12px;
-                gap:24px;
-            }
-             .device-content{
-                font-size: 12px;
-                position: absolute;
-                left: 0;
-                top: 42px;
-                bottom: 0;
-                right: 0;
-                margin: auto;
-             }
-             .caiyang{
-              margin: auto;
-              display: block;
-              z-index: 2;
-              position: absolute;
-              z-index: 2;
-              left: 0;
-              right: 0;
-              top: 35px;
-             }
-                .di{
-                    position: absolute;
-                    top: 436px;
-                    z-index:1;
-                    width:98%;
-                    margin: 0 auto;
-                }
-                 .bottles{
-                    position: absolute;
-                    top: 580px;
-                    display: flex;
-                    width: 98%;
-                    margin: 0 auto;
-                    justify-content: space-between;
-                    }
-                    .bottles>div{
-                      text-align: center;
-                        flex:1;
-                    }
-                      .bottle{
-                        width: 30px;
-                    }
-                .tong{
-                  position: absolute;
-                  top: 660px;
-                  width: 100%;
-                  margin: 0 auto;
-                  padding-bottom: 16px;
-                  height: calc(100% - 690px);
-                  width:100%;
-                   background-color: #172f4b;
-                }
-                .tong-list{
-                  width: 98% !important;
-                  margin:0 auto;
-                  display: flex;
-                  flex-direction: column;
-                  gap:8px;
-                  margin-top:16px;
-                }
-                .tong-item{
-                  display: flex;
-                  height: 38px;
-                  line-height: 38px;
-                  gap:8px;
-                  /* background-color: #263c57; */
-                  cursor: pointer;
-                }
-                .tong-item:nth-child(odd){
-                  background-color: #263c57;
-                }
-                .tong-item:hover{
-                  background-color: #263c57;
-                }
-                .tong-item span{
-                  flex:1;
-                  padding-left:16px;
-                }
-                .name{
-                        font-size:14px;
-                        display: inline-block;
-                        vertical-align: middle;
-                    }
-                    .info{
-                        display: flex;
-                        border-radius: 4px;
-                        border: 1px solid #1890ff;
-                        /* width:fit-content; */
-                       
-                        position: absolute;
-                        align-items: center;
-                        background-color: rgba(255, 255, 255, 0.05);
-                        z-index:999;
-                    }
-                    .info-item{
-                        border-radius: 4px;
-                        border: 1px solid #1890ff;
-                        width:fit-content;
-                        padding: 8px 0px;
-                        position: absolute;
-                        background-color: rgba(255, 255, 255, 0.05);
-                        cursor: pointer;
-                        z-index:9;
-                    }
-                    .more>div{
-                       border-bottom:none !important;
-                            border-left:none !important;
-                            border-right: none !important;
-                            line-height: 13px;
-                            padding-top: 18px !important;
-                    }
-                    .info-detail{
-                      display: flex;
-                      text-align: center;
-                      height: calc(100% - 26px);
-                    }
-                    .info-detail>div{
-                      flex:1;
-                    }
-                    .tishengji{
-                        left: 24px;
-                        /* top: 230px; */
-                        top:364px;
-                    }
-                    .tishengji::before{
-                      display: block;
-                      content: '';
-                      width: 1px;
-                      height: 140px;
-                      background-color: #1890ff;
-                      position: absolute;
-                      right: -32px;
-                      top: -110px;
-                      transform: rotate(26deg);
-                    }
-                    .tishengji::after{
-                      position: absolute;
-                      display: block;
-                      content: '';
-                      right: -67px;
-                      top: -108px;
-                      width: 8px;
-                      height: 8px;
-                      background-color: #1890ff;
-                      border-radius: 50%;
-                    }
-                    .cijigeiliaopidai{
-                        left: 24px;
-                        top: 254px;
-                    }
-                    .cijigeiliaopidai::before{
-                        display: block;
-                        content: '';
-                        width: 1px;
-                        height: 203px;
-                        background-color: #1890ff;
-                        position: absolute;
-                        right: -92px;
-                        top: -37px;
-                        transform: rotate(115deg);
-                    }
-                    .cijigeiliaopidai::after{
-                        position: absolute;
-                        display: block;
-                        content: '';
-                        right: -190px;
-                        top: 105px;
-                        width: 8px;
-                        height: 8px;
-                        background-color: #1890ff;
-                        border-radius: 50%;
-                    }
-                    .luoxuanshusongji{
-                        left: 24px;
-                        /* top: 290px; */
-                        top:309px;
-                    }
-                    .luoxuanshusongji::before{
-                        display: block;
-                        content: '';
-                        width: 1px;
-                        height: 184px;
-                        background-color: #1890ff;
-                        position: absolute;
-                        right: -73px;
-                        top: -11px;
-                        transform: rotate(129deg);
-                    }
-                    .luoxuanshusongji::after{
-                      position: absolute;
-                      display: block;
-                      content: '';
-                      right: -150px;
-                      top: 136px;
-                      width: 8px;
-                      height: 8px;
-                      background-color: #1890ff;
-                      border-radius: 50%;
-                    }
-                    .chujigeiliaopidai{
-                        /* left:284px;
-                        top: 44px; */
-                        left:23px;
-                        top:63px;
-                        position: absolute;
-                        border-radius: 4px;
-                        border: 1px solid #1890ff;
-                        width:fit-content;
-                        /* padding: 8px 4px; */
-                        cursor: pointer;
-                        position: absolute;
-                        background-color: rgba(255, 255, 255, 0.05);
-                        z-index:9;
-                    }
-                    .chujigeiliaopidai::before{
-                        display: block;
-                        content: '';
-                        width: 1px;
-                        height: 414px;
-                        background-color: #1890ff;
-                        position: absolute;
-                        left: 340px;
-                        top: -131px;
-                        transform: rotate(99deg);
-                    }
-                    .chujigeiliaopidai::after{
-                        position: absolute;
-                        display: block;
-                        content: '';
-                        left: 542px;
-                        top: 104px;
-                        width: 8px;
-                        height: 8px;
-                        background-color: #1890ff;
-                        border-radius: 50%;
-                    }
-                    .chujigeiliaopidai-item{
-                      display: flex;
-                      justify-content: center;
-                      /* gap:8px; */
-                    }
-                    .chujigeiliaopidai-item:last-child>div{
-                      /* border-right: 1px solid #1890ff; */
-                      display: flex;
-                      flex-direction: column;
-                      align-items: center;
-                      justify-content: center;
-                      
-                    }
-                    .posuiji{
-                        left:22px;
-                        top: 137px;
-                    }
-                    .posuiji::before{
-                        display: block;
-                        content: '';
-                        width: 1px;
-                        height: 368px;
-                        background-color: #1890ff;
-                        position: absolute;
-                        right: -180px;
-                        top: -120px;
-                        transform: rotate(103deg);
-                    }
-                    .posuiji::after{
-                        position: absolute;
-                        display: block;
-                        content: '';
-                        right: -364px;
-                        top: 102px;
-                        width: 8px;
-                        height: 8px;
-                        background-color: #1890ff;
-                        border-radius: 50%;
-                    }
-                    .suofenqi{
-                        /* left:284px;
-                        top: 217px; */
-                        left: 24px;
-                        top: 191px;
-                        padding:0;
-                        display: flex;
-                    }
-                    .suofenqi::before{
-                        display: block;
-                        content: '';
-                        width: 1px;
-                        height: 243px;
-                        background-color: #1890ff;
-                        position: absolute;
-                        right: -114px;
-                        top: -50px;
-                        transform: rotate(112deg);
-                    }
-                    .suofenqi::after{
-                        position: absolute;
-                        display: block;
-                        content: '';
-                        right: -231px;
-                        top: 114px;
-                        width: 8px;
-                        height: 8px;
-                        background-color: #1890ff;
-                        border-radius: 50%;
-                    }
-                    .suofenqi-item{
-                        display: flex;
-                        justify-content: center;
-                        align-items: anchor-center;
-                        gap:8px;
-                        height: 26px;
-                      
-                    }
-                    .suofenqi-item:first-child{
-                        border-bottom:1px solid #1890ff;
-                    }
-                    .info-detail>div{
-                      display: flex;
-                      flex-direction: column;
-                    }
-                    .info-detail>div>div{
-                      flex:1;
-                      line-height: 20px;
-                      border:1px solid #1890ff;
-                    }
-                    .caiyangtou{
-                        /* right: 145px;
-                        top: 58px;
-                        padding:0; */
-                        left: 23px;
-                        top: 0px;
-                        padding: 0;
-                    }
-                    .caiyangtou::before{
-                        display: block;
-                        content: '';
-                        width: 1px;
-                        height: 478px;
-                        background-color: #1890ff;
-                        position: absolute;
-                        right: -239px;
-                        top: -183px;
-                        transform: rotate(457deg);
-                    }
-                    .caiyangtou::after{
-                        position: absolute;
-                        display: block;
-                        content: '';
-                        left: 579px;
-                        top: 82px;
-                        width: 8px;
-                        height: 8px;
-                        background-color: #1890ff;
-                        border-radius: 50%;
-                    }
-                    .caiyangtou-item{
-                        display: flex;
-                        justify-content: center;
-                        align-items: anchor-center;
-                        gap: 8px;
-                        height: 26px;
-                    }
-                    i{
-                        display: inline-block;
-                        width:10px;
-                        height:10px;
-                        border-radius: 50%;
-                        background-color: #52c41a;
-                        margin-right:2px;
-                        vertical-align: middle;
-                    }
-                    .oprate{
-                      display: flex;
-                      justify-content: space-around;
-         
-                  }
-                  .oprate>div{
-                        display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                            gap:8px;
-                  }
-                  .xuhao{
-                        flex:0.6;
-                  }
-                  .right{
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-                    flex:1;
-                  }
-                  .huayanjieguo{
-                    flex:3;
-                  }
-                  .charts{
-                    height: calc(100% - 114px);
-                    min-height: 560px;
-                    overflow-y: auto;
-                }
-                 .chart-item{
-                    height: 180px;
-                    width:100%;
-                }
-            .zhibiao-oprate{
-                height: 44px;
-                margin-top: 8px;
-            }
-            .task{
-              flex:1;
-              padding:8px;
-            }
-            /* 移除el-table背景颜色的样式 */
-            .el-table {
-              background-color: transparent !important;
-              color:#fff;
-            }
-            
-            .el-table__header-wrapper,
-            .el-table__body-wrapper {
-              background-color: transparent !important;
-             
-            }
-            
-            .el-table th,
-            .el-table tr,
-            .el-table td {
-              background-color: transparent !important;
-              border-color: rgba(255, 255, 255, 0.1) !important;
-               color:#fff;
-            }
-            
-            .el-table--enable-row-hover .el-table__body tr:hover > td {
-              background-color: rgba(255, 255, 255, 0.05) !important;
-            }
-            .el-table__cell{
-              border:none !important;
-            }
-            .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
-              border:none !important;
-            }
-            .el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
-              display: none !important;
-            }
-            .el-table thead{
-              background-color: rgba(255, 255, 255, 0.05) !important;
-            }
-            .el-table__row:nth-child(even) td{
-              background-color: rgba(255, 255, 255, 0.05) !important;
-              /* background-color: rgba(255, 255, 255, 0.05) !important; */
-            }
-            /* 在样式部分添加 */
-            .el-table__body-wrapper::-webkit-scrollbar {
-              width: 6px; /* 滚动条宽度 */
-            }
-
-            .el-table__body-wrapper::-webkit-scrollbar-track {
-              background: #f1f1f1; /* 滚动条轨道背景色 */
-            }
-
-            .el-table__body-wrapper::-webkit-scrollbar-thumb {
-              background: #888; /* 滚动条滑块颜色 */
-              border-radius: 3px; /* 滚动条滑块圆角 */
-            }
-
-            .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
-              background: #555; /* 鼠标悬停时的滚动条滑块颜色 */
-            }
-           /* 深色主题对话框样式 */
-  .dark-dialog {
-    background-color: #172F4B !important; /* 与主页面卡片背景色一致 */
-    border: 1px solid #263c57;
-    color: #ffffff;
-  }
-  
-  .dark-dialog .el-dialog__header {
-    background-color: #172F4B !important;
-    border-bottom: 1px solid #263c57;
-    padding: 15px 20px;
-  }
-  
-  .dark-dialog .el-dialog__title {
-    color: #ffffff !important;
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.3vw;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  padding: 0.3vh 0.5vw;
+  min-width: 80px;
+}
+
+.input-wrapper input {
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: clamp(11px, 1vw, 14px);
+  width: 60px;
+  outline: none;
+  text-align: right;
+}
+
+.input-wrapper input::-webkit-inner-spin-button,
+.input-wrapper input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input-wrapper .unit {
+  font-size: clamp(10px, 0.9vw, 12px);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* 状态指示器区域 - 2x2网格布局 */
+.status-indicators {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1vh 1vw;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5vh 0.5vw;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+.status-label {
+  font-size: clamp(11px, 1vw, 14px);
+  color: #fff;
+}
+
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #666;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2);
+}
+
+.status-dot.active {
+  background-color: #52c41a;
+  box-shadow: 0 0 8px rgba(82, 196, 26, 0.6), 0 0 0 2px rgba(82, 196, 26, 0.2);
+}
+
+.status-dot.error {
+  background-color: #ff4d4f;
+  box-shadow: 0 0 8px rgba(255, 77, 79, 0.6), 0 0 0 2px rgba(255, 77, 79, 0.2);
+}
+
+/* 日志导出按钮样式 */
+.log-export-btn-wrapper { 
+  padding-top: 1vh; 
+}
+
+.log-export-trigger-btn {
+  width: 100%;
+  padding: 1vh 0;
+  background: linear-gradient(135deg, #1890ff 0%, #0d5cb6 100%); 
+  border-radius: 6px;
+  color: #fff;
+  font-size: clamp(12px, 1vw, 14px);
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+}
+
+.log-export-trigger-btn:hover {
+  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+  border-color: rgba(24, 144, 255, 0.8);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+  transform: translateY(-2px);
+}
+
+.log-export-trigger-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
+}
+
+/* 日志导出对话框样式 */
+.log-export-dialog-content {
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dialog-export-row {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dialog-export-label {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+/* 对话框内的 Element Plus 组件样式覆盖 */
+/* 日期选择器整体 */
+.log-export-dialog :deep(.el-date-editor) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: none !important;
+}
+
+.log-export-dialog :deep(.el-date-editor:hover) {
+  border-color: rgba(24, 144, 255, 0.6) !important;
+}
+
+.log-export-dialog :deep(.el-date-editor.is-active) {
+  border-color: rgba(24, 144, 255, 0.8) !important;
+  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3) !important;
+}
+
+/* 输入框包装器 */
+.log-export-dialog :deep(.el-input__wrapper) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: none !important;
+  transition: all 0.3s ease;
+}
+
+.log-export-dialog :deep(.el-input__wrapper:hover),
+.log-export-dialog :deep(.el-input__wrapper.is-focus) {
+  border-color: rgba(24, 144, 255, 0.8) !important;
+  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3) !important;
+}
+
+/* 输入框文本 */
+.log-export-dialog :deep(.el-input__inner) {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
+.log-export-dialog :deep(.el-input__inner::placeholder) {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* 日期范围分隔符 */
+.log-export-dialog :deep(.el-range-separator) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+/* 日期范围输入框 */
+.log-export-dialog :deep(.el-range-input) {
+  background-color: transparent !important;
+  color: #fff !important;
+}
+
+.log-export-dialog :deep(.el-range-input::placeholder) {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* 下拉选择器 */
+.log-export-dialog :deep(.el-select__wrapper) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: none !important;
+}
+
+.log-export-dialog :deep(.el-select__wrapper:hover),
+.log-export-dialog :deep(.el-select__wrapper.is-focused) {
+  border-color: rgba(24, 144, 255, 0.8) !important;
+  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3) !important;
+}
+
+.log-export-dialog :deep(.el-select__placeholder) {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.log-export-dialog :deep(.el-select__selected-item) {
+  color: #fff !important;
+}
+
+/* 图标颜色 */
+.log-export-dialog :deep(.el-icon) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.log-export-dialog :deep(.el-input__prefix-inner .el-icon),
+.log-export-dialog :deep(.el-input__suffix-inner .el-icon) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+/* 日期选择器图标 */
+.log-export-dialog :deep(.el-input__prefix),
+.log-export-dialog :deep(.el-input__suffix) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.log-export-dialog :deep(.el-date-editor .el-icon),
+.log-export-dialog :deep(.el-select .el-icon) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+/* 下拉箭头图标 */
+.log-export-dialog :deep(.el-select__caret) {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.log-export-dialog :deep(.el-select__caret:hover) {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* 对话框按钮样式 */
+.log-export-dialog :deep(.el-button) {
+  border-radius: 4px;
+}
+
+.log-export-dialog :deep(.el-button--default) {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  color: #fff;
+}
+
+.log-export-dialog :deep(.el-button--default:hover) {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.log-export-dialog :deep(.el-button--primary) {
+  background: linear-gradient(135deg, #1890ff 0%, #0d5cb6 100%);
+  border-color: rgba(24, 144, 255, 0.5);
+}
+
+.log-export-dialog :deep(.el-button--primary:hover) {
+  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+  border-color: rgba(24, 144, 255, 0.8);
+}
+
+/* 封装系统面板样式 */
+.fengzhuang-panel .fengzhuang-content {
+  padding: 1vh 1vw;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5vh;
+}
+
+.fengzhuang-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1vw;
+}
+
+.fz-label {
+  font-size: clamp(11px, 1vw, 14px);
+  color: #fff;
+  white-space: nowrap;
+  min-width: 70px;
+}
+
+.fz-slider {
+  flex: 1;
+  max-width: 180px;
+}
+
+.fz-value-box {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  padding: 0.3vh 0.8vw;
+  display: flex;
+  align-items: center;
+  gap: 0.3vw;
+  min-width: 100px;
+}
+
+.fz-value {
+  font-size: clamp(12px, 1.1vw, 16px);
+  color: #fff;
+  font-weight: 500;
+  flex: 1;
+  text-align: right;
+}
+
+.fz-unit {
+  font-size: clamp(10px, 0.9vw, 12px);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.fz-input {
+  flex: 1;
+  max-width: 120px;
+}
+
+/* 封装系统状态指示器 */
+.fengzhuang-status {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.8vh 1vw;
+  margin-top: 0.5vh;
+}
+
+.fz-status-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4vh 0.5vw;
+  background-color: rgba(255, 255, 255, 0.03);
+  border-radius: 3px;
+}
+
+.fz-status-item .status-label {
+  font-size: clamp(9px, 0.85vw, 11px);
+}
+
+.fz-status-item .status-dot {
+  width: 10px;
+  height: 10px;
+}
+
+.caiyangtong {
+  width: min(90%, 510px);
+  margin: 0 auto;
+  background-color: #172f4b;
+  border-radius: 4px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 2vh;
+  z-index: 9;
+  min-height: 80px;
+  max-height: 15vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1vh 0;
+
+  .caiyangtong-left {
+    width: 30px;
+    height: 50px;
+    font-size: 30px;
+    color: #1f3c5d;
+    font-weight: bold;
+    margin-left: 16px;
+  }
+
+  .caiyangtong-right {
+    width: 30px;
+    height: 50px;
+    font-size: 30px;
+    color: #1f3c5d;
+    font-weight: bold;
+    margin-left: 10px;
+  }
+
+  .caiyangtong-item:hover {
+    cursor: pointer;
+    color: #1890ff;
+
+  }
+
+  .center-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .more {
+    background-color: #1890ff;
+    color: #fff;
+    padding: 4px 8px;
+    border-radius: 4px;
+    margin-top: 8px;
+    cursor: pointer;
+  }
+
+  .caiyangtong-center {
+    width: calc(100% - 80px);
+    display: flex;
+    justify-content: space-around;
+    gap: 16px;
+  }
+}
+
+.caiyang-caozuo {
+  display: flex;
+  justify-content: center;
+
+  >div {
+    padding: 4px 8px;
+    border-radius: 4px;
+    margin: 0 8px;
+  }
+}
+
+.fw {
+  background-color: #1890ff;
+}
+
+.tz {
+  background-color: #ff4d4f;
+}
+
+/* 顶部标题栏 - 自适应高度 */
+.top {
+  color: #fff;
+  height: 8vh;
+  /* 使用视口高度 */
+  min-height: 60px;
+  max-height: 90px;
+  background-color: #0b2441;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: clamp(18px, 2vw, 24px);
+  /* 响应式字体 */
+  font-weight: bold;
+  position: relative;
+  flex-shrink: 0;
+}
+
+#bg-image {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  width: 100%;
+  height: 60%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+.top span {
+  position: relative;
+  z-index: 1;
+}
+
+/* 表格样式 - 自适应 */
+table {
+  width: 100%;
+  margin: 0 auto;
+  border-collapse: collapse !important;
+}
+
+thead th {
+  text-align: left;
+  font-size: clamp(11px, 1vw, 14px);
+  background-color: #263c57;
+  padding: 0.5vh 1vw;
+  border: none !important;
+  white-space: nowrap;
+}
+
+td {
+  padding: 0.5vh 1vw;
+  font-size: clamp(11px, 1vw, 14px);
+}
+
+tr:nth-child(even) td {
+  background-color: #263c57;
+}
+
+tr:hover {
+  background-color: #263c57;
+  cursor: pointer;
+}
+
+/* 主体区域 - 响应式三栏布局 */
+.belt-sampling {
+  flex: 1;
+  padding: 1vh 1vw;
+  display: grid;
+  grid-template-columns: minmax(280px, 1fr) minmax(600px, 2fr) minmax(280px, 1fr);
+  gap: 1vw;
+  background-color: #0b2441;
+  overflow: hidden;
+  color: #fff;
+  font-family: "Helvetica Neue", Helvetica, "PingFang Sc", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
+}
+
+.btns {
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 20%;
+  height: 44px;
+  background: rgba(24, 144, 255, 0.02);
+}
+
+.btns>div {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+
+/* 按钮样式 - 优化版 */
+.btn {
+  border-radius: 4px;
+  color: #fff;
+  font-size: clamp(10px, 0.8vw, 12px);
+  cursor: pointer;
+  width: clamp(22px, 2vw, 30px);
+  margin: 0 auto;
+  padding: 0.2vh 0.2vw;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+  border: none;
+  font-weight: 500;
+}
+
+.btn:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+.btn:active {
+  transform: scale(0.95);
+}
+
+.flex {
+  display: flex;
+  width: 100px;
+}
+
+.name {
+  width: 60px;
+  text-align: center;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* 左侧栏 - 自适应布局 */
+.left {
+  display: flex;
+  flex-direction: column;
+  gap: 1vh;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 标题样式 */
+.title {
+  font-weight: bold;
+  font-size: clamp(12px, 1.2vw, 16px);
+  color: #fff;
+  padding: 1vh 1vw;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.model-time {
+  border-left: 1px solid #1890ff;
+  display: flex;
+  width: 36px;
+  flex-direction: column;
+}
+
+.model-time>div {
+  line-height: 26px;
+  text-align: center;
+}
+
+.model-time>div:nth-child(1) {
+  border-bottom: 1px solid #1890ff;
+}
+
+.se {
+  background: none;
+  color: #fff;
+  border: 1px solid #1830ff;
+}
+
+/* 设置option的样式 */
+.se option {
+  background-color: rgba(11, 36, 65, 0.95) !important;
+  color: white !important;
+  border: none !important;
+  padding: 8px !important;
+}
+
+/* 设置选中的option样式 */
+.se option:checked {
+  background-color: rgba(24, 144, 255, 0.8) !important;
+}
+
+/* 悬停时的样式 */
+.se option:hover {
+  background-color: rgba(24, 144, 255, 0.6) !important;
+}
+
+/* 卡片项 - 自适应 */
+.item {
+  background-color: #172F4B;
+  padding: 0 1vw;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.yunxingrizhi {
+  flex: 1;
+}
+
+.caozuojilu {
+  flex: 1;
+}
+
+.baojingxinxi {
+  flex: 1;
+}
+
+.device-label {
+  font-size: 14px;
+}
+
+.state-box {
+  display: flex;
+  align-items: center;
+}
+
+.state {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  margin-right: 2px;
+}
+
+.state-text {
+  font-size: 12px;
+}
+
+.state-box {
+  display: flex;
+  gap: 18px;
+}
+
+.state-item {
+  display: flex;
+  align-items: center;
+}
+
+.green {
+  background-color: #53c41a;
+}
+
+.yellow {
+  background-color: #ffd500;
+}
+
+.red {
+  background-color: #ff4d4f;
+}
+
+.blue {
+  background-color: #1890ff;
+}
+
+.history {
+  width: 60px;
+  margin: 0 auto;
+  text-align: center;
+  margin-bottom: 4px;
+}
+
+/* 中间区域 - 自适应 */
+.center {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.devices {
+  flex: 1;
+  position: relative;
+  min-height: 0;
+}
+
+.center-top {
+  height: 8vh;
+  min-height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 1vh;
+  gap: 2vw;
+  flex-shrink: 0;
+  padding: 0 1vw;
+}
+
+.center-top>img {
+  margin-top: 0.5vh;
+}
+
+/* 右上角状态信息面板 */
+.status-info-panel {
+  background-color: rgba(11, 36, 65, 0.8);
+  border: 1px solid rgba(24, 144, 255, 0.3);
+  border-radius: 6px;
+  padding: 0.8vh 1vw;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5vh;
+  min-width: 200px;
+}
+
+.status-info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1vw;
+}
+
+.info-label {
+  font-size: clamp(10px, 0.9vw, 12px);
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+}
+
+.info-value {
+  font-size: clamp(11px, 1vw, 14px);
+  color: #fff;
+  font-weight: 500;
+  text-align: right;
+}
+
+.info-unit {
+  font-size: clamp(10px, 0.85vw, 11px);
+  color: rgba(255, 255, 255, 0.6);
+  margin-left: 0.2vw;
+}
+
+.device-content {
+  font-size: clamp(10px, 1vw, 12px);
+  position: absolute;
+  left: 0;
+  top: 5vh;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.caiyang {
+  width: 90%;
+  max-width: 95%;
+  height: auto;
+  margin: 0 auto;
+  display: block;
+  z-index: 2;
+  object-fit: contain;
+}
+
+.infos {
+  position: absolute;
+  left: 2%;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1vh;
+  z-index: 10;
+  max-height: 90%;
+  overflow-y: auto;
+}
+
+.di {
+  position: absolute;
+  top: 436px;
+  z-index: 1;
+  width: 98%;
+  margin: 0 auto;
+}
+
+.bottles {
+  position: absolute;
+  top: 580px;
+  display: flex;
+  width: 98%;
+  margin: 0 auto;
+  justify-content: space-between;
+}
+
+.bottles>div {
+  text-align: center;
+  flex: 1;
+}
+
+.bottle {
+  width: 30px;
+}
+
+.tong {
+  position: absolute;
+  top: 660px;
+  width: 100%;
+  margin: 0 auto;
+  padding-bottom: 16px;
+  height: calc(100% - 690px);
+  width: 100%;
+  background-color: #172f4b;
+}
+
+.tong-list {
+  width: 98% !important;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.tong-item {
+  display: flex;
+  height: 38px;
+  line-height: 38px;
+  gap: 8px;
+  /* background-color: #263c57; */
+  cursor: pointer;
+}
+
+.tong-item:nth-child(odd) {
+  background-color: #263c57;
+}
+
+.tong-item:hover {
+  background-color: #263c57;
+}
+
+.tong-item span {
+  flex: 1;
+  padding-left: 16px;
+}
+
+.name {
+  font-size: 14px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* 设备状态框 - 优化版 */
+.info {
+  display: flex;
+  border-radius: 6px;
+  border: 1px solid rgba(24, 144, 255, 0.4);
+  width: clamp(130px, 12vw, 170px);
+  height: clamp(40px, 4vh, 50px);
+  align-items: center;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%);
+  font-size: clamp(10px, 0.9vw, 12px);
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.info:hover {
+  border-color: rgba(24, 144, 255, 0.6);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+.info-item {
+  border-radius: 6px;
+  border: 1px solid rgba(24, 144, 255, 0.4);
+  width: clamp(130px, 12vw, 170px);
+  padding: 0.5vh 0;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%);
+  cursor: pointer;
+  font-size: clamp(10px, 0.9vw, 12px);
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.info-item:hover {
+  border-color: rgba(24, 144, 255, 0.6);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+.more>div {
+  border-bottom: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  line-height: 13px;
+  padding-top: 18px !important;
+}
+
+.info-detail {
+  display: flex;
+  text-align: center;
+  height: calc(100% - 26px);
+}
+
+.info-detail>div {
+  flex: 1;
+}
+
+.chujigeiliaopidai {
+  border-radius: 6px;
+  border: 1px solid rgba(24, 144, 255, 0.4);
+  width: clamp(130px, 12vw, 170px);
+  cursor: pointer;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(24, 144, 255, 0.03) 100%);
+  font-size: clamp(10px, 0.9vw, 12px);
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  height: auto;
+  min-height: clamp(80px, 8vh, 100px);
+}
+
+.chujigeiliaopidai:hover {
+  border-color: rgba(24, 144, 255, 0.6);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+.chujigeiliaopidai-item {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.chujigeiliaopidai-item:first-child {
+  padding: 0.5vh 0;
+}
+
+.chujigeiliaopidai-item>div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 移除内部分隔线 */
+.chujigeiliaopidai-item [style*="border-bottom"] {
+  border-bottom: none !important;
+}
+
+.chujigeiliaopidai-item [style*="border-right"] {
+  border-right: none !important;
+  padding: 0 0.5vw;
+}
+
+.suofenqi {
+  padding: 0;
+  display: flex;
+}
+
+.suofenqi-item {
+  display: flex;
+  justify-content: center;
+  align-items: anchor-center;
+  gap: 8px;
+  height: 26px;
+
+}
+
+.suofenqi-item:first-child {
+  border-bottom: 1px solid #1890ff;
+}
+
+.info-detail>div {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-detail>div>div {
+  flex: 1;
+  line-height: 20px;
+  border: 1px solid #1890ff;
+}
+
+.caiyangtou {
+  padding: 0;
+  overflow: hidden;
+}
+
+.caiyangtou-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  height: 26px;
+  padding: 0 0.5vw;
+}
+
+.caiyangtou [style*="border-top"] {
+  border-top: none !important;
+}
+
+/* 采样头控制按钮容器 */
+.caiyangtou-controls {
+  display: flex;
+  justify-content: center;
+  padding: 0.3vh 0;
+}
+
+.caiyangtou-controls .btns {
+  flex-direction: row;
+  width: auto;
+  height: auto;
+  background: transparent;
+  gap: 0.5vw;
+  border-left: none;
+}
+
+.caiyangtou-controls .btns>div {
+  flex: none;
+  width: auto;
+  border-bottom: none;
+}
+
+.caiyangtou-controls .btn {
+  width: auto;
+  padding: 0.3vh 0.8vw;
+  min-width: 40px;
+}
+
+/* 状态指示灯样式 - 限制在特定容器内 */
+.infos i,
+.info i,
+.info-item i,
+.chujigeiliaopidai i,
+.caiyangtou i {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #52c41a;
+  margin-right: 2px;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 6px rgba(82, 196, 26, 0.5);
+}
+
+.infos i.green,
+.info i.green,
+.info-item i.green,
+.chujigeiliaopidai i.green,
+.caiyangtou i.green {
+  background-color: #52c41a;
+  box-shadow: 0 0 8px rgba(82, 196, 26, 0.6), 0 0 0 2px rgba(82, 196, 26, 0.2);
+  animation: pulse-green 2s infinite;
+}
+
+.infos i.red,
+.info i.red,
+.info-item i.red,
+.chujigeiliaopidai i.red,
+.caiyangtou i.red {
+  background-color: #ff4d4f;
+  box-shadow: 0 0 8px rgba(255, 77, 79, 0.6), 0 0 0 2px rgba(255, 77, 79, 0.2);
+  animation: pulse-red 2s infinite;
+}
+
+@keyframes pulse-green {
+
+  0%,
+  100% {
+    box-shadow: 0 0 8px rgba(82, 196, 26, 0.6), 0 0 0 2px rgba(82, 196, 26, 0.2);
+  }
+
+  50% {
+    box-shadow: 0 0 12px rgba(82, 196, 26, 0.8), 0 0 0 3px rgba(82, 196, 26, 0.3);
+  }
+}
+
+@keyframes pulse-red {
+
+  0%,
+  100% {
+    box-shadow: 0 0 8px rgba(255, 77, 79, 0.6), 0 0 0 2px rgba(255, 77, 79, 0.2);
+  }
+
+  50% {
+    box-shadow: 0 0 12px rgba(255, 77, 79, 0.8), 0 0 0 3px rgba(255, 77, 79, 0.3);
+  }
+}
+
+.oprate {
+  display: flex;
+  justify-content: space-around;
+
+}
+
+.oprate>div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.xuhao {
+  flex: 0.6;
+}
+
+/* 右侧区域 - 自适应 */
+.right {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1vh;
+  overflow: hidden;
+}
+
+.huayanjieguo {
+  flex: 3;
+}
+
+.charts {
+  height: calc(100% - 114px);
+  min-height: 560px;
+  overflow-y: auto;
+}
+
+.chart-item {
+  height: 180px;
+  width: 100%;
+}
+
+.zhibiao-oprate {
+  height: 44px;
+  margin-top: 8px;
+}
+
+.task {
+  flex: 1;
+  padding: 1vh 0.5vw;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* 移除el-table背景颜色的样式 */
+.el-table {
+  background-color: transparent !important;
+  color: #fff;
+}
+
+.el-table__header-wrapper,
+.el-table__body-wrapper {
+  background-color: transparent !important;
+
+}
+
+.el-table th,
+.el-table tr,
+.el-table td {
+  background-color: transparent !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: #fff;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover>td {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+.el-table__cell {
+  border: none !important;
+}
+
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: none !important;
+}
+
+.el-table--border .el-table__inner-wrapper:after,
+.el-table--border:after,
+.el-table--border:before,
+.el-table__inner-wrapper:before {
+  display: none !important;
+}
+
+.el-table thead {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+.el-table__row:nth-child(even) td {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+  /* background-color: rgba(255, 255, 255, 0.05) !important; */
+}
+
+/* 在样式部分添加 */
+.el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  /* 滚动条宽度 */
+}
+
+.el-table__body-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  /* 滚动条轨道背景色 */
+}
+
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background: #888;
+  /* 滚动条滑块颜色 */
+  border-radius: 3px;
+  /* 滚动条滑块圆角 */
+}
+
+.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #555;
+  /* 鼠标悬停时的滚动条滑块颜色 */
+}
+
+/* 深色主题对话框样式 */
+.dark-dialog {
+  background-color: #172F4B !important;
+  /* 与主页面卡片背景色一致 */
+  border: 1px solid #263c57;
+  color: #ffffff;
+}
+
+.dark-dialog .el-dialog__header {
+  background-color: #172F4B !important;
+  border-bottom: 1px solid #263c57;
+  padding: 15px 20px;
+}
+
+.dark-dialog .el-dialog__title {
+  color: #ffffff !important;
+  font-size: 16px;
+}
+
+.dark-dialog .el-dialog__body {
+  background-color: #172F4B !important;
+  color: #ffffff;
+  padding: 20px;
+}
+
+.dark-dialog .el-dialog__footer {
+  background-color: #172F4B !important;
+  border-top: 1px solid #263c57;
+  padding: 10px 20px;
+}
+
+/* 关闭按钮样式 - 完全透明背景 */
+.dark-dialog .el-dialog__close {
+  background-color: transparent !important;
+  color: #ffffff !important;
+  font-size: 18px;
+}
+
+.dark-dialog .el-dialog__close:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* 日期选择器弹出面板深色样式 */
+.el-picker__popper {
+  background-color: #172F4B !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
+}
+
+.el-picker__popper .el-picker-panel {
+  background-color: #172F4B !important;
+  color: #fff !important;
+}
+
+.el-picker__popper .el-picker-panel__body {
+  color: #fff !important;
+}
+
+.el-picker__popper .el-date-picker__header {
+  color: #fff !important;
+  border-bottom: 1px solid rgba(24, 144, 255, 0.3) !important;
+}
+
+.el-picker__popper .el-picker-panel__icon-btn {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.el-picker__popper .el-picker-panel__icon-btn:hover {
+  color: #fff !important;
+}
+
+.el-picker__popper .el-date-table th {
+  color: rgba(255, 255, 255, 0.7) !important;
+  border-bottom: 1px solid rgba(24, 144, 255, 0.2) !important;
+}
+
+.el-picker__popper .el-date-table td {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.el-picker__popper .el-date-table td.available:hover {
+  background-color: rgba(24, 144, 255, 0.2) !important;
+  color: #fff !important;
+}
+
+.el-picker__popper .el-date-table td.current:not(.disabled) span {
+  background-color: #1890ff !important;
+  color: #fff !important;
+}
+
+.el-picker__popper .el-date-table td.in-range {
+  background-color: rgba(24, 144, 255, 0.15) !important;
+}
+
+.el-picker__popper .el-date-table td.start-date span,
+.el-picker__popper .el-date-table td.end-date span {
+  background-color: #1890ff !important;
+  color: #fff !important;
+}
+
+.el-picker__popper .el-date-table td.today span {
+  color: #1890ff !important;
+  font-weight: 600;
+}
+
+.el-picker__popper .el-date-table td.disabled {
+  color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* 下拉选择器弹出面板深色样式 */
+.el-select__popper {
+  background-color: #172F4B !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
+}
+
+.el-select__popper .el-select-dropdown {
+  background-color: #172F4B !important;
+}
+
+.el-select__popper .el-select-dropdown__item {
+  background-color: #172F4B !important;
+  color: #fff !important;
+  transition: all 0.3s ease;
+}
+
+.el-select__popper .el-select-dropdown__item:hover {
+  background-color: rgba(24, 144, 255, 0.2) !important;
+  color: #fff !important;
+}
+
+.el-select__popper .el-select-dropdown__item.is-selected {
+  background-color: rgba(24, 144, 255, 0.3) !important;
+  color: #fff !important;
+  font-weight: 600;
+}
+
+.el-select__popper .el-select-dropdown__item.is-disabled {
+  color: rgba(255, 255, 255, 0.3) !important;
+  cursor: not-allowed;
+}
+
+.el-select__popper .el-popper__arrow::before {
+  background-color: #172F4B !important;
+  border: 1px solid rgba(24, 144, 255, 0.4) !important;
+}
+
+/* 弹出面板中的图标颜色修复 */
+.el-picker__popper .el-icon,
+.el-select__popper .el-icon {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
+
+.el-picker__popper .el-icon:hover,
+.el-select__popper .el-icon:hover {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* 选中项图标（如勾选图标） */
+.el-select__popper .el-select-dropdown__item .el-icon {
+  color: #1890ff !important;
+}
+
+/* 深色主题表格样式 */
+.dark-dialog .dark-table {
+  background-color: #172F4B !important;
+  color: #ffffff;
+}
+
+.dark-dialog .el-table th {
+  background-color: #263c57 !important;
+  color: #ffffff !important;
+  border-right: 1px solid #172F4B !important;
+}
+
+.dark-dialog .el-table td {
+  background-color: #172F4B !important;
+  color: #ffffff !important;
+  border-right: 1px solid #263c57 !important;
+  border-bottom: 1px solid #263c57 !important;
+}
+
+.dark-dialog .el-table--border {
+  border: 1px solid #263c57 !important;
+}
+
+.dark-dialog .el-table--border th,
+.dark-dialog .el-table--border td {
+  border-right: 1px solid #263c57 !important;
+}
+
+.dark-dialog .el-table__empty-text {
+  color: #ffffff !important;
+}
+
+/* 调试面板样式 */
+.debug-panel {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 400px;
+  max-height: 80vh;
+  background-color: rgba(11, 36, 65, 0.95);
+  border: 2px solid #1890ff;
+  border-radius: 8px;
+  color: #ffffff;
+  font-size: 12px;
+  z-index: 9999;
+  overflow-y: auto;
+}
+
+.debug-header {
+  padding: 10px;
+  border-bottom: 1px solid #1890ff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.debug-header h3 {
+  margin: 0;
+  color: #1890ff;
+}
+
+.debug-controls {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+
+.debug-btn {
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.debug-btn:hover {
+  background-color: #40a9ff;
+}
+
+.debug-content {
+  padding: 10px;
+}
+
+.debug-section {
+  margin-bottom: 15px;
+  padding: 8px;
+  background-color: rgba(24, 144, 255, 0.1);
+  border-radius: 4px;
+}
+
+.debug-section h4 {
+  margin: 0 0 8px 0;
+  color: #1890ff;
+  font-size: 12px;
+}
+
+.debug-section p {
+  margin: 2px 0;
+  font-size: 11px;
+}
+
+.error-list {
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+.error-item {
+  background-color: rgba(255, 77, 79, 0.2);
+  padding: 4px;
+  margin: 2px 0;
+  border-radius: 2px;
+  font-size: 10px;
+  word-break: break-all;
+}
+
+.debug-toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 10000;
+}
+
+.debug-toggle-btn {
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.debug-toggle-btn:hover {
+  background-color: #40a9ff;
+}
+
+/* ===== 媒体查询 - 响应式适配 ===== */
+
+/* 超大屏幕 (>1920px) */
+@media screen and (min-width: 1920px) {
+  .belt-sampling {
+    grid-template-columns: minmax(320px, 1fr) minmax(800px, 2.5fr) minmax(320px, 1fr);
+  }
+
+  .info,
+  .info-item {
+    width: 200px;
+  }
+}
+
+/* 大屏幕 (1366px - 1920px) - 默认样式已优化 */
+
+/* 中等屏幕 (1024px - 1366px) */
+@media screen and (max-width: 1366px) {
+  .belt-sampling {
+    grid-template-columns: minmax(240px, 0.8fr) minmax(500px, 2fr) minmax(240px, 0.8fr);
+    gap: 0.8vw;
+  }
+
+  .info,
+  .info-item {
+    width: clamp(120px, 10vw, 150px);
+    height: clamp(36px, 3.5vh, 44px);
+  }
+
+  .title {
+    font-size: clamp(11px, 1vw, 14px);
+  }
+}
+
+/* 小屏幕 (768px - 1024px) - 平板横屏 */
+@media screen and (max-width: 1024px) {
+  .belt-sampling {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    gap: 1vh;
+    overflow-y: auto;
+  }
+
+  .left,
+  .center,
+  .right {
+    width: 100%;
+    height: auto;
+  }
+
+  .center {
+    order: 1;
+    min-height: 50vh;
+  }
+
+  .left {
+    order: 2;
+  }
+
+  .right {
+    order: 3;
+  }
+
+  .infos {
+    position: static;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1vw;
+    margin-top: 2vh;
+  }
+
+  .device-content {
+    position: relative;
+    top: 0;
+  }
+
+  .caiyangtong {
+    position: relative;
+    bottom: auto;
+    margin-top: 2vh;
+  }
+}
+
+/* 超小屏幕 (<768px) - 手机 */
+@media screen and (max-width: 768px) {
+
+  html,
+  body {
+    font-size: 14px;
+  }
+
+  .top {
+    height: 60px;
     font-size: 16px;
   }
-  
-  .dark-dialog .el-dialog__body {
-    background-color: #172F4B !important;
-    color: #ffffff;
-    padding: 20px;
-  }
-  
-  .dark-dialog .el-dialog__footer {
-    background-color: #172F4B !important;
-    border-top: 1px solid #263c57;
-    padding: 10px 20px;
-  }
-  
-  /* 关闭按钮样式 - 完全透明背景 */
-  .dark-dialog .el-dialog__close {
-    background-color: transparent !important;
-    color: #ffffff !important;
-    font-size: 18px;
-  }
-  
-  .dark-dialog .el-dialog__close:hover {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-  }
-  
-  /* 深色主题表格样式 */
-  .dark-dialog .dark-table {
-    background-color: #172F4B !important;
-    color: #ffffff;
-  }
-  
-  .dark-dialog .el-table th {
-    background-color: #263c57 !important;
-    color: #ffffff !important;
-    border-right: 1px solid #172F4B !important;
-  }
-  
-  .dark-dialog .el-table td {
-    background-color: #172F4B !important;
-    color: #ffffff !important;
-    border-right: 1px solid #263c57 !important;
-    border-bottom: 1px solid #263c57 !important;
-  }
-  
-  .dark-dialog .el-table--border {
-    border: 1px solid #263c57 !important;
-  }
-  
-  .dark-dialog .el-table--border th,
-  .dark-dialog .el-table--border td {
-    border-right: 1px solid #263c57 !important;
-  }
-  
-  .dark-dialog .el-table__empty-text {
-    color: #ffffff !important;
+
+  .belt-sampling {
+    padding: 0.5vh 0.5vw;
+  }
+
+  .title {
+    font-size: 12px;
+    padding: 0.5vh 0.5vw;
+  }
+
+  .info,
+  .info-item {
+    width: 45%;
+    min-width: 140px;
+  }
+
+  .btn {
+    font-size: 10px;
+  }
+
+  .el-table {
+    font-size: 11px;
+  }
+
+  .caiyangtong {
+    width: 95%;
+    min-height: 60px;
+  }
+}
+
+/* 横屏优化 */
+@media screen and (max-height: 600px) and (orientation: landscape) {
+  .top {
+    height: 50px;
+    min-height: 50px;
+  }
+
+  .belt-sampling {
+    padding: 0.5vh 1vw;
+  }
+
+  .item {
+    padding: 0 0.5vw;
+  }
+
+  .title {
+    padding: 0.5vh 0.5vw;
+  }
+
+  .infos {
+    gap: 0.5vh;
+  }
+
+  .info,
+  .info-item {
+    height: 36px;
   }
+}
 </style>