一种基于可热插拔动态组件的可视化系统技术方案

本发明专利技术属于数据集成技术领域，具体来说，涉及一种基于可热插拔动态组件的可视化系统。包括加载组件、添加元素容器、选择模板组件和选择数据组件，选择模板组件和选择数据组件通过加载组件实现离线或在线组件加载；本发明专利技术通过采用离线上传和在线开发相结合的方式，实现了多样化的需求和灵活的开发方式，在线开发采用自由可拖拽的方式实现，能够完成复杂的界面设计和交互过程，数据组件采用动态修改属性的方式对组件进行个性化的修改，采用放大缩小的功能可多布局页面的细节进行相应的调整和在不同分辨率下能够实现页面的自适应布局，前后端采用统一的数据接口和后端数据绑定，减少了请求次数，提高了请求效率，用时按需加载更加适合现代开发理念，完成这个个系统的开发和组装后需要进行保存，在下次使用时直接打开即可，也可作为其他系统的参考模板进行二次开发。发。发。

【技术实现步骤摘要】
一种基于可热插拔动态组件的可视化系统


[0001]本专利技术属于数据集成
，具体来说，涉及一种基于可热插拔动态组件的可视化系统。

技术介绍

[0002]布局是整个软件产品的重要组成部分，页面布局建模和自动化构建逐渐成为系统建设的主流方式，目前大多数系统构建采用从需求出发通过交互式的任务分解来实现，缺少界面布局信息的处理，难以满足用户界面的复杂性和多样性需求。
[0003]目前多数系统采用前后端分离技术实现，这确实提高了开发效率和系统的独立性，但是在整个系统里面模块的耦合度比较高，对于一些需要随时修改的系统来说，这种开发方法存在前后端人员沟通不畅和对接困难，系统在使用过程中可能存在某些功能模块的微调和修改，这就需要前后端人员配合完成数据接口的对接和渲染，这对于快速构建系统和随时需要更改的系统来说，无疑增加了开发人员的工作量及对接问题的产生。本专利技术采用可热插拔动态组件的页面布局方法可有效解决组件的复用率和属性的灵活配置，无需重复开发，用时加载即可，数据接口采用标准的统一映射的方式加载数据来源，减少数据更改对系统的影响。

技术实现思路

