CN111611518B - 基于Html5的可视化展示页面自动发布方法及系统 - Google Patents

Abstract

本发明公开了一种基于Html5的可视化展示页面自动发布方法，包括获取由可视化设计器编辑生成的可视化画面ZIP文件流；按照预设的转换规则，将所述可视化画面ZIP文件流中转换为Html5页面；响应于浏览器请求所述Html5页面的信号，对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化；基于设定的刷新间隔，对所述控件数据进行定时刷新，完成基于Html5的可视化展示页面自动发布。本发明利用Html5技术开发出页面发布引擎和页面渲染展示引擎，实现可视化设计器页面一处设计多处展示，解决跨平台展示的问题。

Description

基于Html5的可视化展示页面自动发布方法及系统

技术领域

本发明属于领域，具体涉及一种基于Html5的可视化展示页面自动发布方法及系统。

背景技术

当前可视化设计器已具备图形界面配置页面布局、样式属性、数据绑定、页面交互的能力，页面持久化文件已经有了成熟的规范定义，包括控件、布局、图层、画面参数等，画面文件为XML布局描述文件和资源文件，然而，画面渲染播放器是基于WPF技术开发，用设计器设计的画面只能在Windows环境下的以客户端窗口模式展示。

发明内容

针对上述问题，本发明提出一种基于Html5的可视化展示页面自动发布方法及系统，利用Html5技术开发出页面发布引擎和页面渲染展示引擎，实现可视化设计器页面一处设计多处展示，解决跨平台展示的问题。

为了实现上述技术目的，达到上述技术效果，本发明通过以下技术方案实现：

第一方面，本发明提供了一种基于Html5的可视化展示页面自动发布方法，包括：

获取由可视化设计器编辑生成的可视化画面ZIP文件流；

按照预设的转换规则，将所述可视化画面ZIP文件流中转换为Html5页面；

响应于浏览器请求所述Html5页面的信号，对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化；

基于设定的刷新间隔，对所述控件数据进行定时刷新，完成基于Html5的可视化展示页面自动发布。

可选地，所述Html5页面的生成过程包括：

遍历所述可视化画面ZIP文件流中的各个子文件；

当子文件为页面描述XML文件时，则获取该子文件中的所有节点，根据预设的转换规范将节点及节点的配置属性转换为JS脚本字符串；

创建Html5文档对象的head、body节点，并将所述js字符串作为body部分的script属性值，最后把生成的Html5文档对象写入到服务端画面目录，至此完成了Html5页面的转换；

当子文件为自定义页面js文件或Resource文件，则直接解压到服务端目录。

可选地，所述预设的转换规范是指将页面描述XML文件解析转义成Html5文档结构的规范定义，页面描述XML文件中每个组件配置属性部分通过JSON的XML工具类转换为JSONObject对象，组件元素标签部分则直接生成实例化JS脚本。

可选地，所述对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化，包括：

基于所述Html5页面，创建画面容器；

根据所述Html5页面中相关内容的JSON配置属性信息分别创建展现数据集、画面参数实例、画面图层实例、控件动画实例；所述画面参数实例通过属性DesignerValue赋值，设置画面参数改变事件OnPropertyChanged；所述画面图层实例关联Html5页面上的控件属性，添加图层显示和隐藏事件；所述控件动画实例在加载完成之后，调用动画事件；

根据控件JSON配置属性值，按照控件顺序依次创建页面控件对象，然后将对象添加到画面容器中，再调用控件的初始化方法，初始化控件内容；

页面和控件加载完成之后，开始请求画面数据，通过DataService请求数据，过滤页面上已经绑定了控件的数据集，然后组装请求参数templateReq，发送到后台服务请求数据，后台通过解析templateReq，获取数据集的配置属性，完成数据查询，并将结果返回JSON格式的数据；

接收到的JSON格式的数据，需要根据展现数据集Id匹配页面上控件绑定的展现数据集，然后给展现数据集的DataSet赋值。同一个数据集可能绑定了多个控件，需要获取到数据集绑定的集合BindObjects，然后通过BusinessBinding的Value值，分别将数据传递给控件，在BusinessBinding获取到值之后，需要对多条数据遍历并调用数据转换器，将JSON格式数据转换成控件需要的数据，最后调用控件的UpdateData方法，更新控件数据，完成画面渲染展示和控件数据初始化。

