一种基于网格布局的云盘可视化方法及系统与流程

本发明涉及web信息前端领域，特别涉及一种基于网格布局的云盘可视化方法及系统。

背景技术：

随着当今信息通信技术的高速发展，信息数据量不断的扩大，信息数据复杂度不断的增加，如何可视化的管理如此庞大、复杂的信息成为web系统面临的一项重大任务。

目前可视化的管理为列表显示的形式，即以列表视图将原始信息以列表的形式显示出来；传统的列表视图中列表垂直呈现多个连续的行元素。列表视图重在文本内容，因此通常只有一些小图标穿插在文本信息内。且为了同一时间能在当前屏幕中显示更多的列表项内容。当用户浏览列表视图时，他们的注意力从上到下依次降低且视觉外观上缺乏表现力。因此，如何有效提高用户对系统平台中云盘信息数据的了解，从而提升用户的体验，是本领域技术人员需要解决的技术问题。

技术实现要素：

本发明的目的是提供一种基于网格布局的云盘可视化方法及系统，实现云计算系统平台的网格布局的云盘块图标，从而大大提高了用户交互性，减少了使用的复杂度。

为解决上述技术问题，本发明提供一种基于网格布局的云盘可视化方法，包括：

通过底层API接口获取登录用户对应的云盘关联接口的数据集合；

根据所述数据集合，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱；其中，所述网络云盘图谱中云盘块图标的大小根据所述登录用户对应的客户端浏览器的大小确定。

可选的，根据所述数据集合，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱，包括：

获取所述登录用户对应的客户端浏览器的大小；

根据所述客户端浏览器的大小，计算得到栅格单元的大小，并结合网格间隙的大小确定栅格单元中放置云盘块图标的网格大小；

根据所述数据集合以及网格大小和网格间隙的大小，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱。

可选的，所述通过底层API接口获取登录用户对应的云盘关联接口的数据集合，包括：

通过底层API接口获取登录用户对应的云盘关联接口的Json格式的数据集合。

可选的，本方案还包括：

接收对云盘块图标的交互操作数据；

调用与所述交互操作数据对应的交互操作程序并执行所述交互操作程序。

本发明还提供一种基于网格布局的云盘可视化系统，包括：

数据接收模块，用于通过底层API接口获取登录用户对应的云盘关联接口的数据集合；

布局绘制模块，用于根据所述数据集合，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱；其中，所述网络云盘图谱中云盘块图标的大小根据所述登录用户对应的客户端浏览器的大小确定。

可选的，所述布局绘制模块，包括：

获取单元，用于获取所述登录用户对应的客户端浏览器的大小；

第一计算单元，用于根据所述客户端浏览器的大小，计算得到栅格单元的大小，并结合网格间隙的大小确定栅格单元中放置云盘块图标的网格大小；

布局绘制单元，用于根据所述数据集合以及网格大小和网格间隙的大小，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱。

可选的，所述数据接收模块具体为通过底层API接口获取登录用户对应的云盘关联接口的Json格式的数据集合的模块。

可选的，本方案还包括：

输入模块，用于接收对云盘块图标的交互操作数据；

交互操作模块，用于调用与所述交互操作数据对应的交互操作程序并执行所述交互操作程序。

本发明所提供的一种基于网格布局的云盘可视化方法，包括：通过底层API接口获取登录用户对应的云盘关联接口的数据集合；根据数据集合，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱；其中，所述网络云盘图谱中云盘块图标的大小根据登录用户对应的客户端浏览器的大小确定；

可见，该方法实现云计算系统平台的网格布局的云盘块图标，即以网格视图的形式直观的反应信息的各个属性，且当发生异常时，能够很快的定位到相应的设备；可有效提高用户对系统平台中云盘信息数据的了解，从而大大提高了用户交互性，减少了使用的复杂度；本发明还提供了一种基于网格布局的云盘可视化系统，具有上述有益效果，在此不再赘述。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本发明实施例所提供的基于网格布局的云盘可视化方法的流程图；

图2为本发明实施例所提供的基于网格布局的云盘可视化方法的示意图；

图3为本发明实施例所提供的基于网格布局的云盘可视化系统的结构框图。

具体实施方式

本发明的核心是提供一种基于网格布局的云盘可视化方法及系统，实现云计算系统平台的网格布局的云盘块图标，从而大大提高了用户交互性，减少了使用的复杂度。

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

网格视图中用来做布局的网格线和其他视觉线索将其明显区分出来。一个网格视图由在垂直和水平方向上重复排列的元素项构成。因此网格视图更吸引用户眼球；网格视图有助于用户区分单元项之间的视觉差异；即以网格视图的形式直观的反应信息的各个属性，且当发生异常时，能够很快的定位到相应的设备。因此，本实施例中可以实现云计算系统平台的网格布局的云盘图谱，从而大大提高了用户交互性，减少了使用的复杂度。为了便于实现该技术，可以采用html5JavaScript的设计方法。其中，JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。具体请参考图1，图1为本发明实施例所提供的基于网格布局的云盘可视化方法的流程图；该方法可以包括：

S100、通过底层API接口获取登录用户对应的云盘关联接口的数据集合；

