基于可视化配置开发自定义数据大屏的方法以系统

摘要

本发明涉及基于可视化配置开发自定义数据大屏的方法以系统，数据源系统配置具有数据信息的若干组件，由多个组件封装成不同的模块，显示端基于模块和组件生成可视化大屏页面，操作系统接收触发指令，修改模块框在显示端生成的可视化大屏页面上的布局，进一步再通过操作系统修改可视化大屏页面上的组件单元在模块框内的位置布局，保存修改后的页面布局，显示端基于修改生成新的可视化大屏页面。控制系统作为开发人员进行配置的编辑端；操作系统作为用户对页面进行的操作端，操作系统没有代码层面的技术要求，用户可针对喜好对首页进行自定义，并且可调整模块组件的位置，提高了主页的自定义程度同时还无需技术层面的要求。

说明书

技术领域

本发明属于计算机应用技术领域，具有涉及一种基于可视化配置开发自定义数据大屏的方法以系统。

背景技术

随着现在互联网的飞速发展，现在大屏的使用率越来越高，在多数情况大屏作为演讲、教学等用途进行操作使用，现有的大屏系统愈发愈多，而现有的大屏在研发设计时都是采用模块化的方式进行布局，现有的大屏系统中关于布局的设置，没有考虑令用户是否需要对大屏进行自定义布局。例如：在大屏上的图表、模块的位置设为固定的，只能简单的拖拽编辑，在多数可拖拽的可视化大屏中，都是基于基本图表和文字图片定制化布局生成自行配置的大屏，而在对其进行拓展自定义时，通常需要一定的技术基础，只能由专业人员进行配置，需要深刻了解计算机知识，知道计算机原理。并且要进行培训或进行大量尝试才有可能配置出一个可用大屏，而用户无法对其直接的自定义，不便于用户使用。

而现有的一些自定义配置大屏，自定义配置时仅仅调整每个模块的相应位置、大小等参数，以模块作为整体去移动配置，而每个模块内部的组件是后端开发时确定的，模块内部的相应布局无法进行调配；会令大屏自定义的程度低，不便于用户自定义调整操作，因此，发明人针对现有技术存在的相关问题，基于可视化配置的自定义大屏进行改进。

发明内容

本发明提供基于可视化配置开发自定义数据大屏的方法以系统；本发明针对非专业的用户，无需任何代码层面的技术基础即可配置，并且不仅仅只是针对模块在大屏上的布局进行调整，用户同时可以对模块内部的组件也可自定义配置，自定义程度较高。

其具体技术方案如下：

本发明公开基于可视化配置开发自定义数据大屏的方法以系统，包括如下步骤：

A：控制系统通过数据源系统配置具有数据信息的若干组件，由多个组件封装成不同的模块；

B：控制系统加载组件和模块，对组件生成特定且唯一的子标识，对模块生成特定的主标识，显示端通过关联所述组件和模块的标识，显示端向控制系统发起请求获取组件和模块所需数据；

C：控制系统通过识别不同组件和模块对应的不同标识分配给显示端正确的数据，组件和模块获得数据后，进行渲染和展示；

D：显示端基于所述控制系统配置的模块和组件生成相应的可视化大屏页面，模块在可视化大屏页面内生成对应的模块框，组件在模块框内对应生成组件单元；

E：操作系统接收触发指令，修改模块框在显示端生成的可视化大屏页面上的布局；

F：触发操作系统接收布局指令，修改可视化大屏页面上的组件单元在模块框内的位置布局；

G：保存操作系统修改后的大屏页面布局，显示端基于修改后控制系统的模块和组件信息生成新布局的可视化大屏页面；

其中，所述步骤E和步骤F顺序可调换。

本发明还公开一种基于可视化配置开发自定义首页的系统，包括存储器、处理器及存储在存储器上的计算机程序，所述处理器执行所述计算机程序以实现上述方法的步骤。

本发明所提供的基于可视化配置开发自定义大屏的方法及系统，针对目前市场上现有技术中的软件首页无法自定义编辑的问题进行改进，具体技术效果如下：

1、本发明所提供的技术方案通过将控制器分别控制系统和操作系统两部分，控制系统作为开发人员进行配置的编辑端，开发人员对大屏的模块和组件进行配置编写，可以针对用户的需要进行拓展和开发，便于对软件的升级和维护；

而操作系统作为用户对首页进行操作的工具，将控制器针对使用的人分别两部分，使得用户在操作时不需要任何相关的技术基础，操作系统没有代码层面的技术要求，用户可针对自己的喜好对首页进行自定义。

