Merge pull request 'trp_dev' (#134) from trp_dev into dev

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

src/components/content/badGasInfo/BadGasInfo.vue

@@ -1,84 +1,110 @@
 <template>
-  <div id="bad-gas-info" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }">
+  <div
+    id="bad-gas-info"
+    :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }"
+  >
     <div class="title">有害气体</div>
     <div class="info-list">
-      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
+      <gas-info-item
+        v-for="item in badGasList"
+        :key="item.equipmentId"
+        :gasInfo="item"
+        @click="handleOpenChart"
+      />
     </div>
+
     <div class="digital-tunnel">
-      <el-dialog v-model="isVisited" title="有害气体监控数据" width="2400px" :modal="false">
+      <el-dialog
+        v-model="isVisited"
+        title="有害气体监控数据"
+        width="2400px"
+        :modal="false"
+      >
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
         <div class="chat-dialog">
           <div id="container"></div>
-          <div style="width: 1px;"></div>
+          <div style="width: 1px"></div>
         </div>
         <div class="time-select">
           <time-range-btn
-              :buttonList="timeList"
+            :buttonList="timeList"
-              v-model="selectTimeButton"
+            v-model="selectTimeButton"
-              @select="timeSelect"
+            @select="timeSelect"
           />
         </div>
         <div class="left-bottom-icon"></div>
         <div class="right-bottom-icon"></div>
       </el-dialog>
     </div>
+    >>>>>>> 077ff6a0744d396411f6b0bd5f409d42997965e9
   </div>
 </template>
 
 <script setup>
 import GasInfoItem from "./childComps/GasInfoItem.vue";
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
-import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
+import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
 
 const props = defineProps({
   list: Array,
-  badGasData: Array
+  badGasData: Array,
 });
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isVisited = ref(false);
-const badGasList = ref([])
+const badGasList = ref([]);
 let myEcharts = reactive({});
