天天看點

基于 HTML5 實作的風電、光伏新能源管理系統

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

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

以下是緻創能源公司多年前基于 HT for Web 技術實作的 Web SCADA 光伏發電站智能管了解決方案系統截圖:

基于 HTML5 實作的風電、光伏新能源管理系統
基于 HTML5 實作的風電、光伏新能源管理系統

基于 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 例子進行體驗。

基于 HTML5 實作的風電、光伏新能源管理系統

最初得到設計師的設計稿後,很容易看得出整體界面由兩部分構成,上頭部分的彙總統計資訊,以及下半部分的具體彙流箱詳細資訊展示。上半部分除了顯示實時彙總資訊外,還具備點選可過濾下部分彙流箱功能,而下半部分由于資料量衆多,會有幾百甚至上千個彙流箱,是以需要可縮放、平移和鷹眼等操作功能。

有上面的分析很容易得出下半部分肯定由 HT for Web 的 GraphView 拓撲圖元件來實作合适,并且客戶提出每個彙流箱需要能顯示出所有重要名額的詳細資訊,并且顯示需求可能存在多變性,是以采用簡單的 Node 節點,通過圖檔、文字、冒泡、告警染色這些基本功能來顯示肯定是不夠的,這種需求就非常合适采用 HT for Web 的矢量《矢量手冊》解決方案,《HT圖形元件設計之道》系列中已詳細闡述了基本原理這裡就不再展開了。

基于 HTML5 實作的風電、光伏新能源管理系統

對于彙流箱我們需要設計一個如上圖所示的矢量圖示,這并不難,采用 HT 矢量編輯器器三下五除二就搞定,然後設定好圖形中顔色、文字、大小等圖形參數與業務參數的資料綁定,具體資料綁定格式可參見《HT for Web 資料綁定手冊》的介紹的 JSON 格式,然後運作時隻需要将背景得到的實時資料設定到圖元的相關綁定屬性即可。

雖然在《數百個 HTML5 例子學習 HT 圖形元件 – 拓撲圖篇》已經解釋了 HT for Web 采用的 MVP/MVVM 資料模型設計架構,但還是有不少剛入門 Web 應用開發的同學詢問 HT 如何與背景通訊實時采集資料,正好借此例子稍微展開說明下,在 http://www.hightopo.com/demo/pv/index.html 例子中,大家會注意到以下 basicData 和 realTimeData 兩個資料:

基于 HTML5 實作的風電、光伏新能源管理系統

這兩個資料值在 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

做完以上我們還僅是完成了一半的工作,記得我們還有個上半部分的彙總和過濾面闆:

基于 HTML5 實作的風電、光伏新能源管理系統

剛開始看這個設計稿,很自然想到面闆和操作按鈕的東西采用 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 等地圖方案呈現風機或光伏監控畫面:

基于 HTML5 實作的風電、光伏新能源管理系統
基于 HTML5 實作的風電、光伏新能源管理系統

對于看膩了 2D 矢量風機的,你也可以來個 3D 的風機感受下效果:http://www.hightopo.com/demo/windTurbines/index.html ,這個采用 HT for Web 實作的 3D 可旋轉風機 HTML5 的代碼也就寥寥幾十行,今天篇幅有限先不展開介紹了,大家就先玩玩 demo 。

基于 HTML5 實作的風電、光伏新能源管理系統

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

基于 HTML5 實作的風電、光伏新能源管理系統

繼續閱讀