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

<template>
  <customHeader>预警监测管控系统</customHeader>
  <div class="sensor-container">
    <div class="lr left-box">
        <ventBox1>
          <template #title>
            <div class="monitor-title" @click="showModal('tf')">通风监测</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">56.99</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">56.99</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">56.99</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
            <BarSingle
              :xAxisData="xAxisData"
              :dataSource="echartsDataSource"
              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">
              <div class="icon-item" v-for="(item, key) in iconsMonitor" :key="key">
                <div class="wrapper">
                  {{ item.text }}
                </div>
                <div></div>
                <img :src="item.url" :alt="item.text"/>
                <div class="level-text" :class="{ 'level-text-1': item.level == 1, 'level-text-2': item.level == 2, 'level-text-3': item.level == 3, 'level-text-4': item.level == 4, 'level-text-5': item.level == 5 }">{{ item.level == 1 ? '正常' : item.level == 2 ? '低风险' : item.level == 3 ? '中风险' : item.level == 4 ? '高风险' : item.level == 5 ? '报警' : '' }}</div>
              </div>
            </div>
          </template>
        </ventBox1>
    </div>
    <div class="center-box">
      <div class="animation-box">
        <canvas class="rain"></canvas>
        <div class="bottom bottom5">
          <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">高风险</div>
            <div class="text2">风险分析</div>
          </div>
          <div class="icon-animation"></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="value value1">异常</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="value value">正常</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="value">正常</span>
              <div class="">
                <span class="title">矿井瓦斯鉴定等级监测</span>
                <span class="value">低瓦斯</span>
              </div>
            </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="value">正常</span>
            </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="value">正常</span>
            </div>
          </div>
        </div>
       
      </div>
      <div class="fire-monitor">
        <div class="monitor-title top" @click="showModal('fire')">火灾监测</div>
        <div class="container">
          <div class="item">
            <div class="icon"></div>
            <div class="data-box" v-for="(item, index) in fireMonitor" :key="index">
              <div class="value"> {{ item.value }} </div>
              <div class="title">{{ item.title }}</div>
            </div>
          </div>
          <div class="item item1">
            <div class="icon"></div>
            <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
              <div class="value" :style="{color: item.value == '报警'? '#ff0000': ''}" >{{ item.value }} </div>
              <div class="title">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div class="bottom"></div>
      </div>
    </div>
    <div class="lr right-box">
      <ventBox1>
        <template #title>
          <div class="monitor-title" @click="showModal('dust')">粉尘监测</div>
        </template>
        <template #container>
          <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
          <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">10个</div>
            </div>
          </div>
          
          <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
          <BarSingle
            :xAxisData="xAxisData"
            :dataSource="echartsDataSource"
            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('gas')">瓦斯监测</div>
        </template>
        <template #container>
          <div class="gas-box">
            <div class="gas-item">
              <div class="top">
                <div class="value">10</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.title }}</div>
                  <div class="value">10</div>
                </div>
              </div>
            </div>
            <div class="gas-item">
              <div class="top">
                <div class="value">10</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.title }}</div>
                  <div class="value">10</div>
                </div>
              </div>
            </div>
          </div>
          
        </template>
      </ventBox1>
    </div>
  </div>
  <DetailModal v-if="isShowDialog" v-model:visible="modalVisible" :monitor-data="dataSource" @register="register" @close="hideModal" />
  <!-- 火灾监测弹框 -->
  <DetailModalFire v-else v-model:visible="modalVisible" @register="register" :moduleName="moduleName"  @close="hideModal" />
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, reactive } from 'vue';
  import customHeader from '/@/views/vent/comment/components/customHeader.vue';
  import DetailModal from './DetailModal.vue';
  import DetailModalFire from './DetailModalFire.vue';//火灾监测弹窗
  import { warningList } from './alarm.api';
  import { iconsMonitor, chartsColumns, xAxisData, echartsDataSource, option, colors, fontColor, dustMonitor, gasMonitor, fireMonitor, fireMonitor1 } from './alarm.data'
  import ventBox1 from '/@/components/vent/ventBox1.vue'
  import BarSingle from '../../../../components/chart/BarSingle.vue';
  import { rainBg } from '/@/utils/ui.js'
  import { useModal } from '/@/components/Modal';

  let isShowDialog=ref(true)//切换弹窗显示
  let moduleName=ref<any>('')//火灾、粉尘、瓦斯模块名
  const alarmCounts = ref()
  const dataSource = ref([]);
  const modalVisible = ref(false)

  const resetScroll = (e: Event) => {
    if(e.target && e.target)
    (e.target as Element).scrollTop = 0
  }

  const [register, { openModal }] = useModal()

  function showModal(data) {
    isShowDialog.value=data=='tf' || data=='sbyj' ? true : false
    moduleName.value=data
    modalVisible.value = true
    openModal()
  }

  function hideModal() {
    modalVisible.value = false
  }
 

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag = false) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(async () => {
        await getDataSource();
        if (timer) {
          timer = null;
        }
        getMonitor();
      }, flag? 0 : 1000);
    }
  };

  async function getDataSource() {
    const res = await warningList({ isok: 0 });
    dataSource.value = res.list || [];
    // if(dataSource.value.length > 0){
    //   dataSource.value.map((data: any) => {
    //     const readData = data.readData;
    //     data = Object.assign(data, readData);
    //     return data;
    //   });
    // }
  };
  
  onMounted(async () => {
    getMonitor(true);
    rainBg('rain', 'animation-box')
  });

  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/vent/color.less';
  @a : 370px;  // 椭圆x轴半径(长半径)
  @b : 107px;  // 椭圆y轴半径(短半径)
  @s : 40;  // 坐标点的数目(数目越大，动画越精细)
  
  @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)));}
  }
  .sensor-container {
    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: url('/@/assets/images/vent/vent-param-bg.png');
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
                top: -20px;
                margin-top: 10px;

                .param-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{
        display: flex;
        flex-wrap: wrap;
        max-height: 365px;
        overflow-y: hidden;
        // align-items: start ;
        &:hover {
          overflow-y: auto;
          & > .icon-item{
            animation-play-state: paused;
            animation: move1 2s linear;
          }
        }
        .icon-item{
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 3px;
          animation: move 10s linear infinite;
          
          .level-text{
            position: absolute;
            top: 51px;
            right: 25px;
            color: #fff;
            font-family: 'douyuFont';
            font-size: 12px;
          }
          .level-text-1{
            color: rgb(0, 242, 255);
            text-shadow: 2px 2px 4px #001c22;
          }
          .level-text-2{
            color: #ffff35;
            text-shadow: 2px 2px 4px #313100;
          }
          .level-text-3{
            color: #ffbe69;
            text-shadow: 2px 2px 4px #271600;
          }
          .level-text-4{
            color: #ff6f00;
            // color: #09caff;
            text-shadow: 2px 2px 4px #060200;
          }
          .level-text-5{
            color: #ff0000;
            text-shadow: 2px 2px 4px #200000;
          }
          img{
            width: 227px;
            height: 79px;
          }
        }
        .wrapper {
          position: absolute;
          top: 48px;
          left: 82px;
          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{
      width: calc(100% - 710px);
      // background-color: #ffffff10;
      margin: 0 8px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .fire-monitor{
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
        .top{
          width: 100%;
          height: 35px;
          background: url('/@/assets/images/vent/box-top-bg.png');
          background-size: 100% 100%;
          text-align: center;
          color: #fff;
          padding-top: 6px;
        }
        .container{
          width: calc(100% - 2px);
          min-height: 50px;
          padding: 0 10px;
          color: #fff;
          background-color: #00213236;
          backdrop-filter: blur(5px);

          &::before{
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: 0;
            width: 1px;
            height: calc(100% - 10px);
            background-image: linear-gradient(#3DF6FF00, #3DF6FF, #3DF6FF00);
          }
          &::after{
            content: '';
            display: block;
            position: absolute;
            right: 0;
            top: 5px;
            width: 1px;
            height: calc(100% - 10px);
            background: linear-gradient(#3DF6FF00, #3DF6FF, #3DF6FF00);
          }
          .item{
            height: 130px;
            width: 100%;
            position: relative;
            top: -10px;
            display: flex;
            // justify-content: space-between;
            align-content: center;
            padding-top: 50px;
            &::before{
              content: '';
              width: 100%;
              height: 150px;
              position: absolute;
              top: 0px;
              background: url('/@/assets/images/vent/fire-bg-top.png');
              background-size: 100% 100%;
            }
            .icon{
              width: 82px;
              height: 36px;
              margin: 0 20px 0 50px;
              background: url('/@/assets/images/vent/icon-bottom-bg.png');
              position: relative;
              top: 30px;
              &::after{
                position: absolute;
                content: '';
                width: 50px;
                height: 50px;
                top: -25px;
                left: 20px;
                background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
              }
            }
            .data-box{
              display: flex;
              flex-direction: column;
              // margin: 0 10px;
              width: 118px;
              .value{
                font-size: 16px;
                font-family: 'douyuFont';
                color: #2bdcff;
                margin-bottom: 5px;
              }
              .title{
                font-size: 13px;
              }
            }
          }
          .item1{
            top: -10px;
            &::before{
              transform:matrix(1,0,0,-1,0,0);
            }
            .icon{
              &::after{
                background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
              }
            }
          }
        }
        .bottom{
          width: 100%;
          height: 35px;
          background: url('/@/assets/images/vent/box-bottom-bg.png');
          background-size: 100% 100%;
          position: absolute;
          bottom: 0;
        }
      }
      .animation-box{
        height: fit-content;
        flex: 1;
        margin-bottom: 10px;
        background: url('/@/assets/images/vent/alarm/center-bg.png');
        background-size: contain;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: 45px;
        .rain{
          position: absolute;
        }
        .bottom{
          width: 528px;
          height: 395px;
          background-repeat: no-repeat;
          position: absolute;
          z-index: 999;
          &::before{
            content: '';
            width: 325px;
            height: 379px;
            position: absolute;
            left: 105px;
            top: -60px;
            background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
          }
          .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: #fff;
            align-items: center;
            margin-top: 90px;
            .text1{
              font-size: 26px;
              font-weight: 600;
              letter-spacing: 2px;
              margin-bottom: 10px;
            }
            .text2{
              font-size: 18px;
              color: #ffffffdd;
            }
          }

          .icon-animation{
            width: 178px;
            height: 208px;
            margin: 0 auto;
            top: -130px;
            left: 4px;
            position: relative;
            animation: .5s linear 0s infinite alternate iconMove;
          }
        }
        .bottom1{
          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
          .icon-animation{
            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
          }
          .text-box{
            .text1{
              color: #00d8ff;
            }
          }
        }
        .bottom2{
          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
          .icon-animation{
            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
          }
          .text-box{
            .text1{
              color: #FCFC22;
            }
          }
        }
        .bottom3{
          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
          .icon-animation{
            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
          }
          .text-box{
            .text1{
              color: #ff7010;
            }
          }
        }
        .bottom4{
          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
          .icon-animation{
            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
          }
          .text-box{
            .text1{
              color: #DF4E43;
            }
          }
        }
        .bottom5{
          background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
          .icon-animation{
            background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
          }
          .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: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
          background-size: contain;
          
          &::after{
            content: '';
            width: 750px;
            height: 750px;
            position: absolute;
            transform-style: preserve-3d;
            transform: translateX(0%) translateY(0%) rotateX(72deg);
            background: url('/@/assets/images/vent/alarm/bottom.png');
            animation: rotate1 3s linear infinite;
            top: -200px;
            left: -180px;
          }
          .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: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
              }
              &::after{
                position: absolute;
                content: '';
                width: 71px;
                height: 71px;
                top: 26px;
                left: 14px;
                z-index: 1;
                background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
                transform: translateX(0%) rotateX(70deg);
                animation: rotate2 2s linear infinite;
              }
              .icon{
                width: 100px;
                height: 100px;
                background-repeat: no-repeat;
                background-position: top center;
                position: relative;
                top: 5px;
              }
            }
            .item-monitor-box{
              color: #fff;
              position: relative;
              top: -135px;
              left: -20px;
              font-weight: 600;
              // background: #06020066;
              padding: 5px 20px 8px 20px;
              &::before{
                position: absolute;
                content: '';
                width: 196px;
                height: 48px;
                left: -20px;
                top: -10px;
                background: url('/@/assets/images/vent/alarm/data-bg.png');
              }
              .value{
                color: #2bdcff;
                margin-left: 20px;
              }
              .value1{
                font-size: 16px;
                font-weight: 800;
                margin-top: 6px;
                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: url('/@/assets/images/vent/alarm/icon-fire.svg');
            }
          }
          .item2{
            top: 185px;
            left: -120px;
            .icon{
              background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
            }
          }
          .item3{
            top: 185px;
            left: 420px;
            .icon{
              background-image: url('/@/assets/images/vent/alarm/icon-gas.svg') ;
            }
            .item-monitor-box{
              top: -155px;
              &::before{
                top: 10px;
              }
            }
          }
          .item4{
            top: 20px;
            left: 390px;
            .icon{
              background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
            }
            
          }
          .item5{
            top: 25px;
            left: -110px;
            .icon{
              background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
            }
          }

        }

        @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: url('/@/assets/images/vent/value-bg.png');
          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: 100px;
            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: url('/@/assets/images/vent/plane.png') no-repeat;
              background-size: contain;
              background-position: bottom;
            }
            &::before{
              position: absolute;
              content: '';
              width: 136px;
              height: 101px;
              left: 35px;
              top: 15px;
              background: url('/@/assets/images/vent/small-bg1.png') no-repeat;
              background-size: cover;
            }
          }
          .detail-box{
            position: relative;
            margin:  0 auto;
            width: 184px;
            height: 270px;
            background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
            background-size: cover;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 50px 0 20px 0;
            &::after{
              position: absolute;
              content: '';
              left: -10px;
              bottom: -8px;
              width: 205px;
              height: 31px;
              background: url('/@/assets/images/vent/plane1.png') no-repeat;
              background-position: bottom;
            }
            .detail-item{
              width: 147px;
              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;
              .value{
                font-size: 16px;
                font-family: 'douyuFont';
                color: #2bdcff;
                text-align: center;
              }
            }
          }
        }
      }
    }

    .monitor-title{
      cursor: pointer;
    }
  }
  

  
</style>