107、WEB调度自动化系统关键问题研究

WEB调度自动化系统关键问题研究卞瑞祥[1]，曾坚永[2]，王炎初[1]，徐展强[2]，唐晓莉[1]，谢善益[2]（[1]南京南瑞继保电气有限公司，江苏省南京市211102）（[2]广东电网公司电力调度通信中心，广东省广州市510600）摘要：本文介绍了WEB电网调度自动化系统的设计和实现，对实践中存在的关键问题进行了深入研究。本文描述了WEB子系统的架构设计，对主要技术（SVG和AJAX）的合理使用进行了剖析，分析了WEB子系统在画面导出和数据刷新时遇到的性能瓶颈问题，并对WEB画面的用户交互性和动画效果这两个实践性问题进行了研究。关键词：WEB调度自动化系统；SVG优化；AJAX0引言网络数字化为电网调度自动化系统提供了方便快捷的手段，同时也是当前电网调度自动化的发展方向。为了确保电网运行的安全和稳定，电力部门需要及时了解电网的运行状况，掌握当前电力负荷分布，发现潜在的安全隐患，加快故障信息的获取和分析。目前，电力调度部门需要一种通过办公网络就能直接监测电网运行状况的系统，但同时该系统必须不能影响到电力系统的安全性。以WEB浏览方式获取电网运行数据，通过浏览器直接呈现厂站等画面的运行状况，这样的方案比较好的满足了快捷性和安全性两大要求[1]。由此，一种将传统工作站环境下运行的调度自动化系统移植到WEB环境的方案应运而生。在结合广东备调WEB子系统的设计开发基础上，本文概述了一个WEB电网调度自动化系统的设计方案，介绍了实现时采用的主要技术，重点论述了实践过程中遇到的有关SVG性能的优化、用户交互的处理和动画效果的实现等关键问题，并给出了解决方案。1调度系统WEB化的必要性能量管理系统（EMS）在电网调度自动化方面发挥了重要作用。调度员登录实时控制区（即安全区Ⅰ）的工作站就能全面了解电网的运行情况。为确保安全性，Ⅰ区与办公网所处的生产管理区（即安全区Ⅲ）之间设置了隔离装置。这样做一方面保证了Ⅰ区不会遭受来自外部环境的非法侵入，另一方面也极大的限制了办公网用户及时掌握电网运行信息。另外，即使一般用户能够访问Ⅰ区，由于EMS系统功能过于复杂，操作时难免存在误操作，影响电网的正常运行。除此之外，虽然EMS系统能够在多种操作系统平台上运行，但是为办公网内多台机器部署EMS系统的工作量比较大，实践中不可行。由于EMS系统存在上述固有问题，因此本文提出了一种基于B/S架构的设计方案，借助目前比较成熟的可缩放矢量图形[2]（ScalableVectorGraphics，SVG）和AJAX[3]（AsynchronousJavaScriptandXML）技术，实现了一个画面呈现与EMS系统保持一致、通过浏览器即可访问、无需开放额外网络端口的WEB子系统，从而将EMS系统中的画面浏览、离线潮流计算等功能移植到WEB环境。WEB调度子系统是对原有EMS系统的一个有力补充，并非完全替代原有系统。针对当前电力系统办公环境的多元化，实现电网调度自动化系统的WEB化是必要的。2系统设计WEB电网调度自动化系统采用B/S架构，避免在客户端安装额外的软件。用户通过浏览器即可访问厂站图、曲线图和潮流图等画面。浏览器中所呈现的画面效果与EMS系统中保持一致。系统的基本架构设计如图1。SVG/AJAXSVG/AJAXWEB画面服务SOPHIC平台Ⅲ区WEB服务器A服务进程B服务进程浏览器浏览器A用户B用户图1WEB子系统架构系统由两部分组成：WEB客户端和WEB服务端。客户端只能通过服务器提供的WEB页面和服务端口访问WEB服务，其余有可能威胁到系统安全的网络端口一律不向外开放，杜绝了系统安全隐患，但这也使传统的JavaApplet[4]和ActiveX[5]方式不能适应这种应用前提。WEB客户端采用SVG/AJAX方式，SVG负责画面渲染，AJAX负责数据更新、画面刷新和交互事件处理。借助AJAX技术，客户端发送HTTP请求即可访问WEB服务器所提供的服务。根据服务器反馈的XML格式数据，客户端就能实现数据更新和SVG画面的渲染。WEB服务器采用多进程方式为客户端提供一对一的服务，这样实现的优点是：某一服务进程出现异常不会影响其他用户的正常访问。图1中虚线框表示服务进程管理器，它负责服务进程的启动和终止。服务进程正常启动后加载画面，在客户端的驱动下定时刷新画面，并将画面上产生更新的设备或前景状态反馈给客户端。3主要技术本文的设计方案采用了SVG+AJAX技术，充分发挥了浏览器的优势，在保证系统安全的前提下，为使用者提供与EMS一致的用户体验。3.1SVG可缩放矢量图形（ScalableVectorGraphics，SVG）是基于可扩展标记语言（ExtensibleMarkupLanguage,XML），用于描述二维矢量图形的一种图形格式。SVG是由W3C制定的开放标准。在过去几年里，已经有很多研究者致力于将SVG用于EMS/SCADA系统间的系统图和一次接线图的图形交互，以及EMS/SCADA系统与GIS系统等其它应用系统的图形交互。WEB子系统在设计之初参考了CIM-SVG图形交换格式[6]，分析了该格式与现有图形监控系统的不完全匹配性，结合项目的实际需求，对生成SVG画面的方案进行了重新设计。新方案着重考虑了以下几个因素：a)WEB子系统需要一个能够呈现厂站运行状况的画面，而不是图形和数据的交换中介。换句话说，服务程序所导出的SVG画面仅用于WEB画面的实时显示和交互，而非用于与其它系统的数据交换。因此，相对冗余的电力系统方面的信息并没有导出到SVG中。b)CIM-SVG格式定义中大量使用了use元素。这样做的优点是使SVG文档更具结构性，而缺点就是SVG画面在渲染时的性能会打折扣。从技术层面分析，use元素在浏览器上渲染时是需要对定义的原始图元进行深拷贝的。关注SVG优化的研究者也建议尽量少用use元素[7]。c)虽然CIM-SVG交换格式定义了一套电力系统中的相关图元，但是现有EMS系统中有很多图元却不是电力系统所特有的（比如二维表、Tab页、柱状图等），并且CIM-SVG中也没有定义。因此完全采用CIM-SVG格式进行实现是不完备的。鉴于以上因素，结合现有EMS系统在图形表示上的特点，本文给出以下几点在设计实现中遵循的方向：a)画面中任意一个图元，大到复杂控件、变压器图元和开关图元，小到线段、矩形和圆，都有呈现自己的接口实现。每一个图元都拥有唯一标识ID。b)图元的位置、旋转和缩放参数以包含该图元的父图元所建立的坐标系为参照。c)图元在导出成SVG节点时只导出当前的显示样式，而不需要导出所有状态下的样式。例如：开关有分合状态，如果当前开关为分状态，那么只导出分状态下的样式。d)对于电力设备图元，需要能够提供自身实时运行参数用于实现用户交互和离线潮流计算等功能。e)导出图元要考虑浏览器渲染的效率，尽量简化导出方案，在保证显示效果可以接受的情况下减少复杂效果（如渐变、裁减等）的使用。3.2AJAXAJAX已经成为WEB富客户端应用的首选技术（其它技术如JavaApplet、ActiveX等）。传统WEB应用在发生数据更新时页面需要完全重刷，而AJAX的出现从根本上改变了WEB应用模式。AJAX只向WEB服务器发送并获取必需的数据。它使用SOAP或其它基于XML的服务接口，并在客户端采用JavaScript处理来自服务器的反馈。由于服务器和浏览器之间交换的数据大量减少（大约只有原来的5%），从而WEB端的反应时间大大缩短，并且很多处理工作都可以在浏览器中完成。通过AJAX技术，用户在查看画面时无需强制画面全部重刷。浏览器中的JS脚本会定期向WEB服务器发送HTTP请求，获取画面上的更新数据，并在客户端做增量更新，这样得到的用户体验与现有的EMS系统基本保持一致。采用AJAX技术对于传统的JavaApplet和ActiveX方式有如下一些优点：a)无需建立额外的Socket连接。HTTP请求通过WEB服务端口（如80或8080）即可获得更新数据，服务器无需开放其它端口，在一定程度上保证了服务器的安全性。客户端也不需要做额外的端口设置。b)HTTP请求是异步的，数据刷新在后台运行，减少了对用户操作的干扰。用户可以在客户端修改刷新周期，从而调整浏览器的资源占用率。c)JavaScript在处理SVG的加载、更新和用户交互方面拥有与生俱来的优势。SVG技术本身基于XML标准，因此在更新画面时比较方便快捷，避免了节点和属性的映射、转换等操作。4关键问题及解决方案WEB子系统在实现过程中碰到了许多问题，其中有三个属于比较关键的问题。本文就这三个关键问题在项目中的出现进行了深入的分析和研究，并给出了相对简洁的解决方案。4.1SVG性能虽然SVG技术在图形的显示效果，尤其是图形在经过放大之后的效果要明显优于传统的图像技术，但是目前它在应用中普遍存在性能上的问题。造成该问题的原因主要有三个方面：1、XML解析和SVG渲染的速度；2、画面规模；3、数据刷新和画面渲染频率。采用SVG技术展示的画面在浏览器上呈现要经过XML解析和SVG渲染两个过程。由于解析XML需要依赖浏览器的JavaScript实现。JavaScript实现效率越高、运行速度越快，XML解析速度也就越快。目前几大浏览器阵营正日趋重视对JavaScript的支持，并大幅度革新脚本引擎的实现，所以尽量使用最新版本的浏览器（如IE8、Firefox3等）可以获得比较大的性能提升。IE本身不支持SVG的渲染，在IE环境下渲染SVG需要Adobe公司的SVGViewer组件[8]。在项目的实践过程中我们发现AdobeSVGViewer在渲染中小规模（SVG文件大小600KB左右）的SVG画面时比较顺畅。如果画面的SVG文件进一步增大，那么在浏览器中的渲染和以后的用户交互将变得异常困难。虽然在实现过程中我们极力避免生成过大的SVG文件，也想尽办法减少SVG文件中DOM节点的数量，但是画面规模却是一个无法躲避的障碍。在电网调度自动化系统中，各种规模的画面都存在，小到一张普通的画面索引图，大到系统潮流图。SVG技术在呈现中小规模的画面时绰绰有余，但在渲染大规模的画面（如潮流图等）时往往显得力不从心。一张500KV的厂站图中包含数值量约为150个，刀闸约为200个。但是，一张系统潮流图上包含的数值量却有约1500个，联络线约700个。如此大规模的画面渲染和更新会直接导致浏览器的僵死，用户基本无法操作。如何在性能和效果之间取得一个平衡点成为实现该WEB子系统所面临的重要问题。本系统设计了两套SVG更新方案：整体更新和局部更新。中小规模的画面采用整体更新，而大规模的画面则采用（整体+局部）更新。整体更新不对图元做取舍，所有图元在打开画面时做全面刷新和渲染，后续过程只做增量刷新和渲染；局部更新会选取画面中跨度范围小、数量众多并且更新频繁的图元（比如数值前景）作为目标，并仅在用户观察区域内做刷新和渲染。潮流图上数值前景和状态前景数量众多，更新频繁；联络线跨度范围较大，更新不频繁，数量可以承受。因此，WEB子系统采用了局部渲染数值前景和状态前景的策略。经过这样处理，潮流图的渲染性能和用户操作性已基本可以接受。电网数据是实时更新的。若要在WEB上看到最新数据，周期性刷新数据是必要的。但是，如果刷新周期过长，更新就不会很及时；如果刷新周期过短，浏览器的CPU占用率又会很高，服务器的压力也会很大。WEB子系统在客户端提供了可调节的刷新周期，满足用户的不同需求。默认情况下，刷新周期在性能和效果上做了折衷。4.2用户交互SVG标准支持用户交互特性。原有EMS系统在用户交互方面主要表现为鼠标的左击和右击。为了与现有系统保持操作上的一致性，WEB端对鼠标事件进行分别处理。左击主要触发复杂控件的状态变化，如二维表树形结构的展开与恢复，光敏点的切换画面，Tab页的切换等；右击则需要根据点击的对象动态生成操作菜单项，并且菜单项都对应各自的事件处理函数。通过对原有EMS系统的分析研究，从中提取生成操作菜单的逻辑，并根据动态获取