可选地，所述基于设定的刷新间隔，对所述控件数据进行定时刷新，包括：

对画面上的所有展现数据集进行遍历，过滤掉没有绑定控件的展现数据集，将已绑定控件的展现数据集的刷新频率对象IntervalObject添加到全局IntervalObjectList列表中，IntervalObject对象包含控件刷新频率TimerInterval、计时变量CountNum、数据集标识DatasourceId属性；

启动全局页面刷新定时器，维护IntervalObjectList列表的数据；

所述全局页面刷新定时器触发时，将IntervalObjectList列表中各个IntervalObject的计时器变量CountNum值递减1，当CountNum<0的时候，表示此数据集刷新时间到了，即将数据集添加到Ajax请求队列请求数据集查询数据；

将CountNum<0的展现数据集，组装templateReq请求数据，并通过Ajax请求后台服务数据查询接口，数据查询结果dataSources以JSON格式传输到客户端；

成功接收数据后，遍历所有接收的数据，根据展现数据集ID，将数据分别赋值给展现数据集的Data属性；

将数据集刷新频率对象的计时器变量CountNum复位为控件刷新频率TimerInterval的值，继续循环计时。

第二方面，本发明提供了一种基于Html5的可视化展示页面自动发布系统，包括：

可视化设计器，编辑生成的可视化画面ZIP文件流；

Html5页面发布引擎，按照预设的转换规则，将所述可视化画面ZIP文件流中转换为Html5页面；

Html5页面渲染展示引擎，响应于浏览器请求所述Html5页面的信号，对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化；

数据刷新模块，基于设定的刷新间隔，对所述控件数据进行定时刷新，完成基于Html5的可视化展示页面自动发布。

可选地，所述Html5页面的生成过程包括：

遍历所述可视化画面ZIP文件流中的各个子文件；

当子文件为页面描述XML文件时，则获取该子文件中的所有节点，根据预设的转换规范将节点及节点的配置属性转换为JS脚本字符串；

创建Html5文档对象的head、body节点，并将所述js字符串作为body部分的script属性值，最后把生成的Html5文档对象写入到服务端画面目录，至此完成了Html5页面的转换；

当子文件为自定义页面js文件或Resource文件，则直接解压到服务端目录。

可选地，所述对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化，包括：

基于所述Html5页面，创建画面容器；

根据所述Html5页面中相关内容的JSON配置属性信息分别创建展现数据集、画面参数实例、画面图层实例、控件动画实例；所述画面参数实例通过属性DesignerValue赋值，设置画面参数改变事件OnPropertyChanged；所述画面图层实例关联Html5页面上的控件属性，添加图层显示和隐藏事件；所述控件动画实例在加载完成之后，调用动画事件；

根据控件JSON配置属性值，按照控件顺序依次创建页面控件对象，然后将对象添加到画面容器中，再调用控件的初始化方法，初始化控件内容；

页面和控件加载完成之后，开始请求画面数据，通过DataService请求数据，过滤页面上已经绑定了控件的数据集，然后组装请求参数templateReq，发送到后台服务请求数据，后台通过解析templateReq，获取数据集的配置属性，完成数据查询，并将结果返回JSON格式的数据；

接收到的JSON格式的数据，需要根据展现数据集Id匹配页面上控件绑定的展现数据集，然后给展现数据集的DataSet赋值。同一个数据集可能绑定了多个控件，需要获取到数据集绑定的集合BindObjects，然后通过BusinessBinding的Value值，分别将数据传递给控件，在BusinessBinding获取到值之后，需要对多条数据遍历并调用数据转换器，将JSON格式数据转换成控件需要的数据，最后调用控件的UpdateData方法，更新控件数据，完成画面渲染展示和控件数据初始化。

可选地，所述基于设定的刷新间隔，对所述控件数据进行定时刷新，包括：

