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聯繫。
