一种生成数据可视化页面的系统及方法与流程

1.本发明涉及数据可视化技术领域，尤其涉及一种生成数据可视化页面的系统及方法。


背景技术：

2.在以往的代码开发平台中主要以人工开发组件、开发搭建页面为主，然而人工搭建在本地脚手架开发环境中进行编码，有大量的重复劳动，能力复用性差，占用前端宝贵的开发时间。随着公司业务的发展，页面开发的需求逐渐增长，客户追求效率，因此需要尽快响应客户需求。
3.需要通过对原有的前端组件整合，页面动态渲染，搭建一个高效率，低成本的基于工业互联网的低代码平台。


技术实现要素：

4.针对现有技术中存在的问题，本发明提供一种生成数据可视化页面的系统，包括：
5.素材库，所述素材库保存有预先配置的多种模板组件；
6.数据库，所述数据库保存有预先配置的多条待展示数据；
7.初始页面生成模块，连接所述素材库，用于构建初始页面，并根据外部输入的组件生成指令选择对应的所述模板组件作为可视化组件并添加至所述初始页面；
8.配置模块，连接所述初始页面生成模块和所述数据库，用于针对于所述初始页面中的每个所述可视化组件，根据外部输入的配置指令将各所述可视化组件与对应的所述待展示数据关联；
9.页面展示模块，连接所述配置模块，用于将配置完毕的所述初始页面作为数据可视化页面部署并展示。
10.优选的，还包括组件编辑显示模块，连接所述初始页面生成模块和所述素材库，用于显示包含所述初始页面的页面编辑窗口和包括各所述模板组件的组件候选窗口。
11.优选的，所述初始页面生成模块包括：
12.组件生成单元，用于根据所述组件生成指令于所述组件候选窗口中选择对应的所述模板组件作为所述可视化组件；
13.组件拖拽单元，连接所述组件生成单元，用于根据用户的拖拽操作将所述可视化组件拖拽至所述初始页面的对应位置，以将所述可视化组件添加至所述初始页面；
14.动态渲染单元，连接所述组件生成单元和所述组件拖拽单元，用于在所述可视化组件被从所述组件候选窗口拖拽至所述页面编辑窗口时，将所述可视化组件渲染加载展示。
15.优选的，各所述可视化组件对应关联有多条默认属性，则所述组件编辑显示模块还连接所述配置模块，则所述组件编辑显示模块还用于在对每个所述可视化组件进行配置时显示对应的配置窗口，并在所述配置窗口中展示对应的各所述默认属性。
16.优选的，所述配置窗口包括数据配置窗口，所述默认属性包括默认数据属性，所述配置指令包括数据配置指令；则所述配置模块包括：
17.数据提取单元，用于针对于所述初始页面中的每个所述可视化组件，根据所述数据配置指令于所述数据库中提取出对应的所述待展示数据；
18.数据配置单元，连接所述数据提取单元，用于在所述数据配置窗口中将所述待展示数据作为所述默认数据属性与所述可视化组件对应关联。
19.优选的，所述默认属性包括多条外观属性，所述配置窗口包括外观配置窗口，所述配置指令包括外观配置指令，则所述配置模块还包括：
20.外观配置单元，用于根据所述外观配置指令调整所述外观配置窗口中显示的各所述外观属性。
21.本发明的较佳实施例中，所述默认属性包括交互属性，所述配置窗口包括交互配置窗口，所述配置指令包括交互配置指令；则所述配置模块还包括：
22.交互配置单元，用于根据所述交互配置指令调整所述交互配置窗口中显示的所述交互属性。
23.优选的，各所述数据可视化页面关联有对应的访问权限；则所述系统还包括页面管理模块，连接所述页面展示模块，用于在用户访问各所述数据可视化页面时，验证所述用户在拥有对应的所述访问权限时将所述数据可视化页面展示。
24.本发明还提供一种数据可视化页面的生成方法，应用于上述的系统，包括：
25.步骤s1，所述系统构建初始页面，随后根据外部输入的组件生成指令选择对应的所述模板组件作为可视化组件并添加至所述初始页面；
26.步骤s2，所述系统针对于所述初始页面中的每个所述可视化组件，根据外部输入的配置指令将各所述可视化组件与对应的所述待展示数据关联；
27.步骤s3，所述系统将配置完毕的所述初始页面作为数据可视化页面部署并展示。
28.优选的，所述系统包括用于显示包含所述初始页面的页面编辑窗口和包括各所述模板组件的组件候选窗口；则所述步骤s1包括：
29.步骤s11，所述系统根据所述组件生成指令于所述组件候选窗口中选择对应的所述模板组件作为所述可视化组件；
30.步骤s12，所述系统根据用户的拖拽操作将所述可视化组件拖拽至所述初始页面的对应位置，以将所述可视化组件添加至所述初始页面；
31.步骤s13，所述系统在所述可视化组件被从所述组件候选窗口拖拽至所述页面编辑窗口时，将所述可视化组件渲染加载展示。
32.上述技术方案具有如下优点或有益效果：
33.将原有的开发平台的组件进行资源整合，基于工业互联网平台将智能化管理,智能化搭建,移动式应用,组件化智能应用融合到低代码的系统中，生成数据可视化页面时只需要很少的代码，达到降低人工成本,提高效率的目标；用户可以自主选择需要的可视化组件并与对应的待展示数据关联，生成数据可视化页面并展示，降低传统的定制开发门槛和解决数据分散的问题，能够多方位、多角度、全景展现各项数据或指标，实时监控、一目了然。
附图说明
34.图1为本发明的较佳的实施例中，一种生成数据可视化页面的系统的结构示意图；
35.图2为本发明的较佳的实施例中，一种生成数据可视化页面的方法的流程示意图；
36.图3为本发明的较佳的实施例中，步骤s1的子流程示意图。
具体实施方式
37.下面结合附图和具体实施例对本发明进行详细说明。本发明并不限定于该实施方式，只要符合本发明的主旨，则其他实施方式也可以属于本发明的范畴。
38.本发明的较佳的实施例中，基于现有技术中存在的上述问题，现提供一种生成数据可视化页面的系统，如图1所示，包括：
39.素材库1，素材库1保存有预先配置的多种模板组件；
40.数据库2，数据库2保存有预先配置的多条待展示数据；
41.初始页面生成模块3，连接素材库1，用于构建初始页面，并根据外部输入的组件生成指令选择对应的模板组件作为可视化组件并添加至初始页面；
42.配置模块4，连接初始页面生成模块3和数据库2，用于针对于初始页面中的每个可视化组件，根据外部输入的配置指令将各可视化组件与对应的待展示数据关联；
43.页面展示模块5，连接配置模块4，用于将配置完毕的初始页面作为数据可视化页面部署并展示。
44.本发明的较佳实施例中，如图1所示，还包括组件编辑显示模块6，连接初始页面生成模块3和素材库1，用于显示包含初始页面的页面编辑窗口和包括各模板组件的组件候选窗口。
45.具体的，本实施例中，素材库1包括：基础控件库、可视化组件库和图片素材库；基础控件库中以文本框、图标、输入框、单选框、下拉框、时间选择器等构成页面基础组件为主。可视化组件库中主要以柱状图、饼图、折线图、条形图、地图可视化等组件构成；在应用中，将枯燥无味的数据以图形化的方式去展示，并将业务数据融汇图形组件之中，业务数据以ajax请求后端方式获取到json格式的数据，获取到数据之后嵌入到开源项目应用最多的百度echarts图形组件库，实现业务数据和图形组件相融合，形成可视化业务组件库，具体传数据是以现有开源vue技术里面一个钩子属性props,实现业务数据与图形组件通信，在原来的开发过程中都需要开发人员一步步接入数据，引入组件，将组件引入页面，现今系统中预留了接入数据的业务组件，为不懂代码开发的人员搭建出来页面打下了坚实的基础，达到快捷，高效率的技术效果。图片素材库中主要以轮播图、图片、装饰条框背景图片为主，便于生成不同风格的可视化页面。
46.具体的，本实施例中，为了便于用户直观清楚地构建可视化页面，本发明的系统还提供页面编辑窗口和组件候选窗口，可以在组件候选窗口中选择需要的基础控件，或可视化组件，或图片素材作为可视化组件添加至初始页面中。
47.本发明的较佳实施例中，如图1所示，初始页面生成模块3包括：
48.组件生成单元31，用于根据组件生成指令于组件候选窗口中选择对应的模板组件作为可视化组件；
49.组件拖拽单元32，连接组件生成单元31，用于根据用户的拖拽操作将可视化组件
拖拽至初始页面的对应位置，以将可视化组件添加至初始页面；
50.动态渲染单元33，连接组件生成单元31和组件拖拽单元32，用于在可视化组件被从组件候选窗口拖拽至页面编辑窗口时，将可视化组件渲染加载展示。
51.具体的，本实施例中，为了便于用户将自己需要的模板组件添加至初始页面中的对应位置，以及调整组件的大小，本发明的系统添加组件拖拽单元32，以添加拖拽器的形式实现，拖拽器有如下几个功能点：自由拖拽，支持控制点和多方位缩放，支持自由控制层级，支持组件静态化(即为了实现固定,预览页面等效果)。
52.传统的开发平台中的拖拽器使用h5(html5，第五代超文本标记语言)中自带的drag属性,仅仅是一个属性功能，而本发明的系统使用的拖拽器是vue-dragable(是vue(一款流行的javascript前端框架)中的一个开源插件)，集成进我们这个平台,方便开发。
53.vue-dragable几乎满足拖拽功能的所有需求，具有api(applicationprogramminginterface,应用程序编程接口)丰富，功能强大的优点，还能够支持触摸设备使用、智能滚动、选择文本以及不同列表之间的拖拽和撤销操作，需求定制性高；而且数据绑定视图、动画流畅、使用简单、改变可追溯。
54.当一个页面中元素很多时会影响页面整体的加载速度，因为浏览器渲染页面需要占用cpu或gpu的性能资源。在vue或者react(一种用于构建用户界面的javascript库)出现之前，渲染一个组件或一个页面，需要数据绑定页面根元素dom(文档对象模型，documentobjectmodel，简称dom),这样页面渲染效率会很慢，得益于vue框架中getter和setter属性特性，可以根据数据动态渲染页面，这样不需要去操作dom,会大大提高组件渲染数据的效率。所谓动态渲染，即根据json数据格式渲染出不同的业务组件时，对于数据可视化页面来说，每一个可视化组件都需要渲染大量的信息，这无疑会对页面性能造成不小的影响，所以我们需要设计一种机制，让可视化组件异步加载到画布(即未加载可视化组件的数据可视化页面)上，组件异步加载利用了vue中promise属性,让多和可视化组件排队渲染，而不是一次性同步加载几十个几百个可视化组件(同步加载导致页面会有大量的白屏时间，用户体验极度下降)。
55.动态渲染单元33以动态加载器的方式实现，保证组件的加载都是异步的，一方面可以减少页面体积，另一方面用户可以更早的看到页面元素。目前我们熟知的动态加载机制也有很多，如vue和react生态都提供了开箱即用的解决方案(虽然我们可以用webpack自行设计这样的动态模型，此处为了提高效率，我们直接基于现有技术封装)，可以看出在可视化组件被从组件候选窗口拖拽至页面编辑窗口时，才将可视化组件渲染加载展示。
56.本发明的系统利用vue的属性和可视化插件echarts(一款基于javascript的数据可视化图表库)的结合，在可视化组件被从组件候选窗口拖拽至页面编辑窗口时，将可视化组件渲染加载展示，实现可视化组件的动态渲染，节省硬件资源，提供良好的用户体验。
57.本发明的较佳实施例中，如图1所示，各可视化组件对应关联有多条默认属性，则组件编辑显示模块6还连接配置模块4，则组件编辑显示模块6还用于在对每个可视化组件进行配置时显示对应的配置窗口，并在配置窗口中展示对应的各默认属性。
58.具体的，本实施例中，配置窗口中在未选中可视化组件时显示页面级配置，例如：大屏宽高、背景色、背景图等信息，在选中可视化组件时配置窗口中显示可视化组件的各默认属性。
59.在显示可视化组件的各默认属性时，由于有多种可视化组件，显示的内容中的编辑类型由可视化组件的fileds属性里的type属性决定，再利用vue的动态组件is属性实现input、select、image、border等各种类型可视化组件的属性显示。
60.本发明的较佳实施例中，配置窗口包括数据配置窗口，默认属性包括默认数据属性，配置指令包括数据配置指令；则如图1所示，配置模块4包括：
61.数据提取单元41，用于针对于初始页面中的每个可视化组件，根据数据配置指令于数据库中提取出对应的待展示数据；
62.数据配置单元42，连接数据提取单元41，用于在数据配置窗口中将待展示数据作为默认数据属性与可视化组件对应关联。
63.本发明的较佳实施例中，默认属性包括多条外观属性，配置窗口包括外观配置窗口，配置指令包括外观配置指令，则如图1所示，配置模块4还包括：
64.外观配置单元43，用于根据外观配置指令调整外观配置窗口中显示的各外观属性。
65.本发明的较佳实施例中，默认属性包括交互属性，配置窗口包括交互配置窗口，配置指令包括交互配置指令；则配置模块4还包括：
66.交互配置单元44，用于根据交互配置指令调整交互配置窗口中显示的交互属性。
67.具体的，本实施例中，模板组件对应关联有多条默认属性，例如默认数据、默认外观样式、默认交互动作，需要用户更改默认的属性达到用户需要的可视化效果。
68.本发明的低代码中心提供数据配置窗口、外观配置窗口和交互配置窗口，以供用户可以快速的将各个可视化组件绑定对应的待展示数据，调整可视化组件的外观样式以及为可视化组件添加交互事件属性。
69.其中，对外观和数据进行配置时是利用json(javascriptobjectnotation,js对象简谱)数据规范化和vue框架的双向绑定机制，进行数据回传，组件就开始渲染；对交互事件配置时利用了vue-jsonp获取数据的机制，然后利用vue中的updated钩子去回传交互事件。
70.本发明的较佳实施例中，各数据可视化页面关联有对应的访问权限；则如图1所示，系统还包括页面管理模块7，连接页面展示模块5，用于在用户访问各数据可视化页面时，验证用户在拥有对应的访问权限时将数据可视化页面展示。
71.具体的，本实施例中，在用户对一个初始页面添加完需要的可视化组件并且对各可视化组件的属性配置完毕后即可将该页面作为数据可视化页面部署并发布。
72.因为数据可视化页面展示的信息中可能有私密数据，所以需要对页面的访问进行控制，在用户访问各数据可视化页面时验证该用户是否拥有对应的访问权限，只有拥有访问权限的用户才能访问数据可视化页面。
73.本发明还提供一种生成数据可视化页面的方法，应用于上述的系统，如图2所示，包括：
74.步骤s1，系统构建初始页面，随后根据外部输入的组件生成指令选择对应的模板组件作为可视化组件并添加至初始页面；
75.步骤s2，系统针对于初始页面中的每个可视化组件，根据外部输入的配置指令将各可视化组件与对应的待展示数据关联；
76.步骤s3，系统将配置完毕的初始页面作为数据可视化页面部署并展示。
77.本发明的较佳实施例中，系统包括用于显示包含初始页面的页面编辑窗口和包括各模板组件的组件候选窗口；则如图3所示，步骤s1包括：
78.步骤s11，系统根据组件生成指令于组件候选窗口中选择对应的模板组件作为可视化组件；
79.步骤s12，系统根据用户的拖拽操作将可视化组件拖拽至初始页面的对应位置，以将可视化组件添加至初始页面；
80.步骤s13，系统在可视化组件被从组件候选窗口拖拽至页面编辑窗口时，将可视化组件渲染加载展示。
81.以上仅为本发明较佳的实施例，并非因此限制本发明的实施方式及保护范围，对于本领域技术人员而言，应当能够意识到凡运用本说明书及图示内容所作出的等同替换和显而易见的变化所得到的方案，均应当包含在本发明的保护范围内。

