CN110109423B - 一种基于Html5技术的水电厂实时数据监视系统 - Google Patents

Abstract

本发明实施例提供了一种基于Html5技术的实时数据的监视系统，具体包括web后台服务模块、web前台画面编辑模块、web前台画面展示模块。web后台服务模块用于提供配置信息、实时数据；web前台画面编辑模块用于响应用户的编辑请求，显示编辑页面，并根据用户对编辑页面的操作生成画面的序列化文档；web前台显示模块用于根据配置信息和序列化文档在显示界面上显示画面和实时数据。由于基于Html5技术实现的上述系统无插件，免安装，使用方便，只要是支持Html5协议的浏览器都可以使用，而实际上目前电脑、智能手机及其他移动终端的浏览器都支持这种协议，从而解决了传统方式下的展示系统不具复用性的问题。

Description

一种基于Html5技术的水电厂实时数据监视系统

技术领域

本发明涉及web技术领域，特别是涉及一种基于Html5技术的水电厂实时数据监视系统。

背景技术

在水电厂的生产环境中，在利用Web页面展示实时数据的方式有很多，例如使用动态或者静态方式的Html技术、SVG技术、Flash技术、Applet技术等方式展示数据。但是，对于大多数技术来说，在画面显示与控制逻辑设计上很难实现可配置，即一次编程仅对应一个画面，导致不具有复用性。

发明内容

有鉴于此，本发明提供了一种基于Html5技术的水电厂实时数据监视系统，以解决传统方式下的展示系统不具复用性的问题。

为了解决上述问题，本发明公开了一种基于Html5技术的水电厂实时数据监视系统，包括基于Html5技术的web后台服务模块、web前台画面编辑模块和web前台画面显示模块，其中：

所述web后台服务模块用于提供配置信息、实时数据；

所述web前台画面编辑模块用于响应用户的编辑请求，显示编辑页面，并根据用户对所述编辑页面的操作生成画面的序列化文档；

所述web前台显示模块用于根据所述配置信息和所述序列化文档在显示界面上显示所述画面和所述实时数据。

可选的，所述web后台服务模块连接有配置库，用于从中拉取所述配置信息。

可选的，所述web后台服务模块连接有实时库，用于从中拉取所述实时数据。

可选的，所述实时库连接有数据采集模块，其中：

所述数据采集模块用于获取所述实时数据。

可选的，所述序列化文档包括所述画面的场景信息、图像对象和脚本中的部分或全部。

可选的，所述编辑页面用于响应用户的编辑操作，实现预设图形对象的添加、删除、修改、对齐、清空或保存，或者实现画面文档的导出或画幅切换。

可选的，所述web前台显示模块用于支持用户自定义js脚本的扩展，并用于实现特定的交互控制逻辑或者报警提示方式。

可选的，所述web前台显示模块基于Ajax方式或者Websocket方式与所述web后台服务模块进行通信。

可选的，所述显示界面用于响应用户的显示操作，实现数据刷新、参数设置、报警信息处理或图形的加载与切换。

从上述技术方案可以看出，本发明提供了一种实时数据的展示系统，具体包括web后台服务模块、web前台画面编辑模块、web前台画面展示模块。web后台服务模块用于提供配置信息、实时数据；web前台画面编辑模块用于响应用户的编辑请求，显示编辑页面，并根据用户对编辑页面的操作生成画面的序列化文档；web前台显示模块用于根据配置信息和序列化文档在显示界面上显示画面和实时数据。由于基于Html5技术实现的上述系统无插件，免安装，使用方便，只要是支持Html5协议的浏览器都可以使用，而实际上目前电脑、智能手机及其他移动终端的浏览器都支持这种协议，从而解决了传统方式下的展示系统不具复用性的问题。

另外，针对画面的交互的方式复杂多变，很难采用固定程序实现，本发明在画面显示与交互逻辑的实现上均采用js脚本，方便二者互相调用，便于高级用户扩展自定义交互逻辑。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种基于Html5技术的实时数据的监视系统；

图2为本申请实施例提供的一种电站运行示意图；

图3为本申请实施例提供的一种流域雨水情监视图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1为本申请实施例提供的一种基于Html5技术的实时数据的监视系统。

如图1所示，本实施例提供的展示系统用于展示水电厂的实时数据，具体包括基于Html5技术的web后台服务模块10、web前台画面编辑模块20和web前台画面显示模块30。

web后台服务模块用于为web前台提供配置信息、数据服务与控制的执行服务。web前台画面编辑模块用于响应用户的编辑请求，显示相应的编辑页面，该编辑页面可以根据用户的编辑操作生成画面文档。具体来说，该画面文档是画面的序列化文档，为Json格式，主要包含画面的场景、图形对象及相关脚本等信息。Web前台画面显示模块用于根据配置信息和序列化文档展示上述画面和水电厂的实时数据。

