面向電力系統的可視化頁面編輯引擎①

陳月燕,鄒 慶,黃 昆,3

1(南瑞集團有限公司(國網電力科學研究院有限公司),南京 211106)

2(國電南瑞科技股份有限公司,南京 211106)

3(智能電網保護和運行控制國家重點實驗室,南京 211106)

電力行業是關系到國計民生的基礎性行業,是其他行業的基礎保障,從電力生產、輸、配、變、營銷以及管理等各個環節,從傳統電力系統到新型電力系統的建設轉型,電力信息化的需求越來越多.就目前的電力系統前端領域來說,Web 端頁面代碼還是依靠前端開發者手工編寫,開發方式存在效率低下、技術門檻高等問題,極大地制約了開發者的工作效率.尤其是前端技術的飛速發展,各種技術和框架如雨后春筍般不斷地涌出,開發難度和復雜度在逐年的增加,這就要求開發人員即要不斷學習新知識以適應技術的革新,又要不斷地按照用戶的需求更新功能、維護已有的產品功能,同時還要不斷地應對電力系統業務需求的不斷變更,往往一個系統就需要十幾人甚至上百人共同開發維護.因此,如何減少重復開發、縮短迭代周期、降低開發難度,讓非專業前端技術人員也能快速實現頁面的開發成為了企業思考的一個重要方向.國內已有不少這方面的探討和研究,文獻[1-4]設計實現了可視化頁面編輯軟件開發工具,實現了針對特定類型業務場景比如表單、Echarts 圖表等的可視化編輯,避免了其項目中反復開發一些重復性高的功能,提高了開發效率.而電力系統中可視化平臺軟件的研究主要集中在電力系統專用圖形比如接線圖、潮流圖等方面[5-7].

目前前端業務場景主要在自動化、新能源、物聯網、信息化管理、監測運維系統等方面,相較于金融、交通等行業的業務場景,涉及的范圍更廣、數據量更大、數據類別范圍更廣、穩定性更強,但是電力系統之間存在很大的關聯性,數據、服務等資源可以實現共享,并且與其他行業也存在很大的關聯性.因此,實現資源的積累是應對電力系統需求變更,做出快速響應的一種有效方法.國家電網有限公司于2021年4月15日在北京召開第二季度工作會議,明確提出“一體四翼”發展布局,電網業務要立足構建以新能源為主體的新型電力系統[8],服務碳達峰、碳中和大局.在能源革命和數字革命相融并進,以及“雙碳”目標的大背景下,以新能源為主體的新一代電力系統[9]正在逐步形成.在此背景下,為支持新一代電力系統的快速構建和傳統電力系統的信息化數據的可視化展示、管理與在線運行監測,減少重復開發、提高組件和服務的復用性,實現資源共享和敏捷高效的開發,降低開發門檻.通過對目前諸多電力業務系統的前端開發現狀和需求進行調研分析,基于目前已有的電力系統圖形、GIS地圖、實時監控圖和電力專業技術等進行組態化封裝集成,結合通用可視化頁面元素組件,整合實時庫服務、商用庫服務、業務應用微服務、大數據平臺服務、文件服務等數據服務資源,提供統一的接入方式和數據處理規范,實現電力業務系統不同場景頁面的快速開發和維護.設計實現了一個適用于電力系統非生產大區的低代碼可視化場景頁面編輯引擎平臺.

1 總體架構概述

面向電力系統的可視化頁面編輯引擎(以下簡稱頁面編輯引擎)面向電力系統前端業務,旨在為開發者提供一個簡單易用、界面優美、高效敏捷、智能化的頁面編排和業務邏輯相結合實現的低代碼頁面開發平臺.通過本項目開發者以可視化的方式實現頁面的布局、頁面內容的編排、主題樣式一鍵切換、人機交互業務邏輯處理、多源數據的動態綁定、頁面一鍵發布預覽、多技術前端框架的業務系統集成等,快速開發出電力系統圖形、信息化系統前端頁面、可視化大屏頁面、動態表單、智能報表、GIS 地圖等滿足電力業務系統的不同展示需求,實現了敏捷開發和資源共享,提高了前端開發效率,從而解決人力資源浪費和系統維護不及時的問題.

1.1 系統總體結構設計

