diff --git a/.drone.yml b/.drone.yml
index e02f857..17c406f 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -1,6 +1,9 @@
 kind: pipeline
 type: docker
 name: tunnel-cloud-web
+platform:
+  os: linux
+  arch: amd64
 steps:
   - name: build-package
     image: registry.cn-chengdu.aliyuncs.com/claywang/node:16.20.0
diff --git a/src/api/tunnel.js b/src/api/tunnel.js
index c06d5d4..fe871f0 100644
--- a/src/api/tunnel.js
+++ b/src/api/tunnel.js
@@ -1,8 +1,17 @@
-import request from '@/utils/request.js'
+import request from "@/utils/request.js";
 
 export const getTunnelOption = (siteId) => {
   return request({
     url: `/tunnel/tunnel/option/${siteId}`,
-    method: 'get'
-  })
-}
+    method: "get",
+  });
+};
+
+// 数据3d隧道模拟接口渲染数据源
+export const getTunnelSimulateData = (siteId) => {
+  return request({
+    url: `/tunnel/tunnel/data/${siteId}`,
+    method: "get",
+    params,
+  });
+};
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 232a863..f199c59 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -119,6 +119,7 @@ body,
     width: 100%;
     display: flex;
     justify-content: center;
+    align-items: center;
     font-size: 50px;
     //font-weight: bold;
     color: #0BE9FA;
diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue
index 2f88969..29257db 100644
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -71,20 +71,20 @@
         <div class="current" @click="handleOpenChart(item)">
           <fan-info-item :wp="transducerData[index]"/>
         </div>
-        <div class="line"></div>
-      </div>
-      <div class="shunt-box">
-        <div class="shuntThreshold" v-for="(item,index) in shuntList">
-          <div class="fenliu-icon"></div>
-          {{ index + 1 }}号分流阀值
-          <span class="units"
-          ><input
-              type="number"
-              min="0"
-              v-model="item.shuntThreshold"
-          /></span>
-        </div>
+        <div class="line" v-if="index!=socketData.length-1"></div>
       </div>
+<!--      <div class="shunt-box">-->
+<!--        <div class="shuntThreshold" v-for="(item,index) in shuntList">-->
+<!--          <div class="fenliu-icon"></div>-->
+<!--          {{ index + 1 }}号分流阀值-->
+<!--          <span class="units"-->
+<!--          ><input-->
+<!--              type="number"-->
+<!--              min="0"-->
+<!--              v-model="item.shuntThreshold"-->
+<!--          /></span>-->
+<!--        </div>-->
+<!--      </div>-->
     </div>
 
     <div class="digital-tunnel">
diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue
index 3e7c494..ec25897 100644
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -1,35 +1,49 @@
 <template>
-    <div id="scene">
-        <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="pointGap" :equipmentType="equipmentType"
-            :equipmentName="equipmentName" :equipmentValue="equipmentValue" />
-        <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
+  <div id="scene">
+    <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="pointGap"
+      :equipmentType="equipmentType"
+      :equipmentName="equipmentName"
+      :equipmentValue="equipmentValue"
+      :devRealtimeDetail="crtDevDetail"
+    />
+    <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>
-
-
-    </div>
+      "
+    >
+      <p id="remove-title">是否确定删除该设备</p>
+      <div class="btn">
+        <button @click="centerDialogVisible = false">取消</button>
+        <button @click="handleConfirmAddEqu">确定</button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
 import * as three from "three";
 import ThreeDScene from "./sceneClass/demo.js";
 import DevInfo from "./displayInfoComp/DevInfo.vue";
-import PreDialog from "./preEquComp/preDialog.vue"
-
+import PreDialog from "./preEquComp/preDialog.vue";
 
 // 导入模模型加载器
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -37,14 +51,14 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import * as TWEEN from "three/examples/jsm/libs/tween.module";
 import {
-    CSS3DRenderer,
-    CSS3DObject,
-    CSS3DSprite,
+  CSS3DRenderer,
+  CSS3DObject,
+  CSS3DSprite,
 } from "three/addons/renderers/CSS3DRenderer.js";
 // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
 import {
-    CSS2DRenderer,
-    CSS2DObject,
+  CSS2DRenderer,
+  CSS2DObject,
 } from "three/addons/renderers/CSS2DRenderer.js";
 
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
@@ -54,6 +68,9 @@ import { ElMessage } from "element-plus";
 import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
 
 import { useModelSceneStore } from "@/store/modelSceneStore";
+
+import { getLargeScreen } from "@/api/largeScreen";
+
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -62,105 +79,142 @@ let modelList = ref(null);
 let demo; //定义demo全局变量
 // const loader = new OBJLoader();
 const form = ref({
-    tunnelName: "",
-    serialNumber: "",
-    totalLength: "",
-    referenceFrequency: '',
-    upTime: '',
-    upFrequency: '',
-    dropTime: '',
-    dropFrequency: '',
-    isDefault: false,
-    remarks: "",
+  tunnelName: "",
+  serialNumber: "",
+  totalLength: "",
+  referenceFrequency: "",
+  upTime: "",
+  upFrequency: "",
+  dropTime: "",
+  dropFrequency: "",
+  isDefault: false,
+  remarks: "",
 });
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps([
+  "isedit",
+  "tunnelId",
+  "tunnelLen",
+  "largeScreen",
+  "devRealtimeData",
+]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
+// 根据设备ID获取当前设备实时数据
+const crtDevDetail = ref({
+  equipmentName: "--",
+  unit: "-",
+  value: "-",
+});
+const getDevDetail = async (devId) => {
+  crtDevDetail.value = {
+    equipmentName: "--",
+    unit: "-",
+    value: "-",
+  };
+  const res = await getLargeScreen(params.tunnelId);
+  const devList = [
+    ...res.data.frequencyChangerList,
+    ...res.data.sensorList,
+    ...res.data.windPressureSensorList,
+  ];
+
+  crtDevDetail.value =
+    devList.find((sensor) => sensor.equipmentId == devId) || crtDevDetail.value;
+};
 
 // console.log(load);
-let isedit = ref(params.isedit)
+let isedit = ref(params.isedit);
 let fanData;
-let tunnelAlias = reactive('')
+let tunnelAlias = reactive("");
 
 watch(
-    () => params.largeScreen,
-    (now) => {
+  () => params.largeScreen,
+  (now) => {
+    // console.log(params.largeScreen);
+    params.largeScreen = now;
+    // console.log(toRaw(params.largeScreen.value).frequencyChangerList);
+    // console.log(params.fanList);
+    fanData = toRaw(params.largeScreen.value).frequencyChangerList;
+    // console.log(fanData);
+    // 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
+    watch(
+      () => params.fanList,
+      (now) => {
         // console.log(params.largeScreen);
-        params.largeScreen = now;
-        // console.log(toRaw(params.largeScreen.value).frequencyChangerList);
-        // console.log(params.fanList);
-        fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
-        // console.log(fanData);
-        // 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
-        watch(
-            () => params.fanList,
-            (now) => {
-                // console.log(params.largeScreen);
-                params.fanList = now;
-                let fanList = toRaw(params.fanList);
-                //首先判断是不是存在autoMode属性
-                if (fanList[0].autoMode !== undefined) {
-                    // console.log(fanData);
-                    // console.log(fanList);
-                    fanList.map(item => {
-                        if (item.equipmentId == fanData[0].equipmentId) {
-                            // console.log(item.equipmentId);
-                            //第一个符合条件
-                            fanData[0].breakdown = item.breakdown
-                            fanData[0].running = item.running
-                            // console.log(demo.scene);
-                            if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) {
-                                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
-                                // console.log('111');
-                            }
-                            else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) {
-                                // console.log("222");
-                                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
-                            }
-                            // console.log(item);
-                            // console.log(fanData[0]);
-                        } else {
-                            // 第二个符合条件
-                            // console.log(item.equipmentId);
-                            fanData[1].breakdown = item.breakdown
-                            fanData[1].running = item.running
-                            // console.log(demo.scene);
-                            if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) {
-                                // console.log('111');
-                                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
-                            } else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) {
-                                // console.log("222");
-                                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
-                            }
-                            // console.log(item);
-                            // console.log(fanData[1]);
-                        }
-                    })
-                }
+        params.fanList = now;
+        let fanList = toRaw(params.fanList);
+        //首先判断是不是存在autoMode属性
+        if (fanList[0].autoMode !== undefined) {
+          // console.log(fanData);
+          // console.log(fanList);
+          fanList.map((item) => {
+            if (item.equipmentId == fanData[0].equipmentId) {
+              // console.log(item.equipmentId);
+              //第一个符合条件
+              fanData[0].breakdown = item.breakdown;
+              fanData[0].running = item.running;
+              // console.log(demo.scene);
+              if (
+                demo.scene.Fan1targetPoint.info.equipmentId ==
+                fanData[0].equipmentId
+              ) {
+                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
+                // console.log('111');
+              } else if (
+                demo.scene.Fan2targetPoint.info.equipmentId ==
+                fanData[0].equipmentId
+              ) {
+                // console.log("222");
+                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
+              }
+              // console.log(item);
+              // console.log(fanData[0]);
+            } else {
+              // 第二个符合条件
+              // console.log(item.equipmentId);
+              fanData[1].breakdown = item.breakdown;
+              fanData[1].running = item.running;
+              // console.log(demo.scene);
+              if (
+                demo.scene.Fan1targetPoint.info.equipmentId ==
+                fanData[1].equipmentId
+              ) {
+                // console.log('111');
+                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
+              } else if (
+                demo.scene.Fan2targetPoint.info.equipmentId ==
+                fanData[1].equipmentId
+              ) {
+                // console.log("222");
+                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
+              }
+              // console.log(item);
+              // console.log(fanData[1]);
+            }
+          });
+        }
 
-                // console.log(fanData);
-            },
-            { deep: true }
-        );
-    },
-    { deep: true }
+        // console.log(fanData);
+      },
+      { deep: true }
+    );
+  },
+  { deep: true }
 );
 
-
-
 const getTunnel = () => {
-    if (params.tunnelId !== 0) {
-        getTunnelDetail(params.tunnelId).then((res) => {
-            if (res?.code === 1000) {
-                form.value = res.data;
-                // console.log(form.value.tunnelAlias);
-                tunnelAlias = form.value.tunnelAlias
-            }
-        });
-    }
+  if (params.tunnelId !== 0) {
+    getTunnelDetail(params.tunnelId).then((res) => {
+      if (res?.code === 1000) {
+        form.value = res.data;
+        // console.log(form.value.tunnelAlias);
+        tunnelAlias = form.value.tunnelAlias;
+      }
+    });
+  }
 };
 getTunnel();
 // const form = ref({
@@ -181,134 +235,132 @@ getTunnel();
 
 let pointGap = reactive(params.tunnelLen.value);
 watch(
-    () => params.tunnelLen,
-    (now) => {
-        params.tunnelLen = now;
-        // console.log(params.tunnelLen);
-        pointGap = params.tunnelLen.value / 20;
-    },
-    { deep: true }
+  () => params.tunnelLen,
+  (now) => {
+    params.tunnelLen = now;
+    // console.log(params.tunnelLen);
+    pointGap = params.tunnelLen.value / 20;
+  },
+  { deep: true }
 );
 
