From 41e6c78d1e701842b772dec81e8956b2e55a6008 Mon Sep 17 00:00:00 2001
From: Hcat <2768237203@qq.com>
Date: Thu, 11 Jan 2024 23:03:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=9A=A7=E9=81=93=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2+=E9=A2=84=E8=A7=88=E6=A8=A1=E5=BC=8F=E7=9A=84?=
 =?UTF-8?q?=E9=99=84=E7=9D=80=E7=82=B9=E8=B7=9D=E7=A6=BB=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/tunnelModel/chanel-have-wall.gltf      | 359 +++++++++++-------
 .../content/tunnelScene/PreviewScene.vue      |  24 +-
 .../content/tunnelScene/TunnelScene.vue       |  10 +
 src/views/tunnel/index.vue                    |  99 ++---
 4 files changed, 309 insertions(+), 183 deletions(-)

diff --git a/public/tunnelModel/chanel-have-wall.gltf b/public/tunnelModel/chanel-have-wall.gltf
index 0a9136c..69a4f06 100644
--- a/public/tunnelModel/chanel-have-wall.gltf
+++ b/public/tunnelModel/chanel-have-wall.gltf
@@ -7,27 +7,7 @@
     {
       "name": "Scene",
       "nodes": [
-        248,
-        249,
-        250,
-        251,
-        252,
-        253,
-        254,
-        255,
-        256,
-        257,
-        258,
-        259,
-        260,
-        261,
-        262,
-        263,
-        264,
-        265,
-        266,
-        267,
-        268
+        269
       ]
     }
   ],
@@ -6069,7 +6049,7 @@
       ]
     },
     {
-      "name": "chanelgltf",
+      "name": "chanelgltf_1",
       "extras": {
         "name": "chanel.gltf"
       },
@@ -6078,7 +6058,10 @@
       ]
     },
     {
-      "name": "chanel.gltf",
+      "name": "chanelgltf",
+      "extras": {
+        "name": "chanel.gltf"
+      },
       "children": [
         247
       ]
@@ -6093,9 +6076,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.05539575645377058,
         5.599639454135268,
@@ -6103,6 +6086,9 @@
         1
       ],
       "name": "wall_01",
+      "extras": {
+        "name": "wall_01"
+      },
       "mesh": 123
     },
     {
@@ -6115,9 +6101,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.639254564638573,
@@ -6125,6 +6111,9 @@
         1
       ],
       "name": "wall_02",
+      "extras": {
+        "name": "wall_02"
+      },
       "mesh": 124
     },
     {
@@ -6137,9 +6126,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6147,6 +6136,9 @@
         1
       ],
       "name": "wall_03",
+      "extras": {
+        "name": "wall_03"
+      },
       "mesh": 125
     },
     {
@@ -6159,9 +6151,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6169,6 +6161,9 @@
         1
       ],
       "name": "wall_04",
+      "extras": {
+        "name": "wall_04"
+      },
       "mesh": 126
     },
     {
@@ -6181,9 +6176,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6191,6 +6186,9 @@
         1
       ],
       "name": "wall_05",
+      "extras": {
+        "name": "wall_05"
+      },
       "mesh": 127
     },
     {
@@ -6203,9 +6201,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6213,6 +6211,9 @@
         1
       ],
       "name": "wall_06",
+      "extras": {
+        "name": "wall_06"
+      },
       "mesh": 128
     },
     {
@@ -6225,9 +6226,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6235,6 +6236,9 @@
         1
       ],
       "name": "wall_07",
+      "extras": {
+        "name": "wall_07"
+      },
       "mesh": 129
     },
     {
@@ -6247,9 +6251,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6257,6 +6261,9 @@
         1
       ],
       "name": "wall_08",
+      "extras": {
+        "name": "wall_08"
+      },
       "mesh": 130
     },
     {
@@ -6269,9 +6276,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6279,6 +6286,9 @@
         1
       ],
       "name": "wall_09",
