本發(fā)明涉及大屏顯示切換，尤其涉及一種多屏可視化交互切換方法、裝置及設(shè)備。

背景技術(shù)：

1、隨著大數(shù)據(jù)可視化、數(shù)字孿生、物聯(lián)網(wǎng)等技術(shù)的快速發(fā)展，大屏顯示技術(shù)也在快速的發(fā)展中，為展示各種不同方向的數(shù)據(jù)，通常會開發(fā)數(shù)個不同的大數(shù)據(jù)可視化系統(tǒng)。比如經(jīng)營、人才、財務(wù)、數(shù)字應(yīng)用、數(shù)字孿生或者具體的業(yè)務(wù)等系統(tǒng)，這些系統(tǒng)涉及到大量的數(shù)據(jù)接入、模型加載以及素材加載等，這就導(dǎo)致在系統(tǒng)之間切換的時候會需要大量的加載時間，特別是在需要對多位觀眾進(jìn)行講解的情況下，不利于流暢的講解。

2、目前，主要采用的大數(shù)據(jù)可視化系統(tǒng)切換方案包括：1、通過點(diǎn)擊標(biāo)簽跳轉(zhuǎn)網(wǎng)頁地址來達(dá)到切換大屏的目的，但是這種方案切換時加載慢，首次切換會出現(xiàn)白屏現(xiàn)象。2、把需要展示的系統(tǒng)依次在瀏覽器的不同標(biāo)簽頁提前打開，用切換標(biāo)簽的方式來達(dá)到切換系統(tǒng)的目的，但是這種方案操作麻煩，需提前準(zhǔn)備，并且需要退出全屏才能切換瀏覽器標(biāo)簽，體驗(yàn)不佳。

技術(shù)實(shí)現(xiàn)思路

1、本發(fā)明的主要目的在于提供一種多屏可視化交互切換方法、裝置及設(shè)備，旨在解決上述問題的至少之一。

2、為實(shí)現(xiàn)上述目的，本發(fā)明提供了一種多屏可視化交互切換方法，包括：

3、獲取多個可視化大屏的屏幕信息，并根據(jù)所述屏幕信息設(shè)置畫布；

4、基于iframe技術(shù)將多個所述可視化大屏以圓形布局的方式嵌入所述畫布中；

5、在所述圓形布局的圓心位置設(shè)置動態(tài)交互式導(dǎo)航大屏；

6、基于css動畫技術(shù)和所述動態(tài)交互式導(dǎo)航大屏進(jìn)行多個所述可視化大屏的訪問和切換。

7、在一些實(shí)施例中，所述獲取多個可視化大屏的屏幕信息，并根據(jù)所述屏幕信息設(shè)置畫布，包括：

8、獲取多個可視化大屏的屏幕信息；

9、基于所述屏幕信息確定多個所述可視化大屏的顯示尺寸和大屏數(shù)量；

10、根據(jù)所述顯示尺寸和所述大屏數(shù)量設(shè)置畫布；其中，所述畫布用于容納多個所述可視化大屏。

11、在一些實(shí)施例中，所述畫布的寬高大于所述可視化大屏的寬高乘以所述大屏數(shù)量的一半。

12、在一些實(shí)施例中，所述基于iframe技術(shù)將多個所述可視化大屏以圓形布局的方式嵌入所述畫布中，包括：

13、基于所述可視化大屏和所述畫布設(shè)置可視化大屏圓形布局的半徑；

14、基于所述半徑計(jì)算每個所述可視化大屏的坐標(biāo)；

15、根據(jù)所述坐標(biāo)將多個所述可視化大屏通過iframe嵌套分布在圓形布局的圓周上，以嵌入所述畫布中。

16、在一些實(shí)施例中，所述基于css動畫技術(shù)和所述動態(tài)交互式導(dǎo)航大屏進(jìn)行多個所述可視化大屏的訪問和切換，包括：

