本發(fā)明涉及web信息前端領(lǐng)域，特別涉及一種基于網(wǎng)格布局的云盤可視化方法及系統(tǒng)。

背景技術(shù)：

隨著當(dāng)今信息通信技術(shù)的高速發(fā)展，信息數(shù)據(jù)量不斷的擴(kuò)大，信息數(shù)據(jù)復(fù)雜度不斷的增加，如何可視化的管理如此龐大、復(fù)雜的信息成為web系統(tǒng)面臨的一項重大任務(wù)。

目前可視化的管理為列表顯示的形式，即以列表視圖將原始信息以列表的形式顯示出來；傳統(tǒng)的列表視圖中列表垂直呈現(xiàn)多個連續(xù)的行元素。列表視圖重在文本內(nèi)容，因此通常只有一些小圖標(biāo)穿插在文本信息內(nèi)。且為了同一時間能在當(dāng)前屏幕中顯示更多的列表項內(nèi)容。當(dāng)用戶瀏覽列表視圖時，他們的注意力從上到下依次降低且視覺外觀上缺乏表現(xiàn)力。因此，如何有效提高用戶對系統(tǒng)平臺中云盤信息數(shù)據(jù)的了解，從而提升用戶的體驗，是本領(lǐng)域技術(shù)人員需要解決的技術(shù)問題。

技術(shù)實現(xiàn)要素：

本發(fā)明的目的是提供一種基于網(wǎng)格布局的云盤可視化方法及系統(tǒng)，實現(xiàn)云計算系統(tǒng)平臺的網(wǎng)格布局的云盤塊圖標(biāo)，從而大大提高了用戶交互性，減少了使用的復(fù)雜度。

為解決上述技術(shù)問題，本發(fā)明提供一種基于網(wǎng)格布局的云盤可視化方法，包括：

通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的數(shù)據(jù)集合；

根據(jù)所述數(shù)據(jù)集合，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜；其中，所述網(wǎng)絡(luò)云盤圖譜中云盤塊圖標(biāo)的大小根據(jù)所述登錄用戶對應(yīng)的客戶端瀏覽器的大小確定。

可選的，根據(jù)所述數(shù)據(jù)集合，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜，包括：

獲取所述登錄用戶對應(yīng)的客戶端瀏覽器的大??；

根據(jù)所述客戶端瀏覽器的大小，計算得到柵格單元的大小，并結(jié)合網(wǎng)格間隙的大小確定柵格單元中放置云盤塊圖標(biāo)的網(wǎng)格大?。?/p>

根據(jù)所述數(shù)據(jù)集合以及網(wǎng)格大小和網(wǎng)格間隙的大小，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜。

可選的，所述通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的數(shù)據(jù)集合，包括：

通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的Json格式的數(shù)據(jù)集合。

可選的，本方案還包括：

接收對云盤塊圖標(biāo)的交互操作數(shù)據(jù)；

調(diào)用與所述交互操作數(shù)據(jù)對應(yīng)的交互操作程序并執(zhí)行所述交互操作程序。

本發(fā)明還提供一種基于網(wǎng)格布局的云盤可視化系統(tǒng)，包括：

數(shù)據(jù)接收模塊，用于通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的數(shù)據(jù)集合；

布局繪制模塊，用于根據(jù)所述數(shù)據(jù)集合，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜；其中，所述網(wǎng)絡(luò)云盤圖譜中云盤塊圖標(biāo)的大小根據(jù)所述登錄用戶對應(yīng)的客戶端瀏覽器的大小確定。

可選的，所述布局繪制模塊，包括：

獲取單元，用于獲取所述登錄用戶對應(yīng)的客戶端瀏覽器的大??；

第一計算單元，用于根據(jù)所述客戶端瀏覽器的大小，計算得到柵格單元的大小，并結(jié)合網(wǎng)格間隙的大小確定柵格單元中放置云盤塊圖標(biāo)的網(wǎng)格大??；

布局繪制單元，用于根據(jù)所述數(shù)據(jù)集合以及網(wǎng)格大小和網(wǎng)格間隙的大小，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜。

可選的，所述數(shù)據(jù)接收模塊具體為通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的Json格式的數(shù)據(jù)集合的模塊。

可選的，本方案還包括：

輸入模塊，用于接收對云盤塊圖標(biāo)的交互操作數(shù)據(jù)；

交互操作模塊，用于調(diào)用與所述交互操作數(shù)據(jù)對應(yīng)的交互操作程序并執(zhí)行所述交互操作程序。

本發(fā)明所提供的一種基于網(wǎng)格布局的云盤可視化方法，包括：通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的數(shù)據(jù)集合；根據(jù)數(shù)據(jù)集合，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜；其中，所述網(wǎng)絡(luò)云盤圖譜中云盤塊圖標(biāo)的大小根據(jù)登錄用戶對應(yīng)的客戶端瀏覽器的大小確定；

