一种能源管理系统web实时数据监测方法技术方案

本发明专利技术提供了一种能源管理系统web实时数据监测方法，包括实时数据、客户端浏览器中的本地数据、VUE中的data数据和SVG数据，数据流向如下：当客户端浏览器中的Web数据监测界面程序收到采集数据后，对数据进行解析，并将解析后的数据保存到浏览器本地存储空间中；当解析后数据保存到浏览器本地存储空间时，会触发实现注册的自定义事件；自定义事件会根据浏览器保存的数据类型及数值，修改VUE中data的items数据；当VUE中data的items数据发生改变后，会触发事先通过VUE中watch变量items的方法。本发明专利技术有益效果：用SVG技术用于实现能源管理系统Web实时数据监测功能，通过VUE.js技术和JavaScript技术，以及利用浏览器存储方法，自定义一整套实时数据监测显示方法。自定义一整套实时数据监测显示方法。自定义一整套实时数据监测显示方法。

【技术实现步骤摘要】
一种能源管理系统web实时数据监测方法


[0001]本专利技术属于数据监测
，尤其是涉及一种能源管理系统web实时数据监测方法。

技术介绍

[0002]城市轨道交通行业的快速发展，各种系统采用不同的技术对地铁各部分区域进行监测。目前有两种普遍的软件架构实现对各设备进行监视功能，一种是基于C/S架构的监测系统，一种是基于B/S架构的监测系统。C/S架构的监测系统具有较强的时效性优势，在监测系统中应用较为广泛。今年来，随着分布式技术的发展，采用B/S架构的监测系统也得到了发展，在时效性方面有的监测系统性能不输于C/S架构的监测系统，加之B/S架构采用开放的标准，较低的开发和维护成本，无需客户端安装软件，只需要在客户端的浏览器中输入指定的网址，即可进入监测系统中，灵活方便，具有巨大的发展优势。
[0003]传统的地铁能源管理系统是C/S架构软件，因为能源管理系统是一个对能耗智能表计的一个抄表系统，时效性要求不高，一般采用C/S架构软件来实现能源管理系统的功能。近年来，随着地铁监测功能的需求增加，多系统数据融合的要求也渐增多，能源管理系统需要接入其他系统数据，对用能设备的状况和能耗量的可视化要求同样增多。由于B/S架构可扩展性以及维护性较强，可以对已有运行的能源管理系统的Web界面扩展实时数据监测界面，减少系统程序开发工作量。

技术实现思路