Web后台服务模块分别连接有相应的配置库100和实时库200，其中配置库用于供web后台服务模块拉取上述的配置信息，而实时库则用于供该web后台服务模块拉取水电厂的实时数据。该实时库中的实时数据来自于与该实时库相连接的数据采集模块300。该数据采集模块用于采集水电厂在实际生产中产生的反映生产实况的实时数据。

另外，该Web后台服务模块还包括相应的交互脚本响应模块400，该模块用于实现控制命令的中转服务，即接收用户输入的控制命令，并提供对控制命令的翻译，即翻译成相应的控制命令脚本，以便Web后台服务模块根据控制命令脚本执行用户所需的操作。

用户可以利用web前台画面编辑模块，并通过拖拽图元到画面生成图形对象表示一个具体的模型对象，一般采用文本、颜色、动画、柱状图、饼图、过程线等方式在该图形对象周边表达某一方面的数据特征，例如，采用文字表达水库的水位，采用旋转动画表示水力发电机的处于发电状态。图形类(图元)的设计是本发明的关键技术。

1)基类的设计

所有类必须支持序列化，基类Node定义了对象序列化和方序列化接口。

2)图形基类的设计

所有模型对象的图形类的基类BasicNode，继承于Node，扩展定义了如下属性：oName关联模型对象名字，oType关联模型对象类型，animate动画属性(可以是一个AnimateNode类实例)。oType类型值包含10-测站(11雨量站，12水位站，14流量站，18土壤墒情站)、20-电站，30-机组，40-闸门，50-数据点对象，60-水尺，70-水系。其他属性如前景色，背景色，基点或者中心点，编辑等继承Node的属性。

3)图形类的设计

扩展图形类继承了BasicNode，可以具体表示某一种模型的图形的显示，也可以只是简单的图形或者图片。其中，StNode可以用于表示遥测站模型，PlantNode表示水库模型，PTextNode表示和一数据点关联的动态文本，TableNode表示表格，UnitNode表示水电机组，WGateNode表示闸门，WRuleNode表示水尺，RiverNode表示水系，ButtonNode表示操作按钮等。ButtonNode可以用于配置一段执行脚本，用于响应按钮点击事件，例如场景切换。

4)动画类的设计

动画类可以实现图形对象实现闪烁，旋转，运动，变形，变色等动画特征。

5)场景类的设计

场景类的设计用于画面中所有图形类和动画类的管理，此外，其还包含了画面大小，画面次序，画面背景，脚本库文件列表等信息。

在图形类设计的基础上，为了提供丰富的交互功能，可以通过编写脚本扩展对象的交互事件以及报警事件等。例如，在系统启动时，加载报警执行脚本，扫描越线数据并通过动画或者对话框弹出消息等方式提示用户重点关注。也可以在某一数据点上增加点击事件，响应后弹出对话框显示历史的过程数据。系统内置很多脚本库，为了支持用户扩展，可以根据特定的方式扩展自定义脚本。

该web前台画面编辑模块根据用户的编辑操作，实现预设图形对象的添加、删除、修改、对齐、清空或保存，或者实现画面文档的导出或画幅切换。

web前台显示模块通过Ajax方式或者Websocket方式实现与web后台服务模块之间的通信连接，依次实现对页面数据的刷新。当web前台显示模块用于根据用户的显示操作显示页面，并还包含但不限于以下功能：1)刷新数据，调用服务更新绘图区对应数据，2)设置，设置图形刷新设等参数，选择时间断面刷新或者实时刷新等，停止动画，或者启动动画等3)报警，越限报警信息与处理对话框，4)图幅加载与切换，根据图形文件初始化画面等。

当通过Ajax方式进行通信时，由前台线程控制刷新周期(根据需求和网络条件可设置为3-10s)和数据点范围，向后台发送实时数据请求，后台监听前台的实时数据请求；当通过Websocket方式进行通信时，由后台控制刷新周期(根据需求、用户数量及网络条件可设置为1-5s)和数据点范围，采用订阅模式确定数据点范围，前台监听后台实时数据的更新。前一种方式客户端工作多服务端工作少，适用于大用户量的数据访问，但实时性较差；后一种方式客户端工作少服务端工作多，实时性好，同样硬件条件下，可同时使用的用户量较少，对服务器性能要求较高。

从上述技术方案可以看出，本实施例提供了一种基于Html5技术的实时数据的展示系统，具体包括web后台服务模块、web前台画面编辑模块、web前台画面展示模块。web后台服务模块用于提供配置信息、实时数据；web前台画面编辑模块用于响应用户的编辑请求，显示编辑页面，并根据用户对编辑页面的操作生成画面的序列化文档；web前台显示模块用于根据配置信息和序列化文档在显示界面上显示画面和实时数据。由于基于Html5技术实现的上述系统无插件，免安装，使用方便，只要是支持Html5协议的浏览器都可以使用，而实际上目前电脑、智能手机及其他移动终端的浏览器都支持这种协议，从而解决了传统方式下的展示系统不具复用性的问题。

