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

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

背景技术：

1、在以往的代码开发平台中主要以人工开发组件、开发搭建页面为主，然而人工搭建在本地脚手架开发环境中进行编码，有大量的重复劳动，能力复用性差，占用前端宝贵的开发时间。随着公司业务的发展，页面开发的需求逐渐增长，客户追求效率，因此需要尽快响应客户需求。

2、需要通过对原有的前端组件整合，页面动态渲染，搭建一个高效率，低成本的基于工业互联网的低代码平台。

技术实现思路

1、针对现有技术中存在的问题，本发明提供一种生成数据可视化页面的系统，包括：

2、素材库，所述素材库保存有预先配置的多种模板组件；

3、数据库，所述数据库保存有预先配置的多条待展示数据；

4、初始页面生成模块，连接所述素材库，用于构建初始页面，并根据外部输入的组件生成指令选择对应的所述模板组件作为可视化组件并添加至所述初始页面；

5、配置模块，连接所述初始页面生成模块和所述数据库，用于针对于所述初始页面中的每个所述可视化组件，根据外部输入的配置指令将各所述可视化组件与对应的所述待展示数据关联；

6、页面展示模块，连接所述配置模块，用于将配置完毕的所述初始页面作为数据可视化页面部署并展示。

7、优选的，还包括组件编辑显示模块，连接所述初始页面生成模块和所述素材库，用于显示包含所述初始页面的页面编辑窗口和包括各所述模板组件的组件候选窗口。

8、优选的，所述初始页面生成模块包括：

9、组件生成单元，用于根据所述组件生成指令于所述组件候选窗口中选择对应的所述模板组件作为所述可视化组件；

10、组件拖拽单元，连接所述组件生成单元，用于根据用户的拖拽操作将所述可视化组件拖拽至所述初始页面的对应位置，以将所述可视化组件添加至所述初始页面；

11、动态渲染单元，连接所述组件生成单元和所述组件拖拽单元，用于在所述可视化组件被从所述组件候选窗口拖拽至所述页面编辑窗口时，将所述可视化组件渲染加载展示。

12、优选的，各所述可视化组件对应关联有多条默认属性，则所述组件编辑显示模块还连接所述配置模块，则所述组件编辑显示模块还用于在对每个所述可视化组件进行配置时显示对应的配置窗口，并在所述配置窗口中展示对应的各所述默认属性。

13、优选的，所述配置窗口包括数据配置窗口，所述默认属性包括默认数据属性，所述配置指令包括数据配置指令；则所述配置模块包括：

14、数据提取单元，用于针对于所述初始页面中的每个所述可视化组件，根据所述数据配置指令于所述数据库中提取出对应的所述待展示数据；

15、数据配置单元，连接所述数据提取单元，用于在所述数据配置窗口中将所述待展示数据作为所述默认数据属性与所述可视化组件对应关联。

16、优选的，所述默认属性包括多条外观属性，所述配置窗口包括外观配置窗口，所述配置指令包括外观配置指令，则所述配置模块还包括：

17、外观配置单元，用于根据所述外观配置指令调整所述外观配置窗口中显示的各所述外观属性。

18、本发明的较佳实施例中，所述默认属性包括交互属性，所述配置窗口包括交互配置窗口，所述配置指令包括交互配置指令；则所述配置模块还包括：

19、交互配置单元，用于根据所述交互配置指令调整所述交互配置窗口中显示的所述交互属性。

20、优选的，各所述数据可视化页面关联有对应的访问权限；则所述系统还包括页面管理模块，连接所述页面展示模块，用于在用户访问各所述数据可视化页面时，验证所述用户在拥有对应的所述访问权限时将所述数据可视化页面展示。

21、本发明还提供一种数据可视化页面的生成方法，应用于上述的系统，包括：

22、步骤s1，所述系统构建初始页面，随后根据外部输入的组件生成指令选择对应的所述模板组件作为可视化组件并添加至所述初始页面；

23、步骤s2，所述系统针对于所述初始页面中的每个所述可视化组件，根据外部输入的配置指令将各所述可视化组件与对应的所述待展示数据关联；

24、步骤s3，所述系统将配置完毕的所述初始页面作为数据可视化页面部署并展示。

25、优选的，所述系统包括用于显示包含所述初始页面的页面编辑窗口和包括各所述模板组件的组件候选窗口；则所述步骤s1包括：

26、步骤s11，所述系统根据所述组件生成指令于所述组件候选窗口中选择对应的所述模板组件作为所述可视化组件；

27、步骤s12，所述系统根据用户的拖拽操作将所述可视化组件拖拽至所述初始页面的对应位置，以将所述可视化组件添加至所述初始页面；

28、步骤s13，所述系统在所述可视化组件被从所述组件候选窗口拖拽至所述页面编辑窗口时，将所述可视化组件渲染加载展示。

29、上述技术方案具有如下优点或有益效果：

30、将原有的开发平台的组件进行资源整合，基于工业互联网平台将智能化管理,智能化搭建,移动式应用,组件化智能应用融合到低代码的系统中，生成数据可视化页面时只需要很少的代码，达到降低人工成本,提高效率的目标；用户可以自主选择需要的可视化组件并与对应的待展示数据关联，生成数据可视化页面并展示，降低传统的定制开发门槛和解决数据分散的问题，能够多方位、多角度、全景展现各项数据或指标，实时监控、一目了然。

技术特征：

1.一种生成数据可视化页面的系统，其特征在于，包括：

2.根据权利要求1所述的系统，其特征在于，还包括组件编辑显示模块，连接所述初始页面生成模块和所述素材库，用于显示包含所述初始页面的页面编辑窗口和包括各所述模板组件的组件候选窗口。

3.根据权利要求2所述的系统，其特征在于，所述初始页面生成模块包括：

4.根据权利要求2所述的系统，其特征在于，各所述可视化组件对应关联有多条默认属性，则所述组件编辑显示模块还连接所述配置模块，则所述组件编辑显示模块还用于在对每个所述可视化组件进行配置时显示对应的配置窗口，并在所述配置窗口中展示对应的各所述默认属性。

5.根据权利要求4所述的系统，其特征在于，所述配置窗口包括数据配置窗口，所述默认属性包括默认数据属性，所述配置指令包括数据配置指令；则所述配置模块包括：

6.根据权利要求4所述的系统，其特征在于，所述默认属性包括多条外观属性，所述配置窗口包括外观配置窗口，所述配置指令包括外观配置指令，则所述配置模块还包括：

7.根据权利要求4所述的系统，其特征在于，所述默认属性包括交互属性，所述配置窗口包括交互配置窗口，所述配置指令包括交互配置指令；则所述配置模块还包括：

8.根据权利要求1所述的系统，其特征在于，各所述数据可视化页面关联有对应的访问权限；则所述系统还包括页面管理模块，连接所述页面展示模块，用于在用户访问各所述数据可视化页面时，验证所述用户在拥有对应的所述访问权限时将所述数据可视化页面展示。

9.一种生成数据可视化页面的方法，其特征在于，应用于如权利要求1-8中任意一项所述的系统，包括：

10.根据权利要求9所述的方法，其特征在于，所述系统包括用于显示包含所述初始页面的页面编辑窗口和包括各所述模板组件的组件候选窗口；则所述步骤s1包括：

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

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