和时间赛跑，Operations Hub助攻用户快速建立数字化应用场景

GE 数字集团系统架构师 刘尊义

之前我们介绍了GE Proficy Historian采集器管理的REST API接口——《Historian 新功能全解读，远程管理干货一次GET》，我今天将为大家介绍GE Proficy产品家族的颜值担当Operations Hub的REST API接口，通过一个示例带大家领略GE Proficy产品家族新成员Operations Hub的魅力。

Operations Hub是GE Digital最新推出的以高效开发工业应用为目标的工业互联网综合开发平台。Operations Hub可以融合复杂的工业生产运营信息OT以及生产管理信息IT，帮助用户快速建立数字化应用场景，并提高生产力。

功能简介

Operations Hub通过REST API、SQL、MQTT以及OPC UA连接不同控制系统或业务系统，与GE Proficy产品家族Plant Applications、Historian、Workflow、HMI/SCADA等无缝融合，并可以为控制系统的扁平化标签建立资产模型，具备系统集成和前端可视化的双重能力。

Operations Hub另一个重要能力是基于WEB的无代码化开发。基于WEB 意味着无论是应用的开发还是使用我们都可以在浏览器中完成，不需要再安装任何客户端。无代码化开发则意味着我们可以像搭积木一样开发个性化应用。

不止如此，Operations Hub还可以一次性开发出适用于PC、Pad和手机端的应用，它在不同的终端上可以按照不同的布局显示，甚至可以在不同的终端上显示不同的控件组合。

特别提醒

Operations Hub是部署在用户本地的IIoT开发平台，因此，部署在什么环境可以由用户进行选择，平台的部署过程也如同安装一个Office软件一样简单。

前期准备

该示例是某客户的真实应用需求，他们需要在能源管理系统中植入实时天气数据，我们将通过Operations Hub的REST API接口测试天气数据提供商的接口服务，实现下面的可视化效果。

实时天气部分的放大效果如下：

为了完成测试，我们需要在天气数据供应商处申请Token令牌，该供应商API提供的天气数据是以坐标经纬度作为查询条件的，因此，我们还需要准备一个全国各地区的经纬度列表。

同时，对于天气的代码解析，我们分别需要不同的字典进行解释，包括气象、风向、风力等。

应用的画面布局

图片

用户场景的实现往往是从头脑风暴开始的，可视化是最能体现需求的输出，我们制作这个示例的第一步也将会从可视化布局开始。

下图就是Operations Hub的设计器，我们首先通过浏览器进入Operations Hub设计器，添加一个新的应用。

非常简单，只需要我们输入应用的名称和描述即可。

创建成功后，参照创建应用的方法，我们添加一个新页面。为了增强美观度我们为这个应用设置一个主题背景。

然后就是我们创建布局的过程，需要说明一下，Operations Hub的布局是用一个个可以分级嵌套或平铺的容器来包含各种不同的小控件，这些容器也可以类似表格进行行列分布和单元格合并。

我们先从设计器左侧的控件栏拖拽一个容器，并将这个容器设置为6列2行，将上面一行合并单元格，从控件栏拖拽一个标题控件，将显示修改为“能源管理系统”，在“可见”标签设置属性的居中和颜色等。

我们再从设计器左侧的控件栏拖拽一个容器到上一级容器下面一行最右侧的单元格作为天气的可视化窗格。将这个容器设置为3列6行，按照下图合并单元格，单元格的合并只需单击相应的

图标即可完成。

我们继续为这一布局添加相应的控件，完成静态布局。

分别在最上面一行、第二行左侧、第三行右侧、第三行和第四行左右两侧拖拽“标题”控件，并修改显示的文字和颜色。在第三行的中间位置拖拽一个“图像”控件。在最下面一行的三个单元格分别拖拽一个“下拉”控件。最终静态效果如下图：

我们在这个过程中可以体验到，静态布局完全是通过拖拽和设置完成的，没有写一句代码，就像制作PPT一样简单。

应用数据准备

我们需要一些基础数据作为行政区和经纬度选择的数据字典，以及不同的气象显示的图标。

先分别建立省、市、县三级行政区的实体，我们在设计器的实体菜单添加新实体并为实体命名，并按照下图设置每个实体的字段：

再分别添加气象代码、风向角度、风力速度的实体，并按照下图设置每个实体的字段：

实体添加完成后，我们就可以分别把文章后面附加的对应文件导入相应的实体，导入过程只需要在“编辑实体结构”页面通过“编辑实体行”的“导入Excel”入口选择相应的Excel文件即可。

导入完成后应该是类似下图的有记录的实体：

需要注意的是，气象图标的URL地址因为服务器的变化需要重新导入，大家可以自己利用Operations Hub制作一个图片管理后台来导入图标，可以参考下图，具体过程请大家参考本示例自行制作。

应用的接口数据源设置

接下来就是最关键的部分，从接口获取数据，接口设置是与REST API的接口提供者建立连接过程的第一步。

我们在设计器的数据源菜单添加一个新数据源。在这里设置数据源的基础URL和验证信息，这次使用的REST API不需要接口验证，都保持为空即可，设置参考如下:

应用的查询设置

查询是Operations Hub的前后台数据交互的指令，APP可视化页面的所有动态数据都需要通过查询完成。

我们先来完成最关键的通过REST API获取天气数据的查询，在这一步中也会同步自动创建天气数据对应的实体，需要特别说明，通过REST API接口获取数据，尽管数据不会同步到本地，但同样要求必须有与接口服务字段对应的实体承载从接口获取的数据集。

在设计器的“查询”菜单下“添加新查询”，输入自定义的查询名称，并选择查询类型为“REST”，在弹出的详细选项中，选择数据源为前面创建的数据源，基础URL会自动根据数据源带出，我们在查询URL中输入实时天气接口的查询URL如下：

