基于ExtJS的風(fēng)電場監(jiān)測系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

李 超

（南京華盾電力信息安全測評有限公司，江蘇南京 210032）

0 引言

ExtJS是一個(gè)流行的JavaScript框架，它為使用跨瀏覽器功能構(gòu)建Web應(yīng)用程序提供了豐富的UI。ExtJS基本上用于創(chuàng)建桌面應(yīng)用程序，它支持所有現(xiàn)代的瀏覽器，如 IE，F(xiàn)F，Chrome，safari等［1］。而sencha，sencha toucha的另一個(gè)產(chǎn)品用于移動(dòng)應(yīng)用程序。ExtJS基于MVC/MVVM架構(gòu)。ExtJS的第一版本是由Jack Slocum在2006年開發(fā)的，它是一組實(shí)用程序類，它是YUI的擴(kuò)展。他將該庫命名為YUI-ext。ExtJS4版本發(fā)布于2011年，它具有完整的修訂結(jié)構(gòu)，其后是MVC架構(gòu)和一個(gè)快速應(yīng)用程序。ExtJS5是在2014年發(fā)布的，這個(gè)版本的主要變化是將MVC架構(gòu)改成MVVM架構(gòu)，它包括在啟用觸摸的設(shè)備上構(gòu)建桌面應(yīng)用程序的功能，雙向數(shù)據(jù)綁定，響應(yīng)式布局和更多功能。最新版本的ExtJS6是一個(gè)單一的平臺(tái)，它將ExtJS和sencha touch進(jìn)行了合并，可以同時(shí)應(yīng)用于桌面應(yīng)用程序和移動(dòng)應(yīng)用程序，而不需要為不同的平臺(tái)提供不同的代碼，舊版本和新版本有良好的代碼兼容性。它是協(xié)議不可知的，并且可以從任何后端源訪問數(shù)據(jù)。

1 ExtJS技術(shù)

ExtJS是業(yè)務(wù)級Web應(yīng)用程序開發(fā)的領(lǐng)先標(biāo)準(zhǔn)。ExtJS提供了為桌面和平板電腦構(gòu)建強(qiáng)大應(yīng)用程序所需的工具。簡化針對現(xiàn)代和傳統(tǒng)瀏覽器的跨平臺(tái)開發(fā)，跨桌面、平板電腦和智能手機(jī)。通過IDE插件集成到企業(yè)開發(fā)環(huán)境中，提高開發(fā)團(tuán)隊(duì)的生產(chǎn)力。降低了Web應(yīng)用程序的開發(fā)成本，授權(quán)團(tuán)隊(duì)創(chuàng)建具有吸引力的用戶體驗(yàn)的應(yīng)用程序。它有一組小部件使得UI強(qiáng)大和容易，它遵循MVC架構(gòu)這樣高度可讀的代碼。

1.1 ExtJS的架構(gòu)

ExtJS遵循MVC/MVVM架構(gòu)，其中MVC表示模型視圖控制器體系結(jié)構(gòu)，MVVM表示模型視圖Viewmodel。這種架構(gòu)可以使得代碼高度可維護(hù)和組織。ExtJS應(yīng)用程序文件夾駐留在項(xiàng)目的JavaScript文件夾中。ExtJS應(yīng)用程序結(jié)構(gòu)如圖1所示。

圖1 ExtJS應(yīng)用程序結(jié)構(gòu)示意

（1）app.js是程序流程開始的主要檔案，應(yīng)該使用<；script>標(biāo)簽。應(yīng)用程序調(diào)用控制器的其他功能。

（2）Controller.js是ExtJSMVC架構(gòu)的控制器文件。這里包含應(yīng)用程序的所有控制，事件監(jiān)聽器的最大功能的代碼。它具有為該應(yīng)用程序中所使用的其他文件定義的路徑，例如store，view，model。

（3）View.js包含應(yīng)用程序的界面部分，顯示給用戶。ExtJS使用各種UI豐富的視圖，可以根據(jù)需要在這里擴(kuò)充和自定義。