系統總體架構采用B/S 架構實現,瀏覽器端和服務器端采用前后端分離的開發模式,實現前后端代碼的解耦[3].從層級結構上設計為4 個層次: 數據訪問層、應用支撐層、可視化設計層和管理集成層.系統總體架構如圖1 所示.

圖1 系統總體架構圖

(1)數據訪問層負責對數據庫和文件系統的讀寫操作,為系統提供一個統一、安全和并發的數據持久機制,并為系統支撐服務層提供數據服務.

(2)應用支撐層主要描述支撐系統的各類組件庫和支撐服務.組件庫為可視化頁面設計提供基礎組件支撐,對于上層客戶端的使用是透明的; 支撐服務通過接口的方式對前端提供數據服務,根據業務系統的需求,提供多種類型的服務接口.

(3)可視化設計層即與用戶交互的界面視圖層,是系統的核心子系統,主要描述頁面可視化編輯的各類功能,主要包括構建頁面動態數據的數據統一模型創建和數據處理服務、頁面編輯流程的各個功能以及提供高可用性和易用性的人機交互操作的功能描述.

(4)管理集成層主要描述業務系統項目、頁面模板、模塊、切片以及權限的管理操作處理流程,提供與業務系統多種集成方式的頁面模板,根據業務系統的前端框架類型選擇對應的集成處理方式.對于同一業務系統的各頁面模板,可以選擇模板管理統一對頁面進行分級、分類、分模塊管理.

1.2 瀏覽器端設計

MVVM (model-view-view model)[10,11]是MVP 模式[12]與WPF 結合的應用方式發展演變而來的一種新型架構框架,是為了解決MVC 模式控制層和視圖層高耦合、未實現真正的分離和重用、視圖無法組件化、代碼復雜性高從而降低開發效率等問題而發展起來的.MVVM 模式將“數據模型雙向綁定”的思想作為核心,視圖和模型之間通過綁定層進行交互,模型和綁定層之間的交互是雙向的,因此視圖和數據的修改會相互作用.MVVM 模式的低耦合性,使得視圖可獨立于模型變化和修改,為實現組件化提供了可能; 另一方面,將視圖邏輯放在綁定層中,實現多視圖共用一段視圖邏輯,開發人員只需要關注數據的變更即可,提高了代碼的可維護性.

傳統的電力系統通常采用經典的MVC 模式[13]實現,模型通過RESTful 風格的接口、數據服務接口等方式與服務端通信,當獲取到數據后通過控制器通知視圖進行更新顯示內容[14],但是隨著業務不斷地擴展,這種模式的缺點越來越突出.從本文的設計目標出發,結合3 種常用設計模式的優缺點,系統前端采用MVVM設計模式,有效的分離出視圖層、視圖數據綁定層、數據層以及功能邏輯層,使各層之間處于高度解耦.系統MVVM 模式的示意圖如圖2 所示.

圖2 MVVM 模式示意圖

1.3 系統功能設計

頁面編輯引擎以組件庫提供的組件為基礎,從后臺服務獲取數據為組件動態賦值,通過可視化拖拽組件快速實現頁面的搭建,生成多種格式的頁面模板為多種技術前端框架的業務系統提供無縫銜接式的集成.系統各部分采用模塊化設計的思想,采用獨立開發和發布的方式,實現各模塊之間的低耦合性,并且在使用上保持生產獨立性,實現按需部署.系統功能設計圖如圖3 所示.

圖3 系統功能設計圖

(1)頁面編輯是系統的核心,提供業務系統前端頁面的可視化編排以及業務邏輯的開發,以拖拽方式實現可視化頁面設計,自動解析生成頁面模板文件,并根據業務系統集成需要生成多種模板格式,實現一鍵發布預覽.

(2)模板管理提供對可視化頁面編輯導出的頁面模板進行分類管理、編輯、刪除、權限控制等一系列管理操作.并且提供給用戶多種推薦布局模板,快速構建頁面整體布局.通過提供頁面集成多個模板作為頁面的子模塊,快速完成頁面的構建,實現組裝式頁面開發.

(3)后端服務提供前端交互接口以及業務邏輯處理,主要包括數據讀寫服務、文件讀取與發布服務、路由管理、模板解析服務、校驗服務等.

2 關鍵技術

