基于 ThingsPanel + MQTTX 搭建车间环境监测系统（二）：数据可视化看板-171主机测评

基于 ThingsPanel + MQTTX 搭建车间环境监测系统（二）：数据可视化看板

本文是「车间环境监测系统」系列的第二篇。

上一篇：（一）设备接入与数据链路打通 —— 完成设备创建、物模型定义、MQTTX 上下行链路验证。

上一篇结束时，数据已经能上报到平台了，这一篇就把它变成一块实时刷新的车间环境监控看板。

一、本篇目标

把 6 路环境遥测数据（温度、湿度、粉尘、有害气体、噪声、光照）做成可视化数字卡片，最终效果：

一眼看到 6 个指标的当前实时值
带单位后缀（℃、%RH、mg/m³、ppm、dB、lx）
随设备上报自动刷新

后续第三篇会继续做阈值告警（超温/粉尘超标自动报警 + 联动下发控制）。

二、先理清三个概念

ThingsPanel 的可视化是三层结构，很多人一上来就懵，其实很好理解：

项目（Project）
└── 仪表盘（Dashboard） ← 一块"画布"，可以建多个
└── 组件（Widget） ← 画布上的每个数字/图表，如"环境温度卡片"

概念作用类比

项目	最外层的容器，用来归类一组看板	一个文件夹
仪表盘	一块具体的画布，最终展示的页面	一张大屏
组件	画布上的最小展示单元（数值、折线图、仪表盘等）	大屏上的一块磁贴

组件的数据从哪来？靠在组件属性面板里绑定「设备 + 字段」，绑定后组件就知道该去读哪台设备的哪个遥测值。

三、前置准备

ThingsPanel 本地环境正常运行（Docker 服务已启动）
上一篇创建的设备和物模型都在
建议先用 MQTTX 发一条数据，确保平台侧有值可显示，否则看板上会是空的

打开 ThingsPanel 并登录：

在这里插入图片描述

四、Step 1：新建可视化项目

在左侧菜单展开【可视化】，点击【看板】。

上文截图即为进入「可视化 → 看板」后的界面。

点击新建项目。

在这里插入图片描述

输入项目名称（例如车间环境监测），简介可以不写，点击创建。

在这里插入图片描述

五、Step 2：新建仪表盘

点击刚刚创建的项目卡片，打开它。

在这里插入图片描述

点击右上角新建仪表盘，输入仪表盘名称（例如一号车间环境监测大屏），点击创建。

在这里插入图片描述

在刚创建的仪表盘卡片上点击编辑，进入画布编辑模式。

在这里插入图片描述

六、Step 3：添加数值组件

现在进入画布编辑界面，左侧是组件库，中间是画布，右侧是属性面板。

在左侧组件库的数据分类下，找到数值组件。

在这里插入图片描述

按住拖到画布中间，然后单击该组件，右侧会弹出它的配置面板。

在这里插入图片描述

七、Step 4：绑定数据源（核心步骤）

这一步是整篇的关键，把组件和设备的具体遥测字段绑起来。

下滑右侧属性面板，按下面配置：

配置项设置说明

标题	环境温度	卡片上方显示的文字，填中文名更直观
核心数据值	静态 → 字段	⚠️ 默认是"静态"（写死的数字），一定要改成"字段"才会读实时数据
数据范围	数据设备	表示从具体某台设备取数
当前设备	车间环境监测终端-01	选你在上一篇创建的那台设备
数据类型	当前值	取最新一条上报值（历史趋势图才选时间段）
字段	temperature	选对应的遥测标识符
后缀	℃	会显示在数值后面

在这里插入图片描述

⚠️ 最容易踩的坑：核心数据值默认是「静态」，不改的话卡片永远显示你填的固定数字，看起来像是没数据。改成「字段」后下面的设备/字段选项才会生效。

八、Step 5：完成 6 个指标

其余 5 个组件步骤完全一样，重复添加即可。推荐配置如下：

卡片标题绑定字段后缀

环境温度	temperature	℃
环境湿度	humidity	%RH
粉尘浓度	dust	mg/m³
有害气体	gas	ppm
噪声	noise	dB
光照	illumination	lux

全部添加完成后的效果：

在这里插入图片描述

布局小建议

6 个数值卡片推荐排成 2 行 × 3 列或 3 行 × 2 列，对齐后更整齐
拖动组件边缘可以调整大小，按住组件可以拖动位置
配置完记得点右上角的保存，否则刷新页面会丢

还能加什么组件

数值卡片只适合看"当前值"，组件库里还有很多可以玩：

组件适合展示建议用法

折线图	变化趋势	把 temperature 按时间段画成曲线，看一天内的温度走势
仪表盘	区间占比	噪声/粉尘这类有量程上限的指标
指示灯	布尔状态	设备在线/离线、报警状态
开关	下发控制	直接在看板上点按钮发 {"switch":1}

折线图的数据类型和数值卡片不同，需要选时间段/历史数据，并指定时间范围，这一步会在后面用到。

九、联调验证

配置完别急着收工，按这个顺序验一遍：

在 MQTTX 里改一条数据发出去，比如把温度从 25.6 改成 31.2：

{
"temperature": 31.2,
"humidity": 62.3,
"dust": 0.42,
"gas": 18.5,
"noise": 53.2,
"illumination": 480
}

在这里插入图片描述

回到看板页面，刷新浏览器。

环境温度卡片是否变成 31.2℃？变了就说明上报 → 解析 → 展示整条链路是通的。

在这里插入图片描述

✅ 到这一步，「设备上报数据 → 平台看板实时展示」已经完整跑通。

十、常见问题排查

现象原因与处理

卡片显示 — 或 0	① 设备从未上报过该字段 → 用 MQTTX 发一条；② 上报 JSON 的 key 与物模型标识符不一致；③ 忘了把「静态」改成「字段」
字段下拉框里找不到我的遥测	物模型没保存成功，或组件绑定的设备选错了。确认数据范围 = 数据设备且选中了正确设备
数据不刷新	① 组件数据类型要选「当前值」；② 确认 MQTTX 仍是 Connected 状态；③ 手动 F5 刷新页面
单位后缀不显示	后缀要填在属性面板的后缀输入框，不是写在标题里
想看历史趋势但数值卡片做不到	数值组件只显示当前值，改用折线图组件并把数据类型切成时间段
看板配置丢了	编辑完必须点右上角保存再退出

十一、阶段性成果与后续计划

已完成 ✅

设备创建、物模型定义（6 路遥测）
MQTTX 模拟设备上下行链路打通
可视化项目 + 仪表盘搭建
6 个数值组件绑定实时数据，看板正常刷新

下一步（第三篇）⏭️

阈值告警规则：温度 > 40℃、粉尘 > 0.8 mg/m³ 等触发告警
告警联动控制：告警触发后自动下发 {"switch":1} 打开风机/报警器
历史趋势图：用折线图组件回看一段时间内的环境变化

系列导航

（一）设备接入与数据链路打通
（二）数据可视化看板 —— 本文
（三）阈值告警与联动控制 —— 待更新

基于 ThingsPanel + MQTTX 搭建车间环境监测系统（二）：数据可视化看板