陳月燕,鄒 慶,黃 昆,3

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

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

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

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

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

1 總體架構概述

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

1.1 系統(tǒng)總體結構設計

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

圖1 系統(tǒng)總體架構圖

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

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

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

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

1.2 瀏覽器端設計

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

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

圖2 MVVM 模式示意圖

1.3 系統(tǒng)功能設計

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

圖3 系統(tǒng)功能設計圖

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

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

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

2 關鍵技術

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

2.1 基于組態(tài)的可視化頁面編輯技術

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

2.1.1 可復用組件的集成

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

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

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

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

(1)組件快照選中

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

(2)組件快照拖動

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

(3)拖拽完成釋放

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

圖4 組件釋放執(zhí)行操作流程圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2 數(shù)據(jù)統(tǒng)一接入和動態(tài)分配技術

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

圖5 組件動態(tài)數(shù)據(jù)邏輯圖

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

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

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

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

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

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

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

圖6 頁面模板生成流程圖

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

3 應用實例

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

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

表1 頁面編輯引擎和傳統(tǒng)編碼方式對比評估

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

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

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

4 結論與展望

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