基于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的最新特点，最后详细介绍了风电场监测系统的各个主要模块。该系统通过在瓜洲和阿克塞等地的投运，运行结果表明该系统界面丰富美观，各个功能模块运行稳定，各个测点数据动态显示正常，使得风电场工作人员的工作效率得到了较大提高。