From ae1cc159a44c7b36f2e8005c77b3819b2f63e417 Mon Sep 17 00:00:00 2001
From: trp <2477421791@qq.com>
Date: Mon, 2 Sep 2024 18:43:41 +0800
Subject: [PATCH 1/2] =?UTF-8?q?trp:=E8=AE=BE=E5=A4=87hover=E5=9B=9E?=
 =?UTF-8?q?=E6=98=BE=E9=9D=A2=E6=9D=BF=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E5=92=8C=E6=A8=A1=E6=8B=9F=E6=A8=A1=E5=BC=8F3d=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/tunnel.js                             |  17 +-
 .../content/tunnelScene/PreviewScene.vue      | 834 +++++++++---------
 .../content/tunnelScene/TunnelScene.vue       |  60 +-
 .../tunnelScene/preEquComp/preDialog.vue      |  94 +-
 src/views/tunnel-simulate/index.vue           | 693 +++++++++------
 src/views/tunnel/index.vue                    | 666 ++++++++------
 6 files changed, 1395 insertions(+), 969 deletions(-)

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/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue
index 3e7c494..9771bf6 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：", 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..ddaebe6 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);
@@ -116,11 +139,10 @@ async function handleMounted() {
     // modelList.value = await initData(params.tunnelId, params.form);
     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(devRealtimeData, () => {
+  console.log("devRealtimeData：", 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..cf10140 100644
--- a/src/components/content/tunnelScene/preEquComp/preDialog.vue
+++ b/src/components/content/tunnelScene/preEquComp/preDialog.vue
@@ -26,35 +26,32 @@
           :placeholder="params.equipmentName" disabled>
           <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
         </el-select> -->
-        <p>{{ params.equipmentName }}</p>
+        <p>{{ params.devRealtimeDetail.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,22 @@ 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;
+  // height: 120px;
   // min-height: 683px;
   background: rgba(7, 35, 72, 0.79);
   border-radius: 20px;
@@ -295,7 +311,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 +365,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/views/tunnel-simulate/index.vue b/src/views/tunnel-simulate/index.vue
index cbb22f8..e6835d4 100644
--- a/src/views/tunnel-simulate/index.vue
+++ b/src/views/tunnel-simulate/index.vue
@@ -1,29 +1,47 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />
+      <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">开始模拟</span>
-<!--        <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
+        <!--        <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">
+          <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>
@@ -34,37 +52,97 @@
         </div>
       </div>
     </div>
-    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
+    <!-- <preview-scene
+      id="tunnel-box"
+      :isedit="false"
+      :tunnelId="tunnelId"
+      :key="tunnelId"
+      :tunnelLen="tunnelLength"
+      :largeScreen="largeScreen"
+      :fanList="socketData.leftData"
+      :devRealtimeData="socketData"
+    ></preview-scene> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件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"
+    ></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
+        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
+        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">
+      <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 }}
@@ -75,7 +153,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 }}
@@ -87,14 +170,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>
@@ -104,36 +205,89 @@
           <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'">
-
+      <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 :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>
@@ -143,7 +297,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";
@@ -161,20 +315,19 @@ import {
   getAlarmInfo,
   deleteAlarmSate,
   getAlarmDetail,
-  updateAlarmState
+  updateAlarmState,
 } from "@/api/largeScreen";
-import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+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'
-
+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);
@@ -184,19 +337,19 @@ 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 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());
@@ -208,23 +361,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',
@@ -235,7 +388,7 @@ const btnList = ref([
   //   icon: 'sp_icon_mngl.png',
   //   name: '模拟仿真'
   // },
-])
+]);
 const serialNumber = ref("");
 const roleKey = ref("");
 let token = getToken();
@@ -244,10 +397,10 @@ let send = {
 };
 const pageInfo = reactive({
   pageNum: 1,
-  pageSize: 10
+  pageSize: 10,
 });
-const queryForm = ref()
-const form = ref()
+const queryForm = ref();
+const form = ref();
 const total = ref(10);
 const largeScreenData = ref(null);
 const socketData = reactive({
@@ -258,20 +411,18 @@ 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;
   });
 });