[0004]有鉴于此，本专利技术旨在提出一种能源管理系统web实时数据监测方法，对已有运行的能源管理系统的Web界面扩展实时数据监测界面，减少系统程序开发工作量。
[0005]为达到上述目的，本专利技术的技术方案是这样实现的：
[0006]一种能源管理系统web实时数据监测方法，包括实时数据、客户端浏览器中的本地数据、VUE中的data数据和SVG数据，数据流向如下：
[0007]当客户端浏览器中的Web数据监测界面程序收到采集数据后，对数据进行解析，并将解析后的数据保存到浏览器本地存储空间中；
[0008]当解析后数据保存到浏览器本地存储空间时，会触发实现注册的自定义事件；
[0009]自定义事件会根据浏览器保存的数据类型及数值，修改VUE中data的items数据；
[0010]当VUE中data的items数据发生改变后，会触发事先通过VUE中watch变量items的方法，根据数据类型和数值，获取SVG图对应的元素和属性，修改里面的数值。
[0011]进一步的，包括以下步骤：
[0012]S1、绘制SVG格式监测界面；
[0013]S2、对SVG图中所有设备图形和连接线设置相关id值和属性值；
[0014]S3、对SVG图中实时状态进行显示设置；
[0015]S4、对SVG图中实时数据进行显示设置；
[0016]S5、对SVG文件所有用电设备点击事件进行注册；
[0017]S6、保存SVG文件；
[0018]S7、将SVG文件更新到web程序中；
[0019]S8、客户端Web数据监测界面程序初始化并配置items对象；
[0020]S9、客户端连接消息中间件MQ；
[0021]S10、重写setltem，并注册触发了setltemEvent事件事件；
[0022]S11、从消息中间件MQ获取采集模块返回的数据消息；
[0023]S12、解析数据存入本地，触发了setltemEvent事件；
[0024]S13、自动修改监测界面中实时状态和实时数据显示内容。
[0025]进一步的，在步骤S1中，利用能源管理系统特有SVG绘图软件，绘制能源管理系统监测设备的显示界面，设备显示界面包括各设备图形Ti和连接线Li。
[0026]进一步的，在步骤S2中，对设备图形Ti和连接线Li的运行状态和实时状态进行显示设置，SVG图中的图形Ti和连接线Li的运行状态通过对里面的fill属性进行设置实现，在SVG绘制好的图形和连接线后，通过配置v
‑
bind指令，将fill属性关联到VUE的data对象中，一旦VUE的data对象内容发生改变，会自动改变SVG图的颜色，及时反馈图形Ti和连接线Li状态。
[0027]进一步的，在步骤S4中，对需要显示的设备图形Ti和连接线Li实时数据信息
‑
实时数据显示设置，通过在对应设备图形Ti和连接线Li旁边增加TEXT标签，在TEXT标签中配置设备id，属性值Atrri，并通过VUE初始化函数，将属性值Atrri的所有数据id分别添加到VUE的data对象items中，并配置VUE的watch监视items变化情况，一旦items对应的数据项发生改变，自动调用javascript函数处理发生改变的数据项，并通过改变TEXT标签的textContent属性更新数据信息。
[0028]进一步的，在步骤S5中，通过JavaScript函数对SVG文件所有用电设备点击事件进行注册，当对设备图形Ti进行点击的时候，会弹出设备当天数据统计的历史曲线图和柱状图，通过layer.js实现点击事件弹框和echart.js在弹框中实现曲线图和柱状图，历史数据通过专用JavaScript接口获取并生成指定的echart.js需要的json格式字符串，用于显示实现曲线图和柱状图。
[0029]进一步的，在步骤S8中，Web数据监测界面程序初始化时，VUE中data中创建属性对象items，VUE读取SVG文件中的属性，分别在VUE的data中动态增加所有属性值到items对象中，建立了VUE的data属性对象与SVG文件中自定义属性进行关联，因此只要修改了VUE的data属性items对象里面的对应成员变量数据，就可以自动的在SVG显示图中进行更新对应的监测数据，主要包括实时状态显示和实时数据显示。
[0030]进一步的，在步骤S9中，客户端采用stomp，所述stomp为Simple Text Orientated Messaging Protocol，连接消息中间件MQ软件，Web端通过获取当前SVG图中需要监测的数据项集合，组对应格式的采集数据任务json数据发送至消息中间件MQ，能源管理系统采集模块用于从消息中间件MQ获取所需采集数据任务，执行采集任务，并将采集后的数据转发至消息中间件MQ。
[0031]进一步的，在步骤S10中，客户端Web数据监测界面程序获取浏览器中localStorage.setItem，sessionStorage.setItem方法对象，并重写两个对象的setItem方
法，并在里面增加自定义事件，然后利用浏览器中的window.dispatchEvent方法触发该setItemEvent事件，为后续程序监听使用。
[0032]进一步的，在步骤S11中，Web数据监测界面程序从消息中间件MQ获取能源管理系统采集模块返回的实时数据消息，后立即启动解析实时数据工作。
[0033]相对于现有技术，本发本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种能源管理系统web实时数据监测方法，其特征在于，包括实时数据、客户端浏览器中的本地数据、VUE中的data数据和SVG数据，数据流向如下：当客户端浏览器中的Web数据监测界面程序收到采集数据后，对数据进行解析，并将解析后的数据保存到浏览器本地存储空间中；当解析后数据保存到浏览器本地存储空间时，会触发实现注册的自定义事件；自定义事件会根据浏览器保存的数据类型及数值，修改VUE中data的items数据；当VUE中data的items数据发生改变后，会触发事先通过VUE中watch变量items的方法，根据数据类型和数值，获取SVG图对应的元素和属性，修改里面的数值。2.根据权利要求1所述的一种能源管理系统web实时数据监测方法，其特征在于，包括以下步骤：S1、绘制SVG格式监测界面；S2、对SVG图中所有设备图形和连接线设置相关id值和属性值；S3、对SVG图中实时状态进行显示设置；S4、对SVG图中实时数据进行显示设置；S5、对SVG文件所有用电设备点击事件进行注册；S6、保存SVG文件；S7、将SVG文件更新到web程序中；S8、客户端Web数据监测界面程序初始化并配置items对象；S9、客户端连接消息中间件MQ；S10、重写setltem，并注册触发了setltemEvent事件事件；S11、从消息中间件MQ获取采集模块返回的数据消息；S12、解析数据存入本地，触发了setltemEvent事件；S13、自动修改监测界面中实时状态和实时数据显示内容。3.根据权利要求2所述的一种能源管理系统web实时数据监测方法，其特征在于：在步骤S1中，利用能源管理系统特有SVG绘图软件，绘制能源管理系统监测设备的显示界面，设备显示界面包括各设备图形Ti和连接线Li。4.根据权利要求2所述的一种能源管理系统web实时数据监测方法，其特征在于：在步骤S2中，对设备图形Ti和连接线Li的运行状态和实时状态进行显示设置，SVG图中的图形Ti和连接线Li的运行状态通过对里面的fill属性进行设置实现，在SVG绘制好的图形和连接线后，通过配置v
‑
bind指令，将fill属性关联到VUE的data对象中，一旦VUE的data对象内容发生改变，会自动改变SVG图的颜色，及时反馈图形Ti和连接线Li状态。5.根据权利要求2所述的一种能源管理系统web实时数据监测方法，其特征在于，在步骤S4中，对需要显示的设备图形Ti和连接线Li实时数据信息
‑
实时数据显示设置，通过在对应设备图形Ti和连接线Li旁边增加TEXT标签，在TEXT标签中配置设备id，属性值Atrri，并通过VUE初始化函数，将属性值Atrri的...

【专利技术属性】
技术研发人员：张振华，陈欢，王传启，张浩，喻常洪，崔金旭，张雄雄，
申请(专利权)人：天津凯发电气股份有限公司，
类型：发明
国别省市：