mky-vent-base/src/views/vent/home/clique/components/mine-wind.vue

<template>
  <div class="mineWind">
    <div class="mine-title">{{ mineTitle }}</div>
    <div class="mine-content">
      <div class="content-label">
        <div class="label-t" v-for="(ite, ind) in labelList" :key="ind">{{ ite.name }}</div>
      </div>
      <div class="content-text">
        <div class="text" v-for="(item, index) in mineData" :key="index">
          <span>{{ item.deviceName }}</span>
          <span>{{ filterBadValue(item.jf) }}</span>
          <span>{{ filterBadValue(item.hf) }}</span>
          <span>{{ filterBadValue(item.xf) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, defineProps } from 'vue';

  let props = defineProps({
    airKjStatus: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });
  let mineTitle = ref('矿井通风状态监测');
  let labelList = reactive([{ name: '矿井名称' }, { name: '总进风量' }, { name: '总回风量' }, { name: '总需风量' }]);
  let mineData = ref<any[]>([]);

  // 过滤不合法的值，小于5000的视为传感器出错
  function filterBadValue(val: number | string) {
    const valid = parseInt(val) > 5000;
    return valid ? val : '/';
  }

  watch(
    () => props.airKjStatus,
    (newA, oldA) => {
      console.log(newA, 'airKjStatus-----------');
      if (newA.length != 0) {
        mineData.value = newA;
      }
    },
    {
      immediate: true,
      deep: true,
    }
  );
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .mineWind {
    position: relative;
    width: 100%;
    height: 100%;

    .mine-title {
      position: absolute;
      left: 50px;
      top: 12px;
      color: #fff;
      font-family: 'douyuFont';
      font-size: 14px;
    }

    .mine-content {
      height: 100%;
      padding: 62px 0px 28px 0px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;

      .content-label {
        width: 366px;
        height: 32px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url('../../../../../assets/images/company/content-label.png') no-repeat;
        .label-t {
          color: #3df6ff;
          text-align: center;
          font-size: 14px;
          &:nth-child(1) {
            width: 31%;
          }
          &:nth-child(2) {
            width: 23%;
          }
          &:nth-child(3) {
            width: 23%;
          }
          &:nth-child(4) {
            width: 23%;
          }
        }
      }

      .content-text {
        height: calc(100% - 32px);
        width: 378px;
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        justify-content: flex-start;
        padding: 5px 0px;
        box-sizing: border-box;
        overflow-y: auto;
        .text {
          width: 100%;
          height: 28px;
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          background: url('../../../../../assets/images/company/content-text.png') no-repeat;
          color: #fff;
          margin-bottom: 5px;
          span {
            display: inline-block;
            text-align: center;
            &:nth-child(1) {
              width: 31%;
            }
            &:nth-child(2) {
              width: 23%;
            }
            &:nth-child(3) {
              width: 23%;
            }
            &:nth-child(4) {
              width: 23%;
            }
          }
        }
      }
    }
  }
</style>