[發明專利]一種基于可熱插拔動態組件的可視化系統

有效

• 申請號: 202011184776.5
• 申請日: 2020-10-30
• 公開（公告）號: CN112256260B
• 公開（公告）日: 2022-07-05
• 發明（設計）人: 張寶玉;劉博;齊文輝;王華龍;王震;焦勇
• 申請（專利權）人: 中電萬維信息技術有限責任公司
• 主分類號: G06F8/34
• 分類號: G06F8/34;G06F8/35;G06F8/38;G06F9/4401;G06F9/445;G06F3/0486;G06F3/0485
• 代理公司: 蘭州嘉諾知識產權代理事務所(普通合伙) 62202
• 代理人: 郭海

1.一種基于可熱插拔動態組件的可視化系統，其特征在于：

包括加載組件、添加元素容器、選擇模板組件和選擇數據組件，選擇模板組件和選擇數據組件通過加載組件實現離線或在線組件加載；

系統會自動加載已經上傳的模板組件，通過選擇模板組件并將其展示在界面布局區域同時系統會解析模板組件的屬性并將其映射到屬性操作欄，開發人員根據需要進行動態修改和配置；其次添加元素容器用來加載已上傳的或在線開發的數據組件，系統在加載數據組件的同時解析數據組件屬性并將其映射到屬性操作欄以便進行更改和動態配置；最后通過界面布局區域的拖拽功能和放大縮小功能實現頁面的靈活布局和適配不同瀏覽器分辨率下的界面展示，選擇數據來源與后端接口數據進行動態綁定并渲染頁面；

加載組件采用離線上傳方式時，首先采用前端框架VUE對組件進行封裝并保存在本地存儲器，在需要時上傳即可；其次系統對屬性進行解析并通過插槽名的形式和屬性欄進行映射綁定，并通過計算屬性的方式返回屬性的修改值和進行頁面渲染；最后在完成頁面布局后通過選擇數據源請求后端數據接口完成頁面數據的加載和展示，數據接口采用統一標準的數據集通過映射的方式實現不同數據的加載和渲染；

加載組件采用在線開發方式時，通過加載組件對容器進行拖拽和放大縮小，在布局區域自由拖動以調節容器在布局中的位置，放大縮小的功能適應不同瀏覽器在不同分辨率情況下的展示效果，調節頁面布局的細節信息，在添加容器的同時系統會調動加載引擎加載數據組件并與容器進行一一對應，同時解析數據組件的屬性并于屬性欄進行映射操作，完成配置之后，調用數據接口對頁面進行渲染。

2.根據權利要求1所述的一種基于可熱插拔動態組件的可視化系統，其特征在于：選擇模板組件和選擇數據組件通過加載組件實現離線或在線組件加載實現無縫銜接，加載組件采用離線開發、打包、上傳、解析、嵌入、映射的方式與系統對接，在系統構建過程中實現組件的動態加載和屬性動態配置；采用在線開發的方式與系統對接和進行屬性的變更和數據的渲染。

3.根據權利要求1所述的一種基于可熱插拔動態組件的可視化系統，其特征在于：加載組件根據開發人員實時修改和動態配置屬性。

4.根據權利要求1所述的一種基于可熱插拔動態組件的可視化系統，其特征在于：選擇數據組件包括圖片組件、文本組件、表格組件、echarts圖形組件、地圖組件、文字編輯框、下拉選擇框、無縫滾動組件、分割線組件，開發人員根據設計需要通過加載組件對組件和屬性動態進行配置。