预览初始化+切换隧道

src/components/content/tunnelScene/PreviewScene.vue

@@ -47,15 +47,14 @@ import {
 
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, toRaw, getCurrentInstance } from "vue";
 import { ElMessage } from "element-plus";
-import { useModelSceneStore } from "@/store/modelSceneStore";
-import { toRaw } from "vue"
+import { deleteEquipment, initData } from "./request";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
-const store = useModelSceneStore();
+let modelList = ref(null);
 let demo; //定义demo全局变量
 // const loader = new OBJLoader();
 const loader = new OBJLoader();
@@ -69,6 +68,16 @@ const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是
 let isedit = ref(params.isedit)
 
 
+// watch(
+//     () => params.tunnelId,
+//     (now) => {
+//         params.tunnelId = now
+//         console.log(params.tunnelId);
+
+//     },
+//     { deep: true }
+// )
+
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
@@ -89,7 +98,7 @@ async function handleMounted() {
     watch(
         () => params.tunnelId,
         async () => {
-            const text = await store.initData(params.tunnelId);
+            const text = await initData(params.tunnelId);
         }
     );
     // 初始化设备模型
@@ -100,14 +109,38 @@ async function handleMounted() {
         map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
         // 给对象初加载设备模型
         demo.initDevicesModel(map);
-        const equipmentList = await store.getEquipmentList();
-        demo.previewtunnelModeInit(equipmentList);
-        // previewEquInfProcess(equipmentList)
+        // const equipmentList = await store.getEquipmentList();
+        modelList.value = await initData(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(equipmentList);
+        // previewEquInfProcess(modelList.value, targetP.value)
     } catch (err) {
         console.log(err);
     }
 }
 
+
+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) {
     return new Promise((resolve, reject) => {
@@ -163,46 +196,31 @@ function lClickCallback(demo) {
 }
 
 let pointNum = ref(0);
-let targetP;
+let targetP = ref({});
 // 右键点击附着点后调函数
 function rClickCallback(demo) {
     function editDev(targetPoint = null) {
-        hasDevice = targetPoint.hasDevice;
-        targetP = targetPoint;
-        //点击之后马上调用这个函数，变成回调，然后进行处理处理在传给preview表单
-        const equipmentList = store.getEquipmentList().then((result) => {
-            previewEquInfProcess(result, targetP)
-        });
+        hasDevice.value = targetPoint.hasDevice;
+        targetP.value = targetPoint;
+        const equipmentList = initData(params.tunnelId)
+        equipmentList.then((result) => {
+            previewEquInfProcess(result, targetP.value)
+        })
         pointNum.value = Number(
             targetPoint.name.substring(
                 targetPoint.name.indexOf("_") + 1,
                 targetPoint.name.lastIndexOf("_")
             ) - 1
         );
-
         if (!targetPoint.info) return;
         editDevInfo(targetPoint.info);
     }
     demo.addFunction("editDev", editDev);
-
 }
 
 // 添加设备
 function handleAddEqu(formInfo) {
-    if (!formInfo.equipmentType) {
-        ElMessage({
-            message: "请选择传感器！",
-            type: "warning",
-        });
-        return;
-    }
-    //表单信息
-    //这里利用处理请求
-    demo.addEquipment(targetP, formInfo);
-    ElMessage({
-        message: "添加成功！",
-        type: "success",
-    });
+    demo.addEquipment(targetP.value, formInfo);
 }
 
 const centerDialogVisible = ref(false);
@@ -219,12 +237,22 @@ function handleRemoveEqu() {
 }
 // 对话框确认删除
 function handleConfirmAddEqu() {
-    demo.removeEquipment(targetP);
-    centerDialogVisible.value = false;
-    ElMessage({
-        message: "删除成功！",
-        type: "success",
-    });
+    console.log("target:", targetP.value.info);
+    deleteEquipment(targetP.value.info.equipmentId, pointGap)
+        .then((res) => {
+            demo.removeEquipment(targetP.value);
+            centerDialogVisible.value = false;
+            ElMessage({
+                message: "删除成功！",
+                type: "success",
+            });
+        })
+        .catch((res) => {
+            ElMessage({
+                message: "删除失败！",
+                type: "warning",
+            });
+        });
 }
 // 处理取消关闭编辑框事件
 function handleCancel() {
@@ -242,11 +270,10 @@ let equipmentValue = ref(0)
 
 function previewEquInfProcess(equipmentList, targetP) {
     for (const equipment of equipmentList) {
-        // console.log(equipment);
         if (equipment.position == targetP.name) {
             equipmentType.value = equipment.equipmentType
             //需要将获取到的设备列表进行序列化
-            equipmentName.value = toRaw(equipment.chooseEquipment).label
+            equipmentName.value = equipment.equipmentName
             equipmentValue.value = equipment.threshold
             if (equipmentType.value == 'frequency') {
                 equipmentType.value = '风机'