針對目前電力系統前端頁面手工編碼開發方式效率低下、無法快速的響應用戶需求的問題和現有可視化頁面編輯的研究現狀.頁面編輯引擎從3 個方面進行著手研究和實現: 第一,研究基于虛擬DOM 的視圖組件化頁面可視化編輯技術,實現頁面快速構建和所見即所得的即時渲染效果,分別從UI 界面的角度和業務邏輯的角度進行分析,將頁面元素進行業務分割,封裝成組件,實現資源復用和共享; 第二,通過研究多源數據統一接入與動態分配技術,實現不同來源的數據按照相同方式接入頁面和多組件數據共享; 第三,研究基于多類型模板的場景頁面生成和解析技術,將頁面元素、后臺數據和交互業務邏輯處理腳本進行規范性的整合生成場景頁面描述模板,實現頁面的規范性和最大程度上的復用性.根據業務系統的前端框架技術不同,提供不同的頁面模板格式,實現與多種技術前端框架系統集成.

2.1 基于組態的可視化頁面編輯技術

前端組件化[15]的出現和基于組件的研發鏈路的廣泛應用為頁面可視化構建提供了最底層的保障,降低了系統的耦合度.構建可復用的組件庫為可視化頁面設計搭建提供基礎的頁面元素支撐,頁面的組件化劃分有利于統一管理,出現問題進行統一修改和替換[16].基于拖拽可復用組件實現可視化頁面搭建的關鍵問題有: 組件的抽取和設計實現、組件的集成和動態數據的支撐、流暢的可視化拖拽效果支撐快速構建頁面、所見即所得的即時渲染效果.

2.1.1 可復用組件的集成

頁面編輯引擎從組件可擴展性和顆粒度[17]角度設計實現,按組件類型、業務需求范圍把組件封裝到多個組件庫,根據是否默認引入劃分兩類: 基礎庫和特色庫.基礎庫包含頁面通用的頁面元素組件,比如表單、表格等; 特色庫包含大屏庫、電力GIS、業務系統自定義組件庫等特色分類組件庫.為避免資源積累導致系統越來越龐大影響系統效率的弊端出現,頁面編輯引擎采用按需引入的方式集成所需類別的組件庫.其中基礎庫分類中的組件庫是默認引入的,組件庫中所有組件對所有業務系統可見; 特色庫分類中的組件庫按照業務系統的需求由用戶決定是否引入.

每個組件庫在頁面編輯引擎的資源區對應一個一級分類,按照組件的類型再生成二級分類展示,組件庫中的組件在所屬分類下生成可拖拽的組件快照.頁面編輯引擎對集成進來的每個組件提供一個專屬的屬性資源文件,記錄組件的快照基礎信息、屬性編輯信息、交互事件信息和渲染方法.當拖放一個組件到可視化設計區域時,自動讀取對應的屬性資源文件,在配置區域顯示組件的基礎信息、可編輯的屬性信息、動畫效果配置信息和交互事件信息供用戶進行編輯,實現組件的個性化效果.

2.1.2 基于HTML5 的可視化組件拖放

在HTML5 之前,實現Web 對象的拖放操作需要依靠mousedown、mousemove 等鼠標響應事件、編寫大量的JS 代碼實現[18],因此Web 中實現這個功能操作比較復雜.HTML5 標準中引入了直接支持拖放操作的API,大大簡化了網頁元素的拖放操作難度和復雜度.本文采用HTML5 拖放技術實現通過拖拽組件快速構建場景頁面,實現步驟如下:

(1)組件快照選中

1)組件快照設置draggable 屬性; 2)實現dragstart事件: 設置當前元素為選中元素; 3)實現dragend 事件:獲取并設置當前元素為空.

(2)組件快照拖動

1)實現dragenter 事件: 獲取當前元素,判斷途徑區域是否允許拖放,根據判斷結果更新拖拽時的CSS 樣式; 2)實現dragover 事件: 判斷目標元素是否允許當前元素作為子元素,允許標記為有效拖放,不允許標記為無效拖放; 3)實現dragleave 事件: 對當前元素移除可拖放的CSS 樣式.

(3)拖拽完成釋放