对画面上的所有展现数据集进行遍历，过滤掉没有绑定控件的展现数据集，将已绑定控件的展现数据集的刷新频率对象IntervalObject添加到全局IntervalObjectList列表中，IntervalObject对象包含控件刷新频率TimerInterval、计时变量CountNum、数据集标识DatasourceId属性；

启动全局页面刷新定时器，维护IntervalObjectList列表的数据；

所述全局页面刷新定时器触发时，将IntervalObjectList列表中各个IntervalObject的计时器变量CountNum值递减1，当CountNum<0的时候，表示此数据集刷新时间到了，即将数据集添加到Ajax请求队列请求数据集查询数据；

将CountNum<0的展现数据集，组装templateReq请求数据，并通过Ajax请求后台服务数据查询接口，数据查询结果dataSources以JSON格式传输到客户端；

成功接收数据后，遍历所有接收的数据，根据展现数据集ID，将数据分别赋值给展现数据集的Data属性；

将数据集刷新频率对象的计时器变量CountNum复位为控件刷新频率TimerInterval的值，继续循环计时

与现有技术相比，本发明的有益效果：

本发明提供的基于Html5的可视化发布展示技术，在利用设计器的图形界面上以拖拽和属性栏配置的方式设计完画面后可直接发布成相应的Html5页面，期间无需另外开发任何代码，实现了可视化设计器配置的页面能够在主流浏览器中展现，并可支持数据刷新和页面交互操作，做到页面一处设计，多处展示，多类终端展示(大屏、桌面、移动终端等)，有效的解决了可视化平台页面跨平台展示的问题，而且实现了利用可视化设计器来简单快捷地配置出BS系统。

附图说明

为了使本发明的内容更容易被清楚地理解，下面根据具体实施例并结合附图，对本发明作进一步详细的说明，其中：

图1为本发明一种实施例的Html5页面发布流程图；

图2为本发明一种实施例的Html5页面渲染展示流程图；

图3为本发明一种实施例的页面控件数据刷新流程图；

图4为本发明一种实施例的基于Html5的可视化展示页面自动发布系统的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明的保护范围。

下面结合附图对本发明的应用原理作详细的描述。

实施例1

本发明实施例中提供了一种基于Html5的可视化展示页面自动发布方法，如图1-3所示，包括以下步骤：

获取由可视化设计器编辑生成的可视化画面ZIP文件流；

按照预设的转换规则，将所述可视化画面ZIP文件流中转换为Html5页面；

响应于浏览器请求所述Html5页面的信号，对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化；

基于设定的刷新间隔，对所述控件数据进行定时刷新，完成基于Html5的可视化展示页面自动发布。

在本发明实施例的一种具体实施方式中，所述Html5页面的生成过程包括：document.xml、script.js和Resources子文件，其中document.xml为页面描述XML文件，是基于XML的矢量图形界面标准规范；script.js为自定义脚本文件，作为页面辅助个性化的脚本，Resources为公共资源目录(用来存储页面资源文文件，诸如图片、音视频文件等)；

遍历所述可视化画面ZIP文件流中的各个子文件，所述可视化画面ZIP文件流包含的子文件包括

当子文件为页面描述XML文件时，则获取该子文件中的所有节点，根据预设的转换规范将节点及节点的配置属性转换为JS脚本字符串；

创建Html5文档对象的head、body节点，并将所述js字符串作为body部分的script属性值，最后把生成的Html5文档对象写入到服务端画面目录，至此完成了Html5页面的转换；

当子文件为自定义页面js文件或Resource文件，则直接解压到服务端目录。

在本发明实施例的一种具体实施方式中，所述根据预设的转换规范将节点及节点的配置属性转换为JS脚本字符串，步骤之后还包括：

利用YUI compressor对所述JS脚本字符串进行压缩处理。

在本发明实施例的一种具体实施方式中，所述预设的转换规范是指将页面描述XML文件解析转义成Html5文档结构的规范定义，页面描述XML文件中每个组件配置属性部分通过JSON的XML工具类转换为JSONObject对象，组件元素标签部分则直接生成实例化JS脚本；具体地，各主要组件元素属性需要转换的结构如表1所示：

表1

