refactor(tunnel): 重构隧道页面

- 移除了图像热点区域和相关逻辑
-调整了页面布局和样式- 优化了部分组件的使用方式

src/views/tunnel/index.vue

@@ -1,24 +1,11 @@
 <template>
   <div id="main">
-
-    <div class="img-box" id="imghot">
-      <!--        @/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;" >
-        <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.title" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
-      </map>
-    </div>
     <div class="box-top">
       <manage-btn
-        v-model="selectIndex"
+          v-model="selectIndex"
-        @select="manageSelect"
+          @select="manageSelect"
-        :list="routeList"
+          :list="routeList"
-        v-if="showMenu"
+          v-if="showMenu"
       />
       <tunnel-title v-if="showTunnelTitle" />
       <div class="top-length">
@@ -29,27 +16,27 @@
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
           <el-dropdown
-            trigger="click"
+              trigger="click"
-            @command="handleChangeSite"
+              @command="handleChangeSite"
-            popper-class="dropdown-style"
+              popper-class="dropdown-style"
           >
             <div class="toggle"></div>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item
-                  v-for="item in siteList"
+                    v-for="item in siteList"
-                  :key="item.value"
+                    :key="item.value"
-                  :command="item"
+                    :command="item"
-                  >{{ item.label }}
+                >{{ item.label }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
           <el-icon
-            size="50"
+              size="50"
-            color="#0BE9FA"
+              color="#0BE9FA"
-            style="margin-left: 50px; cursor: pointer"
+              style="margin-left: 50px; cursor: pointer"
-            @click="
+              @click="
               isVisited = true;
               getAlarmList();
             "
@@ -66,39 +53,39 @@
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
-<!--    <preview-scene-->
+    <preview-scene
-<!--      id="tunnel-box"-->
+        id="tunnel-box"
-<!--      :isedit="false"-->
+        :isedit="false"
-<!--      :tunnelId="tunnelId"-->
+        :tunnelId="tunnelId"
-<!--      :key="tunnelId"-->
+        :key="tunnelId"
-<!--      :tunnelLen="tunnelLen"-->
+        :tunnelLen="tunnelLen"
-<!--      :largeScreen="largeScreen"-->
+        :largeScreen="largeScreen"
-<!--      :fanList="socketData.leftData"-->
+        :fanList="socketData.leftData"
-<!--      :devRealtimeData="socketData"-->
+        :devRealtimeData="socketData"
-<!--    ></preview-scene>-->
+    ></preview-scene>
     <div class="left">
       <el-drawer
-        v-model="drawerLeft"
+          v-model="drawerLeft"
-        direction="ltr"
+          direction="ltr"
-        modal-class="modal-box"
+          modal-class="modal-box"
-        :modal="false"
+          :modal="false"
-        :show-close="false"
+          :show-close="false"
-        :close-on-click-modal="false"
+          :close-on-click-modal="false"
-        :close-on-press-escape="false"
+          :close-on-press-escape="false"
       >
         <fan-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.leftData"
+            :list="socketData.leftData"
-          :fan-data="largeScreenData"
+            :fan-data="largeScreenData"
-          :transducer-data="largeScreenData"
+            :transducer-data="largeScreenData"
-          :loading="showFanLoading"
+            :loading="showFanLoading"
-          :tunnel-id="tunnelId"
+            :tunnel-id="tunnelId"
         />
         <used-ele
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.leftData"
+            :list="socketData.leftData"
-          :loading="showUsedLoading"
+            :loading="showUsedLoading"
-          :ele-data="largeScreenData"
+            :ele-data="largeScreenData"
         />
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
@@ -106,32 +93,32 @@
     </div>
     <div class="right">
       <el-drawer
-        v-model="drawerRight"
+          v-model="drawerRight"
-        direction="rtl"
+          direction="rtl"
-        modal-class="modal-box"
+          modal-class="modal-box"
-        :modal="false"
+          :modal="false"
-        :show-close="false"
+          :show-close="false"
-        :close-on-click-modal="false"
+          :close-on-click-modal="false"
-        :close-on-press-escape="false"
+          :close-on-press-escape="false"
       >
         <wind-pressure-list
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.windPressure"
+            :list="socketData.windPressure"
-          :win-data="largeScreenData"
+            :win-data="largeScreenData"
-          :loading="showWindLoading"
+            :loading="showWindLoading"
         />
         <air-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :windSpeed="socketData.windSpeed"
+            :windSpeed="socketData.windSpeed"
-          :air-data="largeScreenData"
+            :air-data="largeScreenData"
         />
         <bad-gas-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :bad-gas-data="largeScreenData"
+            :bad-gas-data="largeScreenData"
-          :tunnelId="tunnelId"
+            :tunnelId="tunnelId"
-          :loading="showBadLoading"
+            :loading="showBadLoading"
         />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -140,7 +127,7 @@
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
       <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex"
-        @change="changeTunnel">
+                   @change="changeTunnel">
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -152,10 +139,10 @@
   </div>
   <div class="alarm-dialog alarm-tunnel">
     <el-dialog
-      :close-on-click-modal="false"
+        :close-on-click-modal="false"
-      v-model="isDetailVisited"
+        v-model="isDetailVisited"
-      title="报警信息详情"
+        title="报警信息详情"
-      width="1500px"
+        width="1500px"
     >
       <div class="detail">
         <div>报警时间：</div>
@@ -169,30 +156,30 @@
   </div>
   <div class="alarm-tunnel">
     <el-dialog
-      :close-on-click-modal="false"
+        :close-on-click-modal="false"
-      v-model="isVisited"
+        v-model="isVisited"
-      title="报警信息"
+        title="报警信息"
-      width="2175px"
+        width="2175px"
-      :modal="false"
+        :modal="false"
     >
       <div class="left-top-icon"></div>
       <div class="right-top-icon"></div>
       <el-form
-        :model="queryParams"
+          :model="queryParams"
-        inline
+          inline
-        class="query-form"
+          class="query-form"
-        ref="queryForm"
+          ref="queryForm"
-        @submit.prevent="getAlarmList"
+          @submit.prevent="getAlarmList"
-        v-if="roleKey !== 'administrator'"
+          v-if="roleKey !== 'administrator'"
       >
         <el-form-item label="查阅状态" prop="lookupStatus">
           <el-select
-            v-model="queryParams.lookupStatus"
+              v-model="queryParams.lookupStatus"
-            placeholder="请选择查阅状态"
+              placeholder="请选择查阅状态"
-            :fit-input-width="true"
+              :fit-input-width="true"
-            :teleported="false"
+              :teleported="false"
-            clearable
+              clearable
-            filterable
+              filterable
           >
             <el-option label="已读" :value="true" />
             <el-option label="未读" :value="false" />
@@ -205,55 +192,55 @@
       </el-form>
       <div class="device-table" :style="{ marginTop: roleKey === 'administrator' ? '10px' : '0' }">
         <el-table stripe v-loading="loading" :empty-text="tableEmptyText"
-          style="background-color: #011c29;--el-table-border-color: none;"
+                  style="background-color: #011c29;--el-table-border-color: none;"
-          :header-cell-style="{ backgroundColor: '#064B66', color: '#fff', fontSize: '40px', borderBottom: 'none' }"
+                  :header-cell-style="{ backgroundColor: '#064B66', color: '#fff', fontSize: '40px', borderBottom: 'none' }"
-          :data="alarmList">
+                  :data="alarmList">
           <el-table-column prop="tunnelName" label="隧道名称" align="center" width="400px" />
           <el-table-column prop="alarmContent" label="告警信息" align="center" />
           <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px" />
           <el-table-column prop="lookupStatus" label="查阅状态" align="center" width="200px"
-            v-if="roleKey !== 'administrator'">
+                           v-if="roleKey !== 'administrator'">
             <template #default="scope">
               <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
-                >{{ scope.row.lookupStatus ? "已读" : "未读" }}
+              >{{ scope.row.lookupStatus ? "已读" : "未读" }}
               </el-tag>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" width="300px">
             <template #default="scope">
               <el-button
-                type="primary"
+                  type="primary"
-                size="mini"
+                  size="mini"
-                style="font-weight: bold"
+                  style="font-weight: bold"
-                @click="handleView(scope.row)"
+                  @click="handleView(scope.row)"
-                link
+                  link
-                >详情
+              >详情
               </el-button>
               <el-button
-                type="danger"
+                  type="danger"
-                size="mini"
+                  size="mini"
-                v-if="roleKey !== 'administrator'"
+                  v-if="roleKey !== 'administrator'"
-                @click="handleDelete(scope.row)"
+                  @click="handleDelete(scope.row)"
-                link
+                  link
-                >删除
+              >删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
         <div
-          class="pagination"
+            class="pagination"
-          :style="{ bottom: roleKey === 'administrator' ? '-7px' : '0' }"
+            :style="{ bottom: roleKey === 'administrator' ? '-7px' : '0' }"
         >
           <el-pagination
-            background
+              background
-            v-model:current-page="pageInfo.pageNum"
+              v-model:current-page="pageInfo.pageNum"
-            v-model:page-size="pageInfo.pageSize"
+              v-model:page-size="pageInfo.pageSize"
-            :total="total" :pager-count="8"
+              :total="total" :pager-count="8"
-            prev-text="上一页"
+              prev-text="上一页"
-            next-text="下一页"
+              next-text="下一页"
-            layout="prev, pager, next"
+              layout="prev, pager, next"
-            @current-change="handleCurrentChange"
+              @current-change="handleCurrentChange"
-            :hide-on-single-page="true"
+              :hide-on-single-page="true"
           />
         </div>
       </div>
@@ -327,24 +314,7 @@ const routeList = ref([]);
 let socket = reactive("");
 let pattern = reactive(new RegExp("[A-Za-z]+"));
 let isTunnel = reactive(false);
-const coordsList = ref([
+// const equipmentOption = ref([])
-  {
-    //厂房
-    tunnelId: 98,
-    title: '厂房',
-    coords: '163,487,153,483,217,480,170,644,111,640,145,483',
-  }, {
-  //2#尾水
-    tunnelId: 1,
-    title: '2#尾水隧洞',
-    coords: '335,548,1029,183,1079,71,1098,78,1044,192,344,567,335,548'
-  }, {
-  //5#支洞
-    tunnelId: 109,
-    title: '5#支洞',
-    coords: '1046,85,1029,76,1020,45,1004,45,1014,88,1045,103,1046,85'
-  }
-])
 const btnList = ref([
   {
     route: "/site",
@@ -374,28 +344,6 @@ const btnList = ref([
 ]);
 const serialNumber = ref("");
 const roleKey = ref("");
-function convertCoordsToArray(coordsArray) {
-  return coordsArray.map(point => `${point.x},${point.y}`).join(',');
-}
-
-// 示例使用：
-const coordsData = [
-  { x: 163, y: 487 },
-  { x: 153, y: 483 },
-  { x: 217, y: 480 },
-  { x: 170, y: 644 },
-  { x: 111, y: 640 },
-  { x: 145, y: 483 }
-];
-
-const result = convertCoordsToArray(coordsData);
-console.log(result);
-// 输出: "163,487,153,483,217,480,170,644,111,640,145,483"
-const clickHot = (id) => {
-  console.log('点击热区===============')
-  router.push('/' + id + '/' + siteId)
-}
-
 let token = getToken();
 let send = {
   type: "ping",
@@ -576,13 +524,13 @@ const getScreenInfo = (id) => {
           // })
           res.data.sensorList.forEach((item) => {
             if (
-              item.equipmentType === "dust" ||
+                item.equipmentType === "dust" ||
-              item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonDioxide" ||
-              item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "carbonMonoxide" ||
-              item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "hydrogenSulfide" ||
-              item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurDioxide" ||
-              item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
-              item.equipmentType === "nitrogenDioxide"
+                item.equipmentType === "nitrogenDioxide"
             ) {
               showBadLoading.value = 0;
             } else {
@@ -682,7 +630,7 @@ const manageSelect = (name) => {
   } else if (name === "隧道管理") {
     if (currentSiteId.value && currentUserId.value) {
       router.push(
-        "/tunnel/" +
+          "/tunnel/" +
           localStorage.getItem("currentSiteId") +
           "/byHome/" +
           currentUserId.value
@@ -875,26 +823,11 @@ const initWebSocket = () => {
 #main {
   height: 100%;
   width: 100%;
-  //background-color: #072348;
+  background-color: #072348;
-  background-image: url('/images/background/background.png');
 
   #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{
-    width: 1040px;
-    height: 646px;
-  }
 }
 
 .alarm-dialog {