gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图标单击控制其他组件显示隐藏功能

zhufu
刘妍 2025-01-22 09:30:46 +08:00
parent 9af5bbdec2
commit 24e46f81e1
8 changed files with 452 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/hooks/useLifeHandler.hook.ts
View File

@ -36,8 +36,6 @@ export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponen
generateFunc(fnStr, e) generateFunc(fnStr, e)
} }
} }
console.log('baseEvent', baseEvent)
console.log('lifeEvents', lifeEvents)
return { ...baseEvent, ...lifeEvents } return { ...baseEvent, ...lifeEvents }
} }

70
src/packages/components/Icons/Default/Icon/index.vue
View File

@ -1,31 +1,63 @@
<template> <template>
<div class="go-icon-box"> <div class="go-icon-box">
<GoIconify :icon="((dataset || '') as string)" :color="color" :width="size" :rotate="rotate" /> <GoIconify
:icon="dataset || ''"
:color="color"
:width="size"
:rotate="rotate"
@click="clickBtn"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, toRefs } from 'vue' import { PropType, toRefs } from 'vue';
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d';
import { GoIconify } from '@/components/GoIconify' import { GoIconify } from '@/components/GoIconify';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
const props = defineProps({ const chartEditStore = useChartEditStore();
chartConfig: { const props = defineProps({
type: Object as PropType<CreateComponentType>, chartConfig: {
required: true type: Object as PropType<CreateComponentType>,
} required: true,
}) },
});
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr);
const { dataset, color, size, rotate } = toRefs(props.chartConfig.option) const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
const clickBtn = () => {
const elementItem = props.chartConfig.events.interactConfigEvents.map((item: any) => {
if (item.type == 'click') {
return item;
}
});
var obj: any = {};
var index = 0;
for (let i = 0; i < chartEditStore.getComponentList.length; i++) {
for (let j = 0; j < elementItem.length; j++) {
if (chartEditStore.getComponentList[i].id == elementItem[j].elementId) {
obj = chartEditStore.getComponentList[i];
index = i;
// 显示隐藏
if (elementItem[j].movement == 'reveal') {
obj.status.hide = false;
} else if (elementItem[j].movement == 'hidden') {
obj.status.hide = true;
}
chartEditStore.updateComponentList(index, obj);
}
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@include go('icon-box') { @include go('icon-box') {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: v-bind('`${w}px`'); width: v-bind('`${w}px`');
height: v-bind('`${h}px`'); height: v-bind('`${h}px`');
} }
</style> </style>

185
src/packages/components/Informations/Inputs/InputsDate/index.vue
View File

@ -10,94 +10,97 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, PropType, ref, shallowReactive, toRefs, watch } from 'vue' import { computed, PropType, ref, shallowReactive, toRefs, watch } from 'vue';
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartInteract } from '@/hooks' import { useChartInteract } from '@/hooks';
import { InteractEventOn } from '@/enums/eventEnum' import { InteractEventOn } from '@/enums/eventEnum';
import {ComponentInteractEventEnum, ComponentInteractParamsEnum, DefaultTypeEnum} from './interact' import {
import dayjs, {ManipulateType} from 'dayjs' ComponentInteractEventEnum,
import quarterOfYear from 'dayjs/plugin/quarterOfYear'; ComponentInteractParamsEnum,
DefaultTypeEnum,
} from './interact';
import dayjs, { ManipulateType } from 'dayjs';
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true,
},
});
const props = defineProps({ const { w, h } = toRefs(props.chartConfig.attr);
chartConfig: { const rangeDate = ref<number | number[]>();
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr) const option = shallowReactive({
const rangeDate = ref<number | number[]>() dataset: props.chartConfig.option.dataset,
});
const option = shallowReactive({ const isRange = computed(() => {
dataset: props.chartConfig.option.dataset return props.chartConfig.option.componentInteractEventKey.endsWith('range');
}) });
const isRange = computed(() => { // 监听事件改变
return props.chartConfig.option.componentInteractEventKey.endsWith('range') const onChange = (v: number | number[] | null) => {
}) if (isRange.value) {
let dateStart = null;
// 监听事件改变 let dateEnd = null;
const onChange = (v: number | number[] | null) => { let daterange = null;
if (isRange.value) { if (v instanceof Array) {
let dateStart = null dateStart = v[0];
let dateEnd = null dateEnd = v[1];
let daterange = null daterange = `${v[0]}-${v[1]}`;
if(v instanceof Array){ }
dateStart = v[0] // 存储到联动数据
dateEnd = v[1] useChartInteract(
daterange = `${v[0]}-${v[1]}`
}
// 存储到联动数据
useChartInteract(
props.chartConfig, props.chartConfig,
useChartEditStore, useChartEditStore,
{ {
[ComponentInteractParamsEnum.DATE_START]: dateStart, [ComponentInteractParamsEnum.DATE_START]: dateStart,
[ComponentInteractParamsEnum.DATE_END]: dateEnd, [ComponentInteractParamsEnum.DATE_END]: dateEnd,
[ComponentInteractParamsEnum.DATE_RANGE]: daterange [ComponentInteractParamsEnum.DATE_RANGE]: daterange,
}, },
InteractEventOn.CHANGE InteractEventOn.CHANGE,
) );
} else { } else {
// 存储到联动数据 // 存储到联动数据
useChartInteract( useChartInteract(
props.chartConfig, props.chartConfig,
useChartEditStore, useChartEditStore,
{ [ComponentInteractParamsEnum.DATE]: v }, { [ComponentInteractParamsEnum.DATE]: v },
InteractEventOn.CHANGE InteractEventOn.CHANGE,
) );
} }
} };
const getDiffDate = (type: ComponentInteractEventEnum, date: dayjs.Dayjs) => { const getDiffDate = (type: ComponentInteractEventEnum, date: dayjs.Dayjs) => {
// 注册 quarterOfYear 插件 // 注册 quarterOfYear 插件
dayjs.extend(quarterOfYear) dayjs.extend(quarterOfYear);
switch (type) { switch (type) {
case ComponentInteractEventEnum.DATE: case ComponentInteractEventEnum.DATE:
case ComponentInteractEventEnum.DATE_RANGE: case ComponentInteractEventEnum.DATE_RANGE:
date = date.startOf('day') date = date.startOf('day');
break break;
case ComponentInteractEventEnum.MONTH: case ComponentInteractEventEnum.MONTH:
case ComponentInteractEventEnum.MONTH_RANGE: case ComponentInteractEventEnum.MONTH_RANGE:
date = date.startOf('month') date = date.startOf('month');
break break;
case ComponentInteractEventEnum.YEAR: case ComponentInteractEventEnum.YEAR:
case ComponentInteractEventEnum.YEAR_RANGE: case ComponentInteractEventEnum.YEAR_RANGE:
date = date.startOf('year') date = date.startOf('year');
break break;
case ComponentInteractEventEnum.QUARTER: case ComponentInteractEventEnum.QUARTER:
case ComponentInteractEventEnum.QUARTER_RANGE: case ComponentInteractEventEnum.QUARTER_RANGE:
date = date.startOf('quarter') date = date.startOf('quarter');
break break;
default: default:
break break;
} }
return date return date;
} };
watch( watch(
() => { () => {
return { return {
type: props.chartConfig.option.componentInteractEventKey as ComponentInteractEventEnum, type: props.chartConfig.option.componentInteractEventKey as ComponentInteractEventEnum,
@ -113,18 +116,32 @@ watch(
const hasDifferValueChanged = newData.differValue !== oldData?.differValue; const hasDifferValueChanged = newData.differValue !== oldData?.differValue;
const hasDifferUnitChanged = newData.differUnit !== oldData?.differUnit; const hasDifferUnitChanged = newData.differUnit !== oldData?.differUnit;
if (hasTypeChanged || hasDefaultTypeChanged || hasDifferValueChanged || hasDifferUnitChanged) { if (
hasTypeChanged ||
hasDefaultTypeChanged ||
hasDifferValueChanged ||
hasDifferUnitChanged
) {
if (newData.defaultType === DefaultTypeEnum.NONE) { if (newData.defaultType === DefaultTypeEnum.NONE) {
props.chartConfig.option.dataset = null; props.chartConfig.option.dataset = null;
} else if (newData.defaultType === DefaultTypeEnum.DYNAMIC) { } else if (newData.defaultType === DefaultTypeEnum.DYNAMIC) {
let date = dayjs(); let date = dayjs();
if (isRange.value) { if (isRange.value) {
props.chartConfig.option.dataset = [ props.chartConfig.option.dataset = [
getDiffDate(newData.type,date.add(newData.differValue[0], newData.differUnit[0])).valueOf(), getDiffDate(
getDiffDate(newData.type,date.add(newData.differValue[1], newData.differUnit[1])).valueOf(), newData.type,
date.add(newData.differValue[0], newData.differUnit[0]),
).valueOf(),
getDiffDate(
newData.type,
date.add(newData.differValue[1], newData.differUnit[1]),
).valueOf(),
]; ];
} else { } else {
props.chartConfig.option.dataset = getDiffDate(newData.type,date.add(newData.differValue[0], newData.differUnit[0])).valueOf() props.chartConfig.option.dataset = getDiffDate(
newData.type,
date.add(newData.differValue[0], newData.differUnit[0]),
).valueOf();
} }
} }
} }
@ -133,16 +150,16 @@ watch(
}, },
{ {
immediate: true, immediate: true,
} },
); );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@include deep() { @include deep() {
.n-input { .n-input {
height: v-bind('h + "px"'); height: v-bind('h + "px"');
display: flex; display: flex;
align-items: center; align-items: center;
}
} }
}
</style> </style>

172
src/packages/index.d.ts vendored
View File

@ -1,6 +1,12 @@
import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum' import {
import type { GlobalThemeJsonType } from '@/settings/chartThemes/index' BaseEvent,
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' EventLife,
InteractEvents,
InteractEventOn,
InteractActionsType,
} from '@/enums/eventEnum';
import type { GlobalThemeJsonType } from '@/settings/chartThemes/index';
import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
export enum ChartFrameEnum { export enum ChartFrameEnum {
// 支持 dataset 的 echarts 框架 // 支持 dataset 的 echarts 框架
@ -12,56 +18,56 @@ export enum ChartFrameEnum {
// 自定义带数据组件 // 自定义带数据组件
COMMON = 'common', COMMON = 'common',
// 无数据变更 // 无数据变更
STATIC = 'static' STATIC = 'static',
} }
// 组件配置 // 组件配置
export type ConfigType = { export type ConfigType = {
// 组件 key // 组件 key
key: string key: string;
// 画布组件 key // 画布组件 key
chartKey: string chartKey: string;
// 右侧设置面板组件 key // 右侧设置面板组件 key
conKey: string conKey: string;
// 标题 // 标题
title: string title: string;
// 分类 // 分类
category: string category: string;
// 分类名称 // 分类名称
categoryName: string categoryName: string;
// 所属包 // 所属包
package: string package: string;
// 归类 // 归类
chartFrame?: ChartFrameEnum chartFrame?: ChartFrameEnum;
// 预览图 // 预览图
image: string image: string;
// 从指定路径创建创建该组件 // 从指定路径创建创建该组件
redirectComponent?: string redirectComponent?: string;
// 组件预设的 dataset 值(图片/图标) // 组件预设的 dataset 值(图片/图标)
dataset?: any dataset?: any;
// 禁用 拖拽或双击生成组件 // 禁用 拖拽或双击生成组件
disabled?: boolean disabled?: boolean;
// 图标 // 图标
icon?: string icon?: string;
// 事件 // 事件
configEvents?: { [T: string]: Function } configEvents?: { [T: string]: Function };
} };
// 数据请求 // 数据请求
interface requestConfig { interface requestConfig {
request: RequestConfigType request: RequestConfigType;
} }
// Echarts 数据类型 // Echarts 数据类型
interface EchartsDataType { interface EchartsDataType {
dimensions: string[] dimensions: string[];
source: any[] source: any[];
} }
// 组件状态 // 组件状态
export interface StatusType { export interface StatusType {
lock: boolean lock: boolean;
hide: boolean hide: boolean;
} }
// 滤镜/变换枚举 // 滤镜/变换枚举
@ -90,7 +96,7 @@ export enum FilterEnum {
SKEW_Y = 'skewY', SKEW_Y = 'skewY',
// 混合模式 // 混合模式
BLEND_MODE = 'blendMode' BLEND_MODE = 'blendMode',
} }
export const BlendModeEnumList = [ export const BlendModeEnumList = [
@ -109,68 +115,80 @@ export const BlendModeEnumList = [
{ label: '色相', value: 'hue' }, { label: '色相', value: 'hue' },
{ label: '饱和度', value: 'saturation' }, { label: '饱和度', value: 'saturation' },
{ label: '颜色', value: 'color' }, { label: '颜色', value: 'color' },
{ label: '亮度', value: 'luminosity' } { label: '亮度', value: 'luminosity' },
] ];
// 组件实例类 // 组件实例类
export interface PublicConfigType { export interface PublicConfigType {
id: string id: string;
isGroup: boolean isGroup: boolean;
attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number } attr: {
x: number;
y: number;
w: number;
h: number;
zIndex: number;
offsetX: number;
offsetY: number;
};
styles: { styles: {
[FilterEnum.FILTERS_SHOW]: boolean [FilterEnum.FILTERS_SHOW]: boolean;
[FilterEnum.OPACITY]: number [FilterEnum.OPACITY]: number;
[FilterEnum.SATURATE]: number [FilterEnum.SATURATE]: number;
[FilterEnum.CONTRAST]: number [FilterEnum.CONTRAST]: number;
[FilterEnum.HUE_ROTATE]: number [FilterEnum.HUE_ROTATE]: number;
[FilterEnum.BRIGHTNESS]: number [FilterEnum.BRIGHTNESS]: number;
[FilterEnum.ROTATE_Z]: number [FilterEnum.ROTATE_Z]: number;
[FilterEnum.ROTATE_X]: number [FilterEnum.ROTATE_X]: number;
[FilterEnum.ROTATE_Y]: number [FilterEnum.ROTATE_Y]: number;
[FilterEnum.SKEW_X]: number [FilterEnum.SKEW_X]: number;
[FilterEnum.SKEW_Y]: number [FilterEnum.SKEW_Y]: number;
[FilterEnum.BLEND_MODE]: string [FilterEnum.BLEND_MODE]: string;
// 动画 // 动画
animations: string[] animations: string[];
} };
preview?: { preview?: {
// 预览超出隐藏 // 预览超出隐藏
overFlowHidden?: boolean overFlowHidden?: boolean;
} };
filter?: string filter?: string;
status: StatusType status: StatusType;
interactActions?: InteractActionsType[] interactActions?: InteractActionsType[];
events: { events: {
baseEvent: { baseEvent: {
[K in BaseEvent]?: string [K in BaseEvent]?: string;
} };
advancedEvents: { advancedEvents: {
[K in EventLife]?: string [K in EventLife]?: string;
} };
interactEvents: { interactEvents: {
[InteractEvents.INTERACT_ON]: InteractEventOn | undefined [InteractEvents.INTERACT_ON]: InteractEventOn | undefined;
[InteractEvents.INTERACT_COMPONENT_ID]: string | undefined [InteractEvents.INTERACT_COMPONENT_ID]: string | undefined;
[InteractEvents.INTERACT_FN]: { [name: string]: string } [InteractEvents.INTERACT_FN]: { [name: string]: string };
}[] }[];
} interactConfigEvents: {}[];
};
} }
export interface CreateComponentType extends PublicConfigType, requestConfig { export interface CreateComponentType extends PublicConfigType, requestConfig {
key: string key: string;
chartConfig: ConfigType chartConfig: ConfigType;
option: GlobalThemeJsonType option: GlobalThemeJsonType;
groupList?: Array<CreateComponentType> groupList?: Array<CreateComponentType>;
} }
// 组件成组实例类 // 组件成组实例类
export interface CreateComponentGroupType extends CreateComponentType { export interface CreateComponentGroupType extends CreateComponentType {
groupList: Array<CreateComponentType> groupList: Array<CreateComponentType>;
} }
// 获取组件实例类中某个key对应value类型的方法 // 获取组件实例类中某个key对应value类型的方法
export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<CreateComponentType, T>[T] export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<
CreateComponentType,
T
>[T];
// 包分类枚举 // 包分类枚举
export enum PackagesCategoryEnum { export enum PackagesCategoryEnum {
@ -182,7 +200,7 @@ export enum PackagesCategoryEnum {
ICONS = 'Icons', ICONS = 'Icons',
DECORATES = 'Decorates', DECORATES = 'Decorates',
CUSTOM = 'Custom', CUSTOM = 'Custom',
DIY = 'Diy' DIY = 'Diy',
} }
// 包分类名称 // 包分类名称
@ -195,24 +213,24 @@ export enum PackagesCategoryName {
ICONS = '图标', ICONS = '图标',
DECORATES = '小组件', DECORATES = '小组件',
CUSTOM = '预警信息', CUSTOM = '预警信息',
DIY = 'DIY' DIY = 'DIY',
} }
// 获取组件 // 获取组件
export enum FetchComFlagType { export enum FetchComFlagType {
VIEW, VIEW,
CONFIG CONFIG,
} }
// 图表包类型 // 图表包类型
export type PackagesType = { export type PackagesType = {
[PackagesCategoryEnum.CHARTS]: ConfigType[] [PackagesCategoryEnum.CHARTS]: ConfigType[];
[PackagesCategoryEnum.VCHART]: ConfigType[] [PackagesCategoryEnum.VCHART]: ConfigType[];
[PackagesCategoryEnum.INFORMATIONS]: ConfigType[] [PackagesCategoryEnum.INFORMATIONS]: ConfigType[];
[PackagesCategoryEnum.TABLES]: ConfigType[] [PackagesCategoryEnum.TABLES]: ConfigType[];
[PackagesCategoryEnum.PHOTOS]: ConfigType[] [PackagesCategoryEnum.PHOTOS]: ConfigType[];
[PackagesCategoryEnum.ICONS]: ConfigType[] [PackagesCategoryEnum.ICONS]: ConfigType[];
[PackagesCategoryEnum.DECORATES]: ConfigType[] [PackagesCategoryEnum.DECORATES]: ConfigType[];
[PackagesCategoryEnum.CUSTOM]: ConfigType[] [PackagesCategoryEnum.CUSTOM]: ConfigType[];
[PackagesCategoryEnum.DIY]: ConfigType[] [PackagesCategoryEnum.DIY]: ConfigType[];
} };

3
src/packages/public/publicConfig.ts
View File

@ -103,7 +103,8 @@ export class PublicConfigClass implements PublicConfigType {
[EventLife.VNODE_MOUNTED]: undefined, [EventLife.VNODE_MOUNTED]: undefined,
[EventLife.VNODE_BEFORE_MOUNT]: undefined [EventLife.VNODE_BEFORE_MOUNT]: undefined
}, },
interactEvents: [] interactEvents: [],
interactConfigEvents:[]
} }
} }

