fix : 优化隧道模拟首页的隧道预览模式

src/components/content/tunnelScene/TunnelSceneSimulate.vue

@@ -3,40 +3,40 @@
     <div id="cvs" ref="content"></div>
     <dev-info ref="info" :devInfo="devInfo" />
     <!-- 这里的预览模式需要做成不能修改的模式 -->
-<!--    <edit-dialog-->
+    <edit-dialog
-<!--      ref="edit"-->
+      ref="edit"
-<!--      @addEquipment="handleAddEqu"-->
+      @addEquipment="handleAddEqu"
-<!--      @removeEquipment="handleRemoveEqu"-->
+      @removeEquipment="handleRemoveEqu"
-<!--      @cancel="handleCancel"-->
+      @cancel="handleCancel"
-<!--      :hasDev="hasDevice"-->
+      :hasDev="hasDevice"
-<!--      :pointNum="pointNum"-->
+      :pointNum="pointNum"
-<!--      :tunnelId="params.tunnelId"-->
+      :tunnelId="params.tunnelId"
-<!--      :position="targetP?.name"-->
+      :position="targetP?.name"
-<!--      :hasEquipment="hasDevice"-->
+      :hasEquipment="hasDevice"
-<!--      :pointGap="pointGap"-->
+      :pointGap="pointGap"
-<!--      :form="params.form"-->
+      :form="params.form"
-<!--    />-->
+    />
-<!--    <el-dialog-->
+    <el-dialog
-<!--      v-model="centerDialogVisible"-->
+      v-model="centerDialogVisible"
-<!--      width="30%"-->
+      width="30%"
-<!--      destroy-on-close-->
+      destroy-on-close
-<!--      center-->
+      center
-<!--      :show-close="false"-->
+      :show-close="false"
-<!--      style="-->
+      style="
-<!--        margin: 20% auto;-->
+        margin: 20% auto;
-<!--        width: 569px;-->
+        width: 569px;
-<!--        height: 330px;-->
+        height: 330px;
-<!--        background: rgba(7, 35, 72, 0.79);-->
+        background: rgba(7, 35, 72, 0.79);
-<!--        border-radius: 20px;-->
+        border-radius: 20px;
-<!--        border: 2px solid #0f82af;-->
+        border: 2px solid #0f82af;
-<!--      "-->
+      "
-<!--    >-->
+    >
-<!--      <p id="remove-title">是否确定删除该设备</p>-->
+      <p id="remove-title">是否确定删除该设备</p>
-<!--      <div class="btn">-->
+      <div class="btn">
-<!--        <button @click="centerDialogVisible = false">取消</button>-->
+        <button @click="centerDialogVisible = false">取消</button>
-<!--        <button @click="handleConfirmAddEqu">确定</button>-->
+        <button @click="handleConfirmAddEqu">确定</button>
-<!--      </div>-->
+      </div>
-<!--    </el-dialog>-->
+    </el-dialog>
   </div>
 </template>
 
@@ -89,7 +89,6 @@ const params = defineProps([
   "deviceData",
   "devRealtimeData",
   "simulateData",
-  "tunnelAlias",
 ]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 let isedit = ref(params.isedit);
@@ -112,7 +111,7 @@ onMounted(handleMounted);
 
 // 挂载后回调
 async function handleMounted() {
-  const doms = [info.value.$el];//edit.value.$el
+  const doms = [info.value.$el, edit.value.$el];
   demo = new ThreeDScene(three, content.value);
   //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
   // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
@@ -126,8 +125,8 @@ async function handleMounted() {
   demo.addTween(TWEEN);
   demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
   demo.setDistance(10);
-  // lClickCallback(demo); //绑定左键回调
+  lClickCallback(demo); //绑定左键回调
-  // rClickCallback(demo); //绑定右键回调
+  rClickCallback(demo); //绑定右键回调
 
   //加载HDR背景图片
   demo.loadBackground(hdrLoader, backColorSet);
@@ -143,6 +142,19 @@ async function handleMounted() {
     //   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",
@@ -174,18 +186,19 @@ async function handleMounted() {
       ...data.sensorList,
     ]).map((item) => ({
       ...item,
-      data:'10',
       equipmentType: item.equipmentType.startsWith("frequency")
         ? "frequency"
         : "sensor",
     }));
-    console.log('modeData',modeData)
+    demo.enableLeftBtn = false //关闭左键
+    demo.pointsVisible(false);
     demo.editTunnelInit(modeData);
     // 初始化标牌信息
-    demo.SignsInf(params.tunnelAlias, String(params.tunnelLength));
+    demo.SignsInf("dsadsa", String(params.tunnelLength));
   } catch (err) {}
 }
 
+
 // 从新渲染数据
 async function rerender() {
   try {
@@ -284,9 +297,9 @@ function editDevInfo(
 
 //左键/双击左键回调函数
 function lClickCallback(demo) {
-  // console.log('左键点击查看信息');
+  console.log('左键点击查看信息');
 
-  //demo动态添加函数，为操作组件内部
+  // demo动态添加函数，为操作组件内部
   function displayDevInfo(targetPoint = null) {
     hasDevice.value = targetPoint.hasDevice;
     if (!targetPoint.info) {
@@ -329,15 +342,15 @@ function rClickCallback(demo) {
 function handleAddEqu(formInfo) {
   demo.addEquipment(targetP.value, formInfo);
   // //将墙壁设置为可以穿透点击
-  // for (let line = 1; line <= 20; line++) {
+  for (let line = 1; line <= 20; line++) {
-  //   if (line < 10) {
+    if (line < 10) {
-  //     let wall = 'wall_' + '0' + line
+      let wall = 'wall_' + '0' + line
-  //     this.scene.getObjectByName(wall).layers.set(0)
+      this.scene.getObjectByName(wall).layers.set(0)
-  //   } else if (line >= 10) {
+    } else if (line >= 10) {
-  //     let wall = 'wall_' + line
+      let wall = 'wall_' + line
-  //     this.scene.getObjectByName(wall).layers.set(0)
+      this.scene.getObjectByName(wall).layers.set(0)
-  //   }
+    }
-  // }
+  }
 }
 
 const centerDialogVisible = ref(false);

src/views/tunnel-simulate/index.vue

@@ -46,7 +46,7 @@
         id="tunnel-box"
         :isedit="false"
         :device-data="largeScreenData"
-        :tunnelLength="tunnelLength"
+        :tunnelLength="tunnelLen"
         :tunnelId="tunnelId"
         :tunnelAlias="tunnelAlias"
     ></preview-scene-simulate>