Merge pull request 'dev' (#426) from dev into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/426

src/App.vue

@@ -27,6 +27,11 @@ onMounted(() => {
         height: "100vh",
         width: "100vw",
       },
+      {
+        el: "#imghot",
+        height: "100vh",
+        width: "100vw",
+      },
     ],
   });
 });

src/components/PolygonSelector.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="polygon-selector">
+    <!--用来和鼠标进行交互操作的canvas-->
+    <canvas 
+      id="canvas" 
+      ref="canvasRef" 
+      :width="width + 'px'" 
+      :height="height + 'px'"
+      :style="{ backgroundImage: 'url(' + backgroundImg + ')', cursor: 'crosshair' }"
+    ></canvas>
+    <!--存储已生成的点线，避免被清空-->
+    <canvas 
+      id="canvasSave" 
+      ref="canvasSaveRef"
+      :width="width + 'px'" 
+      :height="height + 'px'"
+      class="canvas-save"
+    ></canvas>
+    <div class="controls">
+      <el-button @click="clearSelection" type="primary">清空选区</el-button>
+      <slot name="controls"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue'
+
+export default {
+  name: 'PolygonSelector',
+  props: {
+    width: {
+      type: [Number, String],
+      default: 1222
+    },
+    height: {
+      type: [Number, String],
+      default: 789
+    },
+    backgroundImg: {
+      type: String,
+      default: '/images/img.png'
+    }
+  },
+  emits: ['selection-complete', 'points-change'],
+  setup(props, { emit }) {
+    const canvasRef = ref(null)
+    const canvasSaveRef = ref(null)
+    
+    let ctx = null
+    let ctxSave = null
+    let pointArr = [] // 存放坐标的数组
+    let oIndex = -1 // 判断鼠标是否移动到起始点处，-1为否，1为是
+
+    onMounted(() => {
+      initCanvas()
+    })
+
+    const initCanvas = () => {
+      const canvas = canvasRef.value
+      const canvasSave = canvasSaveRef.value
+      
+      if (!canvas || !canvasSave) return
+      
+      ctx = canvas.getContext('2d')
+      ctxSave = canvasSave.getContext('2d')
+      
+      // 设置样式
+      ctx.strokeStyle = 'rgba(102,168,255,1)' // 线条颜色
+      ctx.lineWidth = 4 // 线条粗细
+      ctxSave.strokeStyle = 'rgba(102,168,255,1)' // 线条颜色
+      ctxSave.lineWidth = 4 // 线条粗细
+      
+      // 绑定事件
+      canvas.addEventListener('click', handleClick)
+      canvas.addEventListener('mousemove', handleMouseMove)
+    }
+    
+    const handleClick = (e) => {
+      const canvas = canvasRef.value
+      const rect = canvas.getBoundingClientRect()
+      const pointX = e.clientX - rect.left
+      const pointY = e.clientY - rect.top
+      let piX, piY
+      
+      if (oIndex > 0 && pointArr.length > 0) {
+        piX = pointArr[0].x
+        piY = pointArr[0].y
+        // 画点
+        makearc(ctx, piX, piY, getRandomNum(2, 2), 0, 180, 'rgba(102,168,255,0.5)')
+        pointArr.push({x: piX, y: piY})
+        canvasSave(pointArr) // 保存点线同步到另一个canvas
+        saveCanvas() // 生成画布
+      } else {
+        piX = pointX
+        piY = pointY
+        makearc(ctx, piX, piY, getRandomNum(2, 2), 0, 180, 'rgba(102,168,255,0.5)')
+        pointArr.push({x: piX, y: piY})
+        canvasSave(pointArr) // 保存点线同步到另一个canvas
+      }
+    }
+    
+    const handleMouseMove = (e) => {
+      const canvas = canvasRef.value
+      const rect = canvas.getBoundingClientRect()
+      const pointX = e.clientX - rect.left
+      const pointY = e.clientY - rect.top
+      let piX, piY
+      
+      // 清空画布
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      // 鼠标下跟随的圆点
+      makearc(ctx, pointX, pointY, getRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)')
+      
+      if (pointArr.length > 0) {
+        if ((pointX > pointArr[0].x-15 && pointX < pointArr[0].x+15) && 
+            (pointY > pointArr[0].y-15 && pointY < pointArr[0].y+15)) {
+          if (pointArr.length > 1) {
+            piX = pointArr[0].x
+            piY = pointArr[0].y
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            makearc(ctx, piX, piY, getRandomNum(4, 4), 0, 180, 'rgba(102,168,255,0.5)')
+            oIndex = 1
+          }
+        } else {
+          piX = pointX
+          piY = pointY
+          oIndex = -1
+        }
+        
+        // 开始绘制
+        ctx.beginPath()
+        ctx.moveTo(pointArr[0].x, pointArr[0].y)
+        if (pointArr.length > 1) {
+          for (let i = 1; i < pointArr.length; i++) {
+            ctx.lineTo(pointArr[i].x, pointArr[i].y)
+          }
+        }
+        ctx.lineTo(piX, piY)
+        ctx.fillStyle = 'rgba(161,195,255,0.5)' // 填充颜色
+        ctx.fill() // 填充
+        ctx.stroke() // 绘制
+      }
+    }
+    
+    // 存储已生成的点线
+    const canvasSave = (points) => {
+      ctxSave.clearRect(0, 0, ctxSave.canvas.width, ctxSave.canvas.height)
+      ctxSave.beginPath()
+      if (points.length > 1) {
+        ctxSave.moveTo(points[0].x, points[0].y)
+        for (let i = 1; i < points.length; i++) {
+          ctxSave.lineTo(points[i].x, points[i].y)
+          ctxSave.fillStyle = 'rgba(161,195,255,0.5)' // 填充颜色
+          // ctxSave.fill()
+          ctxSave.stroke() // 绘制
+        }
+        ctxSave.closePath()
+        emit('points-change', [...points])
+      }
+    }
+    
+    // 生成画布 结束绘画
+    const saveCanvas = () => {
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+      ctxSave.closePath() // 结束路径状态，结束当前路径，如果是一个未封闭的图形，会自动将首尾相连封闭起来
+      ctxSave.fill() // 填充
+      ctxSave.stroke() // 绘制
+      emit('selection-complete', [...pointArr])
+      pointArr = []
+      oIndex = -1
+    }
+    
+    // 清空选区
+    const clearSelection = () => {
+      const canvas = canvasRef.value
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctxSave.clearRect(0, 0, ctxSave.canvas.width, ctxSave.canvas.height)
+      pointArr = []
+      oIndex = -1
+      emit('points-change', [])
+    }
+    
+    // canvas生成圆点
+    const getRandomNum = (min, max) => {
+      const range = max - min
+      const rand = Math.random()
+      return (min + Math.round(rand * range))
+    }
+    
+    const makearc = (ctx, x, y, r, s, e, color) => {
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) // 清空画布
+      ctx.beginPath()
+      ctx.fillStyle = color
+      ctx.arc(x, y, r, s, e)
+      ctx.fill()
+    }
+    
+    return {
+      canvasRef,
+      canvasSaveRef,
+      clearSelection
+    }
+  }
+}
+</script>
+
+<style scoped>
+.polygon-selector {
+  position: relative;
+  display: inline-block;
+}
+
+#canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.canvas-save {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 0;
+}
+
+.controls {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 2;
+}
+</style>