且由于画面的交互的方式复杂多变，很难采用固定程序实现，而本发明在画面显示与交互逻辑的实现上均采用js脚本，方便二者互相调用，便于高级用户扩展自定义交互逻辑。

对于电站运行的场景，可以如图2所示的那样进行监视。

可以在图上绘制机组、闸门、水尺、表格、文字等图形对象，展示水电站闸门与机组运行大概位置以及特征参数，并能实现以下具体功能：1)用特定形状图元表示闸门对象，用图元的颜色表示闸门状态，用填充色和文字表示闸门的开度；2)用特定形状图元表示机组对象，用颜色和动画表示机组状态，用文字表示机组的出力和流量；3)用水尺表示水库上、下游水位，水尺填充设根据水位变化，水位标注位置也根据位置变化；4)用表格表示水库重要运行参数等信息；5)其他文字标注等信息。

对于流域雨水情监视的场景，可以如图3所示的那样进行展示。

可以在图上绘制雨量站、水位流量站、水电站、文字等图形对象，展示测站雨量、水位和流量，电站上下游库水位、出入库流量等信息，并能实现以下具体功能：1)用特定形状图元表示雨量站对象，用文字表示最近1小时雨量、最近3小时雨量、最近n小时雨量等；2)用特定形状图元表示水位流量站对象，用文字表示测站的水位和流量；3)用特定形状图元表示水电站对象，用文字表示水电站的上游水位、下游水位、出库流量、入库流量、出力等；4)其他文字标注等信息。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本发明所提供的技术方案进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (7)

1.一种基于Html5技术的水电厂实时数据监视系统，所述监视系统应用于水电厂，其特征在于，包括基于Html5技术的web后台服务模块、web前台画面编辑模块和web前台画面显示模块，其中：

所述web后台服务模块用于提供配置信息、水电厂的实时数据，其中，所述水电厂的实时数据包括：水电站机组出力和流量，闸门的开度和流量，雨量，水库上、下游水位、出入库流量；

所述web前台画面编辑模块用于显示编辑页面，响应用户的编辑请求，并根据用户对所述编辑页面的操作生成画面的序列化文档，所述序列化文档包括所述画面的场景信息、图形对象和脚本中的部分或全部；

所述web前台画面显示模块用于根据所述配置信息和所述序列化文档在显示界面上显示所述画面，并通过后台实时库服务获取并展示对应所述水电厂的实时数据；

其中，所述场景信息包括：电站运行场景、流域雨水情监视场景；

所述图形对象包括：机组、闸门、水尺、表格、文字、雨量站、水位流量站、水电站；

所述web后台服务模块包括交互脚本响应模块，所述交互脚本响应模块用于实现控制命令的中转服务，接收用户输入的控制命令，并提供对控制命令的翻译，翻译成相应的控制命令脚本，以便所述web后台服务模块根据所述控制命令脚本执行用户所需的操作；

所述水电厂实时数据监视系统还包括：采用js脚本实现画面显示与交互逻辑，方便所述画面显示与所述交互逻辑互相调用，便于高级用户扩展自定义交互逻辑；

所述水电厂实时数据监视系统还包括：通过编写脚本扩展对象的交互事件以及报警事件以提供丰富的交互功能，包括：在系统启动时，加载报警执行脚本，扫描越线数据并通过动画或者对话框弹出消息提示用户重点关注，和/或，在某一数据点上增加点击事件，响应后弹出对话框显示历史的过程数据；所述监视系统内置脚本库，以支持用户根据特定的方式扩展自定义脚本。

2.如权利要求1所述的监视系统，其特征在于，所述web后台服务模块连接有配置库，用于从中拉取所述配置信息。

3.如权利要求1所述的监视系统，其特征在于，所述web后台服务模块连接有实时库，用于从中拉取所述水电厂的实时数据。

4.如权利要求3所述的监视系统，其特征在于，所述实时库连接有数据采集模块，其中：

所述数据采集模块用于获取所述水电厂的实时数据。

5.如权利要求1所述的监视系统，其特征在于，所述编辑页面用于响应用户的编辑操作，实现预设图形对象的添加、删除、修改、对齐、清空或保存，或者实现画面文档的导出或画幅切换。

6.如权利要求1所述的监视系统，其特征在于，所述web前台画面显示模块基于Ajax方式或者Websocket方式与所述web后台服务模块进行通信。

7.如权利要求1所述的监视系统，其特征在于，所述显示界面用于响应用户的显示操作，实现数据刷新、参数设置、报警信息处理或图形的加载与切换。

Images