可見，該方法實現(xiàn)云計算系統(tǒng)平臺的網(wǎng)格布局的云盤塊圖標(biāo)，即以網(wǎng)格視圖的形式直觀的反應(yīng)信息的各個屬性，且當(dāng)發(fā)生異常時，能夠很快的定位到相應(yīng)的設(shè)備；可有效提高用戶對系統(tǒng)平臺中云盤信息數(shù)據(jù)的了解，從而大大提高了用戶交互性，減少了使用的復(fù)雜度；本發(fā)明還提供了一種基于網(wǎng)格布局的云盤可視化系統(tǒng)，具有上述有益效果，在此不再贅述。

附圖說明

為了更清楚地說明本發(fā)明實施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的實施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)提供的附圖獲得其他的附圖。

圖1為本發(fā)明實施例所提供的基于網(wǎng)格布局的云盤可視化方法的流程圖；

圖2為本發(fā)明實施例所提供的基于網(wǎng)格布局的云盤可視化方法的示意圖；

圖3為本發(fā)明實施例所提供的基于網(wǎng)格布局的云盤可視化系統(tǒng)的結(jié)構(gòu)框圖。

具體實施方式

本發(fā)明的核心是提供一種基于網(wǎng)格布局的云盤可視化方法及系統(tǒng)，實現(xiàn)云計算系統(tǒng)平臺的網(wǎng)格布局的云盤塊圖標(biāo)，從而大大提高了用戶交互性，減少了使用的復(fù)雜度。

為使本發(fā)明實施例的目的、技術(shù)方案和優(yōu)點更加清楚，下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實施例是本發(fā)明一部分實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護(hù)的范圍。

網(wǎng)格視圖中用來做布局的網(wǎng)格線和其他視覺線索將其明顯區(qū)分出來。一個網(wǎng)格視圖由在垂直和水平方向上重復(fù)排列的元素項構(gòu)成。因此網(wǎng)格視圖更吸引用戶眼球；網(wǎng)格視圖有助于用戶區(qū)分單元項之間的視覺差異；即以網(wǎng)格視圖的形式直觀的反應(yīng)信息的各個屬性，且當(dāng)發(fā)生異常時，能夠很快的定位到相應(yīng)的設(shè)備。因此，本實施例中可以實現(xiàn)云計算系統(tǒng)平臺的網(wǎng)格布局的云盤圖譜，從而大大提高了用戶交互性，減少了使用的復(fù)雜度。為了便于實現(xiàn)該技術(shù)，可以采用html5JavaScript的設(shè)計方法。其中，JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。具體請參考圖1，圖1為本發(fā)明實施例所提供的基于網(wǎng)格布局的云盤可視化方法的流程圖；該方法可以包括：

S100、通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的數(shù)據(jù)集合；

其中，API(Application Programming Interface，應(yīng)用程序編程接口)是一些預(yù)先定義的函數(shù)，目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內(nèi)部工作機制的細(xì)節(jié)。

具體的，該步驟中云計算系統(tǒng)平臺租戶(即云計算系統(tǒng)平臺的使用用戶)成功登陸系統(tǒng)平臺后，可以從底層API接口獲得對應(yīng)的云盤關(guān)聯(lián)接口數(shù)據(jù)集合；這里的云盤關(guān)聯(lián)接口是與登錄用戶相對應(yīng)的，提供這樣的形式可以使得該方法適應(yīng)性更強。每個登錄用戶都可以通過該接口獲取與自身相關(guān)的數(shù)據(jù)集合，進(jìn)而生成的云盤塊圖標(biāo)為用戶需要的。

進(jìn)一步，由于Json格式的數(shù)據(jù)格式規(guī)范且易于識別。這里的數(shù)據(jù)集合的格式可以是Json格式的數(shù)據(jù)集合。從而增強系統(tǒng)的可靠性。

S110、根據(jù)所述數(shù)據(jù)集合，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜以實現(xiàn)云盤塊圖標(biāo)的動態(tài)展示；其中，所述網(wǎng)絡(luò)云盤圖譜中云盤塊圖標(biāo)的大小根據(jù)所述登錄用戶對應(yīng)的客戶端瀏覽器的大小確定。

具體的，該步驟在使用Html5的對頁面進(jìn)行柵格化的布局繪制，依據(jù)瀏覽器的和大小自動生成相應(yīng)的云盤塊圖標(biāo)。即根據(jù)返回的數(shù)據(jù)集合，依據(jù)動態(tài)網(wǎng)格布局繪制云盤的圖形化展示即生成云盤塊圖標(biāo)。其中的圖形元素(即云盤塊圖標(biāo))的寬度和高度依賴于系統(tǒng)客戶端瀏覽器的大小。

