初始化接口绑定完全完成

src/components/content/tunnelScene/PreviewScene.vue

@@ -50,6 +50,7 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { useModelSceneStore } from "@/store/modelSceneStore";
+import { toRaw } from "vue"
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -63,7 +64,7 @@ let backColorSet = three.sRGBEncoding;
 
 const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
-// alert(params.isedit)
+
 
 let isedit = ref(params.isedit)
 
@@ -86,8 +87,12 @@ async function handleMounted() {
 
     //加载HDR背景图片
     demo.loadBackground(hdrLoader, backColorSet);
-    console.log("xxxx", params.tunnelId);
-    const text = await store.initData(params.tunnelId);
+    watch(
+        () => params.tunnelId,
+        async () => {
+            const text = await store.initData(params.tunnelId);
+        }
+    );
     // 初始化设备模型
     try {
         //在这加载隧道
@@ -98,6 +103,7 @@ async function handleMounted() {
         demo.initDevicesModel(map);
         const equipmentList = await store.getEquipmentList();
         demo.previewtunnelModeInit(equipmentList);
+        // previewEquInfProcess(equipmentList)
     } catch (err) {
         console.log(err);
     }
@@ -165,7 +171,9 @@ function rClickCallback(demo) {
         hasDevice = targetPoint.hasDevice;
         targetP = targetPoint;
         //点击之后马上调用这个函数，变成回调，然后进行处理处理在传给preview表单
-        previewEquInfProcess()
+        const equipmentList = store.getEquipmentList().then((result) => {
+            previewEquInfProcess(result, targetP)
+        });
         pointNum.value = Number(
             targetPoint.name.substring(
                 targetPoint.name.indexOf("_") + 1,
@@ -227,60 +235,40 @@ function handleCancel() {
     demo._resetState();
     demo.clearTagsObj();
 }
-//我们的数据应该在哪个获取并将其传入进去呢？
-//是在demo.js中还是我们这二个PreviewScene或者editDialog呢？
-//按目前我这写的逻辑，好像是获取了二次？？，有没有办法可以把里面的导出到这呢？
-// console.log(demo.isControlOrbit());
 
 let equipmentType = ref(0)
 let equipmentName = ref(0)
 let equipmentValue = ref(0)
 
 
-function previewEquInfProcess() {
-    //3个信息都可以完全获取，之后，我们可以进行信息处理再传进去就可以了
-    // console.log(demo);
-    // console.log(targetP.name);
-    // console.log(demo.ThreeConfig.data.tunnelThreeConfig);
-    let tunnelThreeConfig = demo.ThreeConfig.data.tunnelThreeConfig
-    for (const equipment of tunnelThreeConfig) {
-        if (equipment.pointName == targetP.name) {
+function previewEquInfProcess(equipmentList, targetP) {
+    for (const equipment of equipmentList) {
+        // console.log(equipment);
+        if (equipment.position == targetP.name) {
             equipmentType.value = equipment.equipmentType
-            equipmentName.value = equipment.equipmentName
-            equipmentValue.value = equipment.equipmentValue
-            console.log(equipmentType.value);
-            console.log(equipmentName.value);
-            console.log(equipmentValue.value);
+            //需要将获取到的设备列表进行序列化
+            equipmentName.value = toRaw(equipment.chooseEquipment).label
+            equipmentValue.value = equipment.threshold
+            if (equipmentType.value == 'frequency') {
+                equipmentType.value = '风机'
+            }
+            if (equipmentType.value == 'windPressure') {
+                equipmentType.value = '风压传感器'
+            }
+            if (equipmentType.value == 'sensor') {
+                equipmentType.value = '其他传感器'
+            }
+            // console.log(equipmentType.value);
+            // console.log(equipmentName.value);
+            // console.log(equipmentValue.value);
         }
     }
 }
 
-// let equipmentType = reactive(previewEquInfProcess().equipmentType)
-// let equipmentName = reactive(previewEquInfProcess().equipmentName)
-// let equipmentValue = reactive(previewEquInfProcess().equipmentValue)
-// console.log(equipmentType);
 
 
 
-const ThreeConfig = {
-    code: 0,
-    data: {
-        tunnelThreeConfig: [{
-            equipmentId: 'fan_01',//传感器id
-            equipmentName: '01',//设备名称
-            pointName: 'point_005_tl',//附着点名称(定位)
-            equipmentType: 'fan',//设备类型(类型可根据后端
-            equipmentValue: 23, //设备存的值
-        }, {
-            equipmentId: 'sensors_01',//传感器id
-            equipmentName: '01',//设备名称
-            pointName: 'point_009_bl',//附着点名称(定位)
-            equipmentType: 'sensors',//设备类型(类型可根据后端
-            equipmentValue: 67, //设备存的值
-        }],
-    },
-    msg: "dda"
-}
+
 
 </script>
 

src/components/content/tunnelScene/TunnelScene.vue

@@ -87,8 +87,12 @@ async function handleMounted() {
 
   //加载HDR背景图片
   demo.loadBackground(hdrLoader, backColorSet);
-  console.log("xxxx", params.tunnelId);
-  const text = await store.initData(params.tunnelId);
+  watch(
+    () => params.tunnelId,
+    async () => {
+      const text = await store.initData(params.tunnelId);
+    }
+  );
   // 初始化设备模型
   try {
     const map = new Map();

src/components/content/tunnelScene/preEquComp/childComps/InputNum.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="input-num">
     <p>{{ params.name }}</p>
-    <input type="text" :placeholder="params.placeholder" @input="handleChange" :disabled="params.disabled" />
+    <input type="text" :placeholder="params.placeholder" @input="handleChange" :disabled="params.disabled" readonly
+      unselectable="on" οnfοcus="this.blur();" />
   </div>
 </template>
 

src/components/content/tunnelScene/preEquComp/preDialog.vue

@@ -16,7 +16,7 @@
       <div class="setting-item">
         <p>设备选择</p>
         <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
-          :placeholder="params.equipmentValue" disabled>
+          :placeholder="params.equipmentName" disabled>
           <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
@@ -55,9 +55,9 @@ let p = ref(57);
 //   emit("EquInf");
 // }
 
-// console.log(params.equipmentType);
-// console.log(params.equipmentName);
-// console.log(params.equipmentValue);
+console.log(params.equipmentType);
+console.log(params.equipmentName);
+console.log(params.equipmentValue);