From 5c2492c5013ff49162180419db22f6afb6cdc850 Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Tue, 16 Sep 2025 22:32:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor(tunnel):=20=E4=BC=98=E5=8C=96=20polygo?=
 =?UTF-8?q?n-demo=20=E9=BC=A0=E6=A0=87=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=20-=20=E4=B8=BA=20polygon=20=E5=85=83=E7=B4=A0=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=98=B2=E6=8A=96=E5=A4=84=E7=90=86=EF=BC=8C=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=E9=BC=A0=E6=A0=87=E5=BF=AB=E9=80=9F=E8=BF=9B=E5=87=BA?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=9A=84=E9=97=AA=E7=83=81=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20-=20=E4=BF=AE=E6=94=B9=E9=BC=A0=E6=A0=87=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91=EF=BC=8C=E7=A1=AE=E4=BF=9D?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E5=9C=A8=E5=8C=BA=E5=9F=9F=E5=86=85=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E6=97=B6=E4=BF=9D=E6=8C=81=E6=98=BE=E7=A4=BA=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=20-=E4=BC=98=E5=8C=96=20mouseleave=20=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=84=E7=90=86=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=BB=B6?=
 =?UTF-8?q?=E8=BF=9F=E9=9A=90=E8=97=8F=E6=95=88=E6=9E=9C=EF=BC=8C=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=E5=BF=AB=E9=80=9F=E5=88=87=E6=8D=A2-=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=20polygon=20=E5=85=83=E7=B4=A0=E7=9A=84=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E7=82=B9=E5=87=BB=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tunnel/polygon-demo.vue | 62 +++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/views/tunnel/polygon-demo.vue b/src/views/tunnel/polygon-demo.vue
index 676d741..7f92786 100644
--- a/src/views/tunnel/polygon-demo.vue
+++ b/src/views/tunnel/polygon-demo.vue
@@ -6,14 +6,12 @@
       <!--        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
       <!--             alt="" @click="clickHandler">-->
 
-
-
       <div style="display: flex;justify-content: center;align-items: center;position: relative;" >
         <img src="/images/img.png" alt="" class="imgModel" id="imgModel" usemap="#image" @click="handleImageClick"/>
         <svg width="1040" height="650" viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg" style="position: absolute;left: -232px;top: 32px" title="厂房" v-if="showAarea10">
           <!-- points 字符串格式 "x1,y1 x2,y2 x3,y3 ..." -->
           <polygon id="poly" points="127,418 165,415 175,440 136,556 98,558 106,478"
-                   fill="rgba(0,150,255,0.3)" stroke="#0077cc" stroke-width="2" @click="clickHot(1,1)"  style="cursor: pointer;"/>
+                   fill="rgba(0,150,255,0.3)" stroke="#0077cc" stroke-width="2" @click="clickHot(98,0)"   style="cursor: pointer; pointer-events: auto;"/>
         </svg>
         <!-- 测量模式控制按钮 -->
         <!--        <div v-if="isMeasuring" style="position: absolute; top: 20px; right: 20px; z-index: 1000;">-->
@@ -445,26 +443,50 @@ onMounted(() => {
 
 const pts = [{x:50,y:50},{x:300,y:80}];
 const str = pts.map(p => `${p.x},${p.y}`).join(' ');
-nextTick(()=>{
-
-  // document.getElementById('poly1').setAttribute('points', str);
-
+// 修改mouseenter和mouseout事件处理，使用防抖和更精确的检测
+nextTick(() => {
   const area1 = document.getElementById("area0");
-  // const area2 = document.getElementById("area2");
 
-  area1.addEventListener("mouseenter", e => {
-    console.log("鼠标移动在区域0", e.clientX, e.clientY);
-    showAarea10.value=true
-  });
-  area1.addEventListener("mouseout", e => {
-    console.log("鼠标移动在区域0", e.clientX, e.clientY);
-    showAarea10.value=false
-  });
+  // 添加防抖标志，避免频繁切换
+  let hoverTimeout = null;
+  let isHovered = false;
+
+  if (area1) {
+    area1.addEventListener("mouseenter", e => {
+      console.log("鼠标进入区域0", e.clientX, e.clientY);
+      // 清除之前的定时器
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+
+      // 设置hover状态
+      isHovered = true;
+      showAarea10.value = true;
+    });
+
+    area1.addEventListener("mousemove", e => {
+      // 鼠标在区域内移动时保持显示状态
+      if (!isHovered) {
+        isHovered = true;
+        showAarea10.value = true;
+      }
+    });
+
+    area1.addEventListener("mouseleave", e => {
+      console.log("鼠标离开区域0", e.clientX, e.clientY);
+      // 设置延迟隐藏，避免闪动
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+
+      hoverTimeout = setTimeout(() => {
+        isHovered = false;
+        showAarea10.value = false;
+      }, 100); // 100ms延迟
+    });
+  }
+});
 
-  // area2.addEventListener("mouseenter", () => {
-  //   console.log("鼠标进入区域2");
-  // });
-})
 
 function convertCoordsToArray(coordsArray) {
   return coordsArray.map(point => `${point.x},${point.y}`).join(',');