Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/vent/comment/history/HistoryTable.vue

@@ -108,7 +108,7 @@
    * @param deviceOptions 设备下拉框对应的选项
    */
   function initTable(deviceCodes: string[], deviceOptions: any[], dictOptions: any[]) {
-    const defaultSchemas = getDefaultSchemas(dictOptions, deviceOptions);
+    const defaultSchemas = getDefaultSchemas(dictOptions, deviceOptions, () => search());
     for (const code of deviceCodes) {
       const cols = getTableHeaderColumns(code);
       if (cols.length) {

src/views/vent/comment/history/history.data.ts

@@ -10,7 +10,11 @@ import { get } from 'lodash-es';
  * @param deviceOptions 用于初始化设备下拉框
  * @returns
  */
-export const getDefaultSchemas: (dictOptions: any[], deviceOptions: any[]) => FormSchema[] = (dictOptions: any[], deviceOptions: any[]) => {
+export const getDefaultSchemas: (dictOptions: any[], deviceOptions: any[], onDeviceChange?: Function) => FormSchema[] = (
+  dictOptions: any[],
+  deviceOptions: any[],
+  onDeviceChange?: Function
+) => {
   const device = get(deviceOptions, '[0].value', '');
   const dictcode = get(dictOptions, '[0].value', '');
   const isRedis = get(deviceOptions, '[0].stationtype', 'redis') === 'redis';
@@ -50,16 +54,12 @@ export const getDefaultSchemas: (dictOptions: any[], deviceOptions: any[]) => Fo
       field: 'gdeviceids',
       component: 'Select',
       required: true,
-      defaultValue: isRedis ? device : [device],
+      defaultValue: VENT_PARAM.historyIsMultiple ? [device] : device,
       componentProps: {
         options: deviceOptions,
-        // onChange: (e, option) => {
-        mode: isRedis ? undefined : 'multiple',
+        mode: VENT_PARAM.historyIsMultiple ? 'multiple' : undefined,
         maxTagCount: 'responsive',
-        //   nextTick(async () => {
-        //     await getDataSource();
-        //   });
-        // },
+        onChange: onDeviceChange,
       },
       colProps: {
         span: 6,

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

@@ -54,8 +54,15 @@
             </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">
@@ -100,21 +107,28 @@
       </div>
       <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>
@@ -122,9 +136,14 @@
             <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>
@@ -133,21 +152,19 @@
               centerData.levels == 0
                 ? '低风险'
                 : centerData.levels == 101
-                  ? '低风险'
-                  : centerData.levels == 102
-                    ? '一般风险'
-                    : centerData.levels == 103
-                      ? '较大风险'
-                      : centerData.levels == 104
-                        ? '重大风险'
-                        : centerData.levels == 201
-                          ? '报警'
-                          : '未连接'
+                ? '低风险'
+                : centerData.levels == 102
+                ? '一般风险'
+                : centerData.levels == 103
+                ? '较大风险'
+                : centerData.levels == 104
+                ? '重大风险'
+                : centerData.levels == 201
+                ? '报警'
+                : '未连接'
             }}</div>
 
-            <div class="text2">{{ centerData.riskLevel !== undefined && centerData.riskLevel !== null ?
-              centerData.riskLevel
-              : '-' }}</div>
+            <div class="text2">{{ centerData.riskLevel !== undefined && centerData.riskLevel !== null ? centerData.riskLevel : '-' }}</div>
             <div class="text3">风险得分</div>
           </div>
           <div class="icon-animation" @click="warnGradeClick"></div>
@@ -164,16 +181,16 @@
                 centerData.fire == 0
                   ? '低风险'
                   : centerData.fire == 101
-                    ? '低风险'
-                    : centerData.fire == 102
-                      ? '一般风险'
-                      : centerData.fire == 103
-                        ? '较大风险'
-                        : centerData.fire == 104
-                          ? '重大风险'
-                          : centerData.fire == 201
-                            ? '报警'
-                            : centerData.fire
+                  ? '低风险'
+                  : centerData.fire == 102
+                  ? '一般风险'
+                  : centerData.fire == 103
+                  ? '较大风险'
+                  : centerData.fire == 104
+                  ? '重大风险'
+                  : centerData.fire == 201
+                  ? '报警'
+                  : centerData.fire
               }}</span>
             </div>
           </div>
@@ -187,16 +204,16 @@
                 centerData.sb == 0
                   ? '低风险'
                   : centerData.sb == 101
-                    ? '低风险'
-                    : centerData.sb == 102
-                      ? '一般风险'
-                      : centerData.sb == 103
-                        ? '较大风险'
-                        : centerData.sb == 104
-                          ? '重大风险'
-                          : centerData.sb == 201
-                            ? '报警'
-                            : centerData.sb
+                  ? '低风险'
+                  : centerData.sb == 102
+                  ? '一般风险'
+                  : centerData.sb == 103
+                  ? '较大风险'
+                  : centerData.sb == 104
+                  ? '重大风险'
+                  : centerData.sb == 201
+                  ? '报警'
+                  : centerData.sb
               }}</span>
             </div>
           </div>
@@ -210,16 +227,16 @@
                 centerData.fc == 0
                   ? '低风险'
                   : centerData.fc == 101
-                    ? '低风险'
-                    : centerData.fc == 102
-                      ? '一般风险'
-                      : centerData.fc == 103
-                        ? '较大风险'
-                        : centerData.fc == 104
-                          ? '重大风险'
-                          : centerData.fc == 201
-                            ? '报警'
-                            : centerData.fc
+                  ? '低风险'
+                  : centerData.fc == 102
+                  ? '一般风险'
+                  : centerData.fc == 103
+                  ? '较大风险'
+                  : centerData.fc == 104
+                  ? '重大风险'
+                  : centerData.fc == 201
+                  ? '报警'
+                  : centerData.fc
               }}</span>
             </div>
           </div>
@@ -233,16 +250,16 @@
                 centerData.ws == 0
                   ? '低风险'
                   : centerData.ws == 101
-                    ? '低风险'
-                    : centerData.ws == 102
-                      ? '一般风险'
-                      : centerData.ws == 103
-                        ? '较大风险'
-                        : centerData.ws == 104
-                          ? '重大风险'
-                          : centerData.ws == 201
-                            ? '报警'
-                            : centerData.ws
+                  ? '低风险'
+                  : centerData.ws == 102
+                  ? '一般风险'
+                  : centerData.ws == 103
+                  ? '较大风险'
+                  : centerData.ws == 104
+                  ? '重大风险'
+                  : centerData.ws == 201
+                  ? '报警'
+                  : centerData.ws
               }}</span>
               <div class="">
                 <span class="title">矿井瓦斯等级鉴定</span>
@@ -261,16 +278,16 @@
                 centerData.tf == 0
                   ? '低风险'
                   : centerData.tf == 101
-                    ? '低风险'
-                    : centerData.tf == 102
-                      ? '一般风险'
-                      : centerData.tf == 103
-                        ? '较大风险'
-                        : centerData.tf == 104
-                          ? '重大风险'
-                          : centerData.tf == 201
-                            ? '报警'
-                            : centerData.tf
+                  ? '低风险'
+                  : centerData.tf == 102
+                  ? '一般风险'
+                  : centerData.tf == 103
+                  ? '较大风险'
+                  : centerData.tf == 104
+                  ? '重大风险'
+                  : centerData.tf == 201
+                  ? '报警'
+                  : centerData.tf
               }}</span>
             </div>
           </div>
@@ -282,33 +299,47 @@
           <div class="item item1">
             <div class="icon"></div>
 
-            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" :limit-scroll-num="1" :step="0.06"
-              :single-waitTime="100000" class="seamless-warp1">
+            <vue3-seamless-scroll
+              hover-stop="true"
+              :list="fireMonitor1"
+              :hover="true"
+              :limit-scroll-num="1"
+              :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.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.value1 ? item.value1 : '--' }}</div>
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.value1 ? item.value1 : '--' }}</div
+                  >
                   <div class="title">监测位置</div>
                 </div>
 
                 <div class="box-item">
-                  <div :class="{
-                    value1: item.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.warnLevel || '-' }}
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.warnLevel || '-' }}
                   </div>
                   <div class="title">预警等级</div>
                 </div>
                 <div class="box-item1">
-                  <div :class="{
-                    value1: item.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.smokeJd || '-' }}
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.smokeJd || '-' }}
                   </div>
                   <div class="title">煤自燃阶段</div>
                 </div>
@@ -375,8 +406,15 @@
             </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>
