feat(仪表板): 仪表板编辑时定时缓存未完成的仪表板，如果异常退出重新进入可以选择是否打开未保存的仪表板

2026-05-21 04:08:10 +08:00 · 2022-08-15 17:17:04 +08:00
parent 0ca33a5c79
commit 4b4a12969c
35 changed files with 235 additions and 63 deletions
--- a/frontend/src/views/panel/GrantAuth/shareTree.vue
+++ b/frontend/src/views/panel/GrantAuth/shareTree.vue
@@ -140,7 +140,7 @@ export default {
      this.$refs['botTree'].setCurrentKey(null)
    },
    viewMyShare(data) {
-      initPanelData(data.id, function() {
+      initPanelData(data.id, false, function() {
        bus.$emit('set-panel-show-type', 2)
      })
      this.$refs['topTree'].setCurrentKey(null)
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
@@ -109,7 +109,7 @@ export default {
        this.sizeMessage()
      }
      uploadFileResult(file.file, (fileUrl) => {
-        _this.$store.state.styleChangeTimes++
+        _this.$store.commit('canvasChange')
        _this.panel.imageUrl = fileUrl
        _this.fileList = [{ url: this.panel.imageUrl }]
        _this.commitStyle()
@@ -122,7 +122,7 @@ export default {
        this.sizeMessage()
      }
      uploadFileResult(file, (fileUrl) => {
-        _this.$store.state.styleChangeTimes++
+        _this.$store.commit('canvasChange')
        _this.panel.imageUrl = fileUrl
        _this.fileList = [{ url: this.panel.imageUrl }]
        _this.commitStyle()
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/PanelAidedDesign.vue
@@ -35,7 +35,7 @@ export default {
  },
  methods: {
    onChangePanelStyle() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
    }
  }
 }
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ViewResult.vue
@@ -55,7 +55,7 @@ export default {
  },
  methods: {
    onChangePanelStyle() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
    }
  }
 }
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -117,7 +117,7 @@ export default {
      this.themeAttrChange('customStyle', 'text', val)
    },
    styleChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
    },
    themeAttrChange(custom, property, value) {
      bus.$emit('onThemeAttrChange', {
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -354,6 +354,27 @@
      </div>
    </el-dialog>

+    <!--关闭弹框-->
+    <el-dialog
+      :visible.sync="panelCacheExist"
+      :title="$t('panel.panel_no_save_tips')"
+      :show-close="false"
+      width="30%"
+    >
+      <el-row style="height: 20px">
+        <el-col :span="3">
+          <svg-icon icon-class="warn-tre" style="width: 20px;height: 20px;float: right" />
+        </el-col>
+        <el-col :span="21">
+          <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{$t('panel.panel_cache_use_tips')}}</span>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="useCache(false)">{{$t('panel.no')}}</el-button>
+        <el-button type="primary" size="mini" @click="useCache(true)">{{$t('panel.yes')}}</el-button>
+      </div>
+    </el-dialog>
+
  </el-row>
 </template>

@@ -375,7 +396,13 @@ import componentList, {
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
 import Toolbar from '@/components/canvas/components/Toolbar'
-import { initPanelData, initViewCache, queryPanelMultiplexingViewTree } from '@/api/panel/panel'
+import {
+  checkUserCache,
+  findUserCache,
+  initPanelData,
+  initViewCache,
+  queryPanelMultiplexingViewTree
+} from '@/api/panel/panel'
 import Preview from '@/components/canvas/components/Editor/Preview'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import AssistComponent from '@/views/panel/AssistComponent'
@@ -428,6 +455,7 @@ export default {
  },
  data() {
    return {
+      panelCacheExist: false,
      viewData: [],
      multiplexingShow: false,
      asideToolType: 'none',
@@ -727,20 +755,40 @@ export default {
      _this.initHasStar()
      this.$store.commit('initCanvas')
      if (panelId) {
-        initPanelData(panelId, function() {
-          // 清空当前缓存,快照
-          _this.$store.commit('refreshSnapshot')
-          // 初始化视图缓存
-          initViewCache(panelId)
-          // 初始化记录的视图信息
-          _this.$store.commit('setComponentViewsData')
-          // 初始化保存状态
-          setTimeout(() => {
-            _this.$store.commit('refreshSaveStatus')
-          }, 500)
+        checkUserCache(panelId, function(rsp) {
+          // the panel have cache
+          if (rsp.data) {
+            _this.panelCacheExist = true
+          } else {
+            _this.editPanelDataInit(panelId, false)
+          }
        })
      }
    },
+    useCache(useCache) {
+      this.editPanelDataInit(this.$store.state.panel.panelInfo.id, useCache)
+      this.panelCacheExist = false
+    },
+    editPanelDataInit(panelId, useCache) {
+      const _this = this
+      initPanelData(panelId, useCache, function() {
+        // 清空当前缓存,快照
+        _this.$store.commit('refreshSnapshot')
+        // 初始化视图缓存
+        initViewCache(panelId)
+        // 初始化记录的视图信息
+        _this.$store.commit('setComponentViewsData')
+        // if panel data load from cache the save button should be active
+        // 初始化保存状态
+        setTimeout(() => {
+          if (useCache) {
+            _this.$store.commit('recordSnapshot', 'cache')
+          } else {
+            _this.$store.commit('refreshSaveStatus')
+          }
+        }, 500)
+      })
+    },
    star() {
      this.panelInfo && saveEnshrine(this.panelInfo.id, false).then(res => {
        this.hasStar = true
@@ -1141,19 +1189,6 @@ export default {

      // 打开属性栏
      bus.$emit('change_panel_right_draw', true)
-
-      //
-      // // 编辑时临时保存 当前修改的画布
-      // this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
-      // this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
-      // if (this.curComponent.type === 'view') {
-      //   this.$store.dispatch('chart/setViewId', null)
-      //   this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-      //   bus.$emit('PanelSwitchComponent', {
-      //     name: 'ChartEdit',
-      //     param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }
-      //   })
-      // }
    },
    canvasScroll(event) {
      this.scrollLeft = event.target.scrollLeft
@@ -1231,7 +1266,7 @@ export default {
      this.showMultiplexing(false)
      this.$store.commit('copyMultiplexingComponents')
      this.$store.commit('recordSnapshot')
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
    }
  }
 }
--- a/frontend/src/views/panel/enshrine/index.vue
+++ b/frontend/src/views/panel/enshrine/index.vue
@@ -55,7 +55,7 @@ export default {
  },
  methods: {
    showPanel(row) {
-      initPanelData(row.panelGroupId, function() {
+      initPanelData(row.panelGroupId, false, function() {
        bus.$emit('set-panel-show-type', 0)
      })
    },
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -674,7 +674,7 @@ export default {
      if (data.nodeType === 'panel') {
        // 清理pc布局缓存
        this.$store.commit('setComponentDataCache', null)
-        initPanelData(data.id, function(response) {
+        initPanelData(data.id, false, function(response) {
          bus.$emit('set-panel-show-type', 0)
          data.mobileLayout = response.data.mobileLayout
        })
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -454,7 +454,7 @@ export default {
      if (this.showType === 1 && this.shareUserId !== null) {
        const param = { userId: this.shareUserId }
        proxyInitPanelData(this.panelInfo.id, param, null)
-      } else { initPanelData(this.panelInfo.id) }
+      } else { initPanelData(this.panelInfo.id,false) }
    },
    changePublishState() {
      if (this.panelInfo.status === 'publish') {