Merge pull request #9606 from dataease/pr@dev-v2@feat_datav-cache

fix(数据大屏): 数据大屏支持前端缓存，异常退出可恢复

core/core-frontend/src/components/data-visualization/DvToolbar.vue

@@ -17,6 +17,7 @@ import { canvasSave } from '@/utils/canvasUtils'
 import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
 import MoreComGroup from '@/custom-component/component-group/MoreComGroup.vue'
 import { XpackComponent } from '@/components/plugin'
+import { useCache } from '@/hooks/web/useCache'
 let nameEdit = ref(false)
 let inputName = ref('')
 let nameInput = ref(null)
@@ -27,6 +28,7 @@ const resourceGroupOpt = ref(null)
 const dvToolbarMain = ref(null)
 const { canvasStyleData, dvInfo, editMode } = storeToRefs(dvMainStore)
 let scaleEdit = 100
+const { wsCache } = useCache('localStorage')
 
 const closeEditCanvasName = () => {
   nameEdit.value = false
@@ -87,6 +89,7 @@ const saveCanvasWithCheck = () => {
 }
 
 const saveResource = () => {
+  wsCache.delete('DE-DV-CATCH-' + dvInfo.value.id)
   if (styleChangeTimes.value > 0) {
     snapshotStore.resetStyleChangeTimes()
     canvasSave(() => {
@@ -140,6 +143,7 @@ const backHandler = (url: string) => {
     openHandler.value.invokeMethod(pm)
     return
   }
+  wsCache.delete('DE-DV-CATCH-' + dvInfo.value.id)
   window.open(url, '_self')
 }
 const openHandler = ref(null)

core/core-frontend/src/store/modules/data-visualization/snapshot.ts

@@ -86,8 +86,8 @@ export const snapshotStore = defineStore('snapshot', {
       dvMainStore.setComponentData(snapshotInfo.componentData)
       dvMainStore.setCanvasStyle(snapshotInfo.canvasStyleData)
       dvMainStore.setCanvasViewInfo(snapshotInfo.canvasViewInfo)
-      dvMainStore.setNowPanelJumpInfoInner(snapshotInfo.nowPanelTrackInfo)
+      dvMainStore.setNowPanelJumpInfoInner(snapshotInfo.nowPanelJumpInfo)
-      dvMainStore.setNowPanelJumpInfo(snapshotInfo.nowPanelJumpInfo)
+      dvMainStore.setNowPanelTrackInfo(snapshotInfo.nowPanelTrackInfo)
       dvMainStore.updateCurDvInfo(snapshotInfo.dvInfo)
       const curCacheViewIdInfo = deepCopy(this.cacheViewIdInfo)
       this.cacheViewIdInfo = snapshotInfo.cacheViewIdInfo

core/core-frontend/src/views/dashboard/index.vue

@@ -120,8 +120,8 @@ const doUseCache = flag => {
     }, 1500)
   } else {
     initLocalCanvasData()
+    wsCache.delete('DE-DV-CATCH-' + state.resourceId)
   }
-  wsCache.delete('DE-DV-CATCH-' + state.resourceId)
 }
 
 const initLocalCanvasData = () => {

core/core-frontend/src/views/data-visualization/index.vue

@@ -36,6 +36,8 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { watermarkFind } from '@/api/watermark'
 import { XpackComponent } from '@/components/plugin'
 import { Base64 } from 'js-base64'
+import CanvasCacheDialog from '@/components/visualization/CanvasCacheDialog.vue'
+import { deepCopy } from '@/utils/utils'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
@@ -58,6 +60,8 @@ const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const contextmenuStore = contextmenuStoreWithOut()
 const composeStore = composeStoreWithOut()
+const canvasCacheOutRef = ref(null)
+
 const {
   componentData,
   curComponent,
@@ -77,7 +81,10 @@ const state = reactive({
   datasetTree: [],
   scaleHistory: 100,
   canvasId: 'canvas-main',
-  canvasInitStatus: false
+  canvasInitStatus: false,
+  sourcePid: null,
+  resourceId: null,
+  opt: null
 })
 
 const contentStyle = computed(() => {
@@ -177,6 +184,42 @@ const initScroll = () => {
     canvasOut.value.scrollTo(scrollX, scrollY)
   })
 }
+const doUseCache = flag => {
+  const canvasCache = wsCache.get('DE-DV-CATCH-' + state.resourceId)
+  if (flag && canvasCache) {
+    const canvasCacheSeries = deepCopy(canvasCache)
+    snapshotStore.snapshotPublish(canvasCacheSeries)
+    state.canvasInitStatus = true
+    nextTick(() => {
+      dvMainStore.setDataPrepareState(true)
+      snapshotStore.recordSnapshotCache('renderChart')
+    })
+  } else {
+    initLocalCanvasData()
+    wsCache.delete('DE-DV-CATCH-' + state.resourceId)
+  }
+}
+
+const initLocalCanvasData = () => {
+  const { opt, sourcePid, resourceId } = state
+  const busiFlg = opt === 'copy' ? 'dataV-copy' : 'dataV'
+  initCanvasData(resourceId, busiFlg, function () {
+    state.canvasInitStatus = true
+    // afterInit
+    nextTick(() => {
+      dvMainStore.setDataPrepareState(true)
+      snapshotStore.recordSnapshotCache('renderChart')
+      if (dvInfo.value && opt === 'copy') {
+        dvInfo.value.dataState = 'prepare'
+        dvInfo.value.optType = 'copy'
+        dvInfo.value.pid = sourcePid
+        setTimeout(() => {
+          snapshotStore.recordSnapshotCache('renderChart')
+        }, 1500)
+      }
+    })
+  })
+}
 
 const previewScaleChange = () => {
   state.scaleHistory = canvasStyleData.value.scale
@@ -229,25 +272,17 @@ onMounted(async () => {
     return
   }
   initDataset()
+  state.resourceId = dvId
+  state.sourcePid = pid
+  state.opt = opt
   if (dvId) {
     state.canvasInitStatus = false
-    const busiFlg = opt === 'copy' ? 'dataV-copy' : 'dataV'
+    const canvasCache = wsCache.get('DE-DV-CATCH-' + dvId)
-    initCanvasData(dvId, busiFlg, function () {
+    if (canvasCache) {
-      state.canvasInitStatus = true
+      canvasCacheOutRef.value?.dialogInit({ canvasType: 'dataV', resourceId: dvId })
-      // afterInit
+    } else {
-      nextTick(() => {
+      initLocalCanvasData()
-        dvMainStore.setDataPrepareState(true)
+    }
-        snapshotStore.recordSnapshotCache('renderChart')
-        if (dvInfo.value && opt === 'copy') {
-          dvInfo.value.dataState = 'prepare'
-          dvInfo.value.optType = 'copy'
-          dvInfo.value.pid = pid
-          setTimeout(() => {
-            snapshotStore.recordSnapshotCache('renderChart')
-          }, 1500)
-        }
-      })
-    })
   } else if (opt && opt === 'create') {
     state.canvasInitStatus = false
     let watermarkBaseInfo
@@ -404,6 +439,7 @@ eventBus.on('handleNew', handleNew)
     @loaded="XpackLoaded"
     @load-fail="XpackLoaded"
   />
+  <canvas-cache-dialog ref="canvasCacheOutRef" @doUseCache="doUseCache"></canvas-cache-dialog>
 </template>
 
 <style lang="less">