fix : 修复预览隧道时切换报错bug

src/views/tunnel-simulate/index.vue

@@ -1,12 +1,16 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />
-      <tunnel-title v-if="showTunnelTitle" />
+<!--            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
+      <tunnel-title v-if="showTunnelTitle"/>
       <div class="top-length">
         <span>隧道总长度: {{ tunnelLength }}米</span>
-        <span class="all-btn" @click="startSimulate">开始模拟</span>
-<!--        <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
+        <span class="all-btn" @click="startSimulate" v-if="isStartSimulate">开始模拟</span>
+        <div v-else>
+          <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
+          <span class="all-btn" @click="endSimulate">结束模拟</span>
+        </div>
+        <!--        <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
       </div>
       <div class="top-right" v-if="isPreview">
         <div class="current-site">
@@ -16,15 +20,15 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-        item.label
-      }}
+                    item.label
+                  }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
           <el-icon size="50" color="#0BE9FA" style="margin-left: 50px;cursor: pointer"
-            @click="isVisited = true; getAlarmList()">
-            <Bell />
+                   @click="isVisited = true; getAlarmList()">
+            <Bell/>
           </el-icon>
         </div>
         <div class="current-user">
@@ -36,27 +40,27 @@
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
-    <preview-scene  id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-      :largeScreen="largeScreen" :fanList="socketData.leftData"></preview-scene>
+    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
+                   :largeScreen="largeScreen" :fanList="socketData.leftData"></preview-scene>
     <div class="left" v-if="isPreview">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
-        <used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData" />
+                  :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/>
+        <used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right" v-if="isPreview">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
-          :loading="showWindLoading" />
+                            :loading="showWindLoading"/>
         <air-info v-if="showFan" :list="socketData.sensor" :windSpeed="socketData.windSpeed"
-          :air-data="largeScreenData" />
+                  :air-data="largeScreenData"/>
         <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
-          :loading="showBadLoading" />
+                      :loading="showBadLoading"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -64,7 +68,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 }}
@@ -91,12 +95,12 @@
       <div class="left-top-icon"></div>
       <div class="right-top-icon"></div>
       <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getAlarmList"
-        v-if="roleKey !== 'administrator'">
+               v-if="roleKey !== 'administrator'">
         <el-form-item label="查阅状态" prop="lookupStatus">
           <el-select v-model="queryParams.lookupStatus" placeholder="请选择查阅状态" :fit-input-width="true"
-            :teleported="false" clearable filterable>
-            <el-option label="已读" :value="true" />
-            <el-option label="未读" :value="false" />
+                     :teleported="false" clearable filterable>
+            <el-option label="已读" :value="true"/>
+            <el-option label="未读" :value="false"/>
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -106,14 +110,14 @@
       </el-form>
       <div class="device-table" :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }">
         <el-table stripe v-loading="loading" :empty-text="tableEmptyText"
-          style="background-color: #011c29;--el-table-border-color: none;"
-          :header-cell-style="{ backgroundColor: '#064B66', color: '#fff', fontSize: '40px', borderBottom: 'none' }"
-          :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" />
+                  style="background-color: #011c29;--el-table-border-color: none;"
+                  :header-cell-style="{ backgroundColor: '#064B66', color: '#fff', fontSize: '40px', borderBottom: 'none' }"
+                  :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 ? '已读' : '未读' }}
@@ -125,15 +129,15 @@
               <el-button type="primary" size="mini" style="font-weight: bold" @click="handleView(scope.row)" link>详情
               </el-button>
               <el-button type="danger" size="mini" v-if="roleKey !== 'administrator'" @click="handleDelete(scope.row)"
-                link>删除
+                         link>删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
         <div class="pagination" :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }">
           <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
-            :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
-            @current-change="handleCurrentChange" :hide-on-single-page="true" />
+                         :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                         @current-change="handleCurrentChange" :hide-on-single-page="true"/>
         </div>
       </div>
       <div class="left-bottom-icon"></div>
@@ -151,9 +155,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
-import { dateFormat } from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
+import {dateFormat} from "@/utils/date.js";
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from "@/store/userstore.js";
 import {
   getLargeScreen,
   getLargeScreenInfo,
@@ -164,10 +168,10 @@ import {
   updateAlarmState
 } from "@/api/largeScreen";
 import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
-import { getUserInfo } from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
-import { getTunnelList } from "@/api/tunnelManage";
-import { debounce } from 'lodash'
+import {getUserInfo} from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
+import {getTunnelList} from "@/api/tunnelManage";
+import {debounce} from 'lodash'
 
 
 const authStore = useAuthStore();
@@ -189,6 +193,7 @@ const showFanLoading = ref(0)
 const showUsedLoading = ref(0)
 const showWindLoading = ref(0)
 const showBadLoading = ref(0)
+const isStartSimulate = ref(true);
 const drawerRight = ref(true);
 const showMenu = ref(false);
 const currentSiteId = ref(0);
@@ -269,8 +274,8 @@ onMounted(() => {
     showFan.value = true;
   });
 });
-const startSimulate=()=>{
-
+const startSimulate = () => {
+  isStartSimulate.value = false
 }
 const changeName = (id) => {
   for (let item of equipmentOption.value) {
@@ -419,13 +424,13 @@ const getScreenInfo = (id) => {
           // })
           res.data.sensorList.forEach((item) => {
             if (
-              item.equipmentType === "dust" ||
-              item.equipmentType === "carbonDioxide" ||
-              item.equipmentType === "carbonMonoxide" ||
-              item.equipmentType === "hydrogenSulfide" ||
-              item.equipmentType === "sulfurDioxide" ||
-              item.equipmentType === "sulfurMonoxide" ||
-              item.equipmentType === "nitrogenDioxide"
+                item.equipmentType === "dust" ||
+                item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "nitrogenDioxide"
             ) {
               showBadLoading.value = 0
             } else {
@@ -493,7 +498,9 @@ const getTunnel = (id) => {
   });
 }
 const changeTunnel = (e) => {
-  socket.close()
+  if(socket){
+    socket.close()
+  }
   let newObj = {}
   tunnelList.value.forEach((item, index) => {
     if (index === e) {
@@ -527,10 +534,14 @@ const manageSelect = (index) => {
       router.push("/user/" + localStorage.getItem('currentSiteId'));
     }
   }
-  socket.close()
+  if(socket){
+    socket.close()
+  }
 };
 const handleChangeSite = debounce((item) => {
-  socket.close()
+  if(socket){
+    socket.close()
+  }
   currentSite.value = item.label
   currentSiteId.value = item.value
   getTunnel(item.value)
@@ -685,10 +696,12 @@ const initWebSocket = () => {
   text-align: center;
   margin-left: 40px;
   font-size: 38px;
-  &:hover{
+
+  &:hover {
     color: #f7b500;
   }
 }
+
 #main {
   height: 100%;
   width: 100%;
@@ -796,7 +809,7 @@ const initWebSocket = () => {
         height: 70px !important;
         line-height: 70px !important;
 
-        >span {
+        > span {
           color: #FFFFFF;
         }
       }
@@ -870,7 +883,7 @@ const initWebSocket = () => {
     line-height: 40px;
     font-size: 36px;
 
-    &>div {
+    & > div {
       flex: 1;
       text-align: center;
       cursor: pointer;
@@ -959,11 +972,11 @@ const initWebSocket = () => {
     }
   }
 
-  >span:first-child {
+  > span:first-child {
     margin-right: 60px;
   }
 
-  >span:last-child {
+  > span:last-child {
     margin-left: 71px;
   }