+      "extras": {
+        "name": "wall_09"
+      },
       "mesh": 131
     },
     {
@@ -6291,9 +6301,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6301,6 +6311,9 @@
         1
       ],
       "name": "wall_10",
+      "extras": {
+        "name": "wall_10"
+      },
       "mesh": 132
     },
     {
@@ -6313,9 +6326,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6323,6 +6336,9 @@
         1
       ],
       "name": "wall_11",
+      "extras": {
+        "name": "wall_11"
+      },
       "mesh": 133
     },
     {
@@ -6335,9 +6351,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6345,6 +6361,9 @@
         1
       ],
       "name": "wall_12",
+      "extras": {
+        "name": "wall_12"
+      },
       "mesh": 134
     },
     {
@@ -6357,9 +6376,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6367,6 +6386,9 @@
         1
       ],
       "name": "wall_13",
+      "extras": {
+        "name": "wall_13"
+      },
       "mesh": 135
     },
     {
@@ -6379,9 +6401,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6389,6 +6411,9 @@
         1
       ],
       "name": "wall_14",
+      "extras": {
+        "name": "wall_14"
+      },
       "mesh": 136
     },
     {
@@ -6401,9 +6426,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6411,6 +6436,9 @@
         1
       ],
       "name": "wall_15",
+      "extras": {
+        "name": "wall_15"
+      },
       "mesh": 137
     },
     {
@@ -6423,9 +6451,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6433,6 +6461,9 @@
         1
       ],
       "name": "wall_16",
+      "extras": {
+        "name": "wall_16"
+      },
       "mesh": 138
     },
     {
@@ -6445,9 +6476,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6455,6 +6486,9 @@
         1
       ],
       "name": "wall_17",
+      "extras": {
+        "name": "wall_17"
+      },
       "mesh": 139
     },
     {
@@ -6467,9 +6501,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6477,6 +6511,9 @@
         1
       ],
       "name": "wall_18",
+      "extras": {
+        "name": "wall_18"
+      },
       "mesh": 140
     },
     {
@@ -6489,9 +6526,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6499,6 +6536,9 @@
         1
       ],
       "name": "wall_19",
+      "extras": {
+        "name": "wall_19"
+      },
       "mesh": 141
     },
     {
@@ -6511,9 +6551,9 @@
         1,
         0,
         0,
-        1,
+        0.01,
         0,
-        2.220446049250313e-16,
+        2.220446049250313e-18,
         0,
         0.055,
         5.6,
@@ -6521,7 +6561,36 @@
         1
       ],
       "name": "wall_20",
+      "extras": {
+        "name": "wall_20"
+      },
       "mesh": 142
+    },
+    {
+      "name": "chanel-have-wall.gltf",
+      "children": [
+        248,
+        249,
+        250,
+        251,
+        252,
+        253,
+        254,
+        255,
+        256,
+        257,
+        258,
+        259,
+        260,
+        261,
+        262,
+        263,
+        264,
+        265,
+        266,
+        267,
+        268
+      ]
     }
   ],
   "bufferViews": [
@@ -16125,9 +16194,9 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.22322795730611386,
-          0.9301108583738498,
-          0.7011018919268015,
+          0.36625259558833256,
+          0.8468732315065057,
+          1,
           0.5
         ],
         "metallicFactor": 0,
@@ -16141,9 +16210,9 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.22322795730611386,
-          0.9301108583738498,
-          0.85499260812105,
+          0.36625259558833256,
+          0.8468732315065057,
+          1,
           0.5
         ],
         "metallicFactor": 0,
@@ -16157,9 +16226,9 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.22322795730611386,
-          0.9301108583738498,
-          0.85499260812105,
+          0.36625259558833256,
+          0.8468732315065057,
+          1,
           0.5
         ],
         "metallicFactor": 0,