-const startSimulate=()=>{
-
-}
+const startSimulate = () => {};
 const changeName = (id) => {
   for (let item of equipmentOption.value) {
     if (item.value === id) {
@@ -279,85 +430,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) => {
@@ -366,48 +519,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) => {
@@ -427,127 +580,130 @@ 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)
+          tunnelList.value = res.data;
+          getScreenInfo(res.data[0]?.value);
         }
       }
     }
   });
-}
+};
 const changeTunnel = (e) => {
-  socket.close()
-  let newObj = {}
+  socket.close();
+  let newObj = {};
   tunnelList.value.forEach((item, index) => {
     if (index === e) {
-      newObj = item
+      newObj = item;
     }
-  })
-  showFan.value = false
-  showBadLoading.value = 0
-  showWindLoading.value = 0
-  showFanLoading.value = 0
+  });
+  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()
+  socket.close();
 };
 const handleChangeSite = debounce((item) => {
-  socket.close()
-  currentSite.value = item.label
-  currentSiteId.value = item.value
-  getTunnel(item.value)
-  showFan.value = false
+  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)
+  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;
 };
@@ -555,14 +711,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();
@@ -604,7 +760,6 @@ const initWebSocket = () => {
         }
       });
     }
-
   };
   //连接关闭的回调方法
   socket.onclose = function () {
@@ -630,7 +785,7 @@ const initWebSocket = () => {
 .el-dropdown__popper.el-popper {
   background: transparent;
   //border: none;
-  border: 1px solid #0E7DAA;
+  border: 1px solid #0e7daa;
   border-radius: 10px;
 }
 
@@ -648,11 +803,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;
@@ -662,7 +817,7 @@ const initWebSocket = () => {
         .el-dropdown-menu__item.hover,
         .el-dropdown-menu__item:hover {
           background-color: transparent !important;
-          color: #F7B500;
+          color: #f7b500;
         }
       }
     }
@@ -671,7 +826,6 @@ const initWebSocket = () => {
   .is-light {
     background: rgba(7, 35, 72, 0.9);
   }
-
 }
 </style>
 
@@ -680,12 +834,12 @@ const initWebSocket = () => {
   cursor: pointer;
   padding: 10px 20px;
   border-radius: 11px;
-  border: 2px solid #08B7B8;
-  color: #0BE9FA;
+  border: 2px solid #08b7b8;
+  color: #0be9fa;
   text-align: center;
   margin-left: 40px;
   font-size: 38px;
-  &:hover{
+  &:hover {
     color: #f7b500;
   }
 }
@@ -708,7 +862,6 @@ const initWebSocket = () => {
 
 :deep(.el-table__body-wrapper) {
   height: 90px;
-
 }
 
 :deep(.el-table--fit) {
@@ -734,17 +887,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) {
@@ -756,14 +908,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;
 
@@ -774,7 +926,7 @@ const initWebSocket = () => {
     }
 
     .el-select__placeholder {
-      color: #FFFFFF;
+      color: #ffffff;
       height: 70px;
       line-height: 70px;
     }
@@ -789,21 +941,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;
       }
     }
 
@@ -814,7 +966,7 @@ const initWebSocket = () => {
     }
 
     .el-button--primary {
-      background: #064B66;
+      background: #064b66;
     }
 
     .el-input {
@@ -824,12 +976,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 {
@@ -850,7 +1002,7 @@ const initWebSocket = () => {
   }
 
   .active {
-    color: #FFFFFF;
+    color: #ffffff;
     background: #0f7da9;
   }
 
@@ -864,13 +1016,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;
@@ -890,19 +1042,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) {
@@ -913,11 +1072,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;
@@ -937,12 +1096,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;
@@ -954,16 +1112,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;
   }
 
@@ -971,25 +1129,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;
   }
@@ -1001,12 +1158,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>
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 067aaa3..86a25be 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,35 +53,87 @@
     </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>
     </div>
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
-      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex"
-        @change="changeTunnel">
+      <el-carousel
+        height="150px"
+        type="card"
+        ref="tunnelBtn"
+        :autoplay="false"
+        :initial-index="initialIndex"
+        @change="changeTunnel"
+      >
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -74,7 +144,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 +161,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>
@@ -103,36 +196,89 @@
           <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'">
-
+      <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 :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 +288,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 +306,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 +326,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 +350,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 +377,7 @@ const btnList = ref([
   //   icon: 'sp_icon_mngl.png',
   //   name: '模拟仿真'
   // },
-])
+]);
 const serialNumber = ref("");
 const roleKey = ref("");
 let token = getToken();
