一种基于浏览器的可视化页面生成和浏览方法与流程

本发明涉及电网调度自动化技术领域，具体涉及一种基于浏览器的可视化页面生成和浏览方法。

背景技术：

随着浏览器技术的发展，在现今的电网调度自动化系统中，传统的c/s架构的页面编辑和浏览方式，难以满足业务需求的快速变化，以及对运行环境的轻量化要求。电网调度自动化系统基于web的应用功能，在现场投运时，往往需要根据本地化用户需求，对页面布局、样式等展示效果进行适应调整，传统编码方式面临开发周期长、功能代码固化、现场工程难以维护等问题，需要开发人员根据现场需求修改原有代码和重新调试，再投运现场进行测试，很难快速响应用户本地化需求，也加重了产品研发人员的负担。

技术实现要素：

为解决现有技术中的不足，本发明提供一种基于浏览器的可视化页面生成和浏览方法，产品研发人员可以基于拖拽以可视化方式实现页面设计，工程人员可以在现场以可视化方式调整页面布局和样式，快速响应用户本地化需求，满足电网调度自动化系统web应用的高效开发和易于维护的要求，解决了传统编码方式面临开发周期长、功能代码固化、现场工程难以维护的问题。

为了实现上述目标，本发明采用如下技术方案：一种基于浏览器的可视化页面生成和浏览方法，其特征在于：包括步骤：

1）数据集配置，配置基于浏览器的可视化页面需要的数据集，确定数据集数据结构、获取来源及动态参数；

2）基于浏览器实现可视化界面设计，配置页面布局组件和展示组件；

3）脚本编写，编写页面交互逻辑和业务处理逻辑脚本，完成交互响应处理；

4）页面生成，保存并生成页面模板文件；

5）页面浏览，解析页面模板文件生成应用页面。

前述的一种基于浏览器的可视化页面生成和浏览方法，其特征是：所述数据集数据结构确定了数据集的数据模型；所述数据集获取来源包括静态数据、异步请求动态数据、数据库数据；所述动态参数包括数据获取的动态参数变量名称、数据类型信息。

前述的一种基于浏览器的可视化页面生成和浏览方法，其特征是：所述步骤2）具体步骤为：拖拽页面布局组件，完成页面布局设计；拖拽页面展示组件到布局组件中相应位置，配置展示组件属性，关联数据集，设置交互事件和联动事件，实现页面多组件间联动；配置页面展示组件显示，设计页面整体样式。

前述的一种基于浏览器的可视化页面生成和浏览方法，其特征是：所述页面多组件间联动实现方法为：配置组件联动事件及其输出参数，关联组件输入参数映射关系，组件发生变化时，触发关联组件刷新操作，实现页面不同组件间的联动。

前述的一种基于浏览器的可视化页面生成和浏览方法，其特征是：所述页面模板文件包括显示模板区、逻辑脚本区、显示样式区；显示模板区按照组件层次结构保存；逻辑脚本区保存数据集配置、组件模型定义、组件数据关联、组件界面交互逻辑脚本，显示样式区，保存页面模板内各组件展示样式配置。

前述的一种基于浏览器的可视化页面生成和浏览方法，其特征是：所述步骤5）具体步骤为：

1）解析显示模板区组件层次结构，实现对布局组件和展示组件的解析；生成组件树静态对象模型，组件树静态对象模型用于描述页面模板文件显示模板区组件层次结构；

2）解析逻辑脚本区数据集配置生成数据集对象，解析组件模型关联组件树静态对象模型上的组件对象，解析组件交互事件设置绑定组件，关联组件树静态对象模型，生成组件树动态对象模型，组件树动态对象模型用于描述组件树组件动态属性和响应事件模型结构；

3）解析显示样式区，绑定组件树动态对象模型中各组件样式配置；最终根据组件树动态对象模型生成展示页面。

本发明所达到的有益效果：

1）页面编辑基于浏览器操作无需安装，可视化操作减少编码工作；

2）将页面开发过程分为数据集配置、界面布局设计、组件配置、样式设计、脚本编写几个部分，研发和工程职责明确，方便工程本地化维护；

3）简化页面组件联动实现方法，将传统通过编码方式实现事件的方法，转变为通过配置组件间联动关系实现，快速高效、无需编码；

4）页面模板解析算法简单灵活，支持复杂页面解析和渲染，满足应用页面需求。

附图说明

图1是本发明的流程图；图2是组件联动实现方法示意图；

