预览模式完成绑定

src/views/edit/edit.vue

@@ -20,11 +20,7 @@
           <el-input v-model="form.serialNumber" placeholder="请输入序列号" />
         </el-form-item>
         <el-form-item label="隧道长度">
-          <el-input
-            type="number"
-            v-model="form.totalLength"
-            placeholder="请输入隧道长度"
-          />
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度" />
         </el-form-item>
         <el-form-item label="是否默认">
           <el-radio-group v-model="form.isDefault">
@@ -39,14 +35,8 @@
     </div>
 
     <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
-    <tunnel-scene
-      id="tunnel-box"
-      :isedit="true"
-      :tunnelId="tunnelId"
-      :form="form"
-      ref="tunnelScene"
-      :tunnelLength="tunnelLength"
-    />
+    <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" :form="form" ref="tunnelScene"
+      :tunnelLength="tunnelLength" />
   </div>
 </template>
 <script setup>
@@ -93,11 +83,11 @@ const handleSave = async () => {
     tunnelName: form.value.tunnelName,
     serialNumber: form.value.serialNumber,
     remarks: form.value.remarks,
-    constructionLength:form.value.constructionLength,
+    constructionLength: form.value.constructionLength,
     // constructionLength: 500,
     tunnelLength: form.value.totalLength,
     isDefault: form.value.isDefault,
-    modelEquipmentList: await store.getEquipmentList(),
+    modelEquipmentList: await modelStore.getEquipmentList(),
   };
   editTunnel(data).then((res) => {
     if (res?.code === 1000) {
@@ -188,6 +178,7 @@ const handleSave = async () => {
     background-image: url(@/assets/images/transducer/bg.png);
     padding: 20px 30px;
     box-sizing: border-box;
+
     :deep(.el-radio-group) {
       margin-top: 10px;
     }

src/views/tunnel/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
       <div class="tunnel-title"></div>
       <!--      <manage-length class="tunnel-length"></manage-length>-->
       <div class="top-length">
@@ -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>
@@ -36,21 +36,21 @@
     <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>
@@ -77,14 +77,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 {ElMessage, 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 { ElMessage, ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";
+import { initSceneData } from "@/api/tunnelScene";
+import { getSiteDetail } from "../../api/site";
+import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -105,7 +106,15 @@ const tunnelId = ref(0);
 const tunnelLength = ref(0);
 const constructionLength = ref(0);
 const routeList = ref([]);
+// const form = ref({
+//   tunnelName: "",
+//   serialNumber: "",
+//   totalLength: "",
+//   isDefault: false,
+//   remarks: "",
+// });
 let socket = reactive("");
+
 const btnList = ref([
   {
     route: '/site',
@@ -166,10 +175,10 @@ const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
     if (res?.code === 1000) {
       let routeArr = [];
-      console.log(res.data.routeList,"res.data.routeList")
+      console.log(res.data.routeList, "res.data.routeList")
       res.data.routeList.forEach((item, index) => {
         for (let btn of btnList.value) {
-          if (item === btn.route){
+          if (item === btn.route) {
             routeArr.push(btn)
           }
         }
@@ -313,13 +322,22 @@ const closeSocket = () => {
 initWebSocket();
 
 
-watch(
-    () => tunnelId.value,
-    (now) => {
-      tunnelId.value = now
-    },
-    {deep: true}
-)
+// watch(
+//   () => tunnelId.value,
+//   (now) => {
+//     tunnelId.value = now
+//   },
+//   { deep: true }
+// )
+
+// const getTunnelPreview = () => {
+//   getTunnelDetail(tunnelId).then((res) => {
+//     if (res?.code === 1000) {
+//       form.value = res.data;
+//     }
+//   });
+// };
+// getTunnelPreview();
 </script>
 <style lang="scss">
 .el-dropdown__popper.el-popper {