@@ -240,9 +386,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 +399,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 +417,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 +506,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,127 +567,130 @@ 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)
+          tunnelList.value = res.data;
+          getScreenInfo(res.data[0]?.value);
         }
       }
     }
   });
-}
+};
 const changeTunnel = (e) => {
-  socket.close()
-  let newObj = {}
+  socket.close();
+  let newObj = {};
   tunnelList.value.forEach((item, index) => {
     if (index === e) {
-      newObj = item
+      newObj = item;
     }
-  })
-  showFan.value = false
-  showBadLoading.value = 0
-  showWindLoading.value = 0
-  showFanLoading.value = 0
+  });
+  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()
+  socket.close();
 };
 const handleChangeSite = debounce((item) => {
-  socket.close()
-  currentSite.value = item.label
-  currentSiteId.value = item.value
-  getTunnel(item.value)
-  showFan.value = false
+  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)
+  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 +698,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();
@@ -596,7 +747,6 @@ const initWebSocket = () => {
         }
       });
     }
-
   };
   //连接关闭的回调方法
   socket.onclose = function () {
@@ -622,7 +772,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 +790,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 +804,7 @@ const initWebSocket = () => {
         .el-dropdown-menu__item.hover,
         .el-dropdown-menu__item:hover {
           background-color: transparent !important;
-          color: #F7B500;
+          color: #f7b500;
         }
       }
     }
@@ -663,7 +813,6 @@ const initWebSocket = () => {
   .is-light {
     background: rgba(7, 35, 72, 0.9);
   }
-
 }
 </style>
 
@@ -687,7 +836,6 @@ const initWebSocket = () => {
 
 :deep(.el-table__body-wrapper) {
   height: 90px;
-
 }
 
 :deep(.el-table--fit) {
@@ -713,17 +861,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 +882,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 +900,7 @@ const initWebSocket = () => {
     }
 
     .el-select__placeholder {
-      color: #FFFFFF;
+      color: #ffffff;
       height: 70px;
       line-height: 70px;
     }
@@ -768,21 +915,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 +940,7 @@ const initWebSocket = () => {
     }
 
     .el-button--primary {
-      background: #064B66;
+      background: #064b66;
     }
 
     .el-input {
@@ -803,12 +950,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 +976,7 @@ const initWebSocket = () => {
   }
 
   .active {
-    color: #FFFFFF;
+    color: #ffffff;
     background: #0f7da9;
   }
 
@@ -843,13 +990,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 +1016,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 +1046,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 +1070,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 +1086,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 +1103,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 +1132,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>

From dcd43ff5da53e9f0e3ff643158602119f159bf9f Mon Sep 17 00:00:00 2001
From: trp <2477421791@qq.com>
Date: Mon, 2 Sep 2024 23:30:21 +0800
Subject: [PATCH 2/2] =?UTF-8?q?trp:=E4=B8=8A=E4=B8=80=E6=AC=A1=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81=E5=90=8E=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tunnel-simulate/index.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/views/tunnel-simulate/index.vue b/src/views/tunnel-simulate/index.vue
index e6835d4..a4190e7 100644
--- a/src/views/tunnel-simulate/index.vue
+++ b/src/views/tunnel-simulate/index.vue
@@ -52,16 +52,7 @@
         </div>
       </div>
     </div>
-    <!-- <preview-scene
-      id="tunnel-box"
-      :isedit="false"
-      :tunnelId="tunnelId"
-      :key="tunnelId"
-      :tunnelLen="tunnelLength"
-      :largeScreen="largeScreen"
-      :fanList="socketData.leftData"
-      :devRealtimeData="socketData"
-    ></preview-scene> -->
+
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <preview-scene
       id="tunnel-box"