實現drop 事件: 首先獲取拖拽元素和目標元素的信息,根據操作類型執行不同的流程操作,然后構建組件以及相關聯組件信息,然后構建新的組件樹并記錄此次操作為撤銷操作緩存數據,最后刪除拖拽標記并發布更新頁面的通知.組件釋放執行的操作流程如圖4所示.

圖4 組件釋放執行操作流程圖

2.1.3 基于虛擬DOM 的頁面渲染技術

可視化頁面構建平臺在搭建頁面的過程中,通過不斷的拖放組件并修改其屬性達到頁面展示效果,就會頻繁的執行DOM 操作,從而導致頁面重繪和回流,這種跨界交流是高成本的,會造成頁面渲染緩慢.虛擬DOM[19]本質上是一種模擬DOM 樹的JS 樹形數據結構,每個節點對應一個JS 對象,DOM 操作先在虛擬DOM上執行對比,然后有針對性的更新差異化部分,實現頁面的局部刷新.另一方面,在響應式需求下,通過JS 直接操作DOM 會造成視圖和模型不匹配,當有狀態變更時構建的界面會重新渲染整個視圖,此時就需要修改整個innerHTML,當數據量變化很小時會浪費大量的資源,造成性能下降.電力系統可視化編輯構建場景頁面是一個逐步累計添加、完善的操作,因此使用虛擬DOM 技術可以實現所見即所得的頁面即時預覽效果.虛擬DOM 算法包括如下步驟:

(1)用JavaScript 對象結構模擬真實的DOM 樹;

(2)當有狀態變更時,新生成一個對象結構,比對兩棵虛擬DOM 樹的差異;

(3)將差異應用到真實DOM 樹.

比對差異算法(Diff)是虛擬DOM 算法的核心部分.傳統的Diff 算法[20]通過樹深度優先搜索算法循環遞歸對節點逐個進行對比,時間復雜度為O(n3),考慮到頁面構建過程中組件的層次關系和屬性修改的頻繁性,一個不太復雜的頁面組件一般也會達到30 個以上,這種指數級別的性能消耗代價太高,不能滿足頁面可視化編輯引擎的頁面渲染需求.基于傳統Diff 算法的不足和React 開發者對于DOM 樹策略做出的假設,算法有了如下優化改進: 對虛擬DOM 樹按照層級控制,只比較同層級的節點,當節點被刪除時,節點以及子節點不再進行遞歸比較; 當節點類型相同時,更新節點的屬性; 當發現新舊兩個節點類型不同時,直接刪除舊的節點及其子節點,并插入新的節點; 對于在一個層級下的同組子節點如果僅僅是位置不同,進行移動操作.

頁面編輯引擎可視化構建頁面時,涉及4 個方面的操作: 插入新的組件、修改組件屬性、移動組件位置、刪除組件.差異化算法流程步驟如下:

(1)在頁面設計區域內,構建新舊兩顆虛擬DOM樹結構;

(2)采用深度優先搜索遍歷兩棵DOM 樹,從根節點開始進行比較操作;

(3)判斷新節點類型是否為空,如果為空,標記刪除這個節點;

(4)判斷新舊節點是否為同一類型的節點;

(5)如果節點類型相同,則判斷引用是否相同,如果引用相同表示未更新,則返回,繼續子節點的遍歷;

(6)如果引用不同,判斷是否文本節點,如果是文本節點,比較文本節點內容,標記更新文本節點內容;

(7)如果不是文本節點,比對節點屬性,如果存在差異性,標記更新節點屬性,然后判斷比對子節點;

(8)如果新舊節點都擁有子節點,并且子節點不相同,進入子節點比對流程;

(9)如果只有新節點有子節點,標記添加此子節點;

(10)如果只有舊節點有子節點,標記刪除子節點操作;

(11)如果節點類型不同,標記刪除舊節點,插入新節點操作.

Diff 算法在逐層比較時會保存標記的對比差異,比對結束后,通過遞歸迭代遍歷這個保存的差異對象,對有差異的節點執行相應的DOM 操作,實現有針對性的局部更新.