17、基于瀏覽器視口初始化顯示所述動態(tài)交互式導(dǎo)航大屏；

18、在所述動態(tài)交互式導(dǎo)航大屏上動態(tài)設(shè)置切換至每個所述可視化大屏的按鈕，并在每個所述按鈕上設(shè)置點(diǎn)擊事件；

19、在接收到點(diǎn)擊指令時，基于所述點(diǎn)擊指令和所述點(diǎn)擊事件確定待切換的目標(biāo)可視化大屏；

20、基于css動畫技術(shù)將所述瀏覽器視口切換至所述目標(biāo)可視化大屏。

21、在一些實(shí)施例中，所述基于css動畫技術(shù)將所述瀏覽器視口切換至所述目標(biāo)可視化大屏，包括：

22、將所述動態(tài)交互式導(dǎo)航大屏和所述目標(biāo)可視化大屏等比縮小，以提示屏幕切換準(zhǔn)備開始；

23、設(shè)置所述畫布的平移數(shù)值；

24、基于css動畫技術(shù)和所述平移數(shù)值控制所述瀏覽器視口平滑移動，直至移動到所述目標(biāo)可視化大屏的坐標(biāo)；

25、將所述動態(tài)交互式導(dǎo)航大屏和所述目標(biāo)可視化大屏等比放大，以提示屏幕切換結(jié)束。

26、在一些實(shí)施例中，所述方法還包括：

27、根據(jù)多個所述可視化大屏的iframe.onload事件確定資源的加載進(jìn)度；

28、在所述動態(tài)交互式導(dǎo)航大屏的每個的按鈕上顯示所述可視化大屏對應(yīng)的所述加載進(jìn)度，以可視化每個所述可視化大屏的資源加載進(jìn)度；

29、獲取多個所述可視化大屏的關(guān)聯(lián)關(guān)系；

30、基于所述關(guān)聯(lián)關(guān)系在所述動態(tài)交互式導(dǎo)航大屏上顯示所述可視化大屏之間的聯(lián)系。

31、在一些實(shí)施例中，所述方法還包括：

32、基于多個所述可視化大屏的屏幕信息確定顯示分辨率；

33、判斷所述顯示分辨率與當(dāng)前顯示設(shè)備的物理分辨率是否一致；

34、若不一致，則根據(jù)所述當(dāng)前顯示設(shè)備的物理分辨率計(jì)算縮放比例；

35、根據(jù)所述縮放比例縮放所述可視化大屏并將縮放后的可視化大屏居中顯示。

36、此外，為實(shí)現(xiàn)上述目的，本發(fā)明還提出一種多屏可視化交互切換裝置，包括：

37、畫布設(shè)置模塊，用于獲取多個可視化大屏的屏幕信息，并根據(jù)所述屏幕信息設(shè)置畫布；

38、大屏布局模塊，用于基于iframe技術(shù)將多個所述可視化大屏以圓形布局的方式嵌入所述畫布中；

39、導(dǎo)航設(shè)置模塊，用于在所述圓形布局的圓心位置設(shè)置動態(tài)交互式導(dǎo)航大屏；

40、大屏切換模塊，用于基于css動畫技術(shù)和所述動態(tài)交互式導(dǎo)航大屏進(jìn)行多個所述可視化大屏的訪問和切換。

41、此外，為實(shí)現(xiàn)上述目的，本發(fā)明還提出一種電子設(shè)備，所述電子設(shè)備包括：存儲器、處理器及存儲在所述存儲器上并可在所述處理器上運(yùn)行的多屏可視化交互切換程序，所述多屏可視化交互切換程序配置為實(shí)現(xiàn)如上文所述的多屏可視化交互切換方法。

