vent-template/src/views/vent/monitorManager/nitrogenMonitor/model-tip.vue

<template>
  <div class="model-tip">
    <div>
      <div class="model-name-zdj1">1#</div>
      <div class="model-name-zdj2">2#</div>
      <div class="model-name-zdj3">3#</div>
      <!-- 累计流量 -->
      <div class="zdj-ll">
        <div class="cq-zdj-item">
          <span class="text-label">累计流量(Nm³)：</span>
          <span class="text-val">{{ statusData.Fan1ljll }}</span>
        </div>
      </div>
      <div class="zdj-ll1">
        <div class="cq-zdj-item">
          <span class="text-label">累计流量(Nm³)：</span>
          <span class="text-val">{{ statusData.Fan2ljll }}</span>
        </div>
      </div>
      <!-- 加热器温度 -->
      <div class="jrq1">
        <div class="cq-zdj-item">
          <span class="text-label">加热器</span>
          <span class="text-val">{{ statusData.Fan1jrqTemp }}℃</span>
        </div>
      </div>
      <div class="jrq2">
        <div class="cq-zdj-item">
          <span class="text-val">{{ statusData.Fan2jrqTemp }}℃</span>
        </div>
      </div>
      <!-- 滤芯 -->
      <div class="filter">
        <div class="cq-zdj-item">
          <span class="text-label">滤芯1</span>
          <span class="text-val">{{ statusData.Fan1lxyc }}MPa</span>
        </div>
      </div>
      <div class="filter2">
        <div class="cq-zdj-item">
          <span class="text-label">滤芯2</span>
          <span class="text-val">{{ statusData.Fan2lxyc }}MPa</span>
        </div>
      </div>
      <!-- 活性炭 -->
      <div class="hxt1">
        <span class="text-label">活性炭</span>
      </div>
      <div class="hxt2">
        <span class="text-label">活性炭</span>
      </div>
      <!-- 上方浓度  流量  氮气压力  氮气温度 -->
      <div class="nd1">
        <span class="text-label">浓度</span>
        <span class="text-val">{{ statusData.Fan1dqnd }}%</span>
      </div>
      <div class="ll1">
        <span class="text-label">流量</span>
        <span class="text-val">{{ statusData.Fan1ll }}Nm³/h</span>
      </div>
      <div class="dqyl1">
        <span class="text-label">氮气压力</span>
        <span class="text-val">{{ statusData.Fan1dqyl }}MPa</span>
      </div>
      <div class="dqwd1">
        <span class="text-label">氮气温度</span>
        <span class="text-val">{{ statusData.Fan1dqwd }}℃</span>
      </div>
      <!-- 底部浓度  流量  氮气压力  氮气温度 -->
      <div class="nd">
        <span class="text-label">浓度</span>
        <span class="text-val">{{ statusData.Fan2dqnd }}%</span>
      </div>
      <div class="ll">
        <span class="text-label">流量</span>
        <span class="text-val">{{ statusData.Fan2ll }}Nm³/h</span>
      </div>
      <div class="dqyl">
        <span class="text-label">氮气压力</span>
        <span class="text-val">{{ statusData.Fan2dqyl }}MPa</span>
      </div>
      <div class="dqwd">
        <span class="text-label">氮气温度</span>
        <span class="text-val">{{ statusData.Fan2dqwd }}℃</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let props = defineProps({
  statusData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
</script>

<style lang="less" scoped>
.model-tip {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('/@/assets/images/home-container/configurable/ZhiDan_Ts.png');
  background-repeat: no-repeat;
  background-size: 58%;
  background-position: 50% 30%;

  .model-name-zdj1 {
    position: absolute;
    left: 26%;
    top: 17%;
    color: yellow;
    font-size: 16px;
  }
  .model-name-zdj2 {
    position: absolute;
    left: 26%;
    top: 30%;
    color: yellow;
    font-size: 16px;
  }
  .model-name-zdj3 {
    position: absolute;
    left: 26%;
    top: 47%;
    color: yellow;
    font-size: 16px;
  }
  .zdj-ll {
    position: absolute;
    left: 28%;
    top: 43%;
    color: #fff;
    font-size: 12px;
  }
  .zdj-ll1 {
    position: absolute;
    left: 28%;
    bottom: 38%;
    color: #fff;
    font-size: 12px;
  }
  .text-val {
    color: #00edfe;
    margin: 5px;
  }
  .jrq1 {
    position: absolute;
    right: 42%;
    top: 15%;
    color: #fff;
    font-size: 14px;
    .cq-zdj-item {
      display: flex;
      flex-direction: column;
    }
  }
  .jrq2 {
    position: absolute;
    right: 44%;
    bottom: 53%;
    color: #fff;
    font-size: 14px;
  }
  .filter {
    position: absolute;
    right: 47%;
    top: 21%;
    color: #fff;
    font-size: 12px;
    .cq-zdj-item {
      display: flex;
      flex-direction: column;
    }
  }
  .filter2 {
    position: absolute;
    right: 47%;
    top: 46%;
    color: #fff;
    font-size: 12px;
    .cq-zdj-item {
      display: flex;
      flex-direction: column;
    }
  }
  .nd {
    position: absolute;
    right: 47%;
    bottom: 34%;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  .ll {
    position: absolute;
    right: 37%;
    bottom: 34%;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  .dqyl {
    position: absolute;
    right: 28%;
    bottom: 34%;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  .dqwd {
    position: absolute;
    right: 24%;
    bottom: 34%;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  .nd1 {
    position: absolute;
    right: 47%;
    bottom: 56%;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  .ll1 {
    position: absolute;
    right: 37%;
    bottom: 56%;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  .dqyl1 {
    position: absolute;
    right: 28%;
    bottom: 56%;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  .dqwd1 {
    position: absolute;
    right: 24%;
    bottom: 56%;
    color: #fff;
    font-size: 12px;
    display: flex;
    flex-direction: column;
  }
  .hxt1 {
    position: absolute;
    right: 35%;
    top: 21%;
    color: #fff;
    font-size: 14px;
  }
  .hxt2 {
    position: absolute;
    right: 35%;
    bottom: 51%;
    color: #fff;
    font-size: 14px;
  }
}
</style>