预览模式完成绑定

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);
 
-//     },
-//     { deep: true }
-// )
+watch(
+    () => 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,
-        async () => {
-            const text = await initData(params.tunnelId);
-        }
-    );
+    //先不加试试？？？
+    // watch(
+    //     () => 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);
-        watch(
-            () => params.tunnelId,
-            (now) => {
-                params.tunnelId = now
-                // console.log(params.tunnelId);
-                checkTunnelInit(modelList.value)
-                demo.previewtunnelModeInit(modelList.value);
-            },
-            { deep: true }
-        )
+        demo.previewtunnelModeInit(toRaw(modelList.value));
+        // watch(
+        //     () => params.tunnelId,
+        //     (now) => {
+        //         params.tunnelId = now
+        //         // console.log(params.tunnelId);
+        //         checkTunnelInit(modelList.value)
+        //         demo.previewtunnelModeInit(modelList.value);
+        //     },
+        //     { 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) {
-    equipmentList.forEach((item) => {
-        let equipment = toRaw(item)
-        console.log("我要清理掉之前的设备！！！");
-        console.log(equipment);
-        console.log(demo.scene.getObjectByName(equipment.position));
-        demo.removeEquipment(demo.scene.getObjectByName(equipment.position));
-    });
-}
+// function checkTunnelInit(equipmentList) {
+//     equipmentList.forEach((item) => {
+//         let equipment = toRaw(item)
+//         console.log("我要清理掉之前的设备！！！");
+//         console.log(equipment);
+//         console.log(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);
     });