mky-vent-base/src/views/vent/monitorManager/alarmMonitor/index.vue

<template>
  <customHeader>预警监测管控系统</customHeader>
  <div class="sensor-container">
    <div class="lr left-box">
      <ventBox1>
        <template #title>
          <div v-if="showToggle == 'all'" class="icon-toggle" @click="handlerToggle">
            <img v-if="monitor" src="@/assets/images/vent/monitor-toggle.png" alt="" />
            <img v-else src="@/assets/images/vent/report-toggle.png" alt="" />
          </div>
          <div class="monitor-title" @click="showModal('vent')">通风监测预警</div>
        </template>
        <template #container>
          <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
          <div class="vent-param">
            <div class="light-group">
              <div class="param-item">
                <div class="param">
                  <div class="param-icon">
                    <div class="param-title">总进风量</div>
                    <div class="param-unit">(m³/min)</div>
                  </div>

                  <div class="param-val-box">
                    <div class="param-val-icon"></div>
                    <div class="param-val">{{ windData.jf || 0 }}</div>
                  </div>
                </div>
              </div>
              <div class="param-item">
                <div class="param">
                  <div class="param-icon">
                    <div class="param-title">总回风量</div>
                    <div class="param-unit">(m³/min)</div>
                  </div>
                  <div class="param-val-box">
                    <div class="param-val-icon"></div>
                    <div class="param-val">{{ windData.hf || 0 }}</div>
                  </div>
                </div>
              </div>
              <div class="param-item">
                <div class="param">
                  <div class="param-icon">
                    <div class="param-title">总需风量</div>
                    <div class="param-unit">(m³/min)</div>
                  </div>
                  <div class="param-val-box">
                    <div class="param-val-icon"></div>
                    <div class="param-val">{{ windData.xf || 0 }}</div>
                  </div>
                </div>
              </div>
            </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" />
        </template>
      </ventBox1>
      <ventBox1 class="vent-margin-t-10">
        <template #title>
          <div class="monitor-title" @click="showModal('sbyj')">设备监测预警</div>
        </template>
        <template #container>
          <div class="icons-box" @mouseleave="resetScroll">
            <template v-for="(item, key) in iconsMonitor" :key="key">
              <div class="icon-item" v-if="item.text">
                <div class="wrapper">
                  {{ item.text }}
                </div>
                <div></div>
                <img :src="item.url" :alt="item.text" />
                <div class="level-text">
                  <div class="all-count">
                    <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
                    <span class="num-count">{{ item.allCount || 0 }}</span>
                  </div>
                  <div class="warn-count">
                    <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
                    <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
                  </div>
                  <div class="close-count">
                    <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
                    <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0 }}</span>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </template>
      </ventBox1>
    </div>
    <div class="center-box">
      <div class="echart-warn-grade">
        <warnGradeEchart :echartData="Levels" />
      </div>
      <div class="btn-warn-grade">
        <!-- <a-button type="primary" size="small" @click="warnGradeClick">风险等级划分标准</a-button> -->
      </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="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">
              <g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
                <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" />
              </g>
            </svg>
          </div>
          <div class="animation2">
            <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"
                  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" />
              </g>
            </svg>
          </div>
          <div class="text-box">
            <div class="text1">{{
              centerData.levels == 0
                ? '低风险'
                : centerData.levels == 101
                  ? '低风险'
                  : 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="text3">风险得分</div>
          </div>
          <div class="icon-animation" @click="warnGradeClick"></div>
        </div>

        <div class="total-item-monitor-box">
          <div class="item item1">
            <div class="icon-box">
              <div class="icon"></div>
            </div>
            <div class="item-monitor-box">
              <span class="title">火灾监测预警</span>
              <span :class="centerData.fire != 0 && centerData.fire != 101 ? 'value1' : 'value'">{{
                centerData.fire == 0
                  ? '低风险'
                  : centerData.fire == 101
                    ? '低风险'
                    : centerData.fire == 102
                      ? '一般风险'
                      : centerData.fire == 103
                        ? '较大风险'
                        : centerData.fire == 104
                          ? '重大风险'
                          : centerData.fire == 201
                            ? '报警'
                            : centerData.fire
              }}</span>
            </div>
          </div>
          <div class="item item2">
            <div class="icon-box">
              <div class="icon"></div>
            </div>
            <div class="item-monitor-box">
              <span class="title">设备监测预警</span>
              <span :class="centerData.sb != 0 && centerData.sb != 101 ? 'value1' : 'value'">{{
                centerData.sb == 0
                  ? '低风险'
                  : centerData.sb == 101
                    ? '低风险'
                    : centerData.sb == 102
                      ? '一般风险'
                      : centerData.sb == 103
                        ? '较大风险'
                        : centerData.sb == 104
                          ? '重大风险'
                          : centerData.sb == 201
                            ? '报警'
                            : centerData.sb
              }}</span>
            </div>
          </div>
          <div class="item item3">
            <div class="icon-box">
              <div class="icon"></div>
            </div>
            <div class="item-monitor-box">
              <span class="title">粉尘监测预警</span>
              <span :class="centerData.fc != 0 && centerData.fc != 101 ? 'value1' : 'value'">{{
                centerData.fc == 0
                  ? '低风险'
                  : centerData.fc == 101
                    ? '低风险'
                    : centerData.fc == 102
                      ? '一般风险'
                      : centerData.fc == 103
                        ? '较大风险'
                        : centerData.fc == 104
                          ? '重大风险'
                          : centerData.fc == 201
                            ? '报警'
                            : centerData.fc
              }}</span>
            </div>
          </div>
          <div class="item item4">
            <div class="icon-box">
              <div class="icon"></div>
            </div>
            <div class="item-monitor-box">
              <span class="title">瓦斯监测预警</span>
              <span :class="centerData.ws != 0 && centerData.ws != 101 ? 'value1' : 'value'">{{
                centerData.ws == 0
                  ? '低风险'
                  : centerData.ws == 101
                    ? '低风险'
                    : centerData.ws == 102
                      ? '一般风险'
                      : centerData.ws == 103
                        ? '较大风险'
                        : centerData.ws == 104
                          ? '重大风险'
                          : centerData.ws == 201
                            ? '报警'
                            : centerData.ws
              }}</span>
              <div class="">
                <span class="title">矿井瓦斯等级鉴定</span>
                <!-- <span class="value">低瓦斯</span> -->
                <span class="value">{{ warnLevels == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯' }}</span>
              </div>
            </div>
          </div>
          <div class="item item5">
            <div class="icon-box">
              <div class="icon"></div>
            </div>
            <div class="item-monitor-box">
              <span class="title">通风监测预警</span>
              <span :class="centerData.tf !== 0 && centerData.tf !== 101 ? 'value1' : 'value'">{{
                centerData.tf == 0
                  ? '低风险'
                  : centerData.tf == 101
                    ? '低风险'
                    : centerData.tf == 102
                      ? '一般风险'
                      : centerData.tf == 103
                        ? '较大风险'
                        : centerData.tf == 104
                          ? '重大风险'
                          : centerData.tf == 201
                            ? '报警'
                            : centerData.tf
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fire-monitor">
        <div class="monitor-title top" @click="showModal('fire')">火灾监测预警</div>
        <div class="container">
          <div class="item item1">
            <div class="icon"></div>
            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" 
              :step="fireMonitor1.length*0.055" :single-waitTime="3000" :limit-scroll-num="fireMonitor1.length" 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="title">监测位置</div>
                </div>

                <div class="box-item">
                  <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>
                  <div class="title">煤自燃阶段</div>
                </div>
              </div>
            </vue3-seamless-scroll>
          </div>
          <div class="item">
            <div class="icon"></div>
            <div style="width: 630px; display: flex; justify-content: space-between">
              <div class="data-box1" v-for="(item, index) in fireMonitor" :key="index">
                <!-- <div class="value1"> {{ !item.value ? '-' : item.value == '正常' ? '低风险' : item.value }} </div> -->
                <div class="value1"> {{ !item.value ? '低风险' : item.value == '正常' ? '低风险' : item.value }} </div>
                <div class="title">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom"></div>
      </div>
    </div>
    <div class="lr right-box">
      <ventBox1>
        <template #title>
          <div class="monitor-title" @click="showModal('gas')">瓦斯监测预警</div>
        </template>
        <template #container>
          <div class="gas-box">
            <div class="gas-item">
              <div class="top">
                <div class="value">{{ gasData.sums }}</div>
                <div class="title">安全监测系统监测点</div>
              </div>
              <div class="detail-box">
                <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
                  <div class="">{{ item.label }}</div>
                  <div class="value">{{ !item.value && item.value != '0' ? '-' : item.value }}</div>
                </div>
              </div>
            </div>
            <div class="gas-item">
              <div class="top">
                <div class="value">{{ gasData.sums1 != 0 ? gasData.sums1 : '-' }}</div>
                <div class="title">瓦斯抽采系统监测点</div>
              </div>
              <div class="detail-box">
                <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
                  <div class="">{{ item.label }}</div>
                  <div class="value">{{ !item.value1 ? '-' : item.value1 }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </ventBox1>
      <ventBox1 class="vent-margin-t-10">
        <template #title>
          <div class="monitor-title" @click="showModal('dust')">粉尘监测预警</div>
        </template>
        <template #container>
          <!-- <div class="dust-monitor">
            <div v-for="(item, index) in dustMonitor" :key="index" class="item-box">
              <div class="title">{{ item.title }}</div>
              <div class="value">0个</div>
            </div>
          </div> -->

          <BarSingle :xAxisData="xAxisData" :dataSource="dustData.levels" height="332px" :chartsColumns="chartsColumns"
            :option="option" :color="colors" :fontColor="fontColor" />
        </template>
      </ventBox1>
    </div>
    <!-- 风险等级弹窗 -->
    <a-modal v-model:visible="visibleGrade" width="850px" :footer="null" :title="titleGrade" centered destroyOnClose>
      <warnGradeInfo />
    </a-modal>
  </div>
</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.totalIntM3 : toggleData.ventInfo.zongjinfeng ;
  windData.hf = monitor.value ?  toggleData.ventInfo.totalRetM3: toggleData.ventInfo.zonghuifeng ;
};
//风险等级点击
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;
    windData.jf = res.ventInfo.totalIntM3;
    windData.hf = 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,
      });
    });
  } 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);
  });
}

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;

