diff --git a/src/components/Pages/ChartItemSetting/index.ts b/src/components/Pages/ChartItemSetting/index.ts index 8745402a..676766e4 100644 --- a/src/components/Pages/ChartItemSetting/index.ts +++ b/src/components/Pages/ChartItemSetting/index.ts @@ -16,7 +16,5 @@ import PositionSetting from './PositionSetting.vue' import SizeSetting from './SizeSetting.vue' // 样式 import StylesSetting from './StylesSetting.vue' -// 事件配置 -import EventSetting from './EventSetting.vue' -export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting, EventSetting } +export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting } diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts index cadb4c94..cd7ef9a9 100644 --- a/src/hooks/useLifeHandler.hook.ts +++ b/src/hooks/useLifeHandler.hook.ts @@ -2,47 +2,47 @@ import { CreateComponentType, EventLife } from '@/packages/index.d' import * as echarts from 'echarts' // 所有图表组件集合对象 -const components: {[K in string]?: any} = {}; +const components: { [K in string]?: any } = {} // 项目提供的npm 包变量 export const npmPkgs = { echarts } export const useLifeHandler = (chartConfig: CreateComponentType) => { - const events = chartConfig.events || {} - // 生成生命周期事件 - const lifeEvents = { - [EventLife.BEFORE_MOUNT] (e:any) { - // 存储组件 - components[chartConfig.id] = e.component - const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim() - generateFunc(fnStr, e) - }, - [EventLife.MOUNTED] (e:any){ - const fnStr = (events[EventLife.MOUNTED] || '').trim() - generateFunc(fnStr, e) - }, + const events = chartConfig.events || {} + // 生成生命周期事件 + const lifeEvents = { + [EventLife.BEFORE_MOUNT](e: any) { + // 存储组件 + components[chartConfig.id] = e.component + const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim() + generateFunc(fnStr, e) + }, + [EventLife.MOUNTED](e: any) { + const fnStr = (events[EventLife.MOUNTED] || '').trim() + generateFunc(fnStr, e) } - return lifeEvents + } + return lifeEvents } /** - * + * * @param fnStr 用户方法体代码 * @param e 执行生命周期的动态组件实例 */ - function generateFunc(fnStr: string, e: any){ - try { - Function(` - "use strict"; - return ( - async function(e, components, node_modules){ - const {${Object.keys(npmPkgs).join()}} = node_modules; - ${fnStr} - } - )`)().bind(e?.component) - // 便于拷贝echarts示例时设置option 的formatter等相关内容 - (e, components, npmPkgs); - } catch (error) { - console.error(error) - } -} \ No newline at end of file +function generateFunc(fnStr: string, e: any) { + try { + Function(` + "use strict"; + return ( + async function(e, components, node_modules){ + const {${Object.keys(npmPkgs).join()}} = node_modules; + ${fnStr} + } + )`)().bind(e?.component) + // 便于拷贝echarts示例时设置option 的formatter等相关内容 + e, components, npmPkgs + } catch (error) { + console.error(error) + } +} diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 8bce57fb..35fc0cbf 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -90,6 +90,12 @@ export const BlendModeEnumList = [ { label: '亮度', value: 'luminosity' } ] +// vue3 生命周期事件 +export enum EventLife { + BEFORE_MOUNT = 'vnodeBeforeMount', + MOUNTED = 'vnodeMounted' +} + // 组件实例类 export interface PublicConfigType { id: string @@ -120,12 +126,6 @@ export interface PublicConfigType { } } -// vue3 生命周期事件 -export enum EventLife { - BEFORE_MOUNT = 'vnodeBeforeMount', - MOUNTED = 'vnodeMounted' -} - export interface CreateComponentType extends PublicConfigType, requestConfig { key: string chartConfig: ConfigType diff --git a/src/settings/animations/index.ts b/src/settings/animations/index.ts index 5d588fc6..65106a74 100644 --- a/src/settings/animations/index.ts +++ b/src/settings/animations/index.ts @@ -11,7 +11,6 @@ export const animations = [ { label: '放大晃动缩小', value: 'tada' }, { label: '扇形摇摆', value: 'wobble' }, { label: '左右上下晃动', value: 'jello' }, - { label: 'Y轴旋转', value: 'flip' } ] }, { diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts similarity index 100% rename from src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue similarity index 100% rename from src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue diff --git a/src/components/Pages/ChartItemSetting/EventSetting.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue similarity index 55% rename from src/components/Pages/ChartItemSetting/EventSetting.vue rename to src/views/chart/ContentConfigurations/components/ChartEvent/index.vue index f44645ff..887f9e12 100644 --- a/src/components/Pages/ChartItemSetting/EventSetting.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue @@ -1,26 +1,29 @@ + \ No newline at end of file + diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index 5e5d8cd1..0f8a8609 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -75,13 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore()) const { setItem } = useChartLayoutStore() const chartEditStore = useChartEditStore() -const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, CodeSlashIcon } = icon.ionicons5 +const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue')) const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue')) const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue')) const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue')) -const ChartEvent = loadAsyncComponent(() => import('@/components/Pages/ChartItemSetting/EventSetting.vue')) +const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue')) const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue')) const collapsed = ref(getDetails.value) @@ -153,7 +153,7 @@ const chartsTabList = [ { key: TabsEnum.CHART_EVENT, title: '事件', - icon: CodeSlashIcon, + icon: RocketIcon, render: ChartEvent } ]