【技術實現步驟摘要】
本專利技術涉及智慧社區，尤其涉及一種自定義可視化大屏的方法、裝置及可讀存儲介質。
技術介紹
1、隨著城鎮化水平的不斷提高，作為我國基層治理基本網格單元的社區，需要融入智慧化技術和手段，才能應對日益多樣化的公共管理和服務需求，促進基層治理現代化。而在智慧社區中，可視化大屏起到了連接居民、社區管理的關鍵性作用。
2、目前的自定義可視化大屏一般使用react.js、vue.js等常見前端框架，以組件化開發的方式進行開發，開發者結合echarts等圖表庫將不同模塊的數據以直觀的方式呈現在大屏上。主要有以下幾種方式，一是：用戶填寫樣式表等配置信息導入大屏頁面，生成代碼后進行渲染，最終生成自定義大屏；二是：開發者編寫自定義大屏代碼擴展原有大屏組件，實現生成自定義大屏。
3、然而，現有的自定義可視化大屏的方法雖然能夠根據用戶需求獲取數據源、提供自定義圖表，但是無法自定義模塊布局，在大屏整體排版設計上用戶參與度較低，整體缺乏靈活性。
技術實現思路
1、本專利技術所要解決的技術問題是針對現有技術的上述不足，提供一種自定義可視化大屏的方法、裝置及可讀存儲介質，以至少解決現有的自定義可視化大屏的方法無法自定義模塊布局，在大屏整體排版設計上用戶參與度較低，整體缺乏靈活性的問題。
2、第一方面，本專利技術提供一種自定義可視化大屏的方法，應用于可視化大屏，所述方法包括：
3、對可視化大屏進行劃分，設置布局塊和內容組件；
4、根據用戶基于可視化大屏的設
5、響應于用戶對所述布局塊列表中布局塊的選擇和拖拽操作，將相應的布局塊在所述設計頁面中進行自定義展示；
6、接收用戶針對所述設計頁面中每個布局塊的關聯操作，將每個所述布局塊與相應的內容組件相關聯，并在對應的布局塊中填充展示相應內容組件的組件效果圖；
7、根據自定義好的大屏數據信息加載數據并進行展示。
8、進一步地，所述設置布局塊和內容組件，具體包括：
9、根據用戶輸入的布局塊信息設置布局塊，所述布局塊信息包括布局塊的名稱、寬度、高度和布局塊標識；
10、根據用戶輸入的內容組件的可配置信息設置內容組件，所述可配置信息包括組件名稱、所屬布局塊、組件效果圖、組件簡介和組件路徑。
11、進一步地，所述根據用戶基于可視化大屏的設計頁面觸發的第一操作，彈出布局塊列表，具體包括：
12、接收用戶基于設計頁面中預設對象觸發的第一操作；
13、根據所述第一操作彈出所述布局塊列表，其中，所述布局塊列表中的每個布局塊由vue-grid-layout生成。
14、進一步地，所述響應于用戶對所述布局塊列表中布局塊的選擇和拖拽操作，將相應的布局塊在所述設計頁面中進行自定義展示，具體包括：
15、響應于用戶在所述布局塊列表中選中需要的布局塊后拖拽至所述設計頁面的拖拽操作，根據所述拖拽操作的當前位置在所述設計頁面上顯示透明的占位符以指示布局塊即將放置的位置，以及根據所述拖拽操作的目標位置在所述設計頁面的相應位置展示所述布局塊；
16、其中，在所述拖拽操作的過程中，隱藏所述布局塊列表所在的彈窗。
17、進一步地，所述方法還包括：
18、響應于用戶對所述設計頁面中所述布局塊的位置和/或大小的調整操作，根據所述調整操作更新所述布局塊在所述設計頁面中的位置和/或大小，并將變更后的關鍵屬性保存至對應的變量中，其中，所述關鍵屬性包括所述布局塊的寬度、高度、距左邊的距離、距頂部的距離。
19、進一步地，所述接收用戶針對所述設計頁面中每個布局塊的關聯操作，將每個所述布局塊與相應的內容組件相關聯，并在對應的布局塊中填充展示相應內容組件的組件效果圖之后，所述方法還包括：
20、根據用戶的身份標識保存自定義好的大屏數據信息。
21、進一步地，所述根據自定義好的大屏數據信息加載數據并進行展示，具體包括：
22、根據自定義好的大屏數據信息通過懶加載方式加載數據并在相應的位置進行展示。
23、第二方面，本專利技術提供一種自定義可視化大屏的裝置，應用于可視化大屏，所述裝置包括：
24、劃分及設置模塊，用于對可視化大屏進行劃分，設置布局塊和內容組件；
25、布局塊列表顯示模塊，與所述劃分及設置模塊連接，用于根據用戶基于可視化大屏的設計頁面觸發的第一操作，彈出布局塊列表；
26、選擇拖拽模塊，與所述布局塊列表顯示模塊連接，用于響應于用戶對所述布局塊列表中布局塊的選擇和拖拽操作，將相應的布局塊在所述設計頁面中進行自定義展示；
27、布局內容關聯模塊，與所述選擇拖拽模塊連接，用于接收用戶針對所述設計頁面中每個布局塊的關聯操作，將每個所述布局塊與相應的內容組件相關聯，并在對應的布局塊中填充展示相應內容組件的組件效果圖；
28、自定義展示模塊，與所述布局內容關聯模塊連接，用于根據自定義好的大屏數據信息加載數據并進行展示。
29、第三方面，本專利技術提供一種自定義可視化大屏的裝置，包括存儲器和處理器，所述存儲器中存儲有計算機程序，所述處理器被設置為運行所述計算機程序以實現上述第一方面所述的自定義可視化大屏的方法。
30、第四方面，本專利技術提供一種計算機可讀存儲介質，所述計算機可讀存儲介質上存儲有計算機程序，所述計算機程序被處理器執行時實現上述第一方面所述的自定義可視化大屏的方法。
31、本專利技術提供的自定義可視化大屏的方法、裝置及可讀存儲介質，首先對可視化大屏進行劃分，設置布局塊和內容組件；然后根據用戶基于可視化大屏的設計頁面觸發的第一操作，彈出布局塊列表；并響應于用戶對所述布局塊列表中布局塊的選擇和拖拽操作，將相應的布局塊在所述設計頁面中進行自定義展示；同時，接收用戶針對所述設計頁面中每個布局塊的關聯操作，將每個所述布局塊與相應的內容組件相關聯，并在對應的布局塊中填充展示相應內容組件的組件效果圖；最后根據自定義好的大屏數據信息加載數據并進行展示。通過本專利技術，用戶可通過拖拽的形式對可視化大屏的整體布局設計進行自定義配置，改善交互性和靈活性不足的缺點，能夠提升大屏的可用性，提升用戶體驗，解決了現有的自定義可視化大屏的方法無法自定義模塊布局，在大屏整體排版設計上用戶參與度較低，整體缺乏靈活性的問題。
本文檔來自技高網...【技術保護點】
1.一種自定義可視化大屏的方法，其特征在于，應用于可視化大屏，所述方法包括：
2.根據權利要求1所述的方法，其特征在于，所述設置布局塊和內容組件，具體包括：
3.根據權利要求1所述的方法，其特征在于，所述根據用戶基于可視化大屏的設計頁面觸發的第一操作，彈出布局塊列表，具體包括：
4.根據權利要求1所述的方法，其特征在于，所述響應于用戶對所述布局塊列表中布局塊的選擇和拖拽操作，將相應的布局塊在所述設計頁面中進行自定義展示，具體包括：
5.根據權利要求4所述的方法，其特征在于，所述方法還包括：
6.根據權利要求5所述的方法，其特征在于，所述接收用戶針對所述設計頁面中每個布局塊的關聯操作，將每個所述布局塊與相應的內容組件相關聯，并在對應的布局塊中填充展示相應內容組件的組件效果圖之后，所述方法還包括：
7.根據權利要求1所述的方法，其特征在于，所述根據自定義好的大屏數據信息加載數據并進行展示，具體包括：
8.一種自定義可視化大屏的裝置，其特征在于，應用于可視化大屏，所述裝置包括：
9.一種自定
10.一種計算機可讀存儲介質，其特征在于，所述計算機可讀存儲介質上存儲有計算機程序，所述計算機程序被處理器執行時實現如權利要求1-7中任一項所述的自定義可視化大屏的方法。
...【技術特征摘要】
1.一種自定義可視化大屏的方法，其特征在于，應用于可視化大屏，所述方法包括：
2.根據權利要求1所述的方法，其特征在于，所述設置布局塊和內容組件，具體包括：
3.根據權利要求1所述的方法，其特征在于，所述根據用戶基于可視化大屏的設計頁面觸發的第一操作，彈出布局塊列表，具體包括：
4.根據權利要求1所述的方法，其特征在于，所述響應于用戶對所述布局塊列表中布局塊的選擇和拖拽操作，將相應的布局塊在所述設計頁面中進行自定義展示，具體包括：
5.根據權利要求4所述的方法，其特征在于，所述方法還包括：
6.根據權利要求5所述的方法，其特征在于，所述接收用戶針對所述設計頁面中每個布局塊的關聯操作，將每個所述布局塊與相應的內容...
【專利技術屬性】
技術研發人員：吳文國，袁凌霄，張蕊，王昊，苗文泰，
申請(專利權)人：中國聯合網絡通信集團有限公司，
類型：發明
國別省市：
還沒有人留言評論。發表了對其他瀏覽者有用的留言會獲得科技券。