mky-vent-base/src/views/vent/gas/gasZk/index.vue

<template>
  <div class="gasMonitor">
    <customHeader>瓦斯钻孔实时监测</customHeader>
    <div class="content">
      <div class="left-box">
        <div class="video">
          <video controls autoplay muted loop fluent style="height: 100%; width: 100%; padding: 30px 20px">
            <source :src="`${baseApiUrl}/sys/common/static/gif/output_video.mp4`" type="video/mp4" />
          </video>
        </div>
      </div>
      <div class="right-box">
        <div class="count">
          <div class="icon"></div>
          <div class="count-content">
            <span class="conten">{{ usedCount }}</span>
            <span>钻孔计数</span>
          </div>
        </div>
        <div class="status">
          <div class="icon"></div>
          <div class="status-content">
            <span class="conten">{{ curStatus }}</span>
            <span>钻杆状态</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import { getVideoPlayTime, getGasZkStatus } from './gasZk.api';
  import customHeader from '/@/components/vent/customHeader.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  const globSetting = useGlobSetting();
  const baseApiUrl = globSetting.domainUrl;
  const videoPlayTime = ref(0); //视频开始播放时间
  const curStatus = ref(''); //当前状态
  const usedCount = ref(''); //钻孔计数
  const videoUrl = ref('');
  let timer: IntervalHandle; //定时器
  //时间轮询
  const startPolling = () => {
    // 清除定时器
    stopPolling();
    // 设置新定时器
    timer = setInterval(async () => {
      try {
        const res = await getGasZkStatus({
          playTime: videoPlayTime.value,
        });
        // 更新数据
        usedCount.value = res.usedCount;
        curStatus.value = res.curStatus;
        startPolling();
      } catch (error) {
        console.error('请求失败，停止轮询', error);
        stopPolling();
      }
    }, 1000);
  };

  // 停止轮询 清除定时器
  const stopPolling = () => {
    if (timer !== null) {
      clearInterval(timer);
      timer = null;
    }
  };

  onMounted(async () => {
    try {
      videoPlayTime.value = await getVideoPlayTime();
      // 第一次请求
      const res = await getGasZkStatus({
        playTime: videoPlayTime.value,
      });
      usedCount.value = res.usedCount;
      curStatus.value = res.curStatus;
      // 启动轮询
      startPolling();
    } catch (error) {
      console.error('初始化失败', error);
    }
  });

  // 组件卸载时清理
  onUnmounted(() => {
    stopPolling();
  });
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  @{theme-deepblue} {
    .gasMonitor {
      --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
    }
  }

  .gasMonitor {
    --image-border: url('/@/assets/images/fire/border.png');
    position: relative;
    width: calc(100% - 20px);
    height: calc(100% - 90px);
    position: relative;
    margin: 30px 10px 10px 10px;

    .content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 80px;
      .left-box {
        flex: 3;
        height: 100%;
        padding: 10px;
        background: var(--image-border) no-repeat center;
        background-size: 100% 100%;
        .video {
          height: 100%;
        }
      }
      .right-box {
        flex: 1;
        margin-left: 30px;
        height: 100%;
        background: var(--image-border) no-repeat center;
        background-size: 100% 100%;
        .count {
          margin: 30px;
          height: 200px;
          padding: 0 20px;
          display: flex;
          flex-direction: row;
          align-items: center;
          background-image: url('/@/assets/images/vent/gas/gasZkBorder.png');
          background-size: 100% 100%;
          .icon {
            margin-bottom: 20px;
            width: 35%;
            height: 65%;
            background-image: url('/@/assets/images/vent/gas/zkcount.png');
            background-size: 100% 100%;
            margin-left: 10px;
          }
          .count-content {
            display: flex;
            flex-direction: column;
            font-size: 20px;
            color: #fff;
            margin-left: 25px;
            .conten {
              font-weight: bold;
              margin-bottom: 20px;
              color: #27fded;
              font-style: italic;
            }
          }
        }
        .status {
          margin: 30px;
          padding: 0 20px;
          height: 200px;
          display: flex;
          flex-direction: row;
          align-items: center;
          background-image: url('/@/assets/images/vent/gas/gasZkBorder.png');
          background-size: 100% 100%;
          .icon {
            margin-bottom: 20px;
            width: 35%;
            height: 65%;
            background-image: url('/@/assets/images/vent/gas/zgStatus.png');
            background-size: 100% 100%;
            margin-left: 10px;
          }
          .status-content {
            display: flex;
            flex-direction: column;
            font-size: 20px;
            color: #fff;
            margin-left: 25px;
            .conten {
              margin-bottom: 20px;
              font-weight: bold;
              color: #27fded;
              font-style: italic;
            }
          }
        }
      }
    }
  }
</style>