diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index 3582ee75..1dcacc84 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -58,12 +58,12 @@ </template> <script setup lang="ts"> -import { ref, computed, h, onBeforeUnmount } from 'vue' +import { ref, computed, h, watch } from 'vue' import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils' -import { EditEnum } from '@/enums/pageEnum' +import { EditEnum, ChartEnum } from '@/enums/pageEnum' import { StorageEnum } from '@/enums/storageEnum' import { useRoute } from 'vue-router' import { useSync } from '@/views/chart/hooks/useSync.hook' @@ -111,12 +111,54 @@ function updateToSession(id: string) { } } -onBeforeUnmount((() => { - // 【监听JSON代码 刷新图表】 +function useSyncUpdate() { + // 定义侦听器变量 + let timer: any; const updateFn = (e: any) => updateComponent(e!.detail, true, false) - addEventListener(SavePageEnum.JSON, updateFn) - return () => removeEventListener(SavePageEnum.JSON, updateFn) -})()) + const syncData = () => { + if (routerParamsInfo.name == ChartEnum.CHART_HOME_NAME) { + dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo })) + } + } + + // 开启侦听 + const use = () => { + // 1、定时同步数据 + timer = setInterval(() => { + // 窗口激活并且处于工作台 + document.hasFocus() && syncData() + }, 5000) + // 2、失焦同步数据 + addEventListener('blur', syncData) + + // 【监听JSON代码 刷新工作台图表】 + addEventListener(SavePageEnum.JSON, updateFn) + } + + // 关闭侦听 + const unUse = () => { + clearInterval(timer) + removeEventListener(SavePageEnum.JSON, updateFn) + removeEventListener('blur', syncData) + } + + // 路由变更时处理 + const watchHandler = (toName: any, fromName: any) => { + if (fromName == ChartEnum.CHART_HOME_NAME) { + unUse() + } + if (toName == ChartEnum.CHART_HOME_NAME) { + use() + } + } + return watchHandler +} + +watch( + () => routerParamsInfo.name, + useSyncUpdate(), + { immediate: true } +) // 鼠标悬停定时器 let mouseTime: any = null diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts index 048f4627..fce80e5e 100644 --- a/src/views/chart/hooks/useKeyboard.hook.ts +++ b/src/views/chart/hooks/useKeyboard.hook.ts @@ -1,5 +1,5 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { WinKeyboard, MacKeyboard, MenuEnum, SavePageEnum } from '@/enums/editPageEnum' +import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum' import throttle from 'lodash/throttle' import debounce from 'lodash/debounce' import keymaster from 'keymaster' @@ -23,7 +23,6 @@ export const winKeyboardValue = { [MenuEnum.DELETE]: 'delete', [MenuEnum.BACK]: winCtrlMerge('z'), [MenuEnum.FORWORD]: winCtrlMerge(winShiftMerge('z')), - [MenuEnum.SAVE]: winCtrlMerge('s'), [MenuEnum.GROUP]: winCtrlMerge('g'), [MenuEnum.UN_GROUP]: winCtrlMerge(winShiftMerge('g')), [MenuEnum.LOCK]: winCtrlMerge('l'), @@ -49,7 +48,6 @@ export const macKeyboardValue = { [MenuEnum.DELETE]: macCtrlMerge('backspace'), [MenuEnum.BACK]: macCtrlMerge('z'), [MenuEnum.FORWORD]: macCtrlMerge(macShiftMerge('z')), - [MenuEnum.SAVE]: macCtrlMerge('s'), [MenuEnum.GROUP]: macCtrlMerge('g'), [MenuEnum.UN_GROUP]: macCtrlMerge(macShiftMerge('g')), [MenuEnum.LOCK]: macCtrlMerge('l'), @@ -73,7 +71,6 @@ const winKeyList: Array<string> = [ winKeyboardValue.back, winKeyboardValue.forward, - winKeyboardValue.save, winKeyboardValue.group, winKeyboardValue.unGroup, @@ -99,7 +96,6 @@ const macKeyList: Array<string> = [ macKeyboardValue.back, macKeyboardValue.forward, - macKeyboardValue.save, macKeyboardValue.group, macKeyboardValue.unGroup, @@ -207,11 +203,6 @@ export const useAddKeyboard = () => { case keyboardValue.show: keymaster(e, throttle(() => { chartEditStore.setShow(); return false }, throttleTime)) break; - - // 保存 ct+s - case keyboardValue.save: - keymaster(e, throttle(() => { dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo })); return false }, 200)) - break; } } winKeyList.forEach((key: string) => { diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue index f1507b4b..0e91a38f 100644 --- a/src/views/edit/index.vue +++ b/src/views/edit/index.vue @@ -31,7 +31,7 @@ lineNumbers: 'on', minimap: { enabled: true } }" - /> + /> </n-layout-content> </n-layout> </div> @@ -81,23 +81,30 @@ opener.addEventListener(SavePageEnum.CHART, (e: any) => { content.value = JSON.stringify(e.detail, undefined, 2) }) +// 窗口失焦 + 保存 => 同步数据 document.addEventListener('keydown', function (e) { if (e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) { e.preventDefault() - if (!opener) { - return window['$message'].error('源窗口已关闭,视图同步失败') - } - try { - const detail = JSON.parse(content.value) - delete detail.id - // 保持id不变 - opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail })) - } catch (e) { - window['$message'].error('内容格式有误') - console.log(e) - } + updateSync() } }) +addEventListener('blur', updateSync) + +// 同步更新 +function updateSync() { + if (!opener) { + return window['$message'].error('源窗口已关闭,视图同步失败') + } + try { + const detail = JSON.parse(content.value) + delete detail.id + // 保持id不变 + opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail })) + } catch (e) { + window['$message'].error('内容格式有误') + console.log(e) + } +} </script> <style lang="scss" scoped>