一种基于Html5技术的实时数据的监视系统技术方案

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

A Real-time Data Monitoring System Based on Html5 Technology

【技术实现步骤摘要】
一种基于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)场景类的设计场景类的设计用于画面中所有图形类和动画类的管理，此外，其还包含了画面大小，画面次序，画面背景，脚本库文件列表等信息。在图形类设计的基础上，为了提供丰富的交互功能，可以通过编写脚本扩展对象的交互事件以及报警事件等。例如，在系统启动时，加载报警执行脚本，扫描越线数据并通过动画本文档来自技高网...

【技术保护点】
1.一种基于Html5技术的实时数据的监视系统，其特征在于，包括基于Html5技术的web后台服务模块、web前台画面编辑模块和web前台画面显示模块，其中：所述web后台服务模块用于提供配置信息、实时数据；所述web前台画面编辑模块用于显示编辑页面，响应用户的编辑请求，并根据用户对所述编辑页面的操作生成画面的序列化文档；所述web前台显示模块用于根据所述配置信息和所述序列化文档在显示界面上显示所述画面，并通过后台实时库服务获取并展示对应所述实时数据。

【技术特征摘要】
1.一种基于Html5技术的实时数据的监视系统，其特征在于，包括基于Html5技术的web后台服务模块、web前台画面编辑模块和web前台画面显示模块，其中：所述web后台服务模块用于提供配置信息、实时数据；所述web前台画面编辑模块用于显示编辑页面，响应用户的编辑请求，并根据用户对所述编辑页面的操作生成画面的序列化文档；所述web前台显示模块用于根据所述配置信息和所述序列化文档在显示界面上显示所述画面，并通过后台实时库服务获取并展示对应所述实时数据。2.如权利要求1所述的监视系统，其特征在于，所述web后台服务模块连接有配置库，用于从中拉取所述配置信息。3.如权利要求1所述的监视系统，其特征在于，所述web后台服务模块连接有实时库，用于从中拉取所述实时数据。4....

【专利技术属性】
技术研发人员：柳俊，李匡，梁春蕾，梁犁丽，胡宇丰，徐海卿，刘可新，
申请(专利权)人：北京中水科水电科技开发有限公司，中国水利水电科学研究院，
类型：发明
国别省市：北京,11