一种组件显示方法及装置与流程

本发明属于云计算技术领域，尤其涉及一种组件显示方法及装置。

背景技术：

每个管理软件都有一个首页dashboard，首页的展示风格多种多样，大体上，就是把系统中比较重要的、统计性的、可图形化的内容展示出来。

vmware、openstack等管理软件，其首页设计比较简单：如openstack，其首页叫概述，并且只展示了其包含的物力资源基本信息，vmware首页稍多了些，但也只是简单介绍了系统功能和资源统计。

云平台包含非常多的内容，如云资源、云服务、云监控、openstack融合、用户管理等大模块，每个大模块下又有若干个子模块，这些包含的数据内容非常庞大，在首页中，一般固定展示几个模块的内容。

但是，上述技术方案存在以下不足：

1、首页展示内容不够灵活；

2、很难满足不同行业和不同客户的需求，为了满足不同行业和不同客户的需求，则需要进行定制化开发，耗费大量的人力物力。

因此，迫切需要提供一种组件显示方案来解决上述技术问题。

技术实现要素：

本发明提供一种组件显示方法及装置，以解决上述问题。

本发明实施例提供一种组件显示方法，包括以下步骤：通过组件容器加载待显示图表组件并对所述待显示图表组件进行封装；

对封装后的待显示图表组件进行排序并调用排序后的待显示图表组件进行显示。

本发明实施例还提供一种组件显示装置，包括处理器，适于实现各指令；存储设备，适于存储多条指令，所述指令适于由所述处理器加载并执行；

通过组件容器加载待显示图表组件并对所述待显示图表组件进行封装；

对封装后的待显示图表组件进行排序并调用排序后的待显示图表组件进行显示。

本发明实施例提供以下技术方案：通过组件容器加载待显示图表组件并对所述待显示图表组件进行封装；对封装后的待显示图表组件进行排序并调用排序后的待显示图表组件进行显示。

上述技术方案中，通过对待显示图表组件加载、封装、排序显示，实现了首页内容灵活展示，满足了用户的个性化需求，避免了定制化开发，节省了大量人力物力。

本发明实施例提供以下技术方案：预先从图表组件中选择所述待显示图表组件并对所述待显示图表组件的显示顺序进行设置。

上述技术方案中，通过对图表组件进行个性化选择，满足了用户的个性化需求，避免了定制化开发，节省了大量人力物力。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1所示为本发明实施例1的组件显示原理图；

图2所示为本发明实施例2的组件显示方法流程图；

图3所示为本发明实施例3的组件显示装置结构图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本发明采用多种界面技术实现，技术核心是bootstrap框架，采用组件封装方法，并且使用了动态div技术，加入自适应排序算法实现，实现了根据需要进行首页的动态展示。

原理如下：

首先，编写首页需要展示的图表组件，每个图表组件是不相关的，独立存在的，这便于组件扩展，因为系统在持续更新和扩展，随时都会有新的图表组件加入，将其独立编写，做成一个个图表组件，在使用时直接加载相应的图表组件即可；

其次，编写组件容器，这个组件容器用来加载图表组件，同时，组件容器中能够为每个图表组件单独创建一个组件空间；组件容器的作用就是通过组件空间加载所述图表组件并对所述图表组件进行封装；

其中，组件容器中需要有自适应功能，自适应需要给组件容器的每个组件空间加入自适应算法，其基本原理是当某个组件空间的元素被移除时，从下方取一个图表组件，根据其大小和最小空白展示的算法，加载到空白处，其基本要求就是首页上的空白的地方必须尽量少，尽量填满首页空间，根据图表组件的长宽和组件空间的大小进行计算；

再次，组件容器中能够进行排序，默认按照图表组件加载的次序排序，这个排序还可由自定义模块进行控制，可以控制每个图表组件的显示顺序，排序后，按照设定的顺序逐个加载图表组件，直至加载完成；其中，自定义模块用来控制首页哪些图表组件显示，控制图表组件的显示顺序等。

最后，调用排序后的图表组件进行显示。

本发明区别于传统的首页展示，一般的首页展示固定展示几个内容就可以了，但云平台中，首页可完全自主控制，并且可选择展示的内容非常丰富，可满足不同行业和不同需求的客户使用，不必为专门的需求进行定制化开发，节省了大量的人力物力，并且可随时增加新的图表组件来丰富首页的展示内容。

图1所示为本发明实施例1的组件显示原理图，包括图表组件(图表组件1、图表组件2、图表组件3、图表组件4)、组件容器、组件排序模块、组件自适应模块、自定义模块、主展示页面。

主要包括以下几个步骤：

