解决隧道仿真数据在隧道中没有渲染问题

2024-12-29 14:50:59 +08:00
parent 833318dceb
commit aefdd23925
5 changed files with 378 additions and 288 deletions
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -315,7 +315,7 @@ async function handleMounted() {
  demo.isedit = params.isedit;
  let tunnelasync = await demo.loadModel(
    GLTFLoader,
-    "/tunnelModel/chanel-have-wall-now-use.gltf"
+    "/tunnelModel/chanel-have-wall-now-use.gltf",
  );
  demo.addOrbitControls(OrbitControls);
  demo.addTween(TWEEN);
--- a/src/components/content/tunnelScene/TunnelSceneSimulate.vue
+++ b/src/components/content/tunnelScene/TunnelSceneSimulate.vue
@@ -53,21 +53,24 @@ import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
 import * as TWEEN from "three/examples/jsm/libs/tween.module";
 import {
  CSS3DRenderer,
-  CSS3DObject,
  CSS3DSprite,
 } from "three/addons/renderers/CSS3DRenderer.js";
 // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
-import {
-  CSS2DRenderer,
-  CSS2DObject,
-} from "three/addons/renderers/CSS2DRenderer.js";

 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
-import {onMounted, reactive, ref, toRaw, watch} from "vue";
+import {
+  onMounted,
+  reactive,
+  ref,
+  toRaw,
+  watch,
+  defineProps,
+  defineExpose,
+} from "vue";
 import { ElMessage } from "element-plus";
 import { useModelSceneStore } from "@/store/modelSceneStore";
-import {LOD} from "three";
+import { getScreenSimulateTunnel } from "@/api/tunnelManage";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -85,6 +88,7 @@ const params = defineProps([
  "form",
  "deviceData",
  "devRealtimeData",
+  "simulateData",
 ]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理

 let isedit = ref(params.isedit);
@@ -110,12 +114,12 @@ async function handleMounted() {
  const doms = [info.value.$el, edit.value.$el];
  demo = new ThreeDScene(three, content.value);
  //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
-  demo.isedit = params.isedit;
  // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
+  demo.isedit =false;
  const loaded = await demo.loadModel(
    GLTFLoader,
    "/tunnelModel/chanel-have-wall-now-use.gltf",
-      true
+    true,
  );
  demo.addOrbitControls(OrbitControls, true);
  demo.addTween(TWEEN);
@@ -153,28 +157,101 @@ async function handleMounted() {
    // console.log('parmas',newModelList)
    modelList.value = [
      {
-        "typeKey": "frequency",
-        "position": "point_001_tr",
-        "threshold": "",
-        "equipmentId": 3048,
-        "equipmentName": "温度传感器",
-        "equipmentType": "sensor"
-      }, {
-        "typeKey": "temperature",
-        "position": "point_020_tr",
-        "threshold": "",
-        "equipmentId": 10,
-        "equipmentName": "1度传感器",
-        "equipmentType": "sensor"
+        typeKey: "frequency",
+        position: "point_001_tr",
+        threshold: "",
+        equipmentId: 3048,
+        equipmentName: "温度传感器",
+        equipmentType: "sensor",
+        data: 100, //实时数据
+        unit: "℃", //单位
+      },
+      {
+        typeKey: "temperature",
+        position: "point_020_tr",
+        threshold: "",
+        equipmentId: 10,
+        equipmentName: "1度传感器",
+        equipmentType: "sensor",
+        data: 10, //实时参数
+        unit: "%", //单位
+      },
+    ];
+
+    // 初始化仿真參數
+    const { data } = await getScreenSimulateTunnel(params.tunnelId);
+    const modeData = randomPosition([
+      ...data.frequencyChangerList,
+      ...data.windPressureSensorList,
+      ...data.sensorList,
+    ]).map((item) => ({
+      ...item,
+      equipmentType: item.equipmentType.startsWith("frequency")
+        ? "frequency"
+        : "sensor",
+    }));
+    demo.editTunnelInit(modeData);
+    // 初始化标牌信息
+    demo.SignsInf("dsadsa", String(params.tunnelLength));
+  } catch (err) {}
 }
-    ]
-    // modelList.value = await initData(params.tunnelId, params.form);
-    // console.log("test", modelList.value);
-    demo.editTunnelInit(toRaw(modelList.value));
+
+// 从新渲染数据
+async function rerender() {
+  try {
+    // 初始化仿真參數
+    const { data } = await getScreenSimulateTunnel(params.tunnelId);
+    console.log(data);
+    const modeData = randomPosition([
+      ...data.frequencyChangerList,
+      ...data.windPressureSensorList,
+      ...data.sensorList,
+    ]).map((item) => ({
+      ...item,
+      equipmentType: item.equipmentType.startsWith("frequency")
+        ? "frequency"
+        : "sensor",
+    }));
+    demo.editTunnelInit(modeData);
    demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
-  } catch (err) {
+  } catch (error) {
+    ElMessage({
+      message: "获取仿真数据异常！",
+      type: "warning",
+    });
  }
 }
+// 随机生成1-20的随机数
+function randomNum(max = 20) {
+  const nums = new Set();
+  while (nums.size < max) {
+    nums.add(Math.floor(Math.random() * max + 1).toString());
+  }
+  return [...nums];
+}
+//随机定位
+function randomPosition(simulateData) {
+  const mid = Math.floor(simulateData.length / 2);
+  const lrIndex = Math.floor(Math.random() * 2);
+  const lr_position = ["tl", "tr"];
+  const leftPosition = randomNum();
+  const rightPosition = randomNum();
+  const leftData = simulateData.slice(0, mid).map((item, index) => ({
+    ...item,
+    position: `point_0${leftPosition[index].padStart(2, 0)}_${
+      lr_position[lrIndex]
+    }`,
+  }));
+  const rightData = simulateData
+    .slice(mid, simulateData.length)
+    .map((item, index) => ({
+      ...item,
+      position: `point_0${rightPosition[index].padStart(2, 0)}_${
+        lr_position[1 - lrIndex]
+      }`,
+    }));
+  return [...leftData, ...rightData];
+}

 // 每个模型加载回调
 function loadModel(path) {
@@ -184,8 +261,7 @@ function loadModel(path) {
      (obj) => {
        resolve(obj);
      },
-        (xhr) => {
-        },
+      (xhr) => {},
      (err) => {
        reject(err);
      }
@@ -351,6 +427,9 @@ const ThreeConfig = {
 watch(params.devRealtimeData, () => {
  // console.log("devRealtimeData：", params.devRealtimeData);
 });
+defineExpose({
+  rerender,
+});
 </script>

 <style lang="scss" scoped>
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
@@ -34,7 +34,7 @@ function addEquipment(targetPoint, formInfo, fanData) {
 }

 //判断墙是否已经存在，如果存在的话，就不管，添加则无效嘛(就是说只能添加一面墙，如果存在一面墙，则不管了)
-let hasWall = false
+let hasWall = false;
 let wallHang = 0;

 // function handleValveEqu(targetPoint, equipmentInfo) {
@@ -49,7 +49,8 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
  equMesh.position.copy(worldP);

  //设备添加标签
-  const tag = EquipmentTag(equipmentInfo.equipmentName);
+  const param = `${equipmentInfo.data || "--"} ${equipmentInfo.unit || "-"}`; //渲染设备参数(data)和单位（unit）
+  const tag = EquipmentTag(equipmentInfo.equipmentName,param);
  equMesh.getObjectByName("tag").material = tag;
  if (/tr$/.test(targetPoint.name)) {
    equMesh.rotation.z = -Math.PI / 2;
@@ -195,11 +196,10 @@ function handleFanEqu(
    if (item.isMesh) {
      item.material = item.material.clone();
    }
-  })
+  });
  // equMesh.geometry = this.equMap.get("equ_fan").geometry.clone();
  // console.log(equMesh);

-
  const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
  equMesh.position.copy(worldP);
  equMesh.translateY(-0.6);
@@ -213,15 +213,13 @@ function handleFanEqu(
    ...equipmentInfo,
  };
  //我们把风机的附着点挂在原型上，这样应该可以进行处理
-  if (targetPoint.info.equipmentName.slice(0, 1) == '1') {
-    this.scene.Fan1targetPoint = targetPoint
+  if (targetPoint.info.equipmentName.slice(0, 1) == "1") {
+    this.scene.Fan1targetPoint = targetPoint;
  } else {
-    this.scene.Fan2targetPoint = targetPoint
+    this.scene.Fan2targetPoint = targetPoint;
  }
  //这里感觉情况改变风机的颜色
-  changeFanColor(fanData, targetPoint, this.scene)
-
-
+  changeFanColor(fanData, targetPoint, this.scene);

  // 定义风机旋转
  const fanLeaf = equMesh.getObjectByName("fan_leafs");
@@ -240,7 +238,6 @@ function removeEquipment(targetPoint) {
  //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
  if (!targetPoint.hasDevice) return;

-
  //删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？
  //如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用

@@ -286,8 +283,6 @@ function removeEquipment(targetPoint) {
  // }
  // deleteItem(Allhang, Number(lineIndex))

-
-
  console.log("测试是不是删除了");
  const mesh = this.scene.getObjectById(targetPoint.info.id);
  this.scene.remove(mesh);
@@ -298,13 +293,12 @@ function removeEquipment(targetPoint) {
 }
 export { addEquipment, removeEquipment };

-
 function deleteItem(array, item) {
  let index = array.indexOf(item);
  if (index !== -1) {
    array.splice(index, 1);
  }
-  return array
+  return array;
 }

 // 这里是改变风机颜色的代码
@@ -315,7 +309,7 @@ function changeFanColor(fanData, targetPoint, scene) {
      //if保证存在风机（即有长度再进行遍历）
      for (let i = 0; i < fanData.length; i++) {
        //先做匹配操作
-        let fanType = fanData[i].equipmentType
+        let fanType = fanData[i].equipmentType;
        //有符合条件的风机进来了
        if (targetPoint.info.typeKey == fanType) {
          //下面进行变色需要的逻辑判断了
@@ -327,9 +321,9 @@ function changeFanColor(fanData, targetPoint, scene) {
                  // console.log(obj);
                  // 判断子对象是否是物体，如果是，更改其颜色
                  if (obj.isMesh) {
-                    obj.material.color.set(0xFF0000)
+                    obj.material.color.set(0xff0000);
                  }
-                })
+                });
              }
            });
          } else {
@@ -342,9 +336,9 @@ function changeFanColor(fanData, targetPoint, scene) {
                    // console.log(obj);
                    // 判断子对象是否是物体，如果是，更改其颜色
                    if (obj.isMesh) {
-                      obj.material.color.set(0x008000)
+                      obj.material.color.set(0x008000);
                    }
-                  })
+                  });
                }
              });
            } else {
--- a/src/views/tunnel-simulate/index.vue
+++ b/src/views/tunnel-simulate/index.vue
@@ -6,7 +6,8 @@
      <div class="top-length">
        <span>隧道总长度: {{ tunnelLength }}米</span>
        <span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
-        >开始模拟</span>
+          >开始模拟</span
+        >
        <div v-else>
          <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
          <span class="all-btn" @click="endSimulate">结束模拟</span>
@@ -34,9 +35,19 @@
        </div>
      </div>
    </div>
-    <device-manage v-if="showDevice" @cancel="cancelDeviceManage" @submit="submitDevice"/>
+    <device-manage
+      v-if="showDevice"
+      @cancel="cancelDeviceManage"
+      @submit="submitDevice"
+    />
    <!--    模拟隧道模式-->
-    <preview-scene-simulate id="tunnel-box" :isedit="false" :device-data="largeScreenData" :tunnelLength="100"></preview-scene-simulate>
+    <preview-scene-simulate
+      id="tunnel-box"
+      :isedit="false"
+      :device-data="largeScreenData"
+      :tunnelLength="100"
+      :tunnelId="tunnelId"
+    ></preview-scene-simulate>
    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
    <!--    <preview-scene-->
    <!--        id="tunnel-box"-->
@@ -277,12 +288,18 @@ import {
  getAlarmInfo,
  deleteAlarmSate,
  getAlarmDetail,
-  updateAlarmState, endSimulation, blastingSimulation,
+  updateAlarmState,
+  endSimulation,
+  blastingSimulation,
 } from "@/api/largeScreen";
 import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
 import { getUserInfo } from "@/api/login";
 import { initSceneData } from "@/api/tunnelScene";
-import {getScreenSimulateTunnel, getSimulateTunnelDetail, getTunnelList} from "@/api/tunnelManage";
+import {
+  getScreenSimulateTunnel,
+  getSimulateTunnelDetail,
+  getTunnelList,
+} from "@/api/tunnelManage";
 import { debounce } from "lodash";

 const authStore = useAuthStore();
@@ -382,9 +399,9 @@ const queryParams = reactive({
 onMounted(() => {
  getUser();
  // getOtherInfo();
-  getScreenInfo(previewId)
+  getScreenInfo(previewId);

-  getBasicData(previewId)
+  getBasicData(previewId);
  nextTick(() => {
    showFan.value = true;
  });
@@ -400,15 +417,15 @@ const cancelDeviceManage = () => {
 const submitDevice = () => {
  isStartSimulate.value = false;
  showDevice.value = false;
-  getScreenInfo(previewId)
+  getScreenInfo(previewId);
  // initWebSocket()
 };
 const simulatedBlasting = async () => {
-  await blastingSimulation(previewId,10)
+  await blastingSimulation(previewId, 10);
 };
 const endSimulate = async () => {
  isStartSimulate.value = true;
-  await endSimulation(previewId)
+  await endSimulation(previewId);
 };
 const changeName = (id) => {
  for (let item of equipmentOption.value) {
@@ -540,12 +557,12 @@ const getBasicData = (id) => {
      tunnelLength.value = res.data.totalLength;
      serialNumber.value = res.data.serialNumber;
      constructionLength.value = res.data.constructionLength;
-      initWebSocket()
+      initWebSocket();
    } else {
      ElMessage.warning(res.msg);
    }
-  })
-}
+  });
+};

 const getScreenInfo = (id) => {
  if (id) {
@@ -590,7 +607,7 @@ const getScreenInfo = (id) => {
          showBadLoading.value = 1;
        }
        largeScreenData.value = res.data;
-        console.log('largeScreenData.value', largeScreenData.value)
+        console.log("largeScreenData.value", largeScreenData.value);
      } else {
        ElMessage.warning(res.msg);
      }
@@ -631,7 +648,7 @@ const getTunnel = (id) => {
      }
    }
  });
-}
+};
 const closeLeft = () => {
  drawerLeft.value = !drawerLeft.value;
 };
@@ -650,7 +667,7 @@ const handleLogout = () => {
 };

 const initWebSocket = () => {
-  let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`
+  let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`;
  // let wsUrl = `ws://tunnel.feashow.com/api/websocket/simulate/${token}/${serialNumber.value}`;
  // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
  // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
--- a/vite.config.js
+++ b/vite.config.js
@@ -74,7 +74,7 @@ export default defineConfig({
      //   rewrite: (path) => path.replace(/^\/api/, ''),
      // },
      '/api': {
-        target: 'http://web-tunnel.feashow.com/api',
+        target: 'http://frp.toomewhy.top:38000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },