gasInjection-project/src/views/vent/gas/gasAssessment/components/gasVideo.vue

<template>
  <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
  <div class="monitor-container">
    <transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft">
      <div class="lr left-box" v-if="loading">
        <template v-for="unitIndex in unitNum" :key="unitIndex">
          <ventBox1 v-if="unitIndex < 4" class="vent-margin-t-10">
            <template #title>
              <div>视频{{ unitIndex }}</div>
            </template>
            <template #container>
              <div class="video-box"></div>
            </template>
          </ventBox1>
        </template>
      </div>
    </transition>
    <transition enter-active-class="animate__animated  animate__fadeInRight" leave-active-class="animate__animated  animate__fadeInRight">
      <div class="lr right-box" v-if="loading">
        <template v-for="unitIndex in unitNum" :key="unitIndex">
          <ventBox1 v-if="unitIndex >= 4" class="vent-margin-t-10">
            <template #title>
              <div>视频{{ unitIndex }}</div>
            </template>
            <template #container>
              <div class="video-box"></div>
            </template>
          </ventBox1>
        </template>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import CustomBadges from './customHeader.vue';
  import { gasUnitOption, headerBadges, mockGasUnitData, gasUnitBarOption, mockData, gasUnitPieOption, mockPieData } from '../gasAssessment.data';
  const loading = ref(false);
  const dataSource = ref({});
  const unitNum = ref(5);
  // // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(
        async () => {
          if (timer) {
            timer = null;
          }
          await getMonitor();
          // loading.value = false;
        },
        flag ? 0 : 1000
      );
    }
  }

  onMounted(async () => {
    timer = null;
    await getMonitor(true);
    loading.value = true;
  });
</script>

<style lang="less" scoped>
  @ventSpace: zxm;
  @import '/@/design/vent/modal.less';
  @import '@/views/vent/monitorManager/comment/less/workFace.less';
  .monitor-container {
    height: 850px;
    pointer-events: none;
  }

  .left-box,
  .right-box {
    width: 380px !important;
  }
  .video-box {
    height: 200px;
  }
</style>