CN113094042A - 一种基于浏览器的电力自动化系统自定义组件的实现与解析方法 - Google Patents

Abstract

本发明提出了一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，包括：编辑组件代码以及组件定义文件，完成组件自定义；根据组件定义文件，对组件结构是否完整进行验证；根据组件代码，对组件功能是否可以实现进行验证；将通过验证的组件定义文件发布到服务器指定目录进行保存；对组件定义文件进行解析，生成属性资源配置信息对象，将生成的属性资源配置信息对象保存至组件库中，同时将属性资源配置信息对象封装为JS对象保存至服务器指定目录；根据属性资源配置信息对象，生成组件图标；通过拖拽组件图标至页面设计区，解析该组件图标对应的属性资源配置信息对象，生成所需Web界面。

Description

一种基于浏览器的电力自动化系统自定义组件的实现与解析 方法

技术领域

本发明属于电力系统及自动化技术领域，特别涉及一种基于浏览器的电力自动化系统自定义组件的实现与解析方法。

背景技术

随着互联网技术的迅速发展，用户体验要求越来越高，现有的人机界面无论是交互方式、智能化水平还是展示效果都无法满足日益增长的用户体验需求。同时，电力系统规模不断扩大，对信息化展示和监控保障技术的要求也越来越高，使用WEB技术提升电力自动化水平越来越重要，在现今的电力自动化系统中，随着电力信息系统和监控系统的发展，传统的C/S架构的页面生成方式，难以满足业务需求的快速变化以及对运行环境的轻量化要求。

电力自动化系统基于Web的应用功能，在现场投运时，往往需要根据实际业务场景和用户的审美需求，对页面进行多次调整。传统人工编码方式面临开发周期长、功能代码固化、现场工程难以维护等问题，很难快速响应用户本地化需求，同时需要投入大量的对原有技术和业务都熟悉的研发人员不断的迭代，加重了产品研发人员的负担。另一方面，从实际系统应用上考虑，无论是应用系统之间还是同一系统的不同页面之间，都存在大量的页面中包含重复组件的问题，因业务与展示效果需求的差异性以不同的效果和组合方式呈现出来，但是其本质上还是基础组件的扩展与组合。因此，实现资源共享，把人力从日常繁琐重复的开发中解放出来，以支撑应用研发及工程化需求，提供一种简易、高效的页面开发方式是急需解决的一个重要问题。

发明内容

发明目的：为提供丰富的组件扩展能力、定义满足用户个性化需求的页面组件，本发明提出了一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，用于扩展组件，产品研发人员或者工程人员可以在已有组件的基础上，以可视化拖拽组件的方式快速生成新的组件，满足用户个性化需求，适用于电力系统非生产控制区WEB界面的生成和浏览。

技术方案：一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，包括以下步骤：

步骤1：编辑组件代码以及组件定义文件，完成组件自定义；所述组件定义文件包括组件基本定义、扩展属性、扩展事件和可编辑配置信息的属性；

步骤2：根据步骤1中的组件定义文件，对组件结构是否完整进行验证；根据步骤1中的组件代码，对组件功能是否可以实现进行验证；

步骤3：将通过验证的组件定义文件发布到服务器指定目录进行保存；

步骤4：对组件定义文件进行解析，生成属性资源配置信息对象，将生成的属性资源配置信息对象封装为属性资源JS对象保存至状态管理仓库中，同时将属性资源JS对象保存至服务器指定目录；

步骤5：根据属性资源配置信息对象，生成组件图标；

步骤6：通过拖拽组件图标至页面设计区，解析该组件图标对应的属性资源配置信息对象，生成所需Web页面。

进一步的，所述步骤1可由以下步骤替代：

导入已有的扩展组件，获取该扩展组件的组件定义文件。

进一步的，所述的扩展组件包括本地代码编辑器中编写的符合编码规范的组件和通过可视化工具生成的组件。

进一步的，在步骤2中，若存在缺少配置信息的属性，则根据该属性的类型和默认值，添加配置信息。

