Merge pull request #1306 from dataease/pr@dev@refactor_panel-speed

refactor: 前端增加菜单缓存，加快相应速度

frontend/src/api/authModel/authModel.js

@@ -1,11 +1,11 @@
 import request from '@/utils/request'
 
-export function queryAuthModel(data) {
+export function queryAuthModel(data, loading = true, timeout = 30000) {
   return request({
     url: 'authModel/queryAuthModel',
     method: 'post',
-    loading: true,
-    timeout: 30000,
+    loading: loading,
+    timeout: timeout,
     data
   })
 }

frontend/src/api/chart/chart.js

@@ -40,7 +40,7 @@ export function chartGroupTree(data) {
   return request({
     url: '/chart/group/tree',
     method: 'post',
-    loading: true,
+    loading: false,
     data
   })
 }

frontend/src/api/panel/panel.js

@@ -36,20 +36,22 @@ export function querySubjectWithGroup(data) {
   })
 }
 
-export function defaultTree(data) {
+export function defaultTree(data, loading = true, timeout = 30000) {
   return request({
     url: '/panel/group/defaultTree',
     method: 'post',
-    loading: true,
+    loading: loading,
+    timeout: timeout,
     data
   })
 }
 
-export function groupTree(data) {
+export function groupTree(data, loading = true, timeout = 30000) {
   return request({
     url: '/panel/group/tree',
     method: 'post',
-    loading: true,
+    loading: loading,
+    timeout: timeout,
     data
   })
 }

frontend/src/views/chart/group/Group.vue

@@ -337,6 +337,11 @@ export default {
       type: String,
       required: false,
       default: null
+    },
+    mountedInit: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   data() {
@@ -440,10 +445,11 @@ export default {
 
   },
   mounted() {
-    this.treeNode(this.groupForm)
-    this.refresh()
-    // this.chartTree()
-    this.getChartGroupTree()
+    if (this.mountedInit) {
+      this.treeNode(true)
+      this.refresh()
+      this.getChartGroupTree()
+    }
   },
   methods: {
     clickAdd(param) {
@@ -620,9 +626,17 @@ export default {
       })
     },
 
-    treeNode(group) {
-      queryAuthModel({ modelType: 'chart' }).then(res => {
-        this.tData = res.data
+    treeNode(cache = false) {
+      const modelInfo = localStorage.getItem('chart-tree')
+      const userCache = (modelInfo && cache)
+      if (userCache) {
+        this.tData = JSON.parse(modelInfo)
+      }
+      queryAuthModel({ modelType: 'chart' }, !userCache).then(res => {
+        localStorage.setItem('chart-tree', JSON.stringify(res.data))
+        if (!userCache) {
+          this.tData = res.data
+        }
       })
     },
 

frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue

@@ -181,7 +181,7 @@ export default {
       this.unionDataChange()
     },
     'table': function() {
-      this.treeNode(this.groupForm)
+      this.treeNode()
     },
     filterText(val) {
       this.searchPids = []
@@ -193,7 +193,7 @@ export default {
     }
   },
   mounted() {
-    this.treeNode(this.groupForm)
+    this.treeNode(true)
   },
   created() {
     this.kettleState()
@@ -223,9 +223,17 @@ export default {
       }
     },
 
-    treeNode(group) {
-      queryAuthModel({ modelType: 'dataset' }).then(res => {
-        this.data = res.data
+    treeNode(cache) {
+      const modelInfo = localStorage.getItem('dataset-tree')
+      const userCache = (modelInfo && cache)
+      if (userCache) {
+        this.data = JSON.parse(modelInfo)
+      }
+      queryAuthModel({ modelType: 'dataset' }, !userCache).then(res => {
+        localStorage.setItem('dataset-tree', JSON.stringify(res.data))
+        if (!userCache) {
+          this.data = res.data
+        }
       })
     },
     nodeClick(data, node) {

frontend/src/views/dataset/group/Group.vue

@@ -325,7 +325,7 @@ export default {
     this.kettleState()
   },
   mounted() {
-    this.treeNode(this.groupForm)
+    this.treeNode(true)
     this.refresh()
   },
   methods: {
@@ -407,7 +407,7 @@ export default {
               showClose: true
             })
             this.expandedArray.push(group.pid)
-            this.treeNode(group.pid)
+            this.treeNode()
           })
         } else {
           return false
@@ -451,7 +451,7 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          this.treeNode(data.pid)
+          this.treeNode()
         })
       }).catch(() => {
       })
@@ -469,7 +469,7 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          this.treeNode(data.sceneId)
+          this.treeNode()
           this.$store.dispatch('dataset/setTable', new Date().getTime())
         })
       }).catch(() => {
@@ -496,9 +496,17 @@ export default {
       }
     },
 
-    treeNode(group) {
-      queryAuthModel({ modelType: 'dataset' }).then(res => {
-        this.tData = res.data
+    treeNode(cache) {
+      const modelInfo = localStorage.getItem('dataset-tree')
+      const userCache = (modelInfo && cache)
+      if (userCache) {
+        this.tData = JSON.parse(modelInfo)
+      }
+      queryAuthModel({ modelType: 'dataset' }, !userCache).then(res => {
+        localStorage.setItem('dataset-tree', JSON.stringify(res.data))
+        if (!userCache) {
+          this.tData = res.data
+        }
       })
     },
 
@@ -682,7 +690,7 @@ export default {
         this.searchTree(val)
       } else {
         this.isTreeSearch = false
-        this.treeNode(this.groupForm)
+        this.treeNode()
       }
     },
     filterNode(value, data) {

frontend/src/views/login/index.vue

@@ -92,7 +92,13 @@ export default {
       axiosFinished: false,
       loginTypes: [0],
       isPluginLoaded: false,
-      contentShow: false
+      contentShow: false,
+      clearLocalStorage: [
+        'panel-main-tree',
+        'panel-default-tree',
+        'chart-tree',
+        'dataset-tree'
+      ]
     }
   },
   computed: {
@@ -178,8 +184,14 @@ export default {
         }
       } */
     },
+    initCache() {
+      this.clearLocalStorage.forEach(item => {
+        localStorage.removeItem(item)
+      })
+    },
 
     handleLogin() {
+      this.initCache()
       this.clearOidcMsg()
       this.$refs.loginForm.validate(valid => {
         if (valid) {

frontend/src/views/panel/edit/index.vue

@@ -191,6 +191,7 @@
       :opt-from="'panel'"
       :advice-group-id="adviceGroupId"
       style="height: 0px;width:0px;padding:0px;overflow: hidden"
+      :mounted-init="false"
       @newViewInfo="newViewInfo"
     />
 

frontend/src/views/panel/list/PanelList.vue

@@ -233,6 +233,7 @@ import {
   DEFAULT_COMMON_CANVAS_STYLE_STRING
 } from '@/views/panel/panel'
 import TreeSelector from '@/components/TreeSelector'
+import { queryAuthModel } from '@/api/authModel/authModel'
 
 export default {
   name: 'PanelList',
@@ -334,7 +335,11 @@ export default {
       searchMap: {
         all: this.$t('commons.all'),
         folder: this.$t('commons.folder')
-      }
+      },
+      initLocalStorage: [
+        'chart',
+        'dataset'
+      ]
     }
   },
   computed: {
@@ -367,9 +372,20 @@ export default {
     this.$store.commit('setComponentData', [])
     this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
     this.defaultTree()
-    this.tree(this.groupForm)
+    this.tree(true)
+    this.initCache()
   },
   methods: {
+    initCache() {
+      // 初始化时提前加载视图和数据集的缓存
+      this.initLocalStorage.forEach(item => {
+        if (!localStorage.getItem(item + '-tree')) {
+          queryAuthModel({ modelType: item }, false).then(res => {
+            localStorage.setItem(item + '-tree', JSON.stringify(res.data))
+          })
+        }
+      })
+    },
     closeEditPanelDialog(panelInfo) {
       this.editPanel.visible = false
       if (panelInfo) {
@@ -392,7 +408,7 @@ export default {
           }
           this.activeNodeAndClick(panelInfo)
         } else {
-          this.tree(this.groupForm)
+          this.tree()
         }
       }
     },
@@ -535,7 +551,7 @@ export default {
               type: 'success',
               showClose: true
             })
-            this.tree(this.groupForm)
+            this.tree()
             this.defaultTree()
           })
         } else {
@@ -562,7 +578,7 @@ export default {
             showClose: true
           })
           this.clearCanvas()
-          this.tree(this.groupForm)
+          this.tree()
           this.defaultTree()
         })
       }).catch(() => {
@@ -591,17 +607,32 @@ export default {
         sort: 'node_type desc,name asc'
       }
     },
-    tree(group) {
-      groupTree(group).then(res => {
-        this.tData = res.data
+    tree(cache = false) {
+      const modelInfo = localStorage.getItem('panel-main-tree')
+      const userCache = (modelInfo && cache)
+      if (userCache) {
+        this.tData = JSON.parse(modelInfo)
+      }
+      groupTree(this.groupForm, !userCache).then(res => {
+        localStorage.setItem('panel-main-tree', JSON.stringify(res.data))
+        if (!userCache) {
+          this.tData = res.data
+        }
       })
     },
     defaultTree() {
       const requestInfo = {
         panelType: 'system'
       }
-      defaultTree(requestInfo).then(res => {
-        this.defaultData = res.data
+      const modelInfo = localStorage.getItem('panel-default-tree')
+      if (modelInfo) {
+        this.defaultData = JSON.parse(modelInfo)
+      }
+      defaultTree(requestInfo, false).then(res => {
+        localStorage.setItem('panel-default-tree', JSON.stringify(res.data))
+        if (!modelInfo) {
+          this.defaultData = res.data
+        }
       })
     },
 
@@ -768,7 +799,7 @@ export default {
       this.moveInfo.pid = this.tGroup.id
       this.moveInfo['optType'] = 'move'
       panelSave(this.moveInfo).then(response => {
-        this.tree(this.groupForm)
+        this.tree()
         this.closeMoveGroup()
       })
     },