劉傳忠, 都培偉, 張 紅

[1.上海電器科學(xué)研究所(集團)有限公司, 上海市智能電網(wǎng)需求響應(yīng)重點實驗室, 國家能源智能電網(wǎng)用戶端電氣設(shè)備研發(fā)(實驗)中心, 上海 200063;2.上海電器科學(xué)研究院, 上海 200063]

0 引 言

在“二氧化碳排放力爭于2030年前達到峰值,努力爭取2060年前實現(xiàn)碳中和”這個大的目標(biāo)下,實現(xiàn)能源消耗的精細化管理,為節(jié)能減排探索可實施、可落地的措施,是一個值得研究的課題。能源表計的精確計量能夠為節(jié)能決策提供基礎(chǔ)的數(shù)據(jù)支撐。姚萌江[1]討論了在企業(yè)能源管理中引進能流圖的必要性,探討了基于能流圖的能源分析管理、能源決策管理、能源指標(biāo)管理、節(jié)能降耗管理等。楊川等[2]以卷煙生產(chǎn)車間凝結(jié)水系統(tǒng)優(yōu)化為例,根據(jù)凝結(jié)水系統(tǒng)的能量結(jié)構(gòu)利用能流圖模型進行分析,確定系統(tǒng)優(yōu)化目標(biāo),有效降低蒸汽消耗,增加余熱利用率。

作為能流圖的重要分支,展現(xiàn)能耗表計上下級關(guān)系的支路拓撲圖具有十分重要的作用。本文探討了具備交互功能的一種能耗表計上下級支路拓撲圖的繪制及實現(xiàn)方法。

1 功能設(shè)計

系統(tǒng)主要包括能耗表計信息管理、能耗表計支路信息管理、能耗表計能耗數(shù)據(jù)管理、能流矢量圖繪制和交互四大模塊,系統(tǒng)組成如圖1所示。

圖1 系統(tǒng)組成

(1) 表計信息管理模塊。表計信息包括表計的標(biāo)識號(唯一編碼)、表計的名稱、表計的能耗介質(zhì)類型(電、水、燃氣、冷量、熱量等)、安裝位置、投運時間等。通過表計信息管理模塊,可以對現(xiàn)場能耗計量器具的信息進行增、刪、查、改操作。

(2) 支路信息管理模塊。包括但不限于支路信息標(biāo)識號、節(jié)點對應(yīng)的能耗表計標(biāo)識號、上一級支路標(biāo)識號(父節(jié)點)、能耗表計名稱、其他附加信息等。通過支路信息管理模塊,可以對現(xiàn)場存在的支路信息進行管理。

(3) 表計能耗數(shù)據(jù)模塊。包括能耗表計的標(biāo)識號、時間信息、數(shù)據(jù)類型等。該模塊中一般存在一個后臺服務(wù),會定時將現(xiàn)場采集的數(shù)據(jù)按照一定規(guī)范進行標(biāo)準(zhǔn)化、歸一化處理。根據(jù)接入能耗表計的數(shù)據(jù)量大小,實時數(shù)據(jù)、小時用量、日用量、月用量共存于一張數(shù)據(jù)庫表或單獨存儲于獨立的數(shù)據(jù)庫表中。

(4) 圖形繪制與交互模塊。系統(tǒng)根據(jù)支路信息,在前端頁面以樹狀圖的形式實時繪制能耗表計支路信息的上下級關(guān)系,并根據(jù)用戶的操作,進行相應(yīng)的縮放、平移、折疊和展開操作。

2 關(guān)鍵技術(shù)

2.1 可縮放矢量圖形

可縮放矢量圖形(Scalable Vector Graphics,SVG)作為一種基于可擴展標(biāo)記語言開放標(biāo)準(zhǔn)的文本式矢量圖形描述語言,支持無級縮放、精確定位、圖層管理、動畫、交互、動態(tài)生成、參數(shù)查詢等高級功能,適用于對格式規(guī)范性和交互靈活性有較高要求的可視化場合[3]。

用SVG元素rect繪制節(jié)點矩形區(qū)域,通過text顯示節(jié)點名稱,將區(qū)域和名稱通過把相關(guān)元素進行組合的容器元素g組合成一個節(jié)點,用來表征支路中的一個節(jié)點。用定義路徑的SVG元素path繪制父節(jié)點到子節(jié)點的路徑。系統(tǒng)可以通過transform屬性值來實現(xiàn)對用戶坐標(biāo)進行平移、縮放坐標(biāo)系統(tǒng)、指定的角度旋轉(zhuǎn)坐標(biāo)系統(tǒng)、傾斜X軸、傾斜Y軸和指定變換矩陣等操作。

2.2 數(shù)據(jù)驅(qū)動文檔