在本发明实施例的一种具体实施方式中，所述创建Html5文档对象的head节点，包括：

向head节点中添加meta节点、link节点和script节点；

所述meta节点设置字符集为UTF-8；

所述link节点引用样式文件main.css、网页图标favicon.ico；

所述script节点引用框架包文件ConfigVisu.js、MainImport.js。

在本发明实施例的一种具体实施方式中，当可视化画面ZIP文件流中包含自定义js脚本文件jsscript.js，则先将自定义js脚本文件解压到visu_web/pages/画面ID/Scripts目录下，同时在head节点下添加script节点引用jsscript.js文件，至此完成head节点的内容。

在本发明实施例的一种具体实施方式中，所述对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化，包括：

基于所述Html5页面，创建画面容器；

根据所述Html5页面中相关内容的JSON配置属性信息分别创建展现数据集、画面参数实例、画面图层实例、控件动画实例；所述画面参数实例通过属性DesignerValue赋值，设置画面参数改变事件OnPropertyChanged；所述画面图层实例关联Html5页面上的控件属性，添加图层显示和隐藏事件；所述控件动画实例在加载完成之后，调用动画事件；

根据控件JSON配置属性值，按照控件顺序依次创建页面控件对象，然后将对象添加到画面容器中，再调用控件的初始化方法，初始化控件内容；

页面和控件加载完成之后，开始请求画面数据，通过DataService请求数据，过滤页面上已经绑定了控件的数据集，然后组装请求参数templateReq，发送到后台服务请求数据，后台通过解析templateReq，获取数据集的配置属性，完成数据查询，并将结果返回JSON格式的数据；

接收到的JSON格式的数据，需要根据展现数据集Id匹配页面上控件绑定的展现数据集，然后给展现数据集的DataSet赋值。同一个数据集可能绑定了多个控件，需要获取到数据集绑定的集合BindObjects，然后通过BusinessBinding的Value值，分别将数据传递给控件，在BusinessBinding获取到值之后，需要对多条数据遍历并调用数据转换器，将JSON格式数据转换成控件需要的数据，最后调用控件的UpdateData方法，更新控件数据，完成画面渲染展示和控件数据初始化。

在本发明实施例的一种具体实施方式中，所述基于设定的刷新间隔，对所述控件数据进行定时刷新，包括：

对画面上的所有展现数据集进行遍历，过滤掉没有绑定控件的展现数据集，将已绑定控件的展现数据集的刷新频率对象IntervalObject添加到全局IntervalObjectList列表中，IntervalObject对象包含控件刷新频率TimerInterval、计时变量CountNum、数据集标识DatasourceId属性；

启动全局页面刷新定时器，维护IntervalObjectList列表的数据；

所述全局页面刷新定时器触发时，将IntervalObjectList列表中各个IntervalObject的计时器变量CountNum值递减1，当CountNum<0的时候，表示此数据集刷新时间到了，即将数据集添加到Ajax请求队列请求数据集查询数据；

将CountNum<0的展现数据集，组装templateReq请求数据，并通过Ajax请求后台服务数据查询接口，数据查询结果dataSources以JSON格式传输到客户端；

成功接收数据后，遍历所有接收的数据，根据展现数据集ID，将数据分别赋值给展现数据集的Data属性；

将数据集刷新频率对象的计时器变量CountNum复位为控件刷新频率TimerInterval的值，继续循环计时。

实施例2

本发明实施例中提供了一种基于Html5的可视化展示页面自动发布系统，如图4所示，包括：

可视化设计器，编辑生成的可视化画面ZIP文件流；

Html5页面发布引擎，按照预设的转换规则，将所述可视化画面ZIP文件流中转换为Html5页面；

Html5页面渲染展示引擎，响应于浏览器请求所述Html5页面的信号，对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化；

数据刷新模块，基于设定的刷新间隔，对所述控件数据进行定时刷新，完成基于Html5的可视化展示页面自动发布。

下面对本发明实施例中的基于Html5的可视化展示页面自动发布系统的具体工作过程进行详细说明。

(1)利用可视化设计器配置好画面，形成可视化画面ZIP文件流，并存储于数据库中；

