8f6dcca19f
- 完成系统日志页面，优化表格滚动和样式 - 完成报警记录页面，优化表格滚动和报警级别显示 - 完成环境参数页面，优化参数显示和监控画面 - 完成参数记录页面，优化图表样式和简洁设计 - 集成MQTT配置，支持实时数据对接 - 统一UI设计风格，采用现代化卡片式布局 - 添加响应式设计，适配不同屏幕尺寸 - 预留MQTT数据接口，支持AC空调和WSD温湿度设备
2.4 KiB
2.4 KiB
MQTT对接说明
📋 项目信息
- 项目地址: http://101.43.41.9:13000/xzzn/movecheck.git
- EMQX控制台: http://122.51.194.184:18083
- 账号: admin
- 密码: 8a7c97e5c31c
- MQTT服务器: 122.51.194.184:1883 (暂时不设置账号密码)
🔧 MQTT配置
服务器信息
- MQTT Broker:
ws://122.51.194.184:8083/mqtt(WebSocket) - 标准MQTT:
mqtt://122.51.194.184:1883 - 订阅主题:
hdydcj_01_UP
数据格式
[
{
"Device": "AC", // 设备类型: AC=空调, WSD=温湿度
"timestamp": 1758699927, // Unix时间戳
"Data": {
"BSQWD": 28.9 // 空调温度数据
}
}
]
设备类型说明
- AC (空调):
BSQWD: 温度值
- WSD (温湿度传感器):
WD: 温度值SD: 湿度值
🚀 使用方法
1. 安装依赖
npm install mqtt
2. 启动项目
npm run dev
3. 查看连接状态
- 打开浏览器开发者工具
- 查看Console日志
- 应该看到 "MQTT连接成功" 和 "订阅主题成功" 的日志
4. 测试数据接收
- 当有设备数据发送到
hdydcj_01_UP主题时 - 页面会自动更新温度、湿度等参数
- 控制台会显示 "收到设备数据" 的日志
📊 数据映射
空调设备 (Device: AC)
BSQWD→ 温度显示- 温度范围: 15-35°C
温湿度传感器 (Device: WSD)
WD→ 温度显示SD→ 湿度显示- 湿度范围: 0-80%
PM2.5传感器 (Device: PM)
PM25→ 洁净度显示- 洁净度范围: 0-100%
🔍 故障排除
连接失败
- 检查网络连接
- 确认MQTT服务器地址正确
- 检查防火墙设置
数据不更新
- 检查主题名称是否正确
- 确认设备数据格式
- 查看控制台错误日志
状态显示异常
- 检查设备类型代码
- 确认数据字段名称
- 验证数据值范围
📝 开发说明
文件结构
src/
├── config/
│ └── mqtt.js # MQTT配置
├── utils/
│ └── mqttClient.js # MQTT客户端
└── components/
└── EnvironmentParams.vue # 环境参数组件
主要功能
- 自动连接MQTT服务器
- 订阅设备数据主题
- 实时更新环境参数
- 显示连接状态
- 错误处理和重连机制
扩展功能
- 可以添加更多设备类型
- 支持数据历史记录
- 可配置报警阈值
- 支持数据导出功能