基于Vue组件化的可视化配置渲染方法、系统、终端.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN112711408A(43)申请公布日2021.04.27(21)申请号202011634110.5(22)申请日2020.12.31(71)申请人南威软件股份有限公司地址362000福建省泉州市丰泽区丰海路南威大厦2号楼申请人南威互联网科技集团有限公司(72)发明人吴志雄陈晓伟蒋亮亮(74)专利代理机构成都东恒知盛知识产权代理事务所(特殊普通合伙)51304代理人罗江(51)Int.Cl.G06F8/34(2018.01)G06F9/445(2018.01)G06F3/0486(2013.01)权利要求书2页说明书5页附图2页(54)发明名称基于Vue组件化的可视化配置渲染方法、系统、终端(57)摘要本发明属于数据分析处理技术领域，公开了一种基于Vue组件化的可视化配置渲染方法、系统、终端，配置组件名的映射关系；解析配置；在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数；可视化区域和属性配置区域对应的单文件组件的开发；进行数据的初始化，可视化区域和属性配置区域的业务交互以及将进行组件的动态挂载；数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象。本发明不仅解决了传统模板引擎或者拼接html字符串渲染方式代码可读性差，牵一发而动全身的问题，也解决了耦合度高的问题，提高了代码的可读性；还使开发人员职责更加清晰，大大提高了开发效率，提高了用户体验。CN112711408ACN112711408A权利要求书1/2页1.一种基于Vue组件化的可视化配置渲染方法，其特征在于,所述基于Vue组件化的可视化配置渲染方法包括：配置组件名的映射关系；解析配置的映射关系；在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数；通过实例化入口文件的构造函数，将引入的两个vue单文件组件通过extend基础构造器生成的Vue子类，进行实例化，进行数据的初始化，可视化区域和属性配置区域的业务交互以及进行组件的视图的渲染。2.如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述配置组件名的映射关系具体包括：通过JS对象KeyValue的形式将要开发的组件的名称，映射成其可视化区域和属性配置区域对应要渲染的单文件组件vue文件的统一JS入口模块名。3.如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述解析配置的映射关系包括：在拖拽到可视化区域的时，取得该组件对应的名称，结合配置的映射关系，取到其入口JS模块名，如果对应的组件名称或者取不到入口模块或者满足不了渲染要求，则提示该组件建设中或者渲染不了的原因；如果以上满足条件，则对该模块名进行实例化，将组件参数进行传递。4.如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数包括：在入口文件通过require引入模块的方式，将该组件在可视化区域和属性配置区域对应的vue组件分别引入，并结合Vue的全局方法extend基础构造器，创建“子类”；5.如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述通过实例化入口文件的构造函数前，需进行：对Vue组件可视化区域视图展示、排序以及删除操作，和对组件属性配置区域视图展示、属性配置操作；6.如权利要求1所述的基于Vue组件化的可视化配置渲染方法，其特征在于，所述进行数据的初始化，可视化区域和属性配置区域的业务交互以及进行组件的视图的渲染后，还需进行：在通过实例化入口文件的构造函数把对应组件的可视化区域以及属性配置区域对应的组件动态挂载到视图上展示，数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象。7.一种基于Vue组件化的可视化配置渲染系统，其特征在于，所述基于Vue组件化的可视化配置渲染系统包括：映射关系配置模块，用于配置组件名的映射关系；解析模块，用于解析配置的映射关系；构造函数模块，用于在模块名存在或者满足渲染条件的情况下实例化该组件的构造函数；视图渲染模块，用于通过实例化入口文件的构造函数，将引入的两个vue单文件组件通2CN112711408A权利要求书2/2页过extend基础构造器生成的Vue子类，进行实例化，进行数据的初始化，可视化区域和属性配置区域的业务交互以及进行组件的视图的渲染；展示模块，用于在通过实例化入口文件的构造函数把对应组件的可视化区域以及属性配置区域对应的组件动态挂载到视图上展示，数据初始化回填、绑定、两个区域间的交互以及通过原型方式向外提供获取该组件配置数据对象。8.一种计算机设备，其特征在于，所述计算机设备包括存储器和处理器，所述存储器存