From 28a03009c55e00d45c4c0e805af97e904c3cf6e7 Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Sat, 13 Sep 2025 11:09:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor(tunnel):=20=E4=BC=98=E5=8C=96=E9=9A=A7?=
 =?UTF-8?q?=E9=81=93=E5=9B=BE=E5=83=8F=E5=B1=95=E7=A4=BA=E5=92=8C=E7=83=AD?=
 =?UTF-8?q?=E7=82=B9=E5=8C=BA=E5=9F=9F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整图像大小以适应页面布局
- 为每个热点区域添加标题属性
- 修改隧道 ID 和坐标以匹配新设计- 添加点击事件处理函数以获取更多信息
---
 src/views/tunnel/index.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index fa9f7bc..323332f 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -6,11 +6,11 @@
       <!--        <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;" >
-        <img src="/images/img.png" alt="" class="imgModel" id="imgModel" usemap="#image" />
+        <img src="/images/img.png" alt="" class="imgModel" id="imgModel" usemap="#image" @click="getInfo()"/>
       </div>
       <map name="image" id="image">
         <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
-              :title="item.tunnelId+'隧道'" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
+              :title="item.title" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
       </map>
     </div>
     <div class="box-top">
@@ -330,15 +330,18 @@ let isTunnel = reactive(false);
 const coordsList = ref([
   {
     //厂房
-    tunnelId: 1,
-    coords: '197,486,166,480,115,635,170,642,215,506,197,486',
+    tunnelId: 98,
+    title: '厂房',
+    coords: '163,487,153,483,217,480,170,644,111,640,145,483',
   }, {
   //2#尾水
-    tunnelId: 2,
+    tunnelId: 1,
+    title: '2#尾水隧洞',
     coords: '335,548,1029,183,1079,71,1098,78,1044,192,344,567,335,548'
   }, {
   //5#支洞
-    tunnelId: 3,
+    tunnelId: 109,
+    title: '5#支洞',
     coords: '1046,85,1029,76,1020,45,1004,45,1014,88,1045,103,1046,85'
   }
 ])
@@ -889,7 +892,8 @@ const initWebSocket = () => {
     align-items: center;
   }
   .imgModel{
-    width:2048px;height:1360px
+    width: 1040px;
+    height: 646px;
   }
 }