-const bgImage = computed(() =>
+const bgImage = computed(() => (isVisited.value ? "sp_active.png" : "bg.png"));
-    isVisited.value
+watch(
-        ? "sp_active.png"
+  () => props.list,
-        : "bg.png"
+  (now) => {
+    badGasList.value.forEach((item) => {
+      now.forEach((newItem) => {
+        if (item.equipmentId === newItem.equipmentId) {
+          item.value = newItem.value;
+        }
+      });
+    });
+  },
+  { deep: true }
 );
-watch(() => props.list, (now) => {
-  badGasList.value.forEach(item => {
-    now.forEach(newItem => {
-      if (item.equipmentId === newItem.equipmentId) {
-        item.value = newItem.value
-      }
-    })
-  })
-}, {deep: true});
 
-watch(() => props.badGasData, (now) => {
+watch(
-  getBadGasInfo(now.sensorList)
+  () => props.badGasData,
-}, {deep: true});
+  (now) => {
+    getBadGasInfo(now.sensorList);
+  },
+  { deep: true }
+);
 const timeSelect = (index) => {
-  console.log('选择时间', index)
+  console.log("选择时间", index);
   if (index === 0) {
-    console.log('--年')
+    console.log("--年");
   } else if (index === 1) {
-    console.log('--月')
+    console.log("--月");
   } else if (index === 2) {
-    console.log('--日')
+    console.log("--日");
   }
 };
 const getBadGasInfo = (now) => {
-  let windPressureObj = {}
+  let windPressureObj = {};
-  let windPressureArr = []
+  let windPressureArr = [];
-  now.map(item => {
+  now.map((item) => {
-    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
+    if (
-      windPressureObj = changeData(item)
+      item.equipmentType === "carbonDioxide" ||
-      windPressureArr.push(windPressureObj)
+      item.equipmentType === "carbonMonoxide" ||
+      item.equipmentType === "hydrogenSulfide" ||
+      item.equipmentType === "sulfurDioxide" ||
+      item.equipmentType === "sulfurMonoxide" ||
+      item.equipmentType === "nitrogenDioxide"
+    ) {
+      windPressureObj = changeData(item);
+      windPressureArr.push(windPressureObj);
     }
-  })
+  });
-  badGasList.value = windPressureArr
+  badGasList.value = windPressureArr;
-}
+};
 const changeData = (item) => {
   return {
     equipmentId: item.equipmentId,
@@ -86,33 +112,34 @@ const changeData = (item) => {
     max: 120,
     value: item.value,
     point: item.valueThreshold,
-    unit: item.unit
+    unit: item.unit,
-  }
+  };
-}
+};
 const handleOpenChart = () => {
-  console.log('有害气体弹窗')
+  console.log("有害气体弹窗");
-  isVisited.value = true
+  isVisited.value = true;
   nextTick(() => {
-    initChart()
+    initChart();
-  })
+  });
-}
+};
 const getImageUrl = (name) => {
-  return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url).href
+  return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
-}
+    .href;
+};
 /**
  * 初始化echarts实例方法
  */
 const initChart = () => {
   //3.初始化container容器
-  myEcharts = echarts.init(document.getElementById('container'));
+  myEcharts = echarts.init(document.getElementById("container"));
   //5.传入数据
   let option = {
     //图例
     legend: {
       left: 0,
       textStyle: {
-        color: '#FFFFFF',
+        color: "#FFFFFF",
-        fontSize: 40
+        fontSize: 40,
       },
       // itemWidth: 20,
       // itemHeight: 20
@@ -128,100 +155,143 @@ const initChart = () => {
     //提示框组件
     tooltip: {
       show: true,
-      trigger: 'axis'
+      trigger: "axis",
     },
     //X轴
     xAxis: {
-      type: 'category',
+      type: "category",
-      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+      data: [
+        "00:00",
+        "01:00",
+        "02:00",
+        "03:00",
+        "04:00",
+        "05:00",
+        "06:00",
+        "07:00",
+        "08:00",
+        "09:00",
+        "10:00",
+        "11:00",
+        "12:00",
+        "13:00",
+        "14:00",
+        "15:00",
+        "16:00",
+        "17:00",
+        "18:00",
+        "19:00",
+        "20:00",
+        "21:00",
+        "22:00",
+        "23:00",
+        "24:00",
+      ],
       axisLabel: {
         textStyle: {
           fontSize: 45,
-          color: '#D6F1FA'
+          color: "#D6F1FA",
         },
       },
     },
     //Y轴
     yAxis: {
-      type: 'value',
+      type: "value",
       axisLabel: {
         textStyle: {
           fontSize: 45,
-          color: '#D6F1FA'
+          color: "#D6F1FA",
         },
       },
     },
     //配置项
     series: [
       {
-        name: '二氧化碳',
+        name: "二氧化碳",
-        data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
+        data: [
-        type: 'line',
+          56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
+          69, 25, 31, 49, 81, 63,
+        ],
+        type: "line",
         smooth: true,
         symbolSize: 24,
         lineStyle: {
-          width: 5
+          width: 5,
-        }
+        },
       },
       {
-        name: '一氧化碳',
+        name: "一氧化碳",
-        data: [96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11, 79, 51, 29, 60, 48, 83, 15],
+        data: [
-        type: 'line',
+          96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
+          79, 51, 29, 60, 48, 83, 15,
+        ],
+        type: "line",
         smooth: true,
         symbolSize: 24,
         lineStyle: {
-          width: 5
+          width: 5,
-        }
+        },
       },
       {
-        name: '二氧化氮',
+        name: "二氧化氮",
-        data: [53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25, 77, 82, 13, 68, 49, 55, 7, 39],
+        data: [
-        type: 'line',
+          53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
+          77, 82, 13, 68, 49, 55, 7, 39,
+        ],
+        type: "line",
         smooth: true,
         symbolSize: 24,
         lineStyle: {
-          width: 5
+          width: 5,
-        }
+        },
       },
       {
-        name: '一氧化氮',
+        name: "一氧化氮",
-        data: [37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82, 17, 66, 30, 78, 55, 23, 47],
+        data: [
-        type: 'line',
+          37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
+          17, 66, 30, 78, 55, 23, 47,
+        ],
+        type: "line",
         smooth: true,
         symbolSize: 24,
         lineStyle: {
-          width: 5
+          width: 5,
-        }
+        },
       },
       {
-        name: '二氧化硫',
+        name: "二氧化硫",
-        data: [6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100, 23, 80, 44, 62, 59, 13, 86],
+        data: [
-        type: 'line',
+          6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
+          23, 80, 44, 62, 59, 13, 86,
+        ],
+        type: "line",
         smooth: true,
         symbolSize: 24,
         lineStyle: {
-          width: 5
+          width: 5,
-        }
+        },
       },
       {
-        name: '硫化氢',
+        name: "硫化氢",
-        data: [13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 11, 21, 31, 41, 51],
+        data: [
-        type: 'line',
+          13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
+          100, 11, 21, 31, 41, 51,
+        ],
+        type: "line",
         smooth: true,
         symbolSize: 24,
         lineStyle: {
-          width: 5
+          width: 5,
-        }
+        },
       },