src/components/content/tunnelScene/PolygonSelector.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="polygon-selector" :style="{ width: '100%', height: '100%' }">
+    <!--用来和鼠标进行交互操作的canvas-->
+    <canvas 
+      id="canvas" 
+      ref="canvasRef" 
+      :width="canvasWidth + 'px'" 
+      :height="canvasHeight + 'px'"
+      :style="{ backgroundImage: 'url(' + backgroundImg + ')', cursor: 'crosshair' }"
+    ></canvas>
+    <!--存储已生成的点线，避免被清空-->
+    <canvas 
+      id="canvasSave" 
+      ref="canvasSaveRef"
+      :width="canvasWidth + 'px'" 
+      :height="canvasHeight + 'px'"
+      class="canvas-save"
+    ></canvas>
+    <div class="controls">
+      <el-button @click="clearSelection" type="primary">清空选区</el-button>
+      <slot name="controls"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, onUpdated } from 'vue'
+
+export default {
+  name: 'PolygonSelector',
+  props: {
+    width: {
+      type: [Number, String],
+      default: 1222
+    },
+    height: {
+      type: [Number, String],
+      default: 789
+    },
+    backgroundImg: {
+      type: String,
+      default: '/images/img.png'
+    }
+  },
+  emits: ['selection-complete', 'points-change'],
+  setup(props, { emit }) {
+    const canvasRef = ref(null)
+    const canvasSaveRef = ref(null)
+    
+    let ctx = null
+    let ctxSave = null
+    let pointArr = [] // 存放坐标的数组
+    let oIndex = -1 // 判断鼠标是否移动到起始点处，-1为否，1为是
+    
+    // 响应式canvas尺寸
+    const canvasWidth = ref(1222)
+    const canvasHeight = ref(789)
+
+    onMounted(() => {
+      initCanvas()
+      window.addEventListener('resize', handleResize)
+    })
+
+    onUpdated(() => {
+      // 当组件更新时重新初始化canvas
+      if (canvasRef.value) {
+        canvasRef.value.width = canvasWidth.value
+        canvasRef.value.height = canvasHeight.value
+      }
+    })
+
+    const handleResize = () => {
+      // 根据窗口尺寸调整canvas大小
+      const container = canvasRef.value?.parentElement
+      if (container) {
+        canvasWidth.value = container.clientWidth
+        canvasHeight.value = container.clientHeight
+      }
+    }
+
+    const initCanvas = () => {
+      const canvas = canvasRef.value
+      const canvasSave = canvasSaveRef.value
+      
+      if (!canvas || !canvasSave) return
+      
+      ctx = canvas.getContext('2d')
+      ctxSave = canvasSave.getContext('2d')
+      
+      // 设置样式
+      ctx.strokeStyle = 'rgba(102,168,255,1)' // 线条颜色
+      ctx.lineWidth = 4 // 线条粗细
+      ctxSave.strokeStyle = 'rgba(102,168,255,1)' // 线条颜色
+      ctxSave.lineWidth = 4 // 线条粗细
+      
+      // 绑定事件
+      canvas.addEventListener('click', handleClick)
+      canvas.addEventListener('mousemove', handleMouseMove)
+    }
+    
+    const handleClick = (e) => {
+      const canvas = canvasRef.value
+      const rect = canvas.getBoundingClientRect()
+      const pointX = e.clientX - rect.left
+      const pointY = e.clientY - rect.top
+      let piX, piY
+      
+      if (oIndex > 0 && pointArr.length > 0) {
+        piX = pointArr[0].x
+        piY = pointArr[0].y
+        // 画点
+        makearc(ctx, piX, piY, getRandomNum(2, 2), 0, 180, 'rgba(102,168,255,0.5)')
+        pointArr.push({x: piX, y: piY})
+        canvasSave(pointArr) // 保存点线同步到另一个canvas
+        saveCanvas() // 生成画布
+      } else {
+        piX = pointX
+        piY = pointY
+        makearc(ctx, piX, piY, getRandomNum(2, 2), 0, 180, 'rgba(102,168,255,0.5)')
+        pointArr.push({x: piX, y: piY})
+        canvasSave(pointArr) // 保存点线同步到另一个canvas
+      }
+    }
+    
+    const handleMouseMove = (e) => {
+      const canvas = canvasRef.value
+      const rect = canvas.getBoundingClientRect()
+      const pointX = e.clientX - rect.left
+      const pointY = e.clientY - rect.top
+      let piX, piY
+      
+      // 清空画布
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      // 鼠标下跟随的圆点
+      makearc(ctx, pointX, pointY, getRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)')
+      
+      if (pointArr.length > 0) {
+        if ((pointX > pointArr[0].x-15 && pointX < pointArr[0].x+15) && 
+            (pointY > pointArr[0].y-15 && pointY < pointArr[0].y+15)) {
+          if (pointArr.length > 1) {
+            piX = pointArr[0].x
+            piY = pointArr[0].y
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            makearc(ctx, piX, piY, getRandomNum(4, 4), 0, 180, 'rgba(102,168,255,0.5)')
+            oIndex = 1
+          }
+        } else {
+          piX = pointX
+          piY = pointY
+          oIndex = -1
+        }
+        
+        // 开始绘制
+        ctx.beginPath()
+        ctx.moveTo(pointArr[0].x, pointArr[0].y)
+        if (pointArr.length > 1) {
+          for (let i = 1; i < pointArr.length; i++) {
+            ctx.lineTo(pointArr[i].x, pointArr[i].y)
+          }
+        }
+        ctx.lineTo(piX, piY)
+        ctx.fillStyle = 'rgba(161,195,255,0.5)' // 填充颜色
+        ctx.fill() // 填充
+        ctx.stroke() // 绘制
+      }
+    }
+    
+    // 存储已生成的点线
+    const canvasSave = (points) => {
+      ctxSave.clearRect(0, 0, ctxSave.canvas.width, ctxSave.canvas.height)
+      ctxSave.beginPath()
+      if (points.length > 1) {
+        ctxSave.moveTo(points[0].x, points[0].y)
+        for (let i = 1; i < points.length; i++) {
+          ctxSave.lineTo(points[i].x, points[i].y)
+          ctxSave.fillStyle = 'rgba(161,195,255,0.5)' // 填充颜色
+          // ctxSave.fill()
+          ctxSave.stroke() // 绘制
+        }
+        ctxSave.closePath()
+        emit('points-change', [...points])
+      }
+    }
+    
+    // 生成画布 结束绘画
+    const saveCanvas = () => {
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+      ctxSave.closePath() // 结束路径状态，结束当前路径，如果是一个未封闭的图形，会自动将首尾相连封闭起来
+      ctxSave.fill() // 填充
+      ctxSave.stroke() // 绘制
+      emit('selection-complete', [...pointArr])
+      pointArr = []
+      oIndex = -1
+    }
+    
+    // 清空选区
+    const clearSelection = () => {
+      const canvas = canvasRef.value
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctxSave.clearRect(0, 0, ctxSave.canvas.width, ctxSave.canvas.height)
+      pointArr = []
+      oIndex = -1
+      emit('points-change', [])
+    }
+    
+    // canvas生成圆点
+    const getRandomNum = (min, max) => {
+      const range = max - min
+      const rand = Math.random()
+      return (min + Math.round(rand * range))
+    }
+    
+    const makearc = (ctx, x, y, r, s, e, color) => {
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) // 清空画布
+      ctx.beginPath()
+      ctx.fillStyle = color
+      ctx.arc(x, y, r, s, e)
+      ctx.fill()
+    }
+    
+    return {
+      canvasRef,
+      canvasSaveRef,
+      clearSelection,
+      canvasWidth,
+      canvasHeight
+    }
+  }
+}
+</script>
+
+<style scoped>
+.polygon-selector {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+#canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.canvas-save {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 0;
+}
+
+.controls {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 2;
+}
+</style>

