From f7aff43723b43f605082788ff49c5ad2b9485fa6 Mon Sep 17 00:00:00 2001 From: huanghao1412 Date: Tue, 30 Jan 2024 18:36:06 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BC=A9=E7=95=A5=E5=9B=BE=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=20=E5=88=86=E7=BB=84=E5=8F=AF=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomComponents/GDMap/index.vue | 23 ++++---- src/packages/index.d.ts | 3 +- src/packages/public/publicConfig.ts | 13 ++++- .../chartEditStore/chartEditStore.d.ts | 8 +++ .../components/ChartEvent/index.vue | 58 +++++++++---------- .../components/hooks/useTargetData.hook.ts | 5 ++ .../chart/ContentConfigurations/index.vue | 10 +++- .../components/LayersGroupListItem/index.vue | 4 +- src/views/chart/hooks/useContextMenu.hook.ts | 3 +- .../preview/hooks/useCustomEvent.hook.ts | 1 - 10 files changed, 78 insertions(+), 50 deletions(-) diff --git a/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue b/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue index 1deca73d..9151582d 100644 --- a/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue +++ b/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue @@ -92,10 +92,11 @@ - + - + +
{ const arr:[] = JSON.parse(res.data.canvas_data) for (const key in gdMap) delete gdMap[key] Object.assign(gdMap, arr.find((_:any) => _.component === 'Picture') || {}) - // if(canvas.value){ - // const ctx = canvas.value.getContext('2d'); - // ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height); - // const img = new Image(); - // img.onload = function() { - // if(ctx) ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height); - // }; - // img.src = gdMap.propValue; - // } + if(canvas.value){ + const ctx = canvas.value.getContext('2d'); + ctx?.clearRect(0, 0, canvas.value.width, canvas.value.height); + const img = new Image(); + img.onload = function() { + if(ctx) ctx.drawImage(img, 0, 0, canvas.value.width, canvas.value.height); + }; + img.src = gdMap.propValue; + } text.splice(0, text.length, ...arr.filter((_:any) => _.component === 'v-text')) point.splice(0, point.length, ...arr.filter((_:any) => _.component === 'svg-shape')) const activeAlarmData = { diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 1c9bcfe1..2b38e761 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -2,7 +2,7 @@ import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsT import type { GlobalThemeJsonType } from '@/settings/chartThemes/index' import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' import { CustomComponentsList } from "@/packages/components/CustomComponents/index"; -import { commonDataType } from '@/store/modules/chartEditStore/chartEditStore.d' +import { commonDataType, CustomEventType } from '@/store/modules/chartEditStore/chartEditStore.d' export enum ChartFrameEnum { // 支持 dataset 的 echarts 框架 @@ -144,6 +144,7 @@ export interface PublicConfigType { filter?: string commonData: commonDataType customData?: { [key: string]: any } + customEvent: CustomEventType status: StatusType interactActions?: InteractActionsType[] events: { diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 4b212809..3281d7af 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -1,5 +1,5 @@ import { getUUID } from '@/utils' -import { RequestConfigType, commonDataType, CurrentSourceEnum, DateTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' +import { RequestConfigType, commonDataType, CustomEventType, CurrentSourceEnum, DateTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' import { groupTitle } from '@/settings/designSetting' import { BaseEvent, EventLife } from '@/enums/eventEnum' import { @@ -96,6 +96,13 @@ const commonData: commonDataType = { } } +const customEvent: CustomEventType = { + click: { + linkHead: 'http://', + link: '' + } +} + // 单实例类 export class PublicConfigClass implements PublicConfigType { public id = getUUID() @@ -149,7 +156,9 @@ export class PublicConfigClass implements PublicConfigType { public commonData = cloneDeep(commonData) // 自定义数据 configData组件会用到 public customData = {} - // 事件 + // 自定义事件 + public customEvent = cloneDeep(customEvent) + // 事件 不用了 public events = { baseEvent: { [BaseEvent.ON_CLICK]: undefined, diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index f61cab23..a488d1cf 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -357,6 +357,14 @@ export interface commonDataType { singlePoint: SinglePointType } +// customEvent事件 +export interface CustomEventType { + click: { + linkHead: 'http://' | 'https://' + link: string + } +} + // Store 类型 export interface ChartEditStoreType { [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue index 9e7f116c..7f5d86c4 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue @@ -31,38 +31,38 @@ import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle' import { ChartEventBaseHandle } from './components/ChartEventBaseHandle' import { useTargetData } from '../hooks/useTargetData.hook' -// const { targetData, chartEditStore } = useTargetData() -// const showModal = ref(false) +const { targetData, chartEditStore } = useTargetData() +const showModal = ref(false) -const { chartEditStore } = useTargetData() -const targetIndex = computed(() => chartEditStore.fetchTargetIndex()) -const list = computed(() => chartEditStore.getComponentList) -let targetData:any = ref(list.value[targetIndex.value]) +// const { chartEditStore } = useTargetData() +// const targetIndex = computed(() => chartEditStore.fetchTargetIndex()) +// const list = computed(() => chartEditStore.getComponentList) +// let targetData:any = ref(list.value[targetIndex.value]) // const isReady = ref(false) -const init = () => { - if(!targetData.value.customEvent) { - targetData.value.customEvent = { - click: { - linkHead: 'http://', - link: '', - } - } - } -} -init() -watch(() => targetIndex.value, newIndex => { - // isReady.value = false - targetData.value = list.value[newIndex] - init() - setTimeout(() => { - // isReady.value = true - }) -}) -watch(() => list.value.length, () => { - targetData.value = list.value[targetIndex.value] - init() -}) +// const init = () => { +// if(!targetData.value.customEvent) { +// targetData.value.customEvent = { +// click: { +// linkHead: 'http://', +// link: '', +// } +// } +// } +// } +// init() +// watch(() => targetIndex.value, newIndex => { +// // isReady.value = false +// targetData.value = list.value[newIndex] +// init() +// setTimeout(() => { +// // isReady.value = true +// }) +// }) +// watch(() => list.value.length, () => { +// targetData.value = list.value[targetIndex.value] +// init() +// }) const linkHeadOptions = ['http://', 'https://'].map(_ => ({label: _, value: _})) diff --git a/src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts b/src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts index 0fde624e..db0a82bd 100644 --- a/src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts +++ b/src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts @@ -8,6 +8,11 @@ export const useTargetData = () => { const targetData: Ref = computed(() => { const list = chartEditStore.getComponentList const targetIndex = chartEditStore.fetchTargetIndex() + // 分组时 判断是不是分组里的组件 + const selectId = chartEditStore.getTargetChart.selectId[0] + if(list[targetIndex].isGroup && list[targetIndex].id !== selectId) { + return list[targetIndex].groupList!.find(_ => _.id === selectId)! + } return list[targetIndex] }) return { targetData, chartEditStore } diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index 5e984ad8..388a743c 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -70,6 +70,7 @@ import { TabsEnum } from './index.d' import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' const { getDetails } = toRefs(useChartLayoutStore()) const { setItem } = useChartLayoutStore() @@ -101,10 +102,13 @@ const selectTarget = computed(() => { const selectId = chartEditStore.getTargetChart.selectId // 排除多个 if (selectId.length !== 1) return undefined - const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()] + let target: CreateComponentType | CreateComponentGroupType = chartEditStore.componentList[chartEditStore.fetchTargetIndex()] if (target?.isGroup) { - // eslint-disable-next-line vue/no-side-effects-in-computed-properties - tabsSelect.value = TabsEnum.CHART_SETTING + if(target.id !== selectId[0]) target = target.groupList!.find(_ => _.id === selectId[0])! + else { + // eslint-disable-next-line vue/no-side-effects-in-computed-properties + tabsSelect.value = TabsEnum.CHART_SETTING + } } return target }) diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue index ac9892ec..094364a3 100644 --- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue +++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue @@ -34,7 +34,7 @@ :componentData="element" :layer-mode="layerMode" :isGroup="true" - @mousedown="mousedownHandle($event, element, componentGroupData.id)" + @mousedown="mousedownHandle($event, element)" @mouseenter="mouseenterHandle(element)" @mouseleave="mouseleaveHandle(element)" @contextmenu="handleContextMenu($event, componentGroupData, optionsHandle)" @@ -78,7 +78,7 @@ const { FolderIcon, FolderOpenIcon } = icon.ionicons5 const chartEditStore = useChartEditStore() const { handleContextMenu, onClickOutSide } = useContextMenu() -const expend = ref(false) +const expend = ref(true) // 颜色 const themeColor = computed(() => { diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts index 93ac2cfa..faa999b7 100644 --- a/src/views/chart/hooks/useContextMenu.hook.ts +++ b/src/views/chart/hooks/useContextMenu.hook.ts @@ -205,7 +205,7 @@ const handleContextMenu = ( while (target instanceof SVGElement) { target = target.parentNode } - console.log(targetInstance) + chartEditStore.setTargetSelectChart(targetInstance && targetInstance.id) // 隐藏旧列表 @@ -236,6 +236,7 @@ const handleContextMenu = ( targetInstance ) } + console.log(menuOptions.value) nextTick().then(() => { chartEditStore.setMousePosition(e.clientX, e.clientY) chartEditStore.setRightMenuShow(true) diff --git a/src/views/preview/hooks/useCustomEvent.hook.ts b/src/views/preview/hooks/useCustomEvent.hook.ts index b89a6a0a..bc8db746 100644 --- a/src/views/preview/hooks/useCustomEvent.hook.ts +++ b/src/views/preview/hooks/useCustomEvent.hook.ts @@ -4,7 +4,6 @@ const bindEvent = (item:any) => { let {linkHead, link} = item.customEvent.click obj = { click: () => { - console.log(1234, linkHead,link) if(link) window.open(`${linkHead}${link}`) } }