具備交互功能的表具支路關(guān)系圖的設(shè)計(jì)與實(shí)現(xiàn)*

劉傳忠, 都培偉, 張 紅

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

0 引 言

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

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

1 功能設(shè)計(jì)

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

圖1 系統(tǒng)組成

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

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

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

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

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

2.1 可縮放矢量圖形

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

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

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

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

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

3 功能實(shí)現(xiàn)

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

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

圖2 圖形繪制流程圖

其操作步驟如下:

步驟1:系統(tǒng)初始化時(shí),前端頁(yè)面通過(guò)Ajax請(qǐng)求通過(guò)CircuitMeterInfo控制器API函數(shù)GetElex-CircuitNameJsonByStation,從后端獲取支路拓?fù)湫畔ⅰ?/p>

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

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

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

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

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

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

圖3 支路信息圖

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

圖4 表計(jì)信息界面

4 應(yīng)用案例

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

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

5 結(jié) 語(yǔ)

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