具备交互功能的表具支路关系图的
设计与实现"
刘传忠1，都培伟2，张红2
! 1.上海电器科学研究所（集团）有限公司，上海市智能
电网需求响应重点实验室，国家能源智能电网 用户端电气设备研发（实验）中心，上海 200063；
2.上海电器科学研究院，上海 200063%
扌商 要：在复杂的能源管理系统中，对数量众多的能耗表计的上下级关系进行清
晰地呈现，有助于用户对用能情况进行平衡分析、表具计量异常诊断等。提出了一 种可通过配置表具相关信息，生成具备交互功能的表具支路拓扑关系图的方法，能 够展示相关节点的表具基础信息、实时读数、历史数据等，为能耗平衡分析、表具计
量异常诊断等提供了有效的可视化工具。开发的软件已在项目中得到实际应用， 收到了较好的效果。
关键词：能耗表计；交互功能；可视化；支路拓扑
中图分类号：TU  201.5 文献标志码：B  文章编号：1674-$417（2021）04-0067-04 DOI ： 10.1661$/j. cnki. 1674-$417. 2021.04. 016
刘传忠（19$3_），男，
工程师，从事能源管 理、物联网方面的软 件开发工作。
0引言
在“二氧化碳排放力争于2030年前达到峰 值，努力争取2060年前实现碳中和”这个大的目
标下，实现能源消耗的精细化管理，为节能减排 探索可实施、可落地的措施，是一个值得研究的
课题。能源表计的精确计量能够为节能决策提
供基础的数据支撑。姚萌江'
1（讨论了在企业能 源管理中引进能流图的必要性，探讨了基于能流 图的能源分析管理、能源决策管理、能源指标管
理、节能降耗管理等。杨川等'
2（以卷烟生产车间 凝结水系统优化为例，根据凝结水系统的能量结
构利用能流图模型进行分析，确定系统优化目
标，有效降低蒸汽消耗，增加余热利用率。
作为能流图的重要分支，展现能耗表计上下 级关系的支路拓扑图具有十分重要的作用。本
文探讨了具备交互功能的一种能耗表计上下级
支路拓扑图的绘制及实现方法&
1功能设计
系统主要包括能耗表计信息管理、能耗表计支
路信息管理、能耗表计能耗数据管理、能流矢量图绘 制和交互四大模块，系统组成如图1所示。
（1 ）表计信息管理模块。表计信息包括表
计的标识号（唯一编码）、表计的名称、表计的能
耗介质类型（电、水、燃气、冷量、热量等）、安装位
都培伟（1981 一），男，从事能源管理方面的软件开发工作。
张 红（1986_），女，工程师，从事智能照明、能源管理方面的软件开发工作。
*基金项目：上海市科学技术委员会科研计划项目（18DZ1203502，19DZ1206700）
• 67
•
图1系统组成
置、投运时间等。通过表计信息管理模块，可以
对现场能耗计量器具的信息进行增、删、查、改
操作。
(2) 支路信息管理模块。包括但不限于支
路信息标识号、节点对应的能耗表计标识号、上 一级支路标识号(父节点)、能耗表计名称、其他 附加信息等。通过支路信息管理模块，可以对现
场存在的支路信息进行管理。
(3) 表计能耗数据模块。包括能耗表计的
标识号、时间信息、数据类型等。该模块中一般
存在一个后台服务，会定时将现场采集的数据按
照一定规范进行标准化、归一化处理。根据接入 能耗表计的数据量大小，实时数据、小时用量、日 用量、月用量共存于一张数据库表或单独存储于
独立的数据库表中。
(4) 图形绘制与交互模块。系统根据支路
信息，在前端页面以树状图的形式实时绘制能耗
表计支路信息的上下级关系，并根据用户的操 作，进行相应的缩放、平移、折叠和展开操作。
2关键技术
2.1可缩放矢量图形
可缩放矢量图形(Scalable  Vectoc  Graphics , SVG )作为一种基于可扩展标记语言开放标准的
文本式矢量图形描述语言，支持无级缩放、精确
定位、图层管理、动画、交互、动态生成、参数查询 等高级功能，适用于对格式规范性和交互灵活性 有较高要求的可视化场合'
3打
用SVG 元素act 绘制节点矩形区域，通过
text 显示节点名称，将区域和名称通过把相关元
素进行组合的容器元素g 组合成一个节点，用来
表征支路中的一个节点。用定义路径的SVG 元
素path 绘制父节点到子节点的路径。系统可以 通过transform 属性值来实现对用户坐标进行平
移、缩放坐标系统、指定的角度旋转坐标系统、倾
斜'轴、倾斜％轴和指定变换矩阵等操作。
2.2数据驱动文档
D3. js 是一个JavaScript 函数库，D3是数据
驱动文档的简称，允许绑定任意数据到文本对象
模型！ D0M )，然后将数据驱动转换应用到文档
中，利用级联样式表(CSS3 )、超文本传输语言
(HTML )及可缩放矢量图形实现可视化展示'
4(&
D3. js 是一个迭代迅速的开放Java  Script 库，目前
已更新到V6.7.0版本，该项目中采用的是V3
版本。
D3. js  V3 版提供了 d3. layout. tree()函数创
建树状布局，在区域内按规则布置节点，再用路
径将节点连接起来'
5(&树基本操作就是子节点
展开和父节点折叠，在D3中树展开和折叠通过
设置树子节点属性来实现。toe. nodes  ( root )返 回树的当前节点集合，通过操作这个集合，可以
实现节点的动态变化。Toe. links  (nodes )返回连
线数组。D3提供了 d3. behavioo. zoom ()用于构 建缩放行为，并支持鼠标和键盘。
3功能实现
本文采用ASP. Net  MVC5架构，Model 封装
业务逻辑相关的数据及对数据的处理方法,View  向用户提供交互界面,ContTooeT 作用于模型和视
图上，控制数据流向模型对象，并在数据变化时
更新视图。视图层通过调用D3.js 库中的相关函 数，简化了对SVG 的操作。
图形绘制流程如图2所示。
其操作步骤如下：
步骤1：系统初始化时，前端页面通过Ajaa
请求通过CiTcuitMeteTpCo 控制器API 函数GetHea- CircuitNameVsonByStation ，从后端获取支路拓扑信息。
步骤2：初始化SVG 大小，并为SVG 添加全
局组，绑定缩放响应函数。
步骤3 ：计算节点坐标，给节点的ID ，附加表
计ID 属性，添加表计节点方框区、节点表计名
• 68
•
图2图形绘制流程图
称，并将两者组合，遍历生成节点&
步骤4：计算路径坐标，绘制从父节点到子节点的连线。
步骤5：为节点添加并绑定Click响应函数。
步骤6：为能流图添加上下文菜单，响应鼠标右键事件。
支路信息图如图3所示，其中矩形框代表表计节点，连线代表上下级支路的连接关系，深背景的矩形框代表本节点可以继续展开&
图3支路信息图
在运行页面，查看软件后台生成的SVG代码，可以清晰地看到表计节点、支路连接情况，节点对应的meterid对应着表计信息中的表号信息。右键单击对应的节点，系统弹出上下文菜单，选择“查看表计信息”菜单后，表计信息界面如图4所示。
图4表计信息界面
4应用案例
研究成果在华东某机场能源管理系统中得到了实际应用，共接入电表近6500块。对如此数量级的信息进行管理，如果采用传统表格形式进行交互，展示形式单一，不够直观，用户体验也不够友好。
通过提供表计使用信息管理界面和支路拓扑信息管理界面，实现对支路表计上下级关系的灵活配置，较好地展示了电表的上下级支路信息、表计的使用信息和用能计量信息等。此外，在本文基础上又增加了按变电站分组和搜索定位功能，较好地满足了用户要求，得到了用户方面的积极反馈。
5结语
本文探讨了一种通用的具备可交互功能的能耗表计数据的能流关系的绘制方法，通过人工配置形成初始信息，程序自动绘制能流图的形式形象地展现了上下级支路的隶属关系，节省了人力成本。用户通过人机交互，可以获取相关节点的表具信息、实时数据、历史数据，与下级支路的差值等，便于进行能量平衡分析、用能异常的排查、挖掘和分析节能潜力等。
•69
•
svg和h5的关系[1 ]姚萌江•发挥能流图对能源管理的支撑作用[J  ]・
上海节能，2013 (12) ：42-45・
[2 ]杨川，冯川•基于能流图的能量系统优化技术在凝
结水系统中的应用[J ].科学技术创新,2018 (24): 146-147.
[3 ]赖晓文，陈启鑫，夏清，等•基于SVG 技术的电力系
统可视化平台集成与方法库开发[J ].电力系统自 动化，2012，36 (16) ：76-81.
[4]
张运良，张兆锋，张晓丹，等•使用D3. JS 的知识组
织系统WEB 动态交互可视化功能实现[J ].现代 图书情报技术，2013 (增刊1) ： 127-131.
[5]
吕之华.精通D3. JS ：交互式数据可视化高级编程
[M ].北京：电子工业出版社，2015・
收稿日期：2020-12-24
Design  and  Implementation  of  Interactive  Topological  Diagram  of
Measuring  Instrdments  of  Energy
LIU  Chuanzhong' , DU  Peiwei 2, ZHANG  Hong 1
[1. Shanghai  Electrical  Apparatus  Research  Institute ( Group ) Co. , Ltd. , Shanghai  Key  Laboratora  of
Smart  Grid  Demand  Response , Research  and  Development! Experiment) Centea  of  Electricol
Equipment  for  National  EneTgy  Smart  Grid  User  Side , Shanghai  200063, China ；
2. Shanghai  Electricol  Apparatus  Research  Institute , Shanghai  200063 , China ]
Abstract : In  the  complex  eneray  management  system , the  relationship  betreen  the  upper  and  lower  levels  of  a  larae
numbea  of  eneray  consumption  meten  should  be  clearly  presented , which  can  help  useia  I  m
ake  balancc  analysis  of
eneray  consumption  and  diaanose  meter  measurement  anomalies. The  paper  present  a  method  te  generate  the  interactive  topological  graph  of  the  branches  measured  by  the  metea  by  configuring  the  relevent  information  of  the  metea , which  can  dm p lay  the  basic  information  of  the  metea , real-time  readings , hmtorical  date  of  the  relevent  nodes , and  provide  an
eSective  visualization  tool  for  energy  balancc  analysis  and  metea  measurement  anomaly. The  sorwaa  developed  according
to  the  idee  of  this  paper  has  been  applied  in  the  project , and  has  gained  good  asults  and  positive  feedback  from  users.
Key  words ： measuring  instrument  of  energy ； interactive  function ； vissalization ； topological  graph
of
【办刊理念】
以促进创新与发展为己任
以满足读者需求为追求
以创办一流期刊为目标
专业：权威可靠引导趋势 应用：深入实践贴近市场发行：渠道优越覆盖面广
服务：专业细致客户至上
• 70
•

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。