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后端低代码，在硬件、电气等物联网、工业互联网场景，是一个可行且便利的完整应用方案。
下一篇，将在本节基础上继续深化，提供更丰富、复杂、多样的应用搭建效果。