@@ -16173,9 +16242,9 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.22322795730611386,
-          0.9301108583738498,
-          0.85499260812105,
+          0.36625259558833256,
+          0.8468732315065057,
+          1,
           0.5
         ],
         "metallicFactor": 0,
@@ -17242,14 +17311,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17257,14 +17327,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17272,14 +17343,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17287,14 +17359,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17302,14 +17375,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17317,14 +17391,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17332,14 +17407,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17347,14 +17423,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17362,14 +17439,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17377,14 +17455,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17392,14 +17471,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17407,14 +17487,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17422,14 +17503,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17437,14 +17519,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17452,14 +17535,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17467,14 +17551,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17482,14 +17567,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17497,14 +17583,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17512,14 +17599,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
@@ -17527,14 +17615,15 @@
     {
       "pbrMetallicRoughness": {
         "baseColorFactor": [
-          0.3813260114221238,
+          0.36625259558833256,
+          0.8468732315065057,
           1,
-          0,
-          1
+          0.5
         ],
         "metallicFactor": 0,
         "roughnessFactor": 0.9
       },
+      "alphaMode": "BLEND",
       "extensions": {
         "KHR_materials_unlit": {}
       }
diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue
index 7023ebe..d3014ac 100644
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -3,7 +3,7 @@
         <div id="cvs" ref="content"></div>
         <dev-info ref="info" :devInfo="devInfo" />
         <pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
-            :hasDev="hasDevice" :pointNum="pointNum" pointGap="500" :equipmentType="equipmentType"
+            :hasDev="hasDevice" :pointNum="pointNum" :pointGap="pointGap" :equipmentType="equipmentType"
             :equipmentName="equipmentName" :equipmentValue="equipmentValue" />
         <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
         margin: 20% auto;
@@ -63,7 +63,7 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId", "tunnelLen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 
 
@@ -84,6 +84,16 @@ let isedit = ref(params.isedit)
 //     });
 // };
 
+let pointGap = reactive(params.tunnelLen.value);
+watch(
+    () => params.tunnelLen,
+    (now) => {
+        params.tunnelLen = now;
+        console.log(params.tunnelLen);
+        pointGap = params.tunnelLen.value / 20;
+    },
+    { deep: true }
+);
 
 
 watch(
@@ -250,6 +260,16 @@ function rClickCallback(demo) {
 // 添加设备
 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)
+    //     } else if (line >= 10) {
+    //         let wall = 'wall_' + line
+    //         this.scene.getObjectByName(wall).layers.set(0)
+    //     }
+    // }
 }
 
 const centerDialogVisible = ref(false);
diff --git a/src/components/content/tunnelScene/TunnelScene.vue b/src/components/content/tunnelScene/TunnelScene.vue
index c727dbf..046f7b7 100644
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -200,6 +200,16 @@ function rClickCallback(demo) {
 // 场景添加设备
 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)
+  //   } else if (line >= 10) {
+  //     let wall = 'wall_' + line
+  //     this.scene.getObjectByName(wall).layers.set(0)
+  //   }
+  // }
 }
 
 const centerDialogVisible = ref(false);
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 40a5797..e25b67f 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
       <div class="tunnel-title"></div>
       <!--      <manage-length class="tunnel-length"></manage-length>-->
       <div class="top-length">
@@ -16,8 +16,8 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                    item.label
-                  }}
+                  item.label
+                }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -33,30 +33,34 @@
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
 
-    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
+    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"
+      :tunnelLen="tunnelLen"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
+        :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-                  :transducer-data="largeScreenData" :loading="showFanLoading"/>
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
+          :transducer-data="largeScreenData" :loading="showFanLoading" />
+        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" :loading="showWindLoading"/>
+        :close-on-click-modal="false" :close-on-press-escape="false">
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
+          :loading="showWindLoading" />
         <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" :loading="showBadLoading"/>
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
+          :loading="showBadLoading" />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
     </div>
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
-      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex" @change="changeTunnel" >
+      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex"
+        @change="changeTunnel">
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -76,13 +80,13 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import {dateFormat} from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
-import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
-import {ElMessage, ElMessageBox} from "element-plus";
-import {getUserInfo} from "@/api/login";
-import {initSceneData} from "@/api/tunnelScene";
+import { dateFormat } from "@/utils/date.js";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
+import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";
+import { initSceneData } from "@/api/tunnelScene";
 const authStore = useAuthStore();
 const router = useRouter();
 const previewId = reactive(router.currentRoute.value.params.tunnelId)
