设备监控大屏实战:MQTT 温湿度与状态展示
本例展示一台设备的温度、湿度和状态。先让一条消息进入页面,再扩展多设备或历史趋势,能更快定位配置问题。
约定消息
下载设备消息示例。由设备或测试发布方发送:
{"device":"sensor-01","temperature":26.4,"humidity":58,"status":"online"}
约定主题 factory/line-a/sensor-01,明确温湿度单位。字段名保持稳定。
建立连接和数据源
按MQTT 接入建立 Broker 连接,创建订阅数据源,设置主题和字段。打开预览后发送一条新消息,确认实际收到的内容。
绑定指标
加入两个数字组件,分别映射 temperature、humidity,追加「℃」「%」等单位。温度按业务需要保留小数,湿度范围与设备约定一致。
状态如需使用其他组件展示,先确认该组件支持的字段类型,不要把 online 等字符串绑定到只接受数字的指标。
验证真实变化
把测试温度从 26.4 改成另一个已知值,再观察页面。普通时钟继续走动并不能证明数据持续更新;需要核对设备消息本身。
同一主题用于多个设备时,应先确认服务端与数据源如何整理记录。当前单条消息更新不能直接当成自动保存的全设备列表或历史数据库。
历史和地图
需要历史曲线时,由数据库或接口提供按时间整理的记录。需要设备地图时,额外提供有效经纬度或地区数据,再使用地图组件。