面向電力系統(tǒng)的可視化頁(yè)面編輯引擎①

陳月燕,鄒 慶,黃 昆,3

1(南瑞集團(tuán)有限公司(國(guó)網(wǎng)電力科學(xué)研究院有限公司),南京 211106)

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

3(智能電網(wǎng)保護(hù)和運(yùn)行控制國(guó)家重點(diǎn)實(shí)驗(yàn)室,南京 211106)

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

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

1 總體架構(gòu)概述

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

1.1 系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)

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

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

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

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

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

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

1.2 瀏覽器端設(shè)計(jì)

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

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

圖2 MVVM 模式示意圖

1.3 系統(tǒng)功能設(shè)計(jì)

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

圖3 系統(tǒng)功能設(shè)計(jì)圖

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

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

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

2 關(guān)鍵技術(shù)

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

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

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

2.1.1 可復(fù)用組件的集成

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

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

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

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

(1)組件快照選中

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

(2)組件快照拖動(dòng)

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

(3)拖拽完成釋放

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

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

2.1.3 基于虛擬DOM 的頁(yè)面渲染技術(shù)

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

(1)用JavaScript 對(duì)象結(jié)構(gòu)模擬真實(shí)的DOM 樹(shù);

(2)當(dāng)有狀態(tài)變更時(shí),新生成一個(gè)對(duì)象結(jié)構(gòu),比對(duì)兩棵虛擬DOM 樹(shù)的差異;

(3)將差異應(yīng)用到真實(shí)DOM 樹(shù).

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

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

(1)在頁(yè)面設(shè)計(jì)區(qū)域內(nèi),構(gòu)建新舊兩顆虛擬DOM樹(shù)結(jié)構(gòu);

(2)采用深度優(yōu)先搜索遍歷兩棵DOM 樹(shù),從根節(jié)點(diǎn)開(kāi)始進(jìn)行比較操作;

(3)判斷新節(jié)點(diǎn)類型是否為空,如果為空,標(biāo)記刪除這個(gè)節(jié)點(diǎn);

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

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

(6)如果引用不同,判斷是否文本節(jié)點(diǎn),如果是文本節(jié)點(diǎn),比較文本節(jié)點(diǎn)內(nèi)容,標(biāo)記更新文本節(jié)點(diǎn)內(nèi)容;

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

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

(9)如果只有新節(jié)點(diǎn)有子節(jié)點(diǎn),標(biāo)記添加此子節(jié)點(diǎn);

(10)如果只有舊節(jié)點(diǎn)有子節(jié)點(diǎn),標(biāo)記刪除子節(jié)點(diǎn)操作;

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

Diff 算法在逐層比較時(shí)會(huì)保存標(biāo)記的對(duì)比差異,比對(duì)結(jié)束后,通過(guò)遞歸迭代遍歷這個(gè)保存的差異對(duì)象,對(duì)有差異的節(jié)點(diǎn)執(zhí)行相應(yīng)的DOM 操作,實(shí)現(xiàn)有針對(duì)性的局部更新.

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

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

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

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

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

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

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

2.3 基于模板的場(chǎng)景頁(yè)面生成技術(shù)

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

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

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

圖6 頁(yè)面模板生成流程圖

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

3 應(yīng)用實(shí)例

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

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

表1 頁(yè)面編輯引擎和傳統(tǒng)編碼方式對(duì)比評(píng)估

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

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

表2 頁(yè)面性能對(duì)比結(jié)果(ms)

4 結(jié)論與展望

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