HTML5 技術在風電、光伏等新能源領域的應用

時間 2019-11-09

原文原文鏈接

隨着新一輪工業革命興起，應對氣候變化日益成爲全球共識，能源技術正在成爲引領能源產業變革、實現創新驅動發展的源動力。從全球到中國，以風能、光伏發電爲表明的新能源產業發展迅速，可再生能源發電與現代電網的融合成爲了世界能源可持續轉型的核心，發電技術繼續沿着大規模、高效率和低成本方向持續進步，中國在風能和光伏發電領域的累計裝機量和新增裝機量已經躍居世界首位。html

相比傳統能源穩定、可控的生產方式，風能、太陽能自己具備先天的不可預測性，很大程度上要「靠天吃飯」，所以構建一個集物聯網、大數據、雲計算於一體的新能源設備管理平臺，提高設備「能量可利用率」與「時間可利用率」，成爲企業自身乃至整個新能源產業帶來運營管理方式升級與轉型的關鍵，其中必不可少的就是前端大數據可視化的重要環節。前端

如下是致創能源公司多年前基於 HT for Web 技術實現的 Web SCADA 光伏發電站智能管理解決方案系統截圖：node

基於 HT for Web 的 HTML5 技術除了在傳統電信、電力和工業控制領域的應用外（參見《基於HT for Web的Web SCADA工控移動應用》），現在也已普遍應用於風電、光伏等新能源領域，基於 Web 技術的 HT for Web 自然就是現在物聯網監控的 PaaS 和 SaaS 雲平臺服務首選方案，這裏咱們將基於一家國內首批採用微軟智能雲上 Azure IoT 套件，整合圖撲軟件 HT for Web 前端圖形界面組件中間件，成功打造的 Power+ 物聯網監控雲端大數據平臺的一個光伏監控界面爲例，爲你們介紹這個已陸續應用於全國各地 1,000 餘颱風力發電機組和 5,000 餘臺光伏逆變器和匯流箱的系統前端技術。git

咱們將具體介紹的頁面最終呈現效果以下，HT for Web 官網例子中心的 http://www.hightopo.com/demo/pv/index.html 例子進行體驗。github

最初獲得設計師的設計稿後，很容易看得出總體界面由兩部分構成，上頭部分的彙總統計信息，以及下半部分的具體匯流箱詳細信息展現。上半部分除了顯示實時彙總信息外，還具有點擊可過濾下部分匯流箱功能，而下半部分因爲數據量衆多，會有幾百甚至上千個匯流箱，所以須要可縮放、平移和鷹眼等操做功能。算法

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

對於匯流箱咱們須要設計一個如上圖所示的矢量圖標，這並不難，採用 HT 矢量編輯器器三下五除二就搞定，而後設置好圖形中顏色、文字、大小等圖形參數與業務參數的數據綁定，具體數據綁定格式可參見《HT for Web 數據綁定手冊》的介紹的 JSON 格式，而後運行時只須要將後臺獲得的實時數據設置到圖元的相關綁定屬性便可。微信

雖然在《數百個 HTML5 例子學習 HT 圖形組件 – 拓撲圖篇》已經解釋了 HT for Web 採用的 MVP/MVVM 數據模型設計架構，但仍是有很多剛入門 Web 應用開發的同窗詢問 HT 如何與後臺通信實時採集數據，正好藉此例子稍微展開說明下，在 http://www.hightopo.com/demo/pv/index.html 例子中，你們會注意到如下 basicData 和 realTimeData 兩個數據：網絡

這兩個數據值在 demo 中寫死值的，而實際運行中是經過後臺傳輸數據而來，這些年愈來愈多基於 HTML5 的實時監控系統都採用了 WebSocket 的方案，已達到獲取數據的實時性，本案例的客戶也不例外，前面提到了他們採用了微軟智能雲的 Azure IoT 套件，所以採用基於 .NET 的 ASP.NET SignalR （https://github.com/SignalR/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);
    });                        
}

頁面打打開是，系統先在 CreateData 函數中根據 basicData 的信息，構建出幾百個匯流箱圖元，而且經過 node.setImage('symbols/enjoy/pv/pv-box.json'); 將圖元設置上咱們構建好的匯流箱矢量，而後經過例子中簡單擴展的佈局算法，將幾百個匯流箱設備進行矩陣排版，固然遇到複雜的網絡拓撲圖你能夠採用 HT 的自動佈局來排布：http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html。

