refactor(tunnel): 优化隧道图像展示和热点区域设置

- 调整图像大小以适应页面布局
- 为每个热点区域添加标题属性
- 修改隧道 ID 和坐标以匹配新设计- 添加点击事件处理函数以获取更多信息

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;
   }
 }