disinfector_vue/src/components/home/Environment.vue

<script lang="ts" setup>
import homeInside from 'assets/images/home/home-inside.svg'
import homeProbe1 from 'assets/images/home/home-probe1.svg'
import homeProbe2 from 'assets/images/home/home-probe2.svg'
import { roundNumber } from 'libs/utils'
import { onMounted } from 'vue'

defineProps({
  envParams: {
    type: Object,
    default: () => {},
  },
  lineColor: {
    type: String,
    default: 'red',
  },
})

const imgs: Record<string, any> = {
  inside: homeInside,
  env1: homeProbe1,
  env2: homeProbe2,
}
onMounted(() => {
})
</script>

<template>
  <div class="title">
    <img :src="imgs[envParams.type]"> {{ envParams.title }}
  </div>
  <div class="env-row odd">
    <div class="env-row-label ">
      温度
    </div>
    <div class="env-row-value ">
      {{ roundNumber(envParams.temp || 0, 2) }}°C
    </div>
  </div>
  <div class="env-row">
    <div class="env-row-label ">
      相对湿度
    </div>
    <div class="env-row-value">
      {{ roundNumber(envParams.rh || 0, 2) }}%RH
    </div>
  </div>
  <div class="env-row odd">
    <div class="env-row-label ">
      相对饱和度
    </div>
    <div class="env-row-value ">
      {{ roundNumber(envParams.rs || 0, 2) }}%RS
    </div>
  </div>
  <div class="env-row">
    <div class="env-row-label ">
      汽化过氧化氢
    </div>
    <div class="env-row-value ">
      {{ roundNumber(envParams.h2o2 || 0, 2) }}ppm
    </div>
  </div>
</template>

<style lang="scss" scoped>
  div{
    font-family: 思源黑体;
    font-size: 18px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.06em;
  }
  .title{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    padding: 1rem;
  }
  .title-line{
    height: 1vw;
    position: absolute;
    width: 100%;
    border-radius: 10px 10px 0 0;
    margin: -2.12rem;
  }
  .env-row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 7.8vh;
    padding: 7px;
    .env-row-label{
      display: flex;
      align-items: center;
      justify-self: start;
      justify-content: center;
      padding-left: 10px;
    }
    .env-row-value{
      display: flex;
      align-items: center;
      justify-self: end;
      justify-content: center;
      padding-right: 10px;
    }
  }
  .odd {
    background: rgba(139, 190, 239, 0.2);
  }
</style>