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

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);
             }

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;

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>

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">
+      <!-- <div class="setting-item"> -->
-        <p>传感器类型</p>
+      <!-- <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>
+      <!-- <p>{{ params.equipmentType }}</p> -->
-      </div>
+      <!-- </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;

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);
     // 可以进行点击
+    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) {

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";
+}

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"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
-      <tunnel-title v-if="showTunnelTitle"/>
+      <tunnel-title v-if="showTunnelTitle" />
       <div class="top-length">
         <!--        <span>隧道总长度: {{ tunnelLength }}米</span>-->
         <span>当前施工长度: {{ constructionLength }}米</span>
@@ -22,8 +22,8 @@
             </template>
           </el-dropdown>
           <el-icon size="50" color="#0BE9FA" style="margin-left: 50px;cursor: pointer"
-                   @click="isVisited=true;getAlarmList()">
+            @click="isVisited = true; getAlarmList()">
-            <Bell/>
+            <Bell />
           </el-icon>
         </div>
         <div class="current-user">
@@ -37,12 +37,13 @@
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
       :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">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-                  :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/>
+          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
-        <used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData"/>
+        <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>
@@ -51,10 +52,10 @@
       <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"/>
+          :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>
@@ -73,8 +74,7 @@
     </div>
   </div>
   <div class="alarm-dialog digital-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情"
+    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情" width="1500px">
-               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="报警信息"
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息" width="2175px" :modal="false">
-               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="true" />
-            <el-option label="未读" :value="false"/>
+            <el-option label="未读" :value="false" />
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -108,36 +106,38 @@
       <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' }"
+          :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="alarmContent" label="告警信息" align="center" />
-          <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px"/>
+          <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)"
+              <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"/>
+            @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 { dateFormat } from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
+import { getToken } from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
+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 { ElMessage, ElMessageBox } from "element-plus";
-import {getUserInfo} from "@/api/login";
+import { getUserInfo } from "@/api/login";
-import {initSceneData} from "@/api/tunnelScene";
+import { initSceneData } from "@/api/tunnelScene";
-import {getTunnelList} from "@/api/tunnelManage";
+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){
+      if (res.data.rows.length === 0) {
-        tableEmptyText.value='暂无数据~'
+        tableEmptyText.value = '暂无数据~'
-      }else {
+      } else {
-        tableEmptyText.value=''
+        tableEmptyText.value = ''
       }
       alarmList.value = res.data.rows
       total.value = res.data.total
@@ -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;
+  background-color: transparent !important;
-  .el-loading-mask{
+
+  .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 ) {
+  :deep(.el-pagination.is-background) {
-    .btn-next,.btn-prev {
+
+    .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;