一種基于網格布局的云盤可視化方法及系統與流程

本發明涉及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、或技術領域內所公知的任意其它形式的存儲介質中。

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