[發(fā)明專(zhuān)利]一種自定義可視化布局設(shè)計(jì)的方法

在審

• 申請(qǐng)?zhí)枺?/td>: 202010937572.8
• 申請(qǐng)日: 2020-09-09
• 公開(kāi)（公告）號(hào): CN112130943A
• 公開(kāi)（公告）日: 2020-12-25
• 發(fā)明（設(shè)計(jì)）人: 劉建
• 申請(qǐng)（專(zhuān)利權(quán)）人: 中盈優(yōu)創(chuàng)資訊科技有限公司
• 主分類(lèi)號(hào): G06F9/451
• 分類(lèi)號(hào): G06F9/451;G06F16/957
• 代理公司: 上海嘉藍(lán)專(zhuān)利代理事務(wù)所(普通合伙) 31407
• 代理人: 金波

本發(fā)明公開(kāi)一種自定義可視化布局設(shè)計(jì)的方法，該方法包括：布局設(shè)置界面初始化加載；選擇好需要顯示的組件及初始化的網(wǎng)格屬性后，按屬性值和選擇的組件按順序顯示在網(wǎng)格中，此時(shí)編排顯示組件的二次設(shè)置，上述編排隨時(shí)改變配置數(shù)據(jù)，最終用戶(hù)保存好設(shè)置數(shù)據(jù)；在對(duì)布局組件的二次設(shè)置結(jié)束后，對(duì)每個(gè)組件的功能進(jìn)行設(shè)置；無(wú)需預(yù)覽，編排即所見(jiàn)，保存可視化組件布局?jǐn)?shù)據(jù)，即完成一份用戶(hù)自定義的可視化頁(yè)面的設(shè)計(jì)；最終用戶(hù)登錄系統(tǒng)顯示的可視化頁(yè)面根據(jù)登錄用戶(hù)的鑒權(quán)信息顯示的即為該用戶(hù)之前設(shè)置的組件布局頁(yè)面。該方法對(duì)于根據(jù)業(yè)務(wù)數(shù)據(jù)具備展現(xiàn)能力的圖表，在布局中可以靈活調(diào)整寬高、位置、操作等，并最終實(shí)現(xiàn)一個(gè)完整的可視化頁(yè)面。

技術(shù)領(lǐng)域

本發(fā)明涉及IT可視化領(lǐng)域，尤其是一種自定義可視化布局設(shè)計(jì)的方法，主要應(yīng)用于IT領(lǐng)域中的可視化展現(xiàn)的布局設(shè)計(jì)配置功能，服務(wù)于應(yīng)用中實(shí)際展現(xiàn)的可視化圖表。

背景技術(shù)

當(dāng)下IT系統(tǒng)中，可視化圖表的展現(xiàn)形式越來(lái)越復(fù)雜，而每一個(gè)圖表的開(kāi)發(fā)基本是以組件的形式進(jìn)行開(kāi)發(fā)，從UI設(shè)計(jì)到生成完整頁(yè)面渲染的整體可視化視圖；根據(jù)用戶(hù)需求經(jīng)常會(huì)反復(fù)對(duì)視圖進(jìn)行修改，甚至有的系統(tǒng)需求會(huì)將不同的視圖組件進(jìn)行編排和組合形成用戶(hù)個(gè)性化的視圖。傳統(tǒng)可視化的頁(yè)面中缺乏靈活的調(diào)整以及對(duì)視圖的組合編配能力，而開(kāi)發(fā)中除了要對(duì)視圖組件進(jìn)行打磨外，仍需要對(duì)整體視圖外部容器的布局進(jìn)行調(diào)整，增加了整體視圖網(wǎng)格和業(yè)務(wù)組件的耦合，導(dǎo)致每一個(gè)業(yè)務(wù)視圖組件無(wú)法合理抽離復(fù)用，而可支持用戶(hù)的編排更無(wú)從談起。

目前傳統(tǒng)可視化布局存在以下五個(gè)問(wèn)題：

1.可視化視圖無(wú)法按組件形式進(jìn)行抽象封裝，所有組件和最終展現(xiàn)的全局網(wǎng)格緊耦合，只能滿(mǎn)足定制的場(chǎng)景，在進(jìn)行修改時(shí)，需要抽出精力調(diào)整布局，并需要承擔(dān)由此給視圖組件帶來(lái)的修改工作量。

2.無(wú)組件配置功能或數(shù)據(jù)和視圖布局配置分離，無(wú)法很好的達(dá)到所見(jiàn)即所得的效果，反復(fù)的配置預(yù)覽無(wú)法很順暢地進(jìn)行配置，進(jìn)而增加了工作量；在可以支持視圖組件的前提下，仍舊無(wú)法合理編配每一個(gè)視圖的大小寬高、位置、操作等信息，不能滿(mǎn)足用戶(hù)視圖編排的需求。

3.整體布局方法給在網(wǎng)格中的所有組件沒(méi)有約定屬性，不同組件規(guī)范不統(tǒng)一，不利于后期組件維護(hù)和復(fù)用。

4.對(duì)瀏覽器的自適應(yīng)和展現(xiàn)形式不友好，由于可視化的頁(yè)面對(duì)數(shù)據(jù)、節(jié)點(diǎn)渲染操作較頻繁，導(dǎo)致整體渲染慢，瀏覽器縮放整體視圖布局容易變形。

5.沒(méi)有提供一些公共的對(duì)視圖組件的操作，針對(duì)通用場(chǎng)景提供通用的視圖組件。

發(fā)明內(nèi)容

為克服目前傳統(tǒng)可視化布局存在的上述問(wèn)題，本發(fā)明提供一種自定義可視化布局設(shè)計(jì)的方法。

為實(shí)現(xiàn)上述目的，本發(fā)明采用下述技術(shù)方案：

在本發(fā)明一實(shí)施例中，提出了一種自定義可視化布局設(shè)計(jì)的方法，該方法包括：

布局設(shè)置界面初始化加載，加載可供選擇的業(yè)務(wù)模塊中的組件及對(duì)應(yīng)初始化布局網(wǎng)格的設(shè)置；

選擇好需要顯示的組件及初始化的網(wǎng)格屬性后，按屬性值和選擇的組件按順序顯示在網(wǎng)格中，此時(shí)編排顯示組件的二次設(shè)置，上述編排隨時(shí)改變配置數(shù)據(jù)，最終用戶(hù)保存好設(shè)置數(shù)據(jù)；

在對(duì)布局組件的二次設(shè)置結(jié)束后，對(duì)每個(gè)組件的功能進(jìn)行設(shè)置；

無(wú)需預(yù)覽，編排即所見(jiàn)，保存可視化組件布局?jǐn)?shù)據(jù)，即完成一份用戶(hù)自定義的可視化頁(yè)面的設(shè)計(jì)；

最終用戶(hù)登錄系統(tǒng)顯示的可視化頁(yè)面根據(jù)登錄用戶(hù)的鑒權(quán)信息顯示的即為該用戶(hù)之前設(shè)置的組件布局頁(yè)面。

進(jìn)一步地，初始化布局網(wǎng)格的設(shè)置中包括全屏的網(wǎng)格寬度、每個(gè)網(wǎng)格的高度、具體每個(gè)拖拽組件之間間隔和主題顏色。

更進(jìn)一步地，全屏的網(wǎng)格寬度為屏幕的顯示像素，默認(rèn)分為24等分；所述每個(gè)網(wǎng)格的高度，默認(rèn)20px；所述具體每個(gè)拖拽組件之間間隔，默認(rèn)30px。