這裏還需注意的一點咱們在構建圖元時經過 node.setTag(data.deviceCode) 設置了每一個圖元的 Tag 標籤，這點很重要，這是用來後續能夠快速查找到相應圖元進行數據更新作準備。

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')
            });                                                                
        }
    });  
}

以上工做完成後界面已經能顯示全部光伏匯流箱設備了，但每一個設備顯示的參數信息都是咱們構建矢量圖標時設置的初始化，並非真正的實時運行值，所以咱們須要根據後臺實時推送過來的數據，對圖元進行數據更新，在以上 fillData 函數咱們解析了 realTimeData 數據，而後遍歷每一個匯流箱數據，經過 dataModel.getDataByTag(deviceCode) 找到相應圖元，設置上相應的 attr 屬性，而這些屬性因爲在矢量設計時已經綁定好相應的圖形參數，所以當設置上全部數據後，拓撲圖上相應的每一個匯流箱就能自動顯示出真正的實時數據了。

這個例子咱們只更新了一次實時數據，但正常的系統會經過 AJAX 間幾秒輪詢，或者採用 WebSocket 由後臺在有變化的狀況下實時推送到前端，而後屢次調用 fillDatas 函數進行數據更新，另外這個界面場景內容是經過第一次的 basicData 查詢數據後動態構建，若是你已經有拓撲圖序列化的 JSON 數據了，你只須要經過反序列化便可構建拓撲圖場景，序列化反序列化可參考：http://www.hightopo.com/guide/guide/core/serialization/ht-serialization-guide.html

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

剛開始看這個設計稿，很天然想到面板和操做按鈕的東西採用 HT for Web 的面板組件便可搞定：http://www.hightopo.com/guide/guide/plugin/form/ht-form-guide.html ，不事後來想一想通用組件的風格比較固定，哪怕定製出效果也很難應對多變的需求，突發奇想其實咱們照樣能夠採用 HT for Web 的 GraphView 拓撲圖組件來幹這事，上面的文字無非就是 ht.Text 圖元，進度條也就是 shape 類型爲 rect 的 Node 節點，而過濾控制按鈕其實也只一堆 Node 圖元，只不過咱們設置了不一樣背景色，將 label 標籤居中顯示，同時將圖元選中效果由邊框改成 shadow 的陰影選中效果便可大功告成，並且因爲是拓撲圖的佈局，所以無論佈局位置或者界面風格的需求變化，用戶均可以很容易妥妥拽拽，設置下新風格參數便可搞定多變的業務展現需求

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 函數搞定，注意這裏咱們經過 ht.Default.xhrLoad('displays/enjoy/pv/pv-header.json 直接加載已經序列化好的拓撲圖信息，而後因爲該彙總面板惟一須要的交互就是點擊選中分類按鈕進行過濾，因而咱們經過 header.setInteractors(null); 直接關閉了全部 HT for Web 的默認交互，而後經過添加 mousedown 和 touchstart 的原生 HTML 監聽事件自定義交互邏輯，這裏只須要經過 header.getDataAt(event) 傳入不論是 touch 仍是 mouse 事件，HT 自動回返回當前操做點下的圖元，後續過濾已經動畫的邏輯比較簡單，這裏就不展開說明了，有興趣的能夠改形成更帶感的過濾動畫布局效果，可參考《透過WebGL 3D看動畫Easing函數本質》一文了解 HT for Web 的各類預製的動畫功能。

這裏咱們僅演示了光伏的一個頁面效果，風電的風機也能夠採用相似的方式呈現，例如 http://www.hightopo.com/demo/fan/index.html 這個上萬個矢量風機實時轉動的 HTML5 性能效果，也能夠結合例如百度地圖、OpenLayers 或 GoogleMap 等地圖方案呈現風機或光伏監控畫面：

對於看膩了 2D 矢量風機的，你也能夠來個 3D 的風機感覺下效果：http://www.hightopo.com/demo/windTurbines/index.html ，這個採用 HT for Web 實現的 3D 可旋轉風機 HTML5 的代碼也就寥寥幾十行，今天篇幅有限先不展開介紹了，你們就先玩玩 demo 。

寫到此刻正好是 2017 年元宵，圖撲軟件團隊給祝各位讀者拜個晚年好，除了 HT for Web 外，咱們還開發了開源免費的 HTML5 遊戲引擎工具 QICI Engine： https://github.com/qiciengine/qiciengine ，對前端圖形、遊戲技術感興趣的同窗，不煩來認識一下：http://www.hightopo.com/joinus.html 歡迎手機號加我微信，或給我郵件，很是感謝！