（4）Stroe.js包含本地緩存的數(shù)據(jù)，將在模型對象的幫助下在視圖上呈現(xiàn)。存儲(chǔ)使用代理獲取數(shù)據(jù)，代理具有為服務(wù)定義的路徑以獲取后端數(shù)據(jù)。

（5）Model.js包含綁定要查看的商店數(shù)據(jù)的對象。它有后端數(shù)據(jù)對象到視圖dataIndex的映射，在Store的幫助下獲取數(shù)據(jù)。

（6）Utils.js不包括在MVC架構(gòu)中，但是最好的做法是使代碼清晰，不太復(fù)雜，更加可讀。我們可以在這個(gè)文件中編寫方法，并在控制器或視圖渲染器中調(diào)用它們，這對代碼可重用性也很有幫助。

1.2 ExtJS6新功能

ExtJS6已經(jīng)支持NPM［2］包和開放工具。ExtJS6.6現(xiàn)在可以通過NPM包讓開發(fā)人員使用已經(jīng)相當(dāng)熟悉的異常簡單的工作流。現(xiàn)在ExtJS開發(fā)人員可以使用強(qiáng)大的開放式工具來快速生成、構(gòu)建和更新ExtJS應(yīng)用程序。ExtJS6.6還帶來了一些主要的增強(qiáng)，如新的現(xiàn)代工具包組件、新的可訪問主題、現(xiàn)代工具包本地化、高級路由和幾個(gè)組件與框架的增強(qiáng)。

（1）基于ExtJS框架、組件和主題的NMP包，JavaScript社區(qū)中的工具正進(jìn)化到以更快的時(shí)間、更高的質(zhì)量和可維護(hù)性來創(chuàng)建Web應(yīng)用程序。NPM是JavaScript開發(fā)人員非常喜歡的軟件包管理器。NPM承載了一個(gè)龐大的存儲(chǔ)庫，包含70萬個(gè)基于JavaScript的代碼包以便開發(fā)人員在他們的應(yīng)用程序中使用這些代碼包。現(xiàn)在隨著ExtJS6.6的發(fā)布，ExtJS框架、組件和主題已經(jīng)作為NPM包托管在NPM存儲(chǔ)庫中。ExtJS開發(fā)人員可以執(zhí)行簡單的命令來將一個(gè)包添加到項(xiàng)目、管理依賴和管理所使用的包的版本。他們也可以很方便地將第三方的JavaScrip庫添加到ExtJS應(yīng)用程序。

（2）Ext-Gen是使用ExtJSNPM包來協(xié)助快速創(chuàng)建應(yīng)用程序的強(qiáng)大工具。Ext-Gen提供了多個(gè)新模板來創(chuàng)建移動(dòng)、桌面或通用的應(yīng)用程序。它是一個(gè)基于NodeJS的跨平臺(tái)命令工具，提供了多種模式來創(chuàng)建應(yīng)用程序。它的自動(dòng)模式會(huì)使用默認(rèn)配置項(xiàng)快速構(gòu)建應(yīng)用程序，而交換模式則通過提出一系列問題并根據(jù)這些問題的答復(fù)來構(gòu)建應(yīng)用程序。

（3）時(shí)間面板是一個(gè)新的現(xiàn)代工具包組件，通過使用模擬鐘面的方式提供了一種非常簡單的時(shí)間選擇方式。時(shí)間面板組件支持桌面、平板以及IOS或安卓設(shè)備，在選擇小時(shí)值后，組件將自動(dòng)前進(jìn)到分鐘。有多個(gè)配置項(xiàng)來設(shè)置鐘面的對齊方式和模式。當(dāng)將垂直配置設(shè)置為auto時(shí)，時(shí)間頭將基于設(shè)備的方向進(jìn)行設(shè)置。

