refactor(tunnel): 优化 polygon-demo 鼠标事件处理

- 为 polygon 元素添加防抖处理，避免鼠标快速进出导致的闪烁问题
- 修改鼠标事件处理逻辑，确保鼠标在区域内移动时保持显示状态
-优化 mouseleave 事件处理，添加延迟隐藏效果，避免快速切换- 调整 polygon 元素的点击事件处理，修改点击参数

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");
 
+  // 添加防抖标志，避免频繁切换
+  let hoverTimeout = null;
+  let isHovered = false;
+
+  if (area1) {
     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
+      console.log("鼠标进入区域0", e.clientX, e.clientY);
+      // 清除之前的定时器
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+
+      // 设置hover状态
+      isHovered = true;
+      showAarea10.value = true;
     });
 
-  // area2.addEventListener("mouseenter", () => {
-  //   console.log("鼠标进入区域2");
-  // });
-})
+    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延迟
+    });
+  }
+});
+
 
 function convertCoordsToArray(coordsArray) {
   return coordsArray.map(point => `${point.x},${point.y}`).join(',');