進(jìn)一步圖形元素(即云盤塊圖標(biāo))的分辨率也可以根據(jù)系統(tǒng)客戶端瀏覽器的分辨率進(jìn)行設(shè)定，以提高用戶觀看云盤塊圖標(biāo)的效果。

即該實施例通過底層Rest API接口獲得系統(tǒng)平臺的云盤參數(shù)數(shù)據(jù)源；然后進(jìn)行云盤圖形的柵格化排序，實現(xiàn)云盤塊圖標(biāo)的動態(tài)展示。

基于上述技術(shù)方案，本發(fā)明實施例提供的基于網(wǎng)格布局的云盤可視化方法，考慮數(shù)據(jù)的圖形化的特點，結(jié)合云計算系統(tǒng)平臺中的云盤數(shù)據(jù)，采用基于網(wǎng)格布局的特點進(jìn)行動態(tài)圖形繪制，可有效提高用戶對系統(tǒng)平臺中云盤信息數(shù)據(jù)的了解，從而提升用戶的體驗。

基于上述實施例，根據(jù)所述數(shù)據(jù)集合，利用Html5的對頁面進(jìn)行柵格化的布局繪制以實現(xiàn)云盤塊圖標(biāo)的動態(tài)可以包括：

獲取所述登錄用戶對應(yīng)的客戶端瀏覽器的大??；

根據(jù)所述客戶端瀏覽器的大小，計算得到柵格單元的大小，并結(jié)合網(wǎng)格間隙的大小確定柵格單元中放置云盤塊圖標(biāo)的網(wǎng)格大?。?/p>

根據(jù)所述數(shù)據(jù)集合以及網(wǎng)格大小和網(wǎng)格間隙的大小，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜。

例如，把頁面的寬度定為“w”的頁面分割成n個網(wǎng)格單元(即網(wǎng)格)“a”，每個單元與單元之間的間隙設(shè)為“i”，此時把“a+i”定義“A”即一個柵格單元的寬度。它們之間的關(guān)系如下：

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

由于a+i＝A，

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

其中，A為一個柵格單元的寬度，a為一個網(wǎng)格單元的寬度(即為某網(wǎng)盤塊圖標(biāo))，n正整數(shù)，i網(wǎng)格間隙之間的間隙，w為頁面或區(qū)塊的寬度。既可以利用類似方法計算它們的長度。并根據(jù)計算得到的長度和寬度最終得到柵格單元中放置云盤塊圖標(biāo)的網(wǎng)格大小。從而實現(xiàn)云盤塊圖標(biāo)的動態(tài)展示。

基于上述任意實施例，本實施例還可以包括：

接收對云盤塊圖標(biāo)的交互操作數(shù)據(jù)；

調(diào)用與所述交互操作數(shù)據(jù)對應(yīng)的交互操作程序并執(zhí)行所述交互操作程序。

具體的，本實施例還可以接收用戶對云盤塊圖標(biāo)的交互操作動作，例如生成的網(wǎng)格云盤塊圖標(biāo)進(jìn)行拖拽、更改瀏覽器大小系列交互操作。即該實施例需要添加動態(tài)事件與監(jiān)控，對于相應(yīng)的節(jié)點添加對應(yīng)的動態(tài)事件響應(yīng)方法，加入拖動事件、單擊事件等。這樣完成網(wǎng)格布局的云盤圖形化展示渲染的全部過程。

例如用戶在界面拖動某一云盤塊圖標(biāo)時，首先對該云盤塊圖標(biāo)進(jìn)行識別，并獲取用戶的拖動軌跡，將這些生成交互操作數(shù)據(jù)。其次根據(jù)交互操作數(shù)據(jù)可以確定該交互操作為拖動操作，且拖動對象為云盤塊圖標(biāo)。最后調(diào)用拖動操作對應(yīng)的拖動操作程序，將拖動對象在拖動軌跡的目的地址進(jìn)行顯示。

具體實現(xiàn)過程可以參考圖2。調(diào)用Rest API接口獲取數(shù)據(jù)集合，當(dāng)沒有獲取到數(shù)據(jù)集合時，可以重新調(diào)用Rest API接口。利用獲取的數(shù)據(jù)集合以及用戶執(zhí)行的網(wǎng)格云盤的事件監(jiān)聽過程后，最終生成網(wǎng)格云盤圖譜，實現(xiàn)云盤塊圖標(biāo)的動態(tài)展示。