虛擬DOM 技術的本質是用JS 的運算性能消耗來換取跨界操作DOM 的性能消耗,在頁面模板生成之后集成到系統中運行時,在大部分場景下頁面的數據更新量比較少,在虛擬DOM 上進行合理的優化能夠獲得很好的渲染性能.但是在一些實時性、高并發等性能要求極高的應用中,采用虛擬DOM 需要不斷地進行數據對比,而DOM 操作量并沒有減少,此時額外消耗大量的虛擬節點對比時間,使得實際性能更為低下[21].此種情況下,提倡開發者在構建頁面的過程中,放棄系統采用的默認方式,在系統提供的用戶自定義業務邏輯處理腳本中操作實時數據的真實DOM 完成數據變更,并進行合理的DOM 優化,盡量合并頁面中頻繁變更的數據DOM 操作,并采用請求限流和緩存等優化方案提高頁面的渲染性能.

2.2 數據統一接入和動態分配技術

電力系統在信息化領域的不斷深入和發展,產生了大量的異構數據源,頁面編輯引擎作為一個軟件平臺應能夠輕松整合多源異構數據源,通過統一的數據模型接入,運用可視化技術實現數據模型[22]可視化、流程可視化,以更直觀、更簡潔的方式實現數據的整合.本文提出的基于統一數據模型和動態分配技術的可視化組件動態數據邏輯如圖5 所示.

圖5 組件動態數據邏輯圖

頁面編輯引擎創建JSON 結構的統一數據模型稱為數據集,實現異構來源數據的有效統一接入和數據訪問接口的應用.JSON 結構中包含唯一標識ID、名稱、數據服務類型、服務地址、服務請求方式、默認參數、當前參數、數據轉換方法、備注信息.根據數據來源的不同調用不同的支撐服務來獲取動態數據.

頁面中的元素是一個個的組件,組件通過綁定數據集的方式接入動態數據.數據集和頁面中的組件是一對多的關系.如果多個組件綁定了同一個數據集,但每個組件接收的數據格式不同,或者一個數據集僅被一個組件綁定,但是其服務接口返回的數據格式和組件所需數據格式不一致,那么將采用數據處理服務進行智能的轉換.

數據動態分配技術采用發布-訂閱模式實現數據的自動化讀取和組件的動態數據刷新渲染.當頁面在瀏覽器中打開時,統一數據模型中所有綁定組件的數據集自動請求相應的數據服務,將獲取到的動態數據通過數據處理服務處理后賦值給綁定的組件,并根據用戶需求決定是否將獲取到的數據存儲到統一數據模型的相同結構的數據結果集中.組件訂閱了數據集的變化,當收到數據變動的通知,從而更新視圖,實現組件動態數據的實時渲染.

2.3 基于模板的場景頁面生成技術

傳統手工編碼方式實現電力系統的一個前端頁面通常是在搭建好的框架中編寫HTML 頁面,并引入依賴的JS 文件和CSS 樣式,編寫相應的業務邏輯處理操作,考慮到每個開發者的編碼習慣和技術水平存在一定的差異性,不可避免的產生很多重復的工作.另外一個方面,由于每個業務系統由不同的團隊搭建和開發,采用的技術和框架也不相同,這就給后期的維護帶來了極大的困難.因此頁面編輯引擎基于以上兩個方面考慮,本文提出基于多類型模板的頁面編輯思想,使用戶不必考慮技術水平的差異性,實現頁面的規范性和最大程度上的復用性.根據業務系統的前端框架技術不同,提供不同的頁面模板格式,實現與多種技術前端框架系統的集成.

電力系統一個場景頁面通常包含完整的業務功能,因此頁面模板應包含完整的業務邏輯,有助于快速生成業務頁面,不同的頁面模板適用于不同的業務功能.從已有模板中選擇合適的頁面模板并派生出默認業務頁面,再對默認頁面進行可視化編輯,從而生成目標業務頁面,這是一個繼承式的資源積累過程.基于模板的場景頁面生成技術包含2 個方面的核心內容: 模板生成引擎和模板解析引擎.

模板生成引擎將頁面元素、后臺數據和交互業務邏輯處理腳本進行規范性的整合生成場景頁面的描述模板,根據業務系統的前端框架技術不同,提供不同的頁面模板格式,與多種技術前端框架系統無縫銜接.對于一個場景頁面來說,通過拖拽組件的方式快速搭建的頁面結構就是一個場景組件樹,場景組件樹定義了組件間的父子兄弟層級關系,樹中的節點就是頁面組件.因此,模板生成引擎的本質就是解析場景組件樹、處理各層級組件數據流以及自定義業務邏輯交互腳本,按照規范的格式構建頁面模板語言的過程.模板生成引擎流程如圖6 所示.

