一种通过可拖拽式组件搭建大屏的解决方法及系统技术方案

本发明专利技术公开了一种通过可拖拽式组件搭建大屏的解决方法及系统，属于大屏自定义技术领域，包括以下步骤：S1：数据源配置；S2：数据源结果解析；S3：组件设计；S4：大屏设计；S5：大屏发布与预览。本发明专利技术通过可视化大屏设计的方法，使用户可以脱离代码进行大屏设计、分享和数据源对接；用户通过可视化的拖拽操作能够高效地编辑、修改大屏，并可通过系统提供的接口完成大屏的预览、分享工作,值得被推广使用。分享工作,值得被推广使用。分享工作,值得被推广使用。

【技术实现步骤摘要】
一种通过可拖拽式组件搭建大屏的解决方法及系统


[0001]本专利技术涉及大屏自定义
，具体涉及一种通过可拖拽式组件搭建大屏的解决方法及系统。

技术介绍

[0002]对于传统大屏应用，开发人员需要联系各个业务部门根据需求进行大屏开发，但随着互联网的高速发展，系统的互联网化进程加速，5G时代业务需求变化更快，作为开发人员不懂业务开发难免与真实场景有出入，造成开发周期长的问题。此外影响大屏质量的因素主要有两个，一是开发人员水平不高，二是开发人员频繁更换。应采用自定义大屏提供的组件以统一UI、UE和技术路线，便于后期维护。为此，提出一种通过可拖拽式组件搭建大屏的解决方法及系统。

技术实现思路

