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

李 超

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

0 引言

ExtJS是一個流行的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的另一個產(chǎn)品用于移動應(yīng)用程序。ExtJS基于MVC/MVVM架構(gòu)。ExtJS的第一版本是由Jack Slocum在2006年開發(fā)的，它是一組實用程序類，它是YUI的擴展。他將該庫命名為YUI-ext。ExtJS4版本發(fā)布于2011年，它具有完整的修訂結(jié)構(gòu)，其后是MVC架構(gòu)和一個快速應(yīng)用程序。ExtJS5是在2014年發(fā)布的，這個版本的主要變化是將MVC架構(gòu)改成MVVM架構(gòu)，它包括在啟用觸摸的設(shè)備上構(gòu)建桌面應(yīng)用程序的功能，雙向數(shù)據(jù)綁定，響應(yīng)式布局和更多功能。最新版本的ExtJS6是一個單一的平臺，它將ExtJS和sencha touch進行了合并，可以同時應(yīng)用于桌面應(yīng)用程序和移動應(yīng)用程序，而不需要為不同的平臺提供不同的代碼，舊版本和新版本有良好的代碼兼容性。它是協(xié)議不可知的，并且可以從任何后端源訪問數(shù)據(jù)。

1 ExtJS技術(shù)

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

1.1 ExtJS的架構(gòu)

ExtJS遵循MVC/MVVM架構(gòu)，其中MVC表示模型視圖控制器體系結(jié)構(gòu)，MVVM表示模型視圖Viewmodel。這種架構(gòu)可以使得代碼高度可維護和組織。ExtJS應(yī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ù)需要在這里擴充和自定義。

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

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

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

1.2 ExtJS6新功能

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

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

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

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

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

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

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

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

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

圖2 功能模塊層級分布

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

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

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

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

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

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

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

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

3 結(jié)語

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