fix: 缩略图修复分组可编辑

2025-10-13 14:02:10 +08:00 · 2024-01-30 18:36:06 +08:00 · 2024-01-30 18:36:06 +08:00 · f7aff43723
commit f7aff43723
parent c10b88d35a
10 changed files with 78 additions and 50 deletions
--- a/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue
+++ b/src/packages/components/CustomComponents/CustomComponents/GDMap/index.vue
@ -92,10 +92,11 @@
      </g>
    </svg>
    <!-- img标签出来的图不完整 所以换background-url background-reapt object-fit: contain不支持 -->
-   <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>
+<!--   <img v-show="showImg" @load="showImg = true" :src="gdMap.propValue" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"/>-->
   <!-- <div id="img" :style="{backgroundImage: `url(${gdMap.propValue})`, transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></div> -->
 <!--    background-url出来的截图还是不行 会变大 用canvas可以-->
-    <!-- <canvas ref="canvas" width="870" height="560" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></canvas> -->
+     <canvas ref="canvas" width="870" height="560" :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top"></canvas>
+<!--    用canvas也不行 只能截图单个地图 加别的好像就不行 有时可以有时不行?-->
    <div :style="{transform: `scale(${scale(w, 870)}, ${scale(h - 100,560)})`}" style="position: absolute;top: 100px;width: 870px;height: 560px;transform-origin: left top">
      <div
        v-for="(item, i) in point"
@ -202,15 +203,15 @@ const getData = () => {
      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 = {
--- 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: {
--- 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,
--- 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
--- 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: _}))

--- 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<CreateComponentType | CreateComponentGroupType> = 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 }
--- 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
 })
--- 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(() => {
--- 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)
--- 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}`)
            }
        }