当前位置: 首页 > news >正文

从零搭建工业物联网监控大屏: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方案完全够用。

http://www.cnnetsun.cn/news/3211497.html

相关文章:

  • HRD进化论04讲:战略解码
  • PostgreSQL高级特性应用
  • PyTorch DDP 多机多卡配置:2节点8卡集群部署与通信瓶颈分析
  • Models-学习指南_小白版
  • Mermaid终极指南:用代码快速创建专业图表,彻底告别文档滞后问题
  • Windows 证书管理:3种存储位置(个人/根/中间)的导入策略与安全影响
  • AD7175-8与PIC18F4610高精度信号采集方案解析
  • 2026年AI写作辅助平台实测认证:5款神器从文献到降重一站式避坑指南
  • 15个实用的代码审查工具,自动化检查
  • 如何快速精通猫抓资源嗅探:进阶用户终极配置指南
  • 15个实用的代码版本控制工具,Git替代品
  • 《B4071 [GESP202412 五级] 武器强化》
  • GHelper终极指南:轻松掌控华硕笔记本性能的轻量级神器
  • 兰州兰银官话语义角色标注数据采集公司
  • FFmpeg 入门:命令行的 20 个常用场景
  • OpenCV 相机标定与3D可视化:8张棋盘格图像标定,内参误差低于0.5像素
  • 内存化在对账系统中的应用实践
  • YOLO实战第四篇:训练曲线全方位解读教程(看懂收敛、过拟合、精度好坏,告别盲目训练)
  • 数据分析师常用的数据分析方法有哪些?
  • 耶鲁大学与谷歌联手:让AI学会“自知之明“,不再自信地胡说八道
  • 破局 PCIe 4.0 交换瓶颈@ACP#IX8024 / ASM58024参数及应用对比
  • 深度解析 GitHub Copilot Modernization:老旧项目的“返老还童”术与换模避坑指南
  • 2026江苏GEO优化公司厂家分析:B2B行业经验评价维度——拒绝广告干扰
  • 揭秘Anime4K:实时动漫超分技术的革命性突破与深度解析
  • DVWA 靶场 10 大漏洞实战:从 Low 到 High 的 3 种安全级别攻防解析
  • Stable Diffusion 3 与 Midjourney V6 对比评测:5大商业场景出图质量与成本分析
  • QRazyBox终极指南:5分钟学会修复损坏二维码的免费神器
  • SM2258XT 开卡工具 Q1225A 版实战:3步定位闪存ID与B17A制程匹配
  • 腾讯混元3D+ComfyUI:单图生成高质量3D模型的低显存实战指南
  • QrazyBox:二维码修复终极指南 - 从损坏到解码的完整解决方案