具備交互功能的表具支路關系圖的設計與實現(xiàn)*

劉傳忠, 都培偉, 張 紅

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

0 引 言

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

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

1 功能設計

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

圖1 系統(tǒng)組成

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

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

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

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

2 關鍵技術

2.1 可縮放矢量圖形

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

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

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

D3.js是一個JavaScript函數(shù)庫,D3是數(shù)據(jù)驅動文檔的簡稱,允許綁定任意數(shù)據(jù)到文本對象模型(DOM),然后將數(shù)據(jù)驅動轉換應用到文檔中,利用級聯(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ū)域內按規(guī)則布置節(jié)點,再用路徑將節(jié)點連接起來[5]。樹基本操作就是子節(jié)點展開和父節(jié)點折疊,在D3中樹展開和折疊通過設置樹子節(jié)點屬性來實現(xiàn)。tree.nodes(root)返回樹的當前節(jié)點集合,通過操作這個集合,可以實現(xiàn)節(jié)點的動態(tài)變化。Tree.links(nodes)返回連線數(shù)組。D3提供了d3.behavior.zoom()用于構建縮放行為,并支持鼠標和鍵盤。

3 功能實現(xiàn)

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

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

圖2 圖形繪制流程圖

其操作步驟如下:

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

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

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

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

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

步驟6:為能流圖添加上下文菜單,響應鼠標右鍵事件。

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

圖3 支路信息圖

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

圖4 表計信息界面

4 應用案例

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

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

5 結 語

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