disinfection_high_front_end/src/components/info/EnvironmentInfo.vue

<template>
  <div class="environment_container">
    <div class="top_title">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="27.99883270263672"
        height="28"
        viewBox="0 0 27.99883270263672 28"
      >
        <g>
          <path
            d="M13.9988,0C6.26685,0,0,6.26801,0,14.0006C0,21.732,6.26685,28,13.9988,28C21.732,28,27.9988,21.7314,27.9988,14.0006C27.9988,6.26685,21.732,0,13.9988,0ZM13.33,2.65902L15.1101,2.65902L15.1101,6.15218L13.33,6.15218L13.33,2.65902ZM8.00499,9.19305L5.53515,6.72263L6.79364,5.46414L9.26348,7.93456L8.00499,9.19305ZM8.88395,3.93963L10.494,3.18872L11.9708,6.35358L10.359,7.10565L8.88395,3.93963ZM14.2439,24.2036C12.6961,24.2036,11.4428,22.9486,11.4428,21.4025C11.4428,20.1929,12.2083,19.1673,13.2823,18.7744L13.2823,10.7833L15.0606,10.7833L15.0606,18.722C16.2085,19.0706,17.0455,20.1382,17.0455,21.4031C17.0455,22.9486,15.7917,24.2036,14.2439,24.2036ZM16.3295,6.35009L17.8063,3.18407L19.4182,3.93672L17.9431,7.10274L16.3295,6.35009ZM20.2412,9.19305L18.9827,7.93456L21.4526,5.46414L22.7111,6.72263L20.2412,9.19305Z"
            fill="#FFFFFF"
            fill-opacity="1"
          />
        </g>
      </svg>
      <p class="title">{{ getTitle() }}</p>
    </div>
    <div class="content">
      <div class="line">
        <p class="title">温度</p>
        <div class="num">
          {{ getTemperature() }}
          <p class="unit">°C</p>
        </div>
      </div>
      <div class="line">
        <p class="title">相对湿度</p>
        <div class="num">
          {{ getHumidity() }}
          <p class="unit">{{ '%RH' }}</p>
        </div>
      </div>
      <div class="line">
        <p class="title">相对饱和度</p>
        <div class="num">
          {{ getSaturation() }}
          <p class="unit">{{ '%RS' }}</p>
        </div>
      </div>
      <div class="line">
        <p class="title">汽化过氧化氢浓度</p>
        <div class="num">
          {{ getHP() }}
          <p class="unit">ppm</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useDeviceStore } from '@/store'
import { storeToRefs } from 'pinia'

const deviceStore = useDeviceStore()
const {
  binTemperature,
  binHumidity,
  binHP,
  binSaturation,
  envirTemperature1,
  envirHumidity1,
  envirHP1,
  envirTemperature2,
  envirHumidity2,
  envirHP2,
} = storeToRefs(deviceStore)
const props = defineProps({
  cardType: {
    type: Number,
  },
})

const getTitle = () => {
  if (props.cardType == 1) {
    return '仓内'
  }
  if (props.cardType == 2) {
    return '环境1'
  }
  if (props.cardType == 3) {
    return '环境2'
  }
  return ''
}

const getTemperature = () => {
  if (props.cardType == 1) {
    return binTemperature
  }
  if (props.cardType == 2) {
    return envirTemperature1
  }
  if (props.cardType == 3) {
    return envirTemperature2
  }
}

const getHumidity = () => {
  if (props.cardType == 1) {
    return binHumidity
  }
  if (props.cardType == 2) {
    return envirHumidity1
  }
  if (props.cardType == 3) {
    return envirHumidity2
  }
}

const getHP = () => {
  if (props.cardType == 1) {
    return binHP
  }
  if (props.cardType == 2) {
    return envirHP1
  }
  if (props.cardType == 3) {
    return envirHP2
  }
}

const getSaturation = () => {
  if (props.cardType == 1) {
    return binSaturation
  }
  if (props.cardType == 2) {
    return 0
  }
  if (props.cardType == 3) {
    return 0
  }
}
</script>

<style lang="scss" scoped>
.environment_container {
  width: 353px;
  height: 225px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 17.5px;
  .top_title {
    padding: 15px 16px;
    display: flex;
    align-items: center;
    .title {
      font-family: Source Han Sans CN;
      font-size: 24px;
      font-weight: 500;
      letter-spacing: 0.1em;
      margin-left: 8px;
      color: #ffffff;
    }
  }
  .content {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    .line {
      padding: 11px 13px 11px 26px;
      width: 353px;
      // height: 56px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:nth-child(odd) {
        background: #1f6397;
      }
      .title {
        font-family: Source Han Sans CN;
        font-size: 16px;
        font-weight: normal;
        letter-spacing: 0.06em;
        color: #ffffff;
      }
      .num {
        font-family: Source Han Sans CN;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0.06em;
        color: #ffffff;
        display: flex;
        align-items: center;
        .unit {
          width: 60px;
          margin-left: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>