(2)调用Html5页面发布引擎，读取所述可视化画面ZIP文件流，并遍历可视化画面ZIP文件流中的各个子文件；

如果是页面描述XML文件，则分别获取页面描述XML文件中的Document、VSDataSources、Params、Layers、Animations、Items等Element节点对象，根据预设的规范将节点及配置属性转换为JS脚本字符串；

利用YUI compressor对所述JS脚本字符串进行压缩处理，减少网络传输数据量的同时也起到了页面加密效果；

创建Html5文档，添加body及其script元素节点，将JS脚本字符串添加到script节点的Text属性，至此完成body元素的内容；

向Html5文档添加head元素节点，分别添加meta节点设置字符集为UTF-8，link节点引用样式文件main.css、网页图标favicon.ico，script节点引用框架包文件ConfigVisu.js、MainImport.js；

如果可视化画面ZIP文件流中包含自定义JS脚本文件jsscript.js，先将JS文件解压到visu_web/pages/画面ID/Scripts目录下，同时在head元素下添加script节点引用jsscript.js文件，至此完成head元素的内容；

将head、body拼装为htmldoc元素Html5文档对象，将htmldoc流写入到服务端visu_web/pages/画面ID/目录下index.html文件中，最终生成的Html5文档结构如下：

可视化画面ZIP文件流中如果包含资源文件，则将Resource文件解压到服务器端visu_web/pages/画面ID/Resource目录下。

(3)调用Html5页面渲染展示引擎：

创建CanvasEx画面容器；定位好画面的大小、背景色、字体等画面信息，添加画面加载之后事件，处理图层和动画的画面加载之后操作。

加载画面内容；根据页面内容的JSON配置属性信息分别创建展现数据集(VSDataSource)、画面参数(Params)、画面图层(Layer)、控件动画(Animation)实例对象。画面参数实例通过属性DesignerValue赋值，设置画面参数改变事件OnPropertyChanged；图层对象实例关联页面上的控件属性，添加图层显示和隐藏事件；动画对象实例，在控件加载完成之后，调用动画事件；

加载页面控件。根据控件JSON配置属性值，按照控件顺序依次创建页面控件对象，然后将对象添加到画面容器中，再调用控件的初始化方法，初始化控件内容。

请求画面数据。页面和控件加载完成之后，开始请求画面数据，通过DataService请求数据，过滤页面上已经绑定了控件的数据集，然后组装请求参数templateReq，发送到后台服务请求数据，后台通过解析templateReq，获取数据集的配置属性，完成数据查询，并将结果返回JSON格式的数据。

接收数据DataSet。接收到的数据，需要根据展现数据集Id匹配页面上控件绑定的展现数据集，然后给展现数据集的DataSet赋值。同一个数据集可能绑定了多个控件，需要获取到数据集绑定的集合BindObjects，然后通过BusinessBinding的Value值，分别将数据传递给控件，在BusinessBinding获取到值之后，需要对多条数据遍历并调用数据转换器，将JSON数据转换成控件需要的数据。最后调用控件的UpdateData方法，更新控件数据。

完成画面内容及数据整体展示。

(3)启动数据刷新模块：

过滤展现数据集。对画面上的所有展示数据集进行遍历，过滤掉没有绑定控件的展现数据集，将已绑定控件的数据集的刷新频率对象IntervalObject添加到全局IntervalObjectList列表中，IntervalObject对象包含控件刷新频率TimerInterval、计时变量CountNum、数据集标识DatasourceId属性。

启动全局页面刷新定时器，定时器每1s触发一次，用于维护IntervalObjectList列表的数据。

定时处理数据集计时器阈值。全局页面刷新定时器触发时将IntervalObjectList列表中各个IntervalObject的计时器变量CountNum值递减1，当CountNum<0的时候，表示此数据集刷新时间到了，即将数据集添加到Ajax请求队列请求数据集查询数据。

请求后台数据接口获取数据集数据。将CountNum<0的展现数据集，组装templateReq请求数据，并通过Ajax请求后台服务数据查询接口，数据查询结果dataSources以JSON格式传输到客户端。

