feat: 仪表板预览界面支持刷新，仪表板加载代码优化

frontend/src/api/panel/panel.js

 import request from '@/utils/request'
+import { panelInit } from '@/components/canvas/utils/utils'
+import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
+import { queryPanelJumpInfo } from '@/api/panel/linkJump'
+import store from '@/store'
 
 export function deleteSubject(id) {
   return request({
@@ -128,3 +132,25 @@ export function delGroup(groupId) {
     method: 'post'
   })
 }
+
+export function initPanelData(panelId, callback) {
+  // 加载视图数据
+  findOne(panelId).then(response => {
+    // 初始化视图data和style 数据
+    panelInit(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle))
+    // 设置当前仪表板全局信息
+    store.dispatch('panel/setPanelInfo', {
+      id: response.data.id,
+      name: response.data.name
+    })
+    // 刷新联动信息
+    getPanelAllLinkageInfo(panelId).then(rsp => {
+      store.commit('setNowPanelTrackInfo', rsp.data)
+    })
+    // 刷新跳转信息
+    queryPanelJumpInfo(panelId).then(rsp => {
+      store.commit('setNowPanelJumpInfo', rsp.data)
+    })
+    callback(response)
+  })
+}

frontend/src/components/canvas/components/Editor/PreviewEject.vue

@@ -6,10 +6,8 @@
 <script>
 import Preview from './Preview'
 import { uuid } from 'vue-uuid'
