diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts index 5b275ba0..917a5064 100644 --- a/src/packages/components/Charts/Lines/LineCommon/config.ts +++ b/src/packages/components/Charts/Lines/LineCommon/config.ts @@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { LineCommonConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] @@ -47,7 +48,7 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineCommonConfig.key - public chartConfig = LineCommonConfig + public chartConfig = cloneDeep(LineCommonConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts index dea1397a..592b704d 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts +++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts @@ -3,6 +3,7 @@ import { LineGradientSingleConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { graphic } from 'echarts/core' import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] @@ -58,7 +59,7 @@ const options = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineGradientSingleConfig.key - public chartConfig = LineGradientSingleConfig + public chartConfig = cloneDeep(LineGradientSingleConfig) // 图表配置项 public option = echartOptionProfixHandle(options, includes) } diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts index 2037ce5f..d470bab5 100644 --- a/src/packages/components/Charts/Lines/LineGradients/config.ts +++ b/src/packages/components/Charts/Lines/LineGradients/config.ts @@ -3,6 +3,7 @@ import { LineGradientsConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { graphic } from 'echarts/core' import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] @@ -85,7 +86,7 @@ const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineGradientsConfig.key - public chartConfig = LineGradientsConfig + public chartConfig = cloneDeep(LineGradientsConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts index fbeb875f..abcb2a31 100644 --- a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts +++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts @@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { LineLinearSingleConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] @@ -54,7 +55,7 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineLinearSingleConfig.key - public chartConfig = LineLinearSingleConfig + public chartConfig = cloneDeep(LineLinearSingleConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Maps/MapBase/config.ts b/src/packages/components/Charts/Maps/MapBase/config.ts index 36663256..888fe6b7 100644 --- a/src/packages/components/Charts/Maps/MapBase/config.ts +++ b/src/packages/components/Charts/Maps/MapBase/config.ts @@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { MapBaseConfig } from './index' import { chartInitConfig } from '@/settings/designSetting' import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = [] @@ -151,6 +152,6 @@ export const MapDefaultConfig = { ...option } export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = MapBaseConfig.key public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 } - public chartConfig = MapBaseConfig + public chartConfig = cloneDeep(MapBaseConfig) public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Pies/PieCircle/config.ts b/src/packages/components/Charts/Pies/PieCircle/config.ts index 15954a3d..cbee4975 100644 --- a/src/packages/components/Charts/Pies/PieCircle/config.ts +++ b/src/packages/components/Charts/Pies/PieCircle/config.ts @@ -1,6 +1,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { PieCircleConfig } from './index' import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' export const includes = [] @@ -57,7 +58,7 @@ const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = PieCircleConfig.key - public chartConfig = PieCircleConfig + public chartConfig = cloneDeep(PieCircleConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts index 1af07f40..068450b6 100644 --- a/src/packages/components/Charts/Pies/PieCommon/config.ts +++ b/src/packages/components/Charts/Pies/PieCommon/config.ts @@ -1,6 +1,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { PieCommonConfig } from './index' import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend'] @@ -61,7 +62,7 @@ const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = PieCommonConfig.key - public chartConfig = PieCommonConfig + public chartConfig = cloneDeep(PieCommonConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts new file mode 100644 index 00000000..73ea2eee --- /dev/null +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts @@ -0,0 +1,61 @@ +import { watch } from 'vue' +import { useRoute } from 'vue-router' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { useSync } from '@/views/chart/hooks/useSync.hook' +import { ChartEnum } from '@/enums/pageEnum' +import { SavePageEnum } from '@/enums/editPageEnum' +import { editToJsonInterval } from '@/settings/designSetting' + +const { updateComponent } = useSync() +const chartEditStore = useChartEditStore() + +// 侦听器更新 +const useSyncUpdateHandle = () => { + const routerParamsInfo = useRoute() + // 定义侦听器变量 + let timer: any + const updateFn = (e: any) => updateComponent(e!.detail, true, false) + 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() + }, editToJsonInterval) + // 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 +} + +export const useSyncUpdate = () => { + const routerParamsInfo = useRoute() + watch(() => routerParamsInfo.name, useSyncUpdateHandle(), { immediate: true }) +} \ No newline at end of file diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index 9c5627ea..f2d2d97d 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -62,20 +62,18 @@