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

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 = {

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: {

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,

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

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: _}))
 

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 }

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,11 +102,14 @@ 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) {
+    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
 })
 

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(() => {

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)

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}`)
             }
         }