詳細介紹HTML5技術(shù)在風電、光伏等新能源領(lǐng)域的應用（圖）

相比傳統(tǒng)能源穩(wěn)定、可控的生產(chǎn)方式，風能、太陽能本身具有先天的不可預測性，很大程度上要“靠天吃飯”，因此構(gòu)建一個集物聯(lián)網(wǎng)、大數(shù)據(jù)、云計算于一體的新能源設(shè)備管理平臺，提升設(shè)備“能量可利用率”與“時間可利用率”，成為企業(yè)自身乃至整個新能源產(chǎn)業(yè)帶來運營管理方式升級與轉(zhuǎn)型的關(guān)鍵，其中必不可少的就是前端大數(shù)據(jù)可視化的重要環(huán)節(jié)。

以下是致創(chuàng)能源公司多年前基于 HT for Web 技術(shù)實現(xiàn)的 Web SCADA 光伏發(fā)電站智能管理解決方案系統(tǒng)截圖：

基于 HT for Web 的 HTML5 技術(shù)除了在傳統(tǒng)電信、電力和工業(yè)控制領(lǐng)域的應用外（參見《基于HT for Web的Web SCADA工控移動應用》），如今也已廣泛應用于風電、光伏等新能源領(lǐng)域，基于 Web 技術(shù)的 HT for Web 天然就是如今物聯(lián)網(wǎng)監(jiān)控的 PaaS 和 SaaS 云平臺服務首選方案，這里我們將基于一家國內(nèi)首批采用微軟智能云上 Azure IoT 套件，整合圖撲軟件 HT for Web 前端圖形界面組件中間件，成功打造的 Power+ 物聯(lián)網(wǎng)監(jiān)控云端大數(shù)據(jù)平臺的一個光伏監(jiān)控界面為例，為大家介紹這個已陸續(xù)應用于全國各地 1,000 余臺風力發(fā)電機組和 5,000 余臺光伏逆變器和匯流箱的系統(tǒng)前端技術(shù)。

我們將具體介紹的頁面最終呈現(xiàn)效果如下，HT for Web 官網(wǎng)例子中心的 例子進行體驗。

最初得到設(shè)計師的設(shè)計稿后，很容易看得出整體界面由兩部分構(gòu)成，上頭部分的匯總統(tǒng)計信息，以及下半部分的具體匯流箱詳細信息展示。上半部分除了顯示實時匯總信息外，還具備點擊可過濾下部分匯流箱功能，而下半部分由于數(shù)據(jù)量眾多，會有幾百甚至上千個匯流箱，因此需要可縮放、平移和鷹眼等操作功能。

有上面的分析很容易得出下半部分肯定由 HT for Web 的 GraphView 拓撲圖組件來實現(xiàn)合適，并且客戶提出每個匯流箱需要能顯示出所有重要指標的詳細信息，并且顯示需求可能存在多變性，因此采用簡單的 Node 節(jié)點，通過圖片、文字、冒泡、告警染色這些基本功能來顯示肯定是不夠的，這種需求就非常合適采用 HT for Web 的矢量 www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html 解決方案，《HT圖形組件設(shè)計之道》系列中已詳細闡述了基本原理這里就不再展開了。

對于匯流箱我們需要設(shè)計一個如上圖所示的矢量圖標，這并不難，采用 HT 矢量編輯器器三下五除二就搞定，然后設(shè)置好圖形中顏色、文字、大小等圖形參數(shù)與業(yè)務參數(shù)的數(shù)據(jù)綁定，然后運行時只需要將后臺得到的實時數(shù)據(jù)設(shè)置到圖元的相關(guān)綁定屬性即可。

雖然在《數(shù)百個 HTML5 例子學習 HT 圖形組件 – 拓撲圖篇》已經(jīng)解釋了 HT for Web 采用的 MVP/MVVM 數(shù)據(jù)模型設(shè)計架構(gòu)，但還是有不少剛?cè)腴T Web 應用開發(fā)的同學詢問 HT 如何與后臺通訊實時采集數(shù)據(jù)，正好借此例子稍微展開說明下，大家會注意到以下 basicData 和 realTimeData 兩個數(shù)據(jù)：

