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

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/179

src/components/content/tunnelScene/PreviewScene.vue

@@ -49,19 +49,22 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 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);
 const edit = ref(null);
+const store = useModelSceneStore();
 let demo; //定义demo全局变量
 // const loader = new OBJLoader();
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 
-const params = defineProps(["isedit"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+
 
-// alert(params.isedit)
 
 let isedit = ref(params.isedit)
 
@@ -84,7 +87,12 @@ async function handleMounted() {
 
     //加载HDR背景图片
     demo.loadBackground(hdrLoader, backColorSet);
-
+    watch(
+        () => params.tunnelId,
+        async () => {
+            const text = await store.initData(params.tunnelId);
+        }
+    );
     // 初始化设备模型
     try {
         //在这加载隧道
@@ -93,7 +101,9 @@ async function handleMounted() {
         map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
         // 给对象初加载设备模型
         demo.initDevicesModel(map);
-        demo.previewtunnelModeInit();
+        const equipmentList = await store.getEquipmentList();
+        demo.previewtunnelModeInit(equipmentList);
+        // previewEquInfProcess(equipmentList)
     } catch (err) {
         console.log(err);
     }
@@ -161,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,
@@ -223,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,7 +87,12 @@ async function handleMounted() {
 
   //加载HDR背景图片
   demo.loadBackground(hdrLoader, backColorSet);
-  const text = await store.initData();
+  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);
 
 
 

src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js

@@ -1,16 +1,23 @@
-export default function previewtunnelModeInit() {
-
-    for (const item of this.tunnelConfigEquipment) {
-        //使用api取拿到附着点
-        let pointmodel = this.scene.getObjectByName(item.pointName)
-        pointmodel.hasDevice;
-        let formInfo = {
+export default function previewtunnelModeInit(equipmentList) {
+    // for (const item of this.tunnelConfigEquipment) {
+    //     //使用api取拿到附着点
+    //     let pointmodel = this.scene.getObjectByName(item.pointName)
+    //     pointmodel.hasDevice;
+    //     let formInfo = {
+    //         equipmentType: item.equipmentType, //设备类型
+    //         chooseEquipment: item.equipmentName, //设备选择(设备名称)
+    //         threshold: item.equipmentValue, //阈值
+    //     }
+    //     this.addEquipment(pointmodel, formInfo);
+    // }
+    equipmentList.forEach((item) => {
+        const formInfo = {
             equipmentType: item.equipmentType, //设备类型
-            chooseEquipment: item.equipmentName, //设备选择(设备名称)
-            threshold: item.equipmentValue, //阈值
-        }
-        this.addEquipment(pointmodel, formInfo);
-    }
+            chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
+            threshold: item.threshold,
+        };
+        this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
+    });
     //进行预览和编辑模式的一些操作
     if (this.isedit == false) {
         this.scene.traverse(function (item) {

src/views/tunnel/index.vue

@@ -26,12 +26,13 @@
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->\
     <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
-    <preview-scene id="tunnel-box" :isedit="false"></preview-scene>
+    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="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">
-        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" :transducer-data="largeScreenData"/>
-<!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
+        :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-list v-if="showFan" :list="socketData.leftData" :transducer-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>