唐润平：下拉框优化，编辑视角调整

src/components/content/tunnelScene/TunnelScene.vue

@@ -46,7 +46,7 @@ const info = ref(null);
 const edit = ref(null);
 let demo; //定义demo全局变量
 // const loader = new OBJLoader();
-const loader = new GLTFLoader();
+const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 
@@ -68,17 +68,13 @@ async function handleMounted() {
 
   // 初始化设备模型
   try {
-    const deviceList = [];
+    const map = new Map();
-    let result = await loadModel("/devicesModel/fan.glb");
+    map.set("equ_fan", await loadModel("/devicesModel/fan.obj"));
-    deviceList.push(result);
+    map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
-    result = await loadModel("/devicesModel/sensor.glb");
-    deviceList.push(result);
 
     // 给对象初加载设备模型
-    demo.initDevicesModel(deviceList);
+    demo.initDevicesModel(map);
-    console.info("设备模型加载完毕");
+    console.info("设备模型加载完毕", deviceList);
-    // 清空内存
-    result = null;
   } catch (err) {
     console.log(err);
   }
@@ -139,15 +135,17 @@ function lClickCallback(demo) {
 }
 
 let pointNum = ref(0);
+let targetP;
 // 右键点击附着点后调函数
 function rClickCallback(demo) {
   function editDev(targetPoint = null) {
     hasDevice = targetPoint.hasDevice;
+    targetP = targetPoint;
     pointNum.value = Number(
       targetPoint.name.substring(
         targetPoint.name.indexOf("_") + 1,
         targetPoint.name.lastIndexOf("_")
-      )
+      ) - 1
     );
 
     if (!targetPoint.info) return;
@@ -157,8 +155,8 @@ function rClickCallback(demo) {
 }
 
 // 添加设备
-function handleAddEqu() {
+function handleAddEqu(e) {
-  console.log("添加", pointInfo);
+  console.log("添加的设备属性", e);
 }
 
 // 删除设备
@@ -180,6 +178,7 @@ function handleCancel() {
   if (!demo) return;
   // 关闭标签
   demo.isControlOrbit(true);
+  demo._resetState();
   demo.clearTagsObj();
 }
 </script>

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

@@ -5,6 +5,7 @@
       type="text"
       :placeholder="params.placeholder"
       @input="handleChange"
+      :disabled="params.disabled"
     />
   </div>
 </template>
@@ -14,6 +15,7 @@ import { ref, defineProps, defineEmits, onUnmounted } from "vue";
 const params = defineProps({
   name: String,
   placeholder: String,
+  disabled: Boolean,
 });
 const emit = defineEmits(["inputValue"]);
 let timer = null;
@@ -43,7 +45,7 @@ function handleUnmounted() {
   input {
     width: 284px;
     height: 51px;
-    border: 1px solid #0f82af;
+    border: 2px solid #0f82af;
     background: transparent;
     margin-top: 20px;
     font-size: 26px;

src/components/content/tunnelScene/editEquComp/childComps/SelectInput.vue

@@ -1,99 +0,0 @@
-<template>
-  <div id="select-input">
-    <p>{{ params.name }}</p>
-    <div class="select">
-      <div class="value">
-        <span>{{ value }}</span>
-        <img
-          src="/images/htmlEditDialog/select-icon.png"
-          alt=""
-          @click="isShowList = !isShowList"
-        />
-      </div>
-      <ul v-show="isShowList">
-        <li
-          v-for="(item, index) of params.options"
-          :key="index"
-          @click="handleClickItem(index)"
-        >
-          {{ item.label }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, defineEmits, defineProps } from "vue";
-const params = defineProps({
-  name: String,
-  options: Array,
-  placeholder: String,
-});
-const emit = defineEmits(["selected"]);
-let isShowList = ref(false);
-const value = ref(params.placeholder);
-function handleClickItem(index) {
-  value.value = params.options[index].label;
-  isShowList.value = false;
-  emit("selected", params.options[index]);
-}
-</script>
-
-<style lang="scss" scoped>
-#select-input {
-  margin: 40px 30px 0px 30px;
-  P {
-    width: 130px;
-    height: 35px;
-    font-size: 26px;
-    font-family: MicrosoftYaHei;
-    color: #ffffff;
-    line-height: 35px;
-  }
-  .select {
-    position: relative;
-    .value {
-      width: 284px;
-      height: 51px;
-      border: 1px solid #0f82af;
-      font-size: 28px;
-      font-family: MicrosoftYaHei;
-      color: #08b7b8;
-      line-height: 51px;
-      margin-top: 20px;
-      padding: 0px 0px 0px 10px;
-      position: relative;
-      img {
-        position: absolute;
-        right: 20px;
-        bottom: 18px;
-        cursor: pointer;
-      }
-      img:active {
-        transform: scale(0.8);
-      }
-    }
-    ul {
-      position: absolute;
-      width: 284px;
-      background: #072247;
-      border-radius: 0px 0px 20px 20px;
-      border: 1px solid #0f82af;
-      z-index: 10000;
-      li {
-        height: 37px;
-        font-size: 28px;
-        font-family: MicrosoftYaHei;
-        color: #ffffff;
-        line-height: 37px;
-        margin: 20px 10px;
-        cursor: pointer;
-      }
-      li:hover {
-        color: #08b7b8;
-      }
-    }
-  }
-}
-</style>

src/components/content/tunnelScene/editEquComp/editDialog.vue

@@ -1,32 +1,48 @@
 <template>
   <div id="edit-dialog">
     <div class="distance-back">
-      <p>{{ pointDistance_str }}</p>
+      <p>当前距离洞口：{{ pointDistance_str }}</p>
       <img
         src="/images/htmlEditDialog/back-icon.png"
         alt=""
         @click="handleCancel"
       />
     </div>
-    <div class="dev-info"></div>
+    <div class="equ-info">当前风压:{{ p }}Pa</div>
-    +
     <div class="setting">
-      <select-input
+      <div class="setting-item">
-        name="传感器类型"
+        <p>传感器类型</p>
-        placeholder="请选择传感器类型"
+        <el-select
-        :options="options"
+          v-model="equipmentSetting.equipmentType"
-        @selected="handelSelectType"
+          placeholder="请选择设备类型"
-      />
+        >
-      <select-input
+          <el-option
-        name="设备选择"
+            v-for="item in options"
-        placeholder="请选择设备"
+            :key="item.value"
-        :options="options"
+            :label="item.label"
-        @selected="handelSelectEquipment"
+            :value="item.value"
-      />
+          />
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <p>设备选择</p>
+        <el-select
+          v-model="equipmentSetting.chooseEquipment"
+          placeholder="请选择设备类型"
+        >
+          <el-option
+            v-for="item in options2"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
       <input-num
         name="阈值"
         placeholder="请输入阈值"
         @inputValue="handelInput"
+        :disabled="isDisabledInputNum"
       />
     </div>
     <div class="btn">
@@ -37,16 +53,17 @@
 </template>
 
 <script setup>
-import { reactive, computed, defineEmits, defineProps } from "vue";
-
-import SelectInput from "./childComps/SelectInput.vue";
 import InputNum from "./childComps/InputNum.vue";
-import { remove } from "three/examples/jsm/libs/tween.module";
+
+import { reactive, computed, defineEmits, defineProps, watch } from "vue";
 
 // 定义事件发射器，父组件监听
 const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
 const params = defineProps(["pointNum", "pointGap"]); //隧道第几个锚点
 
+// 当前风压
+let p = ref(57);
+
 //计算锚点之间距离
 const pointDistance_str = computed(
   () =>
@@ -62,13 +79,36 @@ const equipmentSetting = reactive({
   threshold: "", //阈值
 });
 
-// 选项参数
+// 设备类型选项参数
 const options = reactive([
-  { label: "风机1", id: "321321" },
+  { label: "风机", value: "fan" },
-  { label: "风机2", id: "321321" },
+  { label: "风压传感器", value: "windPressure" },
-  { label: "风机3", id: "321321" },
+  { label: "普通传感器", value: "sensors" },
-  { label: "风机4", id: "321321" },
 ]);
+
+// 设备编号参数
+let options2 = reactive([]);
+
+let isDisabledInputNum = ref(false);
+watch(
+  () => equipmentSetting.equipmentType,
+  () => {
+    let label;
+    options2 = [];
+    equipmentSetting.chooseEquipment = "";
+    isDisabledInputNum = false;
+    if (equipmentSetting.equipmentType === "fan") {
+      label = "风机";
+      isDisabledInputNum = true;
+    }
+    if (equipmentSetting.equipmentType === "windPressure") label = "风压传感器";
+    if (equipmentSetting.equipmentType === "sensors") label = "普通传感器";
+    for (let i = 1; i < 11; i++) {
+      options2.push({ label: `${i}号${label}`, value: `${label}_${i}` });
+    }
+  }
+);
+
 // const obj = {
 //   equipmentId: String, //传感器id
 //   equipmentName: String, //设备名称
@@ -82,18 +122,12 @@ const options = reactive([
 // const tunnel = {
 //   tunnelId: "",
 // };
+
 // 显示锚点距离
 let point_num = ref(0);
 
-function handelSelectType(e) {
-  equipmentSetting.equipmentType = e;
-}
-function handelSelectEquipment(e) {
-  equipmentSetting.chooseEquipment = e;
-}
 function handelInput(e) {
   equipmentSetting.threshold = e;
-  console.log(equipmentSetting);
 }
 
 // 处理取消事件
@@ -106,10 +140,29 @@ function handleCancel() {
 function removeEquipment() {
   emit("removeEquipment");
 }
+
 // 添加设备
 function addEquipment() {
-  emit("addEquipment");
+  // 处理不合法情况
+  if (
+    !equipmentSetting.chooseEquipment ||
+    !equipmentSetting.equipmentType ||
+    !equipmentSetting.threshold
+  ) {
+    alert("选项不能有空");
+    return;
+  }
+  emit("addEquipment", equipmentSetting);
 }
+const equipmentType = {
+  label: String, //传感器类型
+  typeId: String, //传感器类型ID(方便查找该类型的所有设备)
+};
+// 通过以上选项请求以下具体哪个设备
+const equipment = {
+  label: String, //传感器编号加名称
+  equId: String, // 传感器Id
+};
 </script>
 
 <style lang="scss" scoped>
@@ -143,18 +196,58 @@ function addEquipment() {
       transform: scale(0.9);
     }
   }
+  .equ-info {
+    width: 190px;
+    height: 35px;
+    font-size: 26px;
+    font-family: MicrosoftYaHei;
+    color: #f7b500;
+    line-height: 35px;
+    margin: 20px 30px 0px 30px;
+  }
   .setting {
-    .dev-type {
+    .setting-item {
-      margin: 30px 30px;
+      padding: 30px 30px 10px 30px;
-      P {
+
+      p {
         width: 130px;
         height: 35px;
         font-size: 26px;
         font-family: MicrosoftYaHei;
         color: #ffffff;
         line-height: 35px;
+        margin-bottom: 20px;
       }
     }
+    :deep(.el-select) {
+      width: 284px;
+      //height: 51px;
+      border: transparent;
+    }
+    :deep(.el-input--suffix) {
+      width: 284px;
+      height: 51px;
+      background: rgba(7, 35, 72, 0.79);
+      border: 2px solid #0f82af;
+    }
+    :deep(.el-input__wrapper) {
+      background: transparent;
+      border: none !important;
+      padding: 0px 12px 0px 10px;
+      box-shadow: none !important;
+    }
+    :deep(.el-input__wrapper input) {
+      background: transparent;
+      height: 100%;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #08b7b8;
+      line-height: 37px;
+    }
+    :deep(.el-icon) {
+      color: #05feff;
+      font-size: 34px;
+    }
   }
   .btn {
     margin: 100px 40px 40px 40px;

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

@@ -1,37 +0,0 @@
-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/addDevice/index.js

@@ -1,30 +0,0 @@
-export function addDev(devId) {
-  if (!this.checkDevId) {
-    alert("请选择设备");
-    return;
-  }
-  const devModel = this.devMap.get(devId).clone();
-  handleLoadedDevice.call(this, devModel);
-}
-
-function handleLoadedDevice(model) {
-  if (!this.targetPoint) return;
-  //获取定位位置
-  const wp = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
-  model.position.copy(wp);
-  this.targetPoint.visible = false;
-
-  this.scene.add(model);
-  if (model.name === "camera") {
-    model.translateX(-5);
-    model.translateZ(4);
-    model.translateY(-0.5);
-  }
-  // 添加的信息请求或初始化的信息
-  this.targetPoint.info = {
-    name: "摄像头",
-    state: "未开启",
-    devId: model.id,
-  };
-  this.targetPoint.hasDevice = true;
-}

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

@@ -1 +0,0 @@
-export function checkDevModel() {}

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

@@ -8,9 +8,7 @@ import {
 } from "./handleOrbitControlsChange";
 import { saveState, resetState } from "./viewBack";
 import addFunction from "./addEvent";
-
+import { addEquipment, removeEquipment } from "./editEquipment";
-import addDev from "./addDev";
-import removeDev from "./removeDev";
 export default class Demo {
   // 摄像机看向位置
   origin = null;
@@ -24,13 +22,11 @@ export default class Demo {
     this._handleRClick = handleRClick;
     this._handleDBLClick = handleDBLClick;
     this._checkAnimation = checkAnimation;
-    this._saveSate = saveState;
+    this._saveState = saveState;
     this._resetState = resetState;
+    this.addEquipment = addEquipment;
+    this.removeEquipment = removeEquipment;
 
-    //  增加设备模型
-    this.addDev = addDev;
-    // 删除设备模型
-    this.removeDev = removeDev;
     // 外部可添加函数
     this.addFunction = addFunction;
     this.THREE = three;
@@ -58,7 +54,7 @@ export default class Demo {
     this.renderer.setSize(window.innerWidth, window.innerHeight);
     this.renderer.domElement.style.position = "absolute";
     this.mountedElement.appendChild(this.renderer.domElement);
-    console.log(this.renderer.domElement);
+
     // 创建渲染帧
     this.render = () => {
       this.__renderScope();
@@ -358,14 +354,13 @@ export default class Demo {
   }
 
   /**
-   * @param {Meshes} meshes gltf加载过后的模型数组
+   * @param {Map} meshes gltf加载过后的模型数组
    */
-  initDevicesModel(meshes) {
+  initDevicesModel(equMap) {
-    this.deviceList = [];
+    //
-    meshes.forEach((mesh) => {
+    this.equMap = equMap;
-      this.deviceList.push(mesh);
+
-    });
+    console.log(equMap);
-    console.log(this.deviceList);
   }
 
   /**

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

@@ -0,0 +1,10 @@
+function addEquipment(targetPoint, EquType) {
+  const equMesh = this.equMap.get("equ_fan").clone();
+  console.log(equMesh);
+  this.scene.add(equMesh);
+}
+// 处理设备添加位置
+function handleOtherEqu() {}
+function handleFanEqu() {}
+function removeEquipment(targetPoint) {}
+export { addEquipment, removeEquipment };

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

@@ -1,4 +1,6 @@
 export function handleRClick(targetPoint) {
+  // 保存进入状态
+  this._saveState();
   this.clearTagsObj();
   // 全局临时标记该选中的模型;
   this.targetPoint = targetPoint;

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

@@ -1,10 +0,0 @@
-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");
-  });
-}

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

@@ -16,12 +16,12 @@ export function saveState() {
 export function resetState() {
   if (this.viewSate && this.viewSate.isSave) {
     this.viewSate.isSave = false;
-    //恢复原始的镜头指向
+    // //恢复原始的镜头指向
-    this.camera.lookAt(0, 0, 0);
+    // this.camera.lookAt(0, 0, 0);
-    this.orbitControls.target.set(0, 0, 0);
+    // this.orbitControls.target.set(0, 0, 0);
     //创建动画
     this.viewSateResetAnimation = new this.TWEEN.Tween(this.camera.position);
-    this.viewSateResetAnimation.to(this.viewSate.position, 800);
+    this.viewSateResetAnimation.to(this.viewSate.position, 500);
     this.viewSateResetAnimation.start();
     //清空boxHelper
     this.scene.remove(this.scene.getObjectByName("boxHelper"));