预警管控及报表数据映射功能及界面-提交

src/views/vent/monitorManager/alarmMonitor/alarm.data.ts

@@ -186,6 +186,11 @@ export const iconsMonitor = reactive({
     level: 100,
     text: '瓦斯抽采管路',
   },
+  modelsensor: {
+    url: getAssetURL('vent/alarm-icons/cf.png'),
+    level: 100,
+    text: '传感器',
+  },
 });
 
 export function setScatterEcharts(el: HTMLElement) {

src/views/vent/monitorManager/alarmMonitor/common/closeWall.vue

@@ -624,6 +624,8 @@ watch(
 
         .echarts-box {
           height: calc(100% - 40px);
+          padding: 0px 10px;
+          box-sizing: border-box;
         }
       }
 

src/views/vent/monitorManager/alarmMonitor/common/echartLine.vue

@@ -130,7 +130,8 @@ function getOption() {
           },
           axisLine: {
             lineStyle: {
-              color: 'rgba(14, 53, 95)',
+              // color: 'rgba(14, 53, 95)',
+              color: '#244a94',
             },
           },
           splitLine: {
@@ -164,13 +165,15 @@ function getOption() {
           },
           splitLine: {
             lineStyle: {
-              color: 'rgba(14, 53, 95)',
+              // color: 'rgba(14, 53, 95)',
+              color: '#0d2973',
             },
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: 'rgba(14, 53, 95)',
+              // color: 'rgba(14, 53, 95)',
+              color: '#244a94',
             },
           },
           axisTick: {

src/views/vent/monitorManager/alarmMonitor/common/warnTargetFire.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="warnTargetFire">
         <div class="top-area">
-            <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 374 }">
+            <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 359 }">
                 <template #bodyCell="{ column, text }">
                     <template v-if="column.dataIndex === 'name'">
                         <a href="javascript:;">{{ text }}</a>
@@ -23,9 +23,9 @@ import warnZb from './warnZb.vue'
 
 let widthV = ref('80%')
 let heightV = ref('80%')
-let coordDw = ref<any[]>([9, 30, 64, 110, 170, 204,])
+let coordDw = ref<any[]>([15, 36, 70, 116, 176, 212,])
 let widthCanvas = ref(1508)