进一步的，步骤4中，所述的属性资源配置信息对象包括：组件ID、组件名称、图标文字名称、组件所属分类、图标快照、模板格式、是否容器标识、参数属性编辑对象信息、脚本回调方法和组件渲染方法；所述脚本回调方法在用户使用组件绘制页面时用于调用编写的业务逻辑处理脚本。

进一步的，所述步骤4具体包括以下操作步骤：

通过全局唯一算法生成组件ID；

通过自定义业务逻辑处理脚本方法，生成脚本回调方法；

通过解析组件基本定义，生成组件基本信息，该组件基本信息包括：组件名称、模板格式、是否容器标识；

通过解析扩展属性，生成组件图标信息，该组件图标信息包括：图标文字名称、组件所属分类和图标快照；

通过解析可编辑配置信息的属性，生成参数属性编辑对象信息，每个参数属性编辑信息包括：标签名称、展示类型、默认值、导出标识、备选项；

通过解析扩展事件，生成事件属性编辑对象信息；

通过解析生成的参数属性编辑对象信息和事件属性编辑对象信息，以及添加默认的组件可拖拽和可编辑指令，生成组件渲染方法，所述组件渲染方法包括：组件外部样式、交互事件、组件参数传递和指令；

组件ID、组件名称、图标文字名称、组件所属分类、图标快照、模板格式、是否容器标识、参数属性编辑对象信息、脚本回调方法、事件属性编辑对象信息和组件渲染方法封装为属性资源JS对象保存到状态管理仓库中，并同时请求后端服务将属性资源JS对象保存到服务器指定目录。其中，该状态管理仓库用于存储电力自动化系统的共享数据。

进一步的，所述步骤5具体包括：

当属性资源配置信息对象保存完成后，通过消息发布订阅模式，向订阅者发送组件更新通知，并根据组件图标信息和组件所属分类，在组件库展示区域的自定义组件面板下，创建组件快照。

进一步的，所述步骤6具体包括：

将组件图标拖拽至页面设计区；

将拖拽至页面设计区的组件图标对应的属性资源配置信息对象进行解析，包括：

通过解析参数属性编辑对象信息和扩展事件，生成属性编辑区域；

通过解析组件渲染方法，完成在页面设计区中渲染该组件；

通过在属性编辑区域中修改组件参数值，实现组件的特性效果。

进一步的，所述参数属性编辑对象信息与在属性编辑区域中修改的组件参数值双向绑定。

进一步的，所述的通过解析组件渲染方法，完成在页面设计区中渲染该组件，具体包括：

通过获取参数属性编辑对象信息的上下文数据，通过参数的方式传递给组件，完成参数数据的修改反应到组件数据修改和组件效果修改的渲染效果。

有益效果：本发明通过自动解析组件的内容生成属性资源配置信息对象和渲染方法，在可视化页面编辑组件库中自动生成可拖拽、编辑可属性的自定义组件，满足电力自动化系统Web应用高效开发、易于扩展维护和资源共享的要求。本发明与现有技术相比，具有以下优点：

(1)本发明基于浏览器操作无需安装，可视化操作降低开发难度；

(2)本发明在具体实现中使用前后端分离技术，耦合度比较低，能够很好的实现模块和服务的复用；

(3)本发明在可视化页面编辑工具组件库中自动生成可拖拽、可编辑属性的自定义组件，实现自动解析自定义组件并动态生成属性资源配置信息，实现低代码甚至是零代码的WEB前端工程化，能够快速响应用户需求；

(4)本发明适用于目前WEB界面快速开发需要的组件扩展与高效集成方式，满足电力自动化系统Web应用的高效开发、资源共享和易于维护的要求。

附图说明

图1为自定义组件定义与解析方法；

图2为自定义组件解析流程；

图3为自定义组件结构格式；

图4为属性资源对象结构格式。

具体实施方式

现结合附图和实施例进一步阐述本发明的技术方案。

图1所示的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，包括以下六个步骤：

步骤1：通过在线编辑功能编辑组件代码，通过配置向导生成解析所需要的属性资源配置信息对象，完成组件自定义，实现组件的自定义，参见图3，该组件定义文件包括组件基本定义、扩展属性、扩展事件和可编辑配置信息的属性；也可以通过导入已有的扩展组件，并生成该扩展组件的展示相关配置；在一些实施例中，导入已有的扩展组件包括但不限于本地代码编辑器中编写的符合编码规范的组件和通过可视化工具生成的组件，当导入已有的扩展组件，对应获取该扩展组件的组件定义文件。

