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.
111 lines
2.3 KiB
111 lines
2.3 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'
|
|
|
|
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>
|