fix : 隧道模拟功能初步完成

2025-01-03 20:39:42 +08:00
parent 16df648f2b
commit 472bc3cb83
3 changed files with 98 additions and 80 deletions
--- a/src/components/content/tunnelScene/TunnelSceneSimulate.vue
+++ b/src/components/content/tunnelScene/TunnelSceneSimulate.vue
@@ -3,26 +3,26 @@
    <div id="cvs" ref="content"></div>
    <!-- 这里的预览模式需要做成不能修改的模式 -->
    <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"
+        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"
    />
    <pre-dialog
-      ref="info"
-      :pointNum="50"
-      :pointGap="50"
-      :equipmentType="equipmentType"
-      :equipmentName="equipmentName"
-      :equipmentValue="50"
-      :devRealtimeDetail="devRealtimeDetail"
+        ref="info"
+        :pointNum="50"
+        :pointGap="50"
+        :equipmentType="equipmentType"
+        :equipmentName="equipmentName"
+        :equipmentValue="50"
+        :devRealtimeDetail="devRealtimeDetail"
    />
  </div>
 </template>
@@ -34,9 +34,9 @@ import DevInfo from "./displayInfoComp/DevInfo.vue";
 import EditDialog from "./editEquComp/editDialog.vue";
 import PreDialog from "./preEquComp/preDialog.vue";
 // 导入模模型加载器
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
 // import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
 import * as TWEEN from "three/examples/jsm/libs/tween.module";
 import {
  CSS2DRenderer,
@@ -44,8 +44,8 @@ import {
 } from "three/addons/renderers/CSS2DRenderer.js";
 // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject

-import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
-import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader";
+import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader";
 import {
  onMounted,
  reactive,
@@ -54,12 +54,13 @@ import {
  defineProps,
  defineExpose,
 } from "vue";
-import { ElMessage } from "element-plus";
-import { getScreenSimulateTunnel } from "@/api/tunnelManage";
+import {ElMessage} from "element-plus";
+import {getScreenSimulateTunnel} from "@/api/tunnelManage";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
 const edit = ref(null);
+const realtimeData = ref([]);
 let modelList = ref(null);
 let demo; //定义demo对象
 const loader = new OBJLoader();
@@ -79,6 +80,7 @@ const params = defineProps([
 // hover到设备回显参数
 let equipmentName = ref("");
 let equipmentType = ref("");
+let pointValue = ref({});
 let devRealtimeDetail = ref({
  equipmentType: "",
  value: "",
@@ -86,12 +88,12 @@ let devRealtimeDetail = ref({
 });

 watch(
-  () => params.tunnelLength,
-  (now) => {
-    params.tunnelLength = now;
-    pointGap = now / 20;
-  },
-  { deep: true }
+    () => params.tunnelLength,
+    (now) => {
+      params.tunnelLength = now;
+      pointGap = now / 20;
+    },
+    {deep: true}
 );

 let pointGap = reactive(params.tunnelLength);
@@ -105,8 +107,8 @@ async function handleMounted() {
  // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
  demo.isedit = false;
  const loaded = await demo.loadModel(
-    GLTFLoader,
-    "/tunnelModel/chanel-have-wall-now-use.gltf"
+      GLTFLoader,
+      "/tunnelModel/chanel-have-wall-now-use.gltf"
  );
  demo.addOrbitControls(OrbitControls, true);
  demo.addTween(TWEEN);
@@ -149,20 +151,21 @@ async function handleMounted() {
    ];

    // 初始化仿真參數
-    const { data } = await getScreenSimulateTunnel(params.tunnelId);
+    const {data} = await getScreenSimulateTunnel(params.tunnelId);
    demo.enableLeftBtn = false; //关闭左键
    demo.pointsVisible(false); //隐藏附着点
    TunnelSceneSimulateRender(data);
    // 初始化标牌信息
-    renderRoadPlane({ nickname: params.tunnelAlias, length: params.tunnelLength });
-  } catch (err) {}
+    renderRoadPlane({nickname: params.tunnelAlias, length: params.tunnelLength});
+  } catch (err) {
+  }
 }

 // 从新渲染数据
 async function rerender() {
  try {
    // 初始化仿真參數
-    const { data } = await getScreenSimulateTunnel(params.tunnelId);
+    const {data} = await getScreenSimulateTunnel(params.tunnelId);
    console.log(data);
    const modeData = randomPosition([
      ...data.frequencyChangerList,
@@ -171,8 +174,8 @@ async function rerender() {
    ]).map((item) => ({
      ...item,
      equipmentType: item.equipmentType.startsWith("frequency")
-        ? "frequency"
-        : "sensor",
+          ? "frequency"
+          : "sensor",
    }));
    demo.editTunnelInit(modeData);
    demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
@@ -183,6 +186,7 @@ async function rerender() {
    });
  }
 }
+
 // 随机生成1-20的随机数
 function randomNum(max = 20) {
  const nums = new Set();
@@ -191,6 +195,7 @@ function randomNum(max = 20) {
  }
  return [...nums];
 }
+
 //随机定位
 function randomPosition(simulateData) {
  const mid = Math.floor(simulateData.length / 2);
@@ -201,17 +206,17 @@ function randomPosition(simulateData) {
  const leftData = simulateData.slice(0, mid).map((item, index) => ({
    ...item,
    position: `point_0${leftPosition[index].padStart(2, 0)}_${
-      lr_position[lrIndex]
+        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]
-      }`,
-    }));
+      .slice(mid, simulateData.length)
+      .map((item, index) => ({
+        ...item,
+        position: `point_0${rightPosition[index].padStart(2, 0)}_${
+            lr_position[1 - lrIndex]
+        }`,
+      }));
  return [...leftData, ...rightData];
 }

@@ -219,14 +224,15 @@ function randomPosition(simulateData) {
 function loadModel(path) {
  return new Promise((resolve, reject) => {
    loader.load(
-      path,
-      (obj) => {
-        resolve(obj);
-      },
-      (xhr) => {},
-      (err) => {
-        reject(err);
-      }
+        path,
+        (obj) => {
+          resolve(obj);
+        },
+        (xhr) => {
+        },
+        (err) => {
+          reject(err);
+        }
    );
  });
 }
@@ -241,12 +247,12 @@ let devInfo = reactive({

 // 对象建构赋值功能
 function editDevInfo(
-  value = {
-    meshId: null,
-    name: "无",
-    state: "无",
-    position: "无",
-  }
+    value = {
+      meshId: null,
+      name: "无",
+      state: "无",
+      position: "无",
+    }
 ) {
  devInfo.meshId = value.meshId;
  devInfo.name = value.name;
@@ -265,6 +271,7 @@ function lClickCallback(demo) {
    }
    editDevInfo(targetPoint.info);
  }
+
  // 传给内部使用
  demo.addFunction("displayDevInfo", displayDevInfo);
 }
@@ -278,12 +285,13 @@ function rClickCallback(demo) {
    hasDevice.value = targetPoint.hasDevice;
    targetP.value = targetPoint;
    pointNum.value = Number(
-      targetPoint.name.substring(
-        targetPoint.name.indexOf("_") + 1,
-        targetPoint.name.lastIndexOf("_")
-      ) - 1
+        targetPoint.name.substring(
+            targetPoint.name.indexOf("_") + 1,
+            targetPoint.name.lastIndexOf("_")
+        ) - 1
    );
    if (!targetPoint.info) return;
+    pointValue.value = targetPoint.info
    hoverDevEquipmentCallback(targetPoint.info);
    editDevInfo(targetPoint.info);
  }
@@ -355,13 +363,13 @@ const ThreeConfig = {
  },
  msg: "dda",
 };
+
 //=============隧模型道数据仿真====================
 /**
 * @description: 隧道中的设备重新模拟渲染
 * @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}]
 */
 function TunnelSceneSimulateRender(data) {
-  console.log('TunnelSceneSimulateRender',data)
  if (!demo) return;
  const modeData = randomPosition([
    ...data.frequencyChangerList,
@@ -370,43 +378,51 @@ function TunnelSceneSimulateRender(data) {
  ]).map((item) => ({
    ...item,
    equipmentType: item.equipmentType.startsWith("frequency")
-      ? "frequency"
-      : "sensor",
+        ? "frequency"
+        : "sensor",
  }));
  demo.editTunnelInit(modeData); //渲染设备数据
 }
+
 /**
 * @description: 鼠标悬浮在设备上时回调函数
 */
 function hoverDevEquipmentCallback(targetPointInfo) {
-  console.log(targetPointInfo); //当前附着点信息
  const {
    equipmentId,
    equipmentName: eName,
    equipmentType: eType,
    typeKey,
    unit: u,
+    value
  } = targetPointInfo;
  //请求到的实时数据进行渲染
-  //业务代码.... 获取设备实时数据(data) const value = ....
+  //业务代码....获取设备实时数据
  equipmentType.value = eType;
  equipmentName.value = eName;
-  devRealtimeDetail.value.equipmentType =typeKey;
+  devRealtimeDetail.value.equipmentType = typeKey;
  devRealtimeDetail.value.unit = u;
-  devRealtimeDetail.value.value = 1000; //1000替换为value
+  devRealtimeDetail.value.value = value; //1000替换为value
 }
+
 /**
 * @description: 渲染隧道入口提示板信息
 * @param {Object} data 隧道信息 {nickname,length}
 */
 function renderRoadPlane(data) {
  if (!demo) return;
-  const { nickname, length } = data; //隧道名称，长度
+  const {nickname, length} = data; //隧道名称，长度
  demo.SignsInf(nickname, length + "");
 }

+const changePointValue = (item) => {
+  if (item.equipmentId == pointValue.value.equipmentId) {
+    pointValue.value.value = item.value
+  }
+  hoverDevEquipmentCallback(pointValue.value)
+}
 defineExpose({
-  rerender,TunnelSceneSimulateRender
+  rerender, TunnelSceneSimulateRender, changePointValue
 });
 </script>

--- a/src/components/content/usedEle/UsedEle.vue
+++ b/src/components/content/usedEle/UsedEle.vue
@@ -233,17 +233,17 @@ const changeNum = (item) => {
  }
 }
 const setValueA = () => {
-  if (electricityConsumptionMonthly.value === 0 || length.value === null) {
+  if (electricityConsumptionMonthly.value === 0 || length.value === null||electricityConsumptionMonthly.value<0) {
    valueA.value.style.height = `0px`;
  }
-  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 200000;
+  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 1000000;
  valueA.value.style.height = `${width}px`;
 }
 const setValueB = () => {
-  if (monthlySavings.value === 0 || length.value === null) {
+  if (monthlySavings.value === 0 || length.value === null||monthlySavings.value<0) {
    valueB.value.style.height = `0px`;
  }
-  let width = (monthlySavings.value * length.value?.offsetHeight) / 200000;
+  let width = (monthlySavings.value * length.value?.offsetHeight) / 1000000;
  valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
--- a/src/views/tunnel-simulate/index.vue
+++ b/src/views/tunnel-simulate/index.vue
@@ -326,8 +326,8 @@ const handleLogout = () => {
 const initWebSocket = () => {
  // let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`;
  // let wsUrl = `ws://192.168.31.175:9000/websocket/simulate/${token}/${serialNumber.value}`;
-  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`;
-  // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
+  // let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/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}`;
  // let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
  socket = new WebSocket(wsUrl);
@@ -348,7 +348,6 @@ const initWebSocket = () => {
      data.forEach((item) => {
        if (item.typeKey === "frequency") {
          socketData.leftData = data;
-          console.log(socketData.leftData);
        } else if (item.typeKey === "windPressure") {
          socketData.windPressure = data;
        } else if (item.typeKey === "sensor") {
@@ -356,6 +355,9 @@ const initWebSocket = () => {
        } else if (item.typeKey === "windSpeed") {
          socketData.windSpeed = data;
        }
+        nextTick(() => {
+          previewRef.value.changePointValue(item)
+        })
      });
    }
  };