src/router/index.js

@@ -23,6 +23,15 @@ const routes = [
       breadcrumb: true
     },
   },
+  {
+    path: '/polygon-demo',
+    name: 'polygon-demo',
+    component: () => import('@/views/tunnel/polygon-demo.vue'),
+    meta: {
+      title: '图片热区',
+      breadcrumb: true
+    },
+  },
   {
     path: '/:tunnelId/:siteId',
     name: 'changeSitePreview',

src/views/tunnel/index.vue

@@ -2,10 +2,10 @@
   <div id="main">
     <div class="box-top">
       <manage-btn
-        v-model="selectIndex"
+          v-model="selectIndex"
-        @select="manageSelect"
+          @select="manageSelect"
-        :list="routeList"
+          :list="routeList"
-        v-if="showMenu"
+          v-if="showMenu"
       />
       <tunnel-title v-if="showTunnelTitle" />
       <div class="top-length">
@@ -16,27 +16,27 @@
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
           <el-dropdown
-            trigger="click"
+              trigger="click"
-            @command="handleChangeSite"
+              @command="handleChangeSite"
-            popper-class="dropdown-style"
+              popper-class="dropdown-style"
           >
             <div class="toggle"></div>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item
-                  v-for="item in siteList"
+                    v-for="item in siteList"
-                  :key="item.value"
+                    :key="item.value"
-                  :command="item"
+                    :command="item"
-                  >{{ item.label }}
+                >{{ item.label }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
           <el-icon
-            size="50"
+              size="50"
-            color="#0BE9FA"
+              color="#0BE9FA"
-            style="margin-left: 50px; cursor: pointer"
+              style="margin-left: 50px; cursor: pointer"
-            @click="
+              @click="
               isVisited = true;
               getAlarmList();
             "
@@ -54,38 +54,38 @@
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <preview-scene
-      id="tunnel-box"
+        id="tunnel-box"
-      :isedit="false"
+        :isedit="false"
-      :tunnelId="tunnelId"
+        :tunnelId="tunnelId"
-      :key="tunnelId"
+        :key="tunnelId"
-      :tunnelLen="tunnelLen"
+        :tunnelLen="tunnelLen"
-      :largeScreen="largeScreen"
+        :largeScreen="largeScreen"
-      :fanList="socketData.leftData"
+        :fanList="socketData.leftData"
-      :devRealtimeData="socketData"
+        :devRealtimeData="socketData"
     ></preview-scene>
     <div class="left">
       <el-drawer
-        v-model="drawerLeft"
+          v-model="drawerLeft"
-        direction="ltr"
+          direction="ltr"
-        modal-class="modal-box"
+          modal-class="modal-box"
-        :modal="false"
+          :modal="false"
-        :show-close="false"
+          :show-close="false"
-        :close-on-click-modal="false"
+          :close-on-click-modal="false"
-        :close-on-press-escape="false"
+          :close-on-press-escape="false"
       >
         <fan-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.leftData"
+            :list="socketData.leftData"
-          :fan-data="largeScreenData"
+            :fan-data="largeScreenData"
-          :transducer-data="largeScreenData"
+            :transducer-data="largeScreenData"
-          :loading="showFanLoading"
+            :loading="showFanLoading"
-          :tunnel-id="tunnelId"
+            :tunnel-id="tunnelId"
         />
         <used-ele
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.leftData"
+            :list="socketData.leftData"
-          :loading="showUsedLoading"
+            :loading="showUsedLoading"
-          :ele-data="largeScreenData"
+            :ele-data="largeScreenData"
         />
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
@@ -93,32 +93,32 @@
     </div>
     <div class="right">
       <el-drawer
-        v-model="drawerRight"
+          v-model="drawerRight"
-        direction="rtl"
+          direction="rtl"
-        modal-class="modal-box"
+          modal-class="modal-box"
-        :modal="false"
+          :modal="false"
-        :show-close="false"
+          :show-close="false"
-        :close-on-click-modal="false"
+          :close-on-click-modal="false"
-        :close-on-press-escape="false"
+          :close-on-press-escape="false"
       >
         <wind-pressure-list
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.windPressure"
+            :list="socketData.windPressure"
-          :win-data="largeScreenData"
+            :win-data="largeScreenData"
-          :loading="showWindLoading"
+            :loading="showWindLoading"
         />
         <air-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :windSpeed="socketData.windSpeed"
+            :windSpeed="socketData.windSpeed"
-          :air-data="largeScreenData"
+            :air-data="largeScreenData"
         />
         <bad-gas-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :bad-gas-data="largeScreenData"
+            :bad-gas-data="largeScreenData"
-          :tunnelId="tunnelId"
+            :tunnelId="tunnelId"
-          :loading="showBadLoading"
+            :loading="showBadLoading"
         />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -127,7 +127,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 }}
