From 20bfc32d080d0eb21919bead71d7ca5f243e91db Mon Sep 17 00:00:00 2001
From: trp <2477421791@qq.com>
Date: Fri, 29 Dec 2023 13:09:46 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E5=94=90=E6=B6=A6=E5=B9=B3=EF=BC=9A?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E9=87=8D=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/tunnelScene.js                        |   9 ++
 .../content/tunnelScene/TunnelScene.vue       |  71 +++++-----
 .../tunnelScene/editEquComp/editDialog.vue    |  42 +++---
 .../content/tunnelScene/request/index.js      | 128 ++++++++++++++++++
 .../sceneClass/editEquipment/index.js         | 101 +++++++-------
 src/store/modelSceneStore.js                  |  17 ++-
 src/views/edit/edit.vue                       | 112 +++++++--------
 7 files changed, 314 insertions(+), 166 deletions(-)
 create mode 100644 src/components/content/tunnelScene/request/index.js

diff --git a/src/api/tunnelScene.js b/src/api/tunnelScene.js
index 5b1aa0a..43b4edc 100644
--- a/src/api/tunnelScene.js
+++ b/src/api/tunnelScene.js
@@ -42,3 +42,12 @@ export const saveEquipment = (
     },
   });
 };
+
+// 保存模型(新增)
+export const apiSaveEquipment = (data) => {
+  return request({
+    url: "/tunnel/model/details",
+    method: "put",
+    data,
+  });
+};
diff --git a/src/components/content/tunnelScene/TunnelScene.vue b/src/components/content/tunnelScene/TunnelScene.vue
index 77738bb..b0add02 100644
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -3,17 +3,34 @@
     <div id="cvs" ref="content"></div>
     <dev-info ref="info" :devInfo="devInfo" />
     <!-- 这里的预览模式需要做成不能修改的模式 -->
-    <edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
-      :hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice"
-      :pointGap="pointGap" />
-    <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
+    <edit-dialog
+      ref="edit"
+      @addEquipment="handleAddEqu"
+      @removeEquipment="handleRemoveEqu"
+      @cancel="handleCancel"
+      :hasDev="hasDevice"
+      :pointNum="pointNum"
+      :tunnelId="params.tunnelId"
+      :position="targetP?.name"
+      :hasEquipment="hasDevice"
+      :pointGap="pointGap"
+      :form="params.form"
+    />
+    <el-dialog
+      v-model="centerDialogVisible"
+      width="30%"
+      destroy-on-close
+      center
+      :show-close="false"
+      style="
         margin: 20% auto;
         width: 569px;
         height: 330px;
         background: rgba(7, 35, 72, 0.79);
         border-radius: 20px;
         border: 2px solid #0f82af;
-      ">
+      "
+    >
       <p id="remove-title">是否确定删除该设备</p>
       <div class="btn">
         <button @click="centerDialogVisible = false">取消</button>