步骤2：对步骤1自定义的组件进行验证，包括验证自定义的组件的结构和验证该组件的功能是否能够正常使用，该步骤能确保组件发布后可以正常使用；具体为：根据步骤1中的组件定义文件，对组件结构是否完整进行验证，若存在一些缺少的配置信息的属性，则根据其类型和默认值等信息智能地进行分析，自动添加属性编辑信息；根据步骤1中的组件代码，通过即时预览自定义组件的效果对组件功能是否可以实现进行验证。

步骤3：将验证通过的组件的定义文件发布到服务器指定目录保存，实现自定义组件的提交与发布；具体操作包括：通过请求后端服务将组件的定义文件保存到服务器指定目录，前端请求与后端服务通过接口对接约定数据格式完成文件传递。

步骤4：对自定义组件的内容进行前端解析，生成属性资源配置信息对象，由图4可知，属性资源配置信息对象包括但不限于自定义组件的组件ID、组件名称、图标文字名称、组件所属分类、图标快照、模板格式、是否容器标识、参数属性编辑对象信息、脚本回调方法和组件渲染方法。其中，组件ID应全局唯一，使其与其他组件进行分区；图标文字名称是字体图标的名称，支持自定义图标的引入；参数属性编辑对象信息通过组件解析生成，并与组件在页面中属性编辑时的组件数据双向绑定，实现修改属性即可即时查看的效果；脚本回调方法为自动生成的一个默认的方法，用户使用组件绘制页面时编写的业务逻辑处理脚本会被这个方法调用；渲染方法获取参数属性编辑对象上下文的数据，通过参数的方式传递给组件，从而实现数据的修改反应到组件数据和效果的修改的渲染效果。

具体解析流程可参见图2，解析操作在组件发布成功后自动执行，解析流程获取到组件定义文件后，该组件定义文件根据当前运行状态可以从服务器读取也可以从状态管理仓库中读取。

对其进行解析生成属性资源配置信息对象，具体过程表述为：

通过全局唯一算法生成组件ID；

通过自定义业务逻辑处理脚本方法，生成脚本回调方法；

通过解析组件基本定义，生成组件基本信息，该组件基本信息包括：组件名称、模板格式、是否容器标识；

通过解析扩展属性，生成组件图标信息，该组件图标信息包括：图标文字名称、组件所属类型和图标快照；

通过解析可编辑配置信息的属性，生成参数属性编辑对象信息，每个参数属性编辑信息包括：标签名称、展示类型、默认值、导出标识、备选项；

通过解析扩展事件，生成事件属性编辑对象信息；

通过解析上述生成的参数属性编辑对象信息和事件属性编辑对象信息，以及添加默认的组件可拖拽和可编辑指令，生成组件渲染方法，该渲染方法包括：组件外部样式、交互事件、组件参数传递和指令；

自动解析自定义组件内容生成属性资源配置信息对象成功后，将属性资源配置信息对象封装成属性资源JS对象保存到状态管理仓库中，方便其他功能获取和编辑，提及的状态管理仓库用于存储电力自动化系统的共享数据，可以理解为缓存；并自动调用后端服务将属性资源JS对象以文件的形式保存到服务器指定目录。保存成功后，发布自定义组件更新消息通知。

步骤5：自定义组件快照的生成：根据解析生成的属性资源配置信息对象，在组件库自定义组件面板下生成组件的快照；其中，组件库包括内置组件和自定义组件，内置组件按照分类展示，当属性资源配置信息对象保存后，在组件库展示区域的自定义组件面板下，根据组件图标信息和组件所属分类，创建自定义组件的快照，同时采用消息发布订阅模式，在组件库展示功能订阅组件更新消息通知，等待订阅者接收消息通知。