/v2.5/TAkhjf8d1nlSlspN/location/realtime.json

“TAkhjf8d1nlSlspN”就是从该供应商API获取的Token，请大家自己申请并替换以上示例Token。

“location”是路径参数的键名，是一个变量，以这个键名，我们在查询中添加路径参数，“键”名输入“Location”，类型选择“输入字段”，这样我们就可以在页面中将“location”作为查询条件，传递经纬度参数，我们还可以在默认值或测试值中输入一个默认的经纬度值。

我们为了保证接口传递数据的可读性，还需要添加一个固定值的查询参数“lang”为“en_US”。

设置完成后，运行请求，在执行结果中确认接口可以正常获取数据，然后我们通过“从结果中创建实体”按钮一键自动创建对应的实体，在弹出的创建实体窗口输入实体名称即可自动创建字段一一对应的实体，是不是非常的便捷！

之后保存这个查询，并完成下列3个下拉框选项需要用到的查询：

再完成下列4个天气对照选项需要用到的查询：

页面查询导入

接下来，需要把前面布局好的页面会用到的查寻导入这个页面，在页面布局的右侧属性栏选择“页面数据”选项卡，我们在这里把前面创建的天气REST接口查询、3个省市县下拉框查询以及4个天气对照查询通过“增加”按钮导入到这个页面，并为每一个查询选择“自动提交”和“输入更改时自动提交”复选框。

页面查询和页面控件的链接

下面我们将会把页面中的动态控件与查询的输入或输出链接，实现数据动态刷新。

1.链接“省”、“市”、“县”下拉框

从页面数据的“XX_GetProvince”查询下拖拽两次输出“XX_GetProvince.province”到“省”下拉框上释放。

在弹出的链接选项窗口分别选择绑定“值”和“显示”

这时，我们可以选中“省”下拉框，在其属性选项卡可以看到，数据的值和显示已经分别链接到“XX_GetProvince.province”，可以为这个下拉框设置一个默认值“北京市”，同时为了实现查询之间的数据传递，还需要为“省”下拉框设置一个ID如“Province”，并选中“全局数据”复选框，这样我们就可以在页面数据的全局选项下发现新增了一个UI全局“XXXX-Province”。

同样的步骤，将“市”、“县”下拉框分别与“XX_GetCity.City”和“XX_GetTown.Town”链接，设置下拉框的ID并选中“全局数据”，但需要特别注意，因为“县”下拉框的选择需要触发经纬度数据到天气查询API的经纬度路径参数，所以，需要在“县”下拉框中绑定“XX_GetTown.location”为值，全局值的ID也需要设置为“Location”传递经纬度数值，同样，在默认选项中也需要传递的是经纬度数值。这样，在页面数据-UI全局下会共发现三个全局数据，分别是：

2.链接图像控件

从查询“XXX_GetWeather”中拖拽输出“XXX_GetWeather.ico”到图像控件释放。

3.拖拽链接标题控件

分别拖拽查询“XXX_GetTown”、“XXX_GetWeather”和“XXX_GetWindPower”下的输出“XXX_GetTown.address”、“XXX_GetWeather.phenomenon”和“XXX_GetWindPower.description”到相应的标题控件释放，完成后效果如下图：

4.公式链接标题控件

需要用公式方式链接的标题控件分别是气温、湿度、空气指数和风向风力，用公式的主要母的是实现文字和字段的拼写，公式的设置通过选择相应的标题控件，在控件属性的数据栏选择公式并添加公式。

显示气温的标题控件公式编辑如下：

显示湿度的标题控件公式编辑如下：

显示空气指数的标题控件公式编辑如下：

显示风力风向的标题控件公式编辑如下：

5.全局数据关联

以上的链接只是实现了字段关系的绑定，但一个完整的查询还需要查询的条件输入，在这个天气查询模块中都是通过下拉框的输出作为输入条件，实现方式如下。

我们在页面数据选项卡，将查询“XXX_GetCity”的输入“Province”拖拽到UI全局“XXXX_Province”；将查询“XXX_GetTown”的输入“Province”也拖拽到UI全局“XXXX_Province”, 输入“City”拖拽到UI全局“XXXX_City”；将查询“XXX_CaiyunWeather”的输入“location”拖拽到UI全局“XXXX_Location”。

完成后我们可以看到全局数据建立了关联关系如下图：

6.天气数据对照查询输入传递

这是最后一步，我们需要把REST API接口获取的数据与气象、风向、风力、空气质量对照实体进行关联查询，获得需要显示到画面上的字段值。

在这里，我们需要借用布局中的中继器和输入控件，先把一个中继器拖拽到页面的底端，将显示属性的“已隐藏”复选框勾选，并在中继器的数据流中选择“XXX_CaiyunWeather”。

之后往这个中继器中拖拽7个输入控件，分别按照下表设置输入的控件目标数据和源数据。

运行和测试

激动人心的时刻到来啦！让我们保存并打开应用浏览一下效果吧！

当然，在设计过程中我们需要随时进行保存，也可以随时打开应用查看效果。感兴趣的同学也可以尝试使用Operations Hub的更多控件，当然，也鼓励大家自己开发功能更丰富的控件在这个平台上实用，从而开发出更多实用的APP。

总结

我们可以通过以上的示例测试了解，GE Proficy Operations Hub能够非常方便的帮助我们融合不同来源的数据，快速搭建可视化应用的场景，大大缩短系统上线的时间。

如果大家对Operations Hub

或者GE Digital的其它软件产品感兴趣，

或者需要我们提供哪些技术分享，

可以随时与GE Digital联系。