@@ -49,45 +66,38 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
-import { useModelSceneStore } from "@/store/modelSceneStore";
+import { deleteEquipment, initData } from "./request";
 
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
-const store = useModelSceneStore();
-
+let modelList = ref(null);
 let demo; //定义demo对象
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 
-const params = defineProps(["isedit", "tunnelId", "tunnelLength"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
-
+const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 let isedit = ref(params.isedit);
-
 let tunnelId = reactive(params.tunnelId);
-console.log(tunnelId);
-console.log(params.tunnelLength);
 
 watch(
   () => params.tunnelLength,
   (now) => {
-    params.tunnelLength = now
+    params.tunnelLength = now;
     console.log(params.tunnelLength);
-    pointGap = now / 20
+    pointGap = now / 20;
   },
   { deep: true }
-)
+);
 
 let pointGap = reactive(params.tunnelLength);
 
-
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
-
   const doms = [info.value.$el, edit.value.$el];
   demo = new ThreeDScene(three, content.value);
   //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
@@ -106,12 +116,7 @@ async function handleMounted() {
 
   //加载HDR背景图片
   demo.loadBackground(hdrLoader, backColorSet);
-  watch(
-    () => params.tunnelId,
-    async () => {
-      const text = await store.initData(params.tunnelId);
-    }
-  );
+
   // 初始化设备模型
   try {
     const map = new Map();
@@ -119,16 +124,15 @@ async function handleMounted() {
     map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
     demo.initDevicesModel(map);
     // 初始化
-    const equipmentList = await store.getEquipmentList();
-    demo.editTunnelInit(equipmentList);
+    modelList.value = await initData(params.tunnelId, params.form);
+    console.log("init", params.tunnelId);
+    demo.editTunnelInit(modelList.value);
   } catch (err) {
     ElMessage({
-      message: "场景加载异常！",
+      message: "场景初始化异常！",
       type: "warning",
     });
   }
-
-
 }
 
 // 每个模型加载回调
@@ -139,7 +143,7 @@ function loadModel(path) {
       (obj) => {
         resolve(obj);
       },
-      (xhr) => { },
+      (xhr) => {},
       (err) => {
         reject(err);
       }
@@ -225,8 +229,7 @@ function handleRemoveEqu() {
 // 对话框确认删除
 function handleConfirmAddEqu() {
   console.log("target:", targetP.value.info);
-  store
-    .deleteEquipment(10000, params.tunnelId, targetP.value.info.equipmentId)
+  deleteEquipment(targetP.value.info.equipmentId, pointGap)
     .then((res) => {
       demo.removeEquipment(targetP.value);
       centerDialogVisible.value = false;
@@ -235,9 +238,9 @@ function handleConfirmAddEqu() {
         type: "success",
       });
     })
-    .catch((err) => {
+    .catch((res) => {
       ElMessage({
-        message: "请求异常！",
+        message: "删除失败！",
         type: "warning",
       });
     });
diff --git a/src/components/content/tunnelScene/editEquComp/editDialog.vue b/src/components/content/tunnelScene/editEquComp/editDialog.vue
index b188143..a9fc3cb 100644
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -48,9 +48,8 @@ import InputNum from "./childComps/InputNum.vue";
 import SelectInput from "./childComps/SelectInput.vue";
 import { getEquipmentType, getEquipment } from "@/api/tunnelScene";
 import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
-import { useModelSceneStore } from "@/store/modelSceneStore";
 import { ElMessage } from "element-plus";
-
+import { saveEquipment, initData } from "../request";
 const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
 const params = defineProps([
   "pointNum",
@@ -58,13 +57,14 @@ const params = defineProps([
   "tunnelId",
   "position",
   "hasEquipment",
+  "form",
 ]);
 
-// 当前风压
 let p = ref(57);
 const equipment = ref(null);
 const equipmentType = ref(null);
-const store = useModelSceneStore();
+
+let maxConstructionLength = ref(0);
 //计算锚点之间距离
 const pointDistance_str = computed(
   () =>
@@ -73,18 +73,35 @@ const pointDistance_str = computed(
     }米`
 );
 
+watch(
+  () => params.form,
+  () => {
+    initData(params.tunnelId, params.form);
+  },
+  {
+    deep: true,
+  }
+);
+
 // 请求数据模型
 const equipmentSetting = reactive({
+  equipmentId: null,
+  equipmentName: "",
   equipmentType: "", //设备类型
-  chooseEquipment: null, //设备选择(设备名称)
+  position: "",
   threshold: "", //阈值
+  typeKey: null, //设备选择(设备名称)
 });
 // 绑定选择的设备类型
 function handleTypeChange(optionItem) {
   equipmentSetting.equipmentType = optionItem.value;
+  console.log("option", equipmentSetting);
 }
 function handleEquipmentChange(equipmentItem) {
-  equipmentSetting.chooseEquipment = equipmentItem;
+  equipmentSetting.equipmentName = equipmentItem.label;
+  equipmentSetting.equipmentId = equipmentItem.equipmentId;
+  equipmentSetting.typeKey = equipmentItem.value;
+  console.log("option", equipmentSetting);
 }
 // 设备类型选项参数
 let options = reactive([{ label: "暂无数据", value: "" }]);
@@ -150,25 +167,18 @@ function addEquipment() {
     });
     return;
   }
-  if (!equipmentSetting.equipmentType || !equipmentSetting.chooseEquipment) {
+  if (!equipmentSetting.equipmentType || !equipmentSetting.equipmentId) {
     ElMessage({
       message: "选项不能为空！",
       type: "warning",
     });
     return;
   }
-
   equipmentSetting.position = params.position;
   // 合法请求
-  store
-    .saveSceneData(10000, 1, equipmentSetting)
+  saveEquipment(equipmentSetting, params.pointGap)
     .then((res) => {
       emit("addEquipment", equipmentSetting);
-      equipmentSetting.chooseEquipment = null;
-      equipmentSetting.equipmentType = "";
-      equipmentSetting.threshold = "";
-      equipment.value.reset();
-      equipmentType.value.reset();
       ElMessage({
         message: "添加成功！",
         type: "success",
@@ -176,7 +186,7 @@ function addEquipment() {
     })
     .catch((err) => {
       ElMessage({
-        message: "请求异常！",
+        message: "添加异常！",
         type: "warning",
       });
     });
diff --git a/src/components/content/tunnelScene/request/index.js b/src/components/content/tunnelScene/request/index.js
new file mode 100644
index 0000000..601b910
--- /dev/null
+++ b/src/components/content/tunnelScene/request/index.js
@@ -0,0 +1,128 @@
+import { apiSaveEquipment, initSceneData } from "@/api/tunnelScene";
+import { toRaw } from "vue";
+let modelEquipmentList = [];
+let originData = null;
+// 初始化当前隧道数据并保存在本地
+export const initData = (tunnelId, otherInfo) => {
+  return new Promise((resolve, reject) => {
+    initSceneData(tunnelId)
+      .then((res) => {
+        originData = toRaw(otherInfo);
+        if (res.data.tunnelThreeConfig) {
+          console.log("data", res.data);
+          modelEquipmentList = JSON.parse(res.data.tunnelThreeConfig);
+        }
+        console.log("test", modelEquipmentList, originData);
+        resolve(modelEquipmentList);
+      })
+      .catch((Error) => {
+        ElMessage.error("场景初始化异常！");
+        reject();
+      });
+  });
+};
+
+//保存数据并提交
+export const saveEquipment = (equipmentInfo, pointGap) => {
+  const {
+    constructionLength,
+    isDefault,
+    remarks,
+    serialNumber,
+    siteId,
+    totalLength,
+    tunnelId,
+    tunnelName,
+  } = originData;
+  let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
+  tempModelEquipmentList.push(toRaw(equipmentInfo));
+
+  return new Promise((resolve, reject) => {
+    apiSaveEquipment({
+      constructionLength: autoComputeConstructionLength(
+        tempModelEquipmentList,
+        pointGap
+      ),
+      isDefault,
+      modelEquipmentList: tempModelEquipmentList,
+      remarks,
+      serialNumber,
+      tunnelId,
+      tunnelLength: totalLength,
+      tunnelName,
+    })
+      .then((res) => {
+        if (res?.code === 1000) {
+          modelEquipmentList.push(toRaw(equipmentInfo)); //存入本地
+          resolve();
+        }
+        reject(res);
+      })
+      .catch((err) => {
+        reject();
+      });
+  });
+};
+
+// 删除
+export const deleteEquipment = (equipmentId, pointGap) => {
+  let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
+  tempModelEquipmentList = tempModelEquipmentList.filter(
+    (item) => item.equipmentId != equipmentId
+  );
+  const {
+    constructionLength,
+    isDefault,
+    remarks,
+    serialNumber,
+    siteId,
+    totalLength,
+    tunnelId,
+    tunnelName,
+  } = originData;
+  return new Promise((resolve, reject) => {
+    apiSaveEquipment({
+      constructionLength: autoComputeConstructionLength(
+        tempModelEquipmentList,
+        pointGap
+      ),
+      isDefault,
+      modelEquipmentList: tempModelEquipmentList,
+      remarks,
+      serialNumber,
+      tunnelId,
+      tunnelLength: totalLength,
+      tunnelName,
+    })
+      .then((res) => {
+        if (res?.code === 1000) {
+          modelEquipmentList = modelEquipmentList.filter(
+            (item) => item.equipmentId != equipmentId
+          );
+          resolve();
+        }
+        reject(res);
+      })
+      .catch((err) => {
+        reject();
+      });
+  });
+};
+
+function autoComputeConstructionLength(modelEquipmentList, pointGap) {
+  let maxLength = 0;
+  modelEquipmentList.forEach((item) => {
+    const length =
+      Number(
+        item.position.substring(
+          item.position.indexOf("_") + 1,
+          item.position.lastIndexOf("_")
+        ) - 1
+      ) * pointGap;
+    if (length > maxLength) {
+      maxLength = length;
+    }
+  });
+  console.log("max", maxLength);
+  return maxLength;
+}
diff --git a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
index b6d0156..766567a 100644
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
@@ -12,10 +12,10 @@ function addEquipment(targetPoint, formInfo) {
   if (targetPoint.hasDevice) {
     return;
   }
-
+  console.log("info", formInfo);
   switch (formInfo.equipmentType) {
     case "frequency":
-      handleFanEqu.call(this, targetPoint, formInfo.chooseEquipment);
+      handleFanEqu.call(this, targetPoint, formInfo);
       break;
     // 还没有风压阀的模型，所以先用其他设备传感器实现
     // case "valve":
@@ -23,7 +23,7 @@ function addEquipment(targetPoint, formInfo) {
     //   break;
     case "windPressure":
     case "sensor":
-      handleOtherEqu.call(this, targetPoint, formInfo.chooseEquipment);
+      handleOtherEqu.call(this, targetPoint, formInfo);
       break;
     default:
       break;
@@ -37,9 +37,6 @@ function addEquipment(targetPoint, formInfo) {
 
 // }
 
-
-
-
 // 其他传感器
 function handleOtherEqu(targetPoint, equipmentInfo) {
   const equMesh = this.equMap.get("equ_sensors").clone();
@@ -47,8 +44,7 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   equMesh.position.copy(worldP);
 
   //设备添加标签
-  const tag = EquipmentTag(equipmentInfo.label);
-  console.log(equipmentInfo);
+  const tag = EquipmentTag(equipmentInfo.equipmentName);
   equMesh.getObjectByName("tag").material = tag;
   if (/tr$/.test(targetPoint.name)) {
     equMesh.rotation.z = -Math.PI / 2;
@@ -71,39 +67,38 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   targetPoint.scale.set(0.03, 0.06, 0.05);
   this.scene.add(equMesh);
   targetPoint.visible = false;
-  targetPoint.hasWall = true
+  targetPoint.hasWall = true;
   //处理风压阀的代码片段
-  let lineIndex = targetPoint.name.slice(7, 9)
+  let lineIndex = targetPoint.name.slice(7, 9);
   for (let line = Number(lineIndex); line <= 20; line++) {
     if (line < 10) {
-      let wall = 'wall_' + '0' + line
-      this.scene.getObjectByName(wall).visible = true
-      let point = 'point_' + '00' + line + '_tc'
-      console.log(this.scene.getObjectByName(point));
-      this.scene.getObjectByName(point).visible = false
-      this.scene.getObjectByName(point).layers.set(-2)
+      let wall = "wall_" + "0" + line;
+      this.scene.getObjectByName(wall).visible = true;
+      let point = "point_" + "00" + line + "_tc";
+      this.scene.getObjectByName(point).visible = false;
+      this.scene.getObjectByName(point).layers.set(-2);
       if (this.scene.getObjectByName(point).hasDevice == true) {
-        let EquID = this.scene.getObjectByName(point).info.id
-        this.scene.getObjectById(EquID).visible = false
+        let EquID = this.scene.getObjectByName(point).info.id;
+        this.scene.getObjectById(EquID).visible = false;
       }
     } else if (line >= 10) {
-      let wall = 'wall_' + line
-      this.scene.getObjectByName(wall).visible = true
-      let point = 'point_' + '0' + line + '_tc'
-      this.scene.getObjectByName(point).visible = false
-      this.scene.getObjectByName(point).layers.set(-2)
+      let wall = "wall_" + line;
+      this.scene.getObjectByName(wall).visible = true;
+      let point = "point_" + "0" + line + "_tc";
+      this.scene.getObjectByName(point).visible = false;
+      this.scene.getObjectByName(point).layers.set(-2);
       if (this.scene.getObjectByName(point).hasDevice == true) {
-        let EquID = this.scene.getObjectByName(point).info.id
-        this.scene.getObjectById(EquID).visible = false
+        let EquID = this.scene.getObjectByName(point).info.id;
+        this.scene.getObjectById(EquID).visible = false;
       }
     }
     //处理21行的设备和附着点
-    let point = 'point_' + '0' + 21 + '_tc'
-    this.scene.getObjectByName(point).visible = false
-    this.scene.getObjectByName(point).layers.set(-2)
+    let point = "point_" + "0" + 21 + "_tc";
+    this.scene.getObjectByName(point).visible = false;
+    this.scene.getObjectByName(point).layers.set(-2);
     if (this.scene.getObjectByName(point).hasDevice == true) {
-      let EquID = this.scene.getObjectByName(point).info.id
-      this.scene.getObjectById(EquID).visible = false
+      let EquID = this.scene.getObjectByName(point).info.id;
+      this.scene.getObjectById(EquID).visible = false;
     }
   }
   // this.scene.getObjectByName('wall_01').visible = true
@@ -117,7 +112,6 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   // 1.先取出当前点击添加设备锚点的行数
   // 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取)
   // 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中
-
 }
 
 // 风机
@@ -153,7 +147,6 @@ function handleFanEqu(
   fanSpin.onUpdate((obj) => {
     fanLeaf.rotation.z = obj.rotation;
   });
-
   this.fanSpinArray.push(fanSpin);
 }
 
@@ -162,39 +155,39 @@ function removeEquipment(targetPoint) {
   //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
   if (!targetPoint.hasDevice) return;
   if (targetPoint.hasWall == true) {
-    let lineIndex = targetPoint.name.slice(7, 9)
+    let lineIndex = targetPoint.name.slice(7, 9);
     for (let line = Number(lineIndex); line <= 20; line++) {
       if (line < 10) {
-        let wall = 'wall_' + '0' + line
-        this.scene.getObjectByName(wall).visible = false
-        let point = 'point_' + '00' + line + '_tc'
+        let wall = "wall_" + "0" + line;
+        this.scene.getObjectByName(wall).visible = false;
+        let point = "point_" + "00" + line + "_tc";
         console.log(this.scene.getObjectByName(point));
-        this.scene.getObjectByName(point).visible = true
-        this.scene.getObjectByName(point).layers.set(0)
+        this.scene.getObjectByName(point).visible = true;
+        this.scene.getObjectByName(point).layers.set(0);
         if (this.scene.getObjectByName(point).hasDevice == true) {
-          this.scene.getObjectByName(point).visible = false
-          let EquID = this.scene.getObjectByName(point).info.id
-          this.scene.getObjectById(EquID).visible = true
+          this.scene.getObjectByName(point).visible = false;
+          let EquID = this.scene.getObjectByName(point).info.id;
+          this.scene.getObjectById(EquID).visible = true;
         }
       } else if (line >= 10) {
-        let wall = 'wall_' + line
-        this.scene.getObjectByName(wall).visible = false
-        let point = 'point_' + '0' + line + '_tc'
-        this.scene.getObjectByName(point).visible = true
-        this.scene.getObjectByName(point).layers.set(0)
+        let wall = "wall_" + line;
+        this.scene.getObjectByName(wall).visible = false;
+        let point = "point_" + "0" + line + "_tc";
+        this.scene.getObjectByName(point).visible = true;
+        this.scene.getObjectByName(point).layers.set(0);
         if (this.scene.getObjectByName(point).hasDevice == true) {
-          this.scene.getObjectByName(point).visible = false
-          let EquID = this.scene.getObjectByName(point).info.id
-          this.scene.getObjectById(EquID).visible = true
+          this.scene.getObjectByName(point).visible = false;
+          let EquID = this.scene.getObjectByName(point).info.id;
+          this.scene.getObjectById(EquID).visible = true;
         }
       }
       //处理21行的设备和附着点
-      let point = 'point_' + '0' + 21 + '_tc'
-      this.scene.getObjectByName(point).visible = true
-      this.scene.getObjectByName(point).layers.set(0)
+      let point = "point_" + "0" + 21 + "_tc";
+      this.scene.getObjectByName(point).visible = true;
+      this.scene.getObjectByName(point).layers.set(0);
       if (this.scene.getObjectByName(point).hasDevice == true) {
-        let EquID = this.scene.getObjectByName(point).info.id
-        this.scene.getObjectById(EquID).visible = true
+        let EquID = this.scene.getObjectByName(point).info.id;
+        this.scene.getObjectById(EquID).visible = true;
       }
     }
   }
diff --git a/src/store/modelSceneStore.js b/src/store/modelSceneStore.js
index 9b101ef..60178a4 100644
--- a/src/store/modelSceneStore.js
+++ b/src/store/modelSceneStore.js
@@ -3,23 +3,22 @@ import { ref } from "vue";
 import { saveEquipment, initSceneData } from "../api/tunnelScene";
 import { ElMessage } from "element-plus";
 export const useModelSceneStore = defineStore("modelSceneData", () => {
-  let equipmentList = ref("[]");
+  let equipmentList = ref([]);
   let allEditList = ref({});
   function initData(tunnelId = 1) {
     initSceneData(tunnelId)
       .then((res) => {
-        equipmentList.value = res.data.tunnelThreeConfig;
+        // equipmentList.value = res.data.tunnelThreeConfig;
+        console.log("初始化的数据");
       })
       .catch((Error) => {
         ElMessage.error("场景初始化异常！");
       });
   }
   //默认初始化1号隧道
-  function saveSceneData(constructionLength, tunnelId, modelData) {
-    const temp = JSON.parse(equipmentList.value);
-    temp.push(modelData);
-    equipmentList.value = JSON.stringify(temp);
-    console.log("save:", equipmentList.value);
+  function saveSceneData(data) {
+    equipmentList.value.push(data);
+
     return saveEquipment(constructionLength, tunnelId, equipmentList.value);
   }
   //   删除设备
@@ -39,7 +38,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
           resolve(JSON.parse(equipmentList.value));
         })
         .catch((Error) => {
-          ElMessage.error("场景初始化异常！");
+          // ElMessage.error("场景初始化异常！");
           reject();
         });
     });
@@ -49,6 +48,6 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
     initData,
     saveSceneData,
     deleteEquipment,
-    getEquipmentList
+    getEquipmentList,
   };
 });
diff --git a/src/views/edit/edit.vue b/src/views/edit/edit.vue
index 75c3adc..7d3d92f 100644
--- a/src/views/edit/edit.vue
+++ b/src/views/edit/edit.vue
@@ -7,24 +7,24 @@
       </div>
       <div class="tunnel-title"></div>
       <div class="btn-right">
-        <div class="del-btn" @click="handleGotoDevice">
-          设备管理
-        </div>
-        <div class="del-btn" @click="handleSave">
-          保存
-        </div>
+        <div class="del-btn" @click="handleGotoDevice">设备管理</div>
+        <div class="del-btn" @click="handleSave">保存</div>
       </div>
     </div>
     <div class="edit-box">
       <el-form :model="form" :label-position="right" label-width="188px">
         <el-form-item label="隧道名称">
-          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称" />
         </el-form-item>
         <el-form-item label="序列号">
-          <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
+          <el-input v-model="form.serialNumber" placeholder="请输入序列号" />
         </el-form-item>
         <el-form-item label="隧道长度">
-          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+          <el-input
+            type="number"
+            v-model="form.totalLength"
+            placeholder="请输入隧道长度"
+          />
         </el-form-item>
         <el-form-item label="是否默认">
           <el-radio-group v-model="form.isDefault">
@@ -33,53 +33,60 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="隧道备注">
-          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
+          <el-input v-model="form.remarks" placeholder="请输入隧道备注" />
         </el-form-item>
       </el-form>
     </div>
 
     <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
-    <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene" :tunnelLength="tunnelLength"/>
+    <tunnel-scene
+      id="tunnel-box"
+      :isedit="true"
+      :tunnelId="tunnelId"
+      :form="form"
+      ref="tunnelScene"
+      :tunnelLength="tunnelLength"
+    />
   </div>
 </template>
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
-import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
-import {computed} from "vue";
-import {useModelSceneStore} from "@/store/modelSceneStore";
-import {ElMessage} from "element-plus";
+import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
+import { computed, provide } from "vue";
+import { useModelSceneStore } from "@/store/modelSceneStore";
+import { ElMessage } from "element-plus";
 
 const router = useRouter();
-const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
-const userId = reactive(router.currentRoute.value.params.userId)
-const type = reactive(router.currentRoute.value.params.type)
+const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
+const userId = reactive(router.currentRoute.value.params.userId);
+const type = reactive(router.currentRoute.value.params.type);
 const store = useModelSceneStore();
 const form = ref({
-  tunnelName: '',
-  serialNumber: '',
-  totalLength: '',
+  tunnelName: "",
+  serialNumber: "",
+  totalLength: "",
   isDefault: false,
-  remarks: ''
+  remarks: "",
 });
-const equipmentList = ref([])
+const equipmentList = ref([]);
 onMounted(async () => {
   equipmentList.value = await store.getEquipmentList();
-})
+});
 const getTunnel = () => {
   getTunnelDetail(tunnelId).then((res) => {
     if (res?.code === 1000) {
-      form.value = res.data
+      form.value = res.data;
     }
   });
-}
-getTunnel()
+};
+getTunnel();
 const tunnelLength = computed(() => form.value.totalLength);
 const handleGotoDevice = () => {
-  router.push('/device/' + tunnelId)
-}
-const handleGoTunnelMgr=()=>{
-  router.push('/tunnel/' + form.value.siteId+'/'+type+'/'+userId)
-}
+  router.push("/device/" + tunnelId);
+};
+const handleGoTunnelMgr = () => {
+  router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+};
 const handleSave = async () => {
   const data = {
     tunnelId: tunnelId,
@@ -90,15 +97,15 @@ const handleSave = async () => {
     constructionLength: 500,
     tunnelLength: form.value.totalLength,
     isDefault: form.value.isDefault,
-    tunnelThreeConfig: JSON.stringify(await store.getEquipmentList())
-  }
+    tunnelThreeConfig: JSON.stringify(await store.getEquipmentList()),
+  };
   editTunnel(data).then((res) => {
     if (res?.code === 1000) {
-      ElMessage.success(res.msg)
-      router.push('/tunnel/' + form.value.siteId+'/'+type+'/'+userId)
+      ElMessage.success(res.msg);
+      router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
     }
   });
-}
+};
 </script>
 <style lang="scss" scoped>
 #main {
@@ -125,16 +132,16 @@ const handleSave = async () => {
       height: 80px;
       line-height: 70px;
       border-radius: 11px;
-      border: 2px solid #08B7B8;
+      border: 2px solid #08b7b8;
       font-size: 42px;
-      color: #FFFFFF;
+      color: #ffffff;
 
       .back-icon {
         margin-right: 20px;
         margin-left: 23px;
         width: 35px;
         height: 35px;
-        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+        background-image: url("@/assets/images/site/zdgl_icon_fh.png");
       }
     }
 
@@ -158,12 +165,11 @@ const handleSave = async () => {
         width: 180px;
         height: 80px;
         border-radius: 11px;
-        border: 2px solid #08B7B8;
-        color: #FFFFFF;
+        border: 2px solid #08b7b8;
+        color: #ffffff;
         font-size: 42px;
       }
     }
-
   }
 
   #tunnel-box {
@@ -185,7 +191,7 @@ const handleSave = async () => {
     }
 
     :deep(.el-radio__label) {
-      color: #FFFFFF;
+      color: #ffffff;
       font-size: 38px;
     }
 
@@ -193,23 +199,23 @@ const handleSave = async () => {
       width: 40px;
       height: 40px;
       border-radius: 25px;
-      border: 4px solid #05FEFF;
+      border: 4px solid #05feff;
       background-color: transparent;
     }
 
-    :deep(.el-radio__input.is-checked+.el-radio__label) {
-      color: #FFFFFF;
+    :deep(.el-radio__input.is-checked + .el-radio__label) {
+      color: #ffffff;
     }
 
-    :deep(.el-radio__input.is-checked .el-radio__inner ) {
-      background: #064B66;
-      border-color: #05FEFF !important;
+    :deep(.el-radio__input.is-checked .el-radio__inner) {
+      background: #064b66;
+      border-color: #05feff !important;
     }
 
     :deep(.el-radio__inner::after) {
       width: 18px;
       height: 18px;
-      background: #05FEFF;
+      background: #05feff;
     }
 
     :deep(.el-form-item) {
@@ -218,7 +224,7 @@ const handleSave = async () => {
 
     :deep(.el-form-item__label) {
       font-size: 38px;
-      color: #FFFFFF;
+      color: #ffffff;
       margin-right: 12px;
       line-height: 50px;
     }
@@ -228,7 +234,7 @@ const handleSave = async () => {
 
       .el-input__wrapper {
         background-color: transparent;
-        border: 1px solid #08B7B8;
+        border: 1px solid #08b7b8;
 
         .el-input__inner {
           height: auto;

From a1f31cf3ef329c6a3121c4141f7abcd2c67ddd49 Mon Sep 17 00:00:00 2001
From: trp <2477421791@qq.com>
Date: Fri, 29 Dec 2023 14:19:42 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E5=94=90=E6=B6=A6=E5=B9=B3=EF=BC=9A?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=94=AF=E4=B8=80=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tunnelScene/editEquComp/editDialog.vue    | 40 +++++++++----
 .../content/tunnelScene/request/index.js      | 60 +++++++++++--------
 2 files changed, 63 insertions(+), 37 deletions(-)

diff --git a/src/components/content/tunnelScene/editEquComp/editDialog.vue b/src/components/content/tunnelScene/editEquComp/editDialog.vue
index a9fc3cb..16434de 100644
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -68,9 +68,9 @@ let maxConstructionLength = ref(0);
 //计算锚点之间距离
 const pointDistance_str = computed(
   () =>
-    `${params.pointGap}米*${params.pointNum}=${
+    `${params.pointGap}米*${params.pointNum}=${(
       params.pointGap * params.pointNum
-    }米`
+    ).toFixed(2)}米`
 );
 
 watch(
@@ -92,16 +92,25 @@ const equipmentSetting = reactive({
   threshold: "", //阈值
   typeKey: null, //设备选择(设备名称)
 });
+function resetEquipmentSetting() {
+  equipmentSetting.equipmentId = null;
+  equipmentSetting.equipmentName = "";
+  equipmentSetting.equipmentType = "";
+  equipmentSetting.position = "";
+  equipmentSetting.threshold = "";
+  equipmentSetting.typeKey = null;
+  equipment.value.reset();
+  equipmentType.value.reset();
+}
+
 // 绑定选择的设备类型
 function handleTypeChange(optionItem) {
   equipmentSetting.equipmentType = optionItem.value;
-  console.log("option", equipmentSetting);
 }
 function handleEquipmentChange(equipmentItem) {
   equipmentSetting.equipmentName = equipmentItem.label;
   equipmentSetting.equipmentId = equipmentItem.equipmentId;
   equipmentSetting.typeKey = equipmentItem.value;
-  console.log("option", equipmentSetting);
 }
 // 设备类型选项参数
 let options = reactive([{ label: "暂无数据", value: "" }]);
@@ -144,11 +153,7 @@ function handelInput(e) {
 
 // 处理取消事件
 function handleCancel() {
-  equipmentSetting.equipmentType = "";
-  equipmentSetting.chooseEquipment = null;
-  equipmentSetting.threshold = "";
-  equipment.value.reset();
-  equipmentType.value.reset();
+  resetEquipmentSetting();
   // 发射事件给tunnel父组件
   emit("cancel");
 }
@@ -183,12 +188,21 @@ function addEquipment() {
         message: "添加成功！",
         type: "success",
       });
+      resetEquipmentSetting();
     })
     .catch((err) => {
-      ElMessage({
-        message: "添加异常！",
-        type: "warning",
-      });
+      if (err === 3000) {
+        ElMessage({
+          message: "该设备已添加！",
+          type: "warning",
+        });
+        resetEquipmentSetting();
+      } else {
+        ElMessage({
+          message: "添加异常！",
+          type: "warning",
+        });
+      }
     });
 }
 </script>
diff --git a/src/components/content/tunnelScene/request/index.js b/src/components/content/tunnelScene/request/index.js
index 9d95938..babe138 100644
--- a/src/components/content/tunnelScene/request/index.js
+++ b/src/components/content/tunnelScene/request/index.js
@@ -37,29 +37,33 @@ export const saveEquipment = (equipmentInfo, pointGap) => {
   let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
   tempModelEquipmentList.push(toRaw(equipmentInfo));
   return new Promise((resolve, reject) => {
-    apiSaveEquipment({
-      constructionLength: autoComputeConstructionLength(
-        tempModelEquipmentList,
-        pointGap
-      ),
-      isDefault,
-      modelEquipmentList: tempModelEquipmentList,
-      remarks,
-      serialNumber,
-      tunnelId,
-      tunnelLength: totalLength,
-      tunnelName,
-    })
-      .then((res) => {
-        if (res?.code === 1000) {
-          modelEquipmentList.push(toRaw(equipmentInfo)); //存入本地
-          resolve();
-        }
-        reject(res);
-      })
-      .catch((err) => {
-        reject();
-      });
+    console.log("equId", equipmentInfo.equipmentId);
+    hasEquipment(equipmentInfo.equipmentId)
+      ? reject(3000)
+      : apiSaveEquipment({
+          constructionLength: autoComputeConstructionLength(
+            tempModelEquipmentList,
+            pointGap
+          ),
+          isDefault,
+          modelEquipmentList: tempModelEquipmentList,
+          remarks,
+          serialNumber,
+          tunnelId,
+          tunnelLength: totalLength,
+          tunnelName,
+        })
+          .then((res) => {
+            if (res?.code === 1000) {
+              modelEquipmentList.push(toRaw(equipmentInfo)); //存入本地
+              resolve();
+            }
+            console.log("add", res);
+            reject(res);
+          })
+          .catch((err) => {
+            reject();
+          });
   });
 };
 
@@ -103,7 +107,7 @@ export const deleteEquipment = (equipmentId, pointGap) => {
       .then((res) => {
         if (res?.code === 1000) {
           modelEquipmentList = modelEquipmentList.filter(
-            (item) => item.equipmentId != equipmentId
+            (item) => item.equipmentId === equipmentId
           );
           resolve();
         }
@@ -131,3 +135,11 @@ function autoComputeConstructionLength(modelEquipmentList, pointGap) {
   });
   return maxLength;
 }
+
+function hasEquipment(equipmentId) {
+  let result = false;
+  modelEquipmentList.forEach((item) => {
+    if (item.equipmentId === equipmentId) result = true;
+  });
+  return result;
+}

From e49c12635145e83053e284bbb85b6acf281e5de9 Mon Sep 17 00:00:00 2001
From: Hcat <2768237203@qq.com>
Date: Fri, 29 Dec 2023 21:18:48 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96+=E5=88=87=E6=8D=A2=E9=9A=A7=E9=81=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../content/tunnelScene/PreviewScene.vue      | 105 ++++++++------
 .../sceneClass/editEquipment/index.js         | 128 ++++++++----------
 .../sceneClass/previewTunnelInit/index.js     |   9 +-
 src/views/tunnel/index.vue                    |  70 ++++++----
 4 files changed, 164 insertions(+), 148 deletions(-)

diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue
index 46d8b06..7435789 100644
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -47,15 +47,14 @@ import {
 
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, toRaw, getCurrentInstance } from "vue";
 import { ElMessage } from "element-plus";
-import { useModelSceneStore } from "@/store/modelSceneStore";
-import { toRaw } from "vue"
+import { deleteEquipment, initData } from "./request";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
-const store = useModelSceneStore();
+let modelList = ref(null);
 let demo; //定义demo全局变量
 // const loader = new OBJLoader();
 const loader = new OBJLoader();
@@ -69,6 +68,16 @@ const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是
 let isedit = ref(params.isedit)
 
 
+// watch(
+//     () => params.tunnelId,
+//     (now) => {
+//         params.tunnelId = now
+//         console.log(params.tunnelId);
+
+//     },
+//     { deep: true }
+// )
+
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
@@ -89,7 +98,7 @@ async function handleMounted() {
     watch(
         () => params.tunnelId,
         async () => {
-            const text = await store.initData(params.tunnelId);
+            const text = await initData(params.tunnelId);
         }
     );
     // 初始化设备模型
@@ -100,14 +109,38 @@ async function handleMounted() {
         map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
         // 给对象初加载设备模型
         demo.initDevicesModel(map);
-        const equipmentList = await store.getEquipmentList();
-        demo.previewtunnelModeInit(equipmentList);
-        // previewEquInfProcess(equipmentList)
+        // const equipmentList = await store.getEquipmentList();
+        modelList.value = await initData(params.tunnelId);
+        // console.log("init", params.tunnelId);
+        demo.previewtunnelModeInit(modelList.value);
+        watch(
+            () => params.tunnelId,
+            (now) => {
+                params.tunnelId = now
+                // console.log(params.tunnelId);
+                checkTunnelInit(modelList.value)
+                demo.previewtunnelModeInit(modelList.value);
+            },
+            { deep: true }
+        )
+        // demo.previewtunnelModeInit(equipmentList);
+        // previewEquInfProcess(modelList.value, targetP.value)
     } catch (err) {
         console.log(err);
     }
 }
 
+
+function checkTunnelInit(equipmentList) {
+    equipmentList.forEach((item) => {
+        let equipment = toRaw(item)
+        console.log("我要清理掉之前的设备！！！");
+        console.log(equipment);
+        console.log(demo.scene.getObjectByName(equipment.position));
+        demo.removeEquipment(demo.scene.getObjectByName(equipment.position));
+    });
+}
+
 // 每个模型加载回调
 function loadModel(path) {
     return new Promise((resolve, reject) => {
@@ -163,46 +196,31 @@ function lClickCallback(demo) {
 }
 
 let pointNum = ref(0);
-let targetP;
+let targetP = ref({});
 // 右键点击附着点后调函数
 function rClickCallback(demo) {
     function editDev(targetPoint = null) {
-        hasDevice = targetPoint.hasDevice;
-        targetP = targetPoint;
-        //点击之后马上调用这个函数，变成回调，然后进行处理处理在传给preview表单
-        const equipmentList = store.getEquipmentList().then((result) => {
-            previewEquInfProcess(result, targetP)
-        });
+        hasDevice.value = targetPoint.hasDevice;
+        targetP.value = targetPoint;
+        const equipmentList = initData(params.tunnelId)
+        equipmentList.then((result) => {
+            previewEquInfProcess(result, targetP.value)
+        })
         pointNum.value = Number(
             targetPoint.name.substring(
                 targetPoint.name.indexOf("_") + 1,
                 targetPoint.name.lastIndexOf("_")
             ) - 1
         );
-
         if (!targetPoint.info) return;
         editDevInfo(targetPoint.info);
     }
     demo.addFunction("editDev", editDev);
-
 }
 
 // 添加设备
 function handleAddEqu(formInfo) {
-    if (!formInfo.equipmentType) {
-        ElMessage({
-            message: "请选择传感器！",
-            type: "warning",
-        });
-        return;
-    }
-    //表单信息
-    //这里利用处理请求
-    demo.addEquipment(targetP, formInfo);
-    ElMessage({
-        message: "添加成功！",
-        type: "success",
-    });
+    demo.addEquipment(targetP.value, formInfo);
 }
 
 const centerDialogVisible = ref(false);
@@ -219,12 +237,22 @@ function handleRemoveEqu() {
 }
 // 对话框确认删除
 function handleConfirmAddEqu() {
-    demo.removeEquipment(targetP);
-    centerDialogVisible.value = false;
-    ElMessage({
-        message: "删除成功！",
-        type: "success",
-    });
+    console.log("target:", targetP.value.info);
+    deleteEquipment(targetP.value.info.equipmentId, pointGap)
+        .then((res) => {
+            demo.removeEquipment(targetP.value);
+            centerDialogVisible.value = false;
+            ElMessage({
+                message: "删除成功！",
+                type: "success",
+            });
+        })
+        .catch((res) => {
+            ElMessage({
+                message: "删除失败！",
+                type: "warning",
+            });
+        });
 }
 // 处理取消关闭编辑框事件
 function handleCancel() {
@@ -242,11 +270,10 @@ let equipmentValue = ref(0)
 
 function previewEquInfProcess(equipmentList, targetP) {
     for (const equipment of equipmentList) {
-        // console.log(equipment);
         if (equipment.position == targetP.name) {
             equipmentType.value = equipment.equipmentType
             //需要将获取到的设备列表进行序列化
-            equipmentName.value = toRaw(equipment.chooseEquipment).label
+            equipmentName.value = equipment.equipmentName
             equipmentValue.value = equipment.threshold
             if (equipmentType.value == 'frequency') {
                 equipmentType.value = '风机'
diff --git a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
index 372fc45..070fdfe 100644
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
@@ -36,7 +36,7 @@ function addEquipment(targetPoint, formInfo) {
 // function handleValveEqu(targetPoint, equipmentInfo) {
 
 // }
-
+let allline = new Array
 // 其他传感器
 function handleOtherEqu(targetPoint, equipmentInfo) {
   const equMesh = this.equMap.get("equ_sensors").clone();
@@ -67,41 +67,24 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   targetPoint.scale.set(0.03, 0.06, 0.05);
   this.scene.add(equMesh);
   targetPoint.visible = false;
-  // targetPoint.hasWall = true;
-  // //处理风压阀的代码片段
-  // let lineIndex = targetPoint.name.slice(7, 9);
-  // for (let line = Number(lineIndex); line <= 20; line++) {
-  //   if (line < 10) {
-  //     let wall = "wall_" + "0" + line;
-  //     this.scene.getObjectByName(wall).visible = true;
-  //     let point = "point_" + "00" + line + "_tc";
-  //     this.scene.getObjectByName(point).visible = false;
-  //     this.scene.getObjectByName(point).layers.set(-2);
-  //     if (this.scene.getObjectByName(point).hasDevice == true) {
-  //       let EquID = this.scene.getObjectByName(point).info.id;
-  //       this.scene.getObjectById(EquID).visible = false;
-  //     }
-  //   } else if (line >= 10) {
-  //     let wall = "wall_" + line;
-  //     this.scene.getObjectByName(wall).visible = true;
-  //     let point = "point_" + "0" + line + "_tc";
-  //     this.scene.getObjectByName(point).visible = false;
-  //     this.scene.getObjectByName(point).layers.set(-2);
-  //     if (this.scene.getObjectByName(point).hasDevice == true) {
-  //       let EquID = this.scene.getObjectByName(point).info.id;
-  //       this.scene.getObjectById(EquID).visible = false;
-  //     }
+  targetPoint.hasWall = true;
+  //处理风压阀的代码片段
+  let lineIndex = targetPoint.name.slice(7, 9)
+  if (allline.includes(Number(lineIndex))) {
+    allline.slice(array.indexOf(lineIndex), 1)
+    console.log('dadad');
+  } else {
+    allline.push(Number(lineIndex))
+  }
+  console.log(allline);
+  // console.log(allline);
+  // allline.forEach((item, index, array) => {
+  //   if (array.includes(item)) {
+  //     array.slice(array.indexOf(item), 1)
+  //     array.slice(array.indexOf(item), 1)
+  //     console.log(array);
   //   }
-  //   //处理21行的设备和附着点
-  //   let point = "point_" + "0" + 21 + "_tc";
-  //   this.scene.getObjectByName(point).visible = false;
-  //   this.scene.getObjectByName(point).layers.set(-2);
-  //   if (this.scene.getObjectByName(point).hasDevice == true) {
-  //     let EquID = this.scene.getObjectByName(point).info.id;
-  //     this.scene.getObjectById(EquID).visible = false;
-  //   }
-  // }
-  // this.scene.getObjectByName('wall_01').visible = true
+  // })
   // console.log(this.scene);
   // 保存该设备模型id，后期直接从附附着点进行删除
   targetPoint.info = {
@@ -154,43 +137,44 @@ function handleFanEqu(
 function removeEquipment(targetPoint) {
   //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
   if (!targetPoint.hasDevice) return;
-  if (targetPoint.hasWall == true) {
-    let lineIndex = targetPoint.name.slice(7, 9);
-    for (let line = Number(lineIndex); line <= 20; line++) {
-      if (line < 10) {
-        let wall = "wall_" + "0" + line;
-        this.scene.getObjectByName(wall).visible = false;
-        let point = "point_" + "00" + line + "_tc";
-        console.log(this.scene.getObjectByName(point));
-        this.scene.getObjectByName(point).visible = true;
-        this.scene.getObjectByName(point).layers.set(0);
-        if (this.scene.getObjectByName(point).hasDevice == true) {
-          this.scene.getObjectByName(point).visible = false;
-          let EquID = this.scene.getObjectByName(point).info.id;
-          this.scene.getObjectById(EquID).visible = true;
-        }
-      } else if (line >= 10) {
-        let wall = "wall_" + line;
-        this.scene.getObjectByName(wall).visible = false;
-        let point = "point_" + "0" + line + "_tc";
-        this.scene.getObjectByName(point).visible = true;
-        this.scene.getObjectByName(point).layers.set(0);
-        if (this.scene.getObjectByName(point).hasDevice == true) {
-          this.scene.getObjectByName(point).visible = false;
-          let EquID = this.scene.getObjectByName(point).info.id;
-          this.scene.getObjectById(EquID).visible = true;
-        }
-      }
-      //处理21行的设备和附着点
-      let point = "point_" + "0" + 21 + "_tc";
-      this.scene.getObjectByName(point).visible = true;
-      this.scene.getObjectByName(point).layers.set(0);
-      if (this.scene.getObjectByName(point).hasDevice == true) {
-        let EquID = this.scene.getObjectByName(point).info.id;
-        this.scene.getObjectById(EquID).visible = true;
-      }
-    }
-  }
+  // if (targetPoint.hasWall == true) {
+  //   let lineIndex = targetPoint.name.slice(7, 9);
+  //   for (let line = Number(lineIndex); line <= 20; line++) {
+  //     if (line < 10) {
+  //       let wall = "wall_" + "0" + line;
+  //       this.scene.getObjectByName(wall).visible = false;
+  //       let point = "point_" + "00" + line + "_tc";
+  //       console.log(this.scene.getObjectByName(point));
+  //       this.scene.getObjectByName(point).visible = true;
+  //       this.scene.getObjectByName(point).layers.set(0);
+  //       if (this.scene.getObjectByName(point).hasDevice == true) {
+  //         this.scene.getObjectByName(point).visible = false;
+  //         let EquID = this.scene.getObjectByName(point).info.id;
+  //         this.scene.getObjectById(EquID).visible = true;
+  //       }
+  //     } else if (line >= 10) {
+  //       let wall = "wall_" + line;
+  //       this.scene.getObjectByName(wall).visible = false;
+  //       let point = "point_" + "0" + line + "_tc";
+  //       this.scene.getObjectByName(point).visible = true;
+  //       this.scene.getObjectByName(point).layers.set(0);
+  //       if (this.scene.getObjectByName(point).hasDevice == true) {
+  //         this.scene.getObjectByName(point).visible = false;
+  //         let EquID = this.scene.getObjectByName(point).info.id;
+  //         this.scene.getObjectById(EquID).visible = true;
+  //       }
+  //     }
+  //     //处理21行的设备和附着点
+  //     let point = "point_" + "0" + 21 + "_tc";
+  //     this.scene.getObjectByName(point).visible = true;
+  //     this.scene.getObjectByName(point).layers.set(0);
+  //     if (this.scene.getObjectByName(point).hasDevice == true) {
+  //       let EquID = this.scene.getObjectByName(point).info.id;
+  //       this.scene.getObjectById(EquID).visible = true;
+  //     }
+  //   }
+  // }
+  console.log("测试是不是删除了");
   const mesh = this.scene.getObjectById(targetPoint.info.id);
   this.scene.remove(mesh);
   targetPoint.visible = true;
diff --git a/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js b/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
index 1dfa150..8ea6300 100644
--- a/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
+++ b/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
@@ -1,3 +1,4 @@
+
 export default function previewtunnelModeInit(equipmentList) {
     //初始化将墙壁隐藏起来
     // for (let line = 1; line <= 20; line++) {
@@ -9,14 +10,8 @@ export default function previewtunnelModeInit(equipmentList) {
     //         this.scene.getObjectByName(wall).visible = false
     //     }
     // }
-
     equipmentList.forEach((item) => {
-        const formInfo = {
-            equipmentType: item.equipmentType, //设备类型
-            chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
-            threshold: item.threshold,
-        };
-        this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
+        this.addEquipment(this.scene.getObjectByName(item.position), item);
     });
     //进行预览和编辑模式的一些操作
     if (this.isedit == false) {
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 988fdef..3aa3850 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
       <div class="tunnel-title"></div>
       <!--      <manage-length class="tunnel-length"></manage-length>-->
       <div class="top-length">
-        <span>隧道总长度: {{tunnelLength}}米</span>
-        <span>当前施工长度: {{constructionLength}}米</span>
+        <span>隧道总长度: {{ tunnelLength }}米</span>
+        <span>当前施工长度: {{ constructionLength }}米</span>
       </div>
       <div class="top-right">
         <div class="current-site">
@@ -16,8 +16,8 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                    item.label
-                  }}
+                  item.label
+                }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -32,24 +32,24 @@
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
-    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene>
+    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
+        :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-                  :transducer-data="largeScreenData"/>
+          :transducer-data="largeScreenData" />
         <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
+        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
+        :close-on-click-modal="false" :close-on-press-escape="false">
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -76,14 +76,15 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import {dateFormat} from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
-import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
-import {ElMessageBox} from "element-plus";
-import {getUserInfo} from "@/api/login";
-import {initSceneData} from "@/api/tunnelScene";
-import {getSiteDetail} from "../../api/site";
+import { dateFormat } from "@/utils/date.js";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
+import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
+import { ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";
+import { initSceneData } from "@/api/tunnelScene";
+import { getSiteDetail } from "../../api/site";
+import { nextTick, reactive } from "vue";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -128,7 +129,7 @@ const getUser = () => {
     currentUserId.value = res.data.user.userId
   })
 }
-const getDefaultSite=(siteId)=>{
+const getDefaultSite = (siteId) => {
   // console.log('siteList.value',siteList.value)
   // getSiteDetail(siteId).then((res) => {
   //   console.log('res',res)
@@ -139,22 +140,22 @@ const getOtherInfo = () => {
     if (res?.code === 1000) {
       routeList.value = res.data.routeList
       siteList.value = res.data.siteOption
-      currentSiteId.value = res.data.siteOption[res.data.siteOption.length-1].value
-      currentSite.value = res.data.siteOption[res.data.siteOption.length-1].label
-      getTunnel(res.data.siteOption[res.data.siteOption.length-1].value)
+      currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
+      currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
+      getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
     }
   });
 };
 const getScreenInfo = (id) => {
-  tunnelId.value=id
+  tunnelId.value = id
   getLargeScreen(id).then((res) => {
     if (res?.code === 1000) {
       largeScreenData.value = res.data;
     }
   });
   initSceneData(id).then((res) => {
-    tunnelLength.value=res.data.tunnelLength
-    constructionLength.value=res.data.constructionLength
+    tunnelLength.value = res.data.tunnelLength
+    constructionLength.value = res.data.constructionLength
   })
 };
 //根据站点id获取隧道信息
@@ -181,9 +182,9 @@ const changeTunnel = (e) => {
 const manageSelect = (index) => {
   console.log("首页点击-", index);
   if (index === 0) {
-    router.push("/site"+'/'+currentUserId.value);
+    router.push("/site" + '/' + currentUserId.value);
   } else if (index === 1) {
-    router.push("/tunnel/" + currentSiteId.value+'/i'+'/'+currentUserId.value);
+    router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
   } else if (index === 2) {
     router.push("/user/" + currentSiteId.value);
   }
@@ -259,6 +260,15 @@ const closeSocket = () => {
   socket.close();
 };
 initWebSocket();
+
+
+watch(
+  () => tunnelId.value,
+  (now) => {
+    tunnelId.value = now
+  },
+  { deep: true }
+)
 </script>
 <style lang="scss">
 .el-dropdown__popper.el-popper {

From a540c433fd4201b7ce029f063653d3efb710786e Mon Sep 17 00:00:00 2001
From: Hcat <2768237203@qq.com>
Date: Fri, 29 Dec 2023 21:30:47 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=A8=A1=E5=BC=8F+?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=9A=A7=E9=81=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tunnel/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index ec9b912..287f17e 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -33,7 +33,7 @@
       </div>
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
-    <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
+    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"

From 3e14bf1ca5228109de80777f738934832e12da79 Mon Sep 17 00:00:00 2001
From: Hcat <2768237203@qq.com>
Date: Fri, 29 Dec 2023 21:40:54 +0800
Subject: [PATCH 5/5] 2

---
 src/views/tunnel/index.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 287f17e..08b0161 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -34,6 +34,8 @@
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
+    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
+
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"