@@ -388,1477 +426,1479 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';
-import { useRouter } from 'vue-router';
-import { rainBg } from '/@/utils/ui.js';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import { useGlobSetting } from '/@/hooks/setting';
-import { getDisasterProportion } from '../../deviceManager/riskSetting/riskSetting.api';
-import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
-import { getTotalList, sysTypeWarnList } from './alarm.api';
-import customHeader from '/@/components/vent/customHeader.vue';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import BarSingle from '../../../../components/chart/BarSingle.vue';
-import warnGradeEchart from './common/warnGradeEchart.vue';
-import warnGradeInfo from './common/warnGradeInfo.vue';
-
-let monitor = ref(true);
-let toggleData = reactive({});
-let router = useRouter();
-let warnLevels = ref('');
-let Levels = reactive({});
-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: 0,
-  tf: 0,
-  ws: 0,
-  sb: 0,
-  fc: 0,
-  levels: 0,
-  riskLevel: '-',
-});
-//瓦斯
-let gasMonitor = reactive<any[]>([]);
-let gasData = {
-  sums: 0,
-  sums1: 0,
-};
-let fireMonitor1 = reactive<any[]>([]);
-let visibleGrade = ref(false); //控制风险等级弹窗显示与隐藏
-let titleGrade = ref(''); //风险等级弹窗标题
-let showToggle = ref('report');
-
-//点击切换实时\报表数据
-let handlerToggle = () => {
-  monitor.value = !monitor.value;
-  windData.jf = monitor.value ? toggleData.ventInfo.zongjinfeng : toggleData.ventInfo.totalIntM3;
-  windData.hf = monitor.value ? toggleData.ventInfo.zonghuifeng : toggleData.ventInfo.totalRetM3;
-};
-//风险等级点击
-let warnGradeClick = () => {
-  visibleGrade.value = true;
-  titleGrade.value = '风险等级信息';
-};
-//跳转详情
-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');
-      router.push('/device/warn/home');
-      break;
+  import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { rainBg } from '/@/utils/ui.js';
+  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { getDisasterProportion } from '../../deviceManager/riskSetting/riskSetting.api';
+  import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
+  import { getTotalList, sysTypeWarnList } from './alarm.api';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import BarSingle from '../../../../components/chart/BarSingle.vue';
+  import warnGradeEchart from './common/warnGradeEchart.vue';
+  import warnGradeInfo from './common/warnGradeInfo.vue';
+
+  let monitor = ref(true);
+  let toggleData = reactive({});
+  let router = useRouter();
+  let warnLevels = ref('');
+  let Levels = reactive({});
+  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: 0,
+    tf: 0,
+    ws: 0,
+    sb: 0,
+    fc: 0,
+    levels: 0,
+    riskLevel: '-',
+  });
+  //瓦斯
+  let gasMonitor = reactive<any[]>([]);
+  let gasData = {
+    sums: 0,
+    sums1: 0,
+  };
+  let fireMonitor1 = reactive<any[]>([]);
+  let visibleGrade = ref(false); //控制风险等级弹窗显示与隐藏
+  let titleGrade = ref(''); //风险等级弹窗标题
+  let showToggle = ref('report');
+
+  //点击切换实时\报表数据
+  let handlerToggle = () => {
+    monitor.value = !monitor.value;
+    windData.jf = monitor.value ? toggleData.ventInfo.zongjinfeng : toggleData.ventInfo.totalIntM3;
+    windData.hf = monitor.value ? toggleData.ventInfo.zonghuifeng : toggleData.ventInfo.totalRetM3;
+  };
+  //风险等级点击
+  let warnGradeClick = () => {
+    visibleGrade.value = true;
+    titleGrade.value = '风险等级信息';
+  };
+  //跳转详情
+  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');
+        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
-  );
-}
-
-// 获取预警数据
-async function getList() {
-  const res = await getTotalList({});
-  console.log(res, '预警数据--------------');
-  fireMonitor1.length = 0;
-  toggleData = Object.assign({}, res);
-  windData.levels = res.info.sysInfo.ventS.levels;
-  windData.levels['blue'] = warnNumMap.get('vent');
-  if (showToggle.value == 'monitor') {
-    windData.jf = res.ventInfo.zongjinfeng;
-    windData.hf = res.ventInfo.zonghuifeng;
-  } else if (showToggle.value == 'report') {
-    windData.jf = res.ventInfo.totalIntM3;
-    windData.hf = res.ventInfo.totalRetM3;
-  } else {
-    windData.jf = monitor.value ? res.ventInfo.zongjinfeng : res.ventInfo.totalIntM3;
-    windData.hf = monitor.value ? res.ventInfo.zonghuifeng : res.ventInfo.totalRetM3;
+
+  // 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
+    );
   }
-  windData.xf = res.ventInfo.xufengliang;
-  dustData.levels = res.info.sysInfo.dustS.levels;
-  dustData.levels['blue'] = warnNumMap.get('dust');
-  centerData.fire = res.info.sysInfo.fireS.maxLevel;
-  centerData.tf = res.info.sysInfo.ventS.maxLevel;
-  centerData.ws = res.info.sysInfo.gasS.maxLevel;
-  centerData.sb = res.info.deviceWarnInfo.maxLevel;
-  centerData.fc = res.info.sysInfo.dustS.maxLevel;
-  centerData.riskLevel = res.info.riskLevel;
-  Levels = Object.assign({}, await getDisasterProportion());
-  centerData.levels =
-    Levels.level > 0 && Levels.level <= 1
-      ? 101
-      : Levels.level > 1 && Levels.level <= 2
+
+  // 获取预警数据
+  async function getList() {
+    const res = await getTotalList({});
+    console.log(res, '预警数据--------------');
+    fireMonitor1.length = 0;
+    toggleData = Object.assign({}, res);
+    windData.levels = res.info.sysInfo.ventS.levels;
+    windData.levels['blue'] = warnNumMap.get('vent');
+    if (showToggle.value == 'monitor') {
+      windData.jf = res.ventInfo.zongjinfeng;
+      windData.hf = res.ventInfo.zonghuifeng;
+    } else if (showToggle.value == 'report') {
+      windData.jf = res.ventInfo.totalIntM3;
+      windData.hf = res.ventInfo.totalRetM3;
+    } else {
+      windData.jf = monitor.value ? res.ventInfo.zongjinfeng : res.ventInfo.totalIntM3;
+      windData.hf = monitor.value ? res.ventInfo.zonghuifeng : res.ventInfo.totalRetM3;
+    }
+    windData.xf = res.ventInfo.xufengliang;
+    dustData.levels = res.info.sysInfo.dustS.levels;
+    dustData.levels['blue'] = warnNumMap.get('dust');
+    centerData.fire = res.info.sysInfo.fireS.maxLevel;
+    centerData.tf = res.info.sysInfo.ventS.maxLevel;
+    centerData.ws = res.info.sysInfo.gasS.maxLevel;
+    centerData.sb = res.info.deviceWarnInfo.maxLevel;
+    centerData.fc = res.info.sysInfo.dustS.maxLevel;
+    centerData.riskLevel = res.info.riskLevel;
+    Levels = Object.assign({}, await getDisasterProportion());
+    centerData.levels =
+      Levels.level > 0 && Levels.level <= 1
+        ? 101
+        : Levels.level > 1 && Levels.level <= 2
         ? 102
         : Levels.level > 2 && Levels.level <= 3
-          ? 103
-          : Levels.level > 3 && Levels.level <= 4
-            ? 104
-            : 0;
-
-  Object.keys(iconsMonitor).forEach((el) => {
-    if (res.info.devicekindInfo[el]) {
-      // iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
-      iconsMonitor[el].text = res.info.devicekindInfo[el].name;
-      iconsMonitor[el].allCount = res.info.devicekindInfo[el].totalcount;
-      iconsMonitor[el].warnCount = res.info.devicekindInfo[el].count;
-      iconsMonitor[el].closeCount = res.info.devicekindInfo[el].netstatus;
-    }
-  });
-  fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo
-    ? res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
-      ? '正常'
-      : ''
-    : '';
-  fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo
-    ? 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
-    ? 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
-    ? 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 && res.bundletubeInfo.msgTxt.length != 0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
-    res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
-      fireMonitor1.push({
-        warnLevel: el.syswarnLevel_str,
-        smokeJd: el.syswarnLevel_des,
-        value1: el.strinstallpos,
+        ? 103
+        : Levels.level > 3 && Levels.level <= 4
+        ? 104
+        : 0;
+
+    Object.keys(iconsMonitor).forEach((el) => {
+      if (res.info.devicekindInfo[el]) {
+        // iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
+        iconsMonitor[el].text = res.info.devicekindInfo[el].name;
+        iconsMonitor[el].allCount = res.info.devicekindInfo[el].totalcount;
+        iconsMonitor[el].warnCount = res.info.devicekindInfo[el].count;
+        iconsMonitor[el].closeCount = res.info.devicekindInfo[el].netstatus;
+      }
+    });
+    fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
+        ? '正常'
+        : ''
+      : '';
+    fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo
+      ? 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
+      ? 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
+      ? 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 && res.bundletubeInfo.msgTxt.length != 0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
+      res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
+        fireMonitor1.push({
+          warnLevel: el.syswarnLevel_str,
+          smokeJd: el.syswarnLevel_des,
+          value1: el.strinstallpos,
+        });
       });
+    } else {
+      fireMonitor1.length = 0;
+    }
+    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);
     });
-  } else {
-    fireMonitor1.length = 0;
   }
-  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 });
+
+  onMounted(async () => {
+    const { sysOrgCode, sysDataType } = useGlobSetting();
+    warnLevels.value = sysOrgCode;
+    showToggle.value = sysDataType || 'report';
+    await getLevelNum();
+    await getMonitor(true);
+    rainBg('rain', 'animation-box');
   });
-}
-
-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);
+
+  onUnmounted(() => {
+    clearTimeout(timer);
+    timer = undefined;
   });
