trp:隧道场景仿真修改完成，待接口调试

src/components/content/tunnelScene/TunnelSceneSimulate.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="scene">
     <div id="cvs" ref="content"></div>
-    <dev-info ref="info" :devInfo="devInfo" />
     <!-- 这里的预览模式需要做成不能修改的模式 -->
     <edit-dialog
       ref="edit"
@@ -16,27 +15,15 @@
       :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>
-        <button @click="handleConfirmAddEqu">确定</button>
-      </div>
-    </el-dialog>
+    <pre-dialog
+      ref="info"
+      :pointNum="50"
+      :pointGap="50"
+      :equipmentType="equipmentType"
+      :equipmentName="equipmentName"
+      :equipmentValue="50"
+      :devRealtimeDetail="devRealtimeDetail"
+    />
   </div>
 </template>
 
@@ -45,16 +32,16 @@ import * as three from "three";
 import ThreeDScene from "./sceneClass/demo.js";
 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 { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import * as TWEEN from "three/examples/jsm/libs/tween.module";
 import {
-  CSS3DRenderer,
-  CSS3DSprite,
-} from "three/addons/renderers/CSS3DRenderer.js";
+  CSS2DRenderer,
+  CSS2DObject,
+} from "three/addons/renderers/CSS2DRenderer.js";
 // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
 
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
@@ -63,13 +50,11 @@ import {
   onMounted,
   reactive,
   ref,
-  toRaw,
   watch,
   defineProps,
   defineExpose,
 } from "vue";
 import { ElMessage } from "element-plus";
-import { useModelSceneStore } from "@/store/modelSceneStore";
 import { getScreenSimulateTunnel } from "@/api/tunnelManage";
 // 获取html标签跟随组件dom
 const content = ref(null);