@@ -139,10 +139,10 @@
   </div>
   <div class="alarm-dialog alarm-tunnel">
     <el-dialog
-      :close-on-click-modal="false"
+        :close-on-click-modal="false"
-      v-model="isDetailVisited"
+        v-model="isDetailVisited"
-      title="报警信息详情"
+        title="报警信息详情"
-      width="1500px"
+        width="1500px"
     >
       <div class="detail">
         <div>报警时间：</div>
@@ -156,30 +156,30 @@
   </div>
   <div class="alarm-tunnel">
     <el-dialog
-      :close-on-click-modal="false"
+        :close-on-click-modal="false"
-      v-model="isVisited"
+        v-model="isVisited"
-      title="报警信息"
+        title="报警信息"
-      width="2175px"
+        width="2175px"
-      :modal="false"
+        :modal="false"
     >
       <div class="left-top-icon"></div>
       <div class="right-top-icon"></div>
       <el-form
-        :model="queryParams"
+          :model="queryParams"
-        inline
+          inline
-        class="query-form"
+          class="query-form"
-        ref="queryForm"
+          ref="queryForm"
-        @submit.prevent="getAlarmList"
+          @submit.prevent="getAlarmList"
-        v-if="roleKey !== 'administrator'"
+          v-if="roleKey !== 'administrator'"
       >
         <el-form-item label="查阅状态" prop="lookupStatus">
           <el-select