-    ]
+    ],
-  }
+  };
   myEcharts.setOption(option);
   //图表大小自适应窗口大小变化
   window.onresize = () => {
     myEcharts.resize();
-  }
+  };
-}
+};
-
 </script>
 
 <style lang="scss" scoped>
@@ -234,7 +304,6 @@ const initChart = () => {
   right: 72px;
   background-image: url(../../../assets/images/badGasInfo/bg.png);
 
-
   .title {
     width: 128px;
     height: 45px;

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;
@@ -191,4 +284,7 @@ function addEquipment() {
     }
   }
 }
+:deep(.el-select-dropdown__wrap) {
+  background: greenyellow !important;
+}
 </style>

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();
@@ -320,7 +316,7 @@ export default class Demo {
     this.tag3CSS2DObj.element.style.display = "none";
     this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
     this.tag2CSS2DObj.scale.set(0.1, 0.1, 0.1);
-    this.tag3CSS2DObj.scale.set(0.025, 0.025, 0.025); //编辑框
+    this.tag3CSS2DObj.scale.set(0.02, 0.02, 0.02); //编辑框
     this.tag3CSS2DObj.position.set(10, 0, 10);
     this.tagCSS2DObj.scale.set(0.5, 0.5, 0.5);
   }
@@ -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);
   }
 
   /**
@@ -424,10 +419,10 @@ export default class Demo {
       );
       this.opacityTween.start();
       this.opacityTween.onUpdate((obj) => {
-        mesh.material.opacity = obj.opacity;
+        // mesh.material.opacity = obj.opacity;
-        mesh2.material.opacity = obj.opacity;
+        // mesh2.material.opacity = obj.opacity;
-        mesh3.material.opacity = obj.opacity;
+        // mesh3.material.opacity = obj.opacity;
-        mesh4.material.opacity = obj.opacity;
+        // mesh4.material.opacity = obj.opacity;
         if (!isNeedLookAt) return;
         this.camera.lookAt(obj.lookX, obj.lookY, obj.lookZ);
         this.orbitControls.target.set(obj.lookX, obj.lookY, obj.lookZ);

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/handleOrbitControlsChange/index.js

@@ -6,4 +6,40 @@ export function handleEndChange(e) {
   //   围绕点到照相机的位置
   // console.log("结束");
   // console.log(this.orbitControls.object.position);
+  // console.log(this.camera.position, this.position);
+  // console.log(
+  //   this.camera.position.x - this.position.x,
+  //   this.camera.position.y - this.position.y,
+  //   this.camera.position.z - this.position.z
+  // );
+  // const cx =
+  //   (this.scene
+  //     .getObjectByName("point_001_br")
+  //     .getWorldPosition(new this.THREE.Vector3()).x +
+  //     this.scene
+  //       .getObjectByName("point_001_bl")
+  //       .getWorldPosition(new this.THREE.Vector3()).x) /
+  //   2;
+  // const cy =
+  //   (this.scene
+  //     .getObjectByName("point_001_br")
+  //     .getWorldPosition(new this.THREE.Vector3()).y +
+  //     this.scene
+  //       .getObjectByName("point_001_bl")
+  //       .getWorldPosition(new this.THREE.Vector3()).y) /
+  //   2;
+  // const cz =
+  //   (this.scene
+  //     .getObjectByName("point_001_br")
+  //     .getWorldPosition(new this.THREE.Vector3()).z +
+  //     this.scene
+  //       .getObjectByName("point_001_bl")
+  //       .getWorldPosition(new this.THREE.Vector3()).z) /
+  //   2;
+  // console.log(cx, cy, cz);
+  // console.log(
+  //   this.scene
+  //     .getObjectByName("point_001_tr")
+  //     .getWorldPosition(new this.THREE.Vector3())
+  // );
 }

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

@@ -1,4 +1,6 @@
 export function handleRClick(targetPoint) {
+  // 保存进入状态
+  this._saveState();
   this.clearTagsObj();
   // 全局临时标记该选中的模型;
   this.targetPoint = targetPoint;
@@ -15,17 +17,39 @@ export function handleRClick(targetPoint) {
     worldPosition.z
   );
   this.isControlOrbit(false);
-
+  this.position = worldPosition;
-  this.tag3CSS2DObj.translateX(-3);
+  if (/tr$/.test(targetPoint.name)) {
-  this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateX(3);
-  this.scene.add(this.tag3CSS2DObj);
+    this.tag3CSS2DObj.translateZ(10);
-  intoAnimation.call(this);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this, 4.31, -2.55, -11);
+  } else if (/tl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this, -4.31, -2.55, -11);
+  } else if (/tc$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(0);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-6);
+    intoAnimation.call(this, 0, -2.55, -11);
+  } else if (/br$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this, 4.31, 5, -11);
+  } else if (/bl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this, -4.31, 5, -11);
+  }
 
   // 返回给编辑组件的回调函数
   this.editDev(targetPoint);
 }
 
-function intoAnimation() {
+function intoAnimation(x = -10, y = 3, z = -12) {
   const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
   const positionOBj = this.camera.position;
   const start = this.orbitControls.target;
@@ -36,15 +60,21 @@ function intoAnimation() {
     xTarget: start.x,
     yTarget: start.y,
     zTarget: start.z,
+    ctlTargetX: 0,
+    ctlTargetY: 0,
+    ctlTargetZ: 0,
   });
   this.intoPointAnimation.to(
     {
-      x: worldP.x - 10,
+      x: worldP.x + x,
-      y: worldP.y + 3,
+      y: worldP.y + y,
-      z: worldP.z - 12,
+      z: worldP.z + z,
-      xTarget: worldP.x,
+      xTarget: -5,
-      yTarget: worldP.y,
+      yTarget: 8.814,
-      zTarget: worldP.z,
+      zTarget: worldP.z + 30,
+      ctlTargetX: 0,
+      ctlTargetY: 0,
+      ctlTargetZ: 120,
     },
     600
   );
@@ -52,6 +82,10 @@ function intoAnimation() {
   this.intoPointAnimation.onUpdate((obj) => {
     this.camera.position.set(obj.x, obj.y, obj.z);
     this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget);
+    // this.orbitControls.target.set(obj.x, obj.y, -obj.z);
     this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
   });
+  this.intoPointAnimation.onComplete(() => {
+    this.scene.add(this.tag3CSS2DObj);
+  });
 }

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"));