mky-vent-base/src/views/vent/home/configurable/components/MonitorBar.vue

<template>
  <a-row class="midback-info" :gutter="5">
    <div v-for="item in computedConfig" :key="item.class" style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
      <div class="middata" :class="item.class">
        <div class="midnumberval">{{ item.value }}</div>
        <div class="infotext1">{{ item.label }}</div>
      </div>
    </div>
    <!-- <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
      <div class="middata middata2">
        <div class="midnumberval">{{ '123' }}</div>
        <div class="infotext1">总进风量(m³/min)</div>
      </div>
    </div>
    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
      <div class="middata middata3">
        <div class="midnumberval">{{ '123' }}</div>
        <div class="infotext1">计划风量(m³/min)</div>
      </div>
    </div>
    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
      <div class="middata middata4">
        <div class="midnumberval">{{ '123' }}</div>
        <div class="infotext1">通风巷道长度(万m)</div>
      </div>
    </div>
    <div style="width: 17%; margin-left: 1%; margin-right: 2%; float: left">
      <div class="middata middata6">
        <div class="midnumberval">{{ '123' }}%</div>
        <div class="infotext1">有效风量率</div>
      </div>
    </div> -->
  </a-row>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { getFormattedText } from '../hooks/helper';

  const props = defineProps<{
    isDataRealTime: boolean;
    data: any;
  }>();

  const config = computed(() => {
    if (props.isDataRealTime) {
      return [
        {
          label: '总回风量(m³/min)',
          value: '${midinfo[0].sysdata.zonghuifeng}',
        },
        {
          label: '总进风量(m³/min)',
          value: '${midinfo[0].sysdata.zongjinfeng}',
        },
        {
          label: '计划风量(m³/min)',
          value: '${midinfo[0].sysdata.xufengliang}',
        },
        {
          label: '通风巷道长度(m)',
          // value: '223196',
          value: '${midinfo[0].sysinfo.totallength}',
        },
        {
          label: '有效风量率(%)',
          value: '${midinfo[0].sysinfo.useM3Perent}',
        },
      ];
    } else {
      return [
        {
          label: '总回风量(m³/min)',
          value: '${midinfo[0].sysinfo.info.totalRetM3}',
        },
        {
          label: '总进风量(m³/min)',
          value: '${midinfo[0].sysinfo.info.totalIntM3}',
        },
        {
          label: '计划风量(m³/min)',
          value: '${midinfo[0].sysinfo.info.totalPlanM3}',
        },
        {
          label: '通风巷道长度(万m)',
          value: '${midinfo[0].sysinfo.info.flength}',
        },
        {
          label: '有效风量率(%)',
          value: '${midinfo[0].sysinfo.info.useM3Perent}',
        },
      ];
    }
  });

  const computedConfig = computed(() => {
    const data = props.data;
    return config.value.map((e, i) => {
      return {
        label: getFormattedText(data, e.label),
        value: getFormattedText(data, e.value),
        class: `middata${i}`,
      };
    });
  });
</script>
<style lang="less" scoped>
  .middata {
    // margin-top: 7px;
    padding: 5px 0px 5px 50px;
    width: calc(100% - 10px);
    height: 65px;
    margin-top: 4px;
    margin-left: 10px;
    margin-bottom: 5px;
    background-size: 100% 100%;
  }
  .middata0 {
    background: url('/@/assets/images/home-container/configurable/middata1.png');
  }
  .middata1 {
    background: url('/@/assets/images/home-container/configurable/middata2.png');
  }
  .middata2 {
    background: url('/@/assets/images/home-container/configurable/middata3.png');
  }
  .middata3 {
    background: url('/@/assets/images/home-container/configurable/middata6.png');
  }
  .middata4 {
    background: url('/@/assets/images/home-container/configurable/middata5.png');
  }
  .middata5 {
    background: url('/@/assets/images/home-container/configurable/middata4.png');
  }
  .midnumberval {
    z-index: 4;
    padding-top: -10px;
    // position: absolute;
    // top: -6px;
    text-align: center;
    font-weight: 600;
    color: #f6ca0e;
    font-size: 18px;
    font-family: 'Microsoft YaHei', Arial;
    // font-family: 'UnidreamLED';
  }
</style>