@@ -154,7 +158,7 @@ const socketData = reactive({
   sensor: [],
 });
 onMounted(() => {
-  if(previewId){
+  if (previewId) {
     getScreenInfo(previewId)
 
   }
@@ -191,13 +195,13 @@ const getOtherInfo = () => {
       currentSite.value = res.data.siteOption[0].label
       localStorage.setItem('site', currentSite.value)
       tunnelList.value = res.data.tunnelOption
-      if(previewId){
+      if (previewId) {
         tunnelList.value.forEach((item, index) => {
-          if(item.value == previewId){
+          if (item.value == previewId) {
             initialIndex.value = index
           }
         })
-      }else{
+      } else {
         getTunnel(res.data.siteOption[0].value)
       }
     }
@@ -208,33 +212,33 @@ const getScreenInfo = (id) => {
     tunnelId.value = id
     getLargeScreen(id).then((res) => {
       if (res?.code === 1000) {
-        if(res.data.frequencyChangerList.length!==0){
-          showFanLoading.value=0
-        }else {
-          showFanLoading.value=1
+        if (res.data.frequencyChangerList.length !== 0) {
+          showFanLoading.value = 0
+        } else {
+          showFanLoading.value = 1
         }
-        if(res.data.windPressureSensorList.length!==0){
-          showWindLoading.value=0
-        }else {
-          showWindLoading.value=1
+        if (res.data.windPressureSensorList.length !== 0) {
+          showWindLoading.value = 0
+        } else {
+          showWindLoading.value = 1
         }
-        if(res.data.sensorList.length!==0){
-          res.data.sensorList.forEach((item,index)=>{
+        if (res.data.sensorList.length !== 0) {
+          res.data.sensorList.forEach((item, index) => {
             if (
-                item.equipmentType === "carbonDioxide" ||
-                item.equipmentType === "carbonMonoxide" ||
-                item.equipmentType === "hydrogenSulfide" ||
-                item.equipmentType === "sulfurDioxide" ||
-                item.equipmentType === "sulfurMonoxide" ||
-                item.equipmentType === "nitrogenDioxide"
+              item.equipmentType === "carbonDioxide" ||
+              item.equipmentType === "carbonMonoxide" ||
+              item.equipmentType === "hydrogenSulfide" ||
+              item.equipmentType === "sulfurDioxide" ||
+              item.equipmentType === "sulfurMonoxide" ||
+              item.equipmentType === "nitrogenDioxide"
             ) {
-              showBadLoading.value=0
-            }else {
-              showBadLoading.value=1
+              showBadLoading.value = 0
+            } else {
+              showBadLoading.value = 1
             }
           })
-        }else {
-          showBadLoading.value=1
+        } else {
+          showBadLoading.value = 1
         }
         largeScreenData.value = res.data;
       } else {
@@ -262,9 +266,9 @@ const changeTunnel = (e) => {
       newObj = item
     }
   })
-  showBadLoading.value=0
-  showWindLoading.value=0
-  showFanLoading.value=0
+  showBadLoading.value = 0
+  showWindLoading.value = 0
+  showFanLoading.value = 0
   getScreenInfo(newObj.value)
   nextTick(() => {
     showFan.value = true;
@@ -358,6 +362,9 @@ const initWebSocket = () => {
   }, 30000);
 };
 initWebSocket();
+
+let tunnelLen = computed(() => tunnelLength);
+
 </script>
 <style lang="scss">
 .el-drawer__header {