-
 watch(
-    () => params.tunnelId,
-    (now) => {
-        params.tunnelId = now
-        console.log(params.tunnelId);
-        // getTunnelPreview();
-        // console.log(form.value);
-    },
-    { deep: true }
-)
+  () => params.tunnelId,
+  (now) => {
+    params.tunnelId = now;
+    console.log(params.tunnelId);
+    // getTunnelPreview();
+    // console.log(form.value);
+  },
+  { deep: true }
+);
 
 //这里是改变风机颜色的代码
 function changeFanColor(fanData, targetPoint, scene) {
-    if (fanData !== undefined) {
-        //保证是预览模式才进行这里的操作（！=1）
-        if (fanData.length > 0) {
-            //if保证存在风机（即有长度再进行遍历）
-            for (let i = 0; i < fanData.length; i++) {
-                //先做匹配操作
-                let fanType = fanData[i].equipmentType
-                //有符合条件的风机进来了
-                if (targetPoint.info.typeKey == fanType) {
-                    //下面进行变色需要的逻辑判断了
-                    if (fanData[i].breakdown == true) {
-                        //故障状态，变红色
-                        scene.traverse(function (child) {
-                            if (child.id === targetPoint.info.id) {
-                                child.traverse(function (obj) {
-                                    // console.log(obj);
-                                    // 判断子对象是否是物体，如果是，更改其颜色
-                                    if (obj.isMesh) {
-                                        obj.material.color.set(0xFF0000)
-                                    }
-                                })
-                            }
-                        });
-                    } else {
-                        // 这里再判断是否运行
-                        if (fanData[i].running == true) {
-                            //运行状态,绿色 0x008000
-                            scene.traverse(function (child) {
-                                if (child.id === targetPoint.info.id) {
-                                    child.traverse(function (obj) {
-                                        // console.log(obj);
-                                        // 判断子对象是否是物体，如果是，更改其颜色
-                                        if (obj.isMesh) {
-                                            obj.material.color.set(0x008000)
-                                        }
-                                    })
-                                }
-                            });
-                        } else {
-                            //停止状态，不变色
-                            break;
-                        }
+  if (fanData !== undefined) {
+    //保证是预览模式才进行这里的操作（！=1）
+    if (fanData.length > 0) {
+      //if保证存在风机（即有长度再进行遍历）
+      for (let i = 0; i < fanData.length; i++) {
+        //先做匹配操作
+        let fanType = fanData[i].equipmentType;
+        //有符合条件的风机进来了
+        if (targetPoint.info.typeKey == fanType) {
+          //下面进行变色需要的逻辑判断了
+          if (fanData[i].breakdown == true) {
+            //故障状态，变红色
+            scene.traverse(function (child) {
+              if (child.id === targetPoint.info.id) {
+                child.traverse(function (obj) {
+                  // console.log(obj);
+                  // 判断子对象是否是物体，如果是，更改其颜色
+                  if (obj.isMesh) {
+                    obj.material.color.set(0xff0000);
+                  }
+                });
+              }
+            });
+          } else {
+            // 这里再判断是否运行
+            if (fanData[i].running == true) {
+              //运行状态,绿色 0x008000
+              scene.traverse(function (child) {
+                if (child.id === targetPoint.info.id) {
+                  child.traverse(function (obj) {
+                    // console.log(obj);
+                    // 判断子对象是否是物体，如果是，更改其颜色
+                    if (obj.isMesh) {
+                      obj.material.color.set(0x008000);
                     }
+                  });
                 }
+              });
+            } else {
+              //停止状态，不变色
+              break;
             }
+          }
         }
+      }
     }
+  }
 }
 
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
-    const doms = [info.value.$el, edit.value.$el];
-    demo = new ThreeDScene(three, content.value);
-    //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
-    demo.isedit = params.isedit;
-    let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf");
-    demo.addOrbitControls(OrbitControls);
-    demo.addTween(TWEEN);
-    demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
-    demo.setDistance(10);
-    lClickCallback(demo); //绑定左键回调
-    rClickCallback(demo); //绑定右键回调
+  const doms = [info.value.$el, edit.value.$el];
+  demo = new ThreeDScene(three, content.value);
+  //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
+  demo.isedit = params.isedit;
+  let tunnelasync = await demo.loadModel(
+    GLTFLoader,
+    "/tunnelModel/chanel-have-wall-now-use.gltf"
+  );
+  demo.addOrbitControls(OrbitControls);
+  demo.addTween(TWEEN);
+  demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
+  demo.setDistance(10);
+  lClickCallback(demo); //绑定左键回调
+  rClickCallback(demo); //绑定右键回调
 
-    //加载HDR背景图片
-    demo.loadBackground(hdrLoader, backColorSet);
-    //先不加试试？？？
-    // watch(
-    //     () => params.tunnelId,
-    //     async () => {
-    //         const text = await initData(params.tunnelId);
-    //     }
-    // );
-    // 初始化设备模型
-    try {
+  //加载HDR背景图片
+  demo.loadBackground(hdrLoader, backColorSet);
+  //先不加试试？？？
+  // watch(
+  //     () => params.tunnelId,
+  //     async () => {
+  //         const text = await initData(params.tunnelId);
+  //     }
+  // );
+  // 初始化设备模型
+  try {
+    //在这加载隧道
+    const map = new Map();
+    map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
+    map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
+    // 给对象初加载设备模型
+    demo.initDevicesModel(map);
+    // const equipmentList = await store.getEquipmentList();
+    modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
+    // console.log(modelList.value);
+    // console.log("init", params.tunnelId);
+    demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
+    // setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
 
-        //在这加载隧道
-        const map = new Map();
-        map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
-        map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
-        // 给对象初加载设备模型
-        demo.initDevicesModel(map);
-        // const equipmentList = await store.getEquipmentList();
-        modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
-        // console.log(modelList.value);
-        // console.log("init", params.tunnelId);
-        demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
-        // setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
-
-        demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
-
-    } catch (err) {
-        if (err == undefined) {
-            return
-        } else {
-            console.log(err);
-            ElMessage({
-                message: "场景初始化异常---！",
-                type: "warning",
-            });
-        }
+    demo.SignsInf(tunnelAlias, String(params.tunnelLen.value));
+  } catch (err) {
+    if (err == undefined) {
+      return;
+    } else {
+      ElMessage({
+        message: "场景初始化异常！",
+        type: "warning",
+      });
     }
+  }
 }
 
-
 // function checkTunnelInit(equipmentList) {
 //     equipmentList.forEach((item) => {
 //         let equipment = toRaw(item)
@@ -321,242 +373,238 @@ async function handleMounted() {
 
 // 每个模型加载回调
 function loadModel(path) {
-    return new Promise((resolve, reject) => {
-        loader.load(
-            path,
-            (obj) => {
-                resolve(obj);
-            },
-            (xhr) => {
-                //这里可以拿到加载的进度条！！！
-                // console.log(xhr);
-                console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
-            },
-            (err) => {
-                reject(err);
-            }
-        );
-    });
+  return new Promise((resolve, reject) => {
+    loader.load(
+      path,
+      (obj) => {
+        resolve(obj);
+      },
+      (xhr) => {
+        //这里可以拿到加载的进度条！！！
+        // console.log(xhr);
+        // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+      },
+      (err) => {
+        reject(err);
+      }
+    );
+  });
 }
 
 let hasDevice = ref(true);
 let devInfo = reactive({
-    meshId: null,
-    name: "无",
-    state: "无",
-    position: "无",
+  meshId: null,
+  name: "无",
+  state: "无",
+  position: "无",
 });
 
 // 对象建构赋值功能
 function editDevInfo(
-    value = {
-        meshId: null,
-        name: "无",
-        state: "无",
-        position: "无",
-    }
+  value = {
+    meshId: null,
+    name: "无",
+    state: "无",
+    position: "无",
+  }
 ) {
-    devInfo.meshId = value.meshId;
-    devInfo.name = value.name;
-    devInfo.state = value.state;
-    devInfo.position = value.position;
+  devInfo.meshId = value.meshId;
+  devInfo.name = value.name;
+  devInfo.state = value.state;
+  devInfo.position = value.position;
 }
 
 //左键/双击左键回调函数
 function lClickCallback(demo) {
-    //demo动态添加函数，为操作组件内部
-    function displayDevInfo(targetPoint = null) {
-        hasDevice.value = targetPoint.hasDevice;
-        if (!targetPoint.info) {
-            editDevInfo();
-            return;
-        }
-        editDevInfo(targetPoint.info);
+  //demo动态添加函数，为操作组件内部
+  function displayDevInfo(targetPoint = null) {
+    hasDevice.value = targetPoint.hasDevice;
+    if (!targetPoint.info) {
+      editDevInfo();
+      return;
     }
-    // 传给内部使用
-    demo.addFunction("displayDevInfo", displayDevInfo);
+    editDevInfo(targetPoint.info);
+  }
+  // 传给内部使用
+  demo.addFunction("displayDevInfo", displayDevInfo);
 }
 
 let pointNum = ref(0);
 let targetP = ref({});
 // 右键点击附着点后调函数
 function rClickCallback(demo) {
-    function editDev(targetPoint = null) {
-        hasDevice.value = targetPoint.hasDevice;
-        targetP.value = targetPoint;
-        //这里是初始化必经之路！！！
-        const equipmentList = modelStore.initModelDataPreview(params.tunnelId)
-        equipmentList.then((result) => {
-            previewEquInfProcess(result, targetP.value)
-        })
-        pointNum.value = Number(
-            targetPoint.name.substring(
-                targetPoint.name.indexOf("_") + 1,
-                targetPoint.name.lastIndexOf("_")
-            ) - 1
-        );
-        if (!targetPoint.info) return;
-        editDevInfo(targetPoint.info);
-    }
-    demo.addFunction("editDev", editDev);
+  function editDev(targetPoint = null) {
+    hasDevice.value = targetPoint.hasDevice;
+    targetP.value = targetPoint;
+    //这里是初始化必经之路！！！
+    const equipmentList = modelStore.initModelDataPreview(params.tunnelId);
+    equipmentList.then((result) => {
+      previewEquInfProcess(result, targetP.value);
+    });
+    pointNum.value = Number(
+      targetPoint.name.substring(
+        targetPoint.name.indexOf("_") + 1,
+        targetPoint.name.lastIndexOf("_")
+      ) - 1
+    );
+    if (!targetPoint.info) return;
+    editDevInfo(targetPoint.info);
+  }
+  demo.addFunction("editDev", editDev);
 }
 
 function throttle(fn, delay) {
-    var timer;
-    return function () {
-        var _this = this;
-        var args = arguments;
-        if (timer) {
-            return;
-        }
-        timer = setTimeout(function () {
-            fn.apply(_this, args);
-            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
-        }, delay)
+  var timer;
+  return function () {
+    var _this = this;
+    var args = arguments;
+    if (timer) {
+      return;
     }
+    timer = setTimeout(function () {
+      fn.apply(_this, args);
+      timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
+    }, delay);
+  };
 }
 
 // 添加设备
 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)
-    //     }
-    // }
+  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);
 // 删除设备
 function handleRemoveEqu() {
-    if (!targetP.hasDevice) {
-        ElMessage({
-            message: "该点位不存在设备！",
-            type: "warning",
-        });
-        return;
-    }
-    centerDialogVisible.value = true;
+  if (!targetP.value.hasDevice) {
+    ElMessage({
+      message: "该点位不存在设备！",
+      type: "warning",
+    });
+    return;
+  }
+  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;
-            ElMessage({
-                message: "删除成功！",
-                type: "success",
-            });
-        })
-        .catch((res) => {
-            ElMessage({
-                message: "删除失败！",
-                type: "warning",
-            });
-        });
+  console.log("target:", targetP.value.info);
+  modelStore
+    .deleteEquipment(targetP.value.info.equipmentId, pointGap)
+    .then((res) => {
+      demo.removeEquipment(targetP.value);
+      centerDialogVisible.value = false;
+      ElMessage({
+        message: "删除成功！",
+        type: "success",
+      });
+    })
+    .catch((res) => {
+      ElMessage({
+        message: "删除失败！",
+        type: "warning",
+      });
+    });
 }
 // 处理取消关闭编辑框事件
 function handleCancel() {
-    if (!demo) return;
-    // 关闭标签
-    demo.isControlOrbit(true);
-    demo._resetState();
-    demo.clearTagsObj();
+  if (!demo) return;
+  // 关闭标签
+  demo.isControlOrbit(true);
+  demo._resetState();
+  demo.clearTagsObj();
 }
 
-let equipmentType = ref(0)
-let equipmentName = ref(0)
-let equipmentValue = ref(0)
+let equipmentType = ref(0);
+let equipmentName = ref(0);
+let equipmentValue = ref(0);
 
-
-function previewEquInfProcess(equipmentList, targetP) {
-    for (const equipment of equipmentList) {
-        if (equipment.position == targetP.name) {
-            equipmentType.value = equipment.equipmentType
-            //需要将获取到的设备列表进行序列化
-            equipmentName.value = equipment.equipmentName
-            equipmentValue.value = equipment.threshold
-            if (equipmentType.value == 'frequency') {
-                equipmentType.value = '风机'
-            }
-            if (equipmentType.value == 'windPressure') {
-                equipmentType.value = '风压传感器'
-            }
-            if (equipmentType.value == 'sensor') {
-                equipmentType.value = '其他传感器'
-            }
-            // console.log(equipmentType.value);
-            // console.log(equipmentName.value);
-            // console.log(equipmentValue.value);
-        }
+async function previewEquInfProcess(equipmentList, targetP) {
+  for (const equipment of equipmentList) {
+    if (equipment.position == targetP.name) {
+      equipmentType.value = equipment.equipmentType;
+      //需要将获取到的设备列表进行序列化
+      equipmentName.value = equipment.equipmentName;
+      equipmentValue.value = equipment.threshold;
+      if (equipmentType.value == "frequency") {
+        equipmentType.value = "风机";
+      }
+      if (equipmentType.value == "windPressure") {
+        equipmentType.value = "风压传感器";
+      }
+      if (equipmentType.value == "sensor") {
+        equipmentType.value = "其他传感器";
+      }
+      const { equipmentId } = targetP.info;
+      getDevDetail(equipmentId);
     }
+  }
 }
 
-
-
-
-
-
+watch(params.devRealtimeData, () => {
+  // console.log("devRealtimeData：", params.devRealtimeData);
+});
 </script>
 
 <style lang="scss" scoped>
 #scene {
-    position: relative;
-    height: 100%;
-    width: 100%;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-    #cvs {
-        height: 100%;
-    }
+  #cvs {
+    height: 100%;
+  }
 }
 
 #remove-title {
-    height: 42px;
-    font-size: 32px;
-    font-family: MicrosoftYaHei, MicrosoftYaHei;
-    font-weight: bold;
-    color: #08b7b8;
-    line-height: 42px;
-    letter-spacing: 3px;
-    text-align: center;
-    margin: 65px 0px 70px 0px;
+  height: 42px;
+  font-size: 32px;
+  font-family: MicrosoftYaHei, MicrosoftYaHei;
+  font-weight: bold;
+  color: #08b7b8;
+  line-height: 42px;
+  letter-spacing: 3px;
+  text-align: center;
+  margin: 65px 0px 70px 0px;
 }
 
 .btn {
-    display: flex;
-    justify-content: center;
-    gap: 80px;
+  display: flex;
+  justify-content: center;
+  gap: 80px;
 
-    :nth-child(1) {
-        width: 190px;
-        height: 60px;
-        border-radius: 11px;
-        border: 2px solid #0f82af;
-        font-size: 28px;
-        font-family: MicrosoftYaHei;
-        color: #08b7b8;
-        line-height: 37px;
-        background: transparent;
-    }
+  :nth-child(1) {
+    width: 190px;
+    height: 60px;
+    border-radius: 11px;
+    border: 2px solid #0f82af;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    color: #08b7b8;
+    line-height: 37px;
+    background: transparent;
+  }
 
-    :nth-child(2) {
-        width: 190px;
-        height: 60px;
-        background: #08b7b8;
-        border-radius: 11px;
-        font-size: 28px;
-        font-family: MicrosoftYaHei, MicrosoftYaHei;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 37px;
-    }
+  :nth-child(2) {
+    width: 190px;
+    height: 60px;
+    background: #08b7b8;
+    border-radius: 11px;
+    font-size: 28px;
+    font-family: MicrosoftYaHei, MicrosoftYaHei;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 37px;
+  }
 }
 </style>
diff --git a/src/components/content/tunnelScene/TunnelScene.vue b/src/components/content/tunnelScene/TunnelScene.vue
index 9419cfc..3bfa10c 100644
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -3,17 +3,34 @@
     <div id="cvs" ref="content"></div>
     <dev-info ref="info" :devInfo="devInfo" />
     <!-- 这里的预览模式需要做成不能修改的模式 -->
-    <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" />
-    <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
+    <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"
+    />
+    <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>
@@ -61,7 +78,13 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps([
+  "isedit",
+  "tunnelId",
+  "tunnelLength",
+  "form",
+  "devRealtimeData",
+]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 let isedit = ref(params.isedit);
 let tunnelId = reactive(params.tunnelId);
@@ -114,13 +137,12 @@ async function handleMounted() {
       params.form
     );
     // modelList.value = await initData(params.tunnelId, params.form);
-    console.log("test", modelList.value);
+    // console.log("test", modelList.value);
     demo.editTunnelInit(toRaw(modelList.value));
-    demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength))
+    demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
   } catch (err) {
-    console.log(err);
     ElMessage({
-      message: "场景初始化异常---！",
+      message: "场景初始化异常！",
       type: "warning",
     });
   }
@@ -134,7 +156,7 @@ function loadModel(path) {
       (obj) => {
         resolve(obj);
       },
-      (xhr) => { },
+      (xhr) => {},
       (err) => {
         reject(err);
       }
@@ -247,14 +269,13 @@ function handleConfirmAddEqu() {
         type: "success",
       });
     })
