Merge pull request 'LJ' (#210) from LJ into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/210
2023-12-30 08:47:58 +00:00
parent 957c6274cb c6489313a7
commit 1dd856e2ca
5 changed files with 147 additions and 82 deletions
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/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) {
+        if (err == undefined) {
+            return
+        } else {
            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));
+            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 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;
--- a/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
+++ b/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);
    });
--- a/src/store/modelSceneStore.js
+++ b/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
  };
 });

--- a/src/views/edit/edit.vue
+++ b/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>
@@ -97,7 +87,7 @@ const handleSave = async () => {
    // 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;
    }
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -85,6 +85,7 @@ 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',
@@ -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 {