From 11368af1207a9bc3edbb300cf202eecf8812f249 Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Fri, 12 Sep 2025 00:04:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(tunnel):=20=E6=B7=BB=E5=8A=A0=E9=9A=A7?=
 =?UTF-8?q?=E9=81=93=E7=83=AD=E5=8C=BA=E7=82=B9=E5=87=BB=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在隧道图片上添加可点击的热区
- 实现热区点击后跳转到对应隧道页面
- 添加隧道坐标数据和点击事件处理函数
---
 src/views/tunnel/index.vue | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 3edb73b..71ae7b8 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,7 +1,17 @@
 <template>
   <div id="main">
-    <div style="display: flex;justify-content: center;align-items: center;height: 100%">
-      <img src="/images/img.png" alt="" class="imgModel"/>
+
+    <div class="img-box">
+      <!--        @/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;height: 100%" >
+        <img src="/images/img.png" alt="" class="imgModel" id="imgModel" usemap="#image" />
+      </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)">
+      </map>
     </div>
     <div class="box-top">
       <manage-btn
@@ -317,7 +327,18 @@ const routeList = ref([]);
 let socket = reactive("");
 let pattern = reactive(new RegExp("[A-Za-z]+"));
 let isTunnel = reactive(false);
-// const equipmentOption = ref([])
+const coordsList = ref([
+  {
+    tunnelId: 1,
+    coords: '767,1117,793,1182,2379,682,2437,454,2349,505,2298,666,2221,531,2153,578,2212,692,765,1126',
+  }, {
+    tunnelId: 1,
+    coords: '863,1475,1135,1494,2321,1078,3023,801,3214,703,3288,752,2300,1154,1560,1438,1170,1554,844,1529',
+  }, {
+    tunnelId: 94,
+    coords: '1181,1364,2105,622,2005,589,1116,1324'
+  }
+])
 const btnList = ref([
   {
     route: "/site",
@@ -347,6 +368,12 @@ const btnList = ref([
 ]);
 const serialNumber = ref("");
 const roleKey = ref("");
+
+const clickHot = (id) => {
+  console.log('点击热区===============')
+  router.push('/' + id + '/' + siteId)
+}
+
 let token = getToken();
 let send = {
   type: "ping",