From 790cc7b878cfb8d8effa7fd64afb22d649b21d7f Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Thu, 10 Mar 2022 14:12:26 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E6=96=B9=E5=BC=8F,=E5=8E=BB=E9=99=A4config=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=8A=E7=9A=84node=E6=8C=87=E5=90=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Charts/Bars/BarCommon/config.ts | 3 +-- .../components/Charts/Bars/BarCommon/index.ts | 9 +++------ .../components/Charts/Bars/BarCrossrange/config.ts | 7 +++---- .../components/Charts/Bars/BarCrossrange/index.ts | 11 ++++------- src/packages/components/Charts/Bars/index.ts | 4 ++-- .../components/Charts/Lines/LineCommon/config.ts | 3 +-- .../components/Charts/Lines/LineCommon/index.ts | 9 +++------ .../Charts/Lines/LineGradientSingle/config.ts | 3 +-- .../Charts/Lines/LineGradientSingle/index.ts | 9 +++------ .../components/Charts/Lines/LineGradients/config.ts | 3 +-- .../components/Charts/Lines/LineGradients/index.ts | 9 +++------ .../components/Charts/Pies/PieCommon/config.ts | 3 +-- .../components/Charts/Pies/PieCommon/index.ts | 7 ++----- src/packages/index.d.ts | 3 +-- src/packages/index.ts | 11 +---------- .../chart/ContentCharts/components/ItemBox/index.vue | 7 ++++--- src/views/chart/ContentEdit/hooks/useDrag.hook.ts | 3 ++- src/views/chart/ContentEdit/index.vue | 2 +- 18 files changed, 37 insertions(+), 69 deletions(-) diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts index d767a2c5..45430ac4 100644 --- a/src/packages/components/Charts/Bars/BarCommon/config.ts +++ b/src/packages/components/Charts/Bars/BarCommon/config.ts @@ -1,7 +1,6 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public' import { BarCommonConfig } from './index' import { CreateComponentType } from '@/packages/index.d' -import omit from 'lodash/omit' import cloneDeep from 'lodash/cloneDeep' export const includes = ['legend', 'xAxis', 'yAxis'] @@ -54,7 +53,7 @@ export const option = { export default class Config extends publicConfig implements CreateComponentType { public key = BarCommonConfig.key - public chartConfig = omit(cloneDeep(BarCommonConfig), ['node', 'conNode']) + public chartConfig = cloneDeep(BarCommonConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Bars/BarCommon/index.ts b/src/packages/components/Charts/Bars/BarCommon/index.ts index d0868f94..592259f7 100644 --- a/src/packages/components/Charts/Bars/BarCommon/index.ts +++ b/src/packages/components/Charts/Bars/BarCommon/index.ts @@ -1,17 +1,14 @@ -import BarCommon from './index.vue' -import Configuration from './config.vue' import image from '@/assets/images/chart/charts/bar_x.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' export const BarCommonConfig: ConfigType = { - key: 'VBarCommon', + key: 'BarCommon', + chartKey: 'VBarCommon', conKey: 'VCBarCommon', title: '柱状图', category: ChatCategoryEnum.BAR, categoryName: ChatCategoryEnumName.BAR, package: PackagesCategoryEnum.CHARTS, - node: () => BarCommon, - conNode: () => Configuration, - image: image, + image } diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts index 5ab863b6..5ccc5b75 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts +++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts @@ -1,7 +1,6 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public' -import { BarCrossrangefig } from './index' +import { BarCrossrangeConfig } from './index' import { CreateComponentType } from '@/packages/index.d' -import omit from 'lodash/omit' import cloneDeep from 'lodash/cloneDeep' export const includes = ['legend', 'xAxis', 'yAxis'] @@ -53,8 +52,8 @@ export const option = { export default class Config extends publicConfig implements CreateComponentType { - public key: string = BarCrossrangefig.key - public chartConfig = omit(cloneDeep(BarCrossrangefig), ['node', 'conNode']) + public key: string = BarCrossrangeConfig.key + public chartConfig = cloneDeep(BarCrossrangeConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.ts b/src/packages/components/Charts/Bars/BarCrossrange/index.ts index 3e41dce1..6be2ad01 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/index.ts +++ b/src/packages/components/Charts/Bars/BarCrossrange/index.ts @@ -1,17 +1,14 @@ -import BarCrossrange from './index.vue' -import Configuration from './config.vue' import image from '@/assets/images/chart/charts/bar_y.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' -export const BarCrossrangefig: ConfigType = { - key: 'VBarCrossrange', +export const BarCrossrangeConfig: ConfigType = { + key: 'BarCrossrange', + chartKey: 'VBarCrossrange', conKey: 'VCBarCrossrange', title: '横向柱状图', category: ChatCategoryEnum.BAR, categoryName: ChatCategoryEnumName.BAR, package: PackagesCategoryEnum.CHARTS, - node: () => BarCrossrange, - conNode: () => Configuration, - image: image + image } diff --git a/src/packages/components/Charts/Bars/index.ts b/src/packages/components/Charts/Bars/index.ts index 82c295c6..9613b804 100644 --- a/src/packages/components/Charts/Bars/index.ts +++ b/src/packages/components/Charts/Bars/index.ts @@ -1,4 +1,4 @@ import { BarCommonConfig } from './BarCommon/index' -import { BarCrossrangefig } from './BarCrossrange/index' +import { BarCrossrangeConfig } from './BarCrossrange/index' -export default [BarCommonConfig, BarCrossrangefig] +export default [BarCommonConfig, BarCrossrangeConfig] diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts index 95f44f03..2e3871ba 100644 --- a/src/packages/components/Charts/Lines/LineCommon/config.ts +++ b/src/packages/components/Charts/Lines/LineCommon/config.ts @@ -1,7 +1,6 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public' import { LineCommonConfig } from './index' import { CreateComponentType } from '@/packages/index.d' -import omit from 'lodash/omit' export const includes = ['legend', 'xAxis', 'yAxis'] @@ -58,7 +57,7 @@ export const option = { export default class Config extends publicConfig implements CreateComponentType { public key: string = LineCommonConfig.key - public chartConfig = omit(LineCommonConfig, ['node', 'conNode']) + public chartConfig = LineCommonConfig // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Lines/LineCommon/index.ts b/src/packages/components/Charts/Lines/LineCommon/index.ts index 95292f99..337b57e7 100644 --- a/src/packages/components/Charts/Lines/LineCommon/index.ts +++ b/src/packages/components/Charts/Lines/LineCommon/index.ts @@ -1,17 +1,14 @@ -import LineCommon from './index.vue' -import Configuration from './config.vue' import image from '@/assets/images/chart/charts/line.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' export const LineCommonConfig: ConfigType = { - key: 'VLineCommon', + key: 'LineCommon', + chartKey: 'VLineCommon', conKey: 'VCLineCommon', title: '折线图', category: ChatCategoryEnum.LINE, categoryName: ChatCategoryEnumName.LINE, package: PackagesCategoryEnum.CHARTS, - node: () => LineCommon, - conNode: () => Configuration, - image: image + image } diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts index ee0bc23d..559ab6c2 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts +++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts @@ -2,7 +2,6 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public' import { LineGradientSingleConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { graphic } from 'echarts/core' -import omit from 'lodash/omit' export const includes = ['legend', 'xAxis', 'yAxis'] @@ -57,7 +56,7 @@ const options = { export default class Config extends publicConfig implements CreateComponentType { public key: string = LineGradientSingleConfig.key - public chartConfig = omit(LineGradientSingleConfig, ['node', 'conNode']) + public chartConfig = LineGradientSingleConfig // 图表配置项 public option = echartOptionProfixHandle(options, includes) } diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.ts b/src/packages/components/Charts/Lines/LineGradientSingle/index.ts index 61712e1a..32cd84fc 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/index.ts +++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.ts @@ -1,17 +1,14 @@ -import LineGradientSingle from './index.vue' -import Configuration from './config.vue' import image from '@/assets/images/chart/charts/line_gradient_single.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' export const LineGradientSingleConfig: ConfigType = { - key: 'VLineGradientSingle', + key: 'LineGradientSingle', + chartKey: 'VLineGradientSingle', conKey: 'VCLineGradientSingle', title: '折线面积图', category: ChatCategoryEnum.LINE, categoryName: ChatCategoryEnumName.LINE, package: PackagesCategoryEnum.CHARTS, - node: () => LineGradientSingle, - conNode: () => Configuration, - image: image + image } diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts index 9f8a41a0..7f1ea302 100644 --- a/src/packages/components/Charts/Lines/LineGradients/config.ts +++ b/src/packages/components/Charts/Lines/LineGradients/config.ts @@ -2,7 +2,6 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public' import { LineGradientsConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { graphic } from 'echarts/core' -import omit from 'lodash/omit' export const includes = ['legend', 'xAxis', 'yAxis'] @@ -85,7 +84,7 @@ const option = { export default class Config extends publicConfig implements CreateComponentType { public key: string = LineGradientsConfig.key - public chartConfig = omit(LineGradientsConfig, ['node', 'conNode']) + public chartConfig = LineGradientsConfig // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Lines/LineGradients/index.ts b/src/packages/components/Charts/Lines/LineGradients/index.ts index b6783798..c0ccd0f4 100644 --- a/src/packages/components/Charts/Lines/LineGradients/index.ts +++ b/src/packages/components/Charts/Lines/LineGradients/index.ts @@ -1,17 +1,14 @@ -import LineGradients from './index.vue' -import Configuration from './config.vue' import image from '@/assets/images/chart/charts/line_gradient2.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' export const LineGradientsConfig: ConfigType = { - key: 'VLineGradients', + key: 'LineGradients', + chartKey: 'VLineGradients', conKey: 'VCLineGradients', title: '折线面积图', category: ChatCategoryEnum.LINE, categoryName: ChatCategoryEnumName.LINE, package: PackagesCategoryEnum.CHARTS, - node: () => LineGradients, - conNode: () => Configuration, - image: image + image } diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts index b9c288fd..27f1653a 100644 --- a/src/packages/components/Charts/Pies/PieCommon/config.ts +++ b/src/packages/components/Charts/Pies/PieCommon/config.ts @@ -1,7 +1,6 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public' import { PieCommonConfig } from './index' import { CreateComponentType } from '@/packages/index.d' -import omit from 'lodash/omit' export const includes = ['legend'] @@ -54,7 +53,7 @@ const option = { export default class Config extends publicConfig implements CreateComponentType { public key: string = PieCommonConfig.key - public chartConfig = omit(PieCommonConfig, ['node', 'conNode']) + public chartConfig = PieCommonConfig // 图表配置项 public option = echartOptionProfixHandle(option, includes) diff --git a/src/packages/components/Charts/Pies/PieCommon/index.ts b/src/packages/components/Charts/Pies/PieCommon/index.ts index 9e66c42b..9efaee72 100644 --- a/src/packages/components/Charts/Pies/PieCommon/index.ts +++ b/src/packages/components/Charts/Pies/PieCommon/index.ts @@ -1,17 +1,14 @@ -import PieCommon from './index.vue' -import Configuration from './config.vue' import image from '@/assets/images/chart/charts/pie.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' export const PieCommonConfig: ConfigType = { - key: 'VPieCommon', + key: 'PieCommon', + chartKey: 'VPieCommon', conKey: 'VCPieCommon', title: '饼图', category: ChatCategoryEnum.PIE, categoryName: ChatCategoryEnumName.PIE, package: PackagesCategoryEnum.CHARTS, - node: () => PieCommon, - conNode: () => Configuration, image } diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 6516d481..00b7b97d 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -4,13 +4,12 @@ import { GlobalThemeJsonType } from '@/settings/chartThemes/index' // 组件配置 export type ConfigType = { key: string + chartKey: string, conKey: string, title: string category: string categoryName: string package: string - node: () => Component - conNode: () => Component image: string | (() => Promise) } diff --git a/src/packages/index.ts b/src/packages/index.ts index e012a8e0..2d892beb 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -21,20 +21,12 @@ export let packagesList: PackagesType = { [PackagesCategoryEnum.DECORATES]: DecorateList } -export const packgeInstall = (app:App) => { - ChartList.forEach(e=>{ - console.log(e) - app.component(e.key, e.node) - }) -} - /** * * 获取目标拖拽组件配置信息 * @param dropData */ export const createComponent = async (dropData: ConfigType) => { - const { category } = dropData - const key = dropData.key.substring(1) + const { category, key } = dropData const chart = await import(`./components/${dropData.package}/${category}/${key}/config.ts`) return new chart.default() } @@ -45,7 +37,6 @@ export const packgeInstall = (app:App) => { * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件 */ const fetchComponent = (chartName: string, flag: FetchComFlagType) => { - chartName = chartName.substring(1) const module = flag === FetchComFlagType.VIEW ? indexModules: configModules for (const key in module) { const urlSplit = key.split('/') diff --git a/src/views/chart/ContentCharts/components/ItemBox/index.vue b/src/views/chart/ContentCharts/components/ItemBox/index.vue index 1086538f..16f80108 100644 --- a/src/views/chart/ContentCharts/components/ItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ItemBox/index.vue @@ -25,6 +25,7 @@ import { MacOsControlBtn } from '@/components/MacOsControlBtn/index' import { componentInstall } from '@/utils' import { DragKeyEnum } from '@/enums/editPageEnum' import { ConfigType } from '@/packages/index.d' +import { fetchConfigComponent, fetchChartComponent } from '@/packages/index' import omit from 'lodash/omit' defineProps({ @@ -37,10 +38,10 @@ defineProps({ // 拖拽处理 const handleDragStart = (e: DragEvent, item: ConfigType) => { // 动态注册图表组件 - componentInstall(item.key, item.node()) - componentInstall(item.conKey, item.conNode()) + componentInstall(item.chartKey, fetchChartComponent(item)) + componentInstall(item.conKey, fetchConfigComponent(item)) // 将配置项绑定到拖拽属性上 - e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'conNode', 'image']))) + e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['image']))) } diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index da0e69d5..566de81f 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -30,9 +30,10 @@ export const handleDrag = async (e: DragEvent) => { // 设置拖拽状态 chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false) - const dropData: Exclude = JSON.parse( + const dropData: Exclude = JSON.parse( drayDataString ) + // 创建新图表组件 let newComponent: CreateComponentType = await createComponent(dropData) diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 5d6b97cb..5b8d33e7 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -28,7 +28,7 @@ >