2、现有的自定义首页方案中，都是针对大屏页面中的模块进行自定义设置，自定义配置时仅仅调整每个模块的相应位置在大屏页面上的部件进行调整，以模块作为整体去移动配置，而每个模块内部的组件是后端开发时确定的，模块内部的相应布局和功能组件无法进行使用者无法调配，而本发明针对这一问题作为发明构思，针对自定义主页进行改进，使得模块化的大屏页面对模块的内部组件也可进行自定义编辑，在模块内部调整组件的位置，更加适配不同用户的使用，提高了主页的自定义程度，更加便于用户进行自定义调整。

附图说明

图1为本发明的自定义数据大屏方法的流程图；

图2为本发明的自定义数据大屏方法的具体流程框图；

图3为本发明的自定义数据大屏系统的结构原理图。

具体实施方式

下面结合附图和以下实施例对本发明的基于可视化配置开发自定义数据大屏的方法以系统进一步的详细说明。

实施例

在本发明的一些实施例中，参照图1所示，公开基于可视化配置开发自定义数据大屏的方法以系统，包括如下步骤：

A：控制系统通过数据源系统配置具有数据信息的若干组件，由多个组件封装成不同的模块；

B：控制系统加载组件和模块，对组件生成特定且唯一的子标识，对模块生成特定的主标识，显示端通过关联所述组件和模块的标识，显示端向控制系统发起请求获取组件和模块所需数据；

C：控制系统通过识别不同组件和模块对应的不同标识分配给显示端正确的数据，组件和模块获得数据后，进行渲染和展示；

D：显示端基于所述控制系统配置的模块和组件生成相应的可视化大屏页面，模块在可视化大屏页面内生成对应的模块框，组件在模块框内对应生成组件单元；

E：操作系统接收触发指令，修改模块框在显示端生成的可视化大屏页面上的布局；

F：触发操作系统接收布局指令，修改可视化大屏页面上的组件单元在模块框内的位置布局；

G：保存操作系统修改后的大屏页面布局，显示端基于修改后控制系统的模块和组件信息生成新布局的可视化大屏页面；

其中，所述步骤E和步骤F顺序可调换。

进一步结合图2所示，一些实施例还包括以下步骤：

在上述基础上，步骤A的具体步骤包括：

A1：通过所述控制系统内的组件配置模块逐一编辑组件的数据信息，通过数据源系统中的数据源配置模块配置组件的数据源，并传输至总服务器进行保存，

A2：控制系统进一步将数据源与组件中的属性关联，将配置好的组件封装成模块；

A3：将每个模块所需的组件进行选择组合，逐一配置成所需的模块，并通过数据源配置模块传输至总服务器进行保存。

进一步地，步骤B的具体步骤包括：

B1：显示端通过所述主标识获取控制系统的数据信息，数据信息包括模块功能、模块框在显示端的显示尺寸、模块颜色布局指标、模块对应的组件数据信息；

B2：组件数据信息包括组件的子标识、组件功能和组件在模块内部的位置信息、组件显示信息；

B3：显示端通过解析器解析模块和组件的相关信息，在显示端上生成可视化大屏页面。

进一步地，步骤C的具体步骤包括：

C1：控制系统对完成配置的模块生成特定的主标识，可视化大屏页面内形成有用于匹配所述模块的主框架，模块通过主标识插入所述主框架内；

C2：主框架内设有多个用于插入所述模块的模块框，模块框对应形成有主框标识，模块通过主标识与对应的主框标识进行匹配；

C3：控制系统对每个模块内的组件生成特定的子标识，可视化大屏页面的主框架内形成有用于匹配组件的所述子标识的子框架；

C4：所述子标识与其对应模块的主标识相关联；

C5：子框架内设有多个用于显示所述组件的组件框，组件框内形成有子框标识，组件通过子标识与对应的子框标识进行匹配；

C6：通过数据源配置模块传输至总服务器进行保存。

进一步地，步骤D的具体步骤还包括：

D1：触发操作系统对模块进行选择查找，选取所需模块；

D2：选取到模块后通过控制系统内的解析器对模块进行解析；

D3：操作系统识别主框架和主标识，修改控制系统的模块的数据信息；

D4：重复上述步骤，对多个模块的数据信息进行修改配置；

D5：控制系统选取模块后，控制系统内的解析器对模块内的组件进行解析；

D6：触发编辑板块选取模块内的组件，修改组件的显示状态，选择每个组件单元是否在模块框内显示；