步骤6：自定义组件的拖拽与属性编辑：从组件库区域拖拽组件快照到页面设计区，解析该组件的属性资源配置信息对象中的参数属性对象信息和扩展事件，动态生成可视化的属性编辑区域；自动解析该组件的渲染方法，在设计页面中渲染该组件；通过修改属性来改变组件的参数值，实现组件的特性效果。

Claims (10)

1.一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：包括以下步骤：

步骤1：编辑组件代码以及组件定义文件，完成组件自定义；所述组件定义文件包括组件基本定义、扩展属性、扩展事件和可编辑配置信息的属性；

步骤2：根据步骤1中的组件定义文件，对组件结构是否完整进行验证；根据步骤1中的组件代码，对组件功能是否可以实现进行验证；

步骤3：将通过验证的组件定义文件发布到服务器指定目录进行保存；

步骤4：对组件定义文件进行解析，生成属性资源配置信息对象，将生成的属性资源配置信息对象封装为属性资源JS对象保存至状态管理仓库中，同时将属性资源JS对象保存至服务器指定目录；

步骤5：根据属性资源配置信息对象，生成组件图标；

步骤6：通过拖拽组件图标至页面设计区，解析该组件图标对应的属性资源配置信息对象，生成所需Web页面。

2.根据权利要求1所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：所述步骤1可由以下步骤替代：

导入已有的扩展组件，获取该扩展组件的组件定义文件。

3.根据权利要求2所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：所述的扩展组件包括本地代码编辑器中编写的符合编码规范的组件和通过可视化工具生成的组件。

4.根据权利要求1所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：在步骤2中，若存在缺少配置信息的属性，则根据该属性的类型和默认值，添加配置信息。

5.根据权利要求1所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：步骤4中，所述的属性资源配置信息对象包括：组件ID、组件名称、图标文字名称、组件所属分类、图标快照、模板格式、是否容器标识、参数属性编辑对象信息、脚本回调方法和组件渲染方法；所述自定义业务逻辑处理脚本方法在用户使用组件绘制页面时用于调用编写的业务逻辑处理脚本。

6.根据权利要求5所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：所述步骤4具体包括以下操作步骤：

通过全局唯一算法生成组件ID；

通过自定义业务逻辑处理脚本方法，生成脚本回调方法；

通过解析组件基本定义，生成组件基本信息，该组件基本信息包括：组件名称、模板格式、是否容器标识；

通过解析扩展属性，生成组件图标信息，该组件图标信息包括：图标文字名称、组件所属分类和图标快照；

通过解析可编辑配置信息的属性，生成参数属性编辑对象信息；

通过解析扩展事件，生成事件属性编辑对象信息；

通过解析生成的参数属性编辑对象信息和事件属性编辑对象信息，以及添加默认的组件可拖拽和可编辑指令，生成组件渲染方法；

组件ID、组件名称、图标文字名称、组件所属分类、图标快照、模板格式、是否容器标识、参数属性编辑对象信息、脚本回调方法、事件属性编辑对象信息和组件渲染方法封装为属性资源JS对象保存到状态管理仓库中，并同时请求后端服务将属性资源JS对象保存到服务器指定目录。

7.根据权利要求6所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：所述步骤5具体包括：

当属性资源配置信息对象保存完成后，根据组件图标信息和组件所属分类，在组件库展示区域的自定义组件面板下，创建组件快照。

8.根据权利要求7所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：所述步骤6具体包括：

将组件图标拖拽至页面设计区；

将拖拽至页面设计区的组件图标对应的属性资源配置信息对象进行解析，包括：

通过解析参数属性编辑对象信息和扩展事件，生成属性编辑区域；

通过解析组件渲染方法，完成在页面设计区中渲染该组件；

通过在属性编辑区域中修改组件参数值，实现组件的特性效果。

9.根据权利要求8所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：

所述参数属性编辑对象信息与在属性编辑区域中修改的组件参数值双向绑定。

10.根据权利要求8所述的一种基于浏览器的电力自动化系统自定义组件的实现与解析方法，其特征在于：所述的通过解析组件渲染方法，完成在页面设计区中渲染该组件，具体包括：

通过获取参数属性编辑对象信息的上下文数据，通过参数的方式传递给组件，完成参数数据的修改反应到组件数据修改和组件效果修改的渲染效果。

Images