更新1.浏览器不点击2.删除风压3.浏览器模型只能左右移动4.鼠标hover显示设备名称

2024-03-13 19:58:51 +08:00
parent 8b073bc98f
commit 9f29b78049
8 changed files with 210 additions and 104 deletions
--- a/public/tunnelModel/chanel-have-wall优化版.gltf
+++ b/public/tunnelModel/chanel-have-wall优化版.gltf
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -19,6 +19,8 @@
                <button @click="handleConfirmAddEqu">确定</button>
            </div>
        </el-dialog>
+
+
    </div>
 </template>

@@ -78,7 +80,7 @@ const modelStore = useModelSceneStore();
 const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理


-
+// console.log(load);
 let isedit = ref(params.isedit)
 let fanData;
 let tunnelAlias = reactive('')
@@ -152,10 +154,10 @@ async function handleMounted() {
    demo = new ThreeDScene(three, content.value);
    //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
    demo.isedit = params.isedit;
-    let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel-have-wall.gltf");
+    let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf");
    demo.addOrbitControls(OrbitControls);
    demo.addTween(TWEEN);
-    demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
+    demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
    demo.setDistance(10);
    lClickCallback(demo); //绑定左键回调
    rClickCallback(demo); //绑定右键回调
@@ -228,7 +230,11 @@ function loadModel(path) {
            (obj) => {
                resolve(obj);
            },
-            (xhr) => { },
+            (xhr) => {
+                //这里可以拿到加载的进度条！！！
+                console.log(xhr);
+                console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+            },
            (err) => {
                reject(err);
            }
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -50,6 +50,7 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref, toRaw, watch } from "vue";
 import { ElMessage } from "element-plus";
 import { useModelSceneStore } from "@/store/modelSceneStore";
+import { LOD } from "three";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -85,12 +86,13 @@ async function handleMounted() {
  demo = new ThreeDScene(three, content.value);
  //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
  demo.isedit = params.isedit;
-
+  // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
  const loaded = await demo.loadModel(
    GLTFLoader,
-    "./assets/tunnelModel/chanel-have-wall.gltf"
+    "/tunnelModel/chanel-have-wall-now-use.gltf",
+    true
  );
-  demo.addOrbitControls(OrbitControls);
+  demo.addOrbitControls(OrbitControls, true);
  demo.addTween(TWEEN);
  demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
  demo.setDistance(10);
@@ -165,6 +167,8 @@ function editDevInfo(

 //左键/双击左键回调函数
 function lClickCallback(demo) {
+  // console.log('左键点击查看信息');
+
  //demo动态添加函数，为操作组件内部
  function displayDevInfo(targetPoint = null) {
    hasDevice.value = targetPoint.hasDevice;
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -4,7 +4,7 @@
      <p>当前距离洞口：{{ pointDistance_str }}</p>
      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
-    <div class="equ-info">当前风压:{{ p }}Pa</div>
+    <!-- <div class="equ-info">当前风压:{{ p }}Pa</div> -->
    <div class="setting">
      <div class="setting-item">
        <p>传感器类型</p>
--- a/src/components/content/tunnelScene/preEquComp/preDialog.vue
+++ b/src/components/content/tunnelScene/preEquComp/preDialog.vue
@@ -1,27 +1,27 @@
 <template>
  <div id="edit-dialog">
    <div class="distance-back">
-      <p>当前距离洞口：
+      <!-- <p>当前距离洞口：
        <span>
          {{ pointDistance_str }}
        </span>
-      </p>
+      </p> -->
      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
-    <div class="equ-info">当前风压:
+    <!-- <div class="equ-info">当前风压:
      <span>{{ p }}Pa</span>
-    </div>
+    </div> -->
    <div class="setting">
-      <div class="setting-item">
-        <p>传感器类型</p>
-        <!-- <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
+      <!-- <div class="setting-item"> -->
+      <!-- <p>传感器类型</p> -->
+      <!-- <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
          :placeholder="params.equipmentType" disabled>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select> -->
-        <p>{{ params.equipmentType }}</p>
-      </div>
+      <!-- <p>{{ params.equipmentType }}</p> -->
+      <!-- </div> -->
      <div class="setting-item">
-        <p>设备选择</p>
+        <p>设备名称</p>
        <!-- <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
          :placeholder="params.equipmentName" disabled>
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
@@ -172,7 +172,9 @@ const equipment = {

 <style lang="scss" scoped>
 #edit-dialog {
-  width: 540px;
+  // width: 540px;
+  width: 300px;
+  height: 200px;
  // min-height: 683px;
  background: rgba(7, 35, 72, 0.79);
  border-radius: 20px;
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -1,5 +1,6 @@
 import { handleLClick } from "./handleRLclick/handleLclick";
 import { handleRClick } from "./handleRLclick/handleRclick";
+import { handleLHover } from "./handleRLclick/handleLhover.js"
 import { handleDBLClick } from "./handleDBLclick";
 import { checkAnimation } from "./checkTag";
 import {
@@ -12,6 +13,7 @@ import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
 import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
+// import { ref } from "vue";
 export default class Demo {
  // 摄像机看向位置s
  origin = null;
@@ -22,6 +24,7 @@ export default class Demo {
  constructor(three, mountedElement) {
    this._StreetSignTag = StreetSignTag
    this._handleLClick = handleLClick;
+    this._handleLHover = handleLHover;
    this._handleRClick = handleRClick;
    this._handleDBLClick = handleDBLClick;
    this._checkAnimation = checkAnimation;
@@ -140,12 +143,14 @@ export default class Demo {
   * @param {Object}  GLTFLoader 模型加载器
   * @param {String} path 模型资源路径
   */
-  loadModel(GLTFLoader, path) {
+  loadModel(GLTFLoader, path, isedit) {
    return new Promise((resolve, reject) => {
      this.gltfloader = new GLTFLoader();
      this.gltfloader.load(
-        "/tunnelModel/chanel-have-wall优化版.gltf",
+        //下面是模型加载的路径
+        path,
        (gltf) => {
+          // console.log(isedit);
          gltf.scene.traverse((child) => {
            this._forModels(child);
          });
@@ -153,7 +158,8 @@ export default class Demo {
          gltf.scene.position.set(-5, 0, 10);
          this.scene.add(gltf.scene);
          // 加载完后可执行函数
-          this._afterLoaded(gltf.scene);
+          // console.log(isedit);
+          this._afterLoaded(gltf.scene, isedit);
          resolve(gltf);
        },
        (xhr) => {
@@ -167,11 +173,15 @@ export default class Demo {
    });
  }
  // 模型加载完函数
-  _afterLoaded() {
+  _afterLoaded(scene, isedit) {
+    console.log(isedit);
    // 可以进行选中
-    this._hoverModel(this.points);
+    this._hoverModel(this.points, isedit);
    // 可以进行点击
-    this._ClickModel(this.points);
+    if (isedit == true) {
+      console.log('dada')
+      this._ClickModel(this.points);
+    }
    //将墙壁进行隐藏
    this.WallInit()
    //对路牌进行相关操作
@@ -198,14 +208,21 @@ export default class Demo {
  /**
   * @param {Object} OrbitControls 轨道控制器
   */
-  addOrbitControls(OrbitControls) {
+  addOrbitControls(OrbitControls, isedit) {
    this.orbitControls = new OrbitControls(
      this.camera,
      this.renderer.domElement
    );
    //初始化轨道控制器
    this.orbitControls.object.position.set(-29, 18, -50);
-    this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
+    // this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
+    //下面的设置是使隧道的上下不进行旋转，只左右旋转即可
+    if (isedit == true) {
+      this.orbitControls.maxPolarAngle = (3.69 * Math.PI) / 7;
+    } else {
+      this.orbitControls.maxPolarAngle = (4 * Math.PI) / 8.5;
+      this.orbitControls.minPolarAngle = (4 * Math.PI) / 8.5;
+    }
    this.orbitControls.minDistance = 5;
    this.orbitControls.maxDistance = 87;
    // 监听控制器变化
@@ -224,7 +241,7 @@ export default class Demo {
   * 鼠标移入可以高亮的模型
   *@param {Array} hoverModels 需要高亮的模型
   */
-  _hoverModel(hoverModels) {
+  _hoverModel(hoverModels, isedit) {
    this.renderer.domElement.addEventListener("mousemove", (e) => {
      const mouse = new this.THREE.Vector2();
      mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
@@ -236,10 +253,17 @@ export default class Demo {
        if (!this.preHover) {
          this.preHover = intersects[0].object;
        } else {
+          if (isedit != true) {
+            console.log(isedit);
+            this._handleLHover(intersects[0].object);
+
+          }
+
          this.preHover.material.color.set("white");
          this.preHover = intersects[0].object;
        }
        intersects[0].object.material.color.set("red");
+
        const tagP = intersects[0].object.getWorldPosition(
          new this.THREE.Vector3()
        );
@@ -249,6 +273,10 @@ export default class Demo {
        if (!this.preHover) return;
        this.preHover.material.color.set("white");
      }
+      // this._handleLHover(intersects[0].object);
+      // this._handleLClick(intersects[0].object);
+
+
    });
  }
  /**
@@ -315,7 +343,7 @@ export default class Demo {
  // 添加css3Renderer
  addCSS3Renderer(CSS2Renderer, CSS2DObject, [infoDom, editDom]) {
    this.CSS2Renderer = new CSS2Renderer();
-    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
+    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight - 100);
    this.CSS2Renderer.render(this.scene, this.camera);

    this.mountedElement.appendChild(this.CSS2Renderer.domElement);
@@ -335,11 +363,16 @@ export default class Demo {
    // // 设置该标签初始化透明
    // this.tagCSS2DObj.element.style.opacity = "1";
    // this.tag2CSS2DObj.element.style.opacity = "1";
-
+    // 下面是3D的，下面把它注释，之后方便来修正
    this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
-
    this.tag3CSS2DObj.scale.set(0.02, 0.02, 0.02); //编辑框
    this.tag3CSS2DObj.position.set(10, 0, 10);
+    // 下面是2D的显示方案
+    // this.tagCSS2DObj.scale.set(0.001, 0.001, 0.001);
+
+
+    // this.tag3CSS2DObj.scale.set(0.001, 0.001, 0.001); //编辑框
+    // this.tag3CSS2DObj.position.set(1, 0, 1);
  }
  clearTagsObj() {
    if (this.preDBLModel) {
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
@@ -0,0 +1,54 @@
+export function handleLHover(targetPoint) {
+  // 保存进入状态
+  this._saveState();
+  this.clearTagsObj();
+  // 全局临时标记该选中的模型;
+  this.targetPoint = targetPoint;
+  const worldPosition = new this.THREE.Vector3();
+  //获取附着点的世界坐标系
+  targetPoint.getWorldPosition(worldPosition);
+  this._checkAnimation(worldPosition);
+
+  // 设置标签位置
+  this.tag3CSS2DObj.position.set(
+    worldPosition.x,
+    worldPosition.y,
+    worldPosition.z
+  );
+  this.isControlOrbit(false);
+  this.position = worldPosition;
+  if (/tr$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this);
+  } else if (/tl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this);
+  } else if (/tc$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(0);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-6);
+    intoAnimation.call(this);
+  } else if (/br$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this);
+  } else if (/bl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this);
+  }
+  this.scene.add(this.tag3CSS2DObj);
+  // 返回给编辑组件的回调函数
+  this.editDev(targetPoint);
+}
+
+function intoAnimation() {
+  this.tag3CSS2DObj.element.style.opacity = "1";
+  this.tag3CSS2DObj.element.style.display = "block";
+}
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,8 +1,8 @@
 <template>
  <div id="main">
    <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
-      <tunnel-title v-if="showTunnelTitle"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
+      <tunnel-title v-if="showTunnelTitle" />
      <div class="top-length">
        <!--        <span>隧道总长度: {{ tunnelLength }}米</span>-->
        <span>当前施工长度: {{ constructionLength }}米</span>
@@ -15,15 +15,15 @@
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                    item.label
-                  }}
+        item.label
+      }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-icon size="50" color="#0BE9FA" style="margin-left: 50px;cursor: pointer"
-                   @click="isVisited=true;getAlarmList()">
-            <Bell/>
+            @click="isVisited = true; getAlarmList()">
+            <Bell />
          </el-icon>
        </div>
        <div class="current-user">
@@ -36,25 +36,26 @@
    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-                   :largeScreen="largeScreen"></preview-scene>
+      :largeScreen="largeScreen"></preview-scene>
+    <!-- <el-process></el-process> -->
    <div class="left">
      <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
+        :close-on-click-modal="false" :close-on-press-escape="false">
        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-                  :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/>
-        <used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-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">
+        :close-on-click-modal="false" :close-on-press-escape="false">
        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
-                            :loading="showWindLoading"/>
+          :loading="showWindLoading" />
        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
-                      :loading="showBadLoading"/>
+          :loading="showBadLoading" />
      </el-drawer>
      <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
      <div v-else class="shrink-right" @click="closeRight"></div>
@@ -62,7 +63,7 @@
    <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">
+        @change="changeTunnel">
        <div class="btn">
          <el-carousel-item v-for="item in tunnelList" :key="item.value">
            {{ item.label }}
@@ -73,8 +74,7 @@
    </div>
  </div>
  <div class="alarm-dialog digital-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,18 +86,16 @@
    </el-dialog>
  </div>
  <div class="digital-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'">
+        v-if="roleKey !== 'administrator'">
        <el-form-item label="查阅状态" prop="lookupStatus">
          <el-select v-model="queryParams.lookupStatus" placeholder="请选择查阅状态" :fit-input-width="true"
-                     :teleported="false" clearable filterable>
-            <el-option label="已读" :value="true"/>
-            <el-option label="未读" :value="false"/>
+            :teleported="false" clearable filterable>
+            <el-option label="已读" :value="true" />
+            <el-option label="未读" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
@@ -107,37 +105,39 @@
      </el-form>
      <div class="device-table">
        <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">
+          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="equipmentId" label="设备名称" align="center" width="400px">-->
          <!--            <template #default="scope">-->
          <!--              {{ changeName(scope.row.equipmentId) }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
-          <el-table-column prop="alarmContent" label="告警信息" align="center"/>
-          <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px"/>
+          <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'">
+            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>
-              <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'?'50px':''}">
+        <div class="pagination" :style="{ bottom: roleKey === 'administrator' ? '50px' : '' }">
          <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"/>
+            :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>
@@ -155,9 +155,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
-import {dateFormat} from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
+import { dateFormat } from "@/utils/date.js";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
 import {
  getLargeScreen,
  getLargeScreenInfo,
@@ -167,10 +167,10 @@ import {
  getAlarmDetail,
  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 { ElMessage, ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";
+import { initSceneData } from "@/api/tunnelScene";
+import { getTunnelList } from "@/api/tunnelManage";

 const authStore = useAuthStore();
 const router = useRouter();
@@ -336,10 +336,10 @@ const getAlarmList = () => {
  }).then(res => {
    if (res.code === 1000) {
      loading.value = false
-      if(res.data.rows.length===0){
-        tableEmptyText.value='暂无数据~'
-      }else {
-        tableEmptyText.value=''
+      if (res.data.rows.length === 0) {
+        tableEmptyText.value = '暂无数据~'
+      } else {
+        tableEmptyText.value = ''
      }
      alarmList.value = res.data.rows
      total.value = res.data.total
@@ -370,7 +370,7 @@ const getOtherInfo = () => {
      routeList.value = routeArr
      showMenu.value = true
      siteList.value = res.data.siteOption
-        tunnelList.value = res.data.tunnelOption
+      tunnelList.value = res.data.tunnelOption

      if (siteId) {
        currentSiteId.value = siteId
@@ -416,13 +416,13 @@ const getScreenInfo = (id) => {
          // })
          res.data.sensorList.forEach((item) => {
            if (
-                item.equipmentType === "dust" ||
-                item.equipmentType === "carbonDioxide" ||
-                item.equipmentType === "carbonMonoxide" ||
-                item.equipmentType === "hydrogenSulfide" ||
-                item.equipmentType === "sulfurDioxide" ||
-                item.equipmentType === "sulfurMonoxide" ||
-                item.equipmentType === "nitrogenDioxide"
+              item.equipmentType === "dust" ||
+              item.equipmentType === "carbonDioxide" ||
+              item.equipmentType === "carbonMonoxide" ||
+              item.equipmentType === "hydrogenSulfide" ||
+              item.equipmentType === "sulfurDioxide" ||
+              item.equipmentType === "sulfurMonoxide" ||
+              item.equipmentType === "nitrogenDioxide"
            ) {
              showBadLoading.value = 0
            } else {
@@ -672,7 +672,7 @@ const initWebSocket = () => {
 }

 .alarm-dialog {
-  :deep(.el-dialog ) {
+  :deep(.el-dialog) {
    height: auto !important;
    margin: 820px auto 0 auto;
  }
@@ -682,14 +682,17 @@ const initWebSocket = () => {
  height: 90px;

 }
+
 :deep(.el-table--fit) {
  width: auto;
  //height: 600px;
-  background-color: transparent!important;
-  .el-loading-mask{
+  background-color: transparent !important;
+
+  .el-loading-mask {
    background: rgba(6, 34, 71, 0.78);
-    .el-loading-spinner{
-      .circular{
+
+    .el-loading-spinner {
+      .circular {
        width: 150px;
        height: 150px;
      }
@@ -698,9 +701,10 @@ const initWebSocket = () => {
 }

 :deep(.el-table__empty-block) {
-  height: 200px!important;
+  height: 200px !important;
+
  //display: none;
-  .el-table__empty-text{
+  .el-table__empty-text {
    font-size: 60px;
    color: #08B7B8;
  }
@@ -711,7 +715,7 @@ const initWebSocket = () => {
    font-size: 50px;
    color: #FFFFFF;

-    > div {
+    >div {
      color: #f5f5f5;
      margin-bottom: 10px;
    }
@@ -719,7 +723,7 @@ const initWebSocket = () => {
 }

 .digital-tunnel {
-  :deep(.el-dialog ) {
+  :deep(.el-dialog) {
    height: 1410px;

    .el-tag {
@@ -747,7 +751,7 @@ const initWebSocket = () => {
    }
  }

-  :deep(.el-select-dropdown__item.is-hovering ) {
+  :deep(.el-select-dropdown__item.is-hovering) {
    background-color: #064B66 !important;
  }

@@ -788,12 +792,13 @@ const initWebSocket = () => {
        height: 70px !important;
        line-height: 70px !important;

-        > span {
+        >span {
          color: #FFFFFF;
        }
      }

-      .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+      .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
        background-color: #064B66 !important;
      }
    }
@@ -861,7 +866,7 @@ const initWebSocket = () => {
    line-height: 40px;
    font-size: 36px;

-    & > div {
+    &>div {
      flex: 1;
      text-align: center;
      cursor: pointer;
@@ -932,8 +937,10 @@ const initWebSocket = () => {
  font-size: 38px;
  font-weight: bold;

-  :deep(.el-pagination.is-background ) {
-    .btn-next,.btn-prev {
+  :deep(.el-pagination.is-background) {
+
+    .btn-next,
+    .btn-prev {
      background-color: transparent;
    }

@@ -948,11 +955,11 @@ const initWebSocket = () => {
    }
  }

-  > span:first-child {
+  >span:first-child {
    margin-right: 60px;
  }

-  > span:last-child {
+  >span:last-child {
    margin-left: 71px;
  }

@@ -973,7 +980,7 @@ const initWebSocket = () => {
    margin-left: 30px;
  }

-  :deep(.el-pager li.is-active ) {
+  :deep(.el-pager li.is-active) {
    width: 70px;
    height: 70px;
    background: #60DDDE;
@@ -987,7 +994,7 @@ const initWebSocket = () => {
    margin-left: 40px !important;
  }

-  :deep(.el-pager li:not(.is-active) ) {
+  :deep(.el-pager li:not(.is-active)) {
    width: 70px;
    height: 70px;
    border: 1px solid #60DDDE;