-            v-model="queryParams.lookupStatus"
+              v-model="queryParams.lookupStatus"
-            placeholder="请选择查阅状态"
+              placeholder="请选择查阅状态"
-            :fit-input-width="true"
+              :fit-input-width="true"
-            :teleported="false"
+              :teleported="false"
-            clearable
+              clearable
-            filterable
+              filterable
           >
             <el-option label="已读" :value="true" />
             <el-option label="未读" :value="false" />
@@ -192,55 +192,55 @@
       </el-form>
       <div class="device-table" :style="{ marginTop: roleKey === 'administrator' ? '10px' : '0' }">
         <el-table stripe v-loading="loading" :empty-text="tableEmptyText"
-          style="background-color: #011c29;--el-table-border-color: none;"
+                  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">
+                  :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'">
+                           v-if="roleKey !== 'administrator'">
             <template #default="scope">
               <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
-                >{{ scope.row.lookupStatus ? "已读" : "未读" }}
+              >{{ scope.row.lookupStatus ? "已读" : "未读" }}
               </el-tag>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" width="300px">
             <template #default="scope">
               <el-button
-                type="primary"
+                  type="primary"
-                size="mini"
+                  size="mini"
-                style="font-weight: bold"
+                  style="font-weight: bold"
-                @click="handleView(scope.row)"
+                  @click="handleView(scope.row)"
-                link
+                  link
-                >详情
+              >详情
               </el-button>
               <el-button
