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'

/**
 * 环境参数展示组件
 * @description 用于展示仓内或探头的环境数据（温度、湿度、过氧化氢浓度等）
 * @props {object} envParams - 环境参数对象
 * @props {string} lineColor - 线条颜色（默认值：red）
 */
defineProps({
  envParams: {
    type: Object,
    default: () => ({
      type: 'inside', // 环境类型（inside/env1/env2）
      title: '仓内', // 环境名称
      temp: 0, // 温度
      rh: 0, // 相对湿度
      rs: 0, // 相对饱和度
      h2o2: 0, // 过氧化氢浓度
    }),
  },
  lineColor: {
    type: String,
    default: 'red',
  },
})

/**
 * 图片资源映射对象
 * @type {Record<string, any>}
 * @property {string} inside - 仓内图标路径
 * @property {string} env1 - 探头1图标路径
 * @property {string} env2 - 探头2图标路径
 */
const imgs: Record<string, any> = {
  inside: homeInside,
  env1: homeProbe1,
  env2: homeProbe2,
}

/**
 * @hook 生命周期钩子 - 组件挂载完成时执行
 * @description 可在此处添加初始化逻辑（当前为空实现）
 */
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>