预览模式完成绑定

src/components/content/tunnelScene/PreviewScene.vue

@@ -49,7 +49,9 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref, toRaw, getCurrentInstance } from "vue";
 import { ElMessage } from "element-plus";
-// import { deleteEquipment, initData } from "./request";
+import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
+
+import { useModelSceneStore } from "@/store/modelSceneStore";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -60,23 +62,40 @@ let demo; //定义demo全局变量
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
-
+const modelStore = useModelSceneStore();
 const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 
 
 let isedit = ref(params.isedit)
+// const form = ref({
+//     tunnelName: "",
+//     serialNumber: "",
+//     totalLength: "",
+//     isDefault: false,
+//     remarks: "",
+// });
+
+// const getTunnelPreview = () => {
+//     getTunnelDetail(params.tunnelId).then((res) => {
+//         if (res?.code === 1000) {
+//             form.value = res.data;
+//         }
+//     });
+// };
 
 
-// watch(
-//     () => params.tunnelId,
-//     (now) => {
-//         params.tunnelId = now
-//         console.log(params.tunnelId);
 
-//     },
+watch(
-//     { deep: true }
+    () => params.tunnelId,
-// )
+    (now) => {
+        params.tunnelId = now
+        console.log(params.tunnelId);
+        // getTunnelPreview();
+        // console.log(form.value);
+    },
+    { deep: true }
+)
 
 onMounted(handleMounted);
 // 挂载后回调
@@ -95,12 +114,13 @@ async function handleMounted() {
 
     //加载HDR背景图片
     demo.loadBackground(hdrLoader, backColorSet);
-    watch(
+    //先不加试试？？？
-        () => params.tunnelId,
+    // watch(
-        async () => {
+    //     () => params.tunnelId,
-            const text = await initData(params.tunnelId);
+    //     async () => {
-        }
+    //         const text = await initData(params.tunnelId);
-    );
+    //     }
+    // );
     // 初始化设备模型
     try {
         //在这加载隧道
@@ -110,36 +130,44 @@ async function handleMounted() {
         // 给对象初加载设备模型
         demo.initDevicesModel(map);
         // const equipmentList = await store.getEquipmentList();
-        modelList.value = await initData(params.tunnelId);
+        modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
         // console.log("init", params.tunnelId);
-        demo.previewtunnelModeInit(modelList.value);
+        demo.previewtunnelModeInit(toRaw(modelList.value));
-        watch(
+        // watch(
-            () => params.tunnelId,
+        //     () => params.tunnelId,
-            (now) => {
+        //     (now) => {
-                params.tunnelId = now
+        //         params.tunnelId = now
-                // console.log(params.tunnelId);
+        //         // console.log(params.tunnelId);
-                checkTunnelInit(modelList.value)
+        //         checkTunnelInit(modelList.value)
-                demo.previewtunnelModeInit(modelList.value);
+        //         demo.previewtunnelModeInit(modelList.value);
-            },
+        //     },
-            { deep: true }
+        //     { deep: true }
-        )
+        // )
         // demo.previewtunnelModeInit(equipmentList);
         // previewEquInfProcess(modelList.value, targetP.value)
     } catch (err) {
-        console.log(err);
+        if (err == undefined) {
+            return
+        } else {
+            console.log(err);
+            ElMessage({
+                message: "场景初始化异常---！",
+                type: "warning",
+            });
+        }
     }
 }
 
 
-function checkTunnelInit(equipmentList) {
+// function checkTunnelInit(equipmentList) {
-    equipmentList.forEach((item) => {
+//     equipmentList.forEach((item) => {
-        let equipment = toRaw(item)
+//         let equipment = toRaw(item)
-        console.log("我要清理掉之前的设备！！！");
+//         console.log("我要清理掉之前的设备！！！");
-        console.log(equipment);
+//         console.log(equipment);
-        console.log(demo.scene.getObjectByName(equipment.position));
+//         console.log(demo.scene.getObjectByName(equipment.position));
-        demo.removeEquipment(demo.scene.getObjectByName(equipment.position));
+//         demo.removeEquipment(demo.scene.getObjectByName(equipment.position));
-    });
+//     });
-}
+// }
 
 // 每个模型加载回调
 function loadModel(path) {
@@ -202,7 +230,8 @@ function rClickCallback(demo) {
     function editDev(targetPoint = null) {
         hasDevice.value = targetPoint.hasDevice;
         targetP.value = targetPoint;
-        const equipmentList = initData(params.tunnelId)
+        //这里是初始化必经之路！！！
+        const equipmentList = modelStore.initModelDataPreview(params.tunnelId)
         equipmentList.then((result) => {
             previewEquInfProcess(result, targetP.value)
         })
@@ -238,7 +267,8 @@ function handleRemoveEqu() {
 // 对话框确认删除
 function handleConfirmAddEqu() {
     console.log("target:", targetP.value.info);
-    deleteEquipment(targetP.value.info.equipmentId, pointGap)
+    modelStore
+        .deleteEquipment(targetP.value.info.equipmentId, pointGap)
         .then((res) => {
             demo.removeEquipment(targetP.value);
             centerDialogVisible.value = false;

src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js

@@ -10,6 +10,8 @@ export default function previewtunnelModeInit(equipmentList) {
     //         this.scene.getObjectByName(wall).visible = false
     //     }
     // }
+    console.log(equipmentList);
+
     equipmentList.forEach((item) => {
         this.addEquipment(this.scene.getObjectByName(item.position), item);
     });

src/store/modelSceneStore.js

@@ -25,6 +25,29 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
     });
   }
 
+  function initModelDataPreview(tunnelId) {
+    if (tunnelId == 0) {
+      return new Promise((resolve, reject) => {
+        reject()
+      })
+    } else {
+      return new Promise((resolve, reject) => {
+        initSceneData(tunnelId)
+          .then((res) => {
+            if (res.data.tunnelThreeConfig) {
+              equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
+            } else {
+              equipmentList.value = [];
+            }
+            resolve(toRaw(equipmentList.value));
+          })
+          .catch((error) => {
+            reject();
+          });
+      });
+    }
+  }
+
   function addEquipment(equipmentInfo, pointGap) {
     return new Promise((resolve, reject) => {
       if (hasEquipment(equipmentList.value, equipmentInfo.equipmentId)) {
@@ -84,6 +107,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
     initModelData,
     addEquipment,
     deleteEquipment,
+    initModelDataPreview
   };
 });
 

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
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度" />
-            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
+    <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" :form="form" ref="tunnelScene"
-      id="tunnel-box"
+      :tunnelLength="tunnelLength" />
-      :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">
+        :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
-        <air-info v-if="showFan" :list="socketData.sensor" :air-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"/>
+        <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 { dateFormat } from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
+import { getToken } from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
+import { useAuthStore } from "@/store/userstore.js";
-import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
+import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
-import {ElMessage, ElMessageBox} from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
-import {getUserInfo} from "@/api/login";
+import { getUserInfo } from "@/api/login";
-import {initSceneData} from "@/api/tunnelScene";
+import { initSceneData } from "@/api/tunnelScene";
-import {getSiteDetail} from "../../api/site";
+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(
+// watch(
-    () => tunnelId.value,
+//   () => tunnelId.value,
-    (now) => {
+//   (now) => {
-      tunnelId.value = now
+//     tunnelId.value = now
-    },
+//   },
-    {deep: true}
+//   { 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 {