一种基于Vue.js框架的页面功能组态方法和装置与流程

本发明涉及计算机技术领域，尤其是涉及一种基于vue.js框架的页面功能组态方法和装置。

背景技术：

随着信息系统广泛应用，使用场景开始复杂化，对应着产生需要个性化需求。在不同的个性化需求中，操作人员需要根据用户角色的不同或用户使用习惯的不同，编写拥有个性化功能的功能页面。由于个性化需求之间不能互通，新的需求则需要设计新的功能页面，但基础功能却是相似的。操作人员需要在保留基础功能的同时，开发符合个性化需求的功能。这样重复、繁琐的操作，在降低操作人员的工作效率的同时增加了操作人员的工作量，需要花费大量时间在功能排版上。

技术实现要素：

本发明的目的就是为了克服上述现有技术存在的页面功能布局繁琐、复杂的缺陷而提供一种基于vue.js框架的页面功能组态方法和装置。

本发明的目的可以通过以下技术方案来实现：

一种基于vue.js框架的页面功能组态方法，具体包括以下步骤：

步骤s1：获取显示页面对应的页面功能所需的功能组件，根据所述功能组件设置功能组件实现组态化对应的组态方法和组态化属性；

步骤s2：根据所述组态方法和组态化属性，生成所述功能组件对应的组态化组件；

步骤s3：添加所述组态化组件到组态组件库的配置表中；

步骤s4：调用所述组态组件库中的组态化组件，编辑所述显示页面；

步骤s5：将编辑完成后的所述显示页面进行渲染并显示在对应系统中。

所述组态方法包括框架转换函数、配置标签显示函数、配置参数保存函数和渲染函数。

所述组态化属性包括矩形页面参数、节点编号、方法参数和组件标题。

所述矩形页面参数包括矩形页面的长度、宽度以及矩形页面对应的坐标系。

优选的，所述步骤s2中通过模块打包器生成所述功能组件对应的组态化组件。

所述模块打包器的功能包括提取所述功能组件中支持组态化的组件信息。

所述组态化组件设有与对应的功能组件相匹配的回调函数。

一种应用所述基于vue.js框架的页面功能组态方法的装置，所述装置包括处理器和存储器，所述方法以计算机程序的方式存储在所述存储器中，由所述处理器执行，执行时实现以下步骤：

步骤s1：获取显示页面对应的页面功能所需的功能组件，根据所述功能组件设置功能组件实现组态化对应的组态方法和组态化属性；

步骤s2：根据所述组态方法和组态化属性，生成所述功能组件对应的组态化组件；

步骤s3：添加所述组态化组件到组态组件库的配置表中；

步骤s4：调用所述组态组件库中的组态化组件，编辑所述显示页面；

步骤s5：将编辑完成后的所述显示页面进行渲染并显示在对应系统中。

与现有技术相比，本发明具有以下有益效果：

1.本发明通过将显示所需的功能组件进行组态化，方便操作人员在页面排版时快速调用预存在组态组件库中的组态化组件，实现页面功能快速排版。

2.本发明预存在组态组件库中的组态化组件可以多次调用，减少重复的基础功能组件设计，提高了开发人员的工作效率。

3.本发明通过设置相应的组态方法和组态化属性，实现针对不同业务场景的需求进行调整，同时可以在不同配置的设备平台上进行页面布局。

附图说明

图1为本发明的流程示意图。

具体实施方式

下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。

如图1所示，一种基于vue.js框架的页面功能组态方法，具体包括以下步骤：

步骤s1：获取显示页面对应的页面功能所需的功能组件，根据功能组件设置功能组件实现组态化对应的组态方法和组态化属性；

步骤s2：根据组态方法和组态化属性，生成功能组件对应的组态化组件；

步骤s3：添加组态化组件到组态组件库的配置表中；

步骤s4：调用组态组件库中的组态化组件，编辑显示页面；

步骤s5：将编辑完成后的显示页面进行渲染并显示在对应系统中。

步骤s1中的功能组件的组件格式采用vue.js的单文件组件格式。

组态方法包括框架转换函数、配置标签显示函数、配置参数保存函数和渲染函数。当组件的位置大小发生变化时调用框架转换函数，将修改后的位置大小信息传入系统中。

组态化属性包括矩形页面参数、节点编号、方法参数和组件标题。

矩形页面参数包括矩形页面的长度、宽度以及矩形页面对应的坐标系。

步骤s2中通过模块打包器生成功能组件对应的组态化组件。

模块打包器的功能包括提取功能组件中支持组态化的组件信息。