-import { findOne } from '@/api/panel/panel'
-import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
-import { queryPanelJumpInfo, queryTargetPanelJumpInfo } from '@/api/panel/linkJump'
-import { panelInit } from '@/components/canvas/utils/utils'
+import { initPanelData } from '@/api/panel/panel'
+import { queryTargetPanelJumpInfo } from '@/api/panel/linkJump'
 
 export default {
   components: { Preview },
@@ -37,31 +35,14 @@ export default {
       this.mainHeight = mainHeight
     },
     restore() {
-      this.dataLoading = true
-      this.panelId = this.$route.params.reportId
-      if (this.$route.params.backScreenShot !== undefined) {
-        this.backScreenShot = this.$route.params.backScreenShot
+      const _this = this
+      _this.dataLoading = true
+      _this.panelId = this.$route.params.reportId
+      if (_this.$route.params.backScreenShot !== undefined) {
+        _this.backScreenShot = _this.$route.params.backScreenShot
       }
       // 加载视图数据
-      findOne(this.panelId).then(response => {
-        const componentDatas = JSON.parse(response.data.panelData)
-        panelInit(componentDatas)
-        this.dataLoading = false
-        this.$store.commit('setComponentData', this.resetID(componentDatas))
-        this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
-        const data = {
-          id: response.data.id,
-          name: response.data.name
-        }
-        // 刷新联动信息
-        getPanelAllLinkageInfo(this.panelId).then(rsp => {
-          this.$store.commit('setNowPanelTrackInfo', rsp.data)
-        })
-        // 刷新跳转信息
-        queryPanelJumpInfo(this.panelId).then(rsp => {
-          this.$store.commit('setNowPanelJumpInfo', rsp.data)
-        })
-
+      initPanelData(this.panelId, function() {
         // 如果含有跳转参数 进行触发
         const tempParam = localStorage.getItem('jumpInfoParam')
         if (tempParam) {
@@ -71,17 +52,16 @@ export default {
             sourcePanelId: jumpParam.sourcePanelId,
             sourceViewId: jumpParam.sourceViewId,
             sourceFieldId: jumpParam.sourceFieldId,
-            targetPanelId: this.panelId
+            targetPanelId: _this.panelId
           }
-          this.dataLoading = true
+          _this.dataLoading = true
           // 刷新跳转目标仪表板联动信息
           queryTargetPanelJumpInfo(jumpRequestParam).then(rsp => {
-            this.dataLoading = false
-            this.$store.commit('setNowTargetPanelJumpInfo', rsp.data)
-            this.$store.commit('addViewTrackFilter', jumpParam)
+            _this.dataLoading = false
+            _this.$store.commit('setNowTargetPanelJumpInfo', rsp.data)
+            _this.$store.commit('addViewTrackFilter', jumpParam)
           })
         }
-        this.$store.dispatch('panel/setPanelInfo', data)
       })
     },
     resetID(data) {

frontend/src/components/canvas/utils/utils.js

@@ -6,6 +6,8 @@ import {
 import {
   ApplicationContext
 } from '@/utils/ApplicationContext'
+import { uuid } from 'vue-uuid'
+import store from '@/store'
 
 export function deepCopy(target) {
   if (typeof target === 'object') {
@@ -63,8 +65,8 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
   mainSource.mobileStyle.sizey = mobileSource.sizey
 }
 
-export function panelInit(componentDatas) {
-  componentDatas.forEach(item => {
+export function panelInit(componentData, componentStyle) {
+  componentData.forEach(item => {
     if (item.component && item.component === 'de-date') {
       if (item.options.attrs &&
         (!item.options.attrs.default || (item.serviceName === 'timeYearWidget' && item.options.attrs.default.dynamicInfill !== 'year') || (item.serviceName === 'timeMonthWidget' && item.options.attrs.default.dynamicInfill !== 'month'))) {
@@ -92,4 +94,21 @@ export function panelInit(componentDatas) {
       item.hyperlinks = (item.hyperlinks || HYPERLINKS)
     }
   })
+  // style初始化
+  componentStyle.refreshTime = (componentStyle.refreshTime || 5)
+  componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
+  componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
+
+  // 将data 和 style 数据设置到全局store中
+  store.commit('setComponentData', resetID(componentData))
+  store.commit('setCanvasStyle', componentStyle)
+}
+
+export function resetID(data) {
+  if (data) {
+    data.forEach(item => {
+      item.type !== 'custom' && (item.id = uuid.v1())
+    })
+  }
+  return data
 }

frontend/src/views/link/view/index.vue

@@ -45,7 +45,6 @@ export default {
           this.$store.commit('setNowPanelTrackInfo', rsp.data)
         })
         this.$store.commit('setComponentData', this.resetID(JSON.parse(res.data.panelData)))
-        // this.$store.commit('setComponentData', JSON.parse(res.data.panelData))
         this.$store.commit('setCanvasStyle', JSON.parse(res.data.panelStyle))
         // 刷新跳转信息
         queryPanelJumpInfo(this.resourceId).then(rsp => {

frontend/src/views/panel/GrantAuth/shareTree.vue

@@ -50,10 +50,8 @@
 <script>
 import { loadTree, loadShareOutTree, removeShares } from '@/api/panel/share'
 import { uuid } from 'vue-uuid'
-import { get } from '@/api/panel/panel'
+import { get, initPanelData } from '@/api/panel/panel'
 import bus from '@/utils/bus'
-import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
-import { queryPanelJumpInfo } from '@/api/panel/linkJump'
 export default {
   name: 'ShareTree',
   props: {
@@ -105,36 +103,13 @@ export default {
       return loadShareOutTree()
     },
     handleNodeClick(data) {
-      get('panel/group/findOne/' + data.id).then(response => {
-        this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
-        this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
-        this.$store.dispatch('panel/setPanelInfo', data)
-        // 刷新联动信息
-        getPanelAllLinkageInfo(data.id).then(rsp => {
-          this.$store.commit('setNowPanelTrackInfo', rsp.data)
-        })
-        // 刷新跳转信息
-        queryPanelJumpInfo(data.id).then(rsp => {
-          this.$store.commit('setNowPanelJumpInfo', rsp.data)
-        })
+      initPanelData(data.id, function() {
         bus.$emit('set-panel-show-type', 1)
       })
       this.$refs['botTree'].setCurrentKey(null)
     },
     viewMyShare(data) {
-      get('panel/group/findOne/' + data.id).then(response => {
-        this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
-        this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
-
-        this.$store.dispatch('panel/setPanelInfo', data)
-        // 刷新联动信息
-        getPanelAllLinkageInfo(data.id).then(rsp => {
-          this.$store.commit('setNowPanelTrackInfo', rsp.data)
-        })
-        // 刷新跳转信息
-        queryPanelJumpInfo(data.id).then(rsp => {
-          this.$store.commit('setNowPanelJumpInfo', rsp.data)
-        })
+      initPanelData(data.id, function() {
         bus.$emit('set-panel-show-type', 2)
       })
       this.$refs['topTree'].setCurrentKey(null)

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

@@ -221,8 +221,7 @@ import componentList, { BASE_MOBILE_STYLE, HYPERLINKS } from '@/components/canva
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
-import { findOne } from '@/api/panel/panel'
-import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
+import { initPanelData } from '@/api/panel/panel'
 import Preview from '@/components/canvas/components/Editor/Preview'
 import AttrListExtend from '@/components/canvas/components/AttrListExtend'
 import elementResizeDetectorMaker from 'element-resize-detector'
@@ -239,7 +238,6 @@ import toast from '@/components/canvas/utils/toast'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
 import TextAttr from '@/components/canvas/components/TextAttr'
-import { queryPanelJumpInfo } from '@/api/panel/linkJump'
 import ComponentWait from '@/views/panel/edit/ComponentWait'
 import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine'
 
@@ -414,9 +412,6 @@ export default {
         removeClass(document.body, 'showRightPanel')
       }
     },
-    panelInfo(newVal, oldVal) {
-      this.init(newVal.id)
-    },
     '$store.state.styleChangeTimes'() {
       if (this.$store.state.styleChangeTimes > 0) {
         this.destroyTimeMachine()
@@ -467,42 +462,19 @@ export default {
   },
   methods: {
     init(panelId) {
-      this.initHasStar()
+      const _this = this
+      _this.initHasStar()
       // 如果临时画布有数据 则使用临时画布数据（视图编辑的时候 会保存临时画布数据）
       const componentDataTemp = this.$store.state.panel.componentDataTemp
       const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
       if (componentDataTemp && canvasStyleDataTemp) {
-        const componentDatas = JSON.parse(componentDataTemp)
-        panelInit(componentDatas)
-        this.$store.commit('setComponentData', this.resetID(componentDatas))
-        const temp = JSON.parse(canvasStyleDataTemp)
-        temp.refreshTime = (temp.refreshTime || 5)
-        temp.refreshViewLoading = (temp.refreshViewLoading || false)
-        temp.refreshUnit = (temp.refreshUnit || 'minute')
-
-        this.$store.commit('setCanvasStyle', temp)
+        panelInit(JSON.parse(componentDataTemp), JSON.parse(canvasStyleDataTemp))
         // 清空临时画布数据
-        this.$store.dispatch('panel/setComponentDataTemp', null)
-        this.$store.dispatch('panel/setCanvasStyleDataTemp', null)
+        _this.$store.dispatch('panel/setComponentDataTemp', null)
+        _this.$store.dispatch('panel/setCanvasStyleDataTemp', null)
       } else if (panelId) {
-        findOne(panelId).then(response => {
-          const componentDatas = JSON.parse(response.data.panelData)
-          panelInit(componentDatas)
-          this.$store.commit('setComponentData', this.resetID(componentDatas))
-          const panelStyle = JSON.parse(response.data.panelStyle)
-          panelStyle.refreshTime = (panelStyle.refreshTime || 5)
-          panelStyle.refreshViewLoading = (panelStyle.refreshViewLoading || false)
-          panelStyle.refreshUnit = (panelStyle.refreshUnit || 'minute')
-          this.$store.commit('setCanvasStyle', panelStyle)
-          this.$store.commit('recordSnapshot', 'init')// 记录快照
-          // 刷新联动信息
-          getPanelAllLinkageInfo(panelId).then(rsp => {
-            this.$store.commit('setNowPanelTrackInfo', rsp.data)
-          })
-          // 刷新跳转信息
-          queryPanelJumpInfo(panelId).then(rsp => {
-            this.$store.commit('setNowPanelJumpInfo', rsp.data)
-          })
+        initPanelData(panelId, function() {
+          _this.$store.commit('recordSnapshot', 'init')// 记录快照
         })
       }
     },

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

@@ -27,10 +27,8 @@
 <script>
 import { deleteEnshrine, enshrineList } from '@/api/panel/enshrine'
 import { uuid } from 'vue-uuid'
-import { get } from '@/api/panel/panel'
+import { initPanelData } from '@/api/panel/panel'
 import bus from '@/utils/bus'
-import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
-import { queryPanelJumpInfo } from '@/api/panel/linkJump'
 export default {
   name: 'Enshrine',
   data() {
@@ -49,22 +47,7 @@ export default {
   },
   methods: {
     showPanel(row) {
-      get('panel/group/findOne/' + row.panelGroupId).then(response => {
-        this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
-        this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
-        const data = {
-          id: row.panelGroupId,
-          name: row.name
-        }
-        this.$store.dispatch('panel/setPanelInfo', data)
-        // 刷新联动信息
-        getPanelAllLinkageInfo(data.id).then(rsp => {
-          this.$store.commit('setNowPanelTrackInfo', rsp.data)
-        })
-        // 刷新跳转信息
-        queryPanelJumpInfo(data.id).then(rsp => {
-          this.$store.commit('setNowPanelJumpInfo', rsp.data)
-        })
+      initPanelData(row.panelGroupId, function() {
         bus.$emit('set-panel-show-type', 0)
       })
     },

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

@@ -226,16 +226,13 @@ import LinkGenerate from '@/views/link/generate'
 import { uuid } from 'vue-uuid'
 import bus from '@/utils/bus'
 import EditPanel from './EditPanel'
-import { addGroup, delGroup, groupTree, defaultTree, findOne, panelSave } from '@/api/panel/panel'
-import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
-import { queryPanelJumpInfo } from '@/api/panel/linkJump'
+import { addGroup, delGroup, groupTree, defaultTree, panelSave, initPanelData } from '@/api/panel/panel'
 import { mapState } from 'vuex'
 import {
   DEFAULT_COMMON_CANVAS_STYLE_STRING
 } from '@/views/panel/panel'
 import TreeSelector from '@/components/TreeSelector'
 import { queryAuthModel } from '@/api/authModel/authModel'
-import { panelInit } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'PanelList',
@@ -649,29 +646,7 @@ export default {
       if (data.nodeType === 'panel') {
         // 清理pc布局缓存
         this.$store.commit('setComponentDataCache', null)
-        // 加载视图数据
-        findOne(data.id).then(response => {
-          const componentDatas = JSON.parse(response.data.panelData)
-          panelInit(componentDatas)
-          this.$store.commit('setComponentData', this.resetID(componentDatas))
-          const temp = JSON.parse(response.data.panelStyle)
-          temp.refreshTime = (temp.refreshTime || 5)
-          temp.refreshViewLoading = (temp.refreshViewLoading || false)
-          temp.refreshUnit = (temp.refreshUnit || 'minute')
-
-          this.$store.commit('setCanvasStyle', temp)
-          this.$store.dispatch('panel/setPanelInfo', data)
-
-          // 刷新联动信息
-          getPanelAllLinkageInfo(data.id).then(rsp => {
-            this.$store.commit('setNowPanelTrackInfo', rsp.data)
-          })
-
-          // 刷新跳转信息
-          queryPanelJumpInfo(data.id).then(rsp => {
-            this.$store.commit('setNowPanelJumpInfo', rsp.data)
-          })
-
+        initPanelData(data.id, function(response) {
           bus.$emit('set-panel-show-type', 0)
         })
       }

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

@@ -68,6 +68,12 @@
               </el-tooltip>
             </span>
 
+            <span style="float: right;margin-right: 10px">
+              <el-tooltip :content="$t('commons.refresh')">
+                <el-button class="el-icon-refresh" size="mini" circle @click="refreshPanel" />
+              </el-tooltip>
+            </span>
+
           </el-col>
         </div>
       </el-row>
@@ -130,6 +136,7 @@ import { starStatus, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
 import bus from '@/utils/bus'
 import { queryAll } from '@/api/panel/pdfTemplate'
 import ShareHead from '@/views/panel/GrantAuth/ShareHead'
+import { initPanelData } from '@/api/panel/panel'
 
 export default {
   name: 'PanelViewShow',
@@ -334,8 +341,10 @@ export default {
     },
     editPanel() {
       this.$emit('editPanel')
+    },
+    refreshPanel() {
+      initPanelData(this.panelInfo.id)
     }
-
   }
 }
 </script>