1)图表组件：根据要求编写的一个个图形化的组件，可以展示各种各样的图表，如饼图、柱状图、线图、表格等，也有设计成图文混合的组件，每个组件是独立的，各自进行数据获取和图表生成，这样防止多个图表之间因为数据穿插造成展示失败，如果有数据穿插和交互的需求，需要做单独处理；

2)组件容器：用于加载图表组件，其内是一个个的独立的组件空间，一般写成空div的形式，其内根据id加载内容，每个独立的组件空间可以加载任何图表组件，并且这些独立的组件空间可以进行排序、移动等；

3)组件排序模块：即在组件容器中对其中的组件空间进行排序，排序默认根据图表组件的加载顺序进行，当自定义模块有了设定的顺序后，按照设定的顺序进行排序；

4)组件自适应模块：自适应就是根据现有页面空间的尺寸大小，将大小不一的图表组件内容进行拼接，形成一个整体进行显示；自适应算法的要求是最小空间，因为我们采用的是bootstrap架构，每行分成12列，那么，每列图表组件的宽度加起来需小于等于12，并且要尽量接近12；

5)自定义模块：自定义的功能就是控制首页展示的图表内容，可以设置哪些图表组件展示，哪些隐藏，可以控制图表组件的展示顺序，可以控制首页的背景等功能；

6)主界面展示：实现了上述功能后，最主要的就是将这些内容展示出来，主界面展示就提供了图表组件内容的展示。

本发明实施例中首页可展示的内容非常丰富，而且可持续扩展首页内容，只需要编写一个图标组件，然后插入到首页中即可完成首页的内容扩展，实现了首页的可持续化增加功能；并且，首页可根据需要进行展示控制，针对不同的场景展示不同的内容，如只需云资源的用户，可只展示云资源的内容，只需监控的用户，可只展示监控内容等；另外，首页的内容实现了自适应展示，减少了因为组件大小不一导致的大片空白，空白的减少使界面展示显得非常丰富。

图2所示为本发明实施例2的组件显示方法流程图，包括以下步骤：

步骤201：通过组件容器加载待显示图表组件并对所述待显示图表组件进行封装；

进一步地，所述通过组件容器加载待显示图表组件并对所述待显示图表组件进行封装之前，还包括：

预先从图表组件中选择所述待显示图表组件并对所述待显示图表组件的显示顺序进行设置。

进一步地，通过所述组件容器中的组件空间加载所述图表组件。

进一步地，所述图表组件包括饼图组件、柱状图组件、线图组件、表格组件。

步骤202：对封装后的待显示图表组件进行排序并调用排序后的待显示图表组件进行显示。

进一步地，依据显示界面尺寸，对所述待显示图表组件中的内容进行拼接显示。

进一步地，将所述待显示图表组件显示在设定的显示背景中。

本发明实施例实现了首页内容的可持续扩展，并且首页可自定义展示的功能，并且首页的各个组件可以根据空间要求进行自适应展示，极大方便了不同环境下的展示要求。另外，通过自适应排序，减少了因为组件大小不一导致的大片空白，空白的减少使界面展示显得非常丰富

图3所示为本发明实施例3的组件显示装置结构图，包括处理器，适于实现各指令；存储设备，适于存储多条指令，所述指令适于由所述处理器加载并执行；

通过组件容器加载待显示图表组件并对所述待显示图表组件进行封装；

对封装后的待显示图表组件进行排序并调用排序后的待显示图表组件进行显示。

进一步地，所述通过组件容器加载待显示图表组件并对所述待显示图表组件进行封装之前，还包括：

预先选择所述待显示图表组件并对所述待显示图表组件的显示顺序进行设置。

进一步地，通过所述组件容器中的组件空间加载所述图表组件。

进一步地，依据显示界面尺寸，对所述待显示图表组件中的内容进行拼接显示。

进一步地，将所述待显示图表组件显示在设定的显示背景中。

进一步地，所述图表组件包括饼图组件、柱状图组件、线图组件、表格组件。

本发明实施例提供以下技术方案：通过组件容器加载待显示图表组件并对所述待显示图表组件进行封装；对封装后的待显示图表组件进行排序并调用排序后的待显示图表组件进行显示。

上述技术方案中，通过对待显示图表组件加载、封装、排序显示，实现了首页内容灵活展示，满足了用户的个性化需求，避免了定制化开发，节省了大量人力物力。

本发明实施例提供以下技术方案：预先从图表组件中选择所述待显示图表组件并对所述待显示图表组件的显示顺序进行设置。

上述技术方案中，通过对图表组件进行个性化选择，满足了用户的个性化需求，避免了定制化开发，节省了大量人力物力。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。