-let heightCanvas = ref(270)
+let heightCanvas = ref(256)
 let tableData = ref<any[]>([
     { yjdj: '灰色预警', zrjd: '氧化阶段', zb: 'CO,O₂', tj: '当O₂浓度为8%~15%时CO<200ppm;当O₂浓度为15%~18%时，CO<100ppm;当O₂浓度为时，CO<50ppm',wd:'T0⊂(30,50)', ckz: '' },
     { yjdj: '蓝色预警', zrjd: '自热阶段', zb: 'CO,O₂,(CO*100)/△O₂', tj: '超过氧化阶段条件',wd:'T0⊂(50,70)', ckz: '0.2~0.5' },
@@ -85,18 +85,21 @@ let columns = reactive([
 .warnTargetFire {
     width: 100%;
     height: 100%;
-    padding: 15px 0px;
+    margin: 15px 0px 0px 0px;
+    padding: 20px;
+    background: url('../../../../../assets//images/fire/border.png') no-repeat center;
+    background-size: 100% 100%;
     box-sizing: border-box;
-
+   
     .top-area {
-        height: 55%;
+        height:55% ;
         margin-bottom: 15px;
         background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
     }
 
     .bot-area {
-        height: calc(45% - 10px);
+        height: calc(45% - 15px);
         background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 

src/views/vent/monitorManager/alarmMonitor/common/warnZb.vue

@@ -30,7 +30,7 @@
           <div class="text">燃烧期</div>
         </div>
       </div>
-      <div class="coord-area" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
+      <div class="coord-area" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)',overflow:'hidden' }">
         <canvas id="myCanvas" :width="widthCanvas" :height="heightCanvas"></canvas>
       </div>
     </div>
@@ -87,7 +87,7 @@ function getCanvas() {
   let ctx = canvas.getContext('2d');
   let x = 0;
   let step = props.widthCanvas < 600 ? 0.02 : 0.05; // 设置每次递增的长度
-  let y = props.widthCanvas < 600 ? 280 : 250; // 初始y坐标
+  let y = props.widthCanvas < 600 ? 280 : 230; // 初始y坐标
   // 设置线条样式
   ctx.strokeStyle = '#3df6ff'; // 红色线条
   ctx.lineWidth = 2; // 线宽为2
@@ -105,29 +105,53 @@ function getCanvas() {
     xValues[i] = x;
     yValues[i] = y;
   }
-  ctx.fillStyle = 'rgba(61, 246, 255,.2)'; // 设置填充颜色
   // 绘制递增曲线
   ctx.beginPath();
   ctx.moveTo(xValues[0], yValues[0]);
   for (var i = 1; i < xValues.length; i++) {
     ctx.lineTo(xValues[i], yValues[i]);
     if(props.warnLevel=='1'){
+      ctx.fillStyle = 'rgba(145, 230, 9)'; // 设置填充颜色
       if(props.widthCanvas < 600 && i<=4500){
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }else if(i<=4000) {
         ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
       }
-     
     }else if(props.warnLevel=='2'){
-
+      ctx.fillStyle = 'rgba(0, 242, 255)'; // 设置填充颜色
+      if(props.widthCanvas < 600 && i<=9000){
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }else if(i<=8000) {
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }
     }else if(props.warnLevel=='3'){
-
+      ctx.fillStyle = 'rgba(255, 255, 53)'; // 设置填充颜色
+      if(props.widthCanvas < 600 && i<=13500){
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }else if(i<=12000) {
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }
     }else if(props.warnLevel=='4'){
-
+      ctx.fillStyle = 'rgba(255, 190, 105)'; // 设置填充颜色
+      if(props.widthCanvas < 600 && i<=18000){
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }else if(i<=16000) {
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }
     }else if(props.warnLevel=='5'){
-
+      ctx.fillStyle = 'rgba(255, 111, 0)'; // 设置填充颜色
+      if(props.widthCanvas < 600 && i<=22500){
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }else if(i<=20000) {
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }
     }else if(props.warnLevel=='6'){
-
+      ctx.fillStyle = 'rgba(255, 0, 0)'; // 设置填充颜色
+      if(props.widthCanvas < 600 && i<=27000){
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }else if(i<=22000) {
+        ctx.fillRect(xValues[i], yValues[i], step, canvas.height - yValues[i]);
+      }
     }
   
   }
@@ -177,7 +201,7 @@ function getCanvas() {
   ctx.fillText('火灾', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 10, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
 
   // 设置线条样式（颜色、宽度等）
-  ctx.strokeStyle = 'rgba(179, 223, 246,.3)';
+  ctx.strokeStyle = '#0d2973';
   ctx.lineWidth = 1;
   ctx.lineCap = 'round';
   // 定义虚线模式：[线段长度, 间隔长度]
@@ -194,7 +218,7 @@ function getCanvas() {
   ctx.stroke(); // 进行绘制
   // 在线条附近添加文字
   ctx.font = '12px Arial';
-  ctx.fillStyle = 'rgba(179, 223, 246)';
+  ctx.fillStyle = '#2aadf3';
   if (props.widthCanvas < 600) {
     ctx.fillText('潜伏阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 70, yValues[props.widthCanvas < 600 ? 4500 : 4000] + 25); // 文字位置略微偏上，以便于文字与点对齐
     ctx.fillText('氧化阶段', xValues[props.widthCanvas < 600 ? 4500 : 4000] - 70, yValues[props.widthCanvas < 600 ? 4500 : 4000] - 5); // 文字位置略微偏上，以便于文字与点对齐
@@ -214,7 +238,7 @@ function getCanvas() {
   ctx.stroke(); // 进行绘制
   // 在线条附近添加文字
   ctx.font = '12px Arial';
-  ctx.fillStyle = 'rgba(179, 223, 246)';
+  ctx.fillStyle = '#2aadf3';
   if (props.widthCanvas < 600) {
     ctx.fillText('自热阶段', xValues[props.widthCanvas < 600 ? 9000 : 8000] - 160, yValues[props.widthCanvas < 600 ? 9000 : 8000] - 12); // 文字位置略微偏上，以便于文字与点对齐
   } else {
@@ -232,7 +256,7 @@ function getCanvas() {
   ctx.stroke(); // 进行绘制
   // 在线条附近添加文字
   ctx.font = '12px Arial';
-  ctx.fillStyle = 'rgba(179, 223, 246)';
+  ctx.fillStyle = '#2aadf3';
   if (props.widthCanvas < 600) {
     ctx.fillText('临界阶段', xValues[props.widthCanvas < 600 ? 13500 : 12000] - 250, yValues[props.widthCanvas < 600 ? 13500 : 12000] - 20); // 文字位置略微偏上，以便于文字与点对齐
   } else {
@@ -250,7 +274,7 @@ function getCanvas() {
   ctx.stroke(); // 进行绘制
   // 在线条附近添加文字
   ctx.font = '12px Arial';
-  ctx.fillStyle = 'rgba(179, 223, 246)';
+  ctx.fillStyle = '#2aadf3';
   if (props.widthCanvas < 600) {
     ctx.fillText('热解阶段', xValues[props.widthCanvas < 600 ? 18000 : 16000] - 340, yValues[props.widthCanvas < 600 ? 18000 : 16000] - 25); // 文字位置略微偏上，以便于文字与点对齐
   } else {
@@ -268,7 +292,7 @@ function getCanvas() {
   ctx.stroke(); // 进行绘制
   // 在线条附近添加文字
   ctx.font = '12px Arial';
-  ctx.fillStyle = 'rgba(179, 223, 246)';
+  ctx.fillStyle = '#2aadf3';
   if (props.widthCanvas < 600) {
     ctx.fillText('裂变阶段', xValues[props.widthCanvas < 600 ? 22500 : 20000] - 430, yValues[props.widthCanvas < 600 ? 22500 : 20000] - 30); // 文字位置略微偏上，以便于文字与点对齐
   } else {
@@ -286,7 +310,7 @@ function getCanvas() {
   ctx.stroke(); // 进行绘制
   // 在线条附近添加文字
   ctx.font = '12px Arial';
-  ctx.fillStyle = 'rgba(179, 223, 246)';
+  ctx.fillStyle = '#2aadf3';
   if (props.widthCanvas < 600) {
     ctx.fillText('燃烧阶段', xValues[props.widthCanvas < 600 ? 27000 : 22000] - 520, yValues[props.widthCanvas < 600 ? 27000 : 22000] - 15); // 文字位置略微偏上，以便于文字与点对齐
   } else {
@@ -320,8 +344,8 @@ onMounted(() => {
     position: absolute;
     left: 50%;
     top: 50%;
-    border-left: 1px solid #006c9d;
-    border-bottom: 1px solid #006c9d;
+    border-left: 1px solid #244a94;
+    border-bottom: 1px solid #244a94;
     transform: translate(-50%, -55%);
 
     .triangle-x {
@@ -333,7 +357,7 @@ onMounted(() => {
       border-top: 5px solid transparent;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-bottom: 10px solid #006c9d;
+      border-bottom: 10px solid #244a94;
     }
 
     .triangle-y {
@@ -343,7 +367,7 @@ onMounted(() => {
       width: 0px;
       height: 0px;
       border-top: 5px solid transparent;
-      border-left: 10px solid #006c9d;
+      border-left: 10px solid #244a94;
       border-right: 5px solid transparent;
       border-bottom: 5px solid transparent;
     }
@@ -359,8 +383,8 @@ onMounted(() => {
         position: absolute;
         left: 50%;
         transform: translate(-50%, 0);
-        color: #006c9d;
-        font-size: 14px;
+        color: #b3b8cc;
+        font-size: 12px;
       }
     }
 
@@ -371,7 +395,7 @@ onMounted(() => {
       bottom: -50px;
       width: 100%;
       height: 50px;
-      border-left: 1px solid #006c9d;
+      border-left: 1px solid #244a94;
 
       .left-jt {
         position: absolute;
@@ -380,7 +404,7 @@ onMounted(() => {
         width: 0px;
         height: 0px;
         border-top: 5px solid transparent;
-        border-right: 10px solid #006c9d;
+        border-right: 10px solid #244a94;
         border-left: 5px solid transparent;
         border-bottom: 5px solid transparent;
       }
@@ -392,7 +416,7 @@ onMounted(() => {
         width: 0px;
         height: 0px;
         border-top: 5px solid transparent;
-        border-left: 10px solid #006c9d;
+        border-left: 10px solid #244a94;
         border-right: 5px solid transparent;
         border-bottom: 5px solid transparent;
       }
@@ -412,7 +436,7 @@ onMounted(() => {
         position: absolute;
         left: 14px;
         top: 34px;
-        background-color: #006c9d;
+        background-color: #244a94;
       }
 
       .bj-qfq {
@@ -420,7 +444,7 @@ onMounted(() => {
         position: relative;
         // width: 401px;
         height: 100%;
-        border-right: 1px dashed #006c9d;
+        border-right: 1px dashed #244a94;
       }
 
       .bj-zrq {
@@ -428,7 +452,7 @@ onMounted(() => {
         position: relative;
         // width: 699px;
         height: 100%;
-        border-right: 1px dashed #006c9d;
+        border-right: 1px dashed #244a94;
       }
 
       .bj-rsq {

src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -50,15 +50,8 @@
             </div>
           </div>
           <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
-          <BarSingle
-            :xAxisData="xAxisData"
-            :dataSource="windData.levels"
-            height="225px"
-            :chartsColumns="chartsColumns"
-            :option="option"
-            :color="colors"
-            :fontColor="fontColor"
-          />
+          <BarSingle :xAxisData="xAxisData" :dataSource="windData.levels" height="225px" :chartsColumns="chartsColumns"
+            :option="option" :color="colors" :fontColor="fontColor" />
         </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
@@ -74,34 +67,30 @@
                 </div>
                 <div></div>
                 <img :src="item.url" :alt="item.text" />
-                <div
-                  class="level-text"
-                  :class="{
-                    'level-text-0': item.level == 0,
-                    'level-text-1': item.level == 101,
-                    'level-text-2': item.level == 102,
-                    'level-text-3': item.level == 103,
-                    'level-text-4': item.level == 104,
-                    'level-text-5': item.level == 201,
-                    'level-text-6':
-                      item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
-                  }"
-                  >{{
+                <div class="level-text" :class="{
+                  'level-text-0': item.level == 0,
+                  'level-text-1': item.level == 101,
+                  'level-text-2': item.level == 102,
+                  'level-text-3': item.level == 103,
+                  'level-text-4': item.level == 104,
+                  'level-text-5': item.level == 201,
+                  'level-text-6':
+                    item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
+                }">{{
                     item.level == 0
                       ? '低风险'
                       : item.level == 101
-                      ? '低风险'
-                      : item.level == 102
-                      ? '一般风险'
-                      : item.level == 103
-                      ? '较大风险'
-                      : item.level == 104
-                      ? '较大风险'
-                      : item.level == 201
-                      ? '报警'
-                      : '未连接'
-                  }}</div
-                >
+                        ? '低风险'
+                        : item.level == 102
+                          ? '一般风险'
+                          : item.level == 103
+                            ? '较大风险'
+                            : item.level == 104
+                              ? '较大风险'
+                              : item.level == 201
+                                ? '报警'
+                                : '未连接'
+                  }}</div>
               </div>
             </template>
           </div>
@@ -111,28 +100,21 @@
     <div class="center-box">
       <div class="animation-box">
         <canvas class="rain"></canvas>
-        <div
-          class="bottom"
-          :class="{
-            bottom1: centerData.levels == 101 || centerData.levels == 0 || centerData.levels == 10000,
-            bottom2: centerData.levels == 102,
-            bottom3: centerData.levels == 103,
-            bottom4: centerData.levels == 104,
-            bottom5: centerData.levels == 201,
-          }"
-        >
+        <div class="bottom" :class="{
+          bottom1: centerData.levels == 101 || centerData.levels == 0 || centerData.levels == 10000,
+          bottom2: centerData.levels == 102,
+          bottom3: centerData.levels == 103,
+          bottom4: centerData.levels == 104,
+          bottom5: centerData.levels == 201,
+        }">
           <div class="animation1">
             <div class="ball"></div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559" style="opacity: 0.5">
+            <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559"
+              style="opacity: 0.5">
               <g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
-                <path
-                  id="椭圆_2595"
-                  data-name="椭圆 2595"
+                <path id="椭圆_2595" data-name="椭圆 2595"
                   d="M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z"
-                  transform="translate(755.808 140.636)"
-                  fill="#28a6ff"
-                  opacity="0.7"
-                />
+                  transform="translate(755.808 140.636)" fill="#28a6ff" opacity="0.7" />
               </g>
             </svg>
           </div>
@@ -140,35 +122,27 @@
             <div class="ball1"></div>
             <svg xmlns="http://www.w3.org/2000/svg" width="414.878" height="91.7" viewBox="0 0 414.878 91.7">
               <g id="组_14136" data-name="组 14136" transform="translate(-721.822 -158.273)">
-                <path
-                  id="椭圆_2595"
-                  data-name="椭圆 2595"
+                <path id="椭圆_2595" data-name="椭圆 2595"
                   d="M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z"
-                  transform="translate(722.572 159.023)"
-                  fill="#3dd8ff"
-                  opacity="0.5"
-                />
+                  transform="translate(722.572 159.023)" fill="#3dd8ff" opacity="0.5" />
               </g>
             </svg>
           </div>
           <div class="text-box">
             <div class="text1">{{
-              centerData.levels == 101
+              centerData.levels == 0
                 ? '低风险'
-                : centerData.levels == 102
-                ? '一般风险'
-                : centerData.levels == 103
-                ? '较大风险'
-                : centerData.levels == 104
-                ? '重大风险'
-                : centerData.levels == 201
-                ? '报警'
-                : // : centerData.levels == 0
-                  // ? '正常'
-                  // : centerData.levels == 10000
-                  // ? '正常'
-                  '低风险'
+                : centerData.levels == 101
+                  ? '低风险'
+                  : centerData.levels == 102
+                    ? '一般风险'
+                    : centerData.levels == 103
+                      ? '较大风险'
+                      : centerData.levels == 104
+                        ? '较大风险'
+                        : centerData.levels == 201 ? '报警' : '未连接'
             }}</div>
+
             <div class="text2">风险分析</div>
           </div>
           <div class="icon-animation"></div>
@@ -181,7 +155,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">火灾监测预警</span>
-              <span :class="centerData.fire ? 'value' : 'value1'">{{ centerData.fire == '正常' ? '低风险' : centerData.fire }}</span>
+              <span :class="centerData.fire ? 'value' : 'value1'">{{ centerData.fire == '正常' ? '低风险' : centerData.fire
+                }}</span>
             </div>
           </div>
           <div class="item item2">
@@ -190,7 +165,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">设备监测预警</span>
-              <span :class="centerData.sb ? 'value' : 'value1'">{{ centerData.sb == '正常' ? '低风险' : centerData.sb }}</span>
+              <span :class="centerData.sb ? 'value' : 'value1'">{{ centerData.sb == '正常' ? '低风险' : centerData.sb
+                }}</span>
             </div>
           </div>
           <div class="item item3">
@@ -199,7 +175,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">粉尘监测预警</span>
-              <span :class="centerData.fc ? 'value' : 'value1'">{{ centerData.fc == '正常' ? '低风险' : centerData.fc }}</span>
+              <span :class="centerData.fc ? 'value' : 'value1'">{{ centerData.fc == '正常' ? '低风险' : centerData.fc
+                }}</span>
             </div>
           </div>
           <div class="item item4">
@@ -208,7 +185,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">瓦斯监测预警</span>
-              <span :class="centerData.ws ? 'value' : 'value1'">{{ centerData.ws == '正常' ? '低风险' : centerData.ws }}</span>
+              <span :class="centerData.ws ? 'value' : 'value1'">{{ centerData.ws == '正常' ? '低风险' : centerData.ws
+                }}</span>
               <div class="">
                 <span class="title">矿井瓦斯鉴定等级监测</span>
                 <span class="value">低瓦斯</span>
@@ -221,7 +199,8 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">通风监测预警</span>
-              <span :class="centerData.tf ? 'value' : 'value1'">{{ centerData.tf == '正常' ? '低风险' : centerData.tf }}</span>
+              <span :class="centerData.tf ? 'value' : 'value1'">{{ centerData.tf == '正常' ? '低风险' : centerData.tf
+                }}</span>
             </div>
           </div>
         </div>
@@ -232,85 +211,69 @@
           <div class="item item1">
             <div class="icon"></div>
 
-            <vue3-seamless-scroll
-              hover-stop="true"
-              :list="fireMonitor1"
-              :hover="true"
-              :step="0.2"
-              :direction="'left'"
-              limitMoveNum="3"
-              :copy-num="50"
-              :single-line="true"
-              class="seamless-warp1"
-            >
+            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" :step="0.06"
+              :single-waitTime="100000" class="seamless-warp1">
               <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
                 <div class="box-item">
-                  <div
-                    :class="{
-                      value1: item.value == '1',
-                      value2: item.value == '2',
-                      value3: item.value == '3',
-                      value4: item.value == '4',
-                      value5: item.value == '5',
-                      value6: item.value == '6',
-                    }"
-                    >{{ item.value1 ? item.value1 : '--' }}</div
-                  >
+                  <div :class="{
+                    value1: item.value == '1',
+                    value2: item.value == '2',
+                    value3: item.value == '3',
+                    value4: item.value == '4',
+                    value5: item.value == '5',
+                    value6: item.value == '6',
+                  }">{{ item.value1 ? item.value1 : '--' }}</div>
                   <div class="title">监测位置</div>
                 </div>
 
                 <div class="box-item">
-                  <div
-                    :class="{
-                      value1: item.value == '1',
-                      value2: item.value == '2',
-                      value3: item.value == '3',
-                      value4: item.value == '4',
-                      value5: item.value == '5',
-                      value6: item.value == '6',
-                    }"
-                    >{{
+                  <div :class="{
+                    value1: item.value == '1',
+                    value2: item.value == '2',
+                    value3: item.value == '3',
+                    value4: item.value == '4',
+                    value5: item.value == '5',
+                    value6: item.value == '6',
+                  }">{{
                       item.value == '1'
                         ? '正常'
                         : item.value == '2'
-                        ? '低风险'
-                        : item.value == '3'
-                        ? '一般风险'
-                        : item.value == '4'
-                        ? '较高风险'
-                        : item.value == '5'
-                        ? '高风险'
-                        : item.value == '6'
-                        ? '报警'
-                        : '--'
+                          ? '低风险'
+                          : item.value == '3'
+                            ? '一般风险'
+                            : item.value == '4'
+                              ? '较高风险'
+                              : item.value == '5'
+                                ? '高风险'
+                                : item.value == '6'
+                                  ? '报警'
+                                  : '--'
                     }}
                   </div>
                   <div class="title">预警等级</div>
                 </div>
                 <div class="box-item">
-                  <div
-                    :class="{
-                      value1: item.value == '1',
-                      value2: item.value == '2',
-                      value3: item.value == '3',
-                      value4: item.value == '4',
-                      value5: item.value == '5',
-                      value6: item.value == '6',
-                    }"
-                    >{{
+                  <div :class="{
+                    value1: item.value == '1',
+                    value2: item.value == '2',
+                    value3: item.value == '3',
+                    value4: item.value == '4',
+                    value5: item.value == '5',
+                    value6: item.value == '6',
+                  }">{{
                       item.value == '1'
                         ? '氧化阶段'
                         : item.value == '2'
-                        ? '自热阶段'
-                        : item.value == '3'
-                        ? '临界阶段'
-                        : item.value == '4'
-                        ? '热解阶段'
-                        : item.value == '5'
-                        ? '裂变阶段'
-                        : item.value == '6'
-                        ? '燃烧阶段'
-                        : '--'
+                          ? '自热阶段'
+                          : item.value == '3'
+                            ? '临界阶段'
+                            : item.value == '4'
+                              ? '热解阶段'
+                              : item.value == '5'
+                                ? '裂变阶段'
+                                : item.value == '6'
+                                  ? '燃烧阶段'
+                                  : '--'
                     }}
                   </div>
                   <div class="title">煤自燃阶段</div>
@@ -376,15 +339,8 @@
             </div>
           </div> -->
 
-          <BarSingle
-            :xAxisData="xAxisData"
-            :dataSource="dustData.levels"
-            height="332px"
-            :chartsColumns="chartsColumns"
-            :option="option"
-            :color="colors"
-            :fontColor="fontColor"
-          />
+          <BarSingle :xAxisData="xAxisData" :dataSource="dustData.levels" height="332px" :chartsColumns="chartsColumns"
+            :option="option" :color="colors" :fontColor="fontColor" />
         </template>
       </ventBox1>
     </div>
@@ -392,1245 +348,1244 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, reactive } from 'vue';
-  import { useRouter } from 'vue-router';
-  import customHeader from '/@/components/vent/customHeader.vue';
-  import { getTotalList, sysTypeWarnList } from './alarm.api';
-  import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
-  import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import BarSingle from '../../../../components/chart/BarSingle.vue';
-  import { rainBg } from '/@/utils/ui.js';
-  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-
-  let router = useRouter();
-
-  const warnNumMap = new Map([
-    ['fire', 0],
-    ['dust', 0],
-    ['vent', 0],
-    ['gas', 0],
-  ]);
-
-  const resetScroll = (e: Event) => {
-    if (e.target && e.target) (e.target as Element).scrollTop = 0;
-  };
-  let windData = reactive({
-    levels: {},
-    jf: 0,
-    hf: 0,
-    xf: 0,
-  }); //通风监测数据
-  let dustData = reactive({
-    //粉尘监测数据
-    levels: {},
-  });
-  let centerData = reactive({
-    fire: '',
-    tf: '',
-    ws: '',
-    sb: '',
-    fc: '',
-    levels: 0,
-  });
-  //瓦斯
-  let gasMonitor = reactive<any[]>([]);
-  let gasData = {
-    sums: 0,
-    sums1: 0,
-  };
-
-  let fireMonitor1 = reactive<any[]>([]);
-
-  //跳转详情
-  function showModal(data) {
-    switch (data) {
-      case 'vent':
-        router.push('/ventilate/warn/home');
-        break;
-      case 'fire':
-        router.push('/fire/warn/home');
-        break;
-      case 'dust':
-        router.push('/dust/warn/home');
-        break;
-      case 'gas':
-        router.push('/gas/warn/home');
-        break;
-      case 'sbyj':
-        router.push('/device/warn/home');
-        break;
-    }
-  }
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(flag = false) {
-    timer = setTimeout(
-      async () => {
-        // await getDataSource();
-        await getList();
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      },
-      flag ? 0 : 10000
-    );
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { getTotalList, sysTypeWarnList } from './alarm.api';
+import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import BarSingle from '../../../../components/chart/BarSingle.vue';
+import { rainBg } from '/@/utils/ui.js';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
+let router = useRouter();
+
+const warnNumMap = new Map([
+  ['fire', 0],
+  ['dust', 0],
+  ['vent', 0],
+  ['gas', 0],
+]);
+
+const resetScroll = (e: Event) => {
+  if (e.target && e.target) (e.target as Element).scrollTop = 0;
+};
+let windData = reactive({
+  levels: {},
+  jf: 0,
+  hf: 0,
+  xf: 0,
+}); //通风监测数据
+let dustData = reactive({
+  //粉尘监测数据
+  levels: {},
+});
+let centerData = reactive({
+  fire: '',
+  tf: '',
+  ws: '',
+  sb: '',
+  fc: '',
+  levels: 0,
+});
+//瓦斯
+let gasMonitor = reactive<any[]>([]);
+let gasData = {
+  sums: 0,
+  sums1: 0,
+};
+
+let fireMonitor1 = reactive<any[]>([]);
+
+//跳转详情
+function showModal(data) {
+  switch (data) {
+    case 'vent':
+      router.push('/ventilate/warn/home');
+      break;
+    case 'fire':
+      router.push('/fire/warn/home');
+      break;
+    case 'dust':
+      router.push('/dust/warn/home');
+      break;
+    case 'gas':
+      router.push('/gas/warn/home');
+      break;
+    case 'sbyj':
+      router.push('/device/warn/home');
+      break;
   }
-
-  // 获取预警数据
-  async function getList() {
-    const res = await getTotalList({});
-    console.log(res, '预警数据--------------');
-    fireMonitor1.length = 0;
-    let data = [];
-    windData.levels = res.info.sysInfo.ventS.levels;
-    windData.levels['blue'] = warnNumMap.get('vent');
-    // windData.jf = res.ventInfo.zongfengliang;
-    windData.jf = res.ventInfo.zongjinfeng;
-    windData.hf = res.ventInfo.zonghuifeng;
-    windData.xf = res.ventInfo.xufengliang;
-    dustData.levels = res.info.sysInfo.dustS.levels;
-    dustData.levels['blue'] = warnNumMap.get('dust');
-    centerData.fire = res.info.sysInfo.fireS.status;
-    centerData.tf = res.info.sysInfo.ventS.status;
-    centerData.ws = res.info.sysInfo.gasS.status;
-    centerData.sb = res.info.deviceWarnInfo.status;
-    centerData.fc = res.info.sysInfo.dustS.status;
-    Object.keys(res.info.sysInfo).forEach((v) => {
-      if (res.info.sysInfo[v].maxLevel) {
-        data.push(res.info.sysInfo[v].maxLevel);
-      } else {
-        data.push(0);
-      }
-    });
-    data = data.sort((a, b) => b - a);
-    centerData.levels = data[0];
-    Object.keys(iconsMonitor).forEach((el) => {
-      if (res.info.devicekindInfo[el]) {
-        iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+}
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag = false) {
+  timer = setTimeout(
+    async () => {
+      // await getDataSource();
+      await getList();
+      if (timer) {
+        timer = null;
       }
-    });
-    fireMonitor[0].value =
-      res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
-        ? '正常'
-        : '';
-    fireMonitor[1].value =
-      res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
+      getMonitor();
+    },
+    flag ? 0 : 10000
+  );
+}
+
+// 获取预警数据
+async function getList() {
+  const res = await getTotalList({});
+  console.log(res, '预警数据--------------');
+  fireMonitor1.length = 0;
+  let data = [];
+  windData.levels = res.info.sysInfo.ventS.levels;
+  windData.levels['blue'] = warnNumMap.get('vent');
+  // windData.jf = res.ventInfo.zongfengliang;
+  windData.jf = res.ventInfo.zongjinfeng;
+  windData.hf = res.ventInfo.zonghuifeng;
+  windData.xf = res.ventInfo.xufengliang;
+  dustData.levels = res.info.sysInfo.dustS.levels;
+  dustData.levels['blue'] = warnNumMap.get('dust');
+  centerData.fire = res.info.sysInfo.fireS.status;
+  centerData.tf = res.info.sysInfo.ventS.status;
+  centerData.ws = res.info.sysInfo.gasS.status;
+  centerData.sb = res.info.deviceWarnInfo.status;
+  centerData.fc = res.info.sysInfo.dustS.status;
+  Object.keys(res.info.sysInfo).forEach((v) => {
+    if (res.info.sysInfo[v].maxLevel) {
+      data.push(res.info.sysInfo[v].maxLevel);
+    } else {
+      data.push(0);
+    }
+  });
+  data = data.sort((a, b) => b - a);
+  centerData.levels = data[0];
+  Object.keys(iconsMonitor).forEach((el) => {
+    if (res.info.devicekindInfo[el]) {
+      iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+    }
+  });
+  fireMonitor[0].value =
+    res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
+      ? '正常'
+      : '';
+  fireMonitor[1].value =
+    res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
       res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
       res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
-        ? '正常'
-        : '';
-    fireMonitor[2].value =
-      res.info.sysInfo.fireS.summaryInfo.external.fireval &&
+      ? '正常'
+      : '';
+  fireMonitor[2].value =
+    res.info.sysInfo.fireS.summaryInfo.external.fireval &&
       res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
       res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
-        ? '正常'
-        : '';
-    fireMonitor[3].value =
-      res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
-        ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
-        : '';
-
-    if (res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
-      res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
-        fireMonitor1.push({
-          value: el.readData.internalFireWarnLevel,
-          value1: el.strinstallpos,
-        });
+      ? '正常'
+      : '';
+  fireMonitor[3].value =
+    res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
+      ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
+      : '';
+
+  if (res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
+    res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
+      fireMonitor1.push({
+        value: el.readData.internalFireWarnLevel,
+        value1: el.strinstallpos,
       });
-    }
-    gasMonitor.length = 0;
-    gasData.sums = 0;
-    gasData.sums1 = 0;
-    res.info.sysInfo.gasS.devices.forEach((el) => {
-      gasData.sums += el.gasNumber;
-      gasData.sums1 += el.pumpNumber;
-      gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber });
-    });
-  }
-
-  function getLevelNum() {
-    return new Promise(async (resolve) => {
-      const typeArr = ['fire', 'dust', 'vent', 'gas'];
-      for (let i = 0; i < typeArr.length; i++) {
-        const type = typeArr[i];
-        const result = await sysTypeWarnList({ type });
-        warnNumMap.set(type, result['length']);
-      }
-      resolve(null);
     });
   }
-
-  onMounted(async () => {
-    await getLevelNum();
-    await getMonitor(true);
-    rainBg('rain', 'animation-box');
+  gasMonitor.length = 0;
+  gasData.sums = 0;
+  gasData.sums1 = 0;
+  res.info.sysInfo.gasS.devices.forEach((el) => {
+    gasData.sums += el.gasNumber;
+    gasData.sums1 += el.pumpNumber;
+    gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber });
   });
-
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
+}
+
+function getLevelNum() {
+  return new Promise(async (resolve) => {
+    const typeArr = ['fire', 'dust', 'vent', 'gas'];
+    for (let i = 0; i < typeArr.length; i++) {
+      const type = typeArr[i];
+      const result = await sysTypeWarnList({ type });
+      warnNumMap.set(type, result['length']);
     }
+    resolve(null);
   });
+}
+
+onMounted(async () => {
+  await getLevelNum();
+  await getMonitor(true);
+  rainBg('rain', 'animation-box');
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
 </script>
 <style lang="less" scoped>
-  @import '/@/design/vent/color.less';
-  @a: 370px; // 椭圆x轴半径(长半径)
-  @b: 107px; // 椭圆y轴半径(短半径)
-  @s: 40; // 坐标点的数目(数目越大，动画越精细)
+@import '/@/design/vent/color.less';
+@a: 370px; // 椭圆x轴半径(长半径)
+@b: 107px; // 椭圆y轴半径(短半径)
+@s: 40; // 坐标点的数目(数目越大，动画越精细)
 
-  @bg: #e6e2df;
+@bg: #e6e2df;
 
-  .loop(@index) when (@index < @s + 1) {
-    .loop((@index + 1));
-    @keyframeSel: @index * 100% ./ @s;
+.loop(@index) when (@index < @s + 1) {
+  .loop((@index + 1));
+  @keyframeSel: @index * 100% ./ @s;
 
-    @{keyframeSel} {
-      transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
-    }
+  @{keyframeSel} {
+    transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
   }
+}
 
-  .sensor-container {
-    width: 100%;
-    height: calc(100% - 86px);
-    display: flex;
-    position: relative;
-    top: 78px;
+.sensor-container {
+  width: 100%;
+  height: calc(100% - 86px);
+  display: flex;
+  position: relative;
+  top: 78px;
 
-    .lr {
-      width: 650px;
-      height: 100%;
+  .lr {
+    width: 650px;
+    height: 100%;
 
-      // background-color: #ffffff10;
-    }
+    // background-color: #ffffff10;
+  }
 
-    .left-box {
-      .vent-param {
-        width: 100%;
-        margin-top: 10px;
+  .left-box {
+    .vent-param {
+      width: 100%;
+      margin-top: 10px;
+
+      .light-group {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        position: relative;
 
-        .light-group {
+        .param-item {
+          width: 150px;
           display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          position: relative;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          position: reactive;
+
+          .icon {
+            display: block;
+            position: absolute;
+            top: -5px;
+          }
 
-          .param-item {
-            width: 150px;
+          .param {
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            position: reactive;
 
-            .icon {
-              display: block;
-              position: absolute;
-              top: -5px;
-            }
-
-            .param {
+            .param-icon {
+              width: 121px;
+              height: 69px;
+              background: url('/@/assets/images/vent/vent-param-bg.png');
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
+              position: relative;
+              top: -20px;
+              margin-top: 10px;
 
-              .param-icon {
-                width: 121px;
-                height: 69px;
-                background: url('/@/assets/images/vent/vent-param-bg.png');
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
+              .param-title {
                 position: relative;
-                top: -20px;
-                margin-top: 10px;
-
-                .param-title {
-                  position: relative;
-                  top: -4px;
-                }
+                top: -4px;
+              }
 
-                .param-unit {
-                  position: relative;
-                  top: -2px;
-                  font-size: 12px;
-                }
+              .param-unit {
+                position: relative;
+                top: -2px;
+                font-size: 12px;
               }
+            }
 
-              .param-val-box {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
+            .param-val-box {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              position: relative;
+              top: -20px;
+
+              .param-val-icon {
+                width: 2px;
+                height: 15px;
+                background: #00d8ff;
                 position: relative;
-                top: -20px;
 
-                .param-val-icon {
-                  width: 2px;
-                  height: 15px;
+                &::after {
+                  content: '';
+                  display: block;
+                  position: absolute;
+                  width: 6px;
+                  height: 6px;
+                  border-radius: 3px;
                   background: #00d8ff;
-                  position: relative;
-
-                  &::after {
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    width: 6px;
-                    height: 6px;
-                    border-radius: 3px;
-                    background: #00d8ff;
-                    bottom: -2px;
-                    left: -2px;
-                  }
+                  bottom: -2px;
+                  left: -2px;
                 }
+              }
 
-                .param-val {
-                  position: relative;
-                  font-family: 'douyuFont';
-                  // color: #20dbfd;
-                  text-shadow: 0 0 25px #00d8ff;
-                  font-size: 13px;
-                  border: 1px solid #40b7f3;
-                  padding: 5px 30px 2px 30px;
+              .param-val {
+                position: relative;
+                font-family: 'douyuFont';
+                // color: #20dbfd;
+                text-shadow: 0 0 25px #00d8ff;
+                font-size: 13px;
+                border: 1px solid #40b7f3;
+                padding: 5px 30px 2px 30px;
+                top: 2px;
+
+                &::after {
+                  width: calc(100% - 4px);
+                  height: calc(100% - 4px);
+                  content: '';
+                  position: absolute;
                   top: 2px;
-
-                  &::after {
-                    width: calc(100% - 4px);
-                    height: calc(100% - 4px);
-                    content: '';
-                    position: absolute;
-                    top: 2px;
-                    left: 2px;
-                    display: block;
-                    border: 1px solid #006ea6;
-                  }
+                  left: 2px;
+                  display: block;
+                  border: 1px solid #006ea6;
                 }
               }
             }
           }
         }
       }
+    }
 
-      .icons-box {
-        display: flex;
-        flex-wrap: wrap;
-        // max-height: 365px;
-        height: 365px;
-        overflow-y: hidden;
+    .icons-box {
+      display: flex;
+      flex-wrap: wrap;
+      // max-height: 365px;
+      height: 365px;
+      overflow-y: hidden;
+
+      // align-items: start ;
+      &:hover {
+        overflow-y: auto;
+        overflow-x: auto;
+
+        // &>.icon-item {
+        //   animation-play-state: paused;
+        //   animation: move1 2s linear;
+        // }
+      }
 
-        // align-items: start ;
-        &:hover {
-          overflow-y: auto;
-          overflow-x: auto;
+      .icon-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3px;
+        // animation: move 10s linear infinite;
 
-          // &>.icon-item {
-          //   animation-play-state: paused;
-          //   animation: move1 2s linear;
-          // }
+        &:nth-child(even) {
+          padding-right: 0px;
         }
 
-        .icon-item {
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 3px;
-          // animation: move 10s linear infinite;
-
-          &:nth-child(even) {
-            padding-right: 0px;
-          }
-
-          .level-text {
-            position: absolute;
-            top: 51px;
-            right: 25px;
-            color: #fff;
-            font-family: 'douyuFont';
-            font-size: 12px;
-          }
-
-          .level-text-0 {
-            color: rgb(145, 230, 9);
-            text-shadow: 2px 2px 4px #001c22;
-          }
+        .level-text {
+          position: absolute;
+          top: 51px;
+          right: 25px;
+          color: #fff;
+          font-family: 'douyuFont';
+          font-size: 12px;
+        }
 
-          .level-text-1 {
-            color: rgb(0, 242, 255);
-            text-shadow: 2px 2px 4px #001c22;
-          }
+        .level-text-0 {
+          color: rgb(145, 230, 9);
+          text-shadow: 2px 2px 4px #001c22;
+        }
 
-          .level-text-2 {
-            color: #ffff35;
-            text-shadow: 2px 2px 4px #313100;
-          }
+        .level-text-1 {
+          color: rgb(0, 242, 255);
+          text-shadow: 2px 2px 4px #001c22;
+        }
 
-          .level-text-3 {
-            color: #ffbe69;
-            text-shadow: 2px 2px 4px #271600;
-          }
+        .level-text-2 {
+          color: #ffff35;
+          text-shadow: 2px 2px 4px #313100;
+        }
 
-          .level-text-4 {
-            color: #ff6f00;
-            // color: #09caff;
-            text-shadow: 2px 2px 4px #060200;
-          }
+        .level-text-3 {
+          color: #ffbe69;
+          text-shadow: 2px 2px 4px #271600;
+        }
 
-          .level-text-5 {
-            color: #ff0000;
-            text-shadow: 2px 2px 4px #200000;
-          }
+        .level-text-4 {
+          color: #ff6f00;
+          // color: #09caff;
+          text-shadow: 2px 2px 4px #060200;
+        }
 
-          .level-text-6 {
-            color: #bbb;
-            text-shadow: 2px 2px 4px #001c22;
-          }
+        .level-text-5 {
+          color: #ff0000;
+          text-shadow: 2px 2px 4px #200000;
+        }
 
-          img {
-            width: 225px;
-            height: 79px;
-          }
+        .level-text-6 {
+          color: #bbb;
+          text-shadow: 2px 2px 4px #001c22;
         }
 
-        .wrapper {
-          position: absolute;
-          top: 48px;
-          left: 82px;
-          color: #ffffffe0;
-          font-size: 13px;
-          text-align: center;
-          letter-spacing: 1px;
+        img {
+          width: 225px;
+          height: 79px;
         }
       }
 
-      @keyframes move {
-        0% {
-          transform: translateY(0px);
-        }
+      .wrapper {
+        position: absolute;
+        top: 48px;
+        left: 82px;
+        color: #ffffffe0;
+        font-size: 13px;
+        text-align: center;
+        letter-spacing: 1px;
+      }
+    }
 
-        100% {
-          transform: translateY(-269px);
-        }
+    @keyframes move {
+      0% {
+        transform: translateY(0px);
       }
 
-      @keyframes move1 {
-        0% {
-          transform: translateY(0px);
-        }
+      100% {
+        transform: translateY(-269px);
       }
     }
 
-    .center-box {
-      width: calc(100% - 710px);
-      // background-color: #ffffff10;
-      margin: 0 8px;
+    @keyframes move1 {
+      0% {
+        transform: translateY(0px);
+      }
+    }
+  }
+
+  .center-box {
+    width: calc(100% - 710px);
+    // background-color: #ffffff10;
+    margin: 0 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    .fire-monitor {
       display: flex;
       flex-direction: column;
-      justify-content: flex-end;
+      width: 100%;
+      position: relative;
 
-      .fire-monitor {
-        display: flex;
-        flex-direction: column;
+      .top {
         width: 100%;
-        position: relative;
+        height: 35px;
+        background: url('/@/assets/images/vent/box-top-bg.png');
+        background-size: 100% 100%;
+        text-align: center;
+        color: #fff;
+        padding-top: 6px;
+      }
 
-        .top {
-          width: 100%;
-          height: 35px;
-          background: url('/@/assets/images/vent/box-top-bg.png');
-          background-size: 100% 100%;
-          text-align: center;
-          color: #fff;
-          padding-top: 6px;
+      .container {
+        width: calc(100% - 2px);
+        min-height: 50px;
+        padding: 0 10px;
+        color: #fff;
+        background-color: #00213236;
+        backdrop-filter: blur(5px);
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 5px;
+          left: 0;
+          width: 1px;
+          height: calc(100% - 10px);
+          background-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
         }
 
-        .container {
-          width: calc(100% - 2px);
-          min-height: 50px;
-          padding: 0 10px;
-          color: #fff;
-          background-color: #00213236;
-          backdrop-filter: blur(5px);
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          right: 0;
+          top: 5px;
+          width: 1px;
+          height: calc(100% - 10px);
+          background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+        }
 
-          &::before {
-            content: '';
-            display: block;
-            position: absolute;
-            top: 5px;
-            left: 0;
-            width: 1px;
-            height: calc(100% - 10px);
-            background-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
-          }
+        .item {
+          height: 130px;
+          width: 100%;
+          position: relative;
+          top: -10px;
+          display: flex;
+          // justify-content: space-between;
+          align-content: center;
+          padding-top: 50px;
 
-          &::after {
+          &::before {
             content: '';
-            display: block;
+            width: 100%;
+            height: 150px;
             position: absolute;
-            right: 0;
-            top: 5px;
-            width: 1px;
-            height: calc(100% - 10px);
-            background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+            top: 0px;
+            background: url('/@/assets/images/vent/fire-bg-top.png');
+            background-size: 100% 100%;
           }
 
-          .item {
-            height: 130px;
-            width: 100%;
+          .icon {
+            width: 82px;
+            height: 36px;
+            margin: 0 20px 0 50px;
+            background: url('/@/assets/images/vent/icon-bottom-bg.png');
             position: relative;
-            top: -10px;
-            display: flex;
-            // justify-content: space-between;
-            align-content: center;
-            padding-top: 50px;
+            top: 30px;
 
-            &::before {
-              content: '';
-              width: 100%;
-              height: 150px;
+            &::after {
               position: absolute;
-              top: 0px;
-              background: url('/@/assets/images/vent/fire-bg-top.png');
-              background-size: 100% 100%;
-            }
-
-            .icon {
-              width: 82px;
-              height: 36px;
-              margin: 0 20px 0 50px;
-              background: url('/@/assets/images/vent/icon-bottom-bg.png');
-              position: relative;
-              top: 30px;
-
-              &::after {
-                position: absolute;
-                content: '';
-                width: 50px;
-                height: 50px;
-                top: -25px;
-                left: 20px;
-                background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
-              }
+              content: '';
+              width: 50px;
+              height: 50px;
+              top: -25px;
+              left: 20px;
+              background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
             }
+          }
 
-            .data-box1 {
-              display: flex;
-              flex-direction: column;
-              // margin: 0 10px;
-              width: 118px;
-              align-items: center;
+          .data-box1 {
+            display: flex;
+            flex-direction: column;
+            // margin: 0 10px;
+            width: 118px;
+            align-items: center;
 
-              .value {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                color: #2bdcff;
-                margin-bottom: 5px;
-              }
+            .value {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              color: #2bdcff;
+              margin-bottom: 5px;
+            }
 
-              .value1 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: rgb(145, 230, 9);
-              }
+            .value1 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: rgb(145, 230, 9);
+            }
 
-              .value2 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: rgb(0, 242, 255);
-              }
+            .value2 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: rgb(0, 242, 255);
+            }
 
-              .value3 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ffff35;
-              }
+            .value3 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ffff35;
+            }
 
-              .value4 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ffbe69;
-              }
+            .value4 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ffbe69;
+            }
 
-              .value5 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff6f00;
-              }
+            .value5 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ff6f00;
+            }
 
-              .value6 {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff0000;
-              }
+            .value6 {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              margin-bottom: 5px;
+              color: #ff0000;
+            }
 
-              .title {
-                font-size: 13px;
-              }
+            .title {
+              font-size: 13px;
             }
+          }
 
-            .seamless-warp1 {
-              width: 700px;
-              height: 100%;
-              overflow: hidden;
+          .seamless-warp1 {
+            width: 625px;
+            height: 75%;
+            overflow: hidden;
 
-              .data-box {
+            .data-box {
+              display: flex;
+              width: 625px;
+              justify-content: center;
+              align-items: center;
+              margin: 40px auto;
+
+              .box-item {
+                width: 33.3%;
+                height: 100%;
                 display: flex;
-                width: auto;
-                justify-content: center;
+                flex-direction: column;
                 align-items: center;
+                padding: 0 20px;
+
+                .value {
+                  font-size: 16px;
+                  font-family: 'douyuFont';
+                  color: #2bdcff;
+                  margin-bottom: 5px;
+                }
 
-                .box-item {
-                  width: auto;
-                  height: 100%;
-                  display: flex;
-                  flex-direction: column;
-                  align-items: center;
-                  padding: 0 20px;
-
-                  .value {
-                    font-size: 16px;
-                    font-family: 'douyuFont';
-                    color: #2bdcff;
-                    margin-bottom: 5px;
-                  }
-
-                  .value1 {
-                    font-size: 16px;
-                    font-family: 'douyuFont';
-                    margin-bottom: 5px;
-                    color: rgb(145, 230, 9);
-                  }
-
-                  .value2 {
-                    font-size: 16px;
-                    font-family: 'douyuFont';
-                    margin-bottom: 5px;
-                    color: rgb(0, 242, 255);
-                  }
-
-                  .value3 {
-                    font-size: 16px;
-                    font-family: 'douyuFont';
-                    margin-bottom: 5px;
-                    color: #ffff35;
-                  }
-
-                  .value4 {
-                    font-size: 16px;
-                    font-family: 'douyuFont';
-                    margin-bottom: 5px;
-                    color: #ffbe69;
-                  }
-
-                  .value5 {
-                    font-size: 16px;
-                    font-family: 'douyuFont';
-                    margin-bottom: 5px;
-                    color: #ff6f00;
-                  }
-
-                  .value6 {
-                    font-size: 16px;
-                    font-family: 'douyuFont';
-                    margin-bottom: 5px;
-                    color: #ff0000;
-                  }
-
-                  .title {
-                    font-size: 13px;
-                  }
+                .value1 {
+                  font-size: 16px;
+                  font-family: 'douyuFont';
+                  margin-bottom: 5px;
+                  color: rgb(145, 230, 9);
+                }
+
+                .value2 {
+                  font-size: 16px;
+                  font-family: 'douyuFont';
+                  margin-bottom: 5px;
+                  color: rgb(0, 242, 255);
+                }
+
+                .value3 {
+                  font-size: 16px;
+                  font-family: 'douyuFont';
+                  margin-bottom: 5px;
+                  color: #ffff35;
+                }
+
+                .value4 {
+                  font-size: 16px;
+                  font-family: 'douyuFont';
+                  margin-bottom: 5px;
+                  color: #ffbe69;
+                }
+
+                .value5 {
+                  font-size: 16px;
+                  font-family: 'douyuFont';
+                  margin-bottom: 5px;
+                  color: #ff6f00;
+                }
+
+                .value6 {
+                  font-size: 16px;
+                  font-family: 'douyuFont';
+                  margin-bottom: 5px;
+                  color: #ff0000;
+                }
+
+                .title {
+                  font-size: 13px;
                 }
               }
             }
           }
+        }
 
-          .item1 {
-            top: -10px;
+        .item1 {
+          top: -10px;
 
-            &::before {
-              transform: matrix(1, 0, 0, -1, 0, 0);
-            }
+          &::before {
+            transform: matrix(1, 0, 0, -1, 0, 0);
+          }
 
-            .icon {
-              &::after {
-                background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
-              }
+          .icon {
+            &::after {
+              background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
             }
           }
         }
+      }
 
-        .bottom {
-          width: 100%;
-          height: 35px;
-          background: url('/@/assets/images/vent/box-bottom-bg.png');
-          background-size: 100% 100%;
-          position: absolute;
-          bottom: 0;
-        }
+      .bottom {
+        width: 100%;
+        height: 35px;
+        background: url('/@/assets/images/vent/box-bottom-bg.png');
+        background-size: 100% 100%;
+        position: absolute;
+        bottom: 0;
       }
+    }
 
-      .animation-box {
-        height: fit-content;
-        flex: 1;
-        margin-bottom: 10px;
-        background: url('/@/assets/images/vent/alarm/center-bg.png');
-        background-size: contain;
-        background-position: center;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        position: relative;
-        top: 45px;
+    .animation-box {
+      height: fit-content;
+      flex: 1;
+      margin-bottom: 10px;
+      background: url('/@/assets/images/vent/alarm/center-bg.png');
+      background-size: contain;
+      background-position: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      top: 45px;
 
-        .rain {
+      .rain {
+        position: absolute;
+      }
+
+      .bottom {
+        width: 528px;
+        height: 395px;
+        background-repeat: no-repeat;
+        position: absolute;
+        z-index: 999;
+
+        &::before {
+          content: '';
+          width: 325px;
+          height: 379px;
           position: absolute;
+          left: 105px;
+          top: -60px;
+          background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
         }
 
-        .bottom {
-          width: 528px;
-          height: 395px;
-          background-repeat: no-repeat;
+        .animation1 {
+          width: 390px;
+          height: 78px;
           position: absolute;
+          top: -30px;
+          left: 80px;
           z-index: 999;
 
-          &::before {
-            content: '';
-            width: 325px;
-            height: 379px;
-            position: absolute;
-            left: 105px;
-            top: -60px;
-            background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
-          }
-
-          .animation1 {
-            width: 390px;
-            height: 78px;
+          // animation: rotate3 3s linear infinite;
+          .ball {
             position: absolute;
-            top: -30px;
-            left: 80px;
-            z-index: 999;
-
-            // animation: rotate3 3s linear infinite;
-            .ball {
-              position: absolute;
-              width: 12px;
-              height: 12px;
-              background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
-              border-radius: 6px;
-              background-size: cover;
-              offset-path: path(
-                'M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
+            width: 12px;
+            height: 12px;
+            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+            border-radius: 6px;
+            background-size: cover;
+            offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
               );
-              animation: 10s linear 0s infinite alternate ball;
-            }
+            animation: 10s linear 0s infinite alternate ball;
           }
+        }
 
-          .animation2 {
-            width: 430px;
-            height: 92px;
-            position: absolute;
-            top: 0px;
-            left: 60px;
-            z-index: 999;
+        .animation2 {
+          width: 430px;
+          height: 92px;
+          position: absolute;
+          top: 0px;
+          left: 60px;
+          z-index: 999;
 
-            // animation: rotate4 3s linear infinite;
-            .ball1 {
-              position: absolute;
-              width: 12px;
-              height: 12px;
-              background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
-              border-radius: 6px;
-              background-size: cover;
-              offset-path: path(
-                'M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
+          // animation: rotate4 3s linear infinite;
+          .ball1 {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+            border-radius: 6px;
+            background-size: cover;
+            offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
               );
-              animation: 10s linear 0s infinite alternate ball1;
-            }
+            animation: 10s linear 0s infinite alternate ball1;
           }
+        }
 
-          .text-box {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            color: #fff;
-            align-items: center;
-            margin-top: 90px;
-
-            .text1 {
-              font-size: 26px;
-              font-weight: 600;
-              letter-spacing: 2px;
-              margin-bottom: 10px;
-            }
+        .text-box {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          color: #fff;
+          align-items: center;
+          margin-top: 90px;
 
-            .text2 {
-              font-size: 18px;
-              color: #ffffffdd;
-            }
+          .text1 {
+            font-size: 26px;
+            font-weight: 600;
+            letter-spacing: 2px;
+            margin-bottom: 10px;
           }
 
-          .icon-animation {
-            width: 178px;
-            height: 208px;
-            margin: 0 auto;
-            top: -130px;
-            left: 4px;
-            position: relative;
-            animation: 0.5s linear 0s infinite alternate iconMove;
+          .text2 {
+            font-size: 18px;
+            color: #ffffffdd;
           }
         }
 
-        .bottom1 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
+        .icon-animation {
+          width: 178px;
+          height: 208px;
+          margin: 0 auto;
+          top: -130px;
+          left: 4px;
+          position: relative;
+          animation: 0.5s linear 0s infinite alternate iconMove;
+        }
+      }
 
-          .icon-animation {
-            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
-          }
+      .bottom1 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
 
-          .text-box {
-            .text1 {
-              color: #00d8ff;
-            }
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
+        }
+
+        .text-box {
+          .text1 {
+            color: #00d8ff;
           }
         }
+      }
 
-        .bottom2 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
+      .bottom2 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
 
-          .icon-animation {
-            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
-          }
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
+        }
 
-          .text-box {
-            .text1 {
-              color: #fcfc22;
-            }
+        .text-box {
+          .text1 {
+            color: #fcfc22;
           }
         }
+      }
 
-        .bottom3 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
+      .bottom3 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
 
-          .icon-animation {
-            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
-          }
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
+        }
 
-          .text-box {
-            .text1 {
-              color: #ff7010;
-            }
+        .text-box {
+          .text1 {
+            color: #ff7010;
           }
         }
+      }
 
-        .bottom4 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
+      .bottom4 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
 
-          .icon-animation {
-            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
-          }
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
+        }
 
-          .text-box {
-            .text1 {
-              color: #df4e43;
-            }
+        .text-box {
+          .text1 {
+            color: #df4e43;
           }
         }
+      }
 
-        .bottom5 {
-          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
+      .bottom5 {
+        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
 
-          .icon-animation {
-            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
+        .icon-animation {
+          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
+        }
+
+        .text-box {
+          .text1 {
+            color: #ff2313;
+            // animation: color-blink 1s infinite;
           }
 
-          .text-box {
-            .text1 {
-              color: #ff2313;
-              // animation: color-blink 1s infinite;
-            }
+          // @keyframes color-blink {
+          //   0% { color: red; }
+          //   50% { color: blue; }
+          //   100% { color: red; }
+          // }
+        }
+      }
 
-            // @keyframes color-blink {
-            //   0% { color: red; }
-            //   50% { color: blue; }
-            //   100% { color: red; }
-            // }
-          }
+      .total-item-monitor-box {
+        width: 100%;
+        height: 237px;
+        position: relative;
+        top: 180px;
+        left: 265px;
+        background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
+        background-size: contain;
+
+        &::after {
+          content: '';
+          width: 750px;
+          height: 750px;
+          position: absolute;
+          transform-style: preserve-3d;
+          transform: translateX(0%) translateY(0%) rotateX(72deg);
+          background: url('/@/assets/images/vent/alarm/bottom.png');
+          animation: rotate1 3s linear infinite;
+          top: -200px;
+          left: -180px;
         }
 
-        .total-item-monitor-box {
-          width: 100%;
-          height: 237px;
-          position: relative;
-          top: 180px;
-          left: 265px;
-          background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
-          background-size: contain;
+        .item {
+          position: absolute;
 
-          &::after {
-            content: '';
-            width: 750px;
-            height: 750px;
-            position: absolute;
-            transform-style: preserve-3d;
-            transform: translateX(0%) translateY(0%) rotateX(72deg);
-            background: url('/@/assets/images/vent/alarm/bottom.png');
-            animation: rotate1 3s linear infinite;
-            top: -200px;
-            left: -180px;
-          }
+          // width: 107px;
+          // height: 107px;
+          // left: 120px;
+          // top: 115px;
+          // animation: red-ball 10s linear infinite;
+          .icon-box {
+            width: 100px;
+            height: 100px;
 
-          .item {
-            position: absolute;
+            position: relative;
+            z-index: 0;
+
+            &::before {
+              position: absolute;
+              content: '';
+              width: 105px;
+              height: 68px;
+              top: 15px;
+              z-index: -1;
+              background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
+            }
+
+            &::after {
+              position: absolute;
+              content: '';
+              width: 71px;
+              height: 71px;
+              top: 26px;
+              left: 14px;
+              z-index: 1;
+              background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
+              transform: translateX(0%) rotateX(70deg);
+              animation: rotate2 2s linear infinite;
+            }
 
-            // width: 107px;
-            // height: 107px;
-            // left: 120px;
-            // top: 115px;
-            // animation: red-ball 10s linear infinite;
-            .icon-box {
+            .icon {
               width: 100px;
               height: 100px;
-
+              background-repeat: no-repeat;
+              background-position: top center;
               position: relative;
-              z-index: 0;
-
-              &::before {
-                position: absolute;
-                content: '';
-                width: 105px;
-                height: 68px;
-                top: 15px;
-                z-index: -1;
-                background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
-              }
+              top: 5px;
+            }
+          }
 
-              &::after {
-                position: absolute;
-                content: '';
-                width: 71px;
-                height: 71px;
-                top: 26px;
-                left: 14px;
-                z-index: 1;
-                background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
-                transform: translateX(0%) rotateX(70deg);
-                animation: rotate2 2s linear infinite;
-              }
+          .item-monitor-box {
+            color: #fff;
+            position: relative;
+            top: -135px;
+            left: -20px;
+            font-weight: 600;
+            // background: #06020066;
+            padding: 5px 20px 8px 20px;
 
-              .icon {
-                width: 100px;
-                height: 100px;
-                background-repeat: no-repeat;
-                background-position: top center;
-                position: relative;
-                top: 5px;
-              }
+            &::before {
+              position: absolute;
+              content: '';
+              width: 196px;
+              height: 48px;
+              left: -20px;
+              top: -10px;
+              background: url('/@/assets/images/vent/alarm/data-bg.png');
             }
 
-            .item-monitor-box {
-              color: #fff;
-              position: relative;
-              top: -135px;
-              left: -20px;
-              font-weight: 600;
-              // background: #06020066;
-              padding: 5px 20px 8px 20px;
-
-              &::before {
-                position: absolute;
-                content: '';
-                width: 196px;
-                height: 48px;
-                left: -20px;
-                top: -10px;
-                background: url('/@/assets/images/vent/alarm/data-bg.png');
-              }
+            .value {
+              color: #2bdcff;
+              margin-left: 20px;
+            }
 
-              .value {
-                color: #2bdcff;
-                margin-left: 20px;
-              }
+            .value1 {
+              font-size: 16px;
+              font-weight: 800;
+              margin-top: 6px;
+              margin-left: 10px;
+              color: #ff0000;
+              animation: color-blink 1s infinite;
+            }
 
-              .value1 {
-                font-size: 16px;
-                font-weight: 800;
-                margin-top: 6px;
-                margin-left: 10px;
-                color: #ff0000;
-                animation: color-blink 1s infinite;
+            @keyframes color-blink {
+              0% {
+                color: red;
               }
 
-              @keyframes color-blink {
-                0% {
-                  color: red;
-                }
-
-                50% {
-                  color: rgb(198, 0, 0);
-                }
+              50% {
+                color: rgb(198, 0, 0);
+              }
 
-                100% {
-                  color: rgb(255, 18, 18);
-                }
+              100% {
+                color: rgb(255, 18, 18);
               }
             }
           }
+        }
 
-          .item1 {
-            top: 230px;
-            left: 150px;
+        .item1 {
+          top: 230px;
+          left: 150px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
           }
+        }
 
-          .item2 {
-            top: 185px;
-            left: -120px;
+        .item2 {
+          top: 185px;
+          left: -120px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
           }
+        }
 
-          .item3 {
-            top: 185px;
-            left: 420px;
+        .item3 {
+          top: 185px;
+          left: 420px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
           }
+        }
 
-          .item4 {
-            top: 20px;
-            left: 390px;
+        .item4 {
+          top: 20px;
+          left: 390px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
+          }
 
-            .item-monitor-box {
-              top: -155px;
+          .item-monitor-box {
+            top: -155px;
 
-              &::before {
-                top: 10px;
-              }
+            &::before {
+              top: 10px;
             }
           }
+        }
 
-          .item5 {
-            top: 25px;
-            left: -110px;
+        .item5 {
+          top: 25px;
+          left: -110px;
 
-            .icon {
-              background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
-            }
+          .icon {
+            background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
           }
         }
+      }
 
-        @keyframes iconMove {
-          100% {
-            opacity: 0;
-          }
+      @keyframes iconMove {
+        100% {
+          opacity: 0;
         }
+      }
 
-        @keyframes rotate1 {
-          0% {
-            transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
-          }
+      @keyframes rotate1 {
+        0% {
+          transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
+        }
 
-          100% {
-            transform: translateX(0%) rotateX(72deg) rotateZ(0);
-          }
+        100% {
+          transform: translateX(0%) rotateX(72deg) rotateZ(0);
         }
+      }
 
-        @keyframes rotate2 {
-          0% {
-            transform: translateX(0%) rotateX(70deg) rotateZ(0);
-          }
+      @keyframes rotate2 {
+        0% {
+          transform: translateX(0%) rotateX(70deg) rotateZ(0);
+        }
 
-          100% {
-            transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
-          }
+        100% {
+          transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
         }
+      }
 
-        @keyframes rotate3 {
-          0% {
-            transform: translateX(0%) rotateX(80deg) rotateZ(0);
-          }
+      @keyframes rotate3 {
+        0% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(0);
+        }
 
-          100% {
-            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
-          }
+        100% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
         }
+      }
 
-        @keyframes rotate4 {
-          100% {
-            transform: translateX(0%) rotateX(80deg) rotateZ(0);
-          }
+      @keyframes rotate4 {
+        100% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(0);
+        }
 
-          0% {
-            transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
-          }
+        0% {
+          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
         }
+      }
 
-        @keyframes ball {
-          100% {
-            offset-distance: 100%;
-          }
+      @keyframes ball {
+        100% {
+          offset-distance: 100%;
+        }
 
-          0% {
-            offset-distance: 0%;
-          }
+        0% {
+          offset-distance: 0%;
         }
+      }
 
-        @keyframes ball1 {
-          0% {
-            offset-distance: 100%;
-          }
+      @keyframes ball1 {
+        0% {
+          offset-distance: 100%;
+        }
 
-          100% {
-            offset-distance: 0%;
-          }
+        100% {
+          offset-distance: 0%;
         }
       }
     }
+  }
 
-    .right-box {
-      .dust-monitor {
+  .right-box {
+    .dust-monitor {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
+      margin-bottom: 20px;
+      margin-top: 15px;
+
+      .value {
+        width: 131px;
+        height: 44px;
+        background: url('/@/assets/images/vent/value-bg.png');
         display: flex;
-        justify-content: space-between;
-        padding: 0 20px;
-        margin-bottom: 20px;
-        margin-top: 15px;
-
-        .value {
-          width: 131px;
-          height: 44px;
-          background: url('/@/assets/images/vent/value-bg.png');
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
+        justify-content: center;
+        align-items: center;
+      }
 
-        .title {
-          text-align: center;
-          margin-bottom: 5px;
-        }
+      .title {
+        text-align: center;
+        margin-bottom: 5px;
+      }
 
-        .value {
-          font-size: 16px;
-          font-family: 'douyuFont';
-          color: #3df5ff;
-        }
+      .value {
+        font-size: 16px;
+        font-family: 'douyuFont';
+        color: #3df5ff;
       }
+    }
 
-      .gas-box {
-        height: 390px;
-        display: flex;
-        justify-content: space-between;
-        padding: 0 10px;
+    .gas-box {
+      height: 390px;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 10px;
 
-        .gas-item {
-          position: relative;
+      .gas-item {
+        position: relative;
 
-          .top {
-            height: 136px;
-            padding-top: 30px;
+        .top {
+          height: 136px;
+          padding-top: 30px;
 
-            .value {
-              font-size: 26px;
-              font-family: 'douyuFont';
-              color: #3df5ff;
-              text-align: center;
-              margin-bottom: 5px;
-            }
+          .value {
+            font-size: 26px;
+            font-family: 'douyuFont';
+            color: #3df5ff;
+            text-align: center;
+            margin-bottom: 5px;
+          }
 
-            .title {
-              width: 205px;
-              height: 48px;
-              text-align: center;
-              background: url('/@/assets/images/vent/plane.png') no-repeat;
-              background-size: contain;
-              background-position: bottom;
-            }
+          .title {
+            width: 205px;
+            height: 48px;
+            text-align: center;
+            background: url('/@/assets/images/vent/plane.png') no-repeat;
+            background-size: contain;
+            background-position: bottom;
+          }
 
-            &::before {
-              position: absolute;
-              content: '';
-              width: 136px;
-              height: 101px;
-              left: 35px;
-              top: 15px;
-              background: url('/@/assets/images/vent/small-bg1.png') no-repeat;
-              background-size: cover;
-            }
+          &::before {
+            position: absolute;
+            content: '';
+            width: 136px;
+            height: 101px;
+            left: 35px;
+            top: 15px;
+            background: url('/@/assets/images/vent/small-bg1.png') no-repeat;
+            background-size: cover;
           }
+        }
 
-          .detail-box {
-            position: relative;
-            margin: 0 auto;
+        .detail-box {
+          position: relative;
+          margin: 0 auto;
+          width: 184px;
+          height: calc(100% - 136px);
+          background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
+          background-size: cover;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: center;
+          overflow-y: auto;
+          // padding: 50px 0 20px 0;
+
+          &::after {
+            position: absolute;
+            content: '';
+            left: 0px;
+            bottom: 0px;
             width: 184px;
-            height: calc(100% - 136px);
-            background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
-            background-size: cover;
+            height: 31px;
+            background: url('/@/assets/images/vent/plane1.png') no-repeat center;
+            background-size: 100% 100%;
+            background-position: bottom;
+          }
+
+          .detail-item {
+            width: 100%;
+            height: 40px;
+            background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
+            // margin: 5px 0;
             display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
+            padding: 0 10px;
+            justify-content: space-between;
             align-items: center;
-            overflow-y: auto;
-            // padding: 50px 0 20px 0;
+            margin-bottom: 30px;
 
-            &::after {
-              position: absolute;
-              content: '';
-              left: 0px;
-              bottom: 0px;
-              width: 184px;
-              height: 31px;
-              background: url('/@/assets/images/vent/plane1.png') no-repeat center;
-              background-size: 100% 100%;
-              background-position: bottom;
-            }
-
-            .detail-item {
-              width: 100%;
-              height: 40px;
-              background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
-              // margin: 5px 0;
-              display: flex;
-              padding: 0 10px;
-              justify-content: space-between;
-              align-items: center;
-              margin-bottom: 30px;
-
-              .value {
-                font-size: 16px;
-                font-family: 'douyuFont';
-                color: #2bdcff;
-                text-align: center;
-              }
+            .value {
+              font-size: 16px;
+              font-family: 'douyuFont';
+              color: #2bdcff;
+              text-align: center;
             }
           }
         }
       }
     }
+  }
 
-    .monitor-title {
-      cursor: pointer;
-    }
+  .monitor-title {
+    cursor: pointer;
   }
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/warn/fireWarn.vue

@@ -234,7 +234,8 @@ onUnmounted(() => {
             width: 100%;
             height: 28px;
             line-height: 28px;
-            border: 1px solid #0058ee;
+            background-color: rgba(15, 55, 108, .8);
+            border: 2px solid #1b6eab;
             margin-bottom: 20px;
             border-radius: 5px;
             box-sizing: border-box;
@@ -243,7 +244,8 @@ onUnmounted(() => {
 
             .btn {
                 width: 33%;
-                height: 100%;
+                height: 24px;
+                line-height: 24px;
                 font-size: 14px;
                 text-align: center;
                 color: #fff;
@@ -252,12 +254,13 @@ onUnmounted(() => {
 
             .btn1 {
                 width: 33%;
-                height: 100%;
+                height: 24px;
+                line-height: 24px;
                 font-size: 14px;
                 color: #fff;
                 text-align: center;
                 border-radius: 2px;
-                background: #0058ee;
+                background: #209dfc;
                 cursor: pointer;
             }
         }
@@ -355,10 +358,11 @@ onUnmounted(() => {
         width: 100%;
 
         .type-btn {
-            width: 100%;
-            height: 30px;
-            line-height: 30px;
-            border: 1px solid #0058ee;
+            width: 25%;
+            height: 36px;
+            line-height: 36px;
+            background-color: rgba(15, 55, 108, .8);
+            border: 2px solid #1b6eab;
             border-radius: 5px;
             box-sizing: border-box;
             display: flex;
@@ -366,7 +370,8 @@ onUnmounted(() => {
 
             .btn {
                 width: 33%;
-                height: 100%;
+                height: 32px;
+                line-height: 32px;
                 font-size: 14px;
                 text-align: center;
                 color: #fff;
@@ -375,19 +380,20 @@ onUnmounted(() => {
 
             .btn1 {
                 width: 33%;
-                height: 100%;
+                height: 32px;
+                line-height: 32px;
                 font-size: 14px;
                 color: #fff;
                 text-align: center;
                 border-radius: 2px;
-                background: #0058ee;
+                background: #209dfc;
                 cursor: pointer;
             }
         }
 
         .card-btn {
             width: 100%;
-            height: calc(100% - 30px);
+            height: calc(100% - 36px);
             overflow-y: auto;
             display: none;
 
@@ -395,7 +401,7 @@ onUnmounted(() => {
     }
 
     .fire-content {
-        height: calc(100% - 15px)
+        height: calc(100% - 30px)
     }
 }
 </style>

src/views/vent/monitorManager/camera/index.vue

@@ -146,23 +146,34 @@ async function onClick(node) {
 
 //点击详情跳转
 function onDetail(node) {
-  console.log(node, '详情-------------')
-  switch (node.deviceType) {
-    case 'gate_qd':
-      router.push('/monitorChannel/monitor-gate?id=' + node.deviceID)
+  let type=listArr[0].children.filter(v=>v.id==node.pid)[0].itemValue
+  console.log(type,'type--------')
+  switch (type) {
+    case 'pulping'://注浆
+      router.push('/grout-home')
       break;
-    case 'pump_over':
-      router.push('/monitorChannel/gasPump-home?id=' + node.deviceID)
+    case 'window'://自动风窗
+      router.push('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=window')
       break;
-    case 'pump_under':
-      router.push('/monitorChannel/gasPump-home?id=' + node.deviceID)
+    case 'gate'://自动风门
+      router.push('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate')
       break;
-      // case 'window_normal'://自动风窗
-      // router.push('/monitorChannel/gasPump-home?id=' + node.deviceID)
-      // break;
-      // case 'gate_xinjianfuxiejin'://自动风门
-      // router.push('/monitorChannel/gasPump-home?id=' + node.deviceID)
-      // break;
+      case 'fanlocal'://局部风机
+      router.push('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanlocal')
+      break;
+      case 'fanmain'://主风机
+      router.push('/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain')
+      break;
+      case 'forcFan'://压风机
+      router.push('/forcFan/home')
+      break;
+      case 'pump'://瓦斯抽采泵
+      router.push('/monitorChannel/gasPump-home')
+      break;
+      case 'nitrogen'://制氮
+      router.push('/nitrogen-home')
+      break;
+     
   }
 }