diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 91156ac3..0b37bb6a 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -161,17 +161,17 @@ export const useChartEditStore = defineStore({ }, getComponentList(): Array { return this.componentList - }, - // 获取需要存储的数据项 + } + }, + actions: { + // * 获取需要存储的数据项 getStorageInfo(): ChartEditStorage { return { [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig, [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList, [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig } - } - }, - actions: { + }, // * 设置 editCanvas 数据项 setEditCanvas(key: T, value: K) { this.editCanvas[key] = value diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts index 3865742d..60e7133c 100644 --- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts @@ -19,14 +19,14 @@ export const syncData = () => { transformOrigin: 'center', onPositiveCallback: () => { window['$message'].success('正在同步编辑器...') - dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo })) + dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo() })) } }) } // 同步数据到预览页 export const syncDataToPreview = () => { - dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo })) + dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo() })) } // 侦听器更新 diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index 197a82c5..3f7ada41 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -158,7 +158,7 @@ const editHandle = () => { // 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据 const updateToSession = (id: string) => { - const storageInfo = chartEditStore.getStorageInfo + const storageInfo = chartEditStore.getStorageInfo() const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || [] if (sessionStorageInfo?.length) { diff --git a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts index 39e7af13..f465123a 100644 --- a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts +++ b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts @@ -1,41 +1,41 @@ -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { canvasCut, downloadTextFile, JSONStringify } from '@/utils' -const chartEditStore = useChartEditStore() - -// 导出 -export const exportHandle = () => { - // 取消选中 - chartEditStore.setTargetSelectChart(undefined) - - // 导出数据 - downloadTextFile( - JSONStringify(chartEditStore.getStorageInfo || []), - undefined, - 'json' - ) - - // 导出图片 - const range = document.querySelector('.go-edit-range') as HTMLElement - const watermark = document.getElementById('go-edit-watermark') - // 隐藏边距线 - if (!range || !watermark) { - window['$message'].error('导出失败!') - return - } - - // 记录缩放比例 - const scaleTemp = chartEditStore.getEditCanvas.scale - // 百分百展示页面 - chartEditStore.setScale(1, true) - // 展示水印 - watermark.style.display = 'block' - - setTimeout(() => { - canvasCut(range, () => { - // 隐藏水印 - if (watermark) watermark.style.display = 'none' - // 还原页面大小 - chartEditStore.setScale(scaleTemp, true) - }) - }, 600) -} +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { canvasCut, downloadTextFile, JSONStringify } from '@/utils' +const chartEditStore = useChartEditStore() + +// 导出 +export const exportHandle = () => { + // 取消选中 + chartEditStore.setTargetSelectChart(undefined) + + // 导出数据 + downloadTextFile( + JSONStringify(chartEditStore.getStorageInfo() || []), + undefined, + 'json' + ) + + // 导出图片 + const range = document.querySelector('.go-edit-range') as HTMLElement + const watermark = document.getElementById('go-edit-watermark') + // 隐藏边距线 + if (!range || !watermark) { + window['$message'].error('导出失败!') + return + } + + // 记录缩放比例 + const scaleTemp = chartEditStore.getEditCanvas.scale + // 百分百展示页面 + chartEditStore.setScale(1, true) + // 展示水印 + watermark.style.display = 'block' + + setTimeout(() => { + canvasCut(range, () => { + // 隐藏水印 + if (watermark) watermark.style.display = 'none' + // 还原页面大小 + chartEditStore.setScale(scaleTemp, true) + }) + }, 600) +} diff --git a/src/views/chart/ContentHeader/headerRightBtn/index.vue b/src/views/chart/ContentHeader/headerRightBtn/index.vue index 18369413..297ebe43 100644 --- a/src/views/chart/ContentHeader/headerRightBtn/index.vue +++ b/src/views/chart/ContentHeader/headerRightBtn/index.vue @@ -32,7 +32,7 @@ const previewHandle = () => { const { id } = routerParamsInfo.params // id 标识 const previewId = typeof id === 'string' ? id : id[0] - const storageInfo = chartEditStore.getStorageInfo + const storageInfo = chartEditStore.getStorageInfo() const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || [] if (sessionStorageInfo?.length) {