You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.1 KiB
137 lines
3.1 KiB
<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>
|