其中，API(Application Programming Interface，应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

具体的，该步骤中云计算系统平台租户(即云计算系统平台的使用用户)成功登陆系统平台后，可以从底层API接口获得对应的云盘关联接口数据集合；这里的云盘关联接口是与登录用户相对应的，提供这样的形式可以使得该方法适应性更强。每个登录用户都可以通过该接口获取与自身相关的数据集合，进而生成的云盘块图标为用户需要的。

进一步，由于Json格式的数据格式规范且易于识别。这里的数据集合的格式可以是Json格式的数据集合。从而增强系统的可靠性。

S110、根据所述数据集合，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱以实现云盘块图标的动态展示；其中，所述网络云盘图谱中云盘块图标的大小根据所述登录用户对应的客户端浏览器的大小确定。

具体的，该步骤在使用Html5的对页面进行栅格化的布局绘制，依据浏览器的和大小自动生成相应的云盘块图标。即根据返回的数据集合，依据动态网格布局绘制云盘的图形化展示即生成云盘块图标。其中的图形元素(即云盘块图标)的宽度和高度依赖于系统客户端浏览器的大小。

进一步图形元素(即云盘块图标)的分辨率也可以根据系统客户端浏览器的分辨率进行设定，以提高用户观看云盘块图标的效果。

即该实施例通过底层Rest API接口获得系统平台的云盘参数数据源；然后进行云盘图形的栅格化排序，实现云盘块图标的动态展示。

基于上述技术方案，本发明实施例提供的基于网格布局的云盘可视化方法，考虑数据的图形化的特点，结合云计算系统平台中的云盘数据，采用基于网格布局的特点进行动态图形绘制，可有效提高用户对系统平台中云盘信息数据的了解，从而提升用户的体验。

基于上述实施例，根据所述数据集合，利用Html5的对页面进行栅格化的布局绘制以实现云盘块图标的动态可以包括：

获取所述登录用户对应的客户端浏览器的大小；

根据所述客户端浏览器的大小，计算得到栅格单元的大小，并结合网格间隙的大小确定栅格单元中放置云盘块图标的网格大小；

根据所述数据集合以及网格大小和网格间隙的大小，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱。

例如，把页面的宽度定为“w”的页面分割成n个网格单元(即网格)“a”，每个单元与单元之间的间隙设为“i”，此时把“a+i”定义“A”即一个栅格单元的宽度。它们之间的关系如下：

w＝(a×n)+(n-1)×i

由于a+i＝A，

可得：(A×n)-i＝w

其中，A为一个栅格单元的宽度，a为一个网格单元的宽度(即为某网盘块图标)，n正整数，i网格间隙之间的间隙，w为页面或区块的宽度。既可以利用类似方法计算它们的长度。并根据计算得到的长度和宽度最终得到栅格单元中放置云盘块图标的网格大小。从而实现云盘块图标的动态展示。

基于上述任意实施例，本实施例还可以包括：

接收对云盘块图标的交互操作数据；

调用与所述交互操作数据对应的交互操作程序并执行所述交互操作程序。

具体的，本实施例还可以接收用户对云盘块图标的交互操作动作，例如生成的网格云盘块图标进行拖拽、更改浏览器大小系列交互操作。即该实施例需要添加动态事件与监控，对于相应的节点添加对应的动态事件响应方法，加入拖动事件、单击事件等。这样完成网格布局的云盘图形化展示渲染的全部过程。

例如用户在界面拖动某一云盘块图标时，首先对该云盘块图标进行识别，并获取用户的拖动轨迹，将这些生成交互操作数据。其次根据交互操作数据可以确定该交互操作为拖动操作，且拖动对象为云盘块图标。最后调用拖动操作对应的拖动操作程序，将拖动对象在拖动轨迹的目的地址进行显示。

具体实现过程可以参考图2。调用Rest API接口获取数据集合，当没有获取到数据集合时，可以重新调用Rest API接口。利用获取的数据集合以及用户执行的网格云盘的事件监听过程后，最终生成网格云盘图谱，实现云盘块图标的动态展示。

基于上述技术方案，本发明实施例提供的基于网格布局的云盘可视化方法，该方法实现云计算系统平台的网格布局的云盘块图标，即以网格视图的形式直观的反应信息的各个属性，且当发生异常时，能够很快的定位到相应的设备；可有效提高用户对系统平台中云盘信息数据的了解，从而大大提高了用户交互性，减少了使用的复杂度。

下面对本发明实施例提供的基于网格布局的云盘可视化系统进行介绍，下文描述的基于网格布局的云盘可视化系统与上文描述的基于网格布局的云盘可视化方法可相互对应参照。

请参考图3，图3为本发明实施例所提供的基于网格布局的云盘可视化系统的结构框图；该系统可以包括：

数据接收模块100，用于通过底层API接口获取登录用户对应的云盘关联接口的数据集合；

布局绘制模块200，用于根据所述数据集合，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱；其中，所述网络云盘图谱中云盘块图标的大小根据所述登录用户对应的客户端浏览器的大小确定。

基于上述实施例，所述布局绘制模块100包括：

获取单元，用于获取所述登录用户对应的客户端浏览器的大小；

第一计算单元，用于根据所述客户端浏览器的大小，计算得到栅格单元的大小，并结合网格间隙的大小确定栅格单元中放置云盘块图标的网格大小；

布局绘制单元，用于根据所述数据集合以及网格大小和网格间隙的大小，利用Html5的对页面进行栅格化的布局绘制生成网络云盘图谱。

基于上述任意实施例，所述数据接收模块200具体为通过底层API接口获取登录用户对应的云盘关联接口的Json格式的数据集合的模块。

基于上述任意实施例，该系统还可以包括：

输入模块，用于接收对云盘块图标的交互操作数据；

交互操作模块，用于调用与所述交互操作数据对应的交互操作程序并执行所述交互操作程序。

说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上对本发明所提供的基于网格布局的云盘可视化方法及系统进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。