這兩個數(shù)據(jù)值在 demo 中寫死值的，而實際運行中是通過后臺傳輸數(shù)據(jù)而來，這些年越來越多基于 HTML5 的實時監(jiān)控系統(tǒng)都采用了 WebSocket 的方案，已達到獲取數(shù)據(jù)的實時性，本案例的客戶也不例外，前面提到了他們采用了微軟智能云的 Azure IoT 套件，因此采用基于 .NET 的 ASP.NET SignalR 自然是他們采用的 WebSocket 框架方案。

function createDatas() {
 json = JSON.parse(basicData);
 json.result.forEach(function(data) { var node = new ht.Node();
 node.setImage('symbols/enjoy/pv/pv-box.json');
 node.s({ 'select.color': 'white', '2d.selectable': false
 });
 node.a({
 deviceName: data.deviceName,
 capacity: data.capacity + 'KW',
 raw_capacity: data.capacity
 });
 node.setTag(data.deviceCode);
 graphView.getDataModel().add(node);
 }); 
}

頁面打打開是，系統(tǒng)先在 CreateData 函數(shù)中根據(jù) basicData 的信息，構(gòu)建出幾百個匯流箱圖元，并且通過 node.setImage('symbols/enjoy/pv/pv-box.json'); 將圖元設(shè)置上我們構(gòu)建好的匯流箱矢量，然后通過例子中簡單擴展的布局算法，將幾百個匯流箱設(shè)備進行矩陣排版，當然遇到復雜的網(wǎng)絡(luò)拓撲圖你可以采用 HT 的自動布局來排布：

這里還需注意的一點我們在構(gòu)建圖元時通過 node.setTag(data.deviceCode) 設(shè)置了每個圖元的 Tag 標簽，這點很重要，這是用來后續(xù)可以快速查找到相應圖元進行數(shù)據(jù)更新做準備。

function fillDatas() { 
var hlx_state_0 = hlx_state_1 = hlx_state_2 = hlx_state_3 = 0; 
var zc_state_1 = zc_state_2 = zc_state_3 = 0;

 json = JSON.parse(realTimeData); 
 json.result.wtrtDatas.forEach(function(data) { 
 var comboxRTDto = data.comboxRTDto; 
 var node = graphView.getDataModel().getDataByTag(comboxRTDto.deviceCode); 
 if (node) { 
 var hlxState = comboxRTDto.pvDeviceStCode; 
 node.a({
 hlxState: hlxStateMap[hlxState],
 discreteRate: comboxRTDto.discreteRate + '%',
 outputPower: comboxRTDto.outputPower + 'KW',
 percentage: comboxRTDto.outputPower / node.a('raw_capacity')
 }); 
 }
 }); 
}

以上工作完成后界面已經(jīng)能顯示所有光伏匯流箱設(shè)備了，但每個設(shè)備顯示的參數(shù)信息都是我們構(gòu)建矢量圖標時設(shè)置的初始化，并不是真正的實時運行值，因此我們需要根據(jù)后臺實時推送過來的數(shù)據(jù)，對圖元進行數(shù)據(jù)更新，在以上 fillData 函數(shù)我們解析了 realTimeData 數(shù)據(jù)，然后遍歷每個匯流箱數(shù)據(jù)，通過 dataModel.getDataByTag(deviceCode) 找到相應圖元，設(shè)置上相應的 attr 屬性，而這些屬性由于在矢量設(shè)計時已經(jīng)綁定好相應的圖形參數(shù)，因此當設(shè)置上所有數(shù)據(jù)后，拓撲圖上相應的每個匯流箱就能自動顯示出真正的實時數(shù)據(jù)了。

