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

2023-12-14 23:08:38 +08:00
parent fb9dfb37a2
commit 1884ad3db6
13 changed files with 170 additions and 19732 deletions
--- a/public/devicesModel/Camera.obj
+++ b/public/devicesModel/Camera.obj
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/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 = [];
-    let result = await loadModel("/devicesModel/fan.glb");
-    deviceList.push(result);
-    result = await loadModel("/devicesModel/sensor.glb");
-    deviceList.push(result);
+    const map = new Map();
+    map.set("equ_fan", await loadModel("/devicesModel/fan.obj"));
+    map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));

    // 给对象初加载设备模型
-    demo.initDevicesModel(deviceList);
-    console.info("设备模型加载完毕");
-    // 清空内存
-    result = null;
+    demo.initDevicesModel(map);
+    console.info("设备模型加载完毕", deviceList);
  } 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() {
-  console.log("添加", pointInfo);
+function handleAddEqu(e) {
+  console.log("添加的设备属性", e);
 }

 // 删除设备
@@ -180,6 +178,7 @@ function handleCancel() {
  if (!demo) return;
  // 关闭标签
  demo.isControlOrbit(true);
+  demo._resetState();
  demo.clearTagsObj();
 }
 </script>
--- a/src/components/content/tunnelScene/editEquComp/childComps/InputNum.vue
+++ b/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;
--- a/src/components/content/tunnelScene/editEquComp/childComps/SelectInput.vue
+++ b/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>
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/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
-        name="传感器类型"
-        placeholder="请选择传感器类型"
-        :options="options"
-        @selected="handelSelectType"
-      />
-      <select-input
-        name="设备选择"
-        placeholder="请选择设备"
-        :options="options"
-        @selected="handelSelectEquipment"
-      />
+      <div class="setting-item">
+        <p>传感器类型</p>
+        <el-select
+          v-model="equipmentSetting.equipmentType"
+          placeholder="请选择设备类型"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :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: "风机2", id: "321321" },
-  { label: "风机3", id: "321321" },
-  { label: "风机4", id: "321321" },
+  { label: "风机", value: "fan" },
+  { label: "风压传感器", value: "windPressure" },
+  { label: "普通传感器", value: "sensors" },
 ]);
+
+// 设备编号参数
+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 {
-      margin: 30px 30px;
-      P {
+    .setting-item {
+      padding: 30px 30px 10px 30px;
+
+      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;
--- a/src/components/content/tunnelScene/sceneClass/addDev/index.js
+++ b/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 "左";
-  }
-}
--- a/src/components/content/tunnelScene/sceneClass/addDevice/index.js
+++ b/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;
-}
--- a/src/components/content/tunnelScene/sceneClass/checkDevModel/index.js
+++ b/src/components/content/tunnelScene/sceneClass/checkDevModel/index.js
@@ -1 +0,0 @@
-export function checkDevModel() {}
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -8,9 +8,7 @@ import {
 } from "./handleOrbitControlsChange";
 import { saveState, resetState } from "./viewBack";
 import addFunction from "./addEvent";
-
-import addDev from "./addDev";
-import removeDev from "./removeDev";
+import { addEquipment, removeEquipment } from "./editEquipment";
 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) {
-    this.deviceList = [];
-    meshes.forEach((mesh) => {
-      this.deviceList.push(mesh);
-    });
-    console.log(this.deviceList);
+  initDevicesModel(equMap) {
+    //
+    this.equMap = equMap;
+
+    console.log(equMap);
  }

  /**
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/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 };
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
@@ -1,4 +1,6 @@
 export function handleRClick(targetPoint) {
+  // 保存进入状态
+  this._saveState();
  this.clearTagsObj();
  // 全局临时标记该选中的模型;
  this.targetPoint = targetPoint;
--- a/src/components/content/tunnelScene/sceneClass/removeDev/index.js
+++ b/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");
-  });
-}
--- a/src/components/content/tunnelScene/sceneClass/viewBack/index.js
+++ b/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.orbitControls.target.set(0, 0, 0);
+    // //恢复原始的镜头指向
+    // this.camera.lookAt(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"));