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

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

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

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

 

基於 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 余台光伏逆變器和匯流箱的系統前端技術。

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

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

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

對於匯流箱我們需要設計一個如上圖所示的矢量圖標，這並不難，采用 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 歡迎手機號加我微信，或給我郵件，非常感謝！