合并

src/components/content/tunnelScene/TunnelScene.vue

@@ -4,7 +4,8 @@
     <dev-info ref="info" :devInfo="devInfo" />
     <!-- 这里的预览模式需要做成不能修改的模式 -->
     <edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
-      :hasDev="hasDevice" :pointNum="pointNum" pointGap="500" />
+      :hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice"
+      pointGap="500" />
     <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
         margin: 20% auto;
         width: 569px;
@@ -48,22 +49,22 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
+import { useModelSceneStore } from "@/store/modelSceneStore";
+
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
-let demo; //定义demo全局变量
-// const loader = new OBJLoader();
+const store = useModelSceneStore();
+
+let demo; //定义demo对象
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 
-const params = defineProps(["isedit"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
-
-// alert(params.isedit)
-
-let isedit = ref(params.isedit)
+const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
+let isedit = ref(params.isedit);
 
 onMounted(handleMounted);
 // 挂载后回调
@@ -72,7 +73,11 @@ async function handleMounted() {
   demo = new ThreeDScene(three, content.value);
   //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
   demo.isedit = params.isedit;
-  let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf");
+
+  const loaded = await demo.loadModel(
+    GLTFLoader,
+    "./assets/tunnelModel/chanel.gltf"
+  );
   demo.addOrbitControls(OrbitControls);
   demo.addTween(TWEEN);
   demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
@@ -82,19 +87,21 @@ async function handleMounted() {
 
   //加载HDR背景图片
   demo.loadBackground(hdrLoader, backColorSet);
-
+  const text = await store.initData();
   // 初始化设备模型
   try {
     const map = new Map();
     map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
     map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
-
-    // 给对象初加载设备模型
     demo.initDevicesModel(map);
-    await Promise.all([map.get("equ_fan"), map.get("equ_sensors")]);
-    // demo.tunnelModeInit()
+    // 初始化
+    const equipmentList = await store.getEquipmentList();
+    demo.editTunnelInit(equipmentList);
   } catch (err) {
-    console.log(err);
+    ElMessage({
+      message: "场景加载异常！",
+      type: "warning",
+    });
   }
 }
 
@@ -148,54 +155,39 @@ function lClickCallback(demo) {
     }
     editDevInfo(targetPoint.info);
   }
+
   // 传给内部使用
   demo.addFunction("displayDevInfo", displayDevInfo);
 }
 
 let pointNum = ref(0);
-let targetP;
+let targetP = ref({});
 // 右键点击附着点后调函数
 function rClickCallback(demo) {
   function editDev(targetPoint = null) {
-    hasDevice = targetPoint.hasDevice;
-    targetP = targetPoint;
+    hasDevice.value = targetPoint.hasDevice;
+    targetP.value = targetPoint;
     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);
 // 删除设备
 function handleRemoveEqu() {
-  if (!targetP.hasDevice) {
+  if (!targetP.value.hasDevice) {
     ElMessage({
       message: "该点位不存在设备！",
       type: "warning",
@@ -206,12 +198,23 @@ function handleRemoveEqu() {
 }
 // 对话框确认删除
 function handleConfirmAddEqu() {
-  demo.removeEquipment(targetP);
-  centerDialogVisible.value = false;
-  ElMessage({
-    message: "删除成功！",
-    type: "success",
-  });
+  console.log("target:", targetP.value.info);
+  store
+    .deleteEquipment(10000, params.tunnelId, targetP.value.info.equipmentId)
+    .then((res) => {
+      demo.removeEquipment(targetP.value);
+      centerDialogVisible.value = false;
+      ElMessage({
+        message: "删除成功！",
+        type: "success",
+      });
+    })
+    .catch((err) => {
+      ElMessage({
+        message: "请求异常！",
+        type: "warning",
+      });
+    });
 }
 // 处理取消关闭编辑框事件
 function handleCancel() {
@@ -221,8 +224,32 @@ function handleCancel() {
   demo._resetState();
   demo.clearTagsObj();
 }
-
-
+//现在首先有二种方案，是写在TunnelScene.vue中还是demo.js中呢？
+//我认为可能看数据在哪获取？到时候看在哪里导入，首先我们放在TunnelScene里面吧
+//因为没获取到接口，我们先写死！！！
+//需要参考接口的数据结构！！！，主要是传入函数的参数应该是什么结构？？？
+const ThreeConfig = {
+  code: 0,
+  data: {
+    tunnelThreeConfig: [
+      {
+        equipmentId: "fan_01", //传感器id
+        equipmentName: "01", //设备名称
+        pointName: "point_005_tl", //附着点名称(定位)
+        equipmentType: "fan", //设备类型(类型可根据后端
+        equipmentValue: 23, //设备存的值
+      },
+      {
+        equipmentId: "sensors_01", //传感器id
+        equipmentName: "01", //设备名称
+        pointName: "point_009_bl", //附着点名称(定位)
+        equipmentType: "sensors", //设备类型(类型可根据后端
+        equipmentValue: 67, //设备存的值
+      },
+    ],
+  },
+  msg: "dda",
+};
 </script>
 
 <style lang="scss" scoped>