-                type="danger"
+                  type="danger"
-                size="mini"
+                  size="mini"
-                v-if="roleKey !== 'administrator'"
+                  v-if="roleKey !== 'administrator'"
-                @click="handleDelete(scope.row)"
+                  @click="handleDelete(scope.row)"
-                link
+                  link
-                >删除
+              >删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
         <div
-          class="pagination"
+            class="pagination"
-          :style="{ bottom: roleKey === 'administrator' ? '-7px' : '0' }"
+            :style="{ bottom: roleKey === 'administrator' ? '-7px' : '0' }"
         >
           <el-pagination
-            background
+              background
-            v-model:current-page="pageInfo.pageNum"
+              v-model:current-page="pageInfo.pageNum"
-            v-model:page-size="pageInfo.pageSize"
+              v-model:page-size="pageInfo.pageSize"
-            :total="total" :pager-count="8"
+              :total="total" :pager-count="8"
-            prev-text="上一页"
+              prev-text="上一页"
-            next-text="下一页"
+              next-text="下一页"
-            layout="prev, pager, next"
+              layout="prev, pager, next"
-            @current-change="handleCurrentChange"
+              @current-change="handleCurrentChange"
-            :hide-on-single-page="true"
+              :hide-on-single-page="true"
           />
         </div>
       </div>
@@ -524,13 +524,13 @@ const getScreenInfo = (id) => {
           // })
           res.data.sensorList.forEach((item) => {
             if (
-              item.equipmentType === "dust" ||
+                item.equipmentType === "dust" ||
-              item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonDioxide" ||
-              item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "carbonMonoxide" ||
-              item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "hydrogenSulfide" ||
-              item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurDioxide" ||
-              item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
-              item.equipmentType === "nitrogenDioxide"
+                item.equipmentType === "nitrogenDioxide"
             ) {
               showBadLoading.value = 0;
             } else {
@@ -630,7 +630,7 @@ const manageSelect = (name) => {
   } else if (name === "隧道管理") {
     if (currentSiteId.value && currentUserId.value) {
       router.push(
-        "/tunnel/" +
+          "/tunnel/" +
           localStorage.getItem("currentSiteId") +
           "/byHome/" +
           currentUserId.value