一种能源管理系统web实时数据监测方法与流程

1.本发明属于数据监测技术领域，尤其是涉及一种能源管理系统web实时数据监测方法。


背景技术：

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


技术实现要素：

4.有鉴于此，本发明旨在提出一种能源管理系统web实时数据监测方法，对已有运行的能源管理系统的web界面扩展实时数据监测界面，减少系统程序开发工作量。
5.为达到上述目的，本发明的技术方案是这样实现的：
6.一种能源管理系统web实时数据监测方法，包括实时数据、客户端浏览器中的本地数据、vue中的data数据和svg数据，数据流向如下：
7.当客户端浏览器中的web数据监测界面程序收到采集数据后，对数据进行解析，并将解析后的数据保存到浏览器本地存储空间中；
8.当解析后数据保存到浏览器本地存储空间时，会触发实现注册的自定义事件；
9.自定义事件会根据浏览器保存的数据类型及数值，修改vue中data的items数据；
10.当vue中data的items数据发生改变后，会触发事先通过vue中watch变量items的方法，根据数据类型和数值，获取svg图对应的元素和属性，修改里面的数值。
11.进一步的，包括以下步骤：
12.s1、绘制svg格式监测界面；
13.s2、对svg图中所有设备图形和连接线设置相关id值和属性值；
14.s3、对svg图中实时状态进行显示设置；
15.s4、对svg图中实时数据进行显示设置；
16.s5、对svg文件所有用电设备点击事件进行注册；
17.s6、保存svg文件；
18.s7、将svg文件更新到web程序中；
19.s8、客户端web数据监测界面程序初始化并配置items对象；
20.s9、客户端连接消息中间件mq；
21.s10、重写setltem，并注册触发了setltemevent事件事件；
22.s11、从消息中间件mq获取采集模块返回的数据消息；
23.s12、解析数据存入本地，触发了setltemevent事件；
24.s13、自动修改监测界面中实时状态和实时数据显示内容。
25.进一步的，在步骤s1中，利用能源管理系统特有svg绘图软件，绘制能源管理系统监测设备的显示界面，设备显示界面包括各设备图形ti和连接线li。
26.进一步的，在步骤s2中，对设备图形ti和连接线li的运行状态和实时状态进行显示设置，svg图中的图形ti和连接线li的运行状态通过对里面的fill属性进行设置实现，在svg绘制好的图形和连接线后，通过配置v-bind指令，将fill属性关联到vue的data对象中，一旦vue的data对象内容发生改变，会自动改变svg图的颜色，及时反馈图形ti和连接线li状态。
27.进一步的，在步骤s4中，对需要显示的设备图形ti和连接线li实时数据信息-实时数据显示设置，通过在对应设备图形ti和连接线li旁边增加text标签，在text标签中配置设备id，属性值atrri，并通过vue初始化函数，将属性值atrri的所有数据id分别添加到vue的data对象items中，并配置vue的watch监视items变化情况，一旦items对应的数据项发生改变，自动调用javascript函数处理发生改变的数据项，并通过改变text标签的textcontent属性更新数据信息。
28.进一步的，在步骤s5中，通过javascript函数对svg文件所有用电设备点击事件进行注册，当对设备图形ti进行点击的时候，会弹出设备当天数据统计的历史曲线图和柱状图，通过layer.js实现点击事件弹框和echart.js在弹框中实现曲线图和柱状图，历史数据通过专用javascript接口获取并生成指定的echart.js需要的json格式字符串，用于显示实现曲线图和柱状图。
29.进一步的，在步骤s8中，web数据监测界面程序初始化时，vue中data中创建属性对象items，vue读取svg文件中的属性，分别在vue的data中动态增加所有属性值到items对象中，建立了vue的data属性对象与svg文件中自定义属性进行关联，因此只要修改了vue的data属性items对象里面的对应成员变量数据，就可以自动的在svg显示图中进行更新对应的监测数据，主要包括实时状态显示和实时数据显示。
30.进一步的，在步骤s9中，客户端采用stomp，所述stomp为simple text orientated messaging protocol，连接消息中间件mq软件，web端通过获取当前svg图中需要监测的数据项集合，组对应格式的采集数据任务json数据发送至消息中间件mq，能源管理系统采集模块用于从消息中间件mq获取所需采集数据任务，执行采集任务，并将采集后的数据转发至消息中间件mq。
31.进一步的，在步骤s10中，客户端web数据监测界面程序获取浏览器中localstorage.setitem，sessionstorage.setitem方法对象，并重写两个对象的setitem方
法，并在里面增加自定义事件，然后利用浏览器中的window.dispatchevent方法触发该setitemevent事件，为后续程序监听使用。
32.进一步的，在步骤s11中，web数据监测界面程序从消息中间件mq获取能源管理系统采集模块返回的实时数据消息，后立即启动解析实时数据工作。
33.相对于现有技术，本发明所述的一种能源管理系统web实时数据监测方法具有以下有益效果：
34.本发明所述的一种能源管理系统web实时数据监测方法，采用svg技术用于实现能源管理系统web实时数据监测功能，通过vue.js技术和javascript技术，以及利用浏览器存储方法，自定义一整套实时数据监测显示方法，利用该方法可以将实时数据更新到显示界面上，并能在客户端浏览器中存储持久化历史数据，用于显示历史数据曲线图和柱状图，无需从能源管理系统数据库中获取，加块页面响应速度，减轻服务器负担。
附图说明
35.构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
36.图1为本发明实施例所述的实时数据流向图示意图；
37.图2为本发明实施例所述的web实时数据实现流程示意图。
具体实施方式
38.需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
39.下面将参考附图并结合实施例来详细说明本发明。
40.svg格式是一种用xml定义的语言,用来描述二维矢量及矢量/栅格图形，利用svg技术实现web图形界面展示是一种通用的方法，在很多场景得到了广泛的应用。由于svg是一种xml定义的语言，可以通过在各元素节点中增加各种属性配置，也可以按照用户场景增加自定义节点属性。可以按照不同监测对象的实际特点和需求，对svg显示数据增加自定义节点属性，利用javascript技术，实现不同的web实时数据监测显示方法。本专利按照地铁能源管理系统的应用场景的功能特点，借鉴svg技术，通过vue技术和javascript技术，建立基于svg格式的特有元素自定义节点属性方法，利用节点属性值绑定不同设备的功能的显示属性，实现对多种类型的能源管理系统监测设备的web实时数据监测的功能。
41.实时数据监测显示方法具体分为4处数据，实时数据，客户端浏览器中本地数据，vue中data数据，svg数据，如图1所示，4种数据流向图。当客户端浏览器中的web数据监测界面程序收到采集数据后，解析数据，并将解析的数据保存到浏览器本地存储空间中。当保存解析的数据到浏览器本地存储空间时，会触发实现注册的自定义事件。自定义事件会根据浏览器保存的数据类型及数值，修改vue中data的items数据。当vue中data的items数据发生改变后，会触发事先通过vue中watch变量items的方法，根据数据类型和数值，获取svg图对应的元素和属性，修改里面的数值。从而完成实时数据到监测界面的更新过程。
42.web实时数据实现具体流程如图2所示，具体实现方法流程如下：
43.1、利用能源管理系统特有svg绘图软件，绘制能源管理系统监测设备的显示界面。
设备显示界面包括各设备图形ti和连接线li。
44.2、对svg图中所有设备图形和连接线，设置id值和基本属性值集合attri，包括三种方案：
45.第一种方案是：设备id值为设备在能源管理系统中对应的设备id，属性值atrri用于该设备在svg上显示实时监测数据，不同设备对应不同类型实时监测数据组合，如电扶梯设备，实时监测数据由电压，电流，功率，功率因数，频率，设备运行时间，运行模式(工频，变频)，电度组成，而照明设备，仅有电压，电流，功率，功率因数，频率,电度；每种实时监测数据对应一个数据id，多个数据id共同组成属性值attri。连接线li仅有id和线路连通属性，如下所示
46.电扶梯i：
47.id＝”1001”atrri＝”1011,1012,1013,1021,1022,1023,1031,1032,1033,1034,1041,1042,1043,1044,1051,1052,1053,1054,1061,1071,2011,2021,2031,2041”；
48.依次对应：a相电压，b相电压，c相电压，a相电压，b相电压，c相电压，a相正向有功功率，b相正向有功功率，c相正向有功功率，正向总有功功率，a相反向有功功率，b相反向有功功率，c相反向有功功率，反向总有功功率，a相功率因数，b相功率因数，c相功率因数，总功率因数，频率，设备运行时间，运行模式，正向有功电度，正向无功电度，反向有功电度，反向无功电度；
49.照明设备j：
50.id＝”1002”atrri＝”1011,1012,1013,1021,1022,1023,1031,1032,1033,1034,1041,1042,1043,1044,1051,1052,1053,1054,2011,2021,2031,2041”；
51.依次对应：a相电压，b相电压，c相电压，a相电压，b相电压，c相电压，a相正向有功功率，b相正向有功功率，c相正向有功功率，正向总有功功率，a相反向有功功率，b相反向有功功率，c相反向有功功率，反向总有功功率，a相功率因数，b相功率因数，c相功率因数，总功率因数，频率，正向有功电度，正向无功电度，反向有功电度，反向无功电度；
52.第二种方案是：由上可知设备属性值attfi存在大量相同的数据id且比较冗长，为了更加有效的采集车站所有监测设备的实时数据，本专利另外对一些通用的实时监测数据组合为一个特殊的属性值atrri，减少svg中的属性值attfi组合长度。这些特殊的数据id以及正常的实时监测数据均需要在能源管理系统中web系统的数据字典模块中对每个数据id进行配置。此种方式配置较为简便，可以根据现场设备数据变更情况，直接在svg文件上修改设备id值和数据属性值attri，
53.如下所示：
54.电扶梯i：id＝”1001”atrri＝”9011,1061,1071,9021”；
55.依次对应：其中9011表示a相电压，b相电压，c相电压，a相电压，b相电压，c相电压，a相正向有功功率，b相正向有功功率，c相正向有功功率，正向总有功功率，a相反向有功功率，b相反向有功功率，c相反向有功功率，反向总有功功率，a相功率因数，b相功率因数，c相功率因数，总功率因数，频率；1061为设备运行时间，1071为运行模式；9021表示正向有功电度，正向无功电度，反向有功电度，反向无功电度；
56.照明设备j：id＝”1002”atrri＝”9011,9021”；
57.依次对应：其中9011表示a相电压，b相电压，c相电压，a相电压，b相电压，c相电压，
a相正向有功功率，b相正向有功功率，c相正向有功功率，正向总有功功率，a相反向有功功率，b相反向有功功率，c相反向有功功率，反向总有功功率，a相功率因数，b相功率因数，c相功率因数，总功率因数，频率；9021表示正向有功电度，正向无功电度，反向有功电度，反向无功电度；
58.第三种方案是：仅需要对svg上对应设备元素图形的xml格式标签中仅增加id值，不需要增加数据属性值，对svg文件配置要求不高。之后在能源管理系统中web系统的数据字典模块中对所有的设备id单独进行配置，每个设备单独配置自身的数据id集。此种方式比较繁琐，适用于所需实时监测设备较少的车站中，并且无共有属性的设备，如温湿度传感器设备。
59.以上三种配置方式可以相互转换，无明确规定，按照现场设备实际情况进行灵活配置。
60.3、对设备图形ti和连接线li的运行状态-实时状态进行显示设置。svg图中的图形ti和连接线li的运行状态是通过对里面的fill属性进行设置实现。在svg绘制好的图形和连接线后，通过配置v-bind指令，将fill属性关联到vue的data对象中。一旦vue的data对象内容发生改变，会自动改变svg图的颜色，及时反馈图形ti和连接线li状态。
61.4、对需要显示的设备图形ti和连接线li实时数据信息-实时数据显示设置，通过在对应设备图形ti和连接线li旁边增加text标签，在text标签中配置设备id，属性值atrri，并通过vue初始化函数，将属性值atrri的所有数据id分别添加到vue的data对象items中，并配置vue的watch监视items变化情况，一旦items对应的数据项发生改变，自动调用javascript函数处理发生改变的数据项，并通过改变text标签的textcontent属性更新数据信息。
62.5、同时通过javascript函数对svg文件所有用电设备点击事件进行注册，当对设备图形ti进行点击的时候，会弹出设备当天数据统计的历史曲线图和柱状图。通过layer.js实现点击事件弹框和echart.js在弹框中实现曲线图和柱状图。历史数据通过专用javascript接口获取并生成指定的echart.js需要的json格式字符串，用于显示实现曲线图和柱状图。
63.6、保存生成对应各个厂站的实时数据监测界面的svg文件。
64.7、将svg文件更新到web程序中指定目录中。
65.8、初始化并配置items对象，web数据监测界面程序中初始化时候，vue中data中创建属性对象items。vue读取svg文件中的属性，分别在vue的data中动态增加所有属性值到items对象中。建立了vue的data属性对象与svg文件中自定义属性进行关联。这样只要修改了vue的data属性items对象里面的对应成员变量数据，就可以自动的在svg显示图中进行更新对应的监测数据，主要包括实时状态显示和实时数据显示。无需进行额外操作。
66.9、客户端采用stomp即simple(or streaming)text orientated messaging protocol，连接消息中间件mq软件。web端通过获取当前svg图中需要监测的数据项集合，组对应格式的采集数据任务json数据发送至消息中间件mq。能源管理系统采集模块用于从消息中间件mq获取所需采集数据任务，执行采集任务，并将采集后的数据转发至消息中间件mq。
67.10、客户端web数据监测界面程序获取浏览器中localstorage.setitem，
sessionstorage.setitem方法对象，并重写两个对象的setitem方法，并在里面增加自定义事件，然后利用浏览器中的window.dispatchevent方法触发该setitemevent事件，被后续程序监听使用。
68.11、web数据监测界面程序从消息中间件mq获取能源管理系统采集模块返回的实时数据消息，后立即启动解析实时数据工作。
69.12、将解析的实时数据存入本地。利用localstorage.setitem方法将解析的数据分别存入浏览器本地中，在调用localstorage.setitem的过程中，触发了setitemevent事件。
70.13、在web数据监测界面程序中利用window.addeventlistener注册监听自定义事件setitemevent，并在回调函数中通过事件获取用于调用localstorage.setitem方法存入数据中的key,val。然后将获取的key,val数据调用函数编写好的javascript函数updatebind实现修改vue的data属性对象items的对应变量值。由于前面vue中watch监视了对象items，一旦vue的data属性对象items发生改变，会自动修改监测界面中实时状态和实时数据显示内容。
71.本方案同时根据不同用户的数据权限，通过javascript判断用户权限内容，对web数据监测界面进行数据屏蔽，只允许相应权限的数据内容进行显示。
72.本方案增加web数据监测界面导出保存功能，可以通过编写javascript函数实现监测界面以及历史数据曲线图和柱状图的png格式保存。同时也可以实现历史数据内容保存为excel格式报表。
73.本方案建立到由浏览器发送监测数据任务，前置采集返回监测实时数据，浏览器解析实时数据，浏览器存储实时数据，浏览器更新vue的data中的属性对象item中成员变量值，vue自动更新svg中绑定的自定义属性值，浏览器自动更新实时数据监测界面。
74.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
75.在本技术所提供的几个实施例中，应该理解到，所揭露的方法和系统，可以通过其它的方式实现。例如，以上所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。上述单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
76.最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。
77.以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。