基于上述技術(shù)方案，本發(fā)明實施例提供的基于網(wǎng)格布局的云盤可視化方法，該方法實現(xiàn)云計算系統(tǒng)平臺的網(wǎng)格布局的云盤塊圖標(biāo)，即以網(wǎng)格視圖的形式直觀的反應(yīng)信息的各個屬性，且當(dāng)發(fā)生異常時，能夠很快的定位到相應(yīng)的設(shè)備；可有效提高用戶對系統(tǒng)平臺中云盤信息數(shù)據(jù)的了解，從而大大提高了用戶交互性，減少了使用的復(fù)雜度。

下面對本發(fā)明實施例提供的基于網(wǎng)格布局的云盤可視化系統(tǒng)進(jìn)行介紹，下文描述的基于網(wǎng)格布局的云盤可視化系統(tǒng)與上文描述的基于網(wǎng)格布局的云盤可視化方法可相互對應(yīng)參照。

請參考圖3，圖3為本發(fā)明實施例所提供的基于網(wǎng)格布局的云盤可視化系統(tǒng)的結(jié)構(gòu)框圖；該系統(tǒng)可以包括：

數(shù)據(jù)接收模塊100，用于通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的數(shù)據(jù)集合；

布局繪制模塊200，用于根據(jù)所述數(shù)據(jù)集合，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜；其中，所述網(wǎng)絡(luò)云盤圖譜中云盤塊圖標(biāo)的大小根據(jù)所述登錄用戶對應(yīng)的客戶端瀏覽器的大小確定。

基于上述實施例，所述布局繪制模塊100包括：

獲取單元，用于獲取所述登錄用戶對應(yīng)的客戶端瀏覽器的大??；

第一計算單元，用于根據(jù)所述客戶端瀏覽器的大小，計算得到柵格單元的大小，并結(jié)合網(wǎng)格間隙的大小確定柵格單元中放置云盤塊圖標(biāo)的網(wǎng)格大??；

布局繪制單元，用于根據(jù)所述數(shù)據(jù)集合以及網(wǎng)格大小和網(wǎng)格間隙的大小，利用Html5的對頁面進(jìn)行柵格化的布局繪制生成網(wǎng)絡(luò)云盤圖譜。

基于上述任意實施例，所述數(shù)據(jù)接收模塊200具體為通過底層API接口獲取登錄用戶對應(yīng)的云盤關(guān)聯(lián)接口的Json格式的數(shù)據(jù)集合的模塊。

基于上述任意實施例，該系統(tǒng)還可以包括：

輸入模塊，用于接收對云盤塊圖標(biāo)的交互操作數(shù)據(jù)；

交互操作模塊，用于調(diào)用與所述交互操作數(shù)據(jù)對應(yīng)的交互操作程序并執(zhí)行所述交互操作程序。

說明書中各個實施例采用遞進(jìn)的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似部分互相參見即可。對于實施例公開的裝置而言，由于其與實施例公開的方法相對應(yīng)，所以描述的比較簡單，相關(guān)之處參見方法部分說明即可。

專業(yè)人員還可以進(jìn)一步意識到，結(jié)合本文中所公開的實施例描述的各示例的單元及算法步驟，能夠以電子硬件、計算機軟件或者二者的結(jié)合來實現(xiàn)，為了清楚地說明硬件和軟件的可互換性，在上述說明中已經(jīng)按照功能一般性地描述了各示例的組成及步驟。這些功能究竟以硬件還是軟件方式來執(zhí)行，取決于技術(shù)方案的特定應(yīng)用和設(shè)計約束條件。專業(yè)技術(shù)人員可以對每個特定的應(yīng)用來使用不同方法來實現(xiàn)所描述的功能，但是這種實現(xiàn)不應(yīng)認(rèn)為超出本發(fā)明的范圍。

結(jié)合本文中所公開的實施例描述的方法或算法的步驟可以直接用硬件、處理器執(zhí)行的軟件模塊，或者二者的結(jié)合來實施。軟件模塊可以置于隨機存儲器(RAM)、內(nèi)存、只讀存儲器(ROM)、電可編程ROM、電可擦除可編程ROM、寄存器、硬盤、可移動磁盤、CD-ROM、或技術(shù)領(lǐng)域內(nèi)所公知的任意其它形式的存儲介質(zhì)中。

以上對本發(fā)明所提供的基于網(wǎng)格布局的云盤可視化方法及系統(tǒng)進(jìn)行了詳細(xì)介紹。本文中應(yīng)用了具體個例對本發(fā)明的原理及實施方式進(jìn)行了闡述，以上實施例的說明只是用于幫助理解本發(fā)明的方法及其核心思想。應(yīng)當(dāng)指出，對于本技術(shù)領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明原理的前提下，還可以對本發(fā)明進(jìn)行若干改進(jìn)和修飾，這些改進(jìn)和修飾也落入本發(fā)明權(quán)利要求的保護(hù)范圍內(nèi)。