建筑能耗管理系統可視化平臺的設計與實現

唐頌光，袁 成，文 濤

（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]。根據電力、水管網、空調回路元器件草圖，通過實現基本圖形元素的組合或者來實現復雜的圖形繪制。在繪制過程要通過不斷的變化錨點、坐標屬性，復雜的圖形組合通過進行圖形模板的定義，繪制完成后保存Mysql數據庫中，方便以后調用提高SVG使用效率[10]。

編輯好圖元需要為圖元配置圖形效果，效果主要包括描邊屬性、色彩填充、濾鏡效果，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坐標空間，使用