From d3819768c26af940f25e8e6c746558ce710db0af Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Wed, 16 Jul 2025 14:17:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=80=89=E5=8C=BA=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=92=8C=E7=82=AB=E9=85=B7=E7=9A=84=E6=93=8D=E4=BD=9C=E4=BA=92?=
 =?UTF-8?q?=E4=B8=8D=E5=BD=B1=E5=93=8D=E7=BB=88=E6=9E=81=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/martixCraft/Edit/index.vue  | 16 ++++++++++++++-
 src/components/spray/sprayParams/index.vue | 19 ++++++++++++++++--
 src/components/spray/trayGraph/index.vue   | 32 +++++++++++++++++++-----------
 3 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/components/martixCraft/Edit/index.vue b/src/components/martixCraft/Edit/index.vue
index 41f625c..8847ef8 100644
--- a/src/components/martixCraft/Edit/index.vue
+++ b/src/components/martixCraft/Edit/index.vue
@@ -167,6 +167,20 @@ const onSwiperInitialized = (swiper: any) => {
 const tabChangeHandle = () => {
   swiperInstance?.slideTo(activeTab.value)
 }
+
+const touchstartHandle = () => {
+  swiperInstance.allowTouchMove = false
+}
+
+const touchmoveHandle = () => {
+  swiperInstance.allowTouchMove = false
+  setTimeout(() => {
+    swiperInstance.allowTouchMove = true
+  }, 100)
+}
+const touchendHandle = () => {
+  swiperInstance.allowTouchMove = true
+}
 </script>
 
 <template>
@@ -206,7 +220,7 @@ const tabChangeHandle = () => {
       >
         <SwiperSlide v-for="(item, index) in form.times" :key="index">
           <div class="tab-content">
-            <TrayGraph ref="sprayRefs" :key="index" :container="`spray-${index + 1}`" select />
+            <TrayGraph ref="sprayRefs" :key="index" :container="`spray-${index + 1}`" select @touchstart="touchstartHandle" @touchmove="touchmoveHandle" @touchend="touchendHandle" />
             <div class="content-form">
               <el-form-item label="喷涂路线">
                 <div class="route-img">
diff --git a/src/components/spray/sprayParams/index.vue b/src/components/spray/sprayParams/index.vue
index 900b11c..970f5a3 100644
--- a/src/components/spray/sprayParams/index.vue
+++ b/src/components/spray/sprayParams/index.vue
@@ -170,9 +170,10 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
     }
     form.value.times.splice(activeTab.value, 1)
   }
-  swiperInstance?.slideTo(activeTab.value)
+
   // 异步任务调用
   setTimeout(() => {
+    swiperInstance?.slideTo(activeTab.value)
     swiperInstance?.update()
   }, 100)
 }
@@ -201,6 +202,20 @@ const onSwiperInitialized = (swiper: any) => {
 const tabChangeHandle = () => {
   swiperInstance?.slideTo(activeTab.value)
 }
+
+const touchstartHandle = () => {
+  swiperInstance.allowTouchMove = false
+}
+
+const touchmoveHandle = () => {
+  swiperInstance.allowTouchMove = false
+  setTimeout(() => {
+    swiperInstance.allowTouchMove = true
+  }, 100)
+}
+const touchendHandle = () => {
+  swiperInstance.allowTouchMove = true
+}
 </script>
 
 <template>
@@ -242,7 +257,7 @@ const tabChangeHandle = () => {
       >
         <SwiperSlide v-for="(item, index) in form.times" :key="index">
           <div class="tab-content">
-            <TrayGraph ref="sprayRefs" :key="index" :edit-select="!disabled" :container="`spray-params-${index + 1}`" select />
+            <TrayGraph ref="sprayRefs" :key="index" :edit-select="!disabled" :container="`spray-params-${index + 1}`" select @touchstart="touchstartHandle" @touchmove="touchmoveHandle" @touchend="touchendHandle" />
             <div class="content-form">
               <el-form-item label="喷涂路线">
                 <div class="route-img">
diff --git a/src/components/spray/trayGraph/index.vue b/src/components/spray/trayGraph/index.vue
index fa1096a..9801ce9 100644
--- a/src/components/spray/trayGraph/index.vue
+++ b/src/components/spray/trayGraph/index.vue
@@ -15,16 +15,27 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-
 })
+
+const emits = defineEmits(['touchstart', 'touchmove', 'touchend'])
+
 const stage = ref()
 const layer = ref()
 const rect = ref()
 const tr = ref()
 const lines = ref<Konva.Line[]>([]) // 修改: 将 line 改为 lines 数组
-
+const graphRef = ref()
 onMounted(() => {
   addStage()
+  graphRef.value.addEventListener('touchstart', (e: any) => {
+    emits('touchstart', e)
+  })
+  graphRef.value.addEventListener('touchmove', (e: any) => {
+    emits('touchmove', e)
+  })
+  graphRef.value.addEventListener('touchend', (e: any) => {
+    emits('touchend', e)
+  })
 })
 
 const zoom = 5
@@ -46,7 +57,7 @@ const addStage = () => {
   layer.value.draw()
 }
 
-let newWidth = (25) * zoom
+let newWidth = 25 * zoom
 let newHeight = (75 - 15 * 2) * zoom
 
 const addSelect = () => {
@@ -76,7 +87,12 @@ const addSelect = () => {
   })
 
   // 在onMounted中rect创建后添加拖拽监听
+  rect.value.on('dragstart', (event: any) => {
+    event.evt.stopPropagation()
+    event.cancelBubble = true // 阻止事件冒泡
+  })
   rect.value.on('dragmove', (event: any) => {
+    event.evt.stopPropagation()
     event.cancelBubble = true // 阻止事件冒泡
     const pos = rect.value.position()
     const width = newWidth
@@ -123,14 +139,6 @@ const addSelect = () => {
       return newBoundBox
     },
   })
-  // 监听 Transformer 的事件以阻止冒泡
-  tr.value.on('dragmove', (event: any) => {
-    event.cancelBubble = true // 阻止事件冒泡
-  })
-
-  tr.value.on('dragend', (event: any) => {
-    event.cancelBubble = true // 阻止事件冒泡
-  })
 
   layer.value.add(rect.value)
   layer.value.add(tr.value)
@@ -265,7 +273,7 @@ defineExpose({
     <!--      <div class="line" /> -->
     <!--      <div class="line" /> -->
     <!--    </div> -->
-    <div :id="container" />
+    <div :id="container" ref="graphRef" />
     <!--    <div class="right-line"> -->
     <!--      <div class="line" /> -->
     <!--      <div class="line" /> -->