fix : 优化隧道模拟首页的隧道预览模式

src/views/tunnel-simulate/index.vue

@@ -2,11 +2,11 @@
   <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" />
+      <tunnel-title v-if="showTunnelTitle"/>
       <div class="top-length">
         <span>隧道总长度: {{ tunnelLength }}米</span>
         <span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
-          >开始模拟</span
+        >开始模拟</span
         >
         <div v-else>
           <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
@@ -36,17 +36,19 @@
       </div>
     </div>
     <device-manage
-      v-if="showDevice"
-      @cancel="cancelDeviceManage"
-      @submit="submitDevice"
+        v-if="showDevice"
+        @cancel="cancelDeviceManage"
+        @submit="submitDevice"
     />
     <!--    模拟隧道模式-->
     <preview-scene-simulate
-      id="tunnel-box"
-      :isedit="false"
-      :device-data="largeScreenData"
-      :tunnelLength="100"
-      :tunnelId="tunnelId"
+        ref="previewRef"
+        id="tunnel-box"
+        :isedit="false"
+        :device-data="largeScreenData"
+        :tunnelLength="tunnelLength"
+        :tunnelId="tunnelId"
+        :tunnelAlias="tunnelAlias"
     ></preview-scene-simulate>
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <!--    <preview-scene-->
@@ -60,22 +62,22 @@
     <!--    ></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"
+          v-model="drawerLeft"
+          direction="ltr"
+          modal-class="modal-box"
+          :modal="false"
+          :show-close="false"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
       >
         <fan-info
-          v-if="showFan"
-          :list="socketData.leftData"
-          :isSimulate="true"
-          :fan-data="largeScreenData"
-          :transducer-data="largeScreenData"
-          :loading="showFanLoading"
-          :tunnel-id="tunnelId"
+            v-if="showFan"
+            :list="socketData.leftData"
+            :isSimulate="true"
+            :fan-data="largeScreenData"
+            :transducer-data="largeScreenData"
+            :loading="showFanLoading"
+            :tunnel-id="tunnelId"
         />
         <!--        <used-ele-->
         <!--            v-if="showFan"-->
@@ -89,35 +91,35 @@
     </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"
+          v-model="drawerRight"
+          direction="rtl"
+          modal-class="modal-box"
+          :modal="false"
+          :show-close="false"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
       >
         <wind-pressure-list
-          v-if="showFan"
-          :list="socketData.windPressure"
-          :isSimulate="true"
-          :win-data="largeScreenData"
-          :loading="showWindLoading"
+            v-if="showFan"
+            :list="socketData.windPressure"
+            :isSimulate="true"
+            :win-data="largeScreenData"
+            :loading="showWindLoading"
         />
         <air-info
-          v-if="showFan"
-          :list="socketData.sensor"
-          :windSpeed="socketData.windSpeed"
-          :isSimulate="true"
-          :air-data="largeScreenData"
+            v-if="showFan"
+            :list="socketData.sensor"
+            :windSpeed="socketData.windSpeed"
+            :isSimulate="true"
+            :air-data="largeScreenData"
         />
         <bad-gas-info
-          v-if="showFan"
-          :list="socketData.sensor"
-          :bad-gas-data="largeScreenData"
-          :isSimulate="true"
-          :tunnelId="tunnelId"
-          :loading="showBadLoading"
+            v-if="showFan"
+            :list="socketData.sensor"
+            :bad-gas-data="largeScreenData"
+            :isSimulate="true"
+            :tunnelId="tunnelId"
+            :loading="showBadLoading"
         />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -126,10 +128,10 @@
   </div>
   <div class="alarm-dialog alarm-tunnel">
     <el-dialog
-      :close-on-click-modal="false"
-      v-model="isDetailVisited"
-      title="报警信息详情"
-      width="1500px"
+        :close-on-click-modal="false"
+        v-model="isDetailVisited"
+        title="报警信息详情"
+        width="1500px"
     >
       <div class="detail">
         <div>报警时间：</div>
@@ -143,33 +145,33 @@
   </div>
   <div class="alarm-tunnel">
     <el-dialog
