痛点

老板说：”我要一个大屏，随时能看到所有设备状态。”你打开淘宝搜”工业大屏”，报价5万起。

用 Node-RED + 有人云 = 0元，30分钟，效果不输商业大屏。

---

一、整体架构

┌────────────────┐ 4G/MQTT ┌──────────────┐ HTTP API ┌──────────────┐ │ USR-G780 DTU │ ─────────→ │ 有人云 │ ─────────→ │ Node-RED │ │ (Modbus传感器) │ │ (数据中台) │ │ (可视化引擎) │ └────────────────┘ └──────────────┘ └──────┬───────┘ │ ┌───────▼───────┐ │ Dashboard UI │ │ (浏览器访问) │ └───────────────┘

---

二、环境搭建

2.1 安装Node.js（Windows）

# 下载Node.js LTS版本：https://nodejs.org # 安装后验证 node -v # 应显示 v18.x 或 v20.x npm -v

2.2 安装Node-RED

npm install -g --unsafe-perm node-red # 启动（默认端口1880） node-red

浏览器打开 http://localhost:1880，看到如下界面：

┌─────────────────────────────────────────────┐ │ [左侧节点面板] [中间画布] [右侧信息面板] │ │ │ │ ● inject ┌──────┐ │ │ ● debug │ flow │ │ │ ● function └──────┘ │ │ ● http [拖节点到这里] │ │ ● mqtt │ │ ● dashboard │ └─────────────────────────────────────────────┘

2.3 安装Dashboard节点

# 在Node-RED运行目录下 npm install node-red-dashboard # 或者通过管理面板安装： # 右上角菜单 → 管理面板 → 节点管理 → 搜索 "dashboard"

重启Node-RED，左侧面板会出现 dashboard 节点组。

---

三、连接有人云获取数据

3.1 在有人云创建设备和数据点

登录有人云(cloud.usr.cn)：

1. 添加设备（输入DTU SN号）

2. 配置数据模板（Modbus点位映射）

3. 获取API密钥（个人中心 → API密钥）

3.2 Node-RED HTTP请求节点

在Node-RED画布上拖放以下节点：

[inject(定时)] → [http request] → [function(解析)] → [dashboard gauge]

HTTP Request节点配置：

{ "method": "GET", "url": "https://api.cloud.usr.cn/v1/device/data", "headers": { "Authorization": "Bearer YOUR_API_KEY", "Content-Type": "application/json" }, "params": { "device_id": "your_device_sn", "limit": 1 }, "return": "a parsed JSON object" }

Function节点（解析数据）：

// 解析有人云API返回的数据 var data = msg.payload; // 有人云API返回格式: // { code: 0, data: { points: { temperature: 25.5, humidity: 65.2 } } } if (data.code === 0 && data.data) { msg.payload = data.data.points.temperature; msg.topic = "温度"; } return msg;

---

四、使用MQTT实时数据（推荐）

HTTP轮询有延迟，MQTT实时推送更优：

4.1 MQTT节点配置

[MQTT In] → [function] → [dashboard chart + gauge]

MQTT In节点配置：

{ "server": "cloud.usr.cn", "port": 1883, "topic": "/usr/+/dtus/+/data", "qos": 1, "name": "有人云数据订阅", "output": "a parsed JSON object" }

Function节点（提取数据）：

// 解析有人云MQTT数据 var payload = msg.payload; // 提取温度和湿度 var temperature = payload.data.temperature; var humidity = payload.data.humidity; // 构造多个输出 var msgs = []; // 温度 msgs.push({ payload: temperature, topic: "温度" }); // 湿度 msgs.push({ payload: humidity, topic: "湿度" }); return [msgs];

---

五、搭建Dashboard

5.1 仪表盘布局

┌─────────────────────────────────────────────────┐ │ 工业物联网设备监控大屏 │ ├──────────┬──────────┬──────────┬────────────────┤ │ 设备总数 │ 在线设备 │ 告警数量 │ 今日数据量 │ │ 128 │ 126 │ 3 │ 1.2GB │ ├──────────┴──────────┴──────────┴────────────────┤ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ 实时温度 │ │ 实时湿度 │ │ │ │ ┌───┐ │ │ ┌───┐ │ │ │ │ │25.5│°C │ │ │65%│ │ │ │ │ └───┘ │ │ └───┘ │ │ │ └─────────────┘ └─────────────┘ │ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ 温度历史曲线（24小时） │ │ │ │ 📈 │ │ │ └─────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ 最近告警记录 │ │ │ │ 2025-01-15 14:30 3号线 温度过高 85°C │ │ │ │ 2025-01-15 14:25 5号线 通讯中断 │ │ │ └─────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘

5.2 Dashboard节点配置

组件	类型	配置
设备总数	ui_text	Group: 概览
在线设备	ui_text	Group: 概览
告警数量	ui_text	Group: 概览, 颜色红
实时温度	ui_gauge	范围0-100, 绿50↓黄70↓红
实时湿度	ui_gauge	范围0-100, 单位%
温度曲线	ui_chart	折线图, 24小时
告警列表	ui_table	可排序

5.3 Dashboard访问

# 浏览器打开 http://localhost:1880/ui # 局域网其他设备访问 http://你的电脑IP:1880/ui # 生产环境建议用Nginx反向代理 + HTTPS

---

六、告警推送（微信/钉钉）

Function节点：异常检测

// 温度 > 80度 → 推送微信/钉钉告警 var temperature = msg.payload; var threshold = 80; if (temperature > threshold) { // 构造钉钉机器人消息 var dingtalkMsg = { msgtype: "text", text: { content: "⚠️ 高温告警！当前温度: " + temperature + "°C, 阈值: " + threshold + "°C" } }; // 发送到下一个HTTP request节点（钉钉webhook） msg.payload = dingtalkMsg; msg.headers = { "Content-Type": "application/json" }; return msg; } // 正常温度，不发 return null;

后面接一个HTTP request节点，URL填钉钉机器人的Webhook地址。

---

七、一键部署脚本

#!/bin/bash # 快速部署Node-RED工业大屏 # 1. 安装Node-RED npm install -g node-red # 2. 安装必要节点 cd ~/.node-red npm install node-red-dashboard npm install node-red-contrib-ui-level # 3. 导入flow（把下面JSON保存为flows.json导入） # 4. 启动 node-red

Flows JSON 模板（导入到Node-RED即可用）：

[ { "id": "tab1", "type": "tab", "label": "工业大屏", "disabled": false }, { "id": "mqtt_in", "type": "mqtt in", "z": "tab1", "name": "有人云数据", "topic": "/usr/+/dtus/+/data", "qos": "1", "broker": "cloud.usr.cn", "x": 150, "y": 200, "wires": [["parse_fn"]] }, { "id": "parse_fn", "type": "function", "z": "tab1", "name": "解析温度", "func": "msg.payload = msg.payload.data.temperature;\nreturn msg;", "x": 350, "y": 200, "wires": [["gauge_temp", "chart_temp"]] }, { "id": "gauge_temp", "type": "ui_gauge", "z": "tab1", "name": "温度", "group": "main", "x": 550, "y": 200, "wires": [] }, { "id": "chart_temp", "type": "ui_chart", "z": "tab1", "name": "温度曲线", "group": "main", "x": 550, "y": 280, "wires": [] } ]

---

八、效果对比

方案	成本	开发时间	灵活度
商业大屏（帆软/DataV）	2-5万/年	1-2周	高
Node-RED + 有人云	0元	30分钟	中等
纯手写前端	0元	1-2周	最高

对于绝大部分中小工业场景，Node-RED方案完全够用。