控件数据刷新。成功接收数据后，遍历所以接收的数据，根据展现数据集ID，将数据分别赋值给展现数据集的Data属性。

数据集计时器数值复位。将数据集刷新频率对象的计时器变量CountNum复位为控件刷新频率TimerInterval的值，继续循环计时。

以上显示和描述了本发明的基本原理和主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。

Claims (5)

1.一种基于Html5的可视化展示页面自动发布方法，其特征在于，包括：

获取由可视化设计器编辑生成的可视化画面ZIP文件流；

按照预设的转换规则，将所述可视化画面ZIP文件流中转换为Html5页面；

响应于浏览器请求所述Html5页面的信号，对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化；

基于设定的刷新间隔，对所述控件数据进行定时刷新，完成基于Html5的可视化展示页面自动发布；

所述Html5页面的生成过程包括：

遍历所述可视化画面ZIP文件流中的各个子文件；

当子文件为页面描述XML文件时，则获取该子文件中的所有节点，根据预设的转换规范将节点及节点的配置属性转换为JS脚本字符串；

创建Html5文档对象的head、body节点，并将所述JS脚本字符串作为body部分的script属性值，最后把生成的Html5文档对象写入到服务端画面目录，至此完成了Html5页面的转换；

当子文件为自定义页面js文件或Resource文件，则直接解压到服务端目录；

所述预设的转换规则是指将页面描述XML文件解析转义成Html5文档结构的规范定义，页面描述XML文件中每个组件配置属性部分通过JSON的XML工具类转换为JSONObject对象，组件元素标签部分则直接生成实例化JS脚本。

2.根据权利要求1所述的一种基于Html5的可视化展示页面自动发布方法，其特征在于：所述对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化，包括：

基于所述Html5页面，创建画面容器；

根据所述Html5页面中相关内容的JSON配置属性信息分别创建展现数据集、画面参数实例、画面图层实例、控件动画实例；所述画面参数实例通过属性DesignerValue赋值，设置画面参数改变事件OnPropertyChanged；所述画面图层实例关联Html5页面上的控件属性，添加图层显示和隐藏事件；所述控件动画实例在加载完成之后，调用动画事件；

根据控件JSON配置属性值，按照控件顺序依次创建页面控件对象，然后将对象添加到画面容器中，再调用控件的初始化方法，初始化控件内容；

页面和控件加载完成之后，开始请求画面数据，通过DataService请求数据，过滤页面上已经绑定了控件的数据集，然后组装请求参数templateReq，发送到后台服务请求数据，后台通过解析templateReq，获取数据集的配置属性，完成数据查询，并将结果返回JSON格式的数据；

接收到的JSON格式的数据，需要根据展现数据集Id匹配页面上控件绑定的展现数据集，然后给展现数据集的DataSet赋值；同一个数据集可能绑定了多个控件，需要获取到数据集绑定的集合BindObjects，然后通过BusinessBinding的Value值，分别将数据传递给控件，在BusinessBinding获取到值之后，需要对多条数据遍历并调用数据转换器，将JSON格式数据转换成控件需要的数据，最后调用控件的UpdateData方法，更新控件数据，完成画面渲染展示和控件数据初始化。

3.根据权利要求2所述的一种基于Html5的可视化展示页面自动发布方法，其特征在于：所述基于设定的刷新间隔，对所述控件数据进行定时刷新，包括：

对画面上的所有展现数据集进行遍历，过滤掉没有绑定控件的展现数据集，将已绑定控件的展现数据集的刷新频率对象IntervalObject添加到全局IntervalObjectList列表中，IntervalObject对象包含控件刷新频率TimerInterval、计时变量CountNum、数据集标识DatasourceId属性；

启动全局页面刷新定时器，维护IntervalObjectList列表的数据；

所述全局页面刷新定时器触发时，将IntervalObjectList列表中各个IntervalObject的计时器变量CountNum值递减1，当CountNum<0的时候，表示此数据集刷新时间到了，即将数据集添加到Ajax请求队列请求数据集查询数据；

将CountNum<0的展现数据集，组装templateReq请求数据，并通过Ajax请求后台服务数据查询接口，数据查询结果dataSources以JSON格式传输到客户端；