圖6 頁面模板生成流程圖

場景組件樹解析的過程就是遍歷樹,解析樹的每個節點的內容并構建模板視圖的一個過程,樹遍歷算法分為深度優先搜索(DFS)和廣度優先搜索(BFS),根據場景組件樹的結構特點,結合兩種搜索算法的最優適用場景,本文選擇深度優先搜索算法[23]實現.深度優先搜索算法根據組件之間的父子鏈式關系,找出組件包含的所有子組件,解析每個節點的信息,結合數據信息、參數信息和樣式信息等構建場景頁面的模板.場景頁面的開發往往是一個根據現場需求不斷變更、持續迭代的過程,不可能一次就開發完成,也不可能一成不變,頁面的二次編輯就是對頁面組件的重新組合,以及編輯各組件和頁面的內容.模板解析引擎的原理是將模板語言轉換成可視化頁面編輯引擎識別的結構,重新構建場景組件樹和組件綁定的數據集結構樹,并識別出用戶自定義的人機交互業務邏輯腳本和自定義的樣式,實現頁面模板的重新可視化編輯.模板解析流程是模板生成流程的逆向操作,能夠自動根據語法結構進入相應的解析流程.

3 應用實例

本文設計實現的面向電力系統的基于組態的可視化頁面編輯引擎目前已成功應用于調控云系統運行輔助分析模塊,開發的功能已經部署在華東現場投入使用; 同時在電力現貨市場支持系統中也得到很好的推廣應用,已經在內蒙古、甘肅、江蘇等現場部署運行;國家能源集團生產運營協同調度系統一期項目基礎支撐平臺、智能調度、在線監測等模塊的部分頁面也使用此引擎平臺開發完成,目前項目已經在北京現場正式部署運行,并順利通過國能集團的驗收工作,頁面展示效果和性能均滿足現場的展示需求.

現有的電力業務系統前端技術路線和搭建的前端框架種類不盡相同,開發方式主要依賴于前端專業開發人員手工編碼實現,本文提出的基于組態的可視化頁面編輯引擎大大地降低了開發門檻,提高了開發效率,和傳統編碼方式對比如表1 所示.

表1 頁面編輯引擎和傳統編碼方式對比評估

在本地局域網測試環境下,使用本文提出的系統開發的頁面,在不考慮后端返回數據影響耗時的情況下,并發300 個用戶80%的頁面5 s 內完成頁面渲染,單用戶請求下,90%的頁面2 s 內完成頁面渲染.在國分調控云運行環境下,對相同復雜度的頁面進行測試,基于DOM 驅動的模板引擎和本文基于虛擬DOM 開發的頁面性能對比結果如表2 所示.

表2 中測試結果數據受測試環境網絡影響,頁面總體渲染時間比較長,原因是測試環境為遠程訪問,頁面的資源請求和后端服務返回數據耗時比較長.從測試結果可以看出,頁面采用虛擬DOM 技術總體性能可以滿足現場需求,在頁面局部更新數據時更能體現其優勢.

表2 頁面性能對比結果(ms)

4 結論與展望

實踐證明,面向電力系統的頁面編輯引擎實現了電力系統前端頁面的基本組成單元的原始積累,隨著業務系統的推廣使用,組件物料積累越來越豐富,開發效率也將呈現上升趨勢.系統提供一體化頁面模板在線發布、動態路由生成和頁面熱加載,實現頁面的即時發布與在線預覽.避免用戶手動操作上傳模板、創建路由、重啟項目等操作,提升了高級應用能力,展示了頁面編輯引擎的自動化管理能力.系統實現了場景頁面的可視化構建,在更高級層面上對用戶屏蔽頁面編寫細節,可應對電力系統不同場景下頁面的低代碼敏捷高效開發需求,為推動電力系統發展和新一代電力系統的構建提供基礎支撐和強有力的保障.為進一步滿足用戶對于系統操作人性化和易用性的需求,下一步工作將加強對已有系統的自動化、流程化和精細化管理,對跨平臺、跨端的兼容性支持研究.