-    .catch(
-      (res) => {
-        console.log(res);
-        ElMessage({
-          message: "删除失败！",
-          type: "warning",
-        });
+    .catch((res) => {
+      console.log(res);
+      ElMessage({
+        message: "删除失败！",
+        type: "warning",
       });
+    });
 }
 // 处理取消关闭编辑框事件
 function handleCancel() {
@@ -291,6 +312,11 @@ const ThreeConfig = {
   },
   msg: "dda",
 };
+
+//=================实时更新数据
+watch(params.devRealtimeData, () => {
+  // console.log("devRealtimeData：", params.devRealtimeData);
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/content/tunnelScene/preEquComp/preDialog.vue b/src/components/content/tunnelScene/preEquComp/preDialog.vue
index 53b950a..3160db9 100644
--- a/src/components/content/tunnelScene/preEquComp/preDialog.vue
+++ b/src/components/content/tunnelScene/preEquComp/preDialog.vue
@@ -29,32 +29,29 @@
         <p>{{ params.equipmentName }}</p>
       </div>
       <div class="setting-item">
-        <p>参数:</p>
-        <p>31.3%</p>
+        <p>{{ getDevParam + ":" }}</p>
+        <p>
+          {{
+            params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
+            "--"
+          }}
+        </p>
       </div>
       <!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
         :disabled="isDisabledInputNum" />
       <p>{{ params.equipmentValue }}</p> -->
     </div>
-    <div class="btn">
-      <!-- <button @click="removeEquipment" disabled>删除</button> -->
-      <!-- <button @click="addEquipment" disabled>添加</button> -->
-    </div>
+    <!-- <div class="btn">
+      <button @click="removeEquipment">删除</button>
+      <button @click="addEquipment" disabled>添加</button>
+    </div> -->
   </div>
 </template>
 
 <script setup>
 import InputNum from "./childComps/InputNum.vue";
 
-import {
-  reactive,
-  computed,
-  defineEmits,
-  defineProps,
-  watch,
-  nextTick,
-  ref,
-} from "vue";
+import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
 
 // 定义事件发射器，父组件监听
 const emit = defineEmits([
@@ -69,11 +66,30 @@ const params = defineProps([
   "equipmentType",
   "equipmentName",
   "equipmentValue",
+  "devRealtimeDetail",
 ]); //隧道第几个锚点
 
 // 当前风压
 let p = ref(57);
-
+const getDevParam = computed(() => {
+  if (/^windPressure+/.test(params.devRealtimeDetail.equipmentType)) {
+    return "风压";
+  } else if (/^frequency+/.test(params.devRealtimeDetail.equipmentType)) {
+    return "频率";
+  }
+  switch (params.devRealtimeDetail.equipmentType) {
+    case "windDirection":
+      return "风向";
+    case "temperature":
+      return "温度";
+    case "windSpeed":
+      return "风速";
+    case "humidness":
+      return "湿度";
+    default:
+      return "浓度";
+  }
+});
 // function EquInf() {
 //   // 发射事件给tunnel父组件
 //   emit("EquInf");
@@ -171,22 +187,21 @@ function addEquipment() {
   equipmentSetting.equipmentType = "";
   equipmentSetting.threshold = "";
 }
-const equipmentType = {
-  label: String, //传感器类型
-  typeId: String, //传感器类型ID(方便查找该类型的所有设备)
-};
-// 通过以上选项请求以下具体哪个设备
-const equipment = {
-  label: String, //传感器编号加名称
-  equId: String, // 传感器Id
-};
+// const equipmentType = {
+//   label: String, //传感器类型
+//   typeId: String, //传感器类型ID(方便查找该类型的所有设备)
+// };
+// // 通过以上选项请求以下具体哪个设备
+// const equipment = {
+//   label: String, //传感器编号加名称
+//   equId: String, // 传感器Id
+// };
 </script>
 
 <style lang="scss" scoped>
 #edit-dialog {
-  // width: 540px;
-  width: 230px;
-  height: 120px;
+  width: 240px;
+  // height: 120px;
   // min-height: 683px;
   background: rgba(7, 35, 72, 0.79);
   border-radius: 20px;
@@ -203,7 +218,7 @@ const equipment = {
     margin: 20px 20px 0px 30px;
 
     p {
-      width: 388px;
+      width: 400px;
       height: 35px;
       font-size: 24px;
       font-family: MicrosoftYaHei;
@@ -243,19 +258,21 @@ const equipment = {
       padding: 15px 15px 5px 15px;
       display: flex;
       gap: 10px;
-      p {
-        width: 190px;
+      line-height: 35px;
+      font-size: 18px;
+      font-family: MicrosoftYaHei;
+      p:nth-child(1) {
+        width: 80px;
         height: 35px;
-        line-height: 35px;
-        font-size: 18px;
-        font-family: MicrosoftYaHei;
         color: #ffffff;
         text-align: right;
       }
 
       p:nth-child(2) {
         color: #f7b500;
+        height: 35px;
         text-align: left;
+        flex: 2;
       }
     }
 
@@ -295,7 +312,25 @@ const equipment = {
   }
 
   .btn {
-    margin: 100px 40px 40px 40px;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      cursor: pointer;
+      transition: transform 0.1s linear 0s;
+    }
+    & :nth-child(1) {
+      width: 95px;
+      height: 39px;
+      border-radius: 11px;
+      border: 2px solid #0f82af;
+      background: transparent;
+      font-size: 20px;
+      font-family: MicrosoftYaHei;
+      color: #08b7b8;
+      line-height: 39px;
+      margin: 15px;
+    }
+    /* margin: 100px 40px 40px 40px;
     display: flex;
     justify-content: space-between;
 
@@ -331,10 +366,10 @@ const equipment = {
       font-weight: bold;
       color: #ffffff;
       line-height: 60px;
-    }
+    }*/
 
     button:active {
-      transform: scale(0.9);
+      transform: scale(0.98);
     }
   }
 }
diff --git a/src/router/index.js b/src/router/index.js
index 6f0a0f0..bee9b5e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,6 +41,24 @@ const routes = [
       breadcrumb: true
     },
   },
+  {
+    path: '/simulate/:tunnelId',
+    name: 'simulateTunnel',
+    component: () => import('@/views/tunnel-simulate/index.vue'),
+    meta: {
+      title: '隧道模拟',
+      breadcrumb: true
+    },
+  },
+  {
+    path: '/simulate/tunnel/list',
+    name: 'tunnelList',
+    component: () => import('@/views/tunnel-simulate/tunnel-list.vue'),
+    meta: {
+      title: '隧道列表',
+      breadcrumb: true
+    },
+  },
   {
     path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
     name: 'tunneledit',
diff --git a/src/store/modelSceneStore.js b/src/store/modelSceneStore.js
index e9ee3fa..9999244 100644
--- a/src/store/modelSceneStore.js
+++ b/src/store/modelSceneStore.js
@@ -4,13 +4,23 @@ import { apiSaveEquipment, initSceneData } from "../api/tunnelScene";
 
 export const useModelSceneStore = defineStore("modelSceneData", () => {
   let equipmentList = ref([]);
+  let tunnelGatewayDtoList = ref([]);
+  let serialNumber = ref("");
+  let tunnelAlias = ref("");
+  let serialNumberPrefix = ref("");
   let requestOtherConfig = ref({});
 
   function initModelData(tunnelId, otherConfig) {
     return new Promise((resolve, reject) => {
+      console.info("🚀 ~method:otherConfig -----", otherConfig)
+      tunnelAlias.value=otherConfig.tunnelAlias
       handleSettingOtherConfig(otherConfig, requestOtherConfig);
       initSceneData(tunnelId)
         .then((res) => {
+          console.info("🚀 ~method:res -----", res)
+          serialNumber.value=res.data.serialNumber
+          serialNumberPrefix.value=res.data.serialNumberPrefix
+          tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList
           if (res.data.tunnelThreeConfig) {
             equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
           } else {
@@ -34,6 +44,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
       return new Promise((resolve, reject) => {
         initSceneData(tunnelId)
           .then((res) => {
+            console.info("🚀 ~method:initSceneData -----", res)
+            serialNumber.value=res.data.serialNumber
+            serialNumberPrefix.value=res.data.serialNumberPrefix
+            tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList
             if (res.data.tunnelThreeConfig) {
               equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
             } else {
@@ -61,6 +75,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
           pointGap
         ),
         modelEquipmentList: toRaw(equipmentList.value),
+        serialNumber:serialNumber.value,
+        tunnelAlias:tunnelAlias.value,
+        serialNumberPrefix:serialNumberPrefix.value,
+        tunnelGatewayDtoList:tunnelGatewayDtoList.value,
         ...requestOtherConfig,
       })
         .then((res) => {
@@ -91,6 +109,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
           pointGap
         ),
         modelEquipmentList: toRaw(equipmentList.value),
+        serialNumber:serialNumber.value,
+        tunnelAlias:tunnelAlias.value,
+        serialNumberPrefix:serialNumberPrefix.value,
+        tunnelGatewayDtoList:tunnelGatewayDtoList.value,
         ...requestOtherConfig,
       })
         .then((res) => {
diff --git a/src/views/debug/index.vue b/src/views/debug/index.vue
index 6e008f1..e737004 100644
--- a/src/views/debug/index.vue
+++ b/src/views/debug/index.vue
@@ -85,12 +85,12 @@ const initWebSocket = () => {
   };
   //连接成功建立的回调方法
   socket.onopen = function () {
-    console.log("ws连接成功");
+    // console.log("ws连接成功");
   }
   //接收到消息的回调方法
   socket.onmessage = function (event) {
     dataList.value.push(JSON.parse(event.data))
-    console.log("服务器返回的信息: ", JSON.parse(event.data));
+    // console.log("服务器返回的信息: ", JSON.parse(event.data));
   }
   //连接关闭的回调方法
   socket.onclose = function () {
diff --git a/src/views/device-manage/index.vue b/src/views/device-manage/index.vue
index ef05118..3e20f2a 100644
--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -76,7 +76,7 @@
                   ></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+              <el-table-column prop="serialNumber" label="序列号" align="center" >
                 <template #default="scope">
                   <!--                  {{scope.row.serialNumberOption.filter(item => item.value == scope.row.serialNumber).map(item => item.label)[0]}}?-->
                   <!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
@@ -394,10 +394,10 @@ const clearWinDataSelectedOption=()=>{
   winDataSelectedOption.value=[]
 }
 const changeWindDataSerialNumber = (value,options) => {
-  console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
+  // console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
   options?.forEach(item=>{
     if(item.value==value){
-      console.info("🚀 ~method:item.label -----", item.label)
+      // console.info("🚀 ~method:item.label -----", item.label)
       if(item.label.indexOf('PLC')>=0){
         winDataSelectedOption.value=[]
       }else{
@@ -469,7 +469,7 @@ const editEquip = debounce(() => {
     sensorList: newSensor,
     // shuntList: editFenLiuData.value,
   }
-  console.info("🚀 ~ file:index method: line:478 -----",basicData)
+  // console.info("🚀 ~ file:index method: line:478 -----",basicData)
   editEquipment(basicData).then(res => {
     if (res.code === 1000) {
       loading.close()
@@ -541,7 +541,7 @@ getList()
 <style lang="scss">
 .serialNumber{
   .el-input{
-    width: 580px!important;
+    width: 570px!important;
   }
   .el-input__suffix-inner{
     .el-icon{
@@ -556,6 +556,7 @@ getList()
   }
 }
 .el-select.serialNumber {
+  width: 580px!important;
   border-radius: 6px!important;
   border: 1px solid #05FEFF!important;
   background-color: transparent!important;
diff --git a/src/views/tunnel-manage/index.vue b/src/views/tunnel-manage/index.vue
index 8561e32..f9e70e5 100644
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -476,7 +476,7 @@ const handleSubmit = debounce((instance) => {
       ...form.value,
       tunnelGatewayDtoList: serialNumberList.value
     }
-    console.info("🚀 ~method:data -----", data)
+    // console.info("🚀 ~method:data -----", data)
     addTunnel(data).then(res => {
       if (res.code === 1000) {
         ElMessage.success('新增成功')
diff --git a/src/views/tunnel-simulate/index.vue b/src/views/tunnel-simulate/index.vue
new file mode 100644
index 0000000..5b8137a
--- /dev/null
+++ b/src/views/tunnel-simulate/index.vue
@@ -0,0 +1,1174 @@
+<template>
+  <div id="main">
+    <div class="box-top">
+      <!--            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
+      <tunnel-title v-if="showTunnelTitle" />
+      <div class="top-length">
+        <span>隧道总长度: {{ tunnelLength }}米</span>
+        <span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
+          >开始模拟</span
+        >
+        <div v-else>
+          <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
+          <span class="all-btn" @click="endSimulate">结束模拟</span>
+        </div>
+        <!--        <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
+      </div>
+      <div class="top-right" v-if="isPreview">
+        <div class="current-site">
+          当前站点：<span>{{ currentSite }}</span>
+          <el-dropdown
+            trigger="click"
+            @command="handleChangeSite"
+            popper-class="dropdown-style"
+          >
+            <div class="toggle"></div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  v-for="item in siteList"
+                  :key="item.value"
+                  :command="item"
+                  >{{ item.label }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-icon
+            size="50"
+            color="#0BE9FA"
+            style="margin-left: 50px; cursor: pointer"
+            @click="
+              isVisited = true;
+              getAlarmList();
+            "
+          >
+            <Bell />
+          </el-icon>
+        </div>
+        <div class="current-user">
+          你好！<span>{{ currentUser }}</span>
+          <span>今天是：{{ currentDate }}</span>
+          <div class="logout" @click="handleLogout"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
+    <preview-scene
+      id="tunnel-box"
+      :isedit="false"
+      :tunnelId="tunnelId"
+      :key="tunnelId"
+      :tunnelLen="tunnelLen"
+      :largeScreen="largeScreen"
+      :fanList="socketData.leftData"
+    ></preview-scene>
+    <div class="left" v-if="isPreview">
+      <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"
+      >
+        <fan-info
+          v-if="showFan"
+          :list="socketData.leftData"
+          :fan-data="largeScreenData"
+          :transducer-data="largeScreenData"
+          :loading="showFanLoading"
+          :tunnel-id="tunnelId"
+        />
+        <used-ele
+          v-if="showFan"
+          :list="socketData.leftData"
+          :loading="showUsedLoading"
+          :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" v-if="isPreview">
+      <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"
+        />
+        <air-info
+          v-if="showFan"
+          :list="socketData.sensor"
+          :windSpeed="socketData.windSpeed"
+          :air-data="largeScreenData"
+        />
+        <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"
+      >
+        <div class="btn">
+          <el-carousel-item v-for="item in tunnelList" :key="item.value">
+            {{ item.label }}
+          </el-carousel-item>
+        </div>
+      </el-carousel>
+      <div class="arrow right" @click="nextBtn"></div>
+    </div>
+  </div>
+  <div class="alarm-dialog alarm-tunnel">
+    <el-dialog
+      :close-on-click-modal="false"
+      v-model="isDetailVisited"
+      title="报警信息详情"
+      width="1500px"
+    >
+      <div class="detail">
+        <div>报警时间：</div>
+        {{ alarmDetail.alarmTime }}
+      </div>
+      <div class="detail">
+        <div>报警内容：</div>
+        {{ alarmDetail.alarmContent }}
+      </div>
+    </el-dialog>
+  </div>
+  <div class="alarm-tunnel">
+    <el-dialog
+      :close-on-click-modal="false"
+      v-model="isVisited"
+      title="报警信息"
+      width="2175px"
+      :modal="false"
+    >
+      <div class="left-top-icon"></div>
+      <div class="right-top-icon"></div>
+      <el-form
+        :model="queryParams"
+        inline
+        class="query-form"
+        ref="queryForm"
+        @submit.prevent="getAlarmList"
+        v-if="roleKey !== 'administrator'"
+      >
+        <el-form-item label="查阅状态" prop="lookupStatus">
+          <el-select
+            v-model="queryParams.lookupStatus"
+            placeholder="请选择查阅状态"
+            :fit-input-width="true"
+            :teleported="false"
+            clearable
+            filterable
+          >
+            <el-option label="已读" :value="true" />
+            <el-option label="未读" :value="false" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getAlarmList">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <div
+        class="device-table"
+        :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
+      >
+        <el-table
+          stripe
+          v-loading="loading"
+          :empty-text="tableEmptyText"
+          style="background-color: #011c29; --el-table-border-color: none"
+          :header-cell-style="{
+            backgroundColor: '#064B66',
+            color: '#fff',
+            fontSize: '40px',
+            borderBottom: 'none',
+          }"
+          :data="alarmList"
+        >
+          <el-table-column
+            prop="tunnelName"
+            label="隧道名称"
+            align="center"
+            width="400px"
+          />
+          <el-table-column
+            prop="alarmContent"
+            label="告警信息"
+            align="center"
+          />
+          <el-table-column
+            prop="alarmTime"
+            label="告警时间"
+            align="center"
+            width="480px"
+          />
+          <el-table-column
+            prop="lookupStatus"
+            label="查阅状态"
+            align="center"
+            width="200px"
+            v-if="roleKey !== 'administrator'"
+          >
+            <template #default="scope">
+              <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
+                >{{ scope.row.lookupStatus ? "已读" : "未读" }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="300px">
+            <template #default="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                style="font-weight: bold"
+                @click="handleView(scope.row)"
+                link
+                >详情
+              </el-button>
+              <el-button
+                type="danger"
+                size="mini"
+                v-if="roleKey !== 'administrator'"
+                @click="handleDelete(scope.row)"
+                link
+                >删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div
+          class="pagination"
+          :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
+        >
+          <el-pagination
+            background
+            v-model:current-page="pageInfo.pageNum"
+            v-model:page-size="pageInfo.pageSize"
+            :total="total"
+            prev-text="上一页"
+            next-text="下一页"
+            layout="prev, pager, next"
+            @current-change="handleCurrentChange"
+            :hide-on-single-page="true"
+          />
+        </div>
+      </div>
+      <div class="left-bottom-icon"></div>
+      <div class="right-bottom-icon"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue";
+import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
+import UsedEle from "@/components/content/usedEle/UsedEle.vue";
+import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
+import AirInfo from "@/components/content/airInfo/AirInfo.vue";
+import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
+import ManageBtn from "@/components/manageBtn/index.vue";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import { dateFormat } from "@/utils/date.js";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
+import {
+  getLargeScreen,
+  getLargeScreenInfo,
+  getTunnelBySiteId,
+  getAlarmInfo,
+  deleteAlarmSate,
+  getAlarmDetail,
+  updateAlarmState,
+} from "@/api/largeScreen";
+import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";
+import { initSceneData } from "@/api/tunnelScene";
+import { getTunnelList } from "@/api/tunnelManage";
+import { debounce } from "lodash";
+
+const authStore = useAuthStore();
+const router = useRouter();
+const previewId = reactive(router.currentRoute.value.params.tunnelId);
+const siteId = reactive(router.currentRoute.value.params.siteId);
+const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId);
+const selectIndex = ref(-1);
+const isVisited = ref(false);
+const isDetailVisited = ref(false);
+const showFan = ref(false);
+const drawerLeft = ref(true);
+const showTunnelTitle = ref(true);
+const isPreview = ref(true);
+const loading = ref(false);
+const tableEmptyText = ref("加载中~");
+const initialIndex = ref(0);
+const showFanLoading = ref(0);
+const showUsedLoading = ref(0);
+const showWindLoading = ref(0);
+const showBadLoading = ref(0);
+const isStartSimulate = ref(true);
+const drawerRight = ref(true);
+const showMenu = ref(false);
+const currentSiteId = ref(0);
+const currentSite = ref("");
+const siteList = ref([]);
+const alarmList = ref([]);
+const alarmDetail = ref([]);
+const totalTunnelList = ref([]);
+const currentUser = ref("");
+const currentUserId = ref(0);
+const currentDate = ref(dateFormat());
+const tunnelBtn = ref();
+const tunnelList = ref([]);
+const tunnelId = ref(0);
+const tunnelLength = ref(0);
+const constructionLength = ref(0);
+const routeList = ref([]);
+let socket = reactive("");
+let pattern = reactive(new RegExp("[A-Za-z]+"));
+let isTunnel = reactive(false);
+// const equipmentOption = ref([])
+const btnList = ref([
+  {
+    route: "/site",
+    icon: "sp_icon_zdgl.png",
+    name: "站点管理",
+  },
+  {
+    route: "/tunnel",
+    icon: "sp_icon_sdgl.png",
+    name: "隧道管理",
+  },
+  {
+    route: "/user",
+    icon: "sp_icon_yhgl.png",
+    name: "用户管理",
+  },
+  // {
+  //   route: '/system',
+  //   icon: 'sp_icon_xtgl.png',
+  //   name: '系统管理'
+  // },
+  // {
+  //   icon: 'sp_icon_mngl.png',
+  //   name: '模拟仿真'
+  // },
+]);
+const serialNumber = ref("");
+const roleKey = ref("");
+let token = getToken();
+let send = {
+  type: "ping",
+};
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10,
+});
+const queryForm = ref();
+const form = ref();
+const total = ref(10);
+const largeScreenData = ref(null);
+const socketData = reactive({
+  leftData: [],
+  windPressure: [],
+  sensor: [],
+  windSpeed: [],
+});
+let tunnelLen = computed(() => tunnelLength);
+const queryParams = reactive({
+  equipmentId: "",
+  lookupStatus: "",
+});
+onMounted(() => {
+  getList();
+  getUser();
+  getOtherInfo();
+  nextTick(() => {
+    showFan.value = true;
+  });
+});
+const startSimulate = () => {
+  isStartSimulate.value = false;
+};
+const endSimulate = () => {
+  isStartSimulate.value = true;
+};
+const changeName = (id) => {
+  for (let item of equipmentOption.value) {
+    if (item.value === id) {
+      return item.label;
+    }
+  }
+  return "";
+};
+const handleReset = () => {
+  queryForm.value.resetFields();
+  getAlarmList();
+};
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val;
+  getAlarmList();
+};
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`确认删除该报警信息吗？`, "系统提示", {
+    type: "warning",
+    closeOnClickModal: false,
+  }).then(() => {
+    deleteAlarmSate(row.alarmId).then((res) => {
+      if (res.code === 1000) {
+        ElMessage.success("删除成功");
+        getAlarmList();
+      }
+    });
+  });
+};
+//查看报警信息详情
+const handleView = (row) => {
+  getAlarmDetail(row.alarmId).then((res) => {
+    if (res.code === 1000) {
+      isDetailVisited.value = true;
+      alarmDetail.value = res.data;
+      if (roleKey.value !== "administrator") {
+        if (!row.lookupStatus) {
+          handleChangeState(row);
+        }
+      }
+    }
+  });
+};
+const handleChangeState = (row) => {
+  updateAlarmState([
+    {
+      alarmId: row.alarmId,
+      lookupStatus: true,
+      userId: currentUserId.value,
+    },
+  ]).then((res) => {
+    if (res.code === 1000) {
+      // ElMessage.success(res.msg);
+      getAlarmList();
+    } else {
+      // ElMessage.error(res.msg);
+    }
+  });
+};
+const getAlarmList = () => {
+  loading.value = true;
+  getAlarmInfo({
+    tunnelId: tunnelId.value,
+    lookupStatus: queryParams.lookupStatus,
+    ...pageInfo,
+  }).then((res) => {
+    if (res.code === 1000) {
+      loading.value = false;
+      if (res.data.rows.length === 0) {
+        tableEmptyText.value = "暂无数据~";
+      } else {
+        tableEmptyText.value = "";
+      }
+      alarmList.value = res.data.rows;
+      total.value = res.data.total;
+    }
+  });
+};
+const getUser = () => {
+  getUserInfo().then((res) => {
+    currentUser.value = res.data.user.userName;
+    currentUserId.value = res.data.user.userId;
+    roleKey.value = res.data.roles[0];
+    localStorage.setItem("roleKey", res.data.roles[0]);
+    localStorage.setItem("userId", currentUserId.value);
+  });
+};
+
+const getOtherInfo = () => {
+  getLargeScreenInfo().then((res) => {
+    if (res?.code === 1000) {
+      let routeArr = [];
+      res.data.routeList.forEach((item) => {
+        for (let btn of btnList.value) {
+          if (item === btn.route) {
+            routeArr.push(btn);
+          }
+        }
+      });
+      routeList.value = routeArr;
+      showMenu.value = true;
+      siteList.value = res.data.siteOption;
+      tunnelList.value = res.data.tunnelOption;
+
+      if (siteId) {
+        currentSiteId.value = siteId;
+        currentSite.value = localStorage.getItem("site");
+        showTunnelTitle.value = false;
+        nextTick(() => {
+          showTunnelTitle.value = true;
+        });
+        getTunnel(siteId);
+      } else {
+        getTunnel(res.data.siteOption[0].value);
+        currentSiteId.value = res.data.siteOption[0].value;
+        currentSite.value = res.data.siteOption[0].label;
+        localStorage.setItem("site", currentSite.value);
+        localStorage.setItem("currentSiteId", currentSiteId.value);
+      }
+    }
+  });
+};
+const getScreenInfo = (id) => {
+  if (id) {
+    tunnelId.value = id;
+    // equipmentOption.value = []
+    getLargeScreen(id).then((res) => {
+      if (res?.code === 1000) {
+        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.sensorList.length !== 0) {
+          // res.data.sensorList.forEach((item) => {
+          //   option = {
+          //     value: item.equipmentId,
+          //     label: item.equipmentName,
+          //   }
+          //   equipmentOption.value.push(option)
+          // })
+          res.data.sensorList.forEach((item) => {
+            if (
+              item.equipmentType === "dust" ||
+              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;
+            }
+          });
+        } else {
+          showBadLoading.value = 1;
+        }
+        largeScreenData.value = res.data;
+      } else {
+        ElMessage.warning(res.msg);
+      }
+    });
+    initSceneData(id).then((res) => {
+      tunnelLength.value = res.data.tunnelLength;
+      constructionLength.value = res.data.constructionLength;
+      // serialNumber.value = res.data.serialNumber.slice(0, -2)
+      serialNumber.value = res.data.serialNumberPrefix;
+      initWebSocket();
+    });
+  }
+};
+//这里可以获取隧道简称
+const getList = () => {
+  getTunnelList({
+    siteId: siteId,
+  }).then((res) => {
+    if (res.code === 1000) {
+      if (res.data.rows.length !== 0) {
+        isTunnel = true;
+        totalTunnelList.value = res.data.rows;
+      } else {
+        isTunnel = false;
+      }
+    }
+  });
+};
+
+let largeScreen = computed(() => largeScreenData);
+const getTunnel = (id) => {
+  getTunnelBySiteId(id).then((res) => {
+    if (res?.code === 1000) {
+      if (res.data.length === 0) {
+        if (isTunnel) {
+          ElMessage.warning("该站点下没有隧道可展示, 请添加设备后再试!");
+        } else {
+          ElMessage.warning("该站点下没有隧道, 请新增隧道后再试!");
+        }
+      } else {
+        if (!pattern.test(previewId)) {
+          getScreenInfo(previewId);
+          tunnelList.value.forEach((item, index) => {
+            if (item.value == previewId) {
+              initialIndex.value = index;
+              tunnelBtn.value.setActiveItem(index);
+            }
+          });
+        } else {
+          tunnelList.value = res.data;
+          getScreenInfo(res.data[0]?.value);
+        }
+      }
+    }
+  });
+};
+const changeTunnel = (e) => {
+  if (socket) {
+    socket.close();
+  }
+  let newObj = {};
+  tunnelList.value.forEach((item, index) => {
+    if (index === e) {
+      newObj = item;
+    }
+  });
+  showFan.value = false;
+  showBadLoading.value = 0;
+  showWindLoading.value = 0;
+  showFanLoading.value = 0;
+  // showUsedLoading.value = 0
+  pageInfo.pageNum = 1;
+  getScreenInfo(newObj.value);
+  nextTick(() => {
+    showFan.value = true;
+  });
+};
+const manageSelect = (index) => {
+  if (index === "站点管理") {
+    if (currentUserId.value) {
+      router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
+    }
+  } else if (index === "隧道管理") {
+    if (currentSiteId.value && currentUserId.value) {
+      router.push(
+        "/tunnel/" +
+          localStorage.getItem("currentSiteId") +
+          "/byHome/" +
+          currentUserId.value
+      );
+    }
+  } else if (index === "用户管理") {
+    if (currentSiteId.value) {
+      router.push("/user/" + localStorage.getItem("currentSiteId"));
+    }
+  }
+  if (socket) {
+    socket.close();
+  }
+};
+const handleChangeSite = debounce((item) => {
+  if (socket) {
+    socket.close();
+  }
+  currentSite.value = item.label;
+  currentSiteId.value = item.value;
+  getTunnel(item.value);
+  showFan.value = false;
+  nextTick(() => {
+    showFan.value = true;
+  });
+  localStorage.setItem("site", currentSite.value);
+  localStorage.setItem("currentSiteId", currentSiteId.value);
+  if (tunnelIdFlag) {
+    router.push("/" + tunnelIdFlag + "/" + currentSiteId.value);
+  }
+  showTunnelTitle.value = false;
+  nextTick(() => {
+    showTunnelTitle.value = true;
+  });
+}, 100);
+const closeLeft = () => {
+  drawerLeft.value = !drawerLeft.value;
+};
+const closeRight = () => {
+  drawerRight.value = !drawerRight.value;
+};
+const handleLogout = () => {
+  ElMessageBox.confirm(`确认退出登录吗`, "系统提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    authStore.userLogout();
+    router.push("/login");
+  });
+};
+const previousBtn = () => {
+  tunnelBtn.value.prev();
+};
+const nextBtn = () => {
+  tunnelBtn.value.next();
+};
+
+const initWebSocket = () => {
+  // let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
+  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${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}`;
+  socket = new WebSocket(wsUrl);
+  //连接发生错误的回调方法
+  socket.onerror = function () {
+    console.log("ws连接发生错误");
+  };
+  //连接成功建立的回调方法
+  socket.onopen = function () {
+    // console.log("ws连接成功");
+  };
+  //接收到消息的回调方法
+  socket.onmessage = function (event) {
+    // console.log("服务器返回的信息: ", JSON.parse(event.data));
+    const type = JSON.parse(event.data).type;
+    const data = JSON.parse(event.data).data;
+    if (type === "equipment") {
+      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") {
+          socketData.sensor = data;
+        } else if (item.typeKey === "windSpeed") {
+          socketData.windSpeed = data;
+        }
+      });
+    }
+  };
+  //连接关闭的回调方法
+  socket.onclose = function () {
+    console.log("ws连接关闭");
+    // initWebSocket()
+  };
+  setInterval(() => {
+    socket.send(JSON.stringify(send));
+  }, 30000);
+};
+</script>
+
+<style lang="scss">
+.el-drawer__header {
+  display: none;
+}
+
+.el-drawer__body {
+  padding: 160px 68px 0 68px;
+  overflow: hidden;
+}
+
+.el-dropdown__popper.el-popper {
+  background: transparent;
+  //border: none;
+  border: 1px solid #0e7daa;
+  border-radius: 10px;
+}
+
+.dropdown-style {
+  padding: 20px;
+  margin-left: 50px;
+  width: 150px;
+  background: rgba(7, 35, 72, 0.9);
+
+  .el-scrollbar__wrap {
+    .el-dropdown__list {
+      .el-dropdown-menu {
+        background-color: rgba(7, 35, 72, 0.9);
+        border-radius: 10px;
+        padding: 5px;
+
+        .el-dropdown-menu__item {
+          color: #ffffff;
+          //border:none;
+          padding: 5px;
+
+          border-bottom: 1px solid #05feff;
+
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+
+        .el-dropdown-menu__item.hover,
+        .el-dropdown-menu__item:hover {
+          background-color: transparent !important;
+          color: #f7b500;
+        }
+      }
+    }
+  }
+
+  .is-light {
+    background: rgba(7, 35, 72, 0.9);
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.all-btn {
+  cursor: pointer;
+  padding: 10px 20px;
+  border-radius: 11px;
+  border: 2px solid #08b7b8;
+  color: #0be9fa;
+  text-align: center;
+  margin-left: 40px;
+  font-size: 38px;
+  &:hover {
+    color: #f7b500;
+  }
+}
+
+#main {
+  height: 100%;
+  width: 100%;
+  background-color: #072348;
+
+  #tunnel-box {
+    height: 100%;
+  }
+}
+
+.alarm-dialog {
+  :deep(.el-dialog) {
+    height: auto !important;
+    margin: 820px auto 0 auto;
+  }
+}
+
+:deep(.el-table__body-wrapper) {
+  height: 90px;
+}
+
+:deep(.el-table--fit) {
+  width: auto;
+  //height: 600px;
+  background-color: transparent !important;
+
+  .el-loading-mask {
+    background: rgba(6, 34, 71, 0.78);
+
+    .el-loading-spinner {
+      .circular {
+        width: 150px;
+        height: 150px;
+      }
+    }
+  }
+}
+
+:deep(.el-table__empty-block) {
+  height: 200px !important;
+
+  //display: none;
+  .el-table__empty-text {
+    font-size: 60px;
+    color: #08b7b8;
+  }
+}
+
+.query-form {
+  :deep(.el-form-item__label) {
+    font-size: 45px;
+    height: 70px;
+    line-height: 70px;
+    color: #ffffff;
+  }
+
+  :deep(.el-select__wrapper.is-hovering) {
+    .el-select__suffix {
+      .el-icon {
+        font-size: 55px;
+      }
+    }
+  }
+
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background-color: #064b66 !important;
+  }
+
+  :deep(.el-select__wrapper) {
+    height: 70px;
+    line-height: 70px;
+    background-color: transparent;
+    border: 1px solid #08b7b8;
+    font-size: 35px;
+    width: 356px;
+
+    .el-select__suffix {
+      .el-icon {
+        font-size: 55px;
+      }
+    }
+
+    .el-select__placeholder {
+      color: #ffffff;
+      height: 70px;
+      line-height: 70px;
+    }
+
+    .el-select__placeholder.is-transparent {
+      height: 70px;
+      line-height: 70px;
+    }
+  }
+
+  :deep(.el-form-item__content) {
+    .el-select__popper {
+      margin-top: -12px !important;
+      background: #072247 !important;
+      border: 1px solid #0f82af !important;
+
+      .el-select-dropdown__item {
+        font-size: 38px !important;
+        height: 70px !important;
+        line-height: 70px !important;
+
+        > span {
+          color: #ffffff;
+        }
+      }
+
+      .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
+        background-color: #064b66 !important;
+      }
+    }
+
+    .el-button {
+      height: 70px;
+      font-size: 40px;
+      border-radius: 10px;
+    }
+
+    .el-button--primary {
+      background: #064b66;
+    }
+
+    .el-input {
+      width: 380px;
+      height: 70px;
+
+      .el-input__wrapper {
+        font-size: 40px;
+        background-color: transparent;
+        border: 1px solid #08b7b8;
+        box-shadow: none;
+
+        .el-input__inner {
+          height: 70px;
+          color: #ffffff;
+        }
+
+        .el-input__suffix-inner {
+          .el-icon {
+            font-size: 55px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.device-table {
+  margin-top: 7px;
+
+  :deep(.el-button) {
+    font-size: 40px;
+  }
+
+  .active {
+    color: #ffffff;
+    background: #0f7da9;
+  }
+
+  .wind-switch {
+    margin-left: 65px;
+  }
+
+  .switch {
+    margin-top: 22px;
+    display: flex;
+    width: 200px;
+    height: 50px;
+    border-radius: 6px;
+    border: 1px solid #05feff;
+    overflow: hidden;
+    color: #51a2b3;
+    line-height: 40px;
+    font-size: 36px;
+
+    & > div {
+      flex: 1;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+
+  :deep(.el-table--fit) {
+    //width: 1780px !important;
+    width: auto;
+  }
+
+  :deep(.cell) {
+    height: 80px;
+    line-height: 80px;
+    color: #fff;
+    font-size: 38px;
+  }
+
+  :deep(.el-table tr) {
+    background-color: #1c5971;
+  }
+
+  :deep(
+      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
+    ) {
+    background-color: #1c5971;
+  }
+
+  :deep(.el-table__row--striped) {
+    background-color: #13849c !important;
+  }
+
+  :deep(
+      .el-table--striped
+        .el-table__body
+        tr.el-table__row--striped
+        td.el-table__cell
+    ) {
+    background-color: #13849c !important;
+  }
+
+  :deep(.el-table__cell) {
+    .el-input {
+      width: 180px;
+      height: 53px;
+    }
+
+    .el-input__wrapper {
+      border-radius: 6px;
+      border: 1px solid #05feff;
+      background-color: transparent;
+
+      .el-input__inner {
+        color: #ffffff;
+        font-size: 40px;
+        height: auto;
+        line-height: normal;
+      }
+    }
+  }
+
+  :deep(.el-table__inner-wrapper::before) {
+    display: none;
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  bottom: 0;
+  color: #60ddde;
+  font-size: 38px;
+  font-weight: bold;
+
+  :deep(.el-pagination.is-background) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+    }
+
+    .el-pager {
+      li {
+        margin: 0 0 0 40px;
+      }
+
+      li.is-active {
+        background-color: #60ddde;
+      }
+    }
+  }
+
+  > span:first-child {
+    margin-right: 60px;
+  }
+
+  > span:last-child {
+    margin-left: 71px;
+  }
+
+  :deep(.btn-prev) {
+    background-color: transparent;
+    font-size: 38px;
+    font-weight: bold;
+    color: #60ddde;
+    margin-right: 20px;
+  }
+
+  :deep(.btn-next) {
+    background-color: transparent;
+    font-size: 38px;
+    font-weight: bold;
+    color: #60ddde;
+    margin-left: 30px;
+  }
+
+  :deep(.el-pager li.is-active) {
+    width: 70px;
+    height: 70px;
+    background: #60ddde;
+    border-radius: 50%;
+    color: #071f40;
+    font-size: 38px;
+    font-weight: bold;
+  }
+
+  :deep(.el-pager li) {
+    margin-left: 40px !important;
+  }
+
+  :deep(.el-pager li:not(.is-active)) {
+    width: 70px;
+    height: 70px;
+    border: 1px solid #60ddde;
+    border-radius: 50%;
+    background-color: transparent;
+    font-size: 38px;
+    font-weight: bold;
+    color: #60ddde;
+  }
+}
+</style>
diff --git a/src/views/tunnel-simulate/tunnel-list.vue b/src/views/tunnel-simulate/tunnel-list.vue
new file mode 100644
index 0000000..8450329
--- /dev/null
+++ b/src/views/tunnel-simulate/tunnel-list.vue
@@ -0,0 +1,968 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="handleGoSiteOrIndex">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="site-name">
+        {{ siteName }}
+      </div>
+      <tunnel-title/>
+      <div class="all-del-btn" v-if="showOperation">
+        <div class="all-btn" style=" margin-right: 40px;" v-if="showAddIcon" @click="handleAdd">
+          添加
+        </div>
+        <div class="all-btn" @click="handleChooseAll">
+          全选
+        </div>
+        <div class="all-btn del-btn" @click="handleMoreDelete">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="box-content" >
+      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
+        <div class="top">
+          <span>{{ item.tunnelName }}</span>
+          <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
+          <el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <span v-else>默认</span>
+        </div>
+        <div class="box-center">
+          <div>
+            <!--            @click="handlePreview(item.tunnelId)"-->
+            <div class="left-img"></div>
+            <div style="display: flex;justify-content: center">
+              <div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.tunnelId)">
+                <div class="edit-icon"></div>
+                <div>去模拟</div>
+              </div>
+            </div>
+          </div>
+          <div class="tunnel-right">
+            <div class="icons-block">
+              <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
+                <div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
+                <span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="site-box add-box" @click="handleAdd" v-if="showOperation">
+        <div class="add-icon"></div>
+        <div style="cursor: pointer">添加隧道</div>
+      </div>
+    </div>
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
+      <div class="siteId">
+        <span>{{ title }}</span>
+      </div>
+      <el-form :model="form" :label-position="right" label-width="230px" :rules="formRules" ref="formInstance">
+        <el-form-item label="隧道名称" prop="tunnelName">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称" prop="tunnelAlias">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
+        <el-form-item label="隧道长度" prop="totalLength">
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <el-form-item label="施工长度" prop="constructionLength">
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="风机初始频率" prop="fanInitialFrequency">
+          <el-input type="number" v-model="form.fanInitialFrequency" placeholder="请输入风机初始频率"/>
+        </el-form-item>
+        <el-form-item label="爆破量级" prop="burstLevel">
+          <el-input type="number" v-model="form.burstLevel" placeholder="请输入爆破量级"/>
+        </el-form-item>
+        <el-form-item label="是否默认">
+          <el-radio-group v-model="form.isDefault">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="隧道备注">
+          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
+        </el-form-item>
+      </el-form>
+      <div class="btns">
+        <div class="cancel-btn" @click="isVisited=false">
+          取消
+        </div>
+        <div class="sure-btn" @click="handleSubmit(formInstance)">
+          确定
+        </div>
+      </div>
+    </el-dialog>
+    <div class="pagination">
+      <span @click="firstPage" v-if="showFirst">首页</span>
+      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
+                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
+      <span @click="lastPage" v-if="showFirst">尾页</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
+import {getSiteDrawing, getSiteDetail} from "@/api/site";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getTunnelBySiteId} from "@/api/largeScreen";
+import {debounce} from 'lodash'
+
+const serialNumberList = ref([
+  {
+    serialNumber: '',
+    serialNumberType: ''
+  }
+])
+
+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
+const validateSerialNumberPrefix = (rule, value) => {
+  return value.length > 13 && value.slice(0, -2) == form.value.serialNumberPrefix;
+}
+const router = useRouter()
+const siteImage = ref()
+const showAddIcon = ref(false)
+const params = router.currentRoute.value.params;
+const siteId = reactive(params.siteId)
+const userId = reactive(params.userId)
+const type = reactive(params.type)
+const formRules = ref({
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+})
+const showFirst = ref(false)
+const showOperation = ref(true)
+const formInstance = ref()
+const tunnelList = ref([])
+const iconsList = ref([
+  {
+    icon: 'sd_icon_fj.png',
+    name: '风机',
+    type: 'frequency',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_sd.png',
+    name: '湿度',
+    type: 'humidness',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fy.png',
+    name: '风压',
+    type: 'windPressure',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_yq.png',
+    name: '氧气',
+    type: 'oxygen',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fs.png',
+    name: '风速',
+    type: 'windSpeed',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fc.png',
+    name: '粉尘',
+    type: 'dust',
+    num: 1
+  },
+  {
+    icon: 'sd_icon_wd.png',
+    name: '温度',
+    type: 'temperature',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_qt.png',
+    name: '有害气体',
+    type: 'harmfulGas',
+    num: 0
+  },
+])
+const title = ref('新增隧道')
+const showNull = ref(false);
+const isVisited = ref(false);
+const tunnelIds = ref([])
+const tunnelNameList = ref([])
+const siteName = ref(localStorage.getItem('site'))
+const form = ref({
+  tunnelName: '',
+  tunnelAlias: '',
+  serialNumberPrefix: '',
+  serialNumber: '',
+  // serialNumberOne: '',
+  totalLength: '',
+  referenceFrequency: '',
+  upTime: 0,
+  upFrequency: '',
+  dropTime: 0,
+  dropFrequency: 0,
+  remarks: '',
+  isDefault: false
+});
+const isEdit = ref(false)
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 12
+});
+const total = ref(0);
+onMounted(() => {
+  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
+})
+const handleGoToSimulateTunnel = (tunnelId) => {
+  router.push('/simulate/' + tunnelId)
+}
+const addSerialNumber = () => {
+  serialNumberList.value.push({
+    serialNumber: '',
+    serialNumberType: '',
+  })
+}
+const delSerialNumber = (index) => {
+  serialNumberList.value.splice(index, 1)
+}
+const getSiteImg = () => {
+  showNull.value = false
+  getSiteDrawing(siteId).then((res) => {
+    if (res.code === 1000) {
+      if (res.data.drawingData === null) {
+        // ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
+        //   confirmButtonText: '确定',
+        //   cancelButtonText: '取消',
+        //   type: 'warning'
+        // }).then(() => {
+        //   router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+        // }).catch(()=>{
+        showNull.value = true
+        // })
+      } else {
+        showNull.value = false
+        siteImage.value = res.data.drawingData
+      }
+    }
+  });
+}
+const clickHot = (id) => {
+  console.log('点击热区===============')
+  router.push('/' + id + '/' + siteId)
+}
+// const testArr=[]
+const clickHandler = (id) => {
+  // let obj=e.offsetX+','+e.offsetY
+  // testArr.push(obj)
+  // console.log('正确数值',testArr.map(item=>item).join())
+  // console.log('点击',e.offsetX+','+e.offsetY+',')
+  // console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
+}
+const handleGoSiteOrIndex = () => {
+  if (type === 'bySite') {
+    router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+  } else if (type === 'byHome') {
+    router.push('/' + 'siteToHome/' + siteId)
+  }
+}
+//根据站点id获取隧道信息
+const getTunnel = (id) => {
+  getSiteDetail(id).then((res) => {
+    if (res?.code === 1000) {
+      siteName.value = res.data.siteName
+    }
+  });
+}
+getTunnel(1)
+const getList = () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  getTunnelList({
+    siteId: 1,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      total.value = res.data.total
+      tunnelList.value = res.data.rows
+      showFirst.value = (total.value / pageInfo.pageSize) > 1;
+      showAddIcon.value = (total.value / pageInfo.pageSize) == 1;
+      // siteName.value = res.data.siteName
+    } else {
+      ElMessage.warning(res.msg)
+    }
+    loading.close()
+  })
+}
+getList()
+const firstPage = () => {
+  pageInfo.pageNum = 1
+  getList()
+}
+const lastPage = () => {
+  pageInfo.pageNum = total.value / pageInfo.pageSize
+  getList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getList()
+}
+const handleSubmit = debounce((instance) => {
+  if (serialNumberList.value?.length > 0 && !serialNumberList.value[0].serialNumber && !serialNumberList.value[0].serialNumberType) {
+    serialNumberList.value = []
+  }
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    const data = {
+      siteId: siteId,
+      ...form.value,
+      tunnelGatewayDtoList: serialNumberList.value
+    }
+    // console.info("🚀 ~method:data -----", data)
+    addTunnel(data).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success('新增成功')
+        getList()
+        isVisited.value = false
+      } else {
+        ElMessage.warning(res.msg)
+      }
+    })
+  })
+}, 100)
+//预览隧道
+const handlePreview = (id) => {
+  if (id) {
+    getTunnelBySiteId(siteId).then((res) => {
+      if (res?.code === 1000) {
+        if (res.data.filter((item) => item.value == id).length === 0) {
+          ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
+        } else {
+          router.push('/' + id + '/' + siteId)
+        }
+      }
+    });
+  }
+}
+const handleGoToEditTunnel = (tunnelId) => {
+  isEdit.value = true
+  if (type === 'bySite') {
+    router.push('/edit/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/edit/' + tunnelId + '/byHome/' + userId)
+  }
+}
+const handleChooseAll = debounce(() => {
+  tunnelList.value.map(item => {
+    item.checked = !item.checked
+    if (item.checked && !item.isDefault) {
+      tunnelIds.value.push(item.tunnelId)
+    } else if (!item.checked && !item.isDefault) {
+      tunnelIds.value.map((newItem, index) => {
+        if (newItem === item.tunnelId) {
+          tunnelIds.value.splice(index, 1)
+        }
+      })
+    }
+  })
+}, 100)
+const handleEditDevice = (tunnelId) => {
+  if (type === 'bySite') {
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
+  } else if (type === 'byHome') {
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
+  }
+}
+const restFrom = () => {
+  form.value = {
+    tunnelName: '',
+    tunnelAlias: '',
+    serialNumber: '',
+    totalLength: '',
+    referenceFrequency: '',
+    upTime: 0,
+    upFrequency: '',
+    dropTime: 0,
+    dropFrequency: '',
+    remarks: '',
+    isDefault: false
+  }
+}
+const handleAdd = () => {
+  restFrom()
+  title.value = '新增隧道'
+  isVisited.value = true
+  serialNumberList.value = [
+    // {
+    //   serialNumber: '',
+    //   serialNumberType:''
+    // }
+  ]
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
+}
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
+}
+const handleClickSite = (type) => {
+  if (type.checked) {
+    tunnelIds.value.push(type.tunnelId)
+    tunnelNameList.value.push(type.tunnelName)
+  } else {
+    tunnelIds.value.map((item, index) => {
+      if (item === type.tunnelId) {
+        tunnelIds.value.splice(index, 1)
+      }
+    })
+    tunnelNameList.value.map((item, index) => {
+      if (item === type.tunnelName) {
+        tunnelNameList.value.splice(index, 1)
+      }
+    })
+  }
+}
+const handleMoreDelete = debounce(() => {
+  if (tunnelIds.value.length === 0) {
+    ElMessage.warning('请先选择隧道进行删除')
+  } else {
+    ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      customClass: 'delBox'
+    }).then(() => {
+      deleteTunnel(tunnelIds.value).then(res => {
+        if (res.code === 1000) {
+          ElMessage.success(res.msg)
+          getList()
+          tunnelIds.value = []
+          tunnelNameList.value = []
+        } else {
+          ElMessage.error(res.msg)
+        }
+      })
+    })
+  }
+}, 100)
+
+</script>
+
+<style scoped lang="scss">
+.serialNumber-name-overflow-hidden {
+
+}
+
+.showNull {
+  margin-top: 150px;
+  font-size: 60px;
+  color: #05FEFF;
+}
+
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.site-name {
+  position: absolute;
+  left: 250px;
+  z-index: 2;
+  margin-left: 120px;
+  height: 61px;
+  font-size: 46px;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 61px;
+}
+
+.model-change {
+  z-index: 55;
+  position: absolute;
+  left: 700px;
+  font-size: 46px;
+  color: #05FEFF;
+  display: flex;
+  //flex-direction: column;
+  .model {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:last-child {
+      margin-left: 30px
+    }
+
+    > span:hover {
+      text-decoration: underline;
+    }
+  }
+
+
+  .card-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_tzdh.png');
+    margin-right: 16px;
+  }
+
+  .img-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_dtdh.png');
+    margin-right: 16px;
+  }
+}
+
+:deep(.el-radio-group) {
+  margin-top: 10px;
+}
+
+:deep(.el-radio__label) {
+  color: #FFFFFF;
+  font-size: 38px;
+}
+
+:deep(.el-radio__inner) {
+  width: 40px;
+  height: 40px;
+  border-radius: 25px;
+  border: 4px solid #05FEFF;
+  background-color: transparent;
+}
+
+:deep(.el-radio__input.is-checked+.el-radio__label) {
+  color: #FFFFFF;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner ) {
+  background: #064B66;
+  border-color: #05FEFF !important;
+}
+
+:deep(.el-radio__inner::after) {
+  width: 18px;
+  height: 18px;
+  background: #05FEFF;
+}
+
+:deep(.el-dialog) {
+  border: 2px solid #05FEFF;
+  background: #0D6578;
+  border-radius: 20px;
+  padding: 30px 40px;
+  box-sizing: border-box;
+  //margin: 458px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-top: 40px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 38px;
+  font-family: MicrosoftYaHei;
+  color: #FFFFFF;
+  margin-right: 12px;
+  line-height: 50px;
+}
+
+:deep(.el-input) {
+  height: 75px;
+
+  .el-input__wrapper {
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+
+    .el-input__inner {
+      height: auto;
+      color: #fff;
+      font-size: 38px;
+    }
+
+    .el-input__suffix-inner {
+      font-size: 30px;
+      color: #08B7B8;
+      line-height: 40px;
+      font-weight: bold;
+    }
+  }
+}
+
+.siteId {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 60px 0;
+  font-size: 50px;
+  color: #FFFFFF;
+}
+
+.tunnel-bgc {
+  background-color: #072348;
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
+      .all-btn {
+        cursor: pointer;
+        padding-left: 53px;
+        width: 178px;
+        height: 70px;
+        line-height: 70px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 38px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .img-box {
+    margin: 100px;
+  }
+
+  .box-content::after {
+    content: '';
+    flex: 0.65;
+    justify-content: flex-end;
+  }
+
+  .box-content {
+    height: 1850px;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 67px;
+    //padding-right: 70px;
+    align-content: flex-start;
+    justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .add-box {
+      cursor: pointer;
+      font-weight: bold;
+      color: #60DDDE;
+      font-size: 38px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .add-icon {
+        margin-top: 110px;
+        margin-bottom: 87px;
+        width: 220px;
+        height: 220px;
+        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+      }
+    }
+
+    .site-box {
+      //cursor: pointer;
+      margin-top: 50px;
+      margin-right: 1.5%;
+      padding: 40px 30px;
+      width: 925px;
+      height: 550px;
+      background-image: url('@/assets/images/tunnel/zdgl_bj.png');
+      //box-sizing: border-box;
+      position: relative;
+
+      //&:hover {
+      //  background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
+      //}
+      //
+      //&:nth-child(4n) {
+      //  margin-right: 0;
+      //}
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 45px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 50px;
+
+        > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        > span:nth-child(2) {
+          font-size: 38px;
+          color: #5CE4F2;
+        }
+
+
+        > span:last-child {
+          margin-left: 5px;
+          width: 95px;
+          padding: 1px 8px;
+          font-size: 32px;
+          border: 2px solid #05FEFF;
+          border-radius: 10px;
+          position: relative;
+        }
+      }
+
+      .box-center {
+        display: flex;
+
+        //flex-direction: column;
+        > div:first-child {
+
+          > div:nth-child(2) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-right: 30px;
+          }
+        }
+
+        .left-img {
+          //cursor: pointer;
+          margin-top: 110px;
+          margin-right: 50px;
+          width: 340px;
+          height: 148px;
+          background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
+        }
+
+        .edit-btn {
+          cursor: pointer;
+          margin-top: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-size: 30px;
+          color: #60DDDE;
+          //margin-left: 175px;
+
+          .edit-icon {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/tunnel/device.png');
+            margin-right: 10px;
+          }
+
+          .edit-icon-two {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/tunnel/device.png');
+            margin-right: 10px;
+          }
+        }
+
+        .tunnel-right {
+          padding-top: 40px;
+
+          > div:first-child {
+            display: flex;
+            align-items: center;
+            font-size: 36px;
+            color: #FB3838;
+
+            .fan-icon {
+              margin-right: 10px;
+              width: 32px;
+              height: 32px;
+              background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
+            }
+          }
+
+          .icons-block {
+            margin-top: 50px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .icon-text {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              color: #FFFFFF;
+              font-size: 34px;
+              margin-right: 17px;
+              margin-bottom: 30px;
+
+              &:first-child {
+                margin-right: 37px;
+              }
+
+              &:nth-child(2n) {
+                margin-right: 0;
+              }
+
+              .icon {
+                width: 32px;
+                height: 32px;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    bottom: 50px;
+    color: #60DDDE;
+    font-size: 38px;
+    font-weight: bold;
+
+    :deep(.el-pagination.is-background ) {
+      .btn-next, .btn-prev {
+        background-color: transparent;
+      }
+
+      .el-pager {
+        li {
+          margin: 0 0 0 40px;
+        }
+
+        li.is-active {
+          background-color: #60DDDE;
+        }
+      }
+    }
+
+    > span:first-child {
+      margin-right: 60px;
+    }
+
+    > span:last-child {
+      margin-left: 71px;
+    }
+
+    :deep(.btn-prev) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-right: 20px;
+
+    }
+
+    :deep(.btn-next) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-left: 30px;
+    }
+
+    :deep(.el-pager li.is-active ) {
+      width: 70px;
+      height: 70px;
+      background: #60DDDE;
+      border-radius: 50%;
+      color: #071F40;
+      font-size: 38px;
+      font-weight: bold;
+    }
+
+    :deep(.el-pager li) {
+      margin-left: 40px;
+    }
+
+    :deep(.el-pager li:not(.is-active) ) {
+      width: 70px;
+      height: 70px;
+      border: 1px solid #60DDDE;
+      border-radius: 50%;
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+    }
+  }
+}
+</style>
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 067aaa3..4503123 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,7 +1,12 @@
 <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"
+      />
       <tunnel-title v-if="showTunnelTitle" />
       <div class="top-length">
         <span>隧道总长度: {{ tunnelLength }}米</span>
@@ -10,19 +15,32 @@
       <div class="top-right">
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
-          <el-dropdown trigger="click" @command="handleChangeSite" popper-class="dropdown-style">
+          <el-dropdown
+            trigger="click"
+            @command="handleChangeSite"
+            popper-class="dropdown-style"
+          >
             <div class="toggle"></div>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-        item.label
-      }}
+                <el-dropdown-item
+                  v-for="item in siteList"
+                  :key="item.value"
+                  :command="item"
+                  >{{ item.label }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-          <el-icon size="50" color="#0BE9FA" style="margin-left: 50px;cursor: pointer"
-            @click="isVisited = true; getAlarmList()">
+          <el-icon
+            size="50"
+            color="#0BE9FA"
+            style="margin-left: 50px; cursor: pointer"
+            @click="
+              isVisited = true;
+              getAlarmList();
+            "
+          >
             <Bell />
           </el-icon>
         </div>
@@ -35,27 +53,73 @@
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
-    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-      :largeScreen="largeScreen" :fanList="socketData.leftData"></preview-scene>
+    <preview-scene
+      id="tunnel-box"
+      :isedit="false"
+      :tunnelId="tunnelId"
+      :key="tunnelId"
+      :tunnelLen="tunnelLen"
+      :largeScreen="largeScreen"
+      :fanList="socketData.leftData"
+      :devRealtimeData="socketData"
+    ></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">
-        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
-        <used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData" />
+      <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"
+      >
+        <fan-info
+          v-if="showFan"
+          :list="socketData.leftData"
+          :fan-data="largeScreenData"
+          :transducer-data="largeScreenData"
+          :loading="showFanLoading"
+          :tunnel-id="tunnelId"
+        />
+        <used-ele
+          v-if="showFan"
+          :list="socketData.leftData"
+          :loading="showUsedLoading"
+          :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" />
-        <air-info v-if="showFan" :list="socketData.sensor" :windSpeed="socketData.windSpeed"
-          :air-data="largeScreenData" />
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
-          :loading="showBadLoading" />
+      <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"
+        />
+        <air-info
+          v-if="showFan"
+          :list="socketData.sensor"
+          :windSpeed="socketData.windSpeed"
+          :air-data="largeScreenData"
+        />
+        <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>
@@ -74,7 +138,12 @@
     </div>
   </div>
   <div class="alarm-dialog alarm-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情" width="1500px">
+    <el-dialog
+      :close-on-click-modal="false"
+      v-model="isDetailVisited"
+      title="报警信息详情"
+      width="1500px"
+    >
       <div class="detail">
         <div>报警时间：</div>
         {{ alarmDetail.alarmTime }}
@@ -86,14 +155,32 @@
     </el-dialog>
   </div>
   <div class="alarm-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息" width="2175px" :modal="false">
+    <el-dialog
+      :close-on-click-modal="false"
+      v-model="isVisited"
+      title="报警信息"
+      width="2175px"
+      :modal="false"
+    >
       <div class="left-top-icon"></div>
       <div class="right-top-icon"></div>
-      <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getAlarmList"
-        v-if="roleKey !== 'administrator'">
+      <el-form
+        :model="queryParams"
+        inline
+        class="query-form"
+        ref="queryForm"
+        @submit.prevent="getAlarmList"
+        v-if="roleKey !== 'administrator'"
+      >
         <el-form-item label="查阅状态" prop="lookupStatus">
-          <el-select v-model="queryParams.lookupStatus" placeholder="请选择查阅状态" :fit-input-width="true"
-            :teleported="false" clearable filterable>
+          <el-select
+            v-model="queryParams.lookupStatus"
+            placeholder="请选择查阅状态"
+            :fit-input-width="true"
+            :teleported="false"
+            clearable
+            filterable
+          >
             <el-option label="已读" :value="true" />
             <el-option label="未读" :value="false" />
           </el-select>
@@ -113,26 +200,48 @@
           <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px" />
           <el-table-column prop="lookupStatus" label="查阅状态" align="center" width="200px"
             v-if="roleKey !== 'administrator'">
-
             <template #default="scope">
-              <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'">{{ scope.row.lookupStatus ? '已读' : '未读' }}
+              <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
+                >{{ scope.row.lookupStatus ? "已读" : "未读" }}
               </el-tag>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" width="300px">
             <template #default="scope">
-              <el-button type="primary" size="mini" style="font-weight: bold" @click="handleView(scope.row)" link>详情
+              <el-button
+                type="primary"
+                size="mini"
+                style="font-weight: bold"
+                @click="handleView(scope.row)"
+                link
+                >详情
               </el-button>
-              <el-button type="danger" size="mini" v-if="roleKey !== 'administrator'" @click="handleDelete(scope.row)"
-                link>删除
+              <el-button
+                type="danger"
+                size="mini"
+                v-if="roleKey !== 'administrator'"
+                @click="handleDelete(scope.row)"
+                link
+                >删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
-        <div class="pagination" :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }">
-          <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
-            :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
-            @current-change="handleCurrentChange" :hide-on-single-page="true" />
+        <div
+          class="pagination"
+          :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
+        >
+          <el-pagination
+            background
+            v-model:current-page="pageInfo.pageNum"
+            v-model:page-size="pageInfo.pageSize"
+            :total="total"
+            prev-text="上一页"
+            next-text="下一页"
+            layout="prev, pager, next"
+            @current-change="handleCurrentChange"
+            :hide-on-single-page="true"
+          />
         </div>
       </div>
       <div class="left-bottom-icon"></div>
@@ -142,7 +251,7 @@
 </template>
 
 <script setup>
-import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue"
+import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue";
 import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
 import UsedEle from "@/components/content/usedEle/UsedEle.vue";
 import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
@@ -160,18 +269,18 @@ import {
   getAlarmInfo,
   deleteAlarmSate,
   getAlarmDetail,
-  updateAlarmState
+  updateAlarmState,
 } from "@/api/largeScreen";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { getUserInfo } from "@/api/login";
 import { initSceneData } from "@/api/tunnelScene";
 import { getTunnelList } from "@/api/tunnelManage";
-import { debounce } from 'lodash'
+import { debounce } from "lodash";
 const authStore = useAuthStore();
 const router = useRouter();
-const previewId = reactive(router.currentRoute.value.params.tunnelId)
-const siteId = reactive(router.currentRoute.value.params.siteId)
-const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId)
+const previewId = reactive(router.currentRoute.value.params.tunnelId);
+const siteId = reactive(router.currentRoute.value.params.siteId);
+const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId);
 const selectIndex = ref(-1);
 const isVisited = ref(false);
 const isDetailVisited = ref(false);
@@ -180,19 +289,19 @@ const drawerLeft = ref(true);
 const showTunnelTitle = ref(true);
 const loading = ref(false);
 const tableEmptyText = ref("加载中~");
-const initialIndex = ref(0)
-const showFanLoading = ref(0)
-const showUsedLoading = ref(0)
-const showWindLoading = ref(0)
-const showBadLoading = ref(0)
+const initialIndex = ref(0);
+const showFanLoading = ref(0);
+const showUsedLoading = ref(0);
+const showWindLoading = ref(0);
+const showBadLoading = ref(0);
 const drawerRight = ref(true);
 const showMenu = ref(false);
 const currentSiteId = ref(0);
 const currentSite = ref("");
-const siteList = ref([])
-const alarmList = ref([])
-const alarmDetail = ref([])
-const totalTunnelList = ref([])
+const siteList = ref([]);
+const alarmList = ref([]);
+const alarmDetail = ref([]);
+const totalTunnelList = ref([]);
 const currentUser = ref("");
 const currentUserId = ref(0);
 const currentDate = ref(dateFormat());
@@ -204,23 +313,23 @@ const constructionLength = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
 let pattern = reactive(new RegExp("[A-Za-z]+"));
-let isTunnel = reactive(false)
+let isTunnel = reactive(false);
 // const equipmentOption = ref([])
 const btnList = ref([
   {
-    route: '/site',
-    icon: 'sp_icon_zdgl.png',
-    name: '站点管理'
+    route: "/site",
+    icon: "sp_icon_zdgl.png",
+    name: "站点管理",
   },
   {
-    route: '/tunnel',
-    icon: 'sp_icon_sdgl.png',
-    name: '隧道管理'
+    route: "/tunnel",
+    icon: "sp_icon_sdgl.png",
+    name: "隧道管理",
   },
   {
-    route: '/user',
-    icon: 'sp_icon_yhgl.png',
-    name: '用户管理'
+    route: "/user",
+    icon: "sp_icon_yhgl.png",
+    name: "用户管理",
   },
   // {
   //   route: '/system',
@@ -231,7 +340,7 @@ const btnList = ref([
   //   icon: 'sp_icon_mngl.png',
   //   name: '模拟仿真'
   // },
-])
+]);
 const serialNumber = ref("");
 const roleKey = ref("");
 let token = getToken();
@@ -240,9 +349,9 @@ let send = {
 };
 const pageInfo = reactive({
   pageNum: 1,
-  pageSize: 10
+  pageSize: 10,
 });
-const queryForm = ref()
+const queryForm = ref();
 const total = ref(10);
 const largeScreenData = ref(null);
 const socketData = reactive({
@@ -253,13 +362,13 @@ const socketData = reactive({
 });
 let tunnelLen = computed(() => tunnelLength);
 const queryParams = reactive({
-  equipmentId: '',
-  lookupStatus: ''
-})
+  equipmentId: "",
+  lookupStatus: "",
+});
 onMounted(() => {
-  getList()
-  getUser()
-  getOtherInfo()
+  getList();
+  getUser();
+  getOtherInfo();
   nextTick(() => {
     showFan.value = true;
   });
@@ -271,85 +380,87 @@ const changeName = (id) => {
     }
   }
   return "";
-}
+};
 const handleReset = () => {
-  queryForm.value.resetFields()
-  getAlarmList()
-}
+  queryForm.value.resetFields();
+  getAlarmList();
+};
 //点击页码进行分页功能
 const handleCurrentChange = (val) => {
-  pageInfo.pageNum = val
-  getAlarmList()
-}
+  pageInfo.pageNum = val;
+  getAlarmList();
+};
 const handleDelete = (row) => {
-  ElMessageBox.confirm(`确认删除该报警信息吗？`, '系统提示', {
-    type: 'warning',
-    closeOnClickModal: false
+  ElMessageBox.confirm(`确认删除该报警信息吗？`, "系统提示", {
+    type: "warning",
+    closeOnClickModal: false,
   }).then(() => {
-    deleteAlarmSate(row.alarmId).then(res => {
+    deleteAlarmSate(row.alarmId).then((res) => {
       if (res.code === 1000) {
-        ElMessage.success('删除成功')
-        getAlarmList()
+        ElMessage.success("删除成功");
+        getAlarmList();
       }
-    })
-  })
-}
+    });
+  });
+};
 //查看报警信息详情
 const handleView = (row) => {
-  getAlarmDetail(row.alarmId).then(res => {
+  getAlarmDetail(row.alarmId).then((res) => {
     if (res.code === 1000) {
-      isDetailVisited.value = true
-      alarmDetail.value = res.data
-      if (roleKey.value !== 'administrator') {
+      isDetailVisited.value = true;
+      alarmDetail.value = res.data;
+      if (roleKey.value !== "administrator") {
         if (!row.lookupStatus) {
-          handleChangeState(row)
+          handleChangeState(row);
         }
       }
     }
-  })
-}
+  });
+};
 const handleChangeState = (row) => {
-  updateAlarmState([{
-    alarmId: row.alarmId,
-    lookupStatus: true,
-    userId: currentUserId.value,
-  }]).then(res => {
+  updateAlarmState([
+    {
+      alarmId: row.alarmId,
+      lookupStatus: true,
+      userId: currentUserId.value,
+    },
+  ]).then((res) => {
     if (res.code === 1000) {
       // ElMessage.success(res.msg);
-      getAlarmList()
+      getAlarmList();
     } else {
       // ElMessage.error(res.msg);
     }
   });
-}
+};
 const getAlarmList = () => {
-  loading.value = true
+  loading.value = true;
   getAlarmInfo({
     tunnelId: tunnelId.value,
     lookupStatus: queryParams.lookupStatus,
-    ...pageInfo
-  }).then(res => {
+    ...pageInfo,
+  }).then((res) => {
     if (res.code === 1000) {
-      loading.value = false
+      loading.value = false;
       if (res.data.rows.length === 0) {
-        tableEmptyText.value = '暂无数据~'
+        tableEmptyText.value = "暂无数据~";
       } else {
-        tableEmptyText.value = ''
+        tableEmptyText.value = "";
       }
-      alarmList.value = res.data.rows
-      total.value = res.data.total
+      alarmList.value = res.data.rows;
+      total.value = res.data.total;
     }
-  })
-}
+  });
+};
 const getUser = () => {
-  getUserInfo().then(res => {
-    currentUser.value = res.data.user.userName
-    currentUserId.value = res.data.user.userId
-    roleKey.value = res.data.roles[0]
-    localStorage.setItem('roleKey', res.data.roles[0])
-    localStorage.setItem('userId', currentUserId.value)
-  })
-}
+  getUserInfo().then((res) => {
+    currentUser.value = res.data.user.userName;
+    currentUserId.value = res.data.user.userId;
+    roleKey.value = res.data.roles[0];
+    localStorage.setItem("roleKey", res.data.roles[0]);
+    localStorage.setItem("userId", currentUserId.value);
+  });
+};
 
 const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
@@ -358,48 +469,48 @@ const getOtherInfo = () => {
       res.data.routeList.forEach((item) => {
         for (let btn of btnList.value) {
           if (item === btn.route) {
-            routeArr.push(btn)
+            routeArr.push(btn);
           }
         }
-      })
-      routeList.value = routeArr
-      showMenu.value = true
-      siteList.value = res.data.siteOption
-      tunnelList.value = res.data.tunnelOption
+      });
+      routeList.value = routeArr;
+      showMenu.value = true;
+      siteList.value = res.data.siteOption;
+      tunnelList.value = res.data.tunnelOption;
 
       if (siteId) {
-        currentSiteId.value = siteId
-        currentSite.value = localStorage.getItem('site')
-        showTunnelTitle.value = false
+        currentSiteId.value = siteId;
+        currentSite.value = localStorage.getItem("site");
+        showTunnelTitle.value = false;
         nextTick(() => {
-          showTunnelTitle.value = true
+          showTunnelTitle.value = true;
         });
-        getTunnel(siteId)
+        getTunnel(siteId);
       } else {
-        getTunnel(res.data.siteOption[0].value)
-        currentSiteId.value = res.data.siteOption[0].value
-        currentSite.value = res.data.siteOption[0].label
-        localStorage.setItem('site', currentSite.value)
-        localStorage.setItem('currentSiteId', currentSiteId.value)
+        getTunnel(res.data.siteOption[0].value);
+        currentSiteId.value = res.data.siteOption[0].value;
+        currentSite.value = res.data.siteOption[0].label;
+        localStorage.setItem("site", currentSite.value);
+        localStorage.setItem("currentSiteId", currentSiteId.value);
       }
     }
   });
 };
 const getScreenInfo = (id) => {
   if (id) {
-    tunnelId.value = id
+    tunnelId.value = id;
     // equipmentOption.value = []
     getLargeScreen(id).then((res) => {
       if (res?.code === 1000) {
         if (res.data.frequencyChangerList.length !== 0) {
-          showFanLoading.value = 0
+          showFanLoading.value = 0;
         } else {
-          showFanLoading.value = 1
+          showFanLoading.value = 1;
         }
         if (res.data.windPressureSensorList.length !== 0) {
-          showWindLoading.value = 0
+          showWindLoading.value = 0;
         } else {
-          showWindLoading.value = 1
+          showWindLoading.value = 1;
         }
         if (res.data.sensorList.length !== 0) {
           // res.data.sensorList.forEach((item) => {
@@ -419,110 +530,123 @@ const getScreenInfo = (id) => {
               item.equipmentType === "sulfurMonoxide" ||
               item.equipmentType === "nitrogenDioxide"
             ) {
-              showBadLoading.value = 0
+              showBadLoading.value = 0;
             } else {
-              showBadLoading.value = 1
+              showBadLoading.value = 1;
             }
-          })
+          });
         } else {
-          showBadLoading.value = 1
+          showBadLoading.value = 1;
         }
         largeScreenData.value = res.data;
       } else {
-        ElMessage.warning(res.msg)
+        ElMessage.warning(res.msg);
       }
     });
     initSceneData(id).then((res) => {
-      tunnelLength.value = res.data.tunnelLength
-      constructionLength.value = res.data.constructionLength
+      tunnelLength.value = res.data.tunnelLength;
+      constructionLength.value = res.data.constructionLength;
       // serialNumber.value = res.data.serialNumber.slice(0, -2)
-      serialNumber.value = res.data.serialNumberPrefix
+      serialNumber.value = res.data.serialNumberPrefix;
       initWebSocket();
-    })
+    });
   }
 };
 //这里可以获取隧道简称
 const getList = () => {
   getTunnelList({
-    siteId: siteId
-  }).then(res => {
+    siteId: siteId,
+  }).then((res) => {
     if (res.code === 1000) {
       if (res.data.rows.length !== 0) {
         isTunnel = true;
-        totalTunnelList.value = res.data.rows
+        totalTunnelList.value = res.data.rows;
       } else {
-        isTunnel = false
+        isTunnel = false;
       }
     }
-  })
-}
+  });
+};
 
-let largeScreen = computed(() => largeScreenData)
+let largeScreen = computed(() => largeScreenData);
 const getTunnel = (id) => {
   getTunnelBySiteId(id).then((res) => {
     if (res?.code === 1000) {
       if (res.data.length === 0) {
         if (isTunnel) {
-          ElMessage.warning('该站点下没有隧道可展示, 请添加设备后再试!')
+          ElMessage.warning("该站点下没有隧道可展示, 请添加设备后再试!");
         } else {
-          ElMessage.warning('该站点下没有隧道, 请新增隧道后再试!')
+          ElMessage.warning("该站点下没有隧道, 请新增隧道后再试!");
         }
       } else {
         if (!pattern.test(previewId)) {
-          getScreenInfo(previewId)
+          getScreenInfo(previewId);
           tunnelList.value.forEach((item, index) => {
             if (item.value == previewId) {
-              initialIndex.value = index
-              tunnelBtn.value.setActiveItem(index)
+              initialIndex.value = index;
+              tunnelBtn.value.setActiveItem(index);
             }
-          })
+          });
         } else {
-          tunnelList.value = res.data
-          getScreenInfo(res.data[0]?.value)
+          // console.info("🚀 ~method: tunnelList.value -----",  tunnelList.value)
+          // tunnelList.value = res.data;
+          getScreenInfo(res.data[0]?.value);
         }
       }
     }
   });
-}
+};
 const changeTunnel = (e) => {
-  socket.close()
+  // console.info("🚀 ~method:'tunnelList.value' -----", tunnelList.value)
+  // console.info("🚀 ~method:'changeTunnel' -----", e)
+  if(socket){
+    socket.close()
+  }
   let newObj = {}
   tunnelList.value.forEach((item, index) => {
-    if (index === e) {
-      newObj = item
+    if (index == e) {
+      newObj = item;
     }
-  })
-  showFan.value = false
-  showBadLoading.value = 0
-  showWindLoading.value = 0
-  showFanLoading.value = 0
+  });
+  // console.info("🚀 ~method:changeTunnel -----", newObj)
+  showFan.value = false;
+  showBadLoading.value = 0;
+  showWindLoading.value = 0;
+  showFanLoading.value = 0;
   // showUsedLoading.value = 0
-  pageInfo.pageNum = 1
-  getScreenInfo(newObj.value)
+  pageInfo.pageNum = 1;
+  getScreenInfo(newObj.value);
   nextTick(() => {
     showFan.value = true;
   });
-
-}
+};
 const manageSelect = (index) => {
-
-  if (index === '站点管理') {
+  if (index === "站点管理") {
     if (currentUserId.value) {
-      router.push("/site/" + currentUserId.value + '/' + currentSiteId.value);
+      router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
     }
-  } else if (index === '隧道管理') {
+  } else if (index === "隧道管理") {
     if (currentSiteId.value && currentUserId.value) {
-      router.push("/tunnel/" + localStorage.getItem('currentSiteId') + '/byHome/' + currentUserId.value);
+      router.push(
+        "/tunnel/" +
+          localStorage.getItem("currentSiteId") +
+          "/byHome/" +
+          currentUserId.value
+      );
     }
-  } else if (index === '用户管理') {
+  } else if (index === "用户管理") {
     if (currentSiteId.value) {
-      router.push("/user/" + localStorage.getItem('currentSiteId'));
+      router.push("/user/" + localStorage.getItem("currentSiteId"));
     }
   }
-  socket.close()
+  if(socket){
+    socket.close()
+  }
 };
 const handleChangeSite = debounce((item) => {
-  socket.close()
+  if(socket){
+    socket.close()
+  }
   currentSite.value = item.label
   currentSiteId.value = item.value
   getTunnel(item.value)
@@ -530,16 +654,16 @@ const handleChangeSite = debounce((item) => {
   nextTick(() => {
     showFan.value = true;
   });
-  localStorage.setItem('site', currentSite.value)
-  localStorage.setItem('currentSiteId', currentSiteId.value)
+  localStorage.setItem("site", currentSite.value);
+  localStorage.setItem("currentSiteId", currentSiteId.value);
   if (tunnelIdFlag) {
-    router.push('/' + tunnelIdFlag + '/' + currentSiteId.value)
+    router.push("/" + tunnelIdFlag + "/" + currentSiteId.value);
   }
-  showTunnelTitle.value = false
+  showTunnelTitle.value = false;
   nextTick(() => {
-    showTunnelTitle.value = true
+    showTunnelTitle.value = true;
   });
-}, 100)
+}, 100);
 const closeLeft = () => {
   drawerLeft.value = !drawerLeft.value;
 };
@@ -547,14 +671,14 @@ const closeRight = () => {
   drawerRight.value = !drawerRight.value;
 };
 const handleLogout = () => {
-  ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
+  ElMessageBox.confirm(`确认退出登录吗`, "系统提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
   }).then(() => {
     authStore.userLogout();
     router.push("/login");
-  })
+  });
 };
 const previousBtn = () => {
   tunnelBtn.value.prev();
@@ -575,11 +699,11 @@ const initWebSocket = () => {
   };
   //连接成功建立的回调方法
   socket.onopen = function () {
-    console.log("ws连接成功");
+    // console.log("ws连接成功");
   };
   //接收到消息的回调方法
   socket.onmessage = function (event) {
-    console.log("服务器返回的信息: ", JSON.parse(event.data));
+    // console.log("服务器返回的信息: ", JSON.parse(event.data));
     const type = JSON.parse(event.data).type;
     const data = JSON.parse(event.data).data;
     if (type === "equipment") {
@@ -596,7 +720,6 @@ const initWebSocket = () => {
         }
       });
     }
-
   };
   //连接关闭的回调方法
   socket.onclose = function () {
@@ -622,7 +745,7 @@ const initWebSocket = () => {
 .el-dropdown__popper.el-popper {
   background: transparent;
   //border: none;
-  border: 1px solid #0E7DAA;
+  border: 1px solid #0e7daa;
   border-radius: 10px;
 }
 
@@ -640,11 +763,11 @@ const initWebSocket = () => {
         padding: 5px;
 
         .el-dropdown-menu__item {
-          color: #FFFFFF;
+          color: #ffffff;
           //border:none;
           padding: 5px;
 
-          border-bottom: 1px solid #05FEFF;
+          border-bottom: 1px solid #05feff;
 
           &:last-child {
             border-bottom: none;
@@ -654,7 +777,7 @@ const initWebSocket = () => {
         .el-dropdown-menu__item.hover,
         .el-dropdown-menu__item:hover {
           background-color: transparent !important;
-          color: #F7B500;
+          color: #f7b500;
         }
       }
     }
@@ -663,7 +786,6 @@ const initWebSocket = () => {
   .is-light {
     background: rgba(7, 35, 72, 0.9);
   }
-
 }
 </style>
 
@@ -687,7 +809,6 @@ const initWebSocket = () => {
 
 :deep(.el-table__body-wrapper) {
   height: 90px;
-
 }
 
 :deep(.el-table--fit) {
@@ -713,17 +834,16 @@ const initWebSocket = () => {
   //display: none;
   .el-table__empty-text {
     font-size: 60px;
-    color: #08B7B8;
+    color: #08b7b8;
   }
 }
 
-
 .query-form {
   :deep(.el-form-item__label) {
     font-size: 45px;
     height: 70px;
     line-height: 70px;
-    color: #FFFFFF;
+    color: #ffffff;
   }
 
   :deep(.el-select__wrapper.is-hovering) {
@@ -735,14 +855,14 @@ const initWebSocket = () => {
   }
 
   :deep(.el-select-dropdown__item.is-hovering) {
-    background-color: #064B66 !important;
+    background-color: #064b66 !important;
   }
 
   :deep(.el-select__wrapper) {
     height: 70px;
     line-height: 70px;
     background-color: transparent;
-    border: 1px solid #08B7B8;
+    border: 1px solid #08b7b8;
     font-size: 35px;
     width: 356px;
 
@@ -753,7 +873,7 @@ const initWebSocket = () => {
     }
 
     .el-select__placeholder {
-      color: #FFFFFF;
+      color: #ffffff;
       height: 70px;
       line-height: 70px;
     }
@@ -768,21 +888,21 @@ const initWebSocket = () => {
     .el-select__popper {
       margin-top: -12px !important;
       background: #072247 !important;
-      border: 1px solid #0F82AF !important;
+      border: 1px solid #0f82af !important;
 
       .el-select-dropdown__item {
         font-size: 38px !important;
         height: 70px !important;
         line-height: 70px !important;
 
-        >span {
-          color: #FFFFFF;
+        > span {
+          color: #ffffff;
         }
       }
 
       .el-select-dropdown__item.hover,
       .el-select-dropdown__item:hover {
-        background-color: #064B66 !important;
+        background-color: #064b66 !important;
       }
     }
 
@@ -793,7 +913,7 @@ const initWebSocket = () => {
     }
 
     .el-button--primary {
-      background: #064B66;
+      background: #064b66;
     }
 
     .el-input {
@@ -803,12 +923,12 @@ const initWebSocket = () => {
       .el-input__wrapper {
         font-size: 40px;
         background-color: transparent;
-        border: 1px solid #08B7B8;
+        border: 1px solid #08b7b8;
         box-shadow: none;
 
         .el-input__inner {
           height: 70px;
-          color: #FFFFFF;
+          color: #ffffff;
         }
 
         .el-input__suffix-inner {
@@ -829,7 +949,7 @@ const initWebSocket = () => {
   }
 
   .active {
-    color: #FFFFFF;
+    color: #ffffff;
     background: #0f7da9;
   }
 
@@ -843,13 +963,13 @@ const initWebSocket = () => {
     width: 200px;
     height: 50px;
     border-radius: 6px;
-    border: 1px solid #05FEFF;
+    border: 1px solid #05feff;
     overflow: hidden;
-    color: #51A2B3;
+    color: #51a2b3;
     line-height: 40px;
     font-size: 36px;
 
-    &>div {
+    & > div {
       flex: 1;
       text-align: center;
       cursor: pointer;
@@ -869,19 +989,26 @@ const initWebSocket = () => {
   }
 
   :deep(.el-table tr) {
-    background-color: #1C5971;
+    background-color: #1c5971;
   }
 
-  :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
-    background-color: #1C5971;
+  :deep(
+      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
+    ) {
+    background-color: #1c5971;
   }
 
   :deep(.el-table__row--striped) {
-    background-color: #13849C !important;
+    background-color: #13849c !important;
   }
 
-  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
-    background-color: #13849C !important;
+  :deep(
+      .el-table--striped
+        .el-table__body
+        tr.el-table__row--striped
+        td.el-table__cell
+    ) {
+    background-color: #13849c !important;
   }
 
   :deep(.el-table__cell) {
@@ -892,11 +1019,11 @@ const initWebSocket = () => {
 
     .el-input__wrapper {
       border-radius: 6px;
-      border: 1px solid #05FEFF;
+      border: 1px solid #05feff;
       background-color: transparent;
 
       .el-input__inner {
-        color: #FFFFFF;
+        color: #ffffff;
         font-size: 40px;
         height: auto;
         line-height: normal;
@@ -916,12 +1043,11 @@ const initWebSocket = () => {
   left: 50%;
   transform: translate(-50%, -50%);
   bottom: 0;
-  color: #60DDDE;
+  color: #60ddde;
   font-size: 38px;
   font-weight: bold;
 
   :deep(.el-pagination.is-background) {
-
     .btn-next,
     .btn-prev {
       background-color: transparent;
@@ -933,16 +1059,16 @@ const initWebSocket = () => {
       }
 
       li.is-active {
-        background-color: #60DDDE;
+        background-color: #60ddde;
       }
     }
   }
 
-  >span:first-child {
+  > span:first-child {
     margin-right: 60px;
   }
 
-  >span:last-child {
+  > span:last-child {
     margin-left: 71px;
   }
 
@@ -950,25 +1076,24 @@ const initWebSocket = () => {
     background-color: transparent;
     font-size: 38px;
     font-weight: bold;
-    color: #60DDDE;
+    color: #60ddde;
     margin-right: 20px;
-
   }
 
   :deep(.btn-next) {
     background-color: transparent;
     font-size: 38px;
     font-weight: bold;
-    color: #60DDDE;
+    color: #60ddde;
     margin-left: 30px;
   }
 
   :deep(.el-pager li.is-active) {
     width: 70px;
     height: 70px;
-    background: #60DDDE;
+    background: #60ddde;
     border-radius: 50%;
-    color: #071F40;
+    color: #071f40;
     font-size: 38px;
     font-weight: bold;
   }
@@ -980,12 +1105,12 @@ const initWebSocket = () => {
   :deep(.el-pager li:not(.is-active)) {
     width: 70px;
     height: 70px;
-    border: 1px solid #60DDDE;
+    border: 1px solid #60ddde;
     border-radius: 50%;
     background-color: transparent;
     font-size: 38px;
     font-weight: bold;
-    color: #60DDDE;
+    color: #60ddde;
   }
 }
 </style>