（4）高級ExtJS路由功能的增強(qiáng)，ExtJS的路由功能可以通過瀏覽器的歷史堆棧來更新應(yīng)用程序的狀態(tài)。路由還支持應(yīng)用程序的深度鏈接，允許直接訪問應(yīng)用程序的某一個(gè)部件。用戶可以將應(yīng)用程序作為一個(gè)書簽，甚至將鏈接發(fā)送給其他人以便直接訪問應(yīng)用程序的某個(gè)部件。

2 風(fēng)電場監(jiān)測系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

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

風(fēng)電場監(jiān)測系統(tǒng)的服務(wù)器平臺(tái)程序使用JAVA編寫，數(shù)據(jù)庫使用Oracle。前端使用ExtJS6.6開發(fā)應(yīng)用程序界面。系統(tǒng)內(nèi)部使用JSON［3］方式來進(jìn)行前端與后臺(tái)的數(shù)據(jù)交互與傳輸，相對于XML這種方式傳輸效率提高很多，對流量和內(nèi)存的控制也更優(yōu)異。

監(jiān)測系統(tǒng)共有3個(gè)層級，最上面是區(qū)域風(fēng)場地理分布層，中間是單風(fēng)場信息展示層，最下面一個(gè)層級是單個(gè)風(fēng)機(jī)的各種信息展示。功能模塊層級分布如圖2所示。

圖2 功能模塊層級分布

2.1.1 風(fēng)場地理分布層

風(fēng)場地理分布層展示管轄區(qū)域內(nèi)各個(gè)風(fēng)場在地理上的位置和關(guān)于該風(fēng)場的基本數(shù)據(jù)。在界面上每個(gè)風(fēng)場由5個(gè)風(fēng)機(jī)模型構(gòu)成。風(fēng)場中的所有風(fēng)機(jī)都運(yùn)行正常時(shí)，5個(gè)風(fēng)機(jī)模型可以顯示轉(zhuǎn)動(dòng)效果；當(dāng)風(fēng)場中的風(fēng)機(jī)出現(xiàn)故障時(shí)，5個(gè)風(fēng)機(jī)模型停止轉(zhuǎn)動(dòng)，風(fēng)機(jī)模型會(huì)變成紅色。這樣區(qū)域值班人員可以很直觀看到該區(qū)域內(nèi)哪個(gè)風(fēng)場出現(xiàn)了問題，進(jìn)而采取措施。系統(tǒng)的這個(gè)設(shè)計(jì)可以很好提高工作人員的工作效率。

系統(tǒng)使用ExtJS編寫每個(gè)風(fēng)機(jī)的模型，風(fēng)機(jī)模型關(guān)聯(lián)了需要時(shí)刻監(jiān)測的風(fēng)機(jī)各個(gè)測點(diǎn)，系統(tǒng)采用Calculation函數(shù)對所選中的測點(diǎn)展開運(yùn)算，當(dāng)測點(diǎn)的數(shù)值發(fā)生問題，風(fēng)機(jī)模型會(huì)立刻顯示出來。為了實(shí)現(xiàn)風(fēng)機(jī)模型的轉(zhuǎn)動(dòng)效果，設(shè)計(jì)人員采取多線程的方法，在animate子線程中編寫使風(fēng)機(jī)模型的葉片轉(zhuǎn)動(dòng)的程序代碼，每隔1秒風(fēng)機(jī)模型的葉片會(huì)轉(zhuǎn)動(dòng)某個(gè)固定的角度。程序編碼示例：

Ext.data.Record=function（data，id）{

this.id=（id||id===0）?id：Ext.data.Record.id（this）；

this.data=data||{}；

}

Ext.data.Record.create=function（o）{

var f=Ext.extend（Ext.data.Record，{}）；

var p=f.prototype；

P.fields=new

Ext.util.MixedCollection（false，function（field）{

Return field.name；}）；

for（var i=0，len=o.length；i

p.fields.add（new Ext.data.Field（o[i]））；

}

f.getField=function（name）{

Return p.fields.get（name）；

}；

return f；

}

風(fēng)場的地理分布界面如圖3所示。

圖3 風(fēng)場地理分布界面

2.1.2 風(fēng)場信息顯示層