成功接收数据后，遍历所有接收的数据，根据展现数据集ID，将数据分别赋值给展现数据集的Data属性；

将数据集刷新频率对象的计时器变量CountNum复位为控件刷新频率TimerInterval的值，继续循环计时。

4.一种基于Html5的可视化展示页面自动发布系统，其特征在于，包括：

可视化设计器，编辑生成的可视化画面ZIP文件流；

Html5页面发布引擎，按照预设的转换规则，将所述可视化画面ZIP文件流转换为Html5页面；

Html5页面渲染展示引擎，响应于浏览器请求所述Html5页面的信号，对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化；

数据刷新模块，基于设定的刷新间隔，对所述控件数据进行定时刷新，完成基于Html5的可视化展示页面自动发布；

所述Html5页面的生成过程包括：

遍历所述可视化画面ZIP文件流中的各个子文件；

当子文件为页面描述XML文件时，则获取该子文件中的所有节点，根据预设的转换规则将节点及节点的配置属性转换为JS脚本字符串；

创建Html5文档对象的head、body节点，并将所述JS脚本字符串作为body部分的script属性值，最后把生成的Html5文档对象写入到服务端画面目录，至此完成了Html5页面的转换；

当子文件为自定义页面js文件或Resource文件，则直接解压到服务端目录；

所述对所述Html5页面进行实例化，完成画面渲染展示和控件数据初始化，包括：

基于所述Html5页面，创建画面容器；

根据所述Html5页面中相关内容的JSON配置属性信息分别创建展现数据集、画面参数实例、画面图层实例、控件动画实例；所述画面参数实例通过属性DesignerValue赋值，设置画面参数改变事件OnPropertyChanged；所述画面图层实例关联Html5页面上的控件属性，添加图层显示和隐藏事件；所述控件动画实例在加载完成之后，调用动画事件；

根据控件JSON配置属性值，按照控件顺序依次创建页面控件对象，然后将对象添加到画面容器中，再调用控件的初始化方法，初始化控件内容；

页面和控件加载完成之后，开始请求画面数据，通过DataService请求数据，过滤页面上已经绑定了控件的数据集，然后组装请求参数templateReq，发送到后台服务请求数据，后台通过解析templateReq，获取数据集的配置属性，完成数据查询，并将结果返回JSON格式的数据；

接收到的JSON格式的数据，需要根据展现数据集Id匹配页面上控件绑定的展现数据集，然后给展现数据集的DataSet赋值，同一个数据集可能绑定了多个控件，需要获取到数据集绑定的集合BindObjects，然后通过BusinessBinding的Value值，分别将数据传递给控件，在BusinessBinding获取到值之后，需要对多条数据遍历并调用数据转换器，将JSON格式数据转换成控件需要的数据，最后调用控件的UpdateData方法，更新控件数据，完成画面渲染展示和控件数据初始化。

5.根据权利要求4所述的一种基于Html5的可视化展示页面自动发布系统，其特征在于，所述基于设定的刷新间隔，对所述控件数据进行定时刷新，包括：

对画面上的所有展现数据集进行遍历，过滤掉没有绑定控件的展现数据集，将已绑定控件的展现数据集的刷新频率对象IntervalObject添加到全局IntervalObjectList列表中，IntervalObject对象包含控件刷新频率TimerInterval、计时变量CountNum、数据集标识DatasourceId属性；

启动全局页面刷新定时器，维护IntervalObjectList列表的数据；

所述全局页面刷新定时器触发时，将IntervalObjectList列表中各个IntervalObject的计时器变量CountNum值递减1，当CountNum<0的时候，表示此数据集刷新时间到了，即将数据集添加到Ajax请求队列请求数据集查询数据；

将CountNum<0的展现数据集，组装templateReq请求数据，并通过Ajax请求后台服务数据查询接口，数据查询结果dataSources以JSON格式传输到客户端；

成功接收数据后，遍历所有接收的数据，根据展现数据集ID，将数据分别赋值给展现数据集的Data属性；

将数据集刷新频率对象的计时器变量CountNum复位为控件刷新频率TimerInterval的值，继续循环计时。

Images