[0003]本专利技术所要解决的技术问题在于：如何快捷地配置新大屏、轻松地修改旧大屏、快速地发布新大屏等，提供了一种通过可拖拽式组件搭建大屏的解决方法，通过可视化大屏设计的方法，使用户可以脱离代码进行大屏设计、分享和数据源对接；用户通过可视化的拖拽操作能够高效地编辑、修改大屏，并可通过系统提供的接口完成大屏的预览、分享工作。
[0004]本专利技术是通过以下技术方案解决上述技术问题的，本专利技术包括以下步骤：
[0005]S1：数据源配置
[0006]提供四种数据源配置，分别为数据库、API接口、数据模型、静态数据；
[0007]S2：数据源结果解析
[0008]通过模版解析，将数据源返回的数据解析成组件所需的纬度和度量两种类型的字段数据；
[0009]S3：组件设计
[0010]通过大屏设计器提供的元组件以及模块组件的拖拉拽操作完成大屏的初步设计，再根据用户的个性化需求进行组件属性的格式化修改和事件属性的设置，以及根据需要确定是否需给该组件配置数据源；
[0011]S4：大屏设计
[0012]通过拖拉拽大屏设计器提供的元组件、模块组件(由若干元组件拖拽而来的组件，可对其进行可视化组件属性配置，如大小、位置、数据来源等)和自定义的组件，配置数据源完成大屏的设计；
[0013]S5：大屏发布与预览
[0014]提供大屏模板库，通过API将大屏模板提供给外部系统应用；并提供大屏运行态地址供页面集成；通过系统提供的接口完成大屏的预览、分享工作。
[0015]更进一步地，在所述步骤S1中，所述数据源的类型为mysql。
[0016]更进一步地，在所述步骤S2中，数据源结果的解析分为两种模式，一种是基本解析
模式，基本解析模式提供解析模板或输入新解析模版进行数据解析；另一种是高级解析模式，高级解析模式通过用户编写脚本进行数据处理，得到相应字段。
[0017]更进一步地，脚本类型包括groovy、python、javaScript。
[0018]更进一步地，在所述步骤S3中，大屏设计器的组件信息包括组件名称、组件属性JSON串；大屏设计器的组件支持echarts组件，所有组件的图标、宽度、高度、名称属性支持可视化修改并实时生效；通过可视化修改组件属性实现组件的放大和缩小；对已经编辑好的大屏在线预览，查看大屏实际效果，及时调整。
[0019]更进一步地，在所述步骤S4中，所述大屏设计器还包括在线JSON编辑器，用于供用户在线修改组件的样式。
[0020]更进一步地，在所述步骤S5中，经过步骤S4设计完成的大屏创建完毕后存入大屏模板库，提供编辑、预览的功能。
[0021]更进一步地，在所述步骤S5中，一个大屏允许有多个版本，但只允许唯一一个版本状态为发布。
[0022]本专利技术还提供了一种通过可拖拽式组件搭建大屏的解决系统，用于采用上述的方法对大屏进行设计及搭建，包括：
[0023]数据源配置模块，用于提供四种数据源配置；
[0024]数据源结果解析模块，通过模版解析，将数据源返回的数据解析成组件所需的纬度和度量两种类型的字段数据；
[0025]组件设计模块，用于通过大屏设计器提供的元组件以及模块组件的拖拉拽操作完成大屏的初步设计，再根据用户的个性化需求进行组件属性的格式化修改和事件属性的设置，以及根据需要确定是否需给该组件配置数据源；
[0026]大屏设计模块，用于通过拖拉拽大屏设计器内置的组件和自定义的组件，配置数据源完成大屏的设计；
[0027]业务控制模块，用于控制待测模块做不同的业务；
[0028]大屏发布与预览模块，用于提供大屏模板库，通过API将大屏模板提供给外部系统应用；并提供大屏运行态地址供页面集成；通过系统提供的接口完成大屏的预览、分享工作。
[0029]本专利技术相比现有技术具有以下优点：该通过可拖拽式组件搭建大屏的解决方法，通过可视化大屏设计的方法，使用户可以脱离代码进行大屏设计、分享和数据源对接；用户通过可视化的拖拽操作能够高效地编辑、修改大屏，并可通过系统提供的接口完成大屏的预览、分享工作,值得被推广使用。
附图说明
[0030]图1是本专利技术实施例中大屏可视化设计方法的流程示意图；
[0031]图2是本专利技术实施例中步骤S5的实施过程示意图；
[0032]图3是本专利技术实施例中步骤S2中数据源结果高级解析模式示例图。
具体实施方式
[0033]下面对本专利技术的实施例作详细说明，本实施例在以本专利技术技术方案为前提下进行
实施，给出了详细的实施方式和具体的操作过程，但本专利技术的保护范围不限于下述的实施例。
[0034]如图1
‑
3所示，本实施例提供一种技术方案：一种通过可拖拽式组件搭建大屏的解决方法，包括以下步骤：
[0035]S1：数据源配置
[0036]提供四种数据源配置，分别是数据库、API接口、数据模型(实体)、静态数据。
[0037]S2：数据源结果解析
[0038]在数据源结果解析模块，通过模版解析，可以将数据源返回的数据解析成组件需要的纬度和度量两种类型的字段数据。
[0039]度量是数据表中的数值数据，维度是类别数据。离散型数据适用于维度，如字符、时间、地理位置等；连续型数据适用于度量，如数字。如果大屏组件的图表类型是交叉表，可以认为维度项分为行和列，度量项显示为值。
[0040]数据源结果的解析分为两种模式，一种是基本解析模式，基本解析模式提供解析模板或输入新解析模版进行数据解析；另一种是高级解析模式，高级解析模式通过用户编写脚本进行数据处理，得到相应字段。也可以自己输入解析模版进行数据解析；对于复杂的数据结构，用户可以通过高级解析模式，通过脚本进行数据处理。比如后端数据源返回的数据是{result:[{name:
‘
Jack
’
,age:12},{name:
‘
Tom
’
,age:13}]}，使用的模版解析是result[],那么就会自动解析出name,age两种类型字段，根据他们的数据类型，系统推断出name为纬度，而age则为度量。当然本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种通过可拖拽式组件搭建大屏的解决方法，其特征在于，包括以下步骤：S1：数据源配置提供四种数据源配置，分别为数据库、API接口、数据模型、静态数据；S2：数据源结果解析通过模版解析，将数据源返回的数据解析成组件所需的纬度和度量两种类型的字段数据；S3：组件设计通过大屏设计器提供的元组件以及模块组件的拖拉拽操作完成大屏的初步设计，再根据用户的个性化需求进行组件属性的格式化修改和事件属性的设置，以及根据需要确定是否需给该组件配置数据源；S4：大屏设计通过拖拉拽大屏设计器提供的元组件、模块组件和自定义的组件，配置数据源完成大屏的设计；S5：大屏发布与预览提供大屏模板库，通过API将大屏模板提供给外部系统应用；并提供大屏运行态地址供页面集成；通过系统提供的接口完成大屏的预览、分享工作。2.根据权利要求1所述的一种通过可拖拽式组件搭建大屏的解决方法，其特征在于：在所述步骤S1中，所述数据源的类型为mysql。3.根据权利要求2所述的一种通过可拖拽式组件搭建大屏的解决方法，其特征在于：在所述步骤S2中，解析分为两种模式，一种是基本解析模式，基本解析模式提供解析模板或输入新解析模版进行数据解析；另一种是高级解析模式，高级解析模式通过用户编写脚本进行数据处理，得到相应字段。4.根据权利要求3所述的一种通过可拖拽式组件搭建大屏的解决方法，其特征在于：脚本格式包括groovy、python、javaScript。5.根据权利要求3所述的一种通过可拖拽式组件搭建大屏的解决方法，其特征在于：在所述步骤S3中，大屏设计器的组件信息包括组件名称、组件属性JSON串；大屏设计器的组件支持echarts组件，所有...

【专利技术属性】
技术研发人员：冯强中，汪伟伟，李凌悦，王涛，解宇恩，邢桁，张自强，
申请(专利权)人：科大国创云网科技有限公司，
类型：发明
国别省市：