From 889839f685e5d2e7b86954e7e781802c3c247c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BD=98=E6=BD=98?= <97274247@qq.com> Date: Tue, 11 Oct 2022 18:31:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E7=94=9F=E5=91=BD?= =?UTF-8?q?=E5=91=A8=E6=9C=9F=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Pages/ChartItemSetting/EventSetting.vue | 26 ++ .../Pages/ChartItemSetting/index.ts | 4 +- src/hooks/index.ts | 3 +- src/hooks/useLifeHandler.hook.ts | 48 ++++ src/packages/index.d.ts | 11 +- src/packages/public/publicConfig.ts | 3 + .../ChartEventMonacoEditor/index.ts | 3 + .../ChartEventMonacoEditor/index.vue | 240 ++++++++++++++++++ .../chart/ContentConfigurations/index.d.ts | 1 + .../chart/ContentConfigurations/index.vue | 9 +- .../components/PreviewRenderGroup/index.vue | 3 +- .../components/PreviewRenderList/index.vue | 3 +- 12 files changed, 348 insertions(+), 6 deletions(-) create mode 100644 src/components/Pages/ChartItemSetting/EventSetting.vue create mode 100644 src/hooks/useLifeHandler.hook.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue diff --git a/src/components/Pages/ChartItemSetting/EventSetting.vue b/src/components/Pages/ChartItemSetting/EventSetting.vue new file mode 100644 index 00000000..f44645ff --- /dev/null +++ b/src/components/Pages/ChartItemSetting/EventSetting.vue @@ -0,0 +1,26 @@ + + + + \ No newline at end of file diff --git a/src/components/Pages/ChartItemSetting/index.ts b/src/components/Pages/ChartItemSetting/index.ts index 676766e4..8745402a 100644 --- a/src/components/Pages/ChartItemSetting/index.ts +++ b/src/components/Pages/ChartItemSetting/index.ts @@ -16,5 +16,7 @@ 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 } +export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting, EventSetting } diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 16b0bb69..bc9825fb 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,4 +1,5 @@ export * from '@/hooks/useTheme.hook' export * from '@/hooks/usePreviewScale.hook' export * from '@/hooks/useCode.hook' -export * from '@/hooks/useChartDataFetch.hook' \ No newline at end of file +export * from '@/hooks/useChartDataFetch.hook' +export * from '@/hooks/useLifeHandler.hook' \ No newline at end of file diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts new file mode 100644 index 00000000..cadb4c94 --- /dev/null +++ b/src/hooks/useLifeHandler.hook.ts @@ -0,0 +1,48 @@ +import { CreateComponentType, EventLife } from '@/packages/index.d' +import * as echarts from 'echarts' + +// 所有图表组件集合对象 +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) + }, + } + 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 diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 1f95d50f..3ac1d711 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -116,12 +116,21 @@ export interface PublicConfigType { filter?: string status: StatusType setPosition: Function + events?: { + [K in EventLife]?: string + } +} + +// vue3 生命周期事件 +export enum EventLife { + BEFORE_MOUNT = 'vnodeBeforeMount', + MOUNTED = 'vnodeMounted' } export interface CreateComponentType extends PublicConfigType, requestConfig { key: string chartConfig: ConfigType - option: GlobalThemeJsonType + option: GlobalThemeJsonType, } // 组件成组实例类 diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 7bf4ae75..31584702 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -87,6 +87,9 @@ export class PublicConfigClass implements PublicConfigType { this.attr.x = x this.attr.y = y } + + // 事件 + public events = undefined } // 多选成组类 diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts new file mode 100644 index 00000000..b6d23e30 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts @@ -0,0 +1,3 @@ +import ChartEventMonacoEditor from './index.vue' + +export { ChartEventMonacoEditor } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue new file mode 100644 index 00000000..8d68ccbe --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue @@ -0,0 +1,240 @@ + + + + + diff --git a/src/views/chart/ContentConfigurations/index.d.ts b/src/views/chart/ContentConfigurations/index.d.ts index d17818aa..59ca5bcf 100644 --- a/src/views/chart/ContentConfigurations/index.d.ts +++ b/src/views/chart/ContentConfigurations/index.d.ts @@ -3,4 +3,5 @@ export enum TabsEnum { CHART_SETTING = 'chartSetting', CHART_ANIMATION = 'chartAnimation', CHART_DATA = 'chartData', + CHART_EVENT = 'chartEvent' } diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index c1b11b20..5e5d8cd1 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -75,12 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore()) const { setItem } = useChartLayoutStore() const chartEditStore = useChartEditStore() -const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon } = icon.ionicons5 +const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, CodeSlashIcon } = 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 ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue')) const collapsed = ref(getDetails.value) @@ -148,6 +149,12 @@ const chartsTabList = [ title: '数据', icon: FlashIcon, render: ChartData + }, + { + key: TabsEnum.CHART_EVENT, + title: '事件', + icon: CodeSlashIcon, + render: ChartEvent } ] diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue index 81790f63..422fd441 100644 --- a/src/views/preview/components/PreviewRenderGroup/index.vue +++ b/src/views/preview/components/PreviewRenderGroup/index.vue @@ -18,6 +18,7 @@ :themeSetting="themeSetting" :themeColor="themeColor" :style="{ ...getSizeStyle(item.attr) }" + v-on="useLifeHandler(item)" > @@ -27,7 +28,7 @@ import { PropType } from 'vue' import { CreateComponentGroupType } from '@/packages/index.d' import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils' - +import { useLifeHandler } from '@/hooks' const props = defineProps({ groupData: { type: Object as PropType, diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index 4335ab96..af55e9c1 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -29,6 +29,7 @@ :themeSetting="themeSetting" :themeColor="themeColor" :style="{ ...getSizeStyle(item.attr) }" + v-on="useLifeHandler(item)" > @@ -41,7 +42,7 @@ import { CreateComponentGroupType } from '@/packages/index.d' import { chartColors } from '@/settings/chartThemes/index' import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils' import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils' - +import { useLifeHandler } from '@/hooks' const props = defineProps({ localStorageInfo: { type: Object as PropType,