基于ExtJS的風電場監測系統設計與實現

李 超

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

0 引言

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

1 ExtJS技術

ExtJS是業務級Web應用程序開發的領先標準。ExtJS提供了為桌面和平板電腦構建強大應用程序所需的工具。簡化針對現代和傳統瀏覽器的跨平臺開發，跨桌面、平板電腦和智能手機。通過IDE插件集成到企業開發環境中，提高開發團隊的生產力。降低了Web應用程序的開發成本，授權團隊創建具有吸引力的用戶體驗的應用程序。它有一組小部件使得UI強大和容易，它遵循MVC架構這樣高度可讀的代碼。

1.1 ExtJS的架構

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

圖1 ExtJS應用程序結構示意

（1）app.js是程序流程開始的主要檔案，應該使用<；script>標簽。應用程序調用控制器的其他功能。

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

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

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

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

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

1.2 ExtJS6新功能

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

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

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

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

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

2 風電場監測系統的設計與實現

2.1 系統功能設計

風電場監測系統的服務器平臺程序使用JAVA編寫，數據庫使用Oracle。前端使用ExtJS6.6開發應用程序界面。系統內部使用JSON［3］方式來進行前端與后臺的數據交互與傳輸，相對于XML這種方式傳輸效率提高很多，對流量和內存的控制也更優異。

監測系統共有3個層級，最上面是區域風場地理分布層，中間是單風場信息展示層，最下面一個層級是單個風機的各種信息展示。功能模塊層級分布如圖2所示。

圖2 功能模塊層級分布

2.1.1 風場地理分布層

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

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

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；

}

風場的地理分布界面如圖3所示。

圖3 風場地理分布界面

2.1.2 風場信息顯示層

風場信息顯示層用來顯示某個風場的相關數據。該界面分為風機矩陣與導航按鈕，風機矩陣部分由該風場所有風機狀態圖組成，每個矩形狀態圖對應風場里一臺具體的風機。一個風機狀態模塊顯示相對應的那臺風機，如果風機正常運行，風機模型會正常轉動，如果風機運行遇到異常情況，風機矩形狀態圖中的風機模型葉片停止轉動，并顯示紅色警告狀態。風機模型與風機的所有測點相關聯，如果某個測點出現問題，通過風機模型會馬上發現問題所在。導航按鈕包括了區域內幾個風場之間的和所在風場各個風機界面之間的跳轉與返回。風場信息顯示界面如圖4所示。

圖4 風場信息顯示界面

2.1.3 風機數據顯示層

風機數據顯示界面左側為風機結構模型。設計人員所需要檢測的測點數據均在圖內標記出來，測點數據正常顯示綠色信號燈，測點出現異常顯示紅色信號燈。設計人員使用ExtJS里面的animate子線程來編寫代碼實現這個功能，設置各測點每隔1.5秒進行一次閃爍，每個測點都閃爍一遍后，從第一個測點繼續新一遍的閃爍，如此循環。風機輪轂示意圖右邊以列表方式動態顯示風機輪轂測點的具體數值。風機數據顯示界面如圖5所示。

圖5 風機數據顯示界面

3 結語

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