news 2026/7/8 1:42:14

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
从零搭建工业物联网监控大屏:Node-RED + 有人云 零代码方案

痛点

老板说:”我要一个大屏,随时能看到所有设备状态。”你打开淘宝搜”工业大屏”,报价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方案完全够用。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/8 1:41:15

HRD进化论04讲:战略解码

战略解码:把业务战略翻译成人力资源动作 从"听不懂"到"说得清"再到"干得准" 每年10月到12月,是大多数公司做明年战略规划的时候。 你参加过很多次战略会,但每次都有一个尴尬的瞬间——老板讲完明年的业务目标…

作者头像 李华
网站建设 2026/7/8 1:41:06

PostgreSQL高级特性应用

PostgreSQL作为一款功能强大的开源关系型数据库,凭借其丰富的高级特性,在数据处理、分析和管理领域展现出卓越的灵活性。无论是企业级应用还是复杂的数据分析场景,PostgreSQL都能通过其独特的功能满足多样化的需求。本文将深入探讨PostgreSQL…

作者头像 李华
网站建设 2026/7/8 1:40:41

PyTorch DDP 多机多卡配置:2节点8卡集群部署与通信瓶颈分析

PyTorch DDP 多机多卡实战:2节点8卡集群部署与通信优化全解析当深度学习模型规模突破单卡显存限制时,分布式训练成为必选项。PyTorch的DistributedDataParallel(DDP)以其简洁API和高效性能成为多机多卡训练的首选方案。本文将带您…

作者头像 李华
网站建设 2026/7/8 1:40:33

Models-学习指南_小白版

Base/Models 层详解——小白也能看懂📍 原文位置:D:\AI0409\Day22\Models-学习指南.md 本文档是这个包的系统学习指南,目标:让完全不懂数据库的小白也能理解 Models 层是什么、怎么用、为什么这样设计。前置知识:在看这…

作者头像 李华
网站建设 2026/7/8 1:34:19

Windows 证书管理:3种存储位置(个人/根/中间)的导入策略与安全影响

Windows 证书管理:3种存储位置的安全策略与实战指南在Windows环境中,证书管理是系统管理员和开发运维人员日常工作中不可或缺的一环。无论是配置SSL/TLS加密通信、部署企业VPN,还是进行代码签名验证,正确导入和管理数字证书都至关…

作者头像 李华