風(fēng)場信息顯示層用來顯示某個(gè)風(fēng)場的相關(guān)數(shù)據(jù)。該界面分為風(fēng)機(jī)矩陣與導(dǎo)航按鈕，風(fēng)機(jī)矩陣部分由該風(fēng)場所有風(fēng)機(jī)狀態(tài)圖組成，每個(gè)矩形狀態(tài)圖對應(yīng)風(fēng)場里一臺(tái)具體的風(fēng)機(jī)。一個(gè)風(fēng)機(jī)狀態(tài)模塊顯示相對應(yīng)的那臺(tái)風(fēng)機(jī)，如果風(fēng)機(jī)正常運(yùn)行，風(fēng)機(jī)模型會(huì)正常轉(zhuǎn)動(dòng)，如果風(fēng)機(jī)運(yùn)行遇到異常情況，風(fēng)機(jī)矩形狀態(tài)圖中的風(fēng)機(jī)模型葉片停止轉(zhuǎn)動(dòng)，并顯示紅色警告狀態(tài)。風(fēng)機(jī)模型與風(fēng)機(jī)的所有測點(diǎn)相關(guān)聯(lián)，如果某個(gè)測點(diǎn)出現(xiàn)問題，通過風(fēng)機(jī)模型會(huì)馬上發(fā)現(xiàn)問題所在。導(dǎo)航按鈕包括了區(qū)域內(nèi)幾個(gè)風(fēng)場之間的和所在風(fēng)場各個(gè)風(fēng)機(jī)界面之間的跳轉(zhuǎn)與返回。風(fēng)場信息顯示界面如圖4所示。

圖4 風(fēng)場信息顯示界面

2.1.3 風(fēng)機(jī)數(shù)據(jù)顯示層

風(fēng)機(jī)數(shù)據(jù)顯示界面左側(cè)為風(fēng)機(jī)結(jié)構(gòu)模型。設(shè)計(jì)人員所需要檢測的測點(diǎn)數(shù)據(jù)均在圖內(nèi)標(biāo)記出來，測點(diǎn)數(shù)據(jù)正常顯示綠色信號燈，測點(diǎn)出現(xiàn)異常顯示紅色信號燈。設(shè)計(jì)人員使用ExtJS里面的animate子線程來編寫代碼實(shí)現(xiàn)這個(gè)功能，設(shè)置各測點(diǎn)每隔1.5秒進(jìn)行一次閃爍，每個(gè)測點(diǎn)都閃爍一遍后，從第一個(gè)測點(diǎn)繼續(xù)新一遍的閃爍，如此循環(huán)。風(fēng)機(jī)輪轂示意圖右邊以列表方式動(dòng)態(tài)顯示風(fēng)機(jī)輪轂測點(diǎn)的具體數(shù)值。風(fēng)機(jī)數(shù)據(jù)顯示界面如圖5所示。

圖5 風(fēng)機(jī)數(shù)據(jù)顯示界面

3 結(jié)語

ExtJS作為目前各種前端JavaScript框架中的集大成者，使其在前端開發(fā)中得到了廣泛的應(yīng)用。本文基于ExtJS設(shè)計(jì)和開發(fā)了風(fēng)電場監(jiān)測系統(tǒng)。作者首先介紹了ExtJS的基本概念包括面板（Panel）、布局（Layout）、組件（Component），接著闡述了ExtJS的開發(fā)工具和ExtJS6.6的最新特點(diǎn)，最后詳細(xì)介紹了風(fēng)電場監(jiān)測系統(tǒng)的各個(gè)主要模塊。該系統(tǒng)通過在瓜洲和阿克塞等地的投運(yùn)，運(yùn)行結(jié)果表明該系統(tǒng)界面豐富美觀，各個(gè)功能模塊運(yùn)行穩(wěn)定，各個(gè)測點(diǎn)數(shù)據(jù)動(dòng)態(tài)顯示正常，使得風(fēng)電場工作人員的工作效率得到了較大提高。