-}
-
-onMounted(async () => {
-  const { sysOrgCode, sysDataType } = useGlobSetting();
-  warnLevels.value = sysOrgCode;
-  showToggle.value = sysDataType || 'report';
-  await getLevelNum();
-  await getMonitor(true);
-  rainBg('rain', 'animation-box');
-});
-
-onUnmounted(() => {
-  clearTimeout(timer);
-  timer = undefined;
-});
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/vent/color.less';
-@a: 370px; // 椭圆x轴半径(长半径)
-@b: 107px; // 椭圆y轴半径(短半径)
-@s: 40; // 坐标点的数目(数目越大，动画越精细)
-
-@bg: #e6e2df;
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/color.less';
+  @a: 370px; // 椭圆x轴半径(长半径)
+  @b: 107px; // 椭圆y轴半径(短半径)
+  @s: 40; // 坐标点的数目(数目越大，动画越精细)
 
-.loop(@index) when (@index < @s + 1) {
-  .loop((@index + 1));
-  @keyframeSel: @index * 100% ./ @s;
+  @bg: #e6e2df;
 
-  @{keyframeSel} {
-    transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
-  }
-}
+  .loop(@index) when (@index < @s + 1) {
+    .loop((@index + 1));
+    @keyframeSel: @index * 100% ./ @s;
 
-@{theme-deepblue} {
-  .sensor-container {
-    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-    --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
-    // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
-    --image-fire-bg-top: url('/@/assets/images/themify/deepblue/vent/fire-bg-top.png');
-    --image-icon-bottom-bg: url('/@/assets/images/themify/deepblue/vent/icon-bottom-bg.png');
-    --image-outer-icon: url('/@/assets/images/themify/deepblue/vent/outer-icon.svg');
-    --image-inner-icon: url('/@/assets/images/themify/deepblue/vent/inner-icon.svg');
-    --image-box-bottom-bg: none;
-    // --image-box-bottom-bg: url('/@/assets/images/themify/deepblue/vent/box-bottom-bg.png');
-    --image-center-bg: url('/@/assets/images/themify/deepblue/vent/alarm/center-bg.png');
-    --image-warning-bg: url('/@/assets/images/themify/deepblue/vent/alarm/warning-bg.png');
-    --image-warning-icon-bg1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg1.png');
-    --image-warning-icon-bg-a1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a1.png');
-    --image-warning-icon-bg2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg2.png');
-    --image-warning-icon-bg-a2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a2.png');
-    --image-warning-icon-bg3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg3.png');
-    --image-warning-icon-bg-a3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a3.png');
-    --image-warning-icon-bg4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg4.png');
-    --image-warning-icon-bg-a4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a4.png');
-    --image-warning-icon-bg5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg5.png');
-    --image-warning-icon-bg-a5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a5.png');
-    --image-bottom1: url('/@/assets/images/themify/deepblue/vent/alarm/bottom1.png');
-    --image-bottom: url('/@/assets/images/themify/deepblue/vent/alarm/bottom.png');
-    --image-icon-bg: url('/@/assets/images/themify/deepblue/vent/alarm/icon-bg.png');
-    --image-icon-animation: url('/@/assets/images/themify/deepblue/vent/alarm/icon-animation.png');
-    --image-data-bg: url('/@/assets/images/themify/deepblue/vent/alarm/data-bg.png');
-    --image-icon-fire: url('/@/assets/images/themify/deepblue/vent/alarm/icon-fire.svg');
-    --image-icon-device: url('/@/assets/images/themify/deepblue/vent/alarm/icon-device.svg');
-    --image-icon-dust: url('/@/assets/images/themify/deepblue/vent/alarm/icon-dust.svg');
-    --image-icon-gas: url('/@/assets/images/themify/deepblue/vent/alarm/icon-gas.svg');
-    --image-icon-vent: url('/@/assets/images/themify/deepblue/vent/alarm/icon-vent.svg');
-    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-    --image-plane: url('/@/assets/images/themify/deepblue/vent/plane.png');
-    --image-small-bg1: url('/@/assets/images/themify/deepblue/vent/small-bg1.png');
-    --image-plane1: url('/@/assets/images/themify/deepblue/vent/plane1.png');
-    --container-color: #0e223b;
-    // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
-    --container-image: none;
+    @{keyframeSel} {
+      transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
+    }
   }
 
-  .sensor-container {
-    .center-box {
-      position: relative;
+  @{theme-deepblue} {
+    .sensor-container {
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+      --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
+      // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
+      --image-fire-bg-top: url('/@/assets/images/themify/deepblue/vent/fire-bg-top.png');
+      --image-icon-bottom-bg: url('/@/assets/images/themify/deepblue/vent/icon-bottom-bg.png');
+      --image-outer-icon: url('/@/assets/images/themify/deepblue/vent/outer-icon.svg');
+      --image-inner-icon: url('/@/assets/images/themify/deepblue/vent/inner-icon.svg');
+      --image-box-bottom-bg: none;
+      // --image-box-bottom-bg: url('/@/assets/images/themify/deepblue/vent/box-bottom-bg.png');
+      --image-center-bg: url('/@/assets/images/themify/deepblue/vent/alarm/center-bg.png');
+      --image-warning-bg: url('/@/assets/images/themify/deepblue/vent/alarm/warning-bg.png');
+      --image-warning-icon-bg1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg1.png');
+      --image-warning-icon-bg-a1: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a1.png');
+      --image-warning-icon-bg2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg2.png');
+      --image-warning-icon-bg-a2: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a2.png');
+      --image-warning-icon-bg3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg3.png');
+      --image-warning-icon-bg-a3: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a3.png');
+      --image-warning-icon-bg4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg4.png');
+      --image-warning-icon-bg-a4: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a4.png');
+      --image-warning-icon-bg5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg5.png');
+      --image-warning-icon-bg-a5: url('/@/assets/images/themify/deepblue/vent/alarm/warning-icon-bg-a5.png');
+      --image-bottom1: url('/@/assets/images/themify/deepblue/vent/alarm/bottom1.png');
+      --image-bottom: url('/@/assets/images/themify/deepblue/vent/alarm/bottom.png');
+      --image-icon-bg: url('/@/assets/images/themify/deepblue/vent/alarm/icon-bg.png');
+      --image-icon-animation: url('/@/assets/images/themify/deepblue/vent/alarm/icon-animation.png');
+      --image-data-bg: url('/@/assets/images/themify/deepblue/vent/alarm/data-bg.png');
+      --image-icon-fire: url('/@/assets/images/themify/deepblue/vent/alarm/icon-fire.svg');
+      --image-icon-device: url('/@/assets/images/themify/deepblue/vent/alarm/icon-device.svg');
+      --image-icon-dust: url('/@/assets/images/themify/deepblue/vent/alarm/icon-dust.svg');
+      --image-icon-gas: url('/@/assets/images/themify/deepblue/vent/alarm/icon-gas.svg');
+      --image-icon-vent: url('/@/assets/images/themify/deepblue/vent/alarm/icon-vent.svg');
+      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      --image-plane: url('/@/assets/images/themify/deepblue/vent/plane.png');
+      --image-small-bg1: url('/@/assets/images/themify/deepblue/vent/small-bg1.png');
+      --image-plane1: url('/@/assets/images/themify/deepblue/vent/plane1.png');
+      --container-color: #0e223b;
+      // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
+      --container-image: none;
+    }
 
-      .fire-monitor {
-        border: 1px solid #3a4b5f;
-        border-radius: 10px;
-        background: var(--container-color) no-repeat;
-        padding-top: 20px;
+    .sensor-container {
+      .center-box {
+        position: relative;
 
-        .top {
-          height: 35px;
-          background: var(--image-box-top-bg) no-repeat;
-          background-size: 94% 25px;
-          background-position: center center;
-          padding-left: 6%;
-          text-align: left;
+        .fire-monitor {
+          border: 1px solid #3a4b5f;
+          border-radius: 10px;
+          background: var(--container-color) no-repeat;
+          padding-top: 20px;
+
+          .top {
+            height: 35px;
+            background: var(--image-box-top-bg) no-repeat;
+            background-size: 94% 25px;
+            background-position: center center;
+            padding-left: 6%;
+            text-align: left;
+          }
         }
       }
     }
   }
-}
-
-.sensor-container {
-  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
-  --image-box-top-bg: url('/@/assets/images/vent/box-top-bg.png');
-  --image-fire-bg-top: url('/@/assets/images/vent/fire-bg-top.png');
-  --image-icon-bottom-bg: url('/@/assets/images/vent/icon-bottom-bg.png');
-  --image-outer-icon: url('/@/assets/images/vent/outer-icon.svg');
-  --image-inner-icon: url('/@/assets/images/vent/inner-icon.svg');
-  --image-box-bottom-bg: url('/@/assets/images/vent/box-bottom-bg.png');
-  --image-center-bg: url('/@/assets/images/vent/alarm/center-bg.png');
-  --image-warning-bg: url('/@/assets/images/vent/alarm/warning-bg.png');
-  --image-warning-icon-bg1: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
-  --image-warning-icon-bg-a1: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
-  --image-warning-icon-bg2: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
-  --image-warning-icon-bg-a2: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
-  --image-warning-icon-bg3: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
-  --image-warning-icon-bg-a3: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
-  --image-warning-icon-bg4: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
-  --image-warning-icon-bg-a4: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
-  --image-warning-icon-bg5: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
-  --image-warning-icon-bg-a5: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
-  --image-bottom1: url('/@/assets/images/vent/alarm/bottom1.png');
-  --image-bottom: url('/@/assets/images/vent/alarm/bottom.png');
-  --image-icon-bg: url('/@/assets/images/vent/alarm/icon-bg.png');
-  --image-icon-animation: url('/@/assets/images/vent/alarm/icon-animation.png');
-  --image-data-bg: url('/@/assets/images/vent/alarm/data-bg.png');
-  --image-icon-fire: url('/@/assets/images/vent/alarm/icon-fire.svg');
-  --image-icon-device: url('/@/assets/images/vent/alarm/icon-device.svg');
-  --image-icon-dust: url('/@/assets/images/vent/alarm/icon-dust.svg');
-  --image-icon-gas: url('/@/assets/images/vent/alarm/icon-gas.svg');
-  --image-icon-vent: url('/@/assets/images/vent/alarm/icon-vent.svg');
-  --image-value-bg: url('/@/assets/images/vent/value-bg.png');
-  --image-plane: url('/@/assets/images/vent/plane.png');
-  --image-small-bg1: url('/@/assets/images/vent/small-bg1.png');
-  --image-plane1: url('/@/assets/images/vent/plane1.png');
-  --container-color: #00213236;
-  --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
-  width: 100%;
-  height: calc(100% - 86px);
-  display: flex;
-  position: relative;
-  top: 78px;
-
-  .lr {
-    width: 650px;
-    height: 100%;
-
-    // background-color: #ffffff10;
-  }
 
-  .left-box {
-    .vent-param {
-      width: 100%;
-      margin-top: 10px;
+  .sensor-container {
+    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+    --image-box-top-bg: url('/@/assets/images/vent/box-top-bg.png');
+    --image-fire-bg-top: url('/@/assets/images/vent/fire-bg-top.png');
+    --image-icon-bottom-bg: url('/@/assets/images/vent/icon-bottom-bg.png');
+    --image-outer-icon: url('/@/assets/images/vent/outer-icon.svg');
+    --image-inner-icon: url('/@/assets/images/vent/inner-icon.svg');
+    --image-box-bottom-bg: url('/@/assets/images/vent/box-bottom-bg.png');
+    --image-center-bg: url('/@/assets/images/vent/alarm/center-bg.png');
+    --image-warning-bg: url('/@/assets/images/vent/alarm/warning-bg.png');
+    --image-warning-icon-bg1: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
+    --image-warning-icon-bg-a1: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
+    --image-warning-icon-bg2: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
+    --image-warning-icon-bg-a2: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
+    --image-warning-icon-bg3: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
+    --image-warning-icon-bg-a3: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
+    --image-warning-icon-bg4: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
+    --image-warning-icon-bg-a4: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
+    --image-warning-icon-bg5: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
+    --image-warning-icon-bg-a5: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
+    --image-bottom1: url('/@/assets/images/vent/alarm/bottom1.png');
+    --image-bottom: url('/@/assets/images/vent/alarm/bottom.png');
+    --image-icon-bg: url('/@/assets/images/vent/alarm/icon-bg.png');
+    --image-icon-animation: url('/@/assets/images/vent/alarm/icon-animation.png');
+    --image-data-bg: url('/@/assets/images/vent/alarm/data-bg.png');
+    --image-icon-fire: url('/@/assets/images/vent/alarm/icon-fire.svg');
+    --image-icon-device: url('/@/assets/images/vent/alarm/icon-device.svg');
+    --image-icon-dust: url('/@/assets/images/vent/alarm/icon-dust.svg');
+    --image-icon-gas: url('/@/assets/images/vent/alarm/icon-gas.svg');
+    --image-icon-vent: url('/@/assets/images/vent/alarm/icon-vent.svg');
+    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-plane: url('/@/assets/images/vent/plane.png');
+    --image-small-bg1: url('/@/assets/images/vent/small-bg1.png');
+    --image-plane1: url('/@/assets/images/vent/plane1.png');
+    --container-color: #00213236;
+    --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+    width: 100%;
+    height: calc(100% - 86px);
+    display: flex;
+    position: relative;
+    top: 78px;
 
-      .light-group {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        position: relative;
+    .lr {
+      width: 650px;
+      height: 100%;
 
-        .param-item {
-          width: 150px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          position: reactive;
+      // background-color: #ffffff10;
+    }
 
-          .icon {
-            display: block;
-            position: absolute;
-            top: -5px;
-          }
+    .left-box {
+      .vent-param {
+        width: 100%;
+        margin-top: 10px;
+
+        .light-group {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          position: relative;
 
-          .param {
+          .param-item {
+            width: 150px;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
+            position: reactive;
+
+            .icon {
+              display: block;
+              position: absolute;
+              top: -5px;
+            }
 
-            .param-icon {
-              width: 121px;
-              height: 69px;
-              background: var(--image-vent-param-bg);
+            .param {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
-              position: relative;
-              top: -20px;
-              margin-top: 10px;
 
-              .param-title {
+              .param-icon {
+                width: 121px;
+                height: 69px;
+                background: var(--image-vent-param-bg);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
                 position: relative;
-                top: -4px;
-              }
+                top: -20px;
+                margin-top: 10px;
 
-              .param-unit {
-                position: relative;
-                top: -2px;
-                font-size: 12px;
-              }
-            }
+                .param-title {
+                  position: relative;
+                  top: -4px;
+                }
 
-            .param-val-box {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              position: relative;
-              top: -20px;
+                .param-unit {
+                  position: relative;
+                  top: -2px;
+                  font-size: 12px;
+                }
+              }
 
-              .param-val-icon {
-                width: 2px;
-                height: 15px;
-                background: #00d8ff;
+              .param-val-box {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
                 position: relative;
+                top: -20px;
 
-                &::after {
-                  content: '';
-                  display: block;
-                  position: absolute;
-                  width: 6px;
-                  height: 6px;
-                  border-radius: 3px;
+                .param-val-icon {
+                  width: 2px;
+                  height: 15px;
                   background: #00d8ff;
-                  bottom: -2px;
-                  left: -2px;
+                  position: relative;
+
+                  &::after {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    width: 6px;
+                    height: 6px;
+                    border-radius: 3px;
+                    background: #00d8ff;
+                    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;
-                top: 2px;
-
-                &::after {
-                  width: calc(100% - 4px);
-                  height: calc(100% - 4px);
-                  content: '';
-                  position: absolute;
+                .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;
-                  left: 2px;
-                  display: block;
-                  border: 1px solid #006ea6;
+
+                  &::after {
+                    width: calc(100% - 4px);
+                    height: calc(100% - 4px);
+                    content: '';
+                    position: absolute;
+                    top: 2px;
+                    left: 2px;
+                    display: block;
+                    border: 1px solid #006ea6;
+                  }
                 }
               }
             }
           }
         }
       }
-    }
-
-    .icons-box {
-      height: 365px;
-      overflow-y: hidden;
-
-      &:hover {
-        overflow-y: auto;
-        overflow-x: auto;
-      }
 
-      .icon-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3px;
+      .icons-box {
+        height: 365px;
+        overflow-y: hidden;
 
-        &:nth-child(even) {
-          padding-right: 0px;
+        &:hover {
+          overflow-y: auto;
+          overflow-x: auto;
         }
 
-        .level-text {
-          width: 245px;
+        .icon-item {
+          position: relative;
           display: flex;
-          justify-content: space-around;
-          position: absolute;
-          top: 48px;
-          left: 180px;
-          color: #ffffffe0;
-          font-size: 13px;
-          text-align: center;
-          letter-spacing: 1px;
+          align-items: center;
+          justify-content: center;
+          padding: 3px;
 
-          .num-count,
-          .num-count1 {
-            font-family: 'douyuFont';
-            font-size: 12px;
+          &:nth-child(even) {
+            padding-right: 0px;
           }
 
-          .warn-count,
-          .close-count {
-            .num-count {
-              color: #ffffffe0;
-            }
+          .level-text {
+            width: 245px;
+            display: flex;
+            justify-content: space-around;
+            position: absolute;
+            top: 48px;
+            left: 180px;
+            color: #ffffffe0;
+            font-size: 13px;
+            text-align: center;
+            letter-spacing: 1px;
 
+            .num-count,
             .num-count1 {
-              color: #ff0000;
+              font-family: 'douyuFont';
+              font-size: 12px;
+            }
+
+            .warn-count,
+            .close-count {
+              .num-count {
+                color: #ffffffe0;
+              }
+
+              .num-count1 {
+                color: #ff0000;
+              }
             }
           }
-        }
 
-        img {
-          width: 427px;
-          height: 79px;
+          img {
+            width: 427px;
+            height: 79px;
+          }
         }
-      }
 
-      .wrapper {
-        position: absolute;
-        top: 48px;
-        left: 112px;
-        color: #ffffffe0;
-        font-size: 13px;
-        text-align: center;
-        letter-spacing: 1px;
+        .wrapper {
+          position: absolute;
+          top: 48px;
+          left: 112px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
+        }
       }
-    }
 
-    @keyframes move {
-      0% {
-        transform: translateY(0px);
-      }
+      @keyframes move {
+        0% {
+          transform: translateY(0px);
+        }
 
-      100% {
-        transform: translateY(-269px);
+        100% {
+          transform: translateY(-269px);
+        }
       }
-    }
 
-    @keyframes move1 {
-      0% {
-        transform: translateY(0px);
+      @keyframes move1 {
+        0% {
+          transform: translateY(0px);
+        }
       }
     }
-  }
-
-  .center-box {
-    position: relative;
-    width: calc(100% - 710px);
-    // background-color: #ffffff10;
-    margin: 0 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-
-    .echart-warn-grade {
-      position: absolute;
-      left: -20px;
-      top: 0;
-      width: 400px;
-      height: 200px;
-    }
-
-    .btn-warn-grade {
-      position: absolute;
-      right: 30px;
-      top: 10px;
-    }
 
-    .fire-monitor {
+    .center-box {
+      position: relative;
+      width: calc(100% - 710px);
+      // background-color: #ffffff10;
+      margin: 0 8px;
       display: flex;
       flex-direction: column;
-      width: 100%;
-      position: relative;
+      justify-content: flex-end;
 
-      .top {
-        width: 100%;
-        height: 35px;
-        background: var(--image-box-top-bg);
-        background-size: 100% 100%;
-        text-align: center;
-        color: var(--vent-font-color);
-        padding-top: 6px;
+      .echart-warn-grade {
+        position: absolute;
+        left: -20px;
+        top: 0;
+        width: 400px;
+        height: 200px;
       }
 
-      .container {
-        width: calc(100% - 2px);
-        min-height: 50px;
-        padding: 0 10px;
-        color: var(--vent-font-color);
-        background-color: var(--container-color);
-        backdrop-filter: blur(5px);
+      .btn-warn-grade {
+        position: absolute;
+        right: 30px;
+        top: 10px;
+      }
 
-        &::before {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 5px;
-          left: 0;
-          width: 1px;
-          height: calc(100% - 10px);
-          background-image: var(--container-image);
-        }
+      .fire-monitor {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        position: relative;
 
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
-          right: 0;
-          top: 5px;
-          width: 1px;
-          height: calc(100% - 10px);
-          background: var(--container-image);
+        .top {
+          width: 100%;
+          height: 35px;
+          background: var(--image-box-top-bg);
+          background-size: 100% 100%;
+          text-align: center;
+          color: var(--vent-font-color);
+          padding-top: 6px;
         }
 
-        .item {
-          height: 130px;
-          width: 100%;
-          position: relative;
-          top: -10px;
-          display: flex;
-          // justify-content: space-between;
-          align-content: center;
-          padding-top: 50px;
+        .container {
+          width: calc(100% - 2px);
+          min-height: 50px;
+          padding: 0 10px;
+          color: var(--vent-font-color);
+          background-color: var(--container-color);
+          backdrop-filter: blur(5px);
 
           &::before {
             content: '';
-            width: 100%;
-            height: 150px;
+            display: block;
             position: absolute;
-            top: 0px;
-            background: var(--image-fire-bg-top);
-            background-size: 100% 100%;
+            top: 5px;
+            left: 0;
+            width: 1px;
+            height: calc(100% - 10px);
+            background-image: var(--container-image);
+          }
+
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            right: 0;
+            top: 5px;
+            width: 1px;
+            height: calc(100% - 10px);
+            background: var(--container-image);
           }
 
-          .icon {
-            width: 82px;
-            height: 36px;
-            margin: 0 20px 0 50px;
-            background: var(--image-icon-bottom-bg);
+          .item {
+            height: 130px;
+            width: 100%;
             position: relative;
-            top: 30px;
+            top: -10px;
+            display: flex;
+            // justify-content: space-between;
+            align-content: center;
+            padding-top: 50px;
 
-            &::after {
-              position: absolute;
+            &::before {
               content: '';
-              width: 50px;
-              height: 50px;
-              top: -25px;
-              left: 20px;
-              background: var(--image-outer-icon) no-repeat;
+              width: 100%;
+              height: 150px;
+              position: absolute;
+              top: 0px;
+              background: var(--image-fire-bg-top);
+              background-size: 100% 100%;
             }
-          }
 
-          .data-box1 {
-            display: flex;
-            flex-direction: column;
+            .icon {
+              width: 82px;
+              height: 36px;
+              margin: 0 20px 0 50px;
+              background: var(--image-icon-bottom-bg);
+              position: relative;
+              top: 30px;
+
+              &::after {
+                position: absolute;
+                content: '';
+                width: 50px;
+                height: 50px;
+                top: -25px;
+                left: 20px;
+                background: var(--image-outer-icon) no-repeat;
+              }
+            }
 
-            width: 118px;
-            align-items: center;
+            .data-box1 {
+              display: flex;
+              flex-direction: column;
 
-            .value {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              color: #2bdcff;
-              margin-bottom: 5px;
-            }
+              width: 118px;
+              align-items: center;
 
-            .value1 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: rgb(145, 230, 9);
-            }
+              .value {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                color: #2bdcff;
+                margin-bottom: 5px;
+              }
 
-            .value2 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              // color: rgb(0, 242, 255);
-              color: #ffff35;
-            }
+              .value1 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: rgb(145, 230, 9);
+              }
 
-            .value3 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              // color: #ffff35;
-              color: #ff0000;
-            }
+              .value2 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: rgb(0, 242, 255);
+                color: #ffff35;
+              }
 
-            .value4 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ffbe69;
-            }
+              .value3 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                // color: #ffff35;
+                color: #ff0000;
+              }
 
-            .value5 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ff6f00;
-            }
+              .value4 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ffbe69;
+              }
 
-            .value6 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ff0000;
-            }
+              .value5 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff6f00;
+              }
 
-            .title {
-              font-size: 13px;
-            }
-          }
+              .value6 {
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff0000;
+              }
 
-          .seamless-warp1 {
-            width: 625px;
-            height: 75%;
-            overflow: hidden;
+              .title {
+                font-size: 13px;
+              }
+            }
 
-            .data-box {
-              display: flex;
+            .seamless-warp1 {
               width: 625px;
-              justify-content: center;
-              align-items: center;
-              margin: 40px auto;
+              height: 75%;
+              overflow: hidden;
 
-              .box-item {
-                width: 25%;
-                height: 100%;
+              .data-box {
                 display: flex;
-                flex-direction: column;
+                width: 625px;
+                justify-content: center;
                 align-items: center;
-                padding: 0 20px;
-
-                .value {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  color: #2bdcff;
-                  margin-bottom: 5px;
+                margin: 40px auto;
+
+                .box-item {
+                  width: 25%;
+                  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);
+                    color: #ffff35;
+                  }
+
+                  .value3 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    // color: #ffff35;
+                    color: #ff0000;
+                  }
+
+                  .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);
-                  color: #ffff35;
-                }
-
-                .value3 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  // color: #ffff35;
-                  color: #ff0000;
-                }
-
-                .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;
-                }
-              }
-
-              .box-item1 {
-                width: 50%;
-                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);
-                  color: #ffff35;
-                }
-
-                .value3 {
-                  font-size: 16px;
-                  font-family: 'douyuFont';
-                  margin-bottom: 5px;
-                  // color: #ffff35;
-                  color: #ff0000;
-                }
-
-                .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;
+                .box-item1 {
+                  width: 50%;
+                  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);
+                    color: #ffff35;
+                  }
+
+                  .value3 {
+                    font-size: 16px;
+                    font-family: 'douyuFont';
+                    margin-bottom: 5px;
+                    // color: #ffff35;
+                    color: #ff0000;
+                  }
+
+                  .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: var(--image-inner-icon) no-repeat;
+            .icon {
+              &::after {
+                background: var(--image-inner-icon) no-repeat;
+              }
             }
           }
         }
-      }
-
-      .bottom {
-        width: 100%;
-        height: 35px;
-        background: var(--image-box-bottom-bg);
-        background-size: 100% 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    }
-
-    .animation-box {
-      height: fit-content;
-      flex: 1;
-      margin-bottom: 10px;
-      background: var(--image-center-bg);
-      background-size: contain;
-      background-position: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-      top: 45px;
 
-      .rain {
-        position: absolute;
+        .bottom {
+          width: 100%;
+          height: 35px;
+          background: var(--image-box-bottom-bg);
+          background-size: 100% 100%;
+          position: absolute;
+          bottom: 0;
+        }
       }
 
-      .bottom {
-        width: 528px;
-        height: 395px;
-        background-repeat: no-repeat;
-        position: absolute;
-        z-index: 999;
+      .animation-box {
+        height: fit-content;
+        flex: 1;
+        margin-bottom: 10px;
+        background: var(--image-center-bg);
+        background-size: contain;
+        background-position: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        top: 45px;
 
-        &::before {
-          content: '';
-          width: 325px;
-          height: 379px;
+        .rain {
           position: absolute;
-          left: 105px;
-          top: -60px;
-          background: var(--image-warning-bg) no-repeat;
         }
 
-        .animation1 {
-          width: 390px;
-          height: 78px;
+        .bottom {
+          width: 528px;
+          height: 395px;
+          background-repeat: no-repeat;
           position: absolute;
-          top: -30px;
-          left: 80px;
           z-index: 999;
 
-          // animation: rotate3 3s linear infinite;
-          .ball {
+          &::before {
+            content: '';
+            width: 325px;
+            height: 379px;
             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'
-              );
-            animation: 10s linear 0s infinite alternate ball;
+            left: 105px;
+            top: -60px;
+            background: var(--image-warning-bg) no-repeat;
           }
-        }
 
-        .animation2 {
-          width: 430px;
-          height: 92px;
-          position: absolute;
-          top: 0px;
-          left: 60px;
-          z-index: 999;
-
-          // animation: rotate4 3s linear infinite;
-          .ball1 {
+          .animation1 {
+            width: 390px;
+            height: 78px;
             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'
+            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'
               );
-            animation: 10s linear 0s infinite alternate ball1;
+              animation: 10s linear 0s infinite alternate ball;
+            }
           }
-        }
 
-        .text-box {
-          width: 100%;
-          display: flex;
-          flex-direction: column;
-          color: var(--vent-font-color);
-          align-items: center;
-          margin-top: 30px;
+          .animation2 {
+            width: 430px;
+            height: 92px;
+            position: absolute;
+            top: 0px;
+            left: 60px;
+            z-index: 999;
 
-          .text1 {
-            font-size: 26px;
-            font-weight: 600;
-            letter-spacing: 2px;
-            padding-top: 20px;
-            position: relative;
-            top: 30px;
-            // margin-bottom: 10px;
+            // 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;
+            }
           }
 
-          .text2 {
-            font-size: 20px;
-            color: #ffffffdd;
-            font-weight: 600;
-            margin-top: 10px;
-            position: relative;
-            top: 30px;
+          .text-box {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            color: var(--vent-font-color);
+            align-items: center;
+            margin-top: 30px;
+
+            .text1 {
+              font-size: 26px;
+              font-weight: 600;
+              letter-spacing: 2px;
+              padding-top: 20px;
+              position: relative;
+              top: 30px;
+              // margin-bottom: 10px;
+            }
+
+            .text2 {
+              font-size: 20px;
+              color: #ffffffdd;
+              font-weight: 600;
+              margin-top: 10px;
+              position: relative;
+              top: 30px;
+            }
+
+            .text3 {
+              font-size: 16px;
+              color: #ffffffdd;
+              margin-top: 10px;
+              position: relative;
+              top: 20px;
+            }
           }
 
-          .text3 {
-            font-size: 16px;
-            color: #ffffffdd;
-            margin-top: 10px;
+          .icon-animation {
+            width: 178px;
+            height: 208px;
+            margin: 0 auto;
+            top: -130px;
+            left: 4px;
             position: relative;
-            top: 20px;
+            animation: 0.5s linear 0s infinite alternate iconMove;
           }
         }
 
-        .icon-animation {
-          width: 178px;
-          height: 208px;
-          margin: 0 auto;
-          top: -130px;
-          left: 4px;
-          position: relative;
-          animation: 0.5s linear 0s infinite alternate iconMove;
-        }
-      }
+        .bottom1 {
+          background-image: var(--image-warning-icon-bg1);
 
-      .bottom1 {
-        background-image: var(--image-warning-icon-bg1);
-
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a1);
-        }
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a1);
+          }
 
-        .text-box {
-          .text1 {
-            color: #00d8ff;
+          .text-box {
+            .text1 {
+              color: #00d8ff;
+            }
           }
         }
-      }
 
-      .bottom2 {
-        background-image: var(--image-warning-icon-bg2);
+        .bottom2 {
+          background-image: var(--image-warning-icon-bg2);
 
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a2);
-        }
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a2);
+          }
 
-        .text-box {
-          .text1 {
-            color: #fcfc22;
+          .text-box {
+            .text1 {
+              color: #fcfc22;
+            }
           }
         }
-      }
 
-      .bottom3 {
-        background-image: var(--image-warning-icon-bg3);
+        .bottom3 {
+          background-image: var(--image-warning-icon-bg3);
 
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a3);
-        }
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a3);
+          }
 
-        .text-box {
-          .text1 {
-            color: #ff7010;
+          .text-box {
+            .text1 {
+              color: #ff7010;
+            }
           }
         }
-      }
 
-      .bottom4 {
-        background-image: var(--image-warning-icon-bg4);
+        .bottom4 {
+          background-image: var(--image-warning-icon-bg4);
 
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a4);
-        }
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a4);
+          }
 
-        .text-box {
-          .text1 {
-            color: #df4e43;
+          .text-box {
+            .text1 {
+              color: #df4e43;
+            }
           }
         }
-      }
 
-      .bottom5 {
-        background-image: var(--image-warning-icon-bg5);
+        .bottom5 {
+          background-image: var(--image-warning-icon-bg5);
 
-        .icon-animation {
-          background: var(--image-warning-icon-bg-a5);
-        }
-
-        .text-box {
-          .text1 {
-            color: #ff2313;
-            // animation: color-blink 1s infinite;
+          .icon-animation {
+            background: var(--image-warning-icon-bg-a5);
           }
 
-          // @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: var(--image-bottom1) no-repeat;
-        background-size: contain;
+          .text-box {
+            .text1 {
+              color: #ff2313;
+              // animation: color-blink 1s infinite;
+            }
 
-        &::after {
-          content: '';
-          width: 750px;
-          height: 750px;
-          position: absolute;
-          transform-style: preserve-3d;
-          transform: translateX(0%) translateY(0%) rotateX(72deg);
-          background: var(--image-bottom);
-          animation: rotate1 3s linear infinite;
-          top: -200px;
-          left: -180px;
+            // @keyframes color-blink {
+            //   0% { color: red; }
+            //   50% { color: blue; }
+            //   100% { color: red; }
+            // }
+          }
         }
 
-        .item {
-          position: absolute;
-
-          // width: 107px;
-          // height: 107px;
-          // left: 120px;
-          // top: 115px;
-          // animation: red-ball 10s linear infinite;
-          .icon-box {
-            width: 100px;
-            height: 100px;
-
-            position: relative;
-            z-index: 0;
+        .total-item-monitor-box {
+          width: 100%;
+          height: 237px;
+          position: relative;
+          top: 180px;
+          left: 265px;
+          background: var(--image-bottom1) no-repeat;
+          background-size: contain;
 
-            &::before {
-              position: absolute;
-              content: '';
-              width: 105px;
-              height: 68px;
-              top: 15px;
-              z-index: -1;
-              background: var(--image-icon-bg) no-repeat;
-            }
+          &::after {
+            content: '';
+            width: 750px;
+            height: 750px;
+            position: absolute;
+            transform-style: preserve-3d;
+            transform: translateX(0%) translateY(0%) rotateX(72deg);
+            background: var(--image-bottom);
+            animation: rotate1 3s linear infinite;
+            top: -200px;
+            left: -180px;
+          }
 
-            &::after {
-              position: absolute;
-              content: '';
-              width: 71px;
-              height: 71px;
-              top: 26px;
-              left: 14px;
-              z-index: 1;
-              background: var(--image-icon-animation) no-repeat;
-              transform: translateX(0%) rotateX(70deg);
-              animation: rotate2 2s linear infinite;
-            }
+          .item {
+            position: absolute;
 
-            .icon {
+            // width: 107px;
+            // height: 107px;
+            // left: 120px;
+            // top: 115px;
+            // animation: red-ball 10s linear infinite;
+            .icon-box {
               width: 100px;
               height: 100px;
-              background-repeat: no-repeat;
-              background-position: top center;
-              position: relative;
-              top: 5px;
-            }
-          }
 
-          .item-monitor-box {
-            color: var(--vent-font-color);
-            position: relative;
-            top: -135px;
-            left: -20px;
-            font-weight: 600;
-            // background: #06020066;
-            padding: 5px 20px 8px 20px;
+              position: relative;
+              z-index: 0;
+
+              &::before {
+                position: absolute;
+                content: '';
+                width: 105px;
+                height: 68px;
+                top: 15px;
+                z-index: -1;
+                background: var(--image-icon-bg) no-repeat;
+              }
 
-            &::before {
-              position: absolute;
-              content: '';
-              width: 196px;
-              height: 48px;
-              left: -20px;
-              top: -10px;
-              background: var(--image-data-bg);
-            }
+              &::after {
+                position: absolute;
+                content: '';
+                width: 71px;
+                height: 71px;
+                top: 26px;
+                left: 14px;
+                z-index: 1;
+                background: var(--image-icon-animation) no-repeat;
+                transform: translateX(0%) rotateX(70deg);
+                animation: rotate2 2s linear infinite;
+              }
 
-            .value {
-              color: #2bdcff;
-              margin-left: 20px;
+              .icon {
+                width: 100px;
+                height: 100px;
+                background-repeat: no-repeat;
+                background-position: top center;
+                position: relative;
+                top: 5px;
+              }
             }
 
-            .value1 {
-              font-size: 16px;
-              font-weight: 800;
-              margin-top: 6px;
-              margin-left: 10px;
-              color: #ff0000;
-              animation: color-blink 1s infinite;
-            }
+            .item-monitor-box {
+              color: var(--vent-font-color);
+              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: var(--image-data-bg);
+              }
 
-            @keyframes color-blink {
-              0% {
-                color: red;
+              .value {
+                color: #2bdcff;
+                margin-left: 20px;
               }
 
-              50% {
-                color: rgb(198, 0, 0);
+              .value1 {
+                font-size: 16px;
+                font-weight: 800;
+                margin-top: 6px;
+                margin-left: 10px;
+                color: #ff0000;
+                animation: color-blink 1s infinite;
               }
 
-              100% {
-                color: rgb(255, 18, 18);
+              @keyframes color-blink {
+                0% {
+                  color: red;
+                }
+
+                50% {
+                  color: rgb(198, 0, 0);
+                }
+
+                100% {
+                  color: rgb(255, 18, 18);
+                }
               }
             }
           }
-        }
 
-        .item1 {
-          top: 230px;
-          left: 150px;
+          .item1 {
+            top: 230px;
+            left: 150px;
 
-          .icon {
-            background-image: var(--image-icon-fire);
+            .icon {
+              background-image: var(--image-icon-fire);
+            }
           }
-        }
 
-        .item2 {
-          top: 185px;
-          left: -120px;
+          .item2 {
+            top: 185px;
+            left: -120px;
 
-          .icon {
-            background-image: var(--image-icon-device);
+            .icon {
+              background-image: var(--image-icon-device);
+            }
           }
-        }
 
-        .item3 {
-          top: 185px;
-          left: 420px;
+          .item3 {
+            top: 185px;
+            left: 420px;
 
-          .icon {
-            background-image: var(--image-icon-dust);
+            .icon {
+              background-image: var(--image-icon-dust);
+            }
           }
-        }
 
-        .item4 {
-          top: 20px;
-          left: 390px;
+          .item4 {
+            top: 20px;
+            left: 390px;
 
-          .icon {
-            background-image: var(--image-icon-gas);
-          }
+            .icon {
+              background-image: var(--image-icon-gas);
+            }
 
-          .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: var(--image-icon-vent);
+            .icon {
+              background-image: var(--image-icon-vent);
+            }
           }
         }
-      }
 
-      @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 {
-      display: flex;
-      justify-content: space-between;
-      padding: 0 20px;
-      margin-bottom: 20px;
-      margin-top: 15px;
-
-      .value {
-        width: 131px;
-        height: 44px;
-        background: var(--image-value-bg);
+    .right-box {
+      .dust-monitor {
         display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+        justify-content: space-between;
+        padding: 0 20px;
+        margin-bottom: 20px;
+        margin-top: 15px;
+
+        .value {
+          width: 131px;
+          height: 44px;
+          background: var(--image-value-bg);
+          display: flex;
+          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: var(--image-plane) no-repeat;
-            background-size: contain;
-            background-position: bottom;
-          }
+            .title {
+              width: 205px;
+              height: 48px;
+              text-align: center;
+              background: var(--image-plane) no-repeat;
+              background-size: contain;
+              background-position: bottom;
+            }
 
-          &::before {
-            position: absolute;
-            content: '';
-            width: 136px;
-            height: 101px;
-            left: 35px;
-            top: 15px;
-            background: var(--image-small-bg1) no-repeat;
-            background-size: cover;
+            &::before {
+              position: absolute;
+              content: '';
+              width: 136px;
+              height: 101px;
+              left: 35px;
+              top: 15px;
+              background: var(--image-small-bg1) no-repeat;
+              background-size: cover;
+            }
           }
-        }
-
-        .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;
+          .detail-box {
+            position: relative;
+            margin: 0 auto;
             width: 184px;
-            height: 31px;
-            background: var(--image-plane1) 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;
+            height: calc(100% - 136px);
+            background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
+            background-size: cover;
             display: flex;
-            padding: 0 10px;
-            justify-content: space-between;
+            flex-direction: column;
+            justify-content: flex-start;
             align-items: center;
-            margin-bottom: 30px;
+            overflow-y: auto;
+            // padding: 50px 0 20px 0;
 
-            .value {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              color: #2bdcff;
-              text-align: center;
+            &::after {
+              position: absolute;
+              content: '';
+              left: 0px;
+              bottom: 0px;
+              width: 184px;
+              height: 31px;
+              background: var(--image-plane1) 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;
+              }
             }
           }
         }
       }
     }
-  }
 
-  .monitor-title {
-    cursor: pointer;
-  }
+    .monitor-title {
+      cursor: pointer;
+    }
 
-  .icon-toggle {
-    position: absolute;
-    left: 18px;
-    top: 6px;
+    .icon-toggle {
+      position: absolute;
+      left: 18px;
+      top: 6px;
 
-    img {
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
+      img {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
     }
   }
-}
 </style>

src/views/vent/monitorManager/comment/HistoryTable.vue

@@ -254,7 +254,7 @@
       stationType.value = deviceOptions.value[0]['stationtype'];
       historyType.value = deviceOptions.value[0]['strtype'] || deviceOptions.value[0]['devicekind'];
     }
-    if (stationType.value !== 'redis') {
+    if (VENT_PARAM.historyIsMultiple) {
       await getForm().setFieldsValue({
         gdeviceids: [props.deviceId ? props.deviceId : deviceOptions.value[0] ? deviceOptions.value[0]['value'] : ''],
       });

src/views/vent/monitorManager/deviceMonitor/components/device/modal/mainPath.vue

@@ -328,194 +328,232 @@ onMounted(() => {});
     top: 66px;
     left: 0;
     width: 100%;
-    height: 120px;
-
-    .line {
-      width: 100%;
-      height: 100%;
+    height: 100%;
+    position: relative;
+    background-color: #47474722;
+    backdrop-filter: blur(2px);
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
+
+      &:hover {
+        color: #66ffff;
+      }
     }
 
-    .pic {
-      height: 100%;
+    .toggle-search {
       position: absolute;
-      left: 45%;
-      top: 0;
+      left: 9px;
+      top: 37px;
       display: flex;
-      align-items: center;
 
-      img {
-        height: 60%;
+      .icon-search {
+        position: absolute;
+        top: 50%;
+        left: 5px;
+        transform: translate(0%, -50%);
       }
     }
 
-    .percent {
+    .line-echart {
       position: absolute;
-      left: 75%;
-      top: 0;
-      width: 45px;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      // justify-content: space-between;
-      align-items: center;
-
-      .percent-box {
-        font-size: 14px;
-
-        // color: #b3b8cc;
-        &:nth-child(1) {
-          position: absolute;
-          top: 12%;
-          color: #9affa8;
-        }
+      top: 66px;
+      left: 0;
+      width: 100%;
+      height: 120px;
 
-        &:nth-child(2) {
-          position: absolute;
-          top: 42%;
-          color: #ffe01c;
-        }
+      .line {
+        width: 100%;
+        height: 100%;
+      }
 
-        &:nth-child(3) {
-          position: absolute;
-          top: 70%;
-          color: #ff365d;
-        }
+      .pic {
+        height: 100%;
+        position: absolute;
+        left: 45%;
+        top: 0;
+        display: flex;
+        align-items: center;
 
-        .dw {
-          color: #f2f4f8;
-          margin-left: 5px;
+        img {
+          height: 60%;
         }
       }
-    }
-  }
 
-  .line-card {
-    position: absolute;
-    top: 166px;
-    left: 0;
-    width: 100%;
-    height: calc(100% - 186px);
-    padding: 0px 15px 15px 15px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-
-    .card-item {
-      display: flex;
-      flex: 1;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-
-      .item-s {
-        position: relative;
-        width: 105px;
-        height: 58px;
-        margin: 0 1px;
-        margin-top: 20px;
-        background: url('/@/assets/images/home-container/line-val.png') no-repeat;
-        background-size: 100% 90%;
-
-        .item-label {
-          width: 100%;
-          text-align: center;
-          color: #e4e6ee;
-          font-size: 12px;
-        }
+      .percent {
+        position: absolute;
+        left: 75%;
+        top: 0;
+        width: 45px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-between;
+        align-items: center;
 
-        .item-val {
-          position: absolute;
-          left: 50%;
-          top: 26px;
+        .percent-box {
           font-size: 14px;
-          font-family: 'douyuFont';
-          color: #fff;
-          transform: translate(-50%, 0);
+
+          // color: #b3b8cc;
+          &:nth-child(1) {
+            position: absolute;
+            top: 12%;
+            color: #9affa8;
+          }
+
+          &:nth-child(2) {
+            position: absolute;
+            top: 42%;
+            color: #ffe01c;
+          }
+
+          &:nth-child(3) {
+            position: absolute;
+            top: 70%;
+            color: #ff365d;
+          }
+
+          .dw {
+            color: #f2f4f8;
+            margin-left: 5px;
+          }
         }
       }
     }
-  }
-  .status-card-box {
-    width: 330px;
-    height: 106px;
-    padding: 5px;
-    position: relative;
 
-    top: 280px;
-    border-radius: 4px;
-
-    .status-card {
+    .line-card {
       position: absolute;
-      width: 310px;
-      height: 94px;
+      top: 166px;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 186px);
+      padding: 0px 15px 15px 15px;
       box-sizing: border-box;
       display: flex;
+      justify-content: space-around;
       align-items: center;
-      background: url('/@/assets/images/home-container/bj.png') no-repeat;
 
-      background-size: 100% 100%;
-      .left-content {
-        width: 95px;
-        height: 93px;
-        background: url('/@/assets/images/home-container/leftBJ1.png') no-repeat;
-        background-size: 100% 100%;
-        .left1 {
-          width: 100%;
-          height: 100%;
-          margin: 30px;
-          background: url('/@/assets/images/home-container/leftBJ2.png') no-repeat;
-          background-size: 30% 30%;
-        }
-      }
-      .right-content {
+      .card-item {
         display: flex;
-        flex-direction: column;
-        width: 70%;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
         height: 100%;
-        .fengya {
+
+        .item-s {
           position: relative;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 5px;
-          margin-top: 8px;
+          width: 105px;
+          height: 58px;
+          margin: 0 1px;
+          margin-top: 20px;
+          background: url('/@/assets/images/home-container/line-val.png') no-repeat;
+          background-size: 100% 90%;
+
+          .item-label {
+            width: 100%;
+            text-align: center;
+            color: #e4e6ee;
+            font-size: 12px;
+          }
+
+          .item-val {
+            position: absolute;
+            left: 50%;
+            top: 26px;
+            font-size: 14px;
+            font-family: 'douyuFont';
+            color: #fff;
+            transform: translate(-50%, 0);
+          }
         }
-        .fengya::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: 10px;
-          background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
+      }
+    }
+    .status-card-box {
+      width: 330px;
+      height: 106px;
+      padding: 5px;
+      position: relative;
+
+      top: 280px;
+      border-radius: 4px;
+
+      .status-card {
+        position: absolute;
+        width: 310px;
+        height: 94px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        background: url('/@/assets/images/home-container/bj.png') no-repeat;
+
+        background-size: 100% 100%;
+        .left-content {
+          width: 95px;
+          height: 93px;
+          background: url('/@/assets/images/home-container/leftBJ1.png') no-repeat;
           background-size: 100% 100%;
+          .left1 {
+            width: 100%;
+            height: 100%;
+            margin: 30px;
+            background: url('/@/assets/images/home-container/leftBJ2.png') no-repeat;
+            background-size: 30% 30%;
+          }
         }
-        .title {
-          margin-left: 8px;
-          color: @white;
-        }
-        .value {
-          margin-right: 8px;
-          color: #a1f9ff;
-        }
-        .status {
-          position: relative;
+        .right-content {
           display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-top: 8px;
-          padding: 5px;
-        }
-        .status::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: 10px;
-          background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
-          background-size: 100% 100%;
+          flex-direction: column;
+          width: 70%;
+          height: 100%;
+          .fengya {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 5px;
+            margin-top: 8px;
+          }
+          .fengya::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 10px;
+            background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
+            background-size: 100% 100%;
+          }
+          .title {
+            margin-left: 8px;
+            color: @white;
+          }
+          .value {
+            margin-right: 8px;
+            color: #a1f9ff;
+          }
+          .status {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 8px;
+            padding: 5px;
+          }
+          .status::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 10px;
+            background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
+            background-size: 100% 100%;
+          }
         }
       }
     }

src/views/vent/safetyList/common/detail-130.vue

@@ -804,7 +804,6 @@
   }
   //分站站点选项点击
   function cardClick(item, index) {
-    console.log('debug', item, index);
     selectedIndex.value = index; // 更新选中索引
     activeIndex.value = item.isNewAccess || !item.linkstatus ? index : null;
     stationName.value = item.strname;
@@ -1102,6 +1101,13 @@
 
 <style lang="less" scoped>
   .safetyList {
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-zd-2: url('/@/assets/images/zd-2.png');
+    --image-zd-3: url('/@/assets/images/zd-3.png');
+    --image-zd-1: url('/@/assets/images/zd-1.png');
+    --image-top-btn: url('/@/assets/images/top-btn.png');
+    --image-top-btn-select: url('/@/assets/images/top-btn-select.png');
+
     width: calc(100% - 20px);
     height: calc(100% - 80px);
     position: relative;
@@ -1117,39 +1123,6 @@
         color: #fff;
         position: relative;
         background: linear-gradient(#001325, #012e4f);
-
-        :deep(.zxm-tabs-nav) {
-          margin: 0 !important;
-
-          .zxm-tabs-tab {
-            width: 180px;
-            height: 45px;
-            background: url('/@/assets/images/top-btn.png') center no-repeat;
-            background-size: cover;
-            display: flex;
-            justify-content: center;
-            font-size: 16px;
-          }
-
-          .zxm-tabs-tab-active {
-            width: 180px;
-            position: relative;
-            background: url('/@/assets/images/top-btn-select.png') center no-repeat;
-            background-size: cover;
-
-            .zxm-tabs-tab-btn {
-              color: #fff !important;
-            }
-          }
-
-          .zxm-tabs-ink-bar {
-            width: 0 !important;
-          }
-
-          .zxm-tabs-tab + .zxm-tabs-tab {
-            margin: 0 !important;
-          }
-        }
       }
 
       .box-content {
@@ -1171,7 +1144,7 @@
             margin-right: 15px;
             padding: 10px;
             box-sizing: border-box;
-            background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+            background: var(--image-bj1) no-repeat center;
             background-size: 100% 100%;
 
             .left-title {
@@ -1208,7 +1181,6 @@
 
               .card-box {
                 position: relative;
-                // width: 242px;
                 width: 182px;
                 height: 120px;
                 margin-bottom: 15px;
@@ -1219,7 +1191,7 @@
                   position: relative;
                   width: 85px;
                   height: 120px;
-                  background: url('/@/assets/images/zd-2.png') no-repeat center;
+                  background: var(--image-zd-2) no-repeat center;
                   background-size: 100% 100%;
                   cursor: pointer;
 
@@ -1237,7 +1209,7 @@
                   position: relative;
                   width: 85px;
                   height: 120px;
-                  background: url('/@/assets/images/zd-3.png') no-repeat center;
+                  background: var(--image-zd-3) no-repeat center;
                   background-size: 100% 100%;
                   cursor: pointer;
 
@@ -1255,7 +1227,7 @@
                   position: relative;
                   width: 85px;
                   height: 120px;
-                  background: url('/@/assets/images/zd-1.png') no-repeat center;
+                  background: var(--image-zd-1) no-repeat center;
                   background-size: 100% 100%;
                   cursor: pointer;
 
@@ -1297,7 +1269,7 @@
             height: 100%;
             padding: 10px;
             box-sizing: border-box;
-            background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+            background: var(--image-bj1) no-repeat center;
             background-size: 100% 100%;
 
             .right-title {
@@ -1323,7 +1295,7 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
-          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+          background: var(--image-bj1) no-repeat center;
           background-size: 100% 100%;
           color: #fff;
 
@@ -1333,7 +1305,7 @@
             margin-right: 15px;
             padding: 10px;
             box-sizing: border-box;
-            background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+            background: var(--image-bj1) no-repeat center;
             background-size: 100% 100%;
 
             .left-title {
@@ -1381,7 +1353,7 @@
                   position: relative;
                   width: 85px;
                   height: 120px;
-                  background: url('/@/assets/images/zd-2.png') no-repeat center;
+                  background: var(--image-zd-2) no-repeat center;
                   background-size: 100% 100%;
                   cursor: pointer;
 
@@ -1399,7 +1371,7 @@
                   position: relative;
                   width: 85px;
                   height: 120px;
-                  background: url('/@/assets/images/zd-3.png') no-repeat center;
+                  background: var(--image-zd-3) no-repeat center;
                   background-size: 100% 100%;
                   cursor: pointer;
 
@@ -1417,7 +1389,7 @@
                   position: relative;
                   width: 85px;
                   height: 120px;
-                  background: url('/@/assets/images/zd-1.png') no-repeat center;
+                  background: var(--image-zd-1) no-repeat center;
                   background-size: 100% 100%;
                   cursor: pointer;
 
@@ -1459,7 +1431,7 @@
             height: 100%;
             padding: 10px;
             box-sizing: border-box;
-            background: url('/@/assets/images/fire/bj1.png') no-repeat center;
+            background: var(--image-bj1) no-repeat center;
             background-size: 100% 100%;
 
             .historytable {
@@ -1498,11 +1470,42 @@
   .zxm-input {
     border: 1px solid #3ad8ff77 !important;
     background-color: #ffffff !important;
-    color: #fff !important;
   }
 
   .card-item.selected {
     border: 2px solid #3ad8ff77;
-    /* 选中时的边框颜色 */
+  }
+
+  :deep(.zxm-tabs-nav) {
+    margin: 0 !important;
+
+    .zxm-tabs-tab {
+      width: 180px;
+      height: 45px;
+      background: var(--image-top-btn) center no-repeat;
+      background-size: cover;
+      display: flex;
+      justify-content: center;
+      font-size: 16px;
+    }
+
+    .zxm-tabs-tab-active {
+      width: 180px;
+      position: relative;
+      background: var(--image-top-btn-select) center no-repeat;
+      background-size: cover;
+
+      .zxm-tabs-tab-btn {
+        color: #fff !important;
+      }
+    }
+
+    .zxm-tabs-ink-bar {
+      width: 0 !important;
+    }
+
+    .zxm-tabs-tab + .zxm-tabs-tab {
+      margin: 0 !important;
+    }
   }
 </style>

types/global.d.ts

@@ -1,6 +1,17 @@
 import type { ComponentRenderProxy, VNode, VNodeChild, ComponentPublicInstance, FunctionalComponent, PropType as VuePropType } from 'vue';
 
 declare global {
+  const VENT_PARAM: {
+    simulatedPassword: string;
+    showReport: boolean;
+    isoOpenSso: string;
+    modalText: string;
+    productionCrlPlatformUrl: string;
+    safetyCrlPlatformUrl: string;
+    gasControlMock: boolean;
+    historyIsMultiple: boolean;
+  };
+
   const __APP_INFO__: {
     pkg: {
       name: string;