這個例子我們只更新了一次實時數(shù)據(jù)，但正常的系統(tǒng)會通過 AJAX 間幾秒輪詢，或者采用 WebSocket 由后臺在有變化的情況下實時推送到前端，然后多次調(diào)用 fillDatas 函數(shù)進行數(shù)據(jù)更新，另外這個界面場景內(nèi)容是通過第一次的 basicData 查詢數(shù)據(jù)后動態(tài)構(gòu)建，如果你已經(jīng)有拓撲圖序列化的 JSON 數(shù)據(jù)了，你只需要通過反序列化即可構(gòu)建拓撲圖場景，序列化反序列化

做完以上我們還僅是完成了一半的工作，記得我們還有個上半部分的匯總和過濾面板：

剛開始看這個設(shè)計稿，很自然想到面板和操作按鈕的東西采用 HT for Web 的面板組件即可搞定：www.hightopo.com/guide/guide/plugin/form/ht-form-guide.html ，不過后來想想通用組件的風格比較固定，哪怕定制出效果也很難應對多變的需求，突發(fā)奇想其實我們照樣可以采用 HT for Web 的 GraphView 拓撲圖組件來干這事，上面的文字無非就是 ht.Text 圖元，進度條也就是 shape 類型為 rect 的 Node 節(jié)點，而過濾控制按鈕其實也只一堆 Node 圖元，只不過我們設(shè)置了不同背景色，將 label 標簽居中顯示，同時將圖元選中效果由邊框改為 shadow 的陰影選中效果即可大功告成，而且由于是拓撲圖的布局，因此不管布局位置或者界面風格的需求變化，用戶都可以很容易妥妥拽拽，設(shè)置下新風格參數(shù)即可搞定多變的業(yè)務展示需求

function createHeader() {
 header = new ht.graph.GraphView(); 
 ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json', function(json) {
 header.getDataModel().deserialize(json); 
 header.getDataModel().setBackground(undefined);
 createDatas();
 fillDatas(); 
 layoutDatas(); 
 });
 header.setInteractors(null); 
 var handleClick = function(e) { 
 if (!graphView.getView().contains(e.target)) { 
 var data = header.getDataAt(e);
 header.sm().ss(data); 
 }
 };
 document.body.addEventListener('mousedown', handleClick, false);
 document.body.addEventListener('touchstart', handleClick, false); 
}

匯總部分就是有以上 createHeader 函數(shù)搞定，注意這里我們通過 ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json 直接加載已經(jīng)序列化好的拓撲圖信息，然后由于該匯總面板唯一需要的交互就是點擊選中分類按鈕進行過濾，于是我們通過 header.setInteractors(null); 直接關(guān)閉了所有 HT for Web 的默認交互，然后通過添加 mousedown 和 touchstart 的原生 HTML 監(jiān)聽事件自定義交互邏輯，這里只需要通過 header.getDataAt(event) 傳入不管是 touch 還是 mouse 事件，HT 自動回返回當前操作點下的圖元，后續(xù)過濾已經(jīng)動畫的邏輯比較簡單，這里就不展開說明了，有興趣的可以改造成更帶感的過濾動畫布局效果，可參考《透過WebGL 3D看動畫Easing函數(shù)本質(zhì)》一文了解 HT for Web 的各種預制的動畫功能。

這里我們僅演示了光伏的一個頁面效果，風電的風機也可以采用類似的方式呈現(xiàn)，這個上萬個矢量風機實時轉(zhuǎn)動的 HTML5 性能效果，也可以結(jié)合例如百度地圖、OpenLayers 或 GoogleMap 等地圖方案呈現(xiàn)風機或光伏監(jiān)控畫面：

對于看膩了 2D 矢量風機的，這個采用 HT for Web 實現(xiàn)的 3D 可旋轉(zhuǎn)風機 HTML5 的代碼也就寥寥幾十行，今天篇幅有限先不展開介紹了，大家就先玩玩 demo 。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com