Node-RED Dashboard 低码大屏实践

[giscafer]

Node-RED 是一个基于 Node.js 平台的可视化编程工具，是一个功能强大、易于使用、可扩展的可视化编程工具，适用于各种应用场景，如物联网、数据处理、自动化控制等。它的优势包括：

可视化编程：Node-RED 提供了一个可视化的编程界面，使得用户可以通过拖拽和连接节点的方式来构建应用程序，而不需要编写大量的代码。

易于使用：Node-RED 的编程界面非常直观和易于使用，即使是没有编程经验的用户也可以很快上手。

丰富的节点库：Node-RED 提供了一个丰富的节点库，包括了各种常用的节点，如 HTTP 请求、MQTT、WebSocket、数据库等，用户可以直接使用这些节点来构建应用程序。

可扩展性：Node-RED 的节点库是可扩展的，用户可以通过编写自定义节点来扩展节点库，以满足特定的需求。

支持多种协议：Node-RED 支持多种协议，如 HTTP、MQTT、WebSocket 等，使得用户可以轻松地构建跨平台的应用程序。

开源免费：Node-RED 是一个开源免费的工具，用户可以自由地使用、修改和分发它。

Node-RED Dashboard 是一个基于 Node-RED 的可视化面板，它可以帮助用户快速构建 Web 应用程序。Node-RED Dashboard 提供了一组可重用的 UI 组件，如图表、表格、按钮等，用户可以使用这些组件来构建自定义的 Web 应用程序。

案例1：定制小红书多账号统计面板

数据处理：Node-RED 可以用于数据处理和转换，如数据清洗、数据分析、数据可视化等

创建子流程

流程里抓取数据和消息推送、数据处理逻辑都是复用的，所以可以抽离成子流程

自定义样式

为了方便，将Antd 的表格样式复制出来粘贴直接使用。将来实践可以考虑将 Tailwind CSS 放进去，就可以更方便自定义组件样式效果了。

多Tab 菜单

将不同的流分为两个大屏页面，启用Tab导航，就可以渲染为多页面菜单。这里可以将小红书的不同账号作为一个tab

最终流的效果

最终效果图

案例2：定制股票推送消息

自动化控制：Node-RED 可以用于自动化控制，如自动化测试、自动化部署、自动化运维等。

定制股票推送消息，拖拖拖，写点js就可以了

案例3：在Node-RED中监控太阳能光伏系统

此案例是Node-RED 在物流网领域的应用：Node-RED 可以与各种传感器和设备进行集成，从而构建物联网应用程序，如智能家居、智能工厂等。以下是监控您的太阳能光伏系统的例子：

Demo:

• Node-RED UI: http://ha.iammeter.com:11880/ui
• Node-RED flow: http://ha.iammeter.com:11880/#flow/5fb9966c8a33b771

---

相关阅读推荐：

• Node-RED 节点之 Kafka 消息中间件