-      :close-on-click-modal="false"
-      v-model="isVisited"
-      title="报警信息"
-      width="2175px"
-      :modal="false"
+        :close-on-click-modal="false"
+        v-model="isVisited"
+        title="报警信息"
+        width="2175px"
+        :modal="false"
     >
       <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'"
+          :model="queryParams"
+          inline
+          class="query-form"
+          ref="queryForm"
+          @submit.prevent="getAlarmList"
+          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
+              v-model="queryParams.lookupStatus"
+              placeholder="请选择查阅状态"
+              :fit-input-width="true"
+              :teleported="false"
+              clearable
+              filterable
           >
-            <el-option label="已读" :value="true" />
-            <el-option label="未读" :value="false" />
+            <el-option label="已读" :value="true"/>
+            <el-option label="未读" :value="false"/>
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -178,87 +180,87 @@
         </el-form-item>
       </el-form>
       <div
-        class="device-table"
-        :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
+          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="{
+            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"
+            :data="alarmList"
         >
           <el-table-column
-            prop="tunnelName"
-            label="隧道名称"
-            align="center"
-            width="400px"
+              prop="tunnelName"
+              label="隧道名称"
+              align="center"
+              width="400px"
           />
           <el-table-column
-            prop="alarmContent"
-            label="告警信息"
-            align="center"
+              prop="alarmContent"
+              label="告警信息"
+              align="center"
           />
           <el-table-column
-            prop="alarmTime"
-            label="告警时间"
-            align="center"
-            width="480px"
+              prop="alarmTime"
+              label="告警时间"
+              align="center"
+              width="480px"
           />
           <el-table-column
-            prop="lookupStatus"
-            label="查阅状态"
-            align="center"
-            width="200px"
-            v-if="roleKey !== 'administrator'"
+              prop="lookupStatus"
+              label="查阅状态"
+              align="center"
+              width="200px"
+              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"
-                size="mini"
-                style="font-weight: bold"
-                @click="handleView(scope.row)"
-                link
-                >详情
+                  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
-                >删除
+                  type="danger"
+                  size="mini"
+                  v-if="roleKey !== 'administrator'"
+                  @click="handleDelete(scope.row)"
+                  link
+              >删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
         <div
-          class="pagination"
-          :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
+            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"
+              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"
           />
         </div>
       </div>
@@ -278,9 +280,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,
@@ -292,15 +294,15 @@ import {
   endSimulation,
   blastingSimulation,
 } from "@/api/largeScreen";
-import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
-import { getUserInfo } from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+import {getUserInfo} from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
 import {
   getScreenSimulateTunnel,
   getSimulateTunnelDetail,
   getTunnelList,
 } from "@/api/tunnelManage";
-import { debounce } from "lodash";
+import {debounce} from "lodash";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -308,6 +310,7 @@ const previewId = reactive(router.currentRoute.value.params.tunnelId);
 const siteId = reactive(router.currentRoute.value.params.siteId);
 const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId);
 const selectIndex = ref(-1);
+const previewRef = ref();
 const isVisited = ref(false);
 const isDetailVisited = ref(false);
 const showFan = ref(false);
@@ -338,6 +341,7 @@ const tunnelBtn = ref();
 const tunnelList = ref([]);
 const tunnelId = ref(0);
 const tunnelLength = ref(0);
+const tunnelAlias = ref('');
 const constructionLength = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
@@ -419,6 +423,9 @@ const submitDevice = () => {
   showDevice.value = false;
   getScreenInfo(previewId);
   // initWebSocket()
+  nextTick(() => {
+    previewRef.value.rerender()
+  })
 };
 const simulatedBlasting = async () => {
   await blastingSimulation(previewId, 10);
@@ -555,6 +562,7 @@ const getBasicData = (id) => {
   getSimulateTunnelDetail(id).then((res) => {
     if (res?.code === 1000) {
       tunnelLength.value = res.data.totalLength;
+      tunnelAlias.value = res.data.tunnelAlias;
       serialNumber.value = res.data.serialNumber;
       constructionLength.value = res.data.constructionLength;
       initWebSocket();
@@ -590,13 +598,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 {