feat(tunnel): 添加隧道热区点击功能

- 在隧道图片上添加可点击的热区
- 实现热区点击后跳转到对应隧道页面
- 添加隧道坐标数据和点击事件处理函数

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",