技术特征：
1.一种生成数据可视化页面的系统，其特征在于，包括：素材库，所述素材库保存有预先配置的多种模板组件；数据库，所述数据库保存有预先配置的多条待展示数据；初始页面生成模块，连接所述素材库，用于构建初始页面，并根据外部输入的组件生成指令选择对应的所述模板组件作为可视化组件并添加至所述初始页面；配置模块，连接所述初始页面生成模块和所述数据库，用于针对于所述初始页面中的每个所述可视化组件，根据外部输入的配置指令将各所述可视化组件与对应的所述待展示数据关联；页面展示模块，连接所述配置模块，用于将配置完毕的所述初始页面作为数据可视化页面部署并展示。2.根据权利要求1所述的系统，其特征在于，还包括组件编辑显示模块，连接所述初始页面生成模块和所述素材库，用于显示包含所述初始页面的页面编辑窗口和包括各所述模板组件的组件候选窗口。3.根据权利要求2所述的系统，其特征在于，所述初始页面生成模块包括：组件生成单元，用于根据所述组件生成指令于所述组件候选窗口中选择对应的所述模板组件作为所述可视化组件；组件拖拽单元，连接所述组件生成单元，用于根据用户的拖拽操作将所述可视化组件拖拽至所述初始页面的对应位置，以将所述可视化组件添加至所述初始页面；动态渲染单元，连接所述组件生成单元和所述组件拖拽单元，用于在所述可视化组件被从所述组件候选窗口拖拽至所述页面编辑窗口时，将所述可视化组件渲染加载展示。4.根据权利要求2所述的系统，其特征在于，各所述可视化组件对应关联有多条默认属性，则所述组件编辑显示模块还连接所述配置模块，则所述组件编辑显示模块还用于在对每个所述可视化组件进行配置时显示对应的配置窗口，并在所述配置窗口中展示对应的各所述默认属性。5.根据权利要求4所述的系统，其特征在于，所述配置窗口包括数据配置窗口，所述默认属性包括默认数据属性，所述配置指令包括数据配置指令；则所述配置模块包括：数据提取单元，用于针对于所述初始页面中的每个所述可视化组件，根据所述数据配置指令于所述数据库中提取出对应的所述待展示数据；数据配置单元，连接所述数据提取单元，用于在所述数据配置窗口中将所述待展示数据作为所述默认数据属性与所述可视化组件对应关联。6.根据权利要求4所述的系统，其特征在于，所述默认属性包括多条外观属性，所述配置窗口包括外观配置窗口，所述配置指令包括外观配置指令，则所述配置模块还包括：外观配置单元，用于根据所述外观配置指令调整所述外观配置窗口中显示的各所述外观属性。7.根据权利要求4所述的系统，其特征在于，所述默认属性包括交互属性，所述配置窗口包括交互配置窗口，所述配置指令包括交互配置指令；则所述配置模块还包括：交互配置单元，用于根据所述交互配置指令调整所述交互配置窗口中显示的所述交互属性。8.根据权利要求1所述的系统，其特征在于，各所述数据可视化页面关联有对应的访问
权限；则所述系统还包括页面管理模块，连接所述页面展示模块，用于在用户访问各所述数据可视化页面时，验证所述用户在拥有对应的所述访问权限时将所述数据可视化页面展示。9.一种生成数据可视化页面的方法，其特征在于，应用于如权利要求1-8中任意一项所述的系统，包括：步骤s1，所述系统构建初始页面，随后根据外部输入的组件生成指令选择对应的所述模板组件作为可视化组件并添加至所述初始页面；步骤s2，所述系统针对于所述初始页面中的每个所述可视化组件，根据外部输入的配置指令将各所述可视化组件与对应的所述待展示数据关联；步骤s3，所述系统将配置完毕的所述初始页面作为数据可视化页面部署并展示。10.根据权利要求9所述的方法，其特征在于，所述系统包括用于显示包含所述初始页面的页面编辑窗口和包括各所述模板组件的组件候选窗口；则所述步骤s1包括：步骤s11，所述系统根据所述组件生成指令于所述组件候选窗口中选择对应的所述模板组件作为所述可视化组件；步骤s12，所述系统根据用户的拖拽操作将所述可视化组件拖拽至所述初始页面的对应位置，以将所述可视化组件添加至所述初始页面；步骤s13，所述系统在所述可视化组件被从所述组件候选窗口拖拽至所述页面编辑窗口时，将所述可视化组件渲染加载展示。

技术总结
本发明提供一种生成数据可视化页面的系统及方法，涉及数据可视化技术领域，包括：素材库保存有预先配置的多种模板组件；数据库保存有预先配置的多条待展示数据；初始页面生成模块用于构建初始页面，并根据外部输入的组件生成指令选择对应的模板组件作为可视化组件并添加至初始页面；配置模块用于针对于初始页面中的每个可视化组件，根据外部输入的配置指令将各可视化组件与对应的待展示数据关联页面展示模块，用于将配置完毕的初始页面作为数据可视化页面部署并展示。有益效果是生成数据可视化页面时只需要很少的代码，降低人工成本提高效率；自主选择可视化组件并与待展示数据关联，降低传统的定制开发门槛和解决数据分散的问题。问题。问题。


技术研发人员：彭寿 马立云 官敏 周芸 傅启亮 吴炎 胡鸣栋 杨清荃 朱欣佳
受保护的技术使用者：凯盛数智信息技术科技（上海）有限公司
技术研发日：2023.03.14
技术公布日：2023/7/19