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.
201 lines
4.8 KiB
201 lines
4.8 KiB
<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>
|