diff --git a/src/components/Pages/ChartGlobImage/index.ts b/src/components/Pages/ChartGlobImage/index.ts new file mode 100644 index 00000000..9203fcd7 --- /dev/null +++ b/src/components/Pages/ChartGlobImage/index.ts @@ -0,0 +1,3 @@ +import ChartGlobImage from './index.vue' + +export { ChartGlobImage } diff --git a/src/views/chart/ContentCharts/components/ChartsItemImage/index.vue b/src/components/Pages/ChartGlobImage/index.vue similarity index 76% rename from src/views/chart/ContentCharts/components/ChartsItemImage/index.vue rename to src/components/Pages/ChartGlobImage/index.vue index d5ba9f18..efd6bf41 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemImage/index.vue +++ b/src/components/Pages/ChartGlobImage/index.vue @@ -3,7 +3,7 @@ </template> <script setup lang="ts"> -import { ref, PropType } from 'vue' +import { ref, PropType, watch } from 'vue' import { fetchImages } from '@/packages' import { ConfigType } from '@/packages/index.d' @@ -11,7 +11,7 @@ const props = defineProps({ chartConfig: { type: Object as PropType<ConfigType>, required: true - }, + } }) const imageInfo = ref('') @@ -20,5 +20,12 @@ const imageInfo = ref('') const fetchImageUrl = async () => { imageInfo.value = await fetchImages(props.chartConfig) } -fetchImageUrl() + +watch( + () => props.chartConfig.key, + () => fetchImageUrl(), + { + immediate: true + } +) </script> diff --git a/src/packages/index.ts b/src/packages/index.ts index d568afcb..4f530faa 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -63,7 +63,8 @@ export const fetchConfigComponent = (dropData: ConfigType) => { * * 获取图片内容 * @param {ConfigType} targetData 配置项 */ -export const fetchImages = async (targetData: ConfigType) => { +export const fetchImages = async (targetData?: ConfigType) => { + if (!targetData) return '' // 新数据动态处理 const { image, package: targetDataPackage } = targetData // 兼容旧数据 diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 2fc3edba..937e6a90 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -298,6 +298,12 @@ export const JSONParse = (data: string) => { return JSON.parse(data, (k, v) => { if (typeof v === 'string' && v.indexOf && (v.indexOf('function') > -1 || v.indexOf('=>') > -1)) { return eval(`(function(){return ${v}})()`) + } else if (typeof v === 'string' && v.indexOf && (v.indexOf('return ') > -1)) { + const baseLeftIndex = v.indexOf('(') + if (baseLeftIndex > -1) { + const newFn = `function ${v.substring(baseLeftIndex)}` + return eval(`(function(){return ${newFn}})()`) + } } return v }) diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index b6b9beeb..7ca3b1b0 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue @@ -22,7 +22,7 @@ </n-text> </div> <div class="list-center go-flex-center go-transition"> - <charts-item-image class="list-img" :chartConfig="item"></charts-item-image> + <chart-glob-image class="list-img" :chartConfig="item"></chart-glob-image> </div> <div class="list-bottom"> <n-text class="list-bottom-text" depth="3"> @@ -37,7 +37,7 @@ <script setup lang="ts"> import { PropType, watch, ref, Ref, computed, nextTick } from 'vue' import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index' -import { ChartsItemImage } from '../ChartsItemImage' +import { ChartGlobImage } from '@/components/Pages/ChartGlobImage' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' import { ChartModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' @@ -47,6 +47,7 @@ import { DragKeyEnum } from '@/enums/editPageEnum' import { createComponent } from '@/packages' import { ConfigType, CreateComponentType } from '@/packages/index.d' import { fetchConfigComponent, fetchChartComponent } from '@/packages/index' + import omit from 'lodash/omit' const chartEditStore = useChartEditStore() diff --git a/src/views/chart/ContentCharts/components/ChartsItemImage/index.ts b/src/views/chart/ContentCharts/components/ChartsItemImage/index.ts deleted file mode 100644 index 698542b4..00000000 --- a/src/views/chart/ContentCharts/components/ChartsItemImage/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import ChartsItemImage from './index.vue' - -export { ChartsItemImage } diff --git a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue index f0684c86..f1a25ddd 100644 --- a/src/views/chart/ContentCharts/components/ChartsSearch/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsSearch/index.vue @@ -37,7 +37,7 @@ :title="item.title" @click="selectChartHandle(item)" > - <img class="list-item-img" v-lazy="item.image" alt="展示图" /> + <chart-glob-image class="list-item-img" :chartConfig="item"></chart-glob-image> <n-text class="list-item-fs" depth="2">{{ item.title }}</n-text> </div> </n-scrollbar> @@ -77,6 +77,7 @@ import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayou import { isString, addEventListener, removeEventListener } from '@/utils' import { fetchConfigComponent, fetchChartComponent } from '@/packages/index' import { componentInstall, loadingStart, loadingFinish, loadingError } from '@/utils' +import { ChartGlobImage } from '@/components/Pages/ChartGlobImage' const props = defineProps({ menuOptions: {