refactor(tunnel): 优化隧道页面布局和图片显示

-移除 div 容器的多余样式，提高灵活性
-调整 img 元素的样式，使其适应不同尺寸的图片- 添加厂房、尾水、支洞的坐标信息
- 更新隧道图片的尺寸

src/views/tunnel/index.vue

@@ -5,7 +5,7 @@
       <!--        @/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%" >
+      <div style="display: flex;justify-content: center;align-items: center;" >
         <img src="/images/img.png" alt="" class="imgModel" id="imgModel" usemap="#image" />
       </div>
       <map name="image" id="image">
@@ -329,14 +329,17 @@ let pattern = reactive(new RegExp("[A-Za-z]+"));
 let isTunnel = reactive(false);
 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',
+    coords: '197,486,166,480,115,635,170,642,215,506,197,486',
   }, {
-    tunnelId: 1,
+  //2#尾水
-    coords: '863,1475,1135,1494,2321,1078,3023,801,3214,703,3288,752,2300,1154,1560,1438,1170,1554,844,1529',
+    tunnelId: 2,
+    coords: '335,548,1029,183,1079,71,1098,78,1044,192,344,567,335,548'
   }, {
-    tunnelId: 94,
+  //5#支洞
-    coords: '1181,1364,2105,622,2005,589,1116,1324'
+    tunnelId: 3,
+    coords: '1046,85,1029,76,1020,45,1004,45,1014,88,1045,103,1046,85'
   }
 ])
 const btnList = ref([
@@ -859,9 +862,18 @@ const initWebSocket = () => {
   #tunnel-box {
     height: 100%;
   }
+  .img-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   .imgModel{
-    height: 52%;
+    width:2048px;height:1360px
-    width: 52%;
   }
 }