从零搭建工业物联网监控大屏：Node-RED + 有人云 零代码方案

痛点老板说”我要一个大屏随时能看到所有设备状态。”你打开淘宝搜”工业大屏”报价5万起。用 Node-RED 有人云 0元30分钟效果不输商业大屏。一、整体架构┌────────────────┐ 4G/MQTT ┌──────────────┐ HTTP API ┌──────────────┐ │ USR-G780 DTU │ ─────────→ │ 有人云 │ ─────────→ │ Node-RED │ │ (Modbus传感器) │ │ (数据中台) │ │ (可视化引擎) │ └────────────────┘ └──────────────┘ └──────┬───────┘ │ ┌───────▼───────┐ │ Dashboard UI │ │ (浏览器访问) │ └───────────────┘二、环境搭建2.1 安装Node.jsWindows# 下载Node.js LTS版本https://nodejs.org # 安装后验证 node -v # 应显示 v18.x 或 v20.x npm -v2.2 安装Node-REDnpm 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)添加设备输入DTU SN号配置数据模板Modbus点位映射获取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];五、搭建Dashboard5.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_textGroup: 概览在线设备ui_textGroup: 概览告警数量ui_textGroup: 概览, 颜色红实时温度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-redFlows 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: [] } ]八、效果对比方案成本开发时间灵活度商业大屏帆软/DataV2-5万/年1-2周高Node-RED 有人云0元30分钟中等纯手写前端0元1-2周最高对于绝大部分中小工业场景Node-RED方案完全够用。