NodeRed+UIOTOS绝配！流程连线搭建上位机

介绍

• NodeRed：后端低代码，用于协议接入、边缘计算采集。

• UIOTOS：前端零代码，用于组态绘图、UI表单、界面交互。

作为低代码的一个成功典范，NodeRed如今在IoT物联网、工业互联网、自动化等领域势不可挡，甚至引起了流程编辑的浪潮。

nodered节点编辑

尽管在协议对接、边缘计算上，NodeRed是扛把子，但搭建UI交互界面并不适合，即便有dashboard节点，局限性也极大。

nodered dashboard界面效果

UIOTOS是一款前端组态工具，能一站式搭建组态HMI、上位机、后台管理界面。如下所示：

UIOTOS组态界面效果

UIOTOS管理界面效果

下面将通过示例合集，介绍如何用UIOTOS搭建NodeRed上层应用，从简单到复杂，涵盖组态、上位机、大屏看板、后台管理等多种场景。

一、modbus数据读写和历史曲线

效果

运行界面十分简单：两个输入框，对应modbus点位实时变化，右侧按钮可弹窗下发。历史弹窗，显示最近5分钟曲线叠加，可输入时间段查询。

1）nodered对接本地modbus tcp模拟器，采集温度、湿度数据，并且保存到数据库，通过MQTT发送数据和接收查询。

nodered编辑界面

2）UIOTOS搭建界面和接口，实现界面交互、数据展示、数据下发、曲线弹窗和历史数据加载。

uiotos编辑界面

步骤1：MQTT数据给到输入框

如下所示，分为两步：

• 拖入接口组件，设置MQTT参数，订阅NodeRed采集的数据。

• 连线指向两个输入框，分别解析提取温度、湿度数据。

步骤2：按钮弹窗下发修改值

步骤1中的设置按钮，要弹窗下发设置，可以先对按钮“嵌套封装”一下。

• 新建内嵌页。

• 拖入按钮、对话框（嵌套有输入框）、普通函数。

• 连线设置，按钮触发弹窗，点击确定时，值给函数，并执行。

• 上层页面容器，嵌套并继承相关属性，布局设置，只显示按钮。

• 连线将参数传递给接口，触发执行接口。
  

UIOTOS中通过嵌套和继承，真正实现了页面组件化，封装和复用。这里还能将上层的接口，也放到内嵌页中。省去两个按钮的4条连线操作。

步骤3：弹窗历史曲线查询

NodeRed中有通过MQTT传入时间段，查询历史数据并返回。如下所示：

nodered历史数据查询流程

UIOTOS中页面由接口、日期时间、曲线、函数等组件构成。初始加载时，最近5分钟默认传入，返回结果经解析更新到曲线，且页面嵌套给对话框。

uiotos历史曲线实现流程

小结

本节示例界面非常简单。主要目的在于打通设备（模拟）→ 采集后端 → 前端应用的一个小闭环。

从这里可以看出，UIOTOS前端零代码+NodeRed后端低代码，在硬件、电气等物联网、工业互联网场景，是一个可行且便利的完整应用方案。

下一篇，将在本节基础上继续深化，提供更丰富、复杂、多样的应用搭建效果。

（示例/源码/授权）