图3是页面模板文件标准结构示意图；

图4是页面模板文件解析算法流程图。

具体实施方式

下面结合附图对本发明作进一步描述。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。

如图1所示，一种基于浏览器的可视化页面生成和浏览方法，包括以下步骤：

1）数据集配置，配置基于浏览器的可视化页面需要的数据集，确定数据集数据结构、获取来源及动态参数；

数据集是页面展示的数据来源，数据集配置包括配置数据结构、数据获取来源及动态参数，数据结构确定了数据集的数据模型结构，包括字段名称、数据类型、数据长度信息，可根据不同展示组件的要求定义不同的数据结构；数据获取来源包括静态数据、异步请求动态数据、数据库数据等几种来源；动态参数定义了数据获取的动态参数变量名称、数据类型信息，可根据需要传入不同值，通过数据获取来源获取不同数据。

2）基于浏览器实现可视化界面设计，提供页面布局组件和展示组件；选择页面布局组件，完成页面布局设计；拖拽页面展示组件到布局组件中相应位置，配置展示组件属性，关联数据集，设置交互事件和联动事件；配置页面展示组件显示效果，设计页面整体样式；

基于浏览器、以拖拽方式实现可视化界面设计，将界面设计分成布局设计和组件配置两个步骤。布局设计通过选择合适的布局组件，将页面分成各个部分，完成页面布局需求；组件配置，拖拽需要的展示组件到页面布局中合适的位置，配置展示组件基本属性、样式外观，关联数据集，设置组件交互事件及处理方法名，及页面多组件间的联动关系。

如图2所示，所述页面多组件间的联动实现方法为：配置组件联动事件及其输出参数，关联组件输入参数映射关系，组件发生变化时，触发关联组件刷新操作，根据输入参数实现关联组件数据集的动态刷新，并通过数据集和组件的关联关系，自动计算数据集的变化重新展示关联组件，实现页面不同组件间的联动。

3）脚本编写，编写页面交互逻辑和业务处理逻辑脚本，完成交互响应处理；

通过脚本编写界面组件交互事件处理方法实现逻辑，响应组件交互事件操作；编写数据操作脚本，对通过数据集获取的数据按照业务逻辑要求进行处理，通过展示组件展示结果。

4）页面生成，保存并生成页面模板文件；

将页面数据集配置、可视化界面设计、脚本编写结果导出生成页面模板文件，页面模板文件，用来描述电网调度自动化系统web页面结构，包括显示模板区、逻辑脚本区、显示样式区，页面模板文件结构描述标准定义如图3所示，显示模板区按照界面交互组件层次结构，保存布局组件和展示组件各节点属性和上下级关系，组件节点保存组件名称、组件类型、组件模型标识、组件交互事件、组件显示设置；逻辑脚本区保存数据集配置、组件模型定义、组件数据关联、组件界面交互逻辑等脚本，显示样式区，保存页面模板内各组件展示样式配置。

5）页面浏览，解析页面模板文件生成应用页面。

如图4所示，页面模板文件加载时，按照页面模板文件的标准结构进行解析，核心是基于抽象语法树的页面模板解析算法，解析面模板文件生成应用页面算法流程如图4所示，包括步骤：

1）解析显示模板区组件层次结构2~8，实现对布局组件和展示组件的解析；生成组件树静态对象模型9，组件树静态对象模型作为一个逻辑结构，用来描述页面模板文件显示模板区组件层次结构；

2）解析逻辑脚本区数据集配置生成数据集对象11，解析组件模型关联组件树静态对象模型上的组件对象12，解析组件交互事件设置绑定组件13，关联组件树静态对象模型14，生成组件树动态对象模型，组件树动态对象模型用于描述组件树组件动态属性和响应事件模型结构；

3）解析显示样式区15，绑定组件树动态对象模型中各组件样式配置16；最终根据组件树动态对象模型渲染出最终的展示页面17。

本发明页面编辑基于浏览器操作无需安装，可视化操作减少编码工作；将电网调度自动化系统web页面开发过程分为数据集配置、界面布局设计、组件配置、样式设计、脚本编写几个部分，研发和工程职责明确，页面逻辑和展示效果配置分离，方便工程本地化维护；简化页面组件联动实现方法，将传统通过编码方式实现事件的方法，转变为通过配置组件间联动关系实现，快速高效、无需编码;页面模板解析简单灵活，可支持负载的页面需求。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变形，这些改进和变形也应视为本发明的保护范围。