[0004]本专利技术专利的设计思想是：首先加载模板组件，其中：模板组件分为离线开发模板组件和在线开发模板组件相结合的方式完成系统整体布局，离线开发的模板组件采用热插拔的形式，随插随用，不用删除即可，不占用整个系统资源，在线开发模板组件灵活多样可通过拖拽方式实现多样性和复杂性的布局页面；其次加载数据组件，并对数据组件的属性完成解析和展示，对需要进行重新配置的属性在操作栏进行属性的动态修改和保存；最后，拖动容器完成整个页面的布局和细节的调整，调用接口数据对页面进行动态数据的绑定，对完成的系统进行保存和展示。
[0005]本专利技术解决其技术问题所采用的技术方案为：一种基于可热插拔动态组件的可视化系统，包括加载组件、添加元素容器、选择模板组件和选择数据组件，选择模板组件和选择数据组件通过加载组件实现离线或在线组件加载；系统会自动加载已经上传的模板组件，通过选择模板组件并将其展示在界面布局区域同时系统会解析模板组件的属性并将其映射到属性操作栏，开发人员根据需要进行动态修改和配置；其次添加元素容器用来加载已上传的或在线开发的数据组件，系统在加载数据组件的同时解析数据组件属性并将其映射到属性操作栏以便进行更改和动态配置；最后通过界面布局区域的拖拽功能和放大缩小功能实现页面的灵活布局和适配不同浏览器分辨率下的界面展示，选择数据来源与后端接口数据进行动态绑定并渲染页面。
[0006]选择模板组件和选择数据组件通过加载组件实现离线或在线组件加载实现无缝
衔接，加载组件采用离线开发、打包、上传、解析、嵌入、映射的方式与系统对接，在系统构建过程中实现组件的动态加载和属性动态配置；采用在线开发的方式与系统对接和进行属性的变更和数据的渲染。
[0007]加载组件根据开发人员需要实时修改和动态配置属性。
[0008]加载组件采用离线上传方式时，首先采用前端框架VUE对组件进行封装并保存在本地存储器，在需要时上传即可；其次系统对属性进行解析并通过插槽名的形式和属性栏进行映射绑定，并通过计算属性的方式返回属性的修改值和进行页面渲染；最后在完成页面布局后通过选择数据源请求后端数据接口完成页面数据的加载和展示，数据接口采用统一标准的数据集通过映射的方式实现不同数据的加载和渲染。
[0009]加载组件采用在线开发方式时，通过加载组件对容器进行拖拽和放大缩小，在布局区域自由拖动以调节容器在布局中的位置，放大缩小的功能适应不同浏览器在不同分辨率情况下的展示效果，更能调节页面布局的细节信息，在添加容器的同时系统会调动加载引擎加载数据组件并与容器进行一一对应，同时解析数据组件的属性并于属性栏进行映射操作，完成配置之后，同样调用数据接口对页面进行渲染。
[0010]选择数据组件包括图片组件、文本组件、表格组件、echarts图形组件、地图组件、文字编辑框、下拉选择框、无缝滚动组件、分割线组件，开发人员根据设计需要通过加载组件对组件和属性动态进行配置。
[0011]本专利技术有益效果为：对于系统来说，无非就是前端和后端组成，其中前端页面的展示是一个系统的门面，直接影响着用户的体验度和对整个系统的好感，本专利技术采用离线上传和在线开发相结合的方式实现整个系统模板的展示，将常用的模板进行离线开发并存储在本地，用时只需要加载即可，在线开发满足了多样性和复杂性的要求，并且可通过拖拽的方式实现系统的任意组合，提高了展示的多样性和增加了用户体验度，完成模板的加载之后，需要像模版中添加数据组件，数据组件也采用离线开发上传和在线开发的实现方式，数据组件通常包括常见的echarts图形、文字组件、表格组件等，数据组件的属性采用动态可修改的方式实现客户不同的需要，数据组件采用统一标准的接口与后端数据进行绑定，在完成页面的布局之后调用接口进行数据渲染，在完成整个页面设计之后保存杰克成为一个单独的系统。
[0012]本专利技术通过采用离线上传和在线开发相结合的方式，实现了多样化的需求和灵活的开发方式，在线开发采用自由可拖拽的方式实现，能够完成复杂的界面设计和交互过程，数据组件采用动态修改属性的方式对组件进行个性化的修改，采用放大缩小的功能可多布局页面的细节进行相应的调整和在不同分辨率下能够实现页面的自适应布局，前后端采用统一的数据接口和后端数据绑定，减少了请求次数，提高了请求效率，用时按需加载更加适合现代开发理念，完成这个个系统的开发和组装后需要进行保存，在下次使用时直接打开即可，也可作为其他系统的参考模板进行二次开发。
[0013]本专利技术中自由拖拽组件采用事件总线的方式感应容器和拖拽事件，对选定的容器及数据组件进行在模板内自由拖拽和布局，能够实现界面展示的多样性和复杂系统界面的展示，采用自适应的方式能够适应不同分辨率下页面布局的完整性和美观性。
附图说明
[0014]图1为本专利技术系统结构示意图。
具体实施方式
[0015]一种基于可热插拔动态组件的可视化系统，包括加载组件、添加元素容器、选择模板组件和选择数据组件，选择模板组件和选择数据组件通过加载组件实现离线或在线组件加载；系统会自动加载已经上传的模板组件，通过选择模板组件并将其展示在界面布局区域同时系统会解析模板组件的属性并将其映射到属性操作栏，开发人员根据需要进行动态修改和配置；其次添加元素容器用来加载已上传的或在线开发的数据组件，系统在加载数据组件的同时解析数据组件属性并将其映射到属性操作栏以便进行更改和动态配置；最后通过界面布局区域的拖拽功能和放大缩小功能实现页面的灵活布局和适配不同浏览器分辨率下的界面展示，选择数据来源与后端接口数据进行动态绑定并渲染页面。
[0016]选择模板组件和选择数据组件通过加载组件实现离线或在线组件加载实现无缝衔接，加载组件采用离线开发、打包、上传、解析、嵌入、映射的方式与系统对接，在系统构建过程中实现组件的动态加载和属性动态配置；采用在线开发的方式与系统对接和进行属性的变更和数据本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于可热插拔动态组件的可视化系统，其特征在于：包括加载组件、添加元素容器、选择模板组件和选择数据组件，选择模板组件和选择数据组件通过加载组件实现离线或在线组件加载；系统会自动加载已经上传的模板组件，通过选择模板组件并将其展示在界面布局区域同时系统会解析模板组件的属性并将其映射到属性操作栏，开发人员根据需要进行动态修改和配置；其次添加元素容器用来加载已上传的或在线开发的数据组件，系统在加载数据组件的同时解析数据组件属性并将其映射到属性操作栏以便进行更改和动态配置；最后通过界面布局区域的拖拽功能和放大缩小功能实现页面的灵活布局和适配不同浏览器分辨率下的界面展示，选择数据来源与后端接口数据进行动态绑定并渲染页面。2.根据权利要求1所述的一种基于可热插拔动态组件的可视化系统，其特征在于：选择模板组件和选择数据组件通过加载组件实现离线或在线组件加载实现无缝衔接，加载组件采用离线开发、打包、上传、解析、嵌入、映射的方式与系统对接，在系统构建过程中实现组件的动态加载和属性动态配置；采用在线开发的方式与系统对接和进行属性的变更和数据的渲染。3.根据权利要求1所述的一种基于可热插拔动态组件的可视化系统，其特征在于：加载组件根据开发人员实时修改和动态配置属性。4.根据权利要求1所述的一种基于可...

【专利技术属性】
技术研发人员：张宝玉，刘博，齐文辉，王华龙，王震，焦勇，
申请(专利权)人：中电万维信息技术有限责任公司，
类型：发明
国别省市：