预览初始化+切换隧道

src/views/tunnel/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
       <div class="tunnel-title"></div>
       <!--      <manage-length class="tunnel-length"></manage-length>-->
       <div class="top-length">
-        <span>隧道总长度: {{tunnelLength}}米</span>
-        <span>当前施工长度: {{constructionLength}}米</span>
+        <span>隧道总长度: {{ tunnelLength }}米</span>
+        <span>当前施工长度: {{ constructionLength }}米</span>
       </div>
       <div class="top-right">
         <div class="current-site">
@@ -16,8 +16,8 @@
             <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>
@@ -32,24 +32,24 @@
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
-    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene>
+    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
     <div class="left">
       <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"/>
+          :transducer-data="largeScreenData" />
         <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
+        <used-ele v-if="showFan" :list="socketData.leftData" :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">
       <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">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
+        :close-on-click-modal="false" :close-on-press-escape="false">
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -76,14 +76,15 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import {dateFormat} from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
-import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
-import {ElMessageBox} from "element-plus";
-import {getUserInfo} from "@/api/login";
-import {initSceneData} from "@/api/tunnelScene";
-import {getSiteDetail} from "../../api/site";
+import { dateFormat } from "@/utils/date.js";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
+import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
+import { ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";
+import { initSceneData } from "@/api/tunnelScene";
+import { getSiteDetail } from "../../api/site";
+import { nextTick, reactive } from "vue";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -128,7 +129,7 @@ const getUser = () => {
     currentUserId.value = res.data.user.userId
   })
 }
-const getDefaultSite=(siteId)=>{
+const getDefaultSite = (siteId) => {
   // console.log('siteList.value',siteList.value)
   // getSiteDetail(siteId).then((res) => {
   //   console.log('res',res)
@@ -139,22 +140,22 @@ const getOtherInfo = () => {
     if (res?.code === 1000) {
       routeList.value = res.data.routeList
       siteList.value = res.data.siteOption
-      currentSiteId.value = res.data.siteOption[res.data.siteOption.length-1].value
-      currentSite.value = res.data.siteOption[res.data.siteOption.length-1].label
-      getTunnel(res.data.siteOption[res.data.siteOption.length-1].value)
+      currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
+      currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
+      getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
     }
   });
 };
 const getScreenInfo = (id) => {
-  tunnelId.value=id
+  tunnelId.value = id
   getLargeScreen(id).then((res) => {
     if (res?.code === 1000) {
       largeScreenData.value = res.data;
     }
   });
   initSceneData(id).then((res) => {
-    tunnelLength.value=res.data.tunnelLength
-    constructionLength.value=res.data.constructionLength
+    tunnelLength.value = res.data.tunnelLength
+    constructionLength.value = res.data.constructionLength
   })
 };
 //根据站点id获取隧道信息
@@ -181,9 +182,9 @@ const changeTunnel = (e) => {
 const manageSelect = (index) => {
   console.log("首页点击-", index);
   if (index === 0) {
-    router.push("/site"+'/'+currentUserId.value);
+    router.push("/site" + '/' + currentUserId.value);
   } else if (index === 1) {
-    router.push("/tunnel/" + currentSiteId.value+'/i'+'/'+currentUserId.value);
+    router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
   } else if (index === 2) {
     router.push("/user/" + currentSiteId.value);
   }
@@ -259,6 +260,15 @@ const closeSocket = () => {
   socket.close();
 };
 initWebSocket();
+
+
+watch(
+  () => tunnelId.value,
+  (now) => {
+    tunnelId.value = now
+  },
+  { deep: true }
+)
 </script>
 <style lang="scss">
 .el-dropdown__popper.el-popper {