3
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/index.ts Normal file
View File

@ -0,0 +1,3 @@
import ChartEventInteractionConfiguration from './index.vue';
export { ChartEventInteractionConfiguration };

195
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/index.vue Normal file
View File

@ -0,0 +1,195 @@
<template>
<n-collapse-item title="组件交互事件配置" name="2">
<template #header-extra>
<n-button type="primary" tertiary size="small" @click.stop="addEvent">
<template #icon>
<n-icon>
<pencil-icon />
</n-icon>
</template>
编辑
</n-button>
</template>
<!-- 无数据 -->
<div v-if="!targetData.events.interactConfigEvents.length" class="no-data go-flex-center">
<img :src="noData" alt="暂无数据" />
<n-text :depth="3">暂无内容</n-text>
</div>
<n-card
v-for="(item, cardIndex) in targetData.events.interactConfigEvents"
:key="cardIndex"
class="n-card-shallow"
size="small"
>
<n-divider style="margin: 10px 0" />
<n-tag
:bordered="false"
type="primary"
closable
@click="editEvent(item)"
@close="evDeleteEventsFn(cardIndex)"
>
动作{{ cardIndex + 1 }}
</n-tag>
</n-card>
</n-collapse-item>
<!-- 弹窗 -->
<n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
<n-card
:bordered="false"
role="dialog"
size="small"
aria-modal="true"
style="width: 1200px; height: 700px"
>
<template #header>
<n-space>
<n-text>交互编辑器</n-text>
</n-space>
</template>
<template #header-extra> </template>
<n-layout has-sider sider-placement="right">
<n-layout style="height: 580px; padding-right: 20px">
<setting-item-box name="类型" :alone="true">
<n-select v-model:value="interactConfigItem.type" :options="eventSelectOptions" />
</setting-item-box>
<setting-item-box name="执行动作" :alone="true">
<n-select
v-model:value="interactConfigItem.movement"
:options="movementSelectOptions"
/>
</setting-item-box>
<setting-item-box name="关联组件" :alone="true">
<n-select
v-model:value="interactConfigItem.elementId"
:options="elementSelectOptions"
/>
</setting-item-box>
</n-layout>
</n-layout>
<template #action>
<n-space justify="space-between">
<div class="go-flex-items-center">
<n-tag :bordered="false" type="primary">
<template #icon>
<n-icon :component="DocumentTextIcon" />
</template>
说明
</n-tag>
<n-text class="go-ml-2" depth="2">请在预览页面查看结果</n-text>
</div>
<n-space>
<n-button size="medium" @click="closeEvents">取消</n-button>
<n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
</n-space>
</n-space>
</template>
</n-card>
</n-modal>
</template>
<script setup lang="ts">
import { ref, computed, watch, toRefs, toRaw } from 'vue';
import { MonacoEditor } from '@/components/Pages/MonacoEditor';
import { useTargetData } from '../../../hooks/useTargetData.hook';
import { BaseEvent } from '@/enums/eventEnum';
import { icon } from '@/plugins';
import { SettingItemBox } from '@/components/Pages/ChartItemSetting';
import noData from '@/assets/images/canvas/noData.png';
import { goDialog } from '@/utils';
const { targetData, chartEditStore } = useTargetData();
const { DocumentTextIcon, CloseIcon, PencilIcon } = icon.ionicons5;
const interactConfigItem: any = ref({
type: '',
movement: '',
elementId: '',
});
// 选项
const eventSelectOptions = [
{
label: '单击',
value: 'click',
},
{
label: '双击',
value: 'dblclick',
},
];
const movementSelectOptions = [
{
label: '显示',
value: 'reveal',
},
{
label: '隐藏',
value: 'hidden',
},
];
console.log(chartEditStore.getComponentList);
const elementSelectOptions = ref(
chartEditStore.getComponentList.map((item) => {
return {
label: item.isGroup ? '分组-' + item.id : '组件-' + item.id,
value: item.id,
};
}),
);
// 受控弹窗
const showModal = ref(false);
// 编辑区域控制
// events 函数模板
let interactConfigEvents = ref({ ...targetData.value.events.interactConfigEvents });
// 事件错误标识
// 关闭事件
const closeEvents = () => {
showModal.value = false;
};
// 新增事件
const saveEvents = () => {
console.log(interactConfigItem.value);
targetData.value.events.interactConfigEvents.push({ ...interactConfigItem.value });
closeEvents();
};
watch(
() => showModal.value,
(newData: boolean) => {
if (newData) {
interactConfigEvents.value = { ...targetData.value.events.interactConfigEvents };
}
},
);
const addEvent = () => {
showModal.value = true;
interactConfigItem.value = {
type: '',
movement: '',
elementId: '',
};
};
const editEvent = (item: any) => {
showModal.value = true;
interactConfigItem.value = { ...item };
};
// 删除模块
const evDeleteEventsFn = (index: number) => {
goDialog({
message: '是否删除此动作?',
onPositiveCallback: () => {
targetData.value.events.interactConfigEvents.splice(index, 1);
},
});
};
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>

8
src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
View File

@ -5,14 +5,16 @@
组件 id： 组件 id：
<n-text>{{ targetData.id }}</n-text> <n-text>{{ targetData.id }}</n-text>
</n-text> </n-text>
<chart-event-interaction></chart-event-interaction> <chart-event-interaction-configuration />
<chart-event-base-handle></chart-event-base-handle> <chart-event-interaction />
<chart-event-advanced-handle></chart-event-advanced-handle> <chart-event-base-handle />
<chart-event-advanced-handle />
</n-collapse> </n-collapse>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { ChartEventInteractionConfiguration } from './components/ChartEventInteractionConfiguration';
import { ChartEventInteraction } from './components/ChartEventInteraction'; import { ChartEventInteraction } from './components/ChartEventInteraction';
import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'; import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle';
import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'; import { ChartEventBaseHandle } from './components/ChartEventBaseHandle';