4. 仪表盘基础
仪表盘（Dashboard）是Node-RED物联网应用中最直观的交互层。本章将系统讲解Dashboard节点库的安装流程、布局结构的设计原理，以及如何通过拖拽式操作快速添加和配置UI组件，为后续构建完整的物联网监控界面打下坚实基础。
4.1 Dashboard节点库的安装
Dashboard节点库并非Node-RED的默认内置节点，需要通过“节点管理”功能手动安装。安装完成后，你将在左侧节点面板中看到一组以“dashboard”为分类的UI节点。
4.1.1 安装步骤
- 打开节点管理面板：点击Node-RED编辑器右上角的“三横线”菜单，选择“节点管理”。
- 切换到“安装”标签页：在节点管理对话框中，点击“安装”选项卡。
- 搜索Dashboard节点库：在搜索框中输入
node-red-dashboard。 - 点击安装：找到
node-red-dashboard节点库，点击右侧的“安装”按钮。 - 等待安装完成：Node-RED会自动从npm仓库下载并安装依赖，安装成功后节点面板会刷新。
安装验证：安装成功后，左侧节点面板会出现一个名为“dashboard”的节点分类，其中包含
ui_button、ui_text、ui_gauge、ui_chart 等常用节点。如果未出现，请尝试刷新浏览器页面或重启Node-RED服务。
4.1.2 版本与兼容性
| 项目 | 说明 |
|---|---|
| 当前稳定版本 | 3.x（截至本课程编写时） |
| Node-RED最低版本要求 | 2.0.0 及以上 |
| Node.js最低版本要求 | 12.x 及以上 |
| 安装命令（备用） | npm install node-red-dashboard（在Node-RED用户目录下执行） |
4.2 Dashboard布局结构
Dashboard的布局采用“站点 → 标签页 → 分组 → 组件”的四层树形结构。理解这一层级关系是高效设计仪表盘界面的前提。
4.2.1 布局层级关系
4.2.2 各层级配置要点
| 层级 | 配置位置 | 关键属性 | 作用 |
|---|---|---|---|
| 站点 | Dashboard 设置页面 | 站点名称、路径、主题色 | 定义仪表盘全局样式与访问路径 |
| 标签页 | 节点编辑 → 添加新标签页 | 标签名称、图标、顺序 | 实现多页面导航，组织功能模块 |
| 分组 | 节点编辑 → 添加新分组 | 分组名称、宽度、布局方向 | 将相关组件放在同一卡片区域 |
| 组件 | 节点编辑 → 选择分组 | 标签、数据源、样式 | 具体UI控件，如按钮、图表、仪表 |
4.3 UI组件的添加与配置
Dashboard提供了丰富的UI组件库，覆盖数据展示、控制输入、图表可视化等场景。添加组件只需从节点面板拖拽到编辑区，然后配置其属性即可。
4.3.1 常用UI组件一览
| 组件类型 | 节点名称 | 典型用途 | 输出/输入 |
|---|---|---|---|
| 按钮 | ui_button |
触发动作、发送指令 | 输出 msg.payload |
| 文本 | ui_text |
显示传感器数值、状态信息 | 输入 msg.payload |
| 仪表盘 | ui_gauge |
模拟指针仪表显示 | 输入数值 |
| 图表 | ui_chart |
实时数据曲线、柱状图 | 输入时间序列数据 |
| 滑块 | ui_slider |
调节阈值、连续控制 | 输出/输入数值 |
| 开关 | ui_switch |
开关量控制 | 输出 true/false |
| 下拉选择 | ui_dropdown |
选项切换 | 输出选中值 |
| 表单 | ui_form |
提交结构化数据 | 输出JSON对象 |
4.3.2 添加组件的标准流程
- 拖拽节点：从左侧“dashboard”分类中拖出一个UI组件节点（如
ui_text）到编辑区。 - 双击编辑：双击该节点，打开属性编辑面板。
- 配置分组归属：在“Group”字段中，点击右侧的“铅笔”图标，选择或新建一个分组。
- 设置组件属性：根据组件类型填写标签、单位、取值范围、样式等参数。
- 连接数据流：将上游节点（如MQTT输入、函数节点）的输出连接到UI组件的输入。
- 部署并查看：点击右上角“部署”按钮，然后通过浏览器访问
http://localhost:1880/ui查看仪表盘效果。
关键提示：每个UI组件节点必须归属于一个分组，而分组必须归属于一个标签页。如果未正确配置层级归属，部署后仪表盘将无法显示该组件。建议在添加组件前，先规划好标签页和分组的组织结构。
4.3.3 组件配置示例：温度显示仪表
以下是一个典型的温度传感器数据显示配置流程，展示从数据输入到仪表盘显示的全链路。
4.4 布局与组件的实战技巧
常见陷阱：在配置分组宽度时，Dashboard采用12列栅格系统。如果组件宽度之和超过12，组件会自动换行，可能导致布局错乱。建议每个分组的总宽度不超过12，例如：一个宽度为6的图表 + 两个宽度为3的仪表。
4.4.1 分组宽度分配建议
| 场景 | 推荐宽度 | 说明 |
|---|---|---|
| 全宽标题/大图表 | 12 | 占满整行，适合主标题或全宽折线图 |
| 双栏布局 | 6 + 6 | 左右对称，适合对比显示 |
| 三栏布局 | 4 + 4 + 4 | 等宽三列，适合仪表盘或状态卡片 |
| 主次布局 | 8 + 4 | 主区域显示图表，侧栏显示控制组件 |
4.4.2 组件数据绑定方式
UI组件通过 msg.payload 接收或发送数据。对于不同类型的组件，数据格式要求如下：
- 数值型组件（ui_gauge、ui_chart）：
msg.payload必须为数字，如25.6。 - 文本型组件（ui_text）：
msg.payload可以是字符串或数字，通过Format模板格式化显示。 - 开关/按钮型组件（ui_switch、ui_button）：点击时输出
msg.payload为true或false（开关），或自定义值（按钮）。 - 图表型组件（ui_chart）：支持时间序列数据，
msg.payload可以是单个数值或数组。
进阶技巧：使用
msg.topic 可以为图表组件区分多条数据曲线。例如，将温度数据发送到 msg.topic = "temperature"，湿度数据发送到 msg.topic = "humidity"，图表会自动绘制两条不同颜色的曲线。