diff --git a/src/packages/index.ts b/src/packages/index.ts index 32d04bc..8549843 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -1,23 +1,37 @@ -import { ChartList } from '@/packages/components/Charts/index' -import { DecorateList } from '@/packages/components/Decorates/index' -import { InformationList } from '@/packages/components/Informations/index' -import { TableList } from '@/packages/components/Tables/index' -import { PhotoList } from '@/packages/components/Photos/index' -import { IconList } from '@/packages/components/Icons/index' -import { DiyList } from '@/packages/components/Diy/index' -import { UnitsList } from '@/packages/components/Units/index' -import { ZhiganList } from '@/packages/components/Zhigan/index' -import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d' +import { ChartList } from '@/packages/components/Charts/index'; +import { DecorateList } from '@/packages/components/Decorates/index'; +import { InformationList } from '@/packages/components/Informations/index'; +import { TableList } from '@/packages/components/Tables/index'; +import { PhotoList } from '@/packages/components/Photos/index'; +import { IconList } from '@/packages/components/Icons/index'; +import { DiyList } from '@/packages/components/Diy/index'; +import { UnitsList } from '@/packages/components/Units/index'; +import { ZhiganList } from '@/packages/components/Zhigan/index'; +import { + PackagesCategoryEnum, + PackagesType, + ConfigType, + FetchComFlagType, +} from '@/packages/index.d'; -const configModules: Record = import.meta.glob('./components/**/config.vue', { - eager: true -}) -const indexModules: Record = import.meta.glob('./components/**/index.vue', { - eager: true -}) -const imagesModules: Record = import.meta.glob('../assets/images/chart/**', { - eager: true -}) +const configModules: Record = import.meta.glob( + './components/**/config.vue', + { + eager: true, + }, +); +const indexModules: Record = import.meta.glob( + './components/**/index.vue', + { + eager: true, + }, +); +const imagesModules: Record = import.meta.glob( + '../assets/images/chart/**', + { + eager: true, + }, +); // * 所有图表 export let packagesList: PackagesType = { @@ -30,33 +44,36 @@ export let packagesList: PackagesType = { [PackagesCategoryEnum.DIY]: DiyList, [PackagesCategoryEnum.UNITS]: UnitsList, [PackagesCategoryEnum.ZHIGAN]: ZhiganList, -} +}; // 组件缓存, 可以大幅度提升组件加载速度 -const componentCacheMap = new Map() +const componentCacheMap = new Map(); const loadConfig = (packageName: string, categoryName: string, keyName: string) => { - const key = packageName + categoryName + keyName + const key = packageName + categoryName + keyName; if (!componentCacheMap.has(key)) { - componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)) + componentCacheMap.set( + key, + import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`), + ); } - return componentCacheMap.get(key) -} + return componentCacheMap.get(key); +}; /** * * 获取目标组件配置信息 * @param targetData */ export const createComponent = async (targetData: ConfigType) => { - const { redirectComponent, category, key } = targetData + const { redirectComponent, category, key } = targetData; // redirectComponent 是给图片组件库和图标组件库使用的 if (redirectComponent) { - const [packageName, categoryName, keyName] = redirectComponent.split('/') - const redirectChart = await loadConfig(packageName, categoryName, keyName) - return new redirectChart.default() + const [packageName, categoryName, keyName] = redirectComponent.split('/'); + const redirectChart = await loadConfig(packageName, categoryName, keyName); + return new redirectChart.default(); } - const chart = await loadConfig(targetData.package, category, key) - return new chart.default() -} + const chart = await loadConfig(targetData.package, category, key); + return new chart.default(); +}; /** * * 获取组件 @@ -64,52 +81,52 @@ export const createComponent = async (targetData: ConfigType) => { * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件 */ const fetchComponent = (chartName: string, flag: FetchComFlagType) => { - const module = flag === FetchComFlagType.VIEW ? indexModules : configModules + const module = flag === FetchComFlagType.VIEW ? indexModules : configModules; for (const key in module) { - const urlSplit = key.split('/') + const urlSplit = key.split('/'); if (urlSplit[urlSplit.length - 2] === chartName) { - return module[key] + return module[key]; } } -} +}; /** * * 获取展示组件 * @param {ConfigType} dropData 配置项 */ export const fetchChartComponent = (dropData: ConfigType) => { - const { key } = dropData - return fetchComponent(key, FetchComFlagType.VIEW)?.default -} + const { key } = dropData; + return fetchComponent(key, FetchComFlagType.VIEW)?.default; +}; /** * * 获取配置组件 * @param {ConfigType} dropData 配置项 */ export const fetchConfigComponent = (dropData: ConfigType) => { - const { key } = dropData - return fetchComponent(key, FetchComFlagType.CONFIG)?.default -} + const { key } = dropData; + return fetchComponent(key, FetchComFlagType.CONFIG)?.default; +}; /** * * 获取图片内容 * @param {ConfigType} targetData 配置项 */ export const fetchImages = async (targetData?: ConfigType) => { - if (!targetData) return '' + if (!targetData) return ''; // 正则判断图片是否为 url，是则直接返回该 url - if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image + if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image; // 新数据动态处理 - const { image } = targetData + const { image } = targetData; // 兼容旧数据 - if (image.includes('@') || image.includes('base64')) return image + if (image.includes('@') || image.includes('base64')) return image; - const imageName = image.substring(image.lastIndexOf('/') + 1) + const imageName = image.substring(image.lastIndexOf('/') + 1); for (const key in imagesModules) { - const urlSplit = key.split('/') + const urlSplit = key.split('/'); if (urlSplit[urlSplit.length - 1] === imageName) { - return imagesModules[key]?.default + return imagesModules[key]?.default; } } - return '' -} + return ''; +}; diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 82132c9..043fc46 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -587,52 +587,7 @@ export const useChartEditStore = defineStore({ loadingError(); } }, - // 导入画布 - setCopyData(data: any) { - try { - loadingStart(); - const recordCharts = JSON.parse(data); - if (recordCharts === undefined) { - loadingFinish(); - return; - } - const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => { - e = cloneDeep(e); - e.attr.x = this.getMousePosition.startX; - e.attr.y = this.getMousePosition.startY; - // 外层生成新 id - e.id = getUUID(); - // 分组列表生成新 id - if (e.isGroup) { - (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => { - item.id = getUUID(); - }); - } - - return e; - }; - const isCut = recordCharts.type === HistoryActionTypeEnum.CUT; - const targetList = Array.isArray(recordCharts.charts) - ? recordCharts.charts - : [recordCharts.charts]; - // 多项 - targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => { - this.addComponentList(parseHandle(e), undefined, true); - // 剪切需删除原数据 - if (isCut) { - this.setTargetSelectChart(e.id); - this.removeComponentList(undefined, true); - } - }); - if (isCut) this.setRecordChart(undefined); - window['$message'].success('导入成功！'); - loadingFinish(); - } catch (value) { - window['$message'].error('导入失败，请检查数据是否正确！'); - loadingError(); - } - }, // * 撤回/前进 目标处理 setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) { // 处理画布 diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index 9ea265c..d937c64 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue @@ -17,13 +17,24 @@ @click="clickHandle(item)" >
- + {{ item.title }}
- +
@@ -34,7 +45,11 @@
-
+
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index ff34d90..8e342a9 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -131,6 +131,11 @@ import { BtnListType, TypeEnum } from './index.d'; import { icon } from '@/plugins'; import { MonacoEditor } from '@/components/Pages/MonacoEditor'; + import { getUUID, loadingStart, loadingFinish, loadingError, componentInstall } from '@/utils'; + import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'; + import cloneDeep from 'lodash/cloneDeep'; + import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'; + import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'; const { DownloadIcon, @@ -243,9 +248,69 @@ }; // 导入画布 const saveCopyData = () => { - chartEditStore.setCopyData(copyValue.value); + setCopyData(copyValue.value); closeModel(); }; + // 导入画布 + const setCopyData = (data: any) => { + try { + loadingStart(); + const recordCharts = JSON.parse(data); + + if (recordCharts === undefined) { + loadingFinish(); + return; + } + const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => { + e = cloneDeep(e); + e.attr.x = chartEditStore.getMousePosition.startX; + e.attr.y = chartEditStore.getMousePosition.startY; + // 外层生成新 id + e.id = getUUID(); + // 分组列表生成新 id + if (e.isGroup) { + (e as CreateComponentGroupType).groupList.forEach(async (item: CreateComponentType) => { + item.id = getUUID(); + }); + } + + return e; + }; + const createComponentInstall = (e) => { + if (e.isGroup) { + // 分组 + e.groupList.forEach(async (item) => { + // // 动态注册图表组件 + componentInstall(item.chartConfig.chartKey, fetchChartComponent(item.chartConfig)); + componentInstall(item.chartConfig.conKey, fetchConfigComponent(item.chartConfig)); + }); + } else { + componentInstall(e.chartConfig.chartKey, fetchChartComponent(e.chartConfig)); + componentInstall(e.chartConfig.conKey, fetchConfigComponent(e.chartConfig)); + } + }; + const isCut = recordCharts.type === HistoryActionTypeEnum.CUT; + const targetList = Array.isArray(recordCharts.charts) + ? recordCharts.charts + : [recordCharts.charts]; + // 多项 + targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => { + createComponentInstall(e); + chartEditStore.addComponentList(parseHandle(e), undefined, true); + // 剪切需删除原数据 + if (isCut) { + chartEditStore.setTargetSelectChart(e.id); + chartEditStore.removeComponentList(undefined, true); + } + }); + if (isCut) chartEditStore.setRecordChart(undefined); + window['$message'].success('导入成功！'); + loadingFinish(); + } catch (value) { + window['$message'].error('导入失败，请检查数据是否正确！'); + loadingError(); + } + }; // 配置列表 const btnList: BtnListType[] = [ {