@@ -80,7 +65,6 @@ let demo; //定义demo对象
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
-const modelStore = useModelSceneStore();
 const params = defineProps([
   "isedit",
   "tunnelId",
@@ -89,41 +73,43 @@ const params = defineProps([
   "deviceData",
   "devRealtimeData",
   "simulateData",
-]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+]);
 
-let isedit = ref(params.isedit);
-let tunnelId = reactive(params.tunnelId);
+// hover到设备回显参数
+let equipmentName = ref("");
+let equipmentType = ref("");
+let devRealtimeDetail = ref({
+  equipmentType: "",
+  value: "",
+  unit: "",
+});
 
 watch(
   () => params.tunnelLength,
   (now) => {
     params.tunnelLength = now;
-    // console.log(params.tunnelLength);
     pointGap = now / 20;
-    // console.log(params.form.tunnelName);
   },
   { deep: true }
 );
 
 let pointGap = reactive(params.tunnelLength);
-
 onMounted(handleMounted);
 
 // 挂载后回调
 async function handleMounted() {
-  const doms = [info.value.$el, edit.value.$el];
+  const doms = [info.value.$el, info.value.$el];
   demo = new ThreeDScene(three, content.value);
   //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
   // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
-  demo.isedit =false;
+  demo.isedit = false;
   const loaded = await demo.loadModel(
     GLTFLoader,
-    "/tunnelModel/chanel-have-wall-now-use.gltf",
-    true,
+    "/tunnelModel/chanel-have-wall-now-use.gltf"
   );
   demo.addOrbitControls(OrbitControls, true);
   demo.addTween(TWEEN);
-  demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
+  demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
   demo.setDistance(10);
   lClickCallback(demo); //绑定左键回调
   rClickCallback(demo); //绑定右键回调
@@ -137,24 +123,7 @@ async function handleMounted() {
     map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
     map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
     demo.initDevicesModel(map);
-    // 初始化渲染设备
-    // modelList.value = await modelStore.initModelData(
-    //   params.tunnelId,
-    //   params.form
-    // );
-    //todo 父组件传的设备数据params.deviceData
-    // const newModelList=[...params.deviceData.frequencyChangerList,...params.deviceData.windPressureSensorList, ...params.deviceData.sensorList]
-    // newModelList.map((item,index1)=>{
-    //   const index=index1+1
-    //   item.threshold=""
-    //   if(index<newModelList.length/2){
-    //     item.position="point_0"+(index<10?"0"+index:index)+"_tr"
-    //   }else{
-    //     item.position="point_0"+(index<10?"0"+index:index)+"_tl"
-    //   }
-    // })
-    //
-    // console.log('parmas',newModelList)
+
     modelList.value = [
       {
         typeKey: "frequency",
@@ -180,25 +149,14 @@ async function handleMounted() {
 
     // 初始化仿真參數
     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.enableLeftBtn = false //关闭左键
-    demo.pointsVisible(false);
-    demo.editTunnelInit(modeData);
+    demo.enableLeftBtn = false; //关闭左键
+    demo.pointsVisible(false); //隐藏附着点
+    TunnelSceneSimulateRender(data);
     // 初始化标牌信息
-    demo.SignsInf("dsadsa", String(params.tunnelLength));
+    renderRoadPlane({ nickname: "隧道名称", length: 10000 });
   } catch (err) {}
 }
 
-
 // 从新渲染数据
 async function rerender() {
   try {
@@ -297,8 +255,6 @@ function editDevInfo(
 
 //左键/双击左键回调函数
 function lClickCallback(demo) {
-  console.log('左键点击查看信息');
-
   // demo动态添加函数，为操作组件内部
   function displayDevInfo(targetPoint = null) {
     hasDevice.value = targetPoint.hasDevice;
@@ -308,7 +264,6 @@ function lClickCallback(demo) {
     }
     editDevInfo(targetPoint.info);
   }
-
   // 传给内部使用
   demo.addFunction("displayDevInfo", displayDevInfo);
 }
@@ -328,27 +283,24 @@ function rClickCallback(demo) {
       ) - 1
     );
     if (!targetPoint.info) return;
+    hoverDevEquipmentCallback(targetPoint.info);
     editDevInfo(targetPoint.info);
   }
 
   demo.addFunction("editDev", editDev);
 }
 
-// function streetSigns(){
-
-// }
-
 // 场景添加设备
 function handleAddEqu(formInfo) {
   demo.addEquipment(targetP.value, formInfo);
   // //将墙壁设置为可以穿透点击
   for (let line = 1; line <= 20; line++) {
     if (line < 10) {
-      let wall = 'wall_' + '0' + line
-      this.scene.getObjectByName(wall).layers.set(0)
+      let wall = "wall_" + "0" + line;
+      this.scene.getObjectByName(wall).layers.set(0);
     } else if (line >= 10) {
-      let wall = 'wall_' + line
-      this.scene.getObjectByName(wall).layers.set(0)
+      let wall = "wall_" + line;
+      this.scene.getObjectByName(wall).layers.set(0);
     }
   }
 }
@@ -367,29 +319,6 @@ function handleRemoveEqu() {
   centerDialogVisible.value = true;
 }
 
-// 对话框确认删除
-function handleConfirmAddEqu() {
-  console.log("target:", targetP.value.info);
-  modelStore
-    .deleteEquipment(targetP.value.info.equipmentId, pointGap)
-    .then((res) => {
-      demo.removeEquipment(targetP.value);
-      centerDialogVisible.value = false;
-      handleCancel();
-      ElMessage({
-        message: "删除成功！",
-        type: "success",
-      });
-    })
-    .catch((res) => {
-      console.log(res);
-      ElMessage({
-        message: "删除失败！",
-        type: "warning",
-      });
-    });
-}
-
 // 处理取消关闭编辑框事件
 function handleCancel() {
   if (!demo) return;
@@ -425,11 +354,55 @@ const ThreeConfig = {
   },
   msg: "dda",
 };
+//=============隧模型道数据仿真====================
+/**
+ * @description: 隧道中的设备重新模拟渲染
+ * @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}]
+ */
+function TunnelSceneSimulateRender(data) {
+  if (!demo) return;
+  const modeData = randomPosition([
+    ...data.frequencyChangerList,
+    ...data.windPressureSensorList,
+    ...data.sensorList,
+  ]).map((item) => ({
+    ...item,
+    equipmentType: item.equipmentType.startsWith("frequency")
+      ? "frequency"
+      : "sensor",
+  }));
+  demo.editTunnelInit(modeData); //渲染设备数据
+}
+/**
+ * @description: 鼠标悬浮在设备上时回调函数
+ */
+function hoverDevEquipmentCallback(targetPointInfo) {
+  console.log(targetPointInfo); //当前附着点信息
+  const {
+    equipmentId,
+    equipmentName: eName,
+    equipmentType: eType,
+    typeKey,
+    unit: u,
+  } = targetPointInfo;
+  //请求到的实时数据进行渲染
+  //业务代码.... 获取设备实时数据(data) const value = ....
+  equipmentType.value = eType;
+  equipmentName.value = eName;
+  devRealtimeDetail.value.equipmentType =typeKey;
+  devRealtimeDetail.value.unit = u;
+  devRealtimeDetail.value.value = 1000; //1000替换为value
+}
+/**
+ * @description: 渲染隧道入口提示板信息
+ * @param {Object} data 隧道信息 {nickname,length}
+ */
+function renderRoadPlane(data) {
+  if (!demo) return;
+  const { nickname, length } = data; //隧道名称，长度
+  demo.SignsInf(nickname, length + "");
+}
 
-//=================实时更新数据
-watch(params.devRealtimeData, () => {
-  // console.log("devRealtimeData：", params.devRealtimeData);
-});
 defineExpose({
   rerender,
 });