预览模式完成绑定

2023-12-30 16:39:48 +08:00
parent d0c2648a2e
commit 0e949a65b8
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) {
-        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;
--- 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>
@@ -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;
    }
--- a/src/views/tunnel/index.vue
+++ b/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 {