建筑能耗管理系统可视化平台的设计与实现
2016-11-21唐颂光
唐颂光，袁 成，文 涛
（1.武汉邮电科学研究院 湖北 武汉 430074；2.武汉烽火富华电气有限责任公司 湖北 武汉 430074）
建筑能耗管理系统可视化平台的设计与实现
唐颂光1，袁 成2，文 涛2
（1.武汉邮电科学研究院 湖北 武汉 430074；2.武汉烽火富华电气有限责任公司 湖北 武汉 430074）
文章从数据可视化入手，使用SVG来进行建筑能耗管理系统WEB组态软件的开发。详细介绍了平台的架构，以及主要功能的设计与实现。在展示上，通过园区平面图、建筑外观图和楼层平面图逐级进行分层展示。在楼层平面图中进一步分解能耗数据为能耗数据的颗粒化展示提供了一个可行的实现方式。基于此能耗可视化平台强化了建筑分类、分项能耗计量监测，为能耗数据统计与对比分析提供依据。
组态软件；建筑能耗管理系统；分层展示；颗粒化展示
根据中国能源研究部公布的数字，我国能源利用效率为33%，比发达国家低10个百分点[1]。能源问题给社会发展和环境资源带来了巨大压力，节能减排形势严峻。在节能减排大力提倡的今天，能耗管理系统将广泛应用于大型公共建筑和园区内。对于不具备能耗管理专业知识的物业管理者而言，能耗管理系统的数据可视化显得尤为重要。现阶段物业管理者对能耗管理系统的数据呈现、数据分析，提出了更高的要求[2]。本系统包含能耗展示、能耗数据分析和能耗精细化管理策略。在设计过程中继承了传统能耗管理系统的特点，在开发过程中，使用SVG技术进行组态软件的开发，针对现有组态工具的不足进行改进，包括图元的人性化设计、图元库的扩充。在展示上通过细化能耗数据进行颗粒化展示，加强了建筑分类、分项能耗计量监测，为能耗数据统计与对比分析提供依据。
1 系统设计
图1 系统架构
在WEB层使用JavaScript和SVG组态进行图形展示页面的开发[3]。如图1所示。
本系统采用java主流框架SSM（Struts2+Spring+Mybatis）
在控制层使用Struts2框架，使用Action，该控制器负责接收来自ActionServlet的请求，并根据该请求调用模型的业务逻辑方法处理请求，并将处理结果返回给JSP页面显示。在逻辑业务层使用Spring MVC来对业务逻辑进行配置和管理[4-5]。在持久层，采用Mybatis与Mysql进行交互，Mybatis通过半自动映射有效满足系统开发的工作量，为使用中sql语句的优化提供便利。
2 页面功能设计
建筑能耗管理系统包括对水、电、气、热等多种能耗的监测，以电为主，其他为辅。这里以电力监视页面为例，如图2所示，在电力回路页面中根据不同的用电需求分为空调用电、照明用电、动力用电和其他用电。空调页面包括中央空调和分散空调；照明用电包括室内照明、夜景照明和紧急照明；动力用电包括电梯系统和给排水系统；其他用电主要包括数据中心、、监控系统等，后期会根据建筑内部系统的实际情况进行相应功能模块的添加。
本系统从可视化角度出发，在WEB页面采用分层展示的方式。本系统在原有能耗管理系统的基础上，结合建筑能耗管理系统的需求在展示上结合园区平面图、建筑外观图、楼层平面图，对后台数据库中的数据进行分层展示。在楼层平面图中包括电力回路能耗展示、水管网回路能耗展示、其它能耗展示等。
通过在楼层中增加智能数据采集设备，细化能源监管粒度。对不同类型建筑按照房间、功能区域、用能性质进行有针对性的能源监管。结合组态软件对数据库中的数据进行进一步拆解，形成数据颗粒，进而实现能耗数据颗粒化展示[6-7]。
图2 电力监视页面设计
3 关键模块的实现
3.1SVG组态软件
3.1.1图元
SVG内置了很多基本的图形元素，可以实现基本的线、矩形、椭圆、圆形等[8-9]。根据电力、水管网、空调回路元器件草图，通过
编辑好图元需要为图元配置图形效果，效果主要包括描边属性、色彩填充、滤镜效果，Stroke编辑图元的边框效果，颜色填充中设置颜色的RGB来获取所需颜色，结合不同的颜色模式Solid、Linear-Gradient、Radial-Gradient、Pattern来进行颜色填充。使用
3.1.2SVG图元库的设计
现阶段能耗管理系统对WEB图形组态有了更高的要求，随着能耗管理系统进入校园、家庭，越来越需要人性化的设计[11]。本系统根据这一趋势，设计了两套图形组态，一套给专业人员使用，一套给普通用户使用如图3所示，在登录时通过不同的用户权限进行相应的切换。
图3 图形组态切换模式
以电力回路系统为例，在传统的组态系统中可以绘制专业性很强的图元如断路器，刀闸等，在设计图元时，考虑到普通用户的使用需求，需要进行人性化设计，将系统中复杂的设备仪器，转换成日常生活中可见的实物图。
3.1.3SVG数据交互
仅仅通过组态绘制好的回路图，无法反应出回路中各个仪表的能耗情况，需要与数据库进行交互[12]。以水管网系统为例，在绘制好的水管网监视图中包含多个水表元素，数据库中的ems_water-meter数据表用来存储水表采集器上传的数据，将水表采集器的id与保存在数据表中water-meter_id进行对应关联。
在数据交互的过程中采用JavaScript与Ajax引擎相结合的方式[13]。当WEB前端通过鼠标触发JavaScript事件，使用getURL函数向服务器发出数据请求；服务器根据数据关联表中的对应关系从Mysql数据库中查找、读取相应数据，将结果返回并及时更新dom内容；再通过JavaScript脚本调用dom中的数据来实现事件响应功能，并完成页面内容的更新。
3.1.4SVG组态绘制
使用SVG中注册得3个鼠标事件，用rect定义一块画布，作为拖放事件的背景层，来接收拖放事件。判断拖放事件的合法性，将可拖放图形保存在dragsvg中。背景层不能够拖放，只能拖放事先预存在图元库中的图形元素。当鼠标移动时触发事件处理函数，通过获取当前视口，判断被拖动图元是否存在，在拖放的过程中通过currentscale，currenttranslate获取当前鼠标的坐标，并通过计算设置图元平移的具体参数。在拖放过程中判断grabpoint的位置，只有当整个图元进入画布才可以放置元素，实现图元的拖放。
3.2告警展示的实现
能耗管理系统通过实时监控记录各个采集器数据的变化情况。当能耗超过某一标准时，需要通过告警对用户进行提示。图元用来传递实时数据，根据不同系统、不同的使用环境配置不同的告警阀值。当能耗超标时，图元需要进行相应的变化。
SVG对动态图形功能的支持主要依赖于动画和脚本编程。动画：通过SVG对动画标记语言SMIL的支持，使用element和attribute等来定义动画的行为，实现动画的效果。脚本编程：可以使自定义动画效果更加丰富[14-15]。这里使用脚本编程，通过< viewbox>来定义SVG坐标空间，使用