D7：编辑板块对所显示的组件修改组件在模块内部的位置信息；

D8：重复上述步骤，对多个模块内的组件信息进行修改配置；

D9：保存修改参数，通过解析器对模块内的组件信息进行解析进一步保存至总服务器。

再进一步地，所述步骤E还包括：

E1：控制系统内设有搜索板块，通过搜索板块直接搜索所需模块进行选取；

E2：操作系统内还设有列表板块，列表板块与主标识关联，每个模块的主标识对应在列表板块内生成特定标记，通过标记选取所需的模块；

E3：操作系统内设有预览板块，选取所需模块后触发预览板块，在显示端对所选取的模块进行放大预览；

E4：通过操作系统修改模块框在显示端的主框架内的位置、模块的模块框在显示端的显示尺寸、模块框的模块颜色布局指标；

E5：修改所需模块后触发预览板块，在显示端对所选取完成修改的模块进行放大预览。

步骤F的步骤还包括：

F1：触发操作系统后选取所需模块，触发操作系统内的编辑板块，控制系统内的解析器对模块内的组件进行解析；

F2：编辑板块识别子框架和子标识，修改模块内组件的数据信息；

F2.1：编辑板块修改组件在模块内部的位置信息、组件显示信息；

F3：重复上述步骤，对多个模块内的组件信息进行修改配置；

F4：保存修改参数，通过解析器对模块内的组件信息进行解析进一步保存至总服务器。

综上所述，通过本方法后端开发人员通过操作系统对模块内的组件进行编辑，配置各个组件的相应功能，控制系统配置每个组件的数据信息，将多个组件封装成不同模块；显示端基于控制系统配置的模块和组件信息生成相应的可视化大屏页面；模块在可视化大屏页面内生成对应的模块框，组件在模块框内对应生成组件单元；

用户在使用时触发控制系统的操作系统，先修改模块框在显示端生成的可视化大屏页面上的布局，修改模块在大屏页面上的位置、颜色、大小等参数，配置成大屏页面的初始状态；用户再修改可视化大屏页面上的组件单元在模块框内的位置布局，配置每个模块内部的组件位置，如将模块内的关闭按键、最小化按键不放在右上角，搜索栏不放在上方，用户对每个模块进行自行配置，选择自己喜欢的模块内布局和大屏页面整体的布局；保存操作系统修改后的大屏页面布局，显示端基于修改后控制系统的模块和组件信息生成新布局的可视化大屏页面。

本方法将操作系统作为开发人员进行配置的操作端，开发人员对大屏页面的模块和组件进行配置编写，可以针对用户的需要进行拓展和开发，便于对软件的升级和维护；而控制系统作为用户对首页进行编辑的工具，将控制器针对使用的人分别两部分，使得用户在编辑时不需要任何相关的技术基础，操作控制系统没有代码层面的技术要求，用户可针对自己的喜好对首页进行自定义。

本发明的方法相对于现有的自定义首页方案，自定义配置时不仅仅调整每个模块的相应位置在大屏页面上的部件进行调整，以模块和组件作为不同单元主体去移动配置，模块内部的相应布局和功能组件无法进行使用者也可以调配，而本发明针对这一问题作为发明构思，针对自定义主页进行改进，使得模块化的大屏页面对模块的内部组件也可进行自定义编辑，在模块内部调整组件的位置，更加适配不同用户的使用，提高了主页的自定义程度，更加便于用户进行自定义调整。

在一些实施例中，基于上述方法提供一种基于可视化配置开发自定义首页的系统，包括存储器、处理器及存储在存储器上的计算机程序，所述计算机程序被处理器执行时实现上述方法的步骤。系统具体内容包括：

包括显示端1、控制器2，控制器2包括控制系统3和操作系统4，显示端与控制系统相关联；每个模块5包括子框架51和组件52，组件52布置在子框架51内，组件52通过控制系统3改变在子框架51内的位置；显示端1生成的可视化大屏页面包括主框架11，主框架11内设有多个模块框12，本实施例中的模块2包括模块A、模块B、模块C等，每个模块上对应设有组件52，如模块B的子框架上对应设有组件B1和组件B2，每个模块放在主框架对应的模块框内，模块2对应布置在模块框12内，子框架内设有多个用于显示所述组件的组件框，组件框内形成有子框标识，组件通过子标识与对应的子框标识进行匹配，主框架11和模块框12通过操作系统1进行编辑和预览；

操作系统4用于对模块2和组件52的功能进行后台配置；模块2在操作系统4上配置完成后生成特定标识进入控制系统3；控制系统3通过标识配置模块2在主框架11内的布局和组件52在子框架51内的位置。