42、本發(fā)明提供一種多屏可視化交互切換方法，包括：獲取多個可視化大屏的屏幕信息，并根據(jù)所述屏幕信息設(shè)置畫布；基于iframe技術(shù)將多個所述可視化大屏以圓形布局的方式嵌入所述畫布中；在所述圓形布局的圓心位置設(shè)置動態(tài)交互式導(dǎo)航大屏；基于css動畫技術(shù)和所述動態(tài)交互式導(dǎo)航大屏進(jìn)行多個所述可視化大屏的訪問和切換。本發(fā)明中，應(yīng)用iframe預(yù)加載、css動畫等技術(shù)，將多個可視化大屏通過iframe嵌套以圓形布局在畫布上，再將圓心的動態(tài)交互式導(dǎo)航大屏縮放移動到瀏覽器視口上。通過移動、縮放大屏集合頁面的方式，瀏覽器視口在多個可視化大屏之間切換。本發(fā)明所述方法切換流暢，不會出現(xiàn)白屏的現(xiàn)象，對已設(shè)置完成的大屏無需修改，實(shí)現(xiàn)簡單且適用范圍廣，對任意顯示分辨率的大屏均可兼容。

技術(shù)特征：

1.一種多屏可視化交互切換方法，其特征在于，包括：

2.如權(quán)利要求1所述的方法，其特征在于，所述獲取多個可視化大屏的屏幕信息，并根據(jù)所述屏幕信息設(shè)置畫布，包括：

3.如權(quán)利要求2所述的方法，其特征在于，所述畫布的寬高大于所述可視化大屏的寬高乘以所述大屏數(shù)量的一半。

4.如權(quán)利要求1所述的方法，其特征在于，所述基于iframe技術(shù)將多個所述可視化大屏以圓形布局的方式嵌入所述畫布中，包括：

5.如權(quán)利要求1所述的方法，其特征在于，所述基于css動畫技術(shù)和所述動態(tài)交互式導(dǎo)航大屏進(jìn)行多個所述可視化大屏的訪問和切換，包括：

6.如權(quán)利要求5所述的方法，其特征在于，所述基于css動畫技術(shù)將所述瀏覽器視口切換至所述目標(biāo)可視化大屏，包括：

7.如權(quán)利要求1所述的方法，其特征在于，所述方法還包括：

8.如權(quán)利要求1所述的方法，其特征在于，所述方法還包括：

9.一種多屏可視化交互切換裝置，其特征在于，包括：

10.一種電子設(shè)備，其特征在于，所述電子設(shè)備包括：存儲器、處理器及存儲在所述存儲器上并可在所述處理器上運(yùn)行的多屏可視化交互切換程序，所述多屏可視化交互切換程序配置為實(shí)現(xiàn)如權(quán)利要求1至8中任一項(xiàng)所述的多屏可視化交互切換方法。

技術(shù)總結(jié)
本發(fā)明涉及大屏顯示技術(shù)領(lǐng)域，公開了一種多屏可視化交互切換方法、裝置及設(shè)備。該方法包括獲取多個可視化大屏的屏幕信息，并根據(jù)屏幕信息設(shè)置畫布；基于iframe技術(shù)將多個可視化大屏以圓形布局的方式嵌入畫布中；在圓形布局的圓心位置設(shè)置導(dǎo)航大屏；基于CSS動畫技術(shù)和導(dǎo)航大屏進(jìn)行多個可視化大屏的訪問和切換。本發(fā)明中，應(yīng)用iframe預(yù)加載、CSS動畫等技術(shù)將多個可視化大屏通過iframe嵌套以圓形布局在畫布上，通過移動、縮放大屏集合頁面的方式，實(shí)現(xiàn)瀏覽器視口在多個可視化大屏之間切換，切換流暢，不會出現(xiàn)白屏的現(xiàn)象，對已設(shè)置完成的大屏無需修改，實(shí)現(xiàn)簡單，適用范圍廣，對任意顯示分辨率的大屏均可兼容。

技術(shù)研發(fā)人員：呂程
受保護(hù)的技術(shù)使用者：南斗六星系統(tǒng)集成有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/12/26