技术特征：
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的所有数据id分别添加到vue的data对象items中，并配置vue的watch监视items变化情况，一旦items对应的数据项发生改变，自动调用javascript函数处理发生改变的数据项，并通过改变text标签的textcontent属性更新数据信息。6.根据权利要求2所述的一种能源管理系统web实时数据监测方法，其特征在于：在步
骤s5中，通过javascript函数对svg文件所有用电设备点击事件进行注册，当对设备图形ti进行点击的时候，会弹出设备当天数据统计的历史曲线图和柱状图，通过layer.js实现点击事件弹框和echart.js在弹框中实现曲线图和柱状图，历史数据通过专用javascript接口获取并生成指定的echart.js需要的json格式字符串，用于显示实现曲线图和柱状图。7.根据权利要求2所述的一种能源管理系统web实时数据监测方法，其特征在于：在步骤s8中，web数据监测界面程序初始化时，vue中data中创建属性对象items，vue读取svg文件中的属性，分别在vue的data中动态增加所有属性值到items对象中，建立了vue的data属性对象与svg文件中自定义属性进行关联，因此只要修改了vue的data属性items对象里面的对应成员变量数据，就可以自动的在svg显示图中进行更新对应的监测数据，主要包括实时状态显示和实时数据显示。8.根据权利要求2所述的一种能源管理系统web实时数据监测方法，其特征在于：在步骤s9中，客户端采用stomp，所述stomp为simple text orientated messaging protocol，连接消息中间件mq软件，web端通过获取当前svg图中需要监测的数据项集合，组对应格式的采集数据任务json数据发送至消息中间件mq，能源管理系统采集模块用于从消息中间件mq获取所需采集数据任务，执行采集任务，并将采集后的数据转发至消息中间件mq。9.根据权利要求2所述的一种能源管理系统web实时数据监测方法，其特征在于：在步骤s10中，客户端web数据监测界面程序获取浏览器中localstorage.setitem，sessionstorage.setitem方法对象，并重写两个对象的setitem方法，并在里面增加自定义事件，然后利用浏览器中的window.dispatchevent方法触发该setitemevent事件，为后续程序监听使用。10.根据权利要求2所述的一种能源管理系统web实时数据监测方法，其特征在于：在步骤s11中，web数据监测界面程序从消息中间件mq获取能源管理系统采集模块返回的实时数据消息，后立即启动解析实时数据工作。
技术总结
本发明提供了一种能源管理系统web实时数据监测方法，包括实时数据、客户端浏览器中的本地数据、VUE中的data数据和SVG数据，数据流向如下：当客户端浏览器中的Web数据监测界面程序收到采集数据后，对数据进行解析，并将解析后的数据保存到浏览器本地存储空间中；当解析后数据保存到浏览器本地存储空间时，会触发实现注册的自定义事件；自定义事件会根据浏览器保存的数据类型及数值，修改VUE中data的items数据；当VUE中data的items数据发生改变后，会触发事先通过VUE中watch变量items的方法。本发明有益效果：用SVG技术用于实现能源管理系统Web实时数据监测功能，通过VUE.js技术和JavaScript技术，以及利用浏览器存储方法，自定义一整套实时数据监测显示方法。自定义一整套实时数据监测显示方法。自定义一整套实时数据监测显示方法。
技术研发人员：张振华 陈欢 王传启 张浩 喻常洪 崔金旭 张雄雄
受保护的技术使用者：天津凯发电气股份有限公司
技术研发日：2022.08.22
技术公布日：2022/11/15