feat: 新增自动同步功能

src/settings/designSetting.ts

@@ -48,8 +48,11 @@ export const backgroundImageSize = 5
 // 预览展示方式
 export const previewScaleType = PreviewScaleEnum.FIT
 
-// 数据请求间隔
+// 数据请求间隔（s）
 export const requestInterval = 30
 
+// 工作台自动保存间隔（s）
+export const saveInterval = 30
+
 // 工作区域历史记录存储最大数量
 export const editHistoryMax = 100

src/views/chart/ContentEdit/components/EditDataSync/index.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="go-edit-data-sync go-flex-items-center">
-    <n-text class="status-desc go-ml-2" :type="descType" depth="3">
-      {{ statusDesc }}
-    </n-text>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-text class="status-desc go-ml-2" :type="descType" depth="3">
+          {{ statusDesc }}
+        </n-text>
+      </template>
+      <span>{{saveInterval}}s 更新一次</span>
+    </n-tooltip>
     <n-spin
-      v-show="saveStatus === SyncEnum.START"
+      v-show="statusDesc === statusDescObj[1]['text']"
       class="status-spin go-ml-2"
       size="small"
     >
@@ -18,44 +23,54 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRefs, watchEffect } from 'vue'
+import { ref, toRefs, watch } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { SyncEnum } from '@/enums/editPageEnum'
 import { icon } from '@/plugins'
+import { saveInterval } from '@/settings/designSetting'
 
 const { ReloadIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
 const { saveStatus } = toRefs(chartEditStore.getEditCanvas)
 const statusDesc = ref('')
 const descType = ref('')
+let setTimeoutIns: NodeJS.Timeout = setTimeout(() => {})
+
+const statusDescObj = {
+  [SyncEnum.PENDING]: {
+    text: '等待自动同步',
+    type: '',
+  },
+  [SyncEnum.START]: {
+    text: '正在同步中',
+    type: 'success',
+  },
+  [SyncEnum.SUCCESS]: {
+    text: '同步成功！',
+    type: 'success',
+  },
+  [SyncEnum.FAILURE]: {
+    text: '同步失败!',
+    type: 'error',
+  },
+}
 
-watchEffect(() => {
-  const statusDescObj = {
-    [SyncEnum.PENDING]: {
-      text: '待同步',
-      type: '',
-    },
-    [SyncEnum.START]: {
-      text: '同步中',
-      type: 'success',
-    },
-    [SyncEnum.SUCCESS]: {
-      text: '同步成功！',
-      type: 'success',
-    },
-    [SyncEnum.FAILURE]: {
-      text: '同步失败!',
-      type: 'error',
-    },
+watch(
+  () => saveStatus.value,
+  newData => {
+    clearTimeout(setTimeoutIns)
+    statusDesc.value = statusDescObj[newData]['text']
+    descType.value = statusDescObj[newData]['type']
+    // 3秒重置展示
+    setTimeoutIns = setTimeout(() => {
+      statusDesc.value = statusDescObj[SyncEnum.PENDING]['text']
+      descType.value = statusDescObj[SyncEnum.PENDING]['type']
+    }, 3000)
+  },
+  {
+    immediate: true,
   }
-  statusDesc.value = statusDescObj[saveStatus.value]['text']
-  descType.value = statusDescObj[saveStatus.value]['type']
-  // 3秒重置展示
-  setTimeout(() => {
-    statusDesc.value = statusDescObj[SyncEnum.PENDING]['text']
-    descType.value = statusDescObj[SyncEnum.PENDING]['type']
-  }, 3000)
-})
+)
 </script>
 
 <style lang="scss" scoped>
@@ -67,9 +82,9 @@ watchEffect(() => {
     }
   }
   .status-desc {
+    cursor: default;
     font-size: 12px;
-    line-height: 40px;
-    opacity: .8;
+    opacity: 0.8;
   }
 }
 </style>

src/views/chart/ContentEdit/index.vue

@@ -83,7 +83,7 @@ import { EditTools } from './components/EditTools'
 
 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
-const { dataSyncFetch } = useSync()
+const { dataSyncFetch, intervalDataSyncUpdate } = useSync()
 
 // 布局处理
 useLayout()
@@ -128,6 +128,8 @@ onMounted(() => {
   useAddKeyboard()
   // 获取数据
   dataSyncFetch()
+  // 定时更新数据
+  intervalDataSyncUpdate()
 })
 </script>
 

src/views/chart/hooks/useSync.hook.ts

@@ -6,6 +6,7 @@ import { EditCanvasTypeEnum, ChartEditStoreEnum } from '@/store/modules/chartEdi
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { fetchChartComponent, createComponent } from '@/packages/index'
 import { CreateComponentType } from '@/packages/index.d'
+import { saveInterval } from '@/settings/designSetting'
 // 接口状态
 import { ResultEnum } from '@/enums/httpEnum'
 // 接口
@@ -71,7 +72,7 @@ export const useSync = () => {
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
     try {
       const { id } = routerParamsInfo.params
-      const res: any = await fetchProjectApi({ id: id[0] })
+      const res: any = await fetchProjectApi({ projectId: id[0] })
       if (res.code === ResultEnum.SUCCESS) {
         if (res.data) {
           const data = JSON.parse(res.data)
@@ -84,7 +85,6 @@ export const useSync = () => {
         return
       }
       chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-      httpErrorHandle()
     } catch (error) {
       chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
       httpErrorHandle()
@@ -93,10 +93,11 @@ export const useSync = () => {
 
   // 数据保存
   const dataSyncUpdate = async () => {
+
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
     // 获取id
     const { id } = routerParamsInfo.params
-    
+
     let params = new FormData()
     params.append('projectId', id[0])
     params.append('content', JSON.stringify(chartEditStore.getStorageInfo || {}))
@@ -113,17 +114,23 @@ export const useSync = () => {
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
   }
 
-  const syncTiming = setInterval(() => {
-    dataSyncUpdate()
-  }, 15000)
+  // 定时处理
+  const intervalDataSyncUpdate = () => {
+    // 定时获取数据
+    const syncTiming = setInterval(() => {
+      dataSyncUpdate()
+    }, saveInterval * 1000)
 
-  onUnmounted(() => {
-    clearInterval(syncTiming)
-  })
+    // 销毁
+    onUnmounted(() => {
+      clearInterval(syncTiming)
+    })
+  }
 
   return {
     updateComponent,
     dataSyncFetch,
-    dataSyncUpdate
+    dataSyncUpdate,
+    intervalDataSyncUpdate
   }
 }