D3.js是一個JavaScript函數(shù)庫,D3是數(shù)據(jù)驅(qū)動文檔的簡稱,允許綁定任意數(shù)據(jù)到文本對象模型(DOM),然后將數(shù)據(jù)驅(qū)動轉(zhuǎn)換應(yīng)用到文檔中,利用級聯(lián)樣式表(CSS3)、超文本傳輸語言(HTML)及可縮放矢量圖形實現(xiàn)可視化展示[4]。D3.js是一個迭代迅速的開放Java Script庫,目前已更新到V6.7.0版本,該項目中采用的是V3版本。

D3.js V3版提供了d3.layout.tree()函數(shù)創(chuàng)建樹狀布局,在區(qū)域內(nèi)按規(guī)則布置節(jié)點,再用路徑將節(jié)點連接起來[5]。樹基本操作就是子節(jié)點展開和父節(jié)點折疊,在D3中樹展開和折疊通過設(shè)置樹子節(jié)點屬性來實現(xiàn)。tree.nodes(root)返回樹的當(dāng)前節(jié)點集合,通過操作這個集合,可以實現(xiàn)節(jié)點的動態(tài)變化。Tree.links(nodes)返回連線數(shù)組。D3提供了d3.behavior.zoom()用于構(gòu)建縮放行為,并支持鼠標(biāo)和鍵盤。

3 功能實現(xiàn)

本文采用ASP.Net MVC5架構(gòu),Model封裝業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)及對數(shù)據(jù)的處理方法,View向用戶提供交互界面,Controller 作用于模型和視圖上,控制數(shù)據(jù)流向模型對象,并在數(shù)據(jù)變化時更新視圖。視圖層通過調(diào)用D3.js庫中的相關(guān)函數(shù),簡化了對SVG的操作。

圖形繪制流程如圖2所示。

圖2 圖形繪制流程圖

其操作步驟如下:

步驟1:系統(tǒng)初始化時,前端頁面通過Ajax請求通過CircuitMeterInfo控制器API函數(shù)GetElex-CircuitNameJsonByStation,從后端獲取支路拓撲信息。

步驟2:初始化SVG大小,并為SVG添加全局組,綁定縮放響應(yīng)函數(shù)。

步驟3:計算節(jié)點坐標(biāo),給節(jié)點的ID,附加表計ID屬性,添加表計節(jié)點方框區(qū)、節(jié)點表計名稱,并將兩者組合,遍歷生成節(jié)點。

步驟4:計算路徑坐標(biāo),繪制從父節(jié)點到子節(jié)點的連線。

步驟5:為節(jié)點添加并綁定Click響應(yīng)函數(shù)。

步驟6:為能流圖添加上下文菜單,響應(yīng)鼠標(biāo)右鍵事件。

支路信息圖如圖3所示,其中矩形框代表表計節(jié)點,連線代表上下級支路的連接關(guān)系,深色背景的矩形框代表本節(jié)點可以繼續(xù)展開。

圖3 支路信息圖

在運行頁面,查看軟件后臺生成的SVG代碼,可以清晰地看到表計節(jié)點、支路連接情況,節(jié)點對應(yīng)的meterid對應(yīng)著表計信息中的表號信息。右鍵單擊對應(yīng)的節(jié)點,系統(tǒng)彈出上下文菜單,選擇“查看表計信息”菜單后,表計信息界面如圖4所示。

圖4 表計信息界面

4 應(yīng)用案例

研究成果在華東某機場能源管理系統(tǒng)中得到了實際應(yīng)用,共接入電表近6 500塊。對如此數(shù)量級的信息進行管理,如果采用傳統(tǒng)表格形式進行交互,展示形式單一,不夠直觀,用戶體驗也不夠友好。

通過提供表計使用信息管理界面和支路拓撲信息管理界面,實現(xiàn)對支路表計上下級關(guān)系的靈活配置,較好地展示了電表的上下級支路信息、表計的使用信息和用能計量信息等。此外,在本文基礎(chǔ)上又增加了按變電站分組和搜索定位功能,較好地滿足了用戶要求,得到了用戶方面的積極反饋。

5 結(jié) 語

本文探討了一種通用的具備可交互功能的能耗表計數(shù)據(jù)的能流關(guān)系的繪制方法,通過人工配置形成初始信息,程序自動繪制能流圖的形式形象地展現(xiàn)了上下級支路的隸屬關(guān)系,節(jié)省了人力成本。用戶通過人機交互,可以獲取相關(guān)節(jié)點的表具信息、實時數(shù)據(jù)、歷史數(shù)據(jù),與下級支路的差值等,便于進行能量平衡分析、用能異常的排查、挖掘和分析節(jié)能潛力等。