From 5362a88721ffbb3c644ba5955b7b0f45fbc60ca0 Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Tue, 16 Sep 2025 22:09:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(tunnel):=20=E6=B7=BB=E5=8A=A0=E7=83=AD?=
 =?UTF-8?q?=E7=82=B9=E5=8C=BA=E5=9F=9F=E6=82=AC=E6=B5=AE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 polygon-demo.vue 中添加了 svg 元素，用于显示热点区域
- 实现了鼠标悬停在热点区域上时显示相关区域的功能
-优化了热点区域的渲染逻辑，提高了交互体验
---
 src/views/tunnel/polygon-demo.vue | 49 +++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/views/tunnel/polygon-demo.vue b/src/views/tunnel/polygon-demo.vue
index 386f977..676d741 100644
--- a/src/views/tunnel/polygon-demo.vue
+++ b/src/views/tunnel/polygon-demo.vue
@@ -5,8 +5,16 @@
       <!--        @/assets/images/tunnel/img.png-->
       <!--        <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;"/>
+        </svg>
         <!-- 测量模式控制按钮 -->
         <!--        <div v-if="isMeasuring" style="position: absolute; top: 20px; right: 20px; z-index: 1000;">-->
         <!--          <button @click.stop="toggleMeasurementMode" -->
@@ -26,9 +34,9 @@
         <!--        </div>-->
       </div>
       <map name="image" id="image">
-        <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
-              :title="item.title"  style="cursor: pointer;" @click="clickHot(item.tunnelId,item.clickIndex)">
-<!--        :href="'/' + item.tunnelId + '/' + siteId"-->
+        <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt="" :id="'area'+index"
+              :title="item.title"  style="cursor: pointer;" >
+<!--        :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId,item.clickIndex)"-->
       </map>
     </div>
     <div class="box-top">
@@ -278,6 +286,8 @@
       <div class="left-bottom-icon"></div>
       <div class="right-bottom-icon"></div>
     </el-dialog>
+
+
   </div>
 </template>
 
@@ -345,6 +355,7 @@ const routeList = ref([]);
 let socket = reactive("");
 let pattern = reactive(new RegExp("[A-Za-z]+"));
 let isTunnel = reactive(false);
+let showAarea10 = ref(false);
 const coordsList = ref([
   {
     //厂房
@@ -366,6 +377,7 @@ const coordsList = ref([
     coords: '847,74,833,64,819,28,820,79,842,87'
   }
 ])
+
 const btnList = ref([
   {
     route: "/site",
@@ -399,8 +411,6 @@ const roleKey = ref("");
 // 测量模式相关变量
 const isMeasuring = ref(false);
 const measurementPoints = ref([]);
-
-
 let token = getToken();
 let send = {
   type: "ping",
@@ -433,6 +443,29 @@ 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);
+
+  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
+  });
+
+  // area2.addEventListener("mouseenter", () => {
+  //   console.log("鼠标进入区域2");
+  // });
+})
+
 function convertCoordsToArray(coordsArray) {
   return coordsArray.map(point => `${point.x},${point.y}`).join(',');
 }
@@ -847,7 +880,7 @@ const toggleMeasurementMode = () => {
 const handleImageClick = (event) => {
   // 如果不是测量模式，执行原来的getInfo逻辑
   if (!isMeasuring.value) {
-    getInfo();
+    // getInfo();
     return;
   }
 
@@ -972,6 +1005,10 @@ const clearMeasurementPoints = () => {
 </style>
 
 <style lang="scss" scoped>
+.points{
+  background-color: red;
+  z-index: 2222222222222222222;
+}
 #main {
   height: 100%;
   width: 100%;