.loop(@index) when (@index < @s + 1) {
  .loop((@index + 1));
  @keyframeSel: @index * 100% ./ @s;

  @{keyframeSel} {
    transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
  }
}

@{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;
  }

  .sensor-container {
    .center-box {
      position: relative;

      .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;

      .light-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: relative;

        .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 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .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: -20px;
              margin-top: 10px;

              .param-title {
                position: relative;
                top: -4px;
              }

              .param-unit {
                position: relative;
                top: -2px;
                font-size: 12px;
              }
            }

            .param-val-box {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: relative;
              top: -20px;

              .param-val-icon {
                width: 2px;
                height: 15px;
                background: #00d8ff;
                position: relative;

                &::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;
                  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;

        &:nth-child(even) {
          padding-right: 0px;
        }

        .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 {
            font-family: 'douyuFont';
            font-size: 12px;
          }

          .warn-count,
          .close-count {
            .num-count {
              color: #ffffffe0;
            }

            .num-count1 {
              color: #ff0000;
            }
          }
        }

        img {
          width: 427px;
          height: 79px;
        }
      }

      .wrapper {
        position: absolute;
        top: 48px;
        left: 112px;
        color: #ffffffe0;
        font-size: 13px;
        text-align: center;
        letter-spacing: 1px;
      }
    }

    @keyframes move {
      0% {
        transform: translateY(0px);
      }

      100% {
        transform: translateY(-269px);
      }
    }

    @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 {
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;

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

      .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: '';
          display: block;
          position: absolute;
          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);
        }

        .item {
          height: 130px;
          width: 100%;
          position: relative;
          top: -10px;
          display: flex;
          // justify-content: space-between;
          align-content: center;
          padding-top: 50px;

          &::before {
            content: '';
            width: 100%;
            height: 150px;
            position: absolute;
            top: 0px;
            background: var(--image-fire-bg-top);
            background-size: 100% 100%;
          }

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

          .data-box1 {
            display: flex;
            flex-direction: column;

            width: 118px;
            align-items: center;

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

          .seamless-warp1 {
            width: 625px;
            height: 75%;
            overflow: hidden;

            .data-box {
              display: flex;
              width: 625px;
              justify-content: center;
              align-items: center;
              margin: 50px 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;
                }
              }

              .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;

          &::before {
            transform: matrix(1, 0, 0, -1, 0, 0);
          }

          .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: 528px;
        height: 395px;
        background-repeat: no-repeat;
        position: absolute;
        z-index: 999;

        &::before {
          content: '';
          width: 325px;
          height: 379px;
          position: absolute;
          left: 105px;
          top: -60px;
          background: var(--image-warning-bg) no-repeat;
        }

        .animation1 {
          width: 390px;
          height: 78px;
          position: absolute;
          top: -30px;
          left: 80px;
          z-index: 999;

          // animation: rotate3 3s linear infinite;
          .ball {
            position: absolute;
            width: 12px;
            height: 12px;
            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
            border-radius: 6px;
            background-size: cover;
            offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
              );
            animation: 10s linear 0s infinite alternate ball;
          }
        }

        .animation2 {
          width: 430px;
          height: 92px;
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 999;

          // animation: rotate4 3s linear infinite;
          .ball1 {
            position: absolute;
            width: 12px;
            height: 12px;
            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
            border-radius: 6px;
            background-size: cover;
            offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
              );
            animation: 10s linear 0s infinite alternate ball1;
          }
        }

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

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

        .icon-animation {
          background: var(--image-warning-icon-bg-a1);
        }

        .text-box {
          .text1 {
            color: #00d8ff;
          }
        }
      }

      .bottom2 {
        background-image: var(--image-warning-icon-bg2);

        .icon-animation {
          background: var(--image-warning-icon-bg-a2);
        }

        .text-box {
          .text1 {
            color: #fcfc22;
          }
        }
      }

      .bottom3 {
        background-image: var(--image-warning-icon-bg3);

        .icon-animation {
          background: var(--image-warning-icon-bg-a3);
        }

        .text-box {
          .text1 {
            color: #ff7010;
          }
        }
      }

      .bottom4 {
        background-image: var(--image-warning-icon-bg4);

        .icon-animation {
          background: var(--image-warning-icon-bg-a4);
        }

        .text-box {
          .text1 {
            color: #df4e43;
          }
        }
      }

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

          // @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;

        &::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;
        }

        .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;

            &::before {
              position: absolute;
              content: '';
              width: 105px;
              height: 68px;
              top: 15px;
              z-index: -1;
              background: var(--image-icon-bg) no-repeat;
            }

            &::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;
            }

            .icon {
              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;

            &::before {
              position: absolute;
              content: '';
              width: 196px;
              height: 48px;
              left: -20px;
              top: -10px;
              background: var(--image-data-bg);
            }

            .value {
              color: #2bdcff;
              margin-left: 20px;
            }

            .value1 {
              font-size: 16px;
              font-weight: 800;
              margin-top: 6px;
              margin-left: 10px;
              color: #ff0000;
              animation: color-blink 1s infinite;
            }

            @keyframes color-blink {
              0% {
                color: red;
              }

              50% {
                color: rgb(198, 0, 0);
              }

              100% {
                color: rgb(255, 18, 18);
              }
            }
          }
        }

        .item1 {
          top: 230px;
          left: 150px;

          .icon {
            background-image: var(--image-icon-fire);
          }
        }

        .item2 {
          top: 185px;
          left: -120px;

          .icon {
            background-image: var(--image-icon-device);
          }
        }

        .item3 {
          top: 185px;
          left: 420px;

          .icon {
            background-image: var(--image-icon-dust);
          }
        }

        .item4 {
          top: 20px;
          left: 390px;

          .icon {
            background-image: var(--image-icon-gas);
          }

          .item-monitor-box {
            top: -155px;

            &::before {
              top: 10px;
            }
          }
        }

        .item5 {
          top: 25px;
          left: -110px;

          .icon {
            background-image: var(--image-icon-vent);
          }
        }
      }

      @keyframes iconMove {
        100% {
          opacity: 0;
        }
      }

      @keyframes rotate1 {
        0% {
          transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
        }

        100% {
          transform: translateX(0%) rotateX(72deg) rotateZ(0);
        }
      }

      @keyframes rotate2 {
        0% {
          transform: translateX(0%) rotateX(70deg) rotateZ(0);
        }

        100% {
          transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
        }
      }

      @keyframes rotate3 {
        0% {
          transform: translateX(0%) rotateX(80deg) rotateZ(0);
        }

        100% {
          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
        }
      }

      @keyframes rotate4 {
        100% {
          transform: translateX(0%) rotateX(80deg) rotateZ(0);
        }

        0% {
          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
        }
      }

      @keyframes ball {
        100% {
          offset-distance: 100%;
        }

        0% {
          offset-distance: 0%;
        }
      }

      @keyframes ball1 {
        0% {
          offset-distance: 100%;
        }

        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);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .title {
        text-align: center;
        margin-bottom: 5px;
      }

      .value {
        font-size: 16px;
        font-family: 'douyuFont';
        color: #3df5ff;
      }
    }

    .gas-box {
      height: 390px;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;

      .gas-item {
        position: relative;

        .top {
          height: 136px;
          padding-top: 30px;

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

          &::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;
            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;
  }

  .icon-toggle {
    position: absolute;
    left: 18px;
    top: 6px;

    img {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
  }
}
</style>