基於 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 的向量《向量手冊》解決方案，《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 。

除了 HT for Web 外，我們還開發了開源免費的 HTML5 遊戲引擎工具 QICI Engine： https://github.com/qiciengine/qiciengine ，對前端圖形、遊戲技術感興趣的同學，不妨來認識一下：http://www.hightopo.com/demo/joinus/ 、http://www.hightopo.com/joinus.html 歡迎手機號加我微信，或給我郵件，非常感謝！