组态化组件设有与对应的功能组件相匹配的回调函数。

一种应用基于vue.js框架的页面功能组态方法的装置，装置包括处理器和存储器，方法以计算机程序的方式存储在存储器中，由处理器执行，执行时实现以下步骤：

步骤s1：获取显示页面对应的页面功能所需的功能组件，根据功能组件设置功能组件实现组态化对应的组态方法和组态化属性；

步骤s2：根据组态方法和组态化属性，生成功能组件对应的组态化组件；

步骤s3：添加组态化组件到组态组件库的配置表中；

步骤s4：调用组态组件库中的组态化组件，编辑显示页面；

步骤s5：将编辑完成后的显示页面进行渲染并显示在对应系统中。

此外，需要说明的是，本说明书中所描述的具体实施例，所取名称可以不同，本说明书中所描述的以上内容仅仅是对本发明结构所做的举例说明。凡依据本发明构思的构造、特征及原理所做的等小变化或者简单变化，均包括于本发明的保护范围内。本发明所属技术领域的技术人员可以对所描述的具体实例做各种各样的修改或补充或采用类似的方法，只要不偏离本发明的结构或者超越本权利要求书所定义的范围，均应属于本发明的保护范围。

技术特征：

1.一种基于vue.js框架的页面功能组态方法，其特征在于，具体包括以下步骤：

步骤s1：获取显示页面对应的页面功能所需的功能组件，根据所述功能组件设置功能组件实现组态化对应的组态方法和组态化属性；

步骤s2：根据所述组态方法和组态化属性，生成所述功能组件对应的组态化组件；

步骤s3：添加所述组态化组件到组态组件库的配置表中；

步骤s4：调用所述组态组件库中的组态化组件，编辑所述显示页面；

步骤s5：将编辑完成后的所述显示页面进行渲染并显示在对应系统中。

2.根据权利要求1所述的一种基于vue.js框架的页面功能组态方法，其特征在于，所述组态方法包括框架转换函数、配置标签显示函数、配置参数保存函数和渲染函数。

3.根据权利要求1所述的一种基于vue.js框架的页面功能组态方法，其特征在于，所述组态化属性包括矩形页面参数、节点编号、方法参数和组件标题。

4.根据权利要求3所述的一种基于vue.js框架的页面功能组态方法，其特征在于，所述矩形页面参数包括矩形页面的长度、宽度以及矩形页面对应的坐标系。

5.根据权利要求1所述的一种基于vue.js框架的页面功能组态方法，其特征在于，所述步骤s2中通过模块打包器生成所述功能组件对应的组态化组件。

6.根据权利要求5所述的一种基于vue.js框架的页面功能组态方法，其特征在于，所述模块打包器的功能包括提取所述功能组件中支持组态化的组件信息。

7.根据权利要求1所述的一种基于vue.js框架的页面功能组态方法，其特征在于，所述组态化组件设有与对应的功能组件相匹配的回调函数。

8.一种应用如权利要求1-7所述的基于vue.js框架的页面功能组态方法的装置，其特征在于，所述装置包括处理器和存储器，所述方法以计算机程序的方式存储在所述存储器中，由所述处理器执行，执行时实现以下步骤：

步骤s1：获取显示页面对应的页面功能所需的功能组件，根据所述功能组件设置功能组件实现组态化对应的组态方法和组态化属性；

步骤s2：根据所述组态方法和组态化属性，生成所述功能组件对应的组态化组件；

步骤s3：添加所述组态化组件到组态组件库的配置表中；

步骤s4：调用所述组态组件库中的组态化组件，编辑所述显示页面；

步骤s5：将编辑完成后的所述显示页面进行渲染并显示在对应系统中。

技术总结
本发明涉及一种基于Vue.js框架的页面功能组态方法，具体包括以下步骤：步骤S1：获取显示页面对应的页面功能所需的功能组件，根据所述功能组件设置功能组件实现组态化对应的组态方法和组态化属性；步骤S2：根据所述组态方法和组态化属性，生成所述功能组件对应的组态化组件；步骤S3：添加所述组态化组件到组态组件库的配置表中；步骤S4：调用所述组态组件库中的组态化组件，编辑所述显示页面；步骤S5：将编辑完成后的所述显示页面进行渲染并显示在对应系统中。与现有技术相比，本发明具有页面功能快速排版、提高开发人员工作效率等优点。

技术研发人员：葛俊;蒋秋明
受保护的技术使用者：上海上实龙创智慧能源科技股份有限公司
技术研发日：2019.12.31
技术公布日：2020.05.29