feat: 还原实时同步到预览页面的功能

This commit is contained in:
奔跑的面条 2023-04-01 22:00:26 +08:00
parent 47d1dcbc04
commit db7a4801d8
3 changed files with 34 additions and 28 deletions

View File

@ -12,6 +12,7 @@ export enum DragKeyEnum {
// 不同页面保存操作 // 不同页面保存操作
export enum SavePageEnum { export enum SavePageEnum {
CHART = 'SaveChart', CHART = 'SaveChart',
CHART_TO_PREVIEW = 'ChartToPreview',
JSON = 'SaveJSON', JSON = 'SaveJSON',
CLOSE = 'close' CLOSE = 'close'
} }

View File

@ -24,6 +24,11 @@ export const syncData = () => {
}) })
} }
// 同步数据到预览页
export const syncDataToPreview = () => {
dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo }))
}
// 侦听器更新 // 侦听器更新
const useSyncUpdateHandle = () => { const useSyncUpdateHandle = () => {
// 定义侦听器变量 // 定义侦听器变量
@ -48,8 +53,8 @@ const useSyncUpdateHandle = () => {
// document.hasFocus() && syncData() // document.hasFocus() && syncData()
// }, editToJsonInterval) // }, editToJsonInterval)
// 失焦同步数据(暂不开启) // 失焦同步数据
// addEventListener('blur', syncData) addEventListener('blur', syncDataToPreview)
// 监听编辑器保存事件 刷新工作台图表 // 监听编辑器保存事件 刷新工作台图表
addEventListener(SavePageEnum.JSON, updateFn) addEventListener(SavePageEnum.JSON, updateFn)
@ -61,7 +66,7 @@ const useSyncUpdateHandle = () => {
// 关闭侦听 // 关闭侦听
const unUse = () => { const unUse = () => {
// clearInterval(timer) // clearInterval(timer)
// removeEventListener('blur', syncData) removeEventListener('blur', syncDataToPreview)
removeEventListener(SavePageEnum.JSON, updateFn) removeEventListener(SavePageEnum.JSON, updateFn)
} }

View File

@ -1,25 +1,25 @@
<template> <template>
<preview :key="key"></preview> <preview :key="key"></preview>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getSessionStorageInfo } from './utils' import { getSessionStorageInfo } from './utils'
import type { ChartEditStorageType } from './index.d' import type { ChartEditStorageType } from './index.d'
import { SavePageEnum } from '@/enums/editPageEnum' import { SavePageEnum } from '@/enums/editPageEnum'
import { setSessionStorage } from '@/utils' import { setSessionStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum' import { StorageEnum } from '@/enums/storageEnum'
import { ref } from 'vue' import { ref } from 'vue'
import Preview from './index.vue' import Preview from './index.vue'
let key = ref(Date.now()) let key = ref(Date.now())
// -> // ->
;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => { ;[SavePageEnum.JSON, SavePageEnum.CHART_TO_PREVIEW].forEach((saveEvent: string) => {
if (!window.opener) return if (!window.opener) return
window.opener.addEventListener(saveEvent, async (e: any) => { window.opener.addEventListener(saveEvent, async (e: any) => {
const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }]) setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
key.value = Date.now() key.value = Date.now()
}) })
}) })
</script> </script>