Merge remote-tracking branch 'origin/dev' into dev

# Conflicts: # src/components/content/badGasInfo/BadGasInfo.vue
2023-12-15 18:07:24 +08:00
parent 1168c9eb13 ca3fbc2602
commit bf9dc9530a
15 changed files with 419 additions and 19842 deletions
--- a/public/devicesModel/Camera.obj
+++ b/public/devicesModel/Camera.obj
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -1,22 +1,36 @@
 <template>
-  <div id="bad-gas-info" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
+  <div
+    id="bad-gas-info"
+    :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }"
+    @click="handleOpenChart"
+  >
    <div class="title">有害气体</div>
    <div class="info-list">
-      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item"/>
+      <gas-info-item
+        v-for="item in badGasList"
+        :key="item.equipmentId"
+        :gasInfo="item"
+      />
    </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"
-              v-model="selectTimeButton"
-              @select="timeSelect"
+            :buttonList="timeList"
+            v-model="selectTimeButton"
+            @select="timeSelect"
          />
        </div>
        <div class="left-bottom-icon"></div>
@@ -28,57 +42,68 @@

 <script setup>
 import GasInfoItem from "./childComps/GasInfoItem.vue";
-import * as echarts from 'echarts';
-import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
+import * as echarts from "echarts";
+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(() =>
-    isVisited.value
-        ? "sp_active.png"
-        : "bg.png"
+const bgImage = computed(() => (isVisited.value ? "sp_active.png" : "bg.png"));
+watch(
+  () => props.list,
+  (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) => {
-  getBadGasInfo(now.sensorList)
-}, {deep: true});
+watch(
+  () => props.badGasData,
+  (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 windPressureArr = []
-  now.map(item => {
-    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
-      windPressureObj = changeData(item)
-      windPressureArr.push(windPressureObj)
+  let windPressureObj = {};
+  let windPressureArr = [];
+  now.map((item) => {
+    if (
+      item.equipmentType === "carbonDioxide" ||
+      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,25 +111,26 @@ const changeData = (item) => {
    max: 120,
    value: item.value,
    point: item.valueThreshold,
-    unit: item.unit
-  }
-}
+    unit: item.unit,
+  };
+};
 const handleOpenChart = () => {
-  console.log('有害气体弹窗')
-  isVisited.value = true
+  console.log("有害气体弹窗");
+  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 = {
    //图例
@@ -129,103 +155,146 @@ const initChart = () => {
    //提示框组件
    tooltip: {
      show: true,
-      trigger: 'axis',
+      trigger: "axis",
      textStyle: {
        fontSize: 40
      }
    },
    //X轴
    xAxis: {
-      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'],
+      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",
+      ],
      axisLabel: {
        textStyle: {
          fontSize: 45,
-          color: '#D6F1FA'
+          color: "#D6F1FA",
        },
      },
    },
    //Y轴
    yAxis: {
-      type: 'value',
+      type: "value",
      axisLabel: {
        textStyle: {
          fontSize: 45,
-          color: '#D6F1FA'
+          color: "#D6F1FA",
        },
      },
    },
    //配置项
    series: [
      {
-        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],
-        type: 'line',
+        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,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        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],
-        type: 'line',
+        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,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        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],
-        type: 'line',
+        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,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        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],
-        type: 'line',
+        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,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        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],
-        type: 'line',
+        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,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
      {
-        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],
-        type: 'line',
+        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,
+        ],
+        type: "line",
        smooth: true,
        symbolSize: 24,
        lineStyle: {
-          width: 5
-        }
+          width: 5,
+        },
      },
-    ]
-  }
+    ],
+  };
  myEcharts.setOption(option);
  //图表大小自适应窗口大小变化
  window.onresize = () => {
    myEcharts.resize();
-  }
-}
-
+  };
+};
 </script>

 <style lang="scss" scoped>
@@ -239,7 +308,6 @@ const initChart = () => {
  right: 72px;
  background-image: url(../../../assets/images/badGasInfo/bg.png);

-
  .title {
    width: 128px;
    height: 45px;
--- 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;
@@ -191,4 +284,7 @@ function addEquipment() {
    }
  }
 }
+:deep(.el-select-dropdown__wrap) {
+  background: greenyellow !important;
+}
 </style>
--- 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();
@@ -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) {
-    this.deviceList = [];
-    meshes.forEach((mesh) => {
-      this.deviceList.push(mesh);
-    });
-    console.log(this.deviceList);
+  initDevicesModel(equMap) {
+    //
+    this.equMap = equMap;
+
+    console.log(equMap);
  }

  /**
@@ -424,10 +419,10 @@ export default class Demo {
      );
      this.opacityTween.start();
      this.opacityTween.onUpdate((obj) => {
-        mesh.material.opacity = obj.opacity;
-        mesh2.material.opacity = obj.opacity;
-        mesh3.material.opacity = obj.opacity;
-        mesh4.material.opacity = obj.opacity;
+        // mesh.material.opacity = obj.opacity;
+        // mesh2.material.opacity = obj.opacity;
+        // mesh3.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);
--- 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/handleOrbitControlsChange/index.js
+++ b/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())
+  // );
 }
--- 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;
@@ -15,17 +17,39 @@ export function handleRClick(targetPoint) {
    worldPosition.z
  );
  this.isControlOrbit(false);
-
-  this.tag3CSS2DObj.translateX(-3);
-  this.tag3CSS2DObj.translateZ(10);
-  this.scene.add(this.tag3CSS2DObj);
-  intoAnimation.call(this);
+  this.position = worldPosition;
+  if (/tr$/.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 (/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,
-      y: worldP.y + 3,
-      z: worldP.z - 12,
-      xTarget: worldP.x,
-      yTarget: worldP.y,
-      zTarget: worldP.z,
+      x: worldP.x + x,
+      y: worldP.y + y,
+      z: worldP.z + z,
+      xTarget: -5,
+      yTarget: 8.814,
+      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);
+  });
 }
--- 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"));