vent-template/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" class="middata" :class="item.class">
      <div class="midnumberval">{{ item.value }}</div>
      <div class="infotext1">{{ item.label }}</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';
import { useGlobSetting } from '/@/hooks/setting';

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

const { sysOrgCode } = useGlobSetting();

const config = computed(() => {
  if (sysOrgCode === 'huainanzhangji') {
    return [
      {
        label: '总回风量(m³/min)',
        value: '${midinfo[0].sysdata.zonghuifeng}',
      },
      {
        label: '总进风量(m³/min)',
        value: '${midinfo[0].sysdata.zongjinfeng}',
      },
      {
        label: '有效风量率(%)',
        value: '${midinfo[0].sysinfo.useM3Perent}',
      },
    ];
  }
  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>
.midback-info {
  pointer-events: none;
}

.middata {
  // margin-top: 7px;
  padding: 5px 0px 5px 60px;
  width: 175px;
  height: 64px;
  // margin-top: 4px;
  // margin-left: 10px;
  // margin-bottom: 5px;
  background-size: 100% 100%;
  text-align: center;
}

.middata0 {
  .midnumberval {
    color: #e6ffee;
  }
  background: url('/@/assets/images/home-container/configurable/middata1.png');
}

.middata1 {
   .midnumberval {
    color: #d3f8ff;
  }
  background: url('/@/assets/images/home-container/configurable/middata2.png');
}

.middata2 {
   .midnumberval {
    color: #fffcd5;
  }
  background: url('/@/assets/images/home-container/configurable/middata3.png');
}

.middata3 {
   .midnumberval {
    color: #deeafe;
  }
  background: url('/@/assets/images/home-container/configurable/middata6.png');
}

.middata4 {
   .midnumberval {
    color: #f3e3ff;
  }
  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: 12px;
  // font-family: 'Microsoft YaHei', Arial;
  font-family: 'douyuFont';
}

.midback-info {
  background-image: url('/@/assets/images/home-container/configurable/middata_bg.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>