具体配置时，控制系统3包括数据源定义模块31和组件内容配置模块32，组件内容配置模块32与数据源定义模块31进行关联，数据源定义模块为每个模块2生成特定主标识，为组件52生成特定的子标识，组件内容配置模块42用于对组件52的内容进行编辑并组合封装成模块2。

在具体实施时，操作系统4包括列表板块41和预览板块42，每个模块2通过标识关联在列表板块41上进行可选择的排列展示，预览板块42用于对每个模块2进行独立放大预览，组件52通过标识关联在模块2上，通过在子框架51上拖拽组件52的标识拼装成特定的模块2。

操作系统4设有搜索板块43和编辑板块44，搜索板块43与模块2的标识关联，搜索板块43用于搜索模块2，模块2拖拽至编辑板块44内，模块2在编辑板块44内可进行缩放，模块2在编辑板块44内对组件52与子框架51的布局进行编辑。在操作系统4中，通过搜索板块43选择模块5，或者拖拽等操作，将模块放置到合适的区域；操作系统作为用户对首页进行编辑的工具，将控制器针对使用的人分别两部分，使得用户在编辑时不需要任何相关的技术基础，操作系统没有代码层面的技术要求，用户可针对自己的喜好对首页进行自定义。

此时控制器将获取此模块的标识ID，并以JSON格式保存；当用户编辑完成时，此JSON格式的配置字符通过接口形式保存至数据库中。

显示端1内设有解析器13，解析器13用于对模块2和组件52进行解析，解析器13与控制系统3相关联，模块2在控制系统3内进行编辑后，拖入显示端1内，解析器13对模块2进行解析，再对模块2内的组件52进行解析，令模块2展示在主框架11内。

显示端的框架和模块以及组件都是通过后端开发人员在操作系统上配置形成，用户通过操作系统可以对首页进行自定义的编辑预览和布局，再进行保存，通过显示端内的解析器进行解析并进行展示。

大屏页面的底层组件可以选择后端开发人员独立开发编辑，或在Echarts开源数据可视化图表库中进行基础柱状图，曲线图，雷达图的封装，再次基础上结合总服务器数据封装多个业务定制组件，并且后端技术人员在图标库的基础上结合用户需求和总服务器数据，封装配置多个模块和组件，组件支持用户选择配置需要绘制的数据以及绘制的颜色，用户只关心需要展示什么模块以及模块需要展示哪些指标，并且可自定义图表颜色风格。

本实施例所表面的大屏页面是指作为统计意义出现的大屏页面，通常包含大量图表和统计数据，是一个轻量级配置系统，而轻量级配置系统，首页系统内容丰富而复杂，并非所有业务都会开发一个大屏，但是开发配置一个用图表展示统计数据的大屏页面，对于绝大部分系统具有实际意义；本系统在应用后，技术人员仅需开发基础组件和配置模块，非技术人员的用户对首页进行配置，从而达到即配即用，所见即所得的首页效果，大大提升项目交付效率。

虽然本说明书包含很多具体的实施细节，但是这些不应当被解释为对任何发明的范围或者对可以要求保护的内容的范围的限制，而是作为可以使特定发明的特定实施方式具体化的特征的说明。在独立的实施方式的语境中的本说明书中描述的特定特征还可以与单个实施方式组合地实施。相反地，在单个实施方式的语境中描述的各种特征还可以独立地在多个实施方式中实施，或者在任何合适的子组合中实施。此外，虽然以上可以将特征描述为组合作用并且甚至最初这样要求，但是来自要求的组合的一个或多个特征在一些情况下可以从该组合去掉，并且要求的组合可以转向子组合或者子组合的变形。

此外，虽然以特定顺序在附图中描述了操作，但是不应当理解为：为了实现期望的结果，要求这样的操作以示出的特定顺序或者以顺序次序而执行，或者所有图示的操作都被执行。在特定情况下，多任务处理和并行处理可以是有利的。上述实施方式中的各种模块和组件的封装不应当理解为在所有实施方式中要求这样的封装，并且应当理解程序组件和系统可以通常被一体化在单个软件产品中或者打包至多个软件产品中。

以上所述实施例仅仅是本发明的优选实施方式进行描述，并非对本发明的范围进行限定，基于本发明中的实施方式，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围，在不脱离本发明构思的前提下，本领域普通技术人员对本发明的技术方案作出的各种变形和改进，均应落入本发明的权利要求书确定的保护范围内。