feat: 移动式检修车间系统前端完成

- 完成系统日志页面，优化表格滚动和样式
- 完成报警记录页面，优化表格滚动和报警级别显示
- 完成环境参数页面，优化参数显示和监控画面
- 完成参数记录页面，优化图表样式和简洁设计
- 集成MQTT配置，支持实时数据对接
- 统一UI设计风格，采用现代化卡片式布局
- 添加响应式设计，适配不同屏幕尺寸
- 预留MQTT数据接口，支持AC空调和WSD温湿度设备

src/utils/mqttClient.js

@@ -0,0 +1,156 @@
+// // MQTT客户端封装
+// import mqtt from 'mqtt'
+// import { MQTT_CONFIG, DataParser } from '@/config/mqtt'
+
+// class MQTTClient {
+//   constructor() {
+//     this.client = null
+//     this.isConnected = false
+//     this.subscriptions = new Map()
+//     this.messageHandlers = new Map()
+//     this.reconnectAttempts = 0
+//     this.maxReconnectAttempts = 5
+//   }
+
+//   // 连接MQTT服务器
+//   async connect() {
+//     try {
+//       console.log('正在连接MQTT服务器:', MQTT_CONFIG.broker)
+//       this.client = mqtt.connect(MQTT_CONFIG.broker, MQTT_CONFIG.options)
+      
+//       return new Promise((resolve, reject) => {
+//         this.client.on('connect', () => {
+//           console.log('MQTT连接成功')
+//           this.isConnected = true
+//           this.reconnectAttempts = 0
+//           resolve()
+//         })
+        
+//         this.client.on('error', (error) => {
+//           console.error('MQTT连接失败:', error)
+//           this.isConnected = false
+//           reject(error)
+//         })
+        
+//         this.client.on('message', (topic, message) => {
+//           this.handleMessage(topic, message)
+//         })
+        
+//         this.client.on('reconnect', () => {
+//           this.reconnectAttempts++
+//           console.log(`MQTT重连中... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`)
+          
+//           if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+//             console.error('MQTT重连次数超限，停止重连')
+//             this.client.end()
+//           }
+//         })
+        
+//         this.client.on('close', () => {
+//           console.log('MQTT连接关闭')
+//           this.isConnected = false
+//         })
+        
+//         this.client.on('offline', () => {
+//           console.log('MQTT客户端离线')
+//           this.isConnected = false
+//         })
+//       })
+//     } catch (error) {
+//       console.error('MQTT连接异常:', error)
+//       throw error
+//     }
+//   }
+
+//   // 订阅主题
+//   subscribe(topic, handler) {
+//     if (!this.isConnected) {
+//       console.warn('MQTT未连接，无法订阅主题:', topic)
+//       return false
+//     }
+    
+//     this.client.subscribe(topic, (error) => {
+//       if (error) {
+//         console.error('订阅主题失败:', topic, error)
+//         return false
+//       } else {
+//         console.log('订阅主题成功:', topic)
+//         this.subscriptions.set(topic, true)
+//         this.messageHandlers.set(topic, handler)
+//         return true
+//       }
+//     })
+//     return true
+//   }
+
+//   // 取消订阅
+//   unsubscribe(topic) {
+//     if (this.subscriptions.has(topic)) {
+//       this.client.unsubscribe(topic)
+//       this.subscriptions.delete(topic)
+//       this.messageHandlers.delete(topic)
+//       console.log('取消订阅主题:', topic)
+//     }
+//   }
+
+//   // 发布消息
+//   publish(topic, message) {
+//     if (!this.isConnected) {
+//       console.warn('MQTT未连接，无法发布消息')
+//       return false
+//     }
+    
+//     const payload = typeof message === 'object' ? JSON.stringify(message) : message
+//     this.client.publish(topic, payload, (error) => {
+//       if (error) {
+//         console.error('发布消息失败:', topic, error)
+//         return false
+//       } else {
+//         console.log('发布消息成功:', topic, payload)
+//         return true
+//       }
+//     })
+//     return true
+//   }
+
+//   // 处理接收到的消息
+//   handleMessage(topic, message) {
+//     try {
+//       const handler = this.messageHandlers.get(topic)
+//       if (handler) {
+//         const rawData = message.toString()
+//         console.log('收到MQTT消息:', topic, rawData)
+        
+//         // 解析数据
+//         const parsedData = DataParser.parseDeviceData(rawData)
+//         if (parsedData) {
+//           handler(parsedData)
+//         }
+//       }
+//     } catch (error) {
+//       console.error('处理消息失败:', topic, error)
+//     }
+//   }
+
+//   // 获取连接状态
+//   getConnectionStatus() {
+//     return {
+//       isConnected: this.isConnected,
+//       reconnectAttempts: this.reconnectAttempts,
+//       subscriptions: Array.from(this.subscriptions.keys())
+//     }
+//   }
+
+//   // 断开连接
+//   disconnect() {
+//     if (this.client) {
+//       this.client.end()
+//       this.isConnected = false
+//       this.subscriptions.clear()
+//       this.messageHandlers.clear()
+//       console.log('MQTT连接已断开')
+//     }
+//   }
+// }
+
+// export default new MQTTClient()