Merge pull request 'master' (#43) from master into dev

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

src/components/content/tunnelScene/TunnelScene.vue

@@ -1,7 +1,12 @@
 <template>
   <div id="scene" ref="content">
-    <dev-info ref="info" dev-name="no" dev-state="noState" />
+    <dev-info ref="info" :devInfo="devInfo" />
-    <edit-dev ref="edit" @check-dev="handleCheckDev" />
+    <edit-dev
+      ref="edit"
+      @addDev="handleAddDev"
+      @removeDev="handleRemoveDev"
+      :hasDev="hasDevice"
+    />
   </div>
 </template>
 
@@ -21,31 +26,33 @@ import {
 } from "three/addons/renderers/CSS3DRenderer.js";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 
-import DevInfo from "./childComp/DevInfo.vue";
+import DevInfo from "./childComp/devinfo.vue";
 import EditDev from "./childComp/EditDev.vue";
-import { onMounted, ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
 
+import { ElMessage } from "element-plus";
 // 获取html标签跟随组件
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
-
+const num = 10000;
+let demo; //定义demo全局变量
 const loader = new OBJLoader();
 // 模版挂载后
 onMounted(handleMounted);
 // 处理回调
 async function handleMounted() {
   const doms = [info.value.$el, edit.value.$el];
-  const demo = new ThreeDScene(three, content.value);
+  demo = new ThreeDScene(three, content.value);
   demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.glb");
   demo.addOrbitControls(OrbitControls);
   demo.addTween(TWEEN);
   demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
-  demo.addOBJLoader(OBJLoader);
+  demo.setDistance(10);
-  demo.loadeOBJModel();
+  lClickCallback(demo); //左键回调
+  rClickCallback(demo); //右键回调
 
   // 初始化设备模型
-
   try {
     const deviceList = [];
     let result = await loadModel("/devicesModel/Camera.obj");
@@ -56,10 +63,16 @@ async function handleMounted() {
     deviceList.push(result);
     result = await loadModel("/devicesModel/dev3.obj");
     deviceList.push(result);
-  } catch (e) {}
+    // 给对象初加载设备模型
-  // demo.initDevicesModel();
+    demo.initDevicesModel(deviceList);
+    console.info("设备模型加载完毕");
+    // 清空内存
+    result = null;
+  } catch (err) {
+    console.log(err);
+  }
 }
-
+// 每个模型加载回调
 function loadModel(path) {
   return new Promise((resolve, reject) => {
     loader.load(
@@ -74,6 +87,83 @@ function loadModel(path) {
     );
   });
 }
+
+let hasDevice = ref(true);
+let devInfo = reactive({
+  meshId: null,
+  name: "无",
+  state: "无",
+  position: "无",
+});
+
+// 赋值功能
+function editDevInfo(
+  value = {
+    meshId: null,
+    name: "无",
+    state: "无",
+    position: "无",
+  }
+) {
+  devInfo.meshId = value.meshId;
+  devInfo.name = value.name;
+  devInfo.state = value.state;
+  devInfo.position = value.position;
+}
+
+//点击左键返回附着点信息给组件
+function lClickCallback(demo) {
+  //demo动态添加函数，为操作组件内部
+  function displayDevInfo(targetPoint = null) {
+    hasDevice.value = targetPoint.hasDevice;
+    if (!targetPoint.info) {
+      editDevInfo();
+      return;
+    }
+    editDevInfo(targetPoint.info);
+  }
+  // 传给内部使用
+  demo.addFunction("displayDevInfo", displayDevInfo);
+}
+
+// 点击右键设备返回附着点对象
+function rClickCallback(demo) {
+  function editDev(targetPoint = null) {
+    hasDevice = targetPoint.hasDevice;
+    if (!targetPoint.info) return;
+    editDevInfo(targetPoint.info);
+  }
+  demo.addFunction("editDev", editDev);
+}
+
+// 添加设备
+function handleAddDev(devInfo) {
+  if (!demo) {
+    //  处理未加载完场景情况
+    console.info("3D场景正在渲染，请稍后操作");
+    return;
+  }
+  const tempDevInfo = demo.addDev(devInfo);
+  hasDevice.value = true;
+  editDevInfo(tempDevInfo);
+  ElMessage({
+    message: "添加成功",
+    type: "success",
+  });
+}
+
+// 删除设备
+async function handleRemoveDev() {
+  const result = await demo.removeDev(devInfo.meshId);
+  if (result === "ok") {
+    hasDevice.value = false;
+    editDevInfo();
+    ElMessage({
+      message: "删除成功",
+      type: "success",
+    });
+  }
+}
 </script>
 
 <style lang="scss" scope>

src/components/content/tunnelScene/childComp/DevInfo.vue

@@ -2,20 +2,28 @@
   <div id="dev-info">
     <div class="title">设备属性</div>
     <div class="name">
-      <span>设备名称:</span><span>{{ devName }}</span>
+      <span>设备名称:</span><span>{{ devInfo.name }}</span>
     </div>
     <div class="state-info">
-      <span>设备状态:</span><span>{{ devState }}</span>
+      <span>设备状态:</span><span>{{ devInfo.state }}</span>
+    </div>
+    <div class="state-info">
+      <span>设备位置:</span><span>{{ devInfo.position }}</span>
     </div>
   </div>
 </template>
 
 <script setup>
+import { defineProps, watch } from "vue";
 // 接受参数
-defineProps({
+const params = defineProps(["devInfo"]);
-  devName: String,
+watch(
-  devState: String,
+  () => params.devInfo,
-});
+  (newValue, oldValue) => {
+    console.log("监听");
+    console.log(newValue, oldValue);
+  }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -28,8 +36,10 @@ defineProps({
   border-radius: 10px;
   padding: 5px;
   display: block;
+  opacity: 0;
   .title {
     height: 20px;
+    text-align: center;
   }
 }
 </style>

src/components/content/tunnelScene/childComp/EditDev.vue

@@ -7,50 +7,49 @@
           v-for="(item, key) of devicesList"
           :key="key"
           @click="checkDev(key)"
+          :class="{ 'li-active': checkIndex === key }"
         >
           <img :src="item.devImgUrl" />
-          <div>{{ item.devName }}</div>
+          <div>{{ item.devName + key }}</div>
         </li>
       </ul>
     </div>
     <div class="option-btn">
-      <button @click="removeDev">移除设备</button>
+      <button @click="removeDev" :disabled="!params.hasDev">移除设备</button>
-      <button @click="addDev">添加设备</button>
+      <button @click="addDev" :disabled="params.hasDev">添加设备</button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, defineEmits, onMounted, ref } from "vue";
+import { reactive, defineEmits, onMounted, ref, defineProps } from "vue";
-// 定义需要发射的事件
-const emit = defineEmits([
-  "initLoadDevicesModel",
-  "checkDev",
-  "addDev",
-  "removeDev",
-]);
-onMounted(initDevicesModel);
-//  挂载后加所有的设备模型
-function initDevicesModel() {
-  emit("initLoadDevicesModel");
-}
 
+const params = defineProps(["hasDev", "meshId"]);
+// 定义需要发射的事件
+const emit = defineEmits(["addDev", "removeDev"]);
+//  挂载后加所有的设备模型
 const devItem = {
   devName: "传感器",
   devImgUrl: "/images/camera.jpg",
+  devState: "未开启",
 };
 const list = [devItem, devItem, devItem, devItem];
-
 const devicesList = reactive(list);
-const checkIndex = ref(0);
+
+const checkIndex = ref(-1);
 //选择设备
 function checkDev(key) {
   checkIndex.value = key;
-  emit("checkDev", key); //携带参数发射事件
 }
 // 添加设备
 function addDev() {
-  emit("addDev");
+  if (checkIndex.value === -1) {
+    alert("请选择设备");
+    return;
+  }
+  const devInfo = list[checkIndex.value];
+  devInfo.checkIndex = checkIndex.value;
+  emit("addDev", devInfo);
 }
 //删除设备
 function removeDev() {
@@ -68,6 +67,7 @@ function removeDev() {
   display: block;
   border-radius: 10px;
   text-align: center;
+  opacity: 0;
   img {
     width: 50px;
   }
@@ -94,13 +94,11 @@ function removeDev() {
   }
   .divice-list ul li {
     border-radius: 5px;
-
     overflow: hidden;
     cursor: pointer;
   }
-
+}
-  #li-active {
+.li-active {
-    background: red;
+  background: rgb(224, 114, 114);
-  }
 }
 </style>

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

@@ -0,0 +1,37 @@
+export default function (devInfo) {
+  const dev = this.deviceList[devInfo.checkIndex].clone(); //克隆对应的moxin
+  const p = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
+  dev.position.copy(p);
+  this.scene.add(dev);
+  this.targetPoint.hasDevice = true; //标记还存在设备
+  // 附着点记录信息
+  this.targetPoint.info = {
+    meshId: dev.id,
+    name: devInfo.devName,
+    position: transformPosition(this.targetPoint.name, this.distance),
+    state: devInfo.devState,
+  };
+  // this.targetPoint.visible = false;
+  return this.targetPoint.info;
+}
+
+function transformPosition(position, distance) {
+  return `${equal(position.charAt(position.lastIndexOf("_") + 1))}边隧道${equal(
+    position.charAt(position.lastIndexOf("_") + 2)
+  )}侧设备约${
+    (Number(
+      position.substring(position.indexOf("_") + 1, position.lastIndexOf("_"))
+    ) +
+      1) *
+    distance
+  }米处`;
+}
+
+function equal(str) {
+  switch (str) {
+    case "r":
+      return "右";
+    case "l":
+      return "左";
+  }
+}

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

@@ -0,0 +1,8 @@
+export default function (funName, fun) {
+  //这里给类里面添加函数,方便内部使用操作
+  if (this[funName]) {
+    console.error(`已存在${funName}函数`);
+    return;
+  }
+  this[funName] = fun;
+}

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

@@ -7,10 +7,10 @@ import {
   handleStartChange,
 } from "./handleOrbitControlsChange";
 import { saveState, resetState } from "./viewBack";
+import addFunction from "./addEvent";
 
-import { addDev } from "./addDevice";
+import addDev from "./addDev";
-import { removeDev } from "./removeDevice";
+import removeDev from "./removeDev";
-import { checkDevModel } from "./checkDevModel";
 export default class Demo {
   // 摄像机看向位置
   origin = null;
@@ -26,8 +26,13 @@ export default class Demo {
     this._checkAnimation = checkAnimation;
     this._saveSate = saveState;
     this._resetState = resetState;
-    this._removeDev = removeDev;
 
+    //  增加设备模型
+    this.addDev = addDev;
+    // 删除设备模型
+    this.removeDev = removeDev;
+    // 外部可添加函数
+    this.addFunction = addFunction;
     this.THREE = three;
     this.mountedElement = mountedElement;
     //初始化场景
@@ -61,10 +66,6 @@ export default class Demo {
     this.render();
     this.canvasResize();
     this.addXYZ();
-
-    this.HTMLTagEventListener();
-
-    this.bindRightPlaneInfo();
   }
   //渲染函数作用域(这里主要写渲染帧内操作)
   __renderScope() {
@@ -271,6 +272,7 @@ export default class Demo {
       raycaster.setFromCamera(mouse, this.camera);
       const intersects = raycaster.intersectObjects(isClickModels);
       if (intersects.length === 0) return;
+      //附着点设置方框
       this.setBoxHelper(intersects[0].object);
 
       // 处理点击左右键事件
@@ -300,6 +302,9 @@ export default class Demo {
     this.tag2CSS2DObj = new CSS2DObject(this.tag2Html);
     this.tag3CSS2DObj = new CSS2DObject(this.tag3Html);
     // 设置该标签初始化透明
+    this.tagCSS2DObj.element.style.opacity = "1";
+    this.tag2CSS2DObj.element.style.opacity = "1";
+    this.tag3CSS2DObj.element.style.opacity = "1";
 
     this.tagCSS2DObj.element.style.display = "none";
     this.tag2CSS2DObj.element.style.display = "none";
@@ -320,30 +325,7 @@ export default class Demo {
     // 删除标记动画
     this.scene.remove(this.group);
   }
-  /**
+
-   * @param {Array} paths 所有设备模型的路径
-   */
-  addDeviceModels(paths) {
-    const gltfloader = this.gltfloader;
-    load(paths);
-    function load(paths, current = 0) {
-      return new Promise((resolve, reject) => {
-        // try {
-        gltfloader(paths[current], (deviceModel) => {
-          this.deviceModels.push(deviceModel);
-          current++;
-          console.log(deviceModel);
-          load(paths, current);
-          if (current > paths.length) {
-            resolve("ok");
-          }
-        });
-        // } catch (e) {
-        //   reject(new Error("加载异常"));
-        // }
-      });
-    }
-  }
   // 附着点选中线宽包围
   setBoxHelper(obj) {
     //  判断场景是否纯在该3d对象
@@ -366,18 +348,6 @@ export default class Demo {
     this.gltfloader.setDRACOLoader(this.DRAC);
   }
 
-  // 监听tagHTML标签内事件
-  HTMLTagEventListener() {
-    // this.addBtn = document.querySelector("#add-model");
-    // this.removeBtn = document.querySelector("#remove-model");
-    // //开启监听
-    // this.addBtn.addEventListener("click", addDev.bind(this));
-    // this.removeBtn.addEventListener("click", removeDev.bind(this));
-    // //监听选择设备
-    // this.devList = document.querySelector(".divice-list ul");
-    // this.devList.addEventListener("click", checkDevModel.bind(this));
-  }
-
   /**
    * @param {Meshes} meshes gltf加载过后的模型数组
    */
@@ -388,69 +358,18 @@ export default class Demo {
     });
     console.log(this.deviceList);
   }
-  /**
+
-   * @param {String} devId 添加的设备ID
-   */
-  addDevice(devId) {
-    addDev.bind(this, devId);
-  }
   /**
    * @param {String} devId 删除的设备ID
    */
   removeDevice(devId) {
     removeDev.bind(this, devId);
   }
-  //获取右边面板信息
-  bindRightPlaneInfo() {
-    // this.chanelLengthInput = document.querySelector("#chanel-length-input");
-    // this.aspectValue = document.querySelector("#aspect-length-value");
-    // this.chanelLengthInput.addEventListener("input", (e) => {
-    //   // console.log(e.target.value);
-    // });
-  }
   /**
-   * @param {OBJLoader} objloader 模型加载器
+   *
+   * @param {Number} distance 设置锚点之间的间隔距离
    */
-  addOBJLoader(objloader) {
+  setDistance(distance = 10) {
-    this.OBJLoader = new objloader();
+    this.distance = distance;
-  }
-  // 先把模型加载完成
-  loadeOBJModel() {
-    this.devMap = new Map();
-    this.OBJLoader.load(
-      "/devicesModel/Camera.obj",
-      callBack.bind(this, "dev_1")
-    );
-    this.OBJLoader.load(
-      "/devicesModel/Camera.obj",
-      callBack.bind(this, "dev_2")
-    );
-    this.OBJLoader.load(
-      "/devicesModel/Camera.obj",
-      callBack.bind(this, "dev_3")
-    );
-    this.OBJLoader.load(
-      "/devicesModel/Camera.obj",
-      callBack.bind(this, "camera")
-    );
-    function callBack(param, model) {
-      switch (param) {
-        case "dev_1":
-          model.scale.set(0.2, 0.2, 0.2);
-          break;
-        case "dev_2":
-          model.scale.set(0.2, 0.2, 0.2);
-          break;
-        case "dev_3":
-          model.scale.set(0.1, 0.1, 0.1);
-          break;
-        case "camera":
-          model.scale.set(0.7, 0.7, 0.7);
-
-          model.name = "camera";
-          break;
-      }
-      this.devMap.set(param, model);
-    }
   }
 }

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

@@ -43,39 +43,21 @@ export function handleDBLClick(e) {
   this.cameraPositionTween.onComplete(() => {
     this.orbitControls.target = modelP;
     this.camera.lookAt(modelP);
-    // 选中的物体闪梭(这里必需放在下一个函数之前，这里需要使用到下一个函数需要清空的上一个模型)
-    // handleModelFlash(e, this);
-
     // 动画完成过后自动弹出标签
     autoOutTag(e, this);
     this.listenerEventFlag = false;
+    // 返回个组件
+    this.displayDevInfo(e);
   });
 }
-//点击模型视角位移过去后模型闪烁函数
+
-// function handleModelFlash(e, context) {
-//   if (context.timer) {
-//     clearInterval(context.timer);
-//     context.preTargetModel.material.color.set("white");
-//   }
-//   context.timer = setInterval(fun, 400);
-//   let flag = false;
-//   function fun() {
-//     if (flag) {
-//       e.material.color.set("red");
-//       flag = false;
-//     } else {
-//       e.material.color.set("white");
-//       flag = true;
-//     }
-//   }
-// }
 // 视角移动过去自动弹出标签
 function autoOutTag(targetModel, context) {
   // 判断是否纯在设备
   // if (targetModel.hasDevice) return;
   context.preTargetModel = targetModel;
   context.tagCSS2DObj.element.style.display = "block";
-  displayDevInfo(context, targetModel);
+
   targetModel.add(context.tagCSS2DObj);
   if (/l$/.test(targetModel.name)) {
     context.tagCSS2DObj.position.set(150, 0, 700);
@@ -83,17 +65,3 @@ function autoOutTag(targetModel, context) {
     context.tagCSS2DObj.position.set(-150, 0, 700);
   }
 }
-
-function displayDevInfo(context, targetModel) {
-  if (!targetModel.info) {
-    // 因为标签内的内容共同使用所以附着点没有信心则清空信息
-    // context.tagCSS2DObj.element.children[1].children[1].innerHTML = "无";
-    // context.tagCSS2DObj.element.children[2].children[1].innerHTML = "无";
-    return;
-  }
-  console.log(targetModel.info);
-  context.tagCSS2DObj.element.children[1].children[1].innerHTML =
-    targetModel.info.name;
-  context.tagCSS2DObj.element.children[2].children[1].innerHTML =
-    targetModel.info.state;
-}

src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js

@@ -12,28 +12,16 @@ export function handleLClick(targetPoint) {
     worldPosition.y,
     worldPosition.z
   );
-
+  // 标签定位
   this.tag2CSS2DObj.translateY(-15);
   this.tag2CSS2DObj.translateX(15);
-  displayDevInfo(this, targetPoint);
   this.scene.add(this.tag2CSS2DObj);
   intoAnimation.call(this, targetPoint);
+  //调用该函数回调作用返回给组件操作 very important-----
+  this.displayDevInfo(targetPoint);
 }
 
-function displayDevInfo(context, targetModel) {
+// 视角进入动画
-  if (!targetModel.info) {
-    // 因为标签内的内容共同使用所以附着点没有信心则清空信息
-    context.tag2CSS2DObj.element.children[1].children[1].innerHTML = "无";
-    context.tag2CSS2DObj.element.children[2].children[1].innerHTML = "无";
-    return;
-  }
-
-  context.tag2CSS2DObj.element.children[1].children[1].innerHTML =
-    targetModel.info.name;
-  context.tag2CSS2DObj.element.children[2].children[1].innerHTML =
-    targetModel.info.state;
-}
-
 function intoAnimation(targetPoint) {
   const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
   const positionOBj = this.camera.position;

src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js

@@ -14,12 +14,12 @@ export function handleRClick(targetPoint) {
     worldPosition.y,
     worldPosition.z
   );
-
   this.tag3CSS2DObj.translateY(-15);
   this.tag3CSS2DObj.translateX(15);
   this.scene.add(this.tag3CSS2DObj);
-
   intoAnimation.call(this);
+  // 返回给组件的回调函数
+  this.displayDevInfo(targetPoint);
 }
 
 function intoAnimation() {

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

@@ -0,0 +1,10 @@
+export default function (meshId) {
+  return new Promise((resolve, reject) => {
+    if (!meshId) {
+      reject("null");
+    }
+    const mesh = this.scene.getObjectById(meshId);
+    this.scene.remove(mesh);
+    resolve("ok");
+  });
+}