唐頌光，袁 成，文 濤

（1.武漢郵電科學研究院 湖北 武漢 430074；2.武漢烽火富華電氣有限責任公司 湖北 武漢 430074）

建筑能耗管理系統(tǒng)可視化平臺的設計與實現(xiàn)

唐頌光1，袁 成2，文 濤2

（1.武漢郵電科學研究院 湖北 武漢 430074；2.武漢烽火富華電氣有限責任公司 湖北 武漢 430074）

文章從數(shù)據(jù)可視化入手，使用SVG來進行建筑能耗管理系統(tǒng)WEB組態(tài)軟件的開發(fā)。詳細介紹了平臺的架構(gòu)，以及主要功能的設計與實現(xiàn)。在展示上，通過園區(qū)平面圖、建筑外觀圖和樓層平面圖逐級進行分層展示。在樓層平面圖中進一步分解能耗數(shù)據(jù)為能耗數(shù)據(jù)的顆?；故咎峁┝艘粋€可行的實現(xiàn)方式。基于此能耗可視化平臺強化了建筑分類、分項能耗計量監(jiān)測，為能耗數(shù)據(jù)統(tǒng)計與對比分析提供依據(jù)。

組態(tài)軟件；建筑能耗管理系統(tǒng)；分層展示；顆?；故?/p>

根據(jù)中國能源研究部公布的數(shù)字，我國能源利用效率為33%，比發(fā)達國家低10個百分點[1]。能源問題給社會發(fā)展和環(huán)境資源帶來了巨大壓力，節(jié)能減排形勢嚴峻。在節(jié)能減排大力提倡的今天，能耗管理系統(tǒng)將廣泛應用于大型公共建筑和園區(qū)內(nèi)。對于不具備能耗管理專業(yè)知識的物業(yè)管理者而言，能耗管理系統(tǒng)的數(shù)據(jù)可視化顯得尤為重要?，F(xiàn)階段物業(yè)管理者對能耗管理系統(tǒng)的數(shù)據(jù)呈現(xiàn)、數(shù)據(jù)分析，提出了更高的要求[2]。本系統(tǒng)包含能耗展示、能耗數(shù)據(jù)分析和能耗精細化管理策略。在設計過程中繼承了傳統(tǒng)能耗管理系統(tǒng)的特點，在開發(fā)過程中，使用SVG技術(shù)進行組態(tài)軟件的開發(fā)，針對現(xiàn)有組態(tài)工具的不足進行改進，包括圖元的人性化設計、圖元庫的擴充。在展示上通過細化能耗數(shù)據(jù)進行顆?；故?，加強了建筑分類、分項能耗計量監(jiān)測，為能耗數(shù)據(jù)統(tǒng)計與對比分析提供依據(jù)。

1　系統(tǒng)設計

圖1　系統(tǒng)架構(gòu)

在WEB層使用JavaScript和SVG組態(tài)進行圖形展示頁面的開發(fā)[3]。如圖1所示。

本系統(tǒng)采用java主流框架SSM（Struts2+Spring+Mybatis）

在控制層使用Struts2框架，使用Action，該控制器負責接收來自ActionServlet的請求，并根據(jù)該請求調(diào)用模型的業(yè)務邏輯方法處理請求，并將處理結(jié)果返回給JSP頁面顯示。在邏輯業(yè)務層使用Spring MVC來對業(yè)務邏輯進行配置和管理[4-5]。在持久層，采用Mybatis與Mysql進行交互，Mybatis通過半自動映射有效滿足系統(tǒng)開發(fā)的工作量，為使用中sql語句的優(yōu)化提供便利。

2　頁面功能設計

建筑能耗管理系統(tǒng)包括對水、電、氣、熱等多種能耗的監(jiān)測，以電為主，其他為輔。這里以電力監(jiān)視頁面為例，如圖2所示，在電力回路頁面中根據(jù)不同的用電需求分為空調(diào)用電、照明用電、動力用電和其他用電。空調(diào)頁面包括中央空調(diào)和分散空調(diào)；照明用電包括室內(nèi)照明、夜景照明和緊急照明；動力用電包括電梯系統(tǒng)和給排水系統(tǒng)；其他用電主要包括數(shù)據(jù)中心、、監(jiān)控系統(tǒng)等，后期會根據(jù)建筑內(nèi)部系統(tǒng)的實際情況進行相應功能模塊的添加。

本系統(tǒng)從可視化角度出發(fā)，在WEB頁面采用分層展示的方式。本系統(tǒng)在原有能耗管理系統(tǒng)的基礎(chǔ)上，結(jié)合建筑能耗管理系統(tǒng)的需求在展示上結(jié)合園區(qū)平面圖、建筑外觀圖、樓層平面圖，對后臺數(shù)據(jù)庫中的數(shù)據(jù)進行分層展示。在樓層平面圖中包括電力回路能耗展示、水管網(wǎng)回路能耗展示、其它能耗展示等。

通過在樓層中增加智能數(shù)據(jù)采集設備，細化能源監(jiān)管粒度。對不同類型建筑按照房間、功能區(qū)域、用能性質(zhì)進行有針對性的能源監(jiān)管。結(jié)合組態(tài)軟件對數(shù)據(jù)庫中的數(shù)據(jù)進行進一步拆解，形成數(shù)據(jù)顆粒，進而實現(xiàn)能耗數(shù)據(jù)顆?；故綶6-7]。

