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

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

src/components/content/tunnelScene/PreviewScene.vue

@@ -76,7 +76,7 @@ async function handleMounted() {
     demo = new ThreeDScene(three, content.value);
     //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
     demo.isedit = params.isedit;
-    let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf");
+    let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel-have-wall.gltf");
     demo.addOrbitControls(OrbitControls);
     demo.addTween(TWEEN);
     demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
@@ -84,7 +84,6 @@ async function handleMounted() {
     lClickCallback(demo); //绑定左键回调
     rClickCallback(demo); //绑定右键回调
 
-
     //加载HDR背景图片
     demo.loadBackground(hdrLoader, backColorSet);
     watch(

src/components/content/tunnelScene/TunnelScene.vue

@@ -76,7 +76,7 @@ async function handleMounted() {
 
   const loaded = await demo.loadModel(
     GLTFLoader,
-    "./assets/tunnelModel/chanel.gltf"
+    "./assets/tunnelModel/chanel-have-wall.gltf"
   );
   demo.addOrbitControls(OrbitControls);
   demo.addTween(TWEEN);
@@ -229,6 +229,7 @@ function handleCancel() {
   demo._resetState();
   demo.clearTagsObj();
 }
+
 //现在首先有二种方案，是写在TunnelScene.vue中还是demo.js中呢？
 //我认为可能看数据在哪获取？到时候看在哪里导入，首先我们放在TunnelScene里面吧
 //因为没获取到接口，我们先写死！！！

src/components/content/tunnelScene/sceneClass/demo.js

@@ -136,7 +136,7 @@ export default class Demo {
     return new Promise((resolve, reject) => {
       this.gltfloader = new GLTFLoader();
       this.gltfloader.load(
-        "/tunnelModel/chanel.gltf",
+        "/tunnelModel/chanel-have-wall.gltf",
         (gltf) => {
           gltf.scene.traverse((child) => {
             this._forModels(child);
@@ -164,6 +164,8 @@ export default class Demo {
     this._hoverModel(this.points);
     // 可以进行点击
     this._ClickModel(this.points);
+    //将墙壁进行隐藏
+    this.WallInit()
   }
 
   // 在此方法中对模型批量操作，这里遍历附着点
@@ -485,26 +487,16 @@ export default class Demo {
       opacityTween(0.1, 0.5, true);
     }
   }
-
+  //初始将墙壁进行隐藏
-
+  WallInit() {
-  ThreeConfig = {
+    for (let line = 1; line <= 20; line++) {
-    code: 0,
+      if (line < 10) {
-    data: {
+        let wall = 'wall_' + '0' + line
-      tunnelThreeConfig: [{
+        this.scene.getObjectByName(wall).visible = false
-        equipmentId: 'fan_01',//传感器id
+      } else if (line >= 10) {
-        equipmentName: '01',//设备名称
+        let wall = 'wall_' + line
-        pointName: 'point_005_tl',//附着点名称(定位)
+        this.scene.getObjectByName(wall).visible = false
-        equipmentType: 'fan',//设备类型(类型可根据后端
+      }
-        equipmentValue: 23, //设备存的值
+    }
-      }, {
-        equipmentId: 'sensors_01',//传感器id
-        equipmentName: '01',//设备名称
-        pointName: 'point_009_bl',//附着点名称(定位)
-        equipmentType: 'sensors',//设备类型(类型可根据后端
-        equipmentValue: 67, //设备存的值
-      }],
-    },
-    msg: "dda"
   }
-  tunnelConfigEquipment = this.ThreeConfig.data.tunnelThreeConfig
 }

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

@@ -1,3 +1,4 @@
+import Demo from "../demo";
 import EquipmentTag from "../utils/EquipmentTag";
 /**
  *
@@ -16,6 +17,10 @@ function addEquipment(targetPoint, formInfo) {
     case "frequency":
       handleFanEqu.call(this, targetPoint, formInfo.chooseEquipment);
       break;
+    // 还没有风压阀的模型，所以先用其他设备传感器实现
+    // case "valve":
+    //   handleValveEqu.call(this, targetPoint, formInfo.chooseEquipment);
+    //   break;
     case "windPressure":
     case "sensor":
       handleOtherEqu.call(this, targetPoint, formInfo.chooseEquipment);
@@ -27,6 +32,14 @@ function addEquipment(targetPoint, formInfo) {
   // 标识设备信息
   this.clearTagsObj();
 }
+
+// function handleValveEqu(targetPoint, equipmentInfo) {
+
+// }
+
+
+
+
 // 其他传感器
 function handleOtherEqu(targetPoint, equipmentInfo) {
   const equMesh = this.equMap.get("equ_sensors").clone();
@@ -58,12 +71,53 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   targetPoint.scale.set(0.03, 0.06, 0.05);
   this.scene.add(equMesh);
   targetPoint.visible = false;
-
+  targetPoint.hasWall = true
+  //处理风压阀的代码片段
+  let lineIndex = targetPoint.name.slice(7, 9)
+  for (let line = Number(lineIndex); line <= 20; line++) {
+    if (line < 10) {
+      let wall = 'wall_' + '0' + line
+      this.scene.getObjectByName(wall).visible = true
+      let point = 'point_' + '00' + line + '_tc'
+      console.log(this.scene.getObjectByName(point));
+      this.scene.getObjectByName(point).visible = false
+      this.scene.getObjectByName(point).layers.set(-2)
+      if (this.scene.getObjectByName(point).hasDevice == true) {
+        let EquID = this.scene.getObjectByName(point).info.id
+        this.scene.getObjectById(EquID).visible = false
+      }
+    } else if (line >= 10) {
+      let wall = 'wall_' + line
+      this.scene.getObjectByName(wall).visible = true
+      let point = 'point_' + '0' + line + '_tc'
+      this.scene.getObjectByName(point).visible = false
+      this.scene.getObjectByName(point).layers.set(-2)
+      if (this.scene.getObjectByName(point).hasDevice == true) {
+        let EquID = this.scene.getObjectByName(point).info.id
+        this.scene.getObjectById(EquID).visible = false
+      }
+    }
+    //处理21行的设备和附着点
+    let point = 'point_' + '0' + 21 + '_tc'
+    this.scene.getObjectByName(point).visible = false
+    this.scene.getObjectByName(point).layers.set(-2)
+    if (this.scene.getObjectByName(point).hasDevice == true) {
+      let EquID = this.scene.getObjectByName(point).info.id
+      this.scene.getObjectById(EquID).visible = false
+    }
+  }
+  // this.scene.getObjectByName('wall_01').visible = true
+  // console.log(this.scene);
   // 保存该设备模型id，后期直接从附附着点进行删除
   targetPoint.info = {
     id: equMesh.id,
     ...equipmentInfo,
   };
+  //下面进行模拟分压阀的添加效果
+  // 1.先取出当前点击添加设备锚点的行数
+  // 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取)
+  // 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中
+
 }
 
 // 风机
@@ -105,7 +159,45 @@ function handleFanEqu(
 
 // 删除传感器
 function removeEquipment(targetPoint) {
+  //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
   if (!targetPoint.hasDevice) return;
+  if (targetPoint.hasWall == true) {
+    let lineIndex = targetPoint.name.slice(7, 9)
+    for (let line = Number(lineIndex); line <= 20; line++) {
+      if (line < 10) {
+        let wall = 'wall_' + '0' + line
+        this.scene.getObjectByName(wall).visible = false
+        let point = 'point_' + '00' + line + '_tc'
+        console.log(this.scene.getObjectByName(point));
+        this.scene.getObjectByName(point).visible = true
+        this.scene.getObjectByName(point).layers.set(0)
+        if (this.scene.getObjectByName(point).hasDevice == true) {
+          this.scene.getObjectByName(point).visible = false
+          let EquID = this.scene.getObjectByName(point).info.id
+          this.scene.getObjectById(EquID).visible = true
+        }
+      } else if (line >= 10) {
+        let wall = 'wall_' + line
+        this.scene.getObjectByName(wall).visible = false
+        let point = 'point_' + '0' + line + '_tc'
+        this.scene.getObjectByName(point).visible = true
+        this.scene.getObjectByName(point).layers.set(0)
+        if (this.scene.getObjectByName(point).hasDevice == true) {
+          this.scene.getObjectByName(point).visible = false
+          let EquID = this.scene.getObjectByName(point).info.id
+          this.scene.getObjectById(EquID).visible = true
+        }
+      }
+      //处理21行的设备和附着点
+      let point = 'point_' + '0' + 21 + '_tc'
+      this.scene.getObjectByName(point).visible = true
+      this.scene.getObjectByName(point).layers.set(0)
+      if (this.scene.getObjectByName(point).hasDevice == true) {
+        let EquID = this.scene.getObjectByName(point).info.id
+        this.scene.getObjectById(EquID).visible = true
+      }
+    }
+  }
   const mesh = this.scene.getObjectById(targetPoint.info.id);
   this.scene.remove(mesh);
   targetPoint.visible = true;

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

@@ -1,4 +1,15 @@
 export function editTunnelInit(equipmentList) {
+  //初始化将墙壁隐藏起来
+  // for (let line = 1; line <= 20; line++) {
+  //   if (line < 10) {
+  //     let wall = 'wall_' + '0' + line
+  //     this.scene.getObjectByName(wall).visible = false
+  //   } else if (line >= 10) {
+  //     let wall = 'wall_' + line
+  //     this.scene.getObjectByName(wall).visible = false
+  //   }
+  // }
+
   equipmentList.forEach((item) => {
     const formInfo = {
       equipmentType: item.equipmentType, //设备类型

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

@@ -1,15 +1,15 @@
 export default function previewtunnelModeInit(equipmentList) {
-    // for (const item of this.tunnelConfigEquipment) {
+    //初始化将墙壁隐藏起来
-    //     //使用api取拿到附着点
+    // for (let line = 1; line <= 20; line++) {
-    //     let pointmodel = this.scene.getObjectByName(item.pointName)
+    //     if (line < 10) {
-    //     pointmodel.hasDevice;
+    //         let wall = 'wall_' + '0' + line
-    //     let formInfo = {
+    //         this.scene.getObjectByName(wall).visible = false
-    //         equipmentType: item.equipmentType, //设备类型
+    //     } else if (line >= 10) {
-    //         chooseEquipment: item.equipmentName, //设备选择(设备名称)
+    //         let wall = 'wall_' + line
-    //         threshold: item.equipmentValue, //阈值
+    //         this.scene.getObjectByName(wall).visible = false
     //     }
-    //     this.addEquipment(pointmodel, formInfo);
     // }
+
     equipmentList.forEach((item) => {
         const formInfo = {
             equipmentType: item.equipmentType, //设备类型