vent-forewarn-micro/src/views/vent/fire/fireZhud/index.vue

<template>
  <div class="fireZhud">
    <div class="zhud-content">
      <div class="content-item" v-for="(item, index) in contentList" :key="index">
        <div class="card-item">
          <span class="card-label">设备名称 : </span>
          <span class="card-text">{{ item.deviceName || '--' }}</span>
        </div>
        <div class="card-item">
          <span class="card-label">额定注氮压力(Mpa) : </span>
          <span class="card-text">{{ item.injectionPressure || '--' }}</span>
        </div>
        <div class="card-item">
          <span class="card-label">额定注氮流量(m3/h) : </span>
          <span class="card-text">{{ item.injectionFlow || '--' }}</span>
        </div>
        <div class="card-item">
          <span class="card-label">额定氮气浓度(%) : </span>
          <span class="card-text">{{ item.injectionConsistence || '--' }}</span>
        </div>
        <div class="card-item">
          <span class="card-label">设备型号 : </span>
          <span class="card-text">{{ item.modelCode || '--' }}</span>
        </div>
        <div class="card-item">
          <span class="card-label">额定电流 : </span>
          <span class="card-text">{{ item.current || '--' }}</span>
        </div>
        <div class="card-item">
          <span class="card-label">额定电压 : </span>
          <span class="card-text">{{ item.voltage || '--' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { getRealData } from './fireZhud.api'

let contentList = reactive<any[]>([])

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor() {
  timer = setTimeout(
    async () => {
      //智能注氮
      await getRealDataList()
      if (timer) {
        timer = null;
      }
      getMonitor();
    },
    5000
  );
}

async function getRealDataList() {
  let res = await getRealData({ type: 'FireZhuD' })
  console.log(res, '智能注氮数据----------')
  if (res.length != 0) {
    contentList.length = 0
    res.forEach(el => {
      contentList.push(el)
    })
  }
}

onMounted(() => {
  getRealDataList()
  getMonitor()
})
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
});

</script>

<style lang="less" scoped>
.fireZhud {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: calc(100% - 20px);
  // height: calc(100vh - 82px);
  height: 880px;
  margin: 0 10px;
  background: #282828;

  .zhud-content {
    position: relative;
    width: 1566px;
    height: 100%;
    background: url('../../../../assets/images/fire/zhud-t.png') no-repeat center;
    background-size: 100% 100%;

    .content-item {
      box-sizing: border-box;
      padding: 10px;

      &:nth-child(1) {
        position: absolute;
        top: 0;
        right: 280px;
      }

      &:nth-child(2) {
        position: absolute;
        top: 35px;
        right: 530px;
      }

      .card-item {
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        width: 209px;
        height: 37px;
        padding: 0 10px;
        background: url('../../../../assets/images/fire/zhud-card.png') no-repeat center;
        background-size: 100% 100%;

        .card-label {
          color: #fff;
          font-size: 14px;
        }

        .card-text {
          color: #dbca20;
          font-size: 14px;
        }
      }

    }
  }

}
</style>