圖2　電力監(jiān)視頁面設計

3　關(guān)鍵模塊的實現(xiàn)

3.1SVG組態(tài)軟件

3.1.1圖元

SVG內(nèi)置了很多基本的圖形元素，可以實現(xiàn)基本的線、矩形、橢圓、圓形等[8-9]。根據(jù)電力、水管網(wǎng)、空調(diào)回路元器件草圖，通過實現(xiàn)基本圖形元素的組合或者來實現(xiàn)復雜的圖形繪制。在繪制過程要通過不斷的變化錨點、坐標屬性，復雜的圖形組合通過進行圖形模板的定義，繪制完成后保存Mysql數(shù)據(jù)庫中，方便以后調(diào)用提高SVG使用效率[10]。

編輯好圖元需要為圖元配置圖形效果，效果主要包括描邊屬性、色彩填充、濾鏡效果，Stroke編輯圖元的邊框效果，顏色填充中設置顏色的RGB來獲取所需顏色，結(jié)合不同的顏色模式Solid、Linear-Gradient、Radial-Gradient、Pattern來進行顏色填充。使用定義圖形漸變參數(shù)及濾鏡效果。

3.1.2SVG圖元庫的設計

現(xiàn)階段能耗管理系統(tǒng)對WEB圖形組態(tài)有了更高的要求，隨著能耗管理系統(tǒng)進入校園、家庭，越來越需要人性化的設計[11]。本系統(tǒng)根據(jù)這一趨勢，設計了兩套圖形組態(tài)，一套給專業(yè)人員使用，一套給普通用戶使用如圖3所示，在登錄時通過不同的用戶權(quán)限進行相應的切換。

圖3　圖形組態(tài)切換模式

以電力回路系統(tǒng)為例，在傳統(tǒng)的組態(tài)系統(tǒng)中可以繪制專業(yè)性很強的圖元如斷路器，刀閘等，在設計圖元時，考慮到普通用戶的使用需求，需要進行人性化設計，將系統(tǒng)中復雜的設備儀器，轉(zhuǎn)換成日常生活中可見的實物圖。

3.1.3SVG數(shù)據(jù)交互

僅僅通過組態(tài)繪制好的回路圖，無法反應出回路中各個儀表的能耗情況，需要與數(shù)據(jù)庫進行交互[12]。以水管網(wǎng)系統(tǒng)為例，在繪制好的水管網(wǎng)監(jiān)視圖中包含多個水表元素，數(shù)據(jù)庫中的ems_water-meter數(shù)據(jù)表用來存儲水表采集器上傳的數(shù)據(jù)，將水表采集器的id與保存在數(shù)據(jù)表中water-meter_id進行對應關(guān)聯(lián)。

在數(shù)據(jù)交互的過程中采用JavaScript與Ajax引擎相結(jié)合的方式[13]。當WEB前端通過鼠標觸發(fā)JavaScript事件，使用getURL函數(shù)向服務器發(fā)出數(shù)據(jù)請求；服務器根據(jù)數(shù)據(jù)關(guān)聯(lián)表中的對應關(guān)系從Mysql數(shù)據(jù)庫中查找、讀取相應數(shù)據(jù)，將結(jié)果返回并及時更新dom內(nèi)容；再通過JavaScript腳本調(diào)用dom中的數(shù)據(jù)來實現(xiàn)事件響應功能，并完成頁面內(nèi)容的更新。

3.1.4SVG組態(tài)繪制

使用SVG中注冊得3個鼠標事件，用rect定義一塊畫布，作為拖放事件的背景層，來接收拖放事件。判斷拖放事件的合法性，將可拖放圖形保存在dragsvg中。背景層不能夠拖放，只能拖放事先預存在圖元庫中的圖形元素。當鼠標移動時觸發(fā)事件處理函數(shù)，通過獲取當前視口，判斷被拖動圖元是否存在，在拖放的過程中通過currentscale，currenttranslate獲取當前鼠標的坐標，并通過計算設置圖元平移的具體參數(shù)。在拖放過程中判斷grabpoint的位置，只有當整個圖元進入畫布才可以放置元素，實現(xiàn)圖元的拖放。

3.2告警展示的實現(xiàn)

能耗管理系統(tǒng)通過實時監(jiān)控記錄各個采集器數(shù)據(jù)的變化情況。當能耗超過某一標準時，需要通過告警對用戶進行提示。圖元用來傳遞實時數(shù)據(jù)，根據(jù)不同系統(tǒng)、不同的使用環(huán)境配置不同的告警閥值。當能耗超標時，圖元需要進行相應的變化。

SVG對動態(tài)圖形功能的支持主要依賴于動畫和腳本編程。動畫：通過SVG對動畫標記語言SMIL的支持，使用element和attribute等來定義動畫的行為，實現(xiàn)動畫的效果。腳本編程：可以使自定義動畫效果更加豐富[14-15]。這里使用腳本編程，通過< viewbox>來定義SVG坐標空間，使用