LiLongLong
/
disinfector_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 传感器优化

master
guoapeng 2 weeks ago
parent
d772d4eac5
commit
9dd293c113
2 changed files with 192 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      src/components/home/Environment.vue
  2. 189
      src/views/home/index.vue

108
src/components/home/Environment.vue
View File

@ -11,7 +11,7 @@ import { onMounted } from 'vue'
* @props {object} envParams - 环境参数对象 * @props {object} envParams - 环境参数对象
* @props {string} lineColor - 线条颜色（默认值：red） * @props {string} lineColor - 线条颜色（默认值：red）
*/ */
defineProps({
const props = defineProps({
envParams: { envParams: {
type: Object, type: Object,
default: () => ({ default: () => ({
@ -28,6 +28,7 @@ defineProps({
default: 'red', default: 'red',
}, },
}) })
console.log(props.envParams)
/** /**
* 图片资源映射对象 * 图片资源映射对象
@ -37,9 +38,15 @@ defineProps({
* @property {string} env2 - 探头2图标路径 * @property {string} env2 - 探头2图标路径
*/ */
const imgs: Record<string, any> = { const imgs: Record<string, any> = {
inside: homeInside,
env1: homeProbe1,
env2: homeProbe2,
Internal: homeInside,
WiredExtSensor: homeProbe1,
WirelessExtSensor: homeProbe2,
}
const titles = {
Internal: '仓内',
WiredExtSensor: '外接传感器',
WirelessExtSensor: '无线传感器',
} }
/** /**
@ -52,47 +59,57 @@ onMounted(() => {
</script> </script>
<template> <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">
{{ !envParams.temp || envParams.temp === -1 ? '--' : roundNumber(envParams.temp, 2) }}°C
<div class="box">
<div class="title">
<img :src="imgs[envParams.type] || homeInside"> {{ titles[envParams.type] }}
</div> </div>
</div>
<div class="env-row">
<div class="env-row-label">
相对湿度
</div>
<div class="env-row-value">
{{ !envParams.rh || envParams.rh === -1 ? '--' : roundNumber(envParams.rh, 2) }}%RH
</div>
</div>
<div class="env-row odd">
<div class="env-row-label">
相对饱和度
</div>
<div class="env-row-value">
{{ !envParams.rs || envParams.rs === -1 ? '--' : roundNumber(envParams.rs, 2) }}%RS
</div>
</div>
<div class="env-row">
<div class="env-row-label">
汽化过氧化氢
</div>
<div class="env-row-value">
{{ !envParams.h2o2 || envParams.h2o2 === -1 ? '--' : roundNumber(envParams.h2o2, 2) }}ppm
<div style="display: flex; flex-direction: column; justify-content: flex-end">
<div class="env-row odd">
<div class="env-row-label">
温度
</div>
<div class="env-row-value">
{{ !envParams.temp || envParams.temp === -1 ? '--' : roundNumber(envParams.temp, 2) }}°C
</div>
</div>
<div class="env-row">
<div class="env-row-label">
相对湿度
</div>
<div class="env-row-value">
{{ !envParams.rh || envParams.rh === -1 ? '--' : roundNumber(envParams.rh, 2) }}%RH
</div>
</div>
<div class="env-row odd">
<div class="env-row-label">
相对饱和度
</div>
<div class="env-row-value">
{{ !envParams.rs || envParams.rs === -1 ? '--' : roundNumber(envParams.rs, 2) }}%RS
</div>
</div>
<div class="env-row">
<div class="env-row-label">
汽化过氧化氢
</div>
<div class="env-row-value">
{{ !envParams.h2o2 || envParams.h2o2 === -1 ? '--' : roundNumber(envParams.h2o2, 2) }}ppm
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.box {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 0;
}
div { div {
//font-family: 思源黑体;
font-size: 18px;
font-size: 15px;
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
letter-spacing: 0.06em; letter-spacing: 0.06em;
@ -101,21 +118,14 @@ div {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
font-size: 26px;
padding: 1rem;
}
.title-line {
height: 1vw;
position: absolute;
width: 100%;
border-radius: 10px 10px 0 0;
margin: -2.12rem;
font-size: 20px;
padding: 10px;
} }
.env-row { .env-row {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
height: 7.8vh;
padding: 7px;
//height: 7.8vh;
padding: 10px;
.env-row-label { .env-row-label {
display: flex; display: flex;
align-items: center; align-items: center;

189
src/views/home/index.vue
View File

@ -8,7 +8,7 @@ import HomeSetting from 'components/home/HomeSetting.vue'
import { useDeviceStore } from 'stores/deviceStore' import { useDeviceStore } from 'stores/deviceStore'
import { useHomeStore } from 'stores/homeStore' import { useHomeStore } from 'stores/homeStore'
import { useLiquidStore } from 'stores/liquidStore' import { useLiquidStore } from 'stores/liquidStore'
import { computed, ref, watchEffect } from 'vue'
import { computed, onMounted, ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { roundNumber } from '@/libs/utils' import { roundNumber } from '@/libs/utils'
@ -22,54 +22,27 @@ const liquidStore = useLiquidStore()
const formulaStore = useFormulaStore() const formulaStore = useFormulaStore()
const systemStore = useSystemStore() const systemStore = useSystemStore()
const environmentParams = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[0]) const environmentParams = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[0])
const initEnv1 = {
type: 'env1',
title: '探头1',
}
// const initEnv2 = {
// type: 'env2',
// title: '探头2',
// }
const probe1Params = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[1] || initEnv1)
const probe2Params = ref<Home.DisplayrelyMgrParams>(homeStore.h2O2SensorData[2])
const liquidInfo = ref<Liquid.LiquidData>(liquidStore.liquidStateData) const liquidInfo = ref<Liquid.LiquidData>(liquidStore.liquidStateData)
const liquidTotal = ref<number>(liquidStore.liquidTotal) const liquidTotal = ref<number>(liquidStore.liquidTotal)
const formulaInfo = ref() const formulaInfo = ref()
const loading = ref(false) const loading = ref(false)
watchEffect(() => {
formulaInfo.value = formulaStore.currentSelectedFormulaInfo
liquidTotal.value = liquidStore.liquidTotal
liquidInfo.value = liquidStore.liquidStateData
loading.value = systemStore.loading
if (homeStore.h2O2SensorData && homeStore.h2O2SensorData.length) {
console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData)
environmentParams.value = {
...homeStore.h2O2SensorData[0],
title: '仓内',
type: 'inside',
}
if (homeStore.h2O2SensorData.length === 2) {
probe1Params.value = {
...homeStore.h2O2SensorData[1],
title: '探头1',
type: 'env1',
onMounted(() => {
watchEffect(() => {
formulaInfo.value = formulaStore.currentSelectedFormulaInfo
liquidTotal.value = liquidStore.liquidTotal
liquidInfo.value = liquidStore.liquidStateData
loading.value = systemStore.loading
if (homeStore.h2O2SensorData && homeStore.h2O2SensorData.length) {
styles.value = computedStyle()
console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData)
environmentParams.value = {
...homeStore.h2O2SensorData[0],
title: '仓内',
type: 'inside',
} }
} }
if (homeStore.h2O2SensorData.length === 3) {
probe1Params.value = {
...homeStore.h2O2SensorData[1],
title: '探头1',
type: 'env1',
}
probe2Params.value = {
...homeStore.h2O2SensorData[2],
title: '探头2',
type: 'env2',
}
}
}
})
}) })
// 当前消毒液余量百分比 // 当前消毒液余量百分比
@ -84,13 +57,108 @@ const nowLiquidProgress = computed(() => {
const nowLiquid = computed(() => { const nowLiquid = computed(() => {
return roundNumber(liquidInfo.value.nowLiquid, 0) return roundNumber(liquidInfo.value.nowLiquid, 0)
}) })
const styles = ref<any>({
gridTemplateColumns: 'repeat(2, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
})
const computedStyle = () => {
console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData.length)
if (deviceStore.isLowCost) {
if (homeStore.h2O2SensorData.length === 1) {
return {
gridTemplateColumns: 'repeat(1, 1fr)',
gridTemplateRows: 'repeat(1, 1fr)',
}
}
if (homeStore.h2O2SensorData.length === 2) {
return {
gridTemplateColumns: 'repeat(1, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
}
}
if (homeStore.h2O2SensorData.length === 3) {
return {
gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
gridTemplateRows: 'repeat(2, 1fr)',
justifyContent: 'center',
}
}
if (homeStore.h2O2SensorData.length === 4) {
return {
gridTemplateColumns: 'repeat(2, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
}
}
if (homeStore.h2O2SensorData.length === 5) {
return {
gridTemplateColumns: 'repeat(3, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
justifyContent: 'center',
}
}
if (homeStore.h2O2SensorData.length === 6) {
return {
gridTemplateColumns: 'repeat(3, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
}
}
}
else {
if (homeStore.h2O2SensorData.length === 1) {
return {
gridTemplateColumns: 'repeat(1, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
}
}
if (homeStore.h2O2SensorData.length === 2) {
return {
gridTemplateColumns: 'repeat(2, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
}
}
if (homeStore.h2O2SensorData.length === 3) {
return {
gridTemplateColumns: 'repeat(2, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
}
}
if (homeStore.h2O2SensorData.length === 4) {
return {
gridTemplateColumns: 'repeat(3, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
}
}
if (homeStore.h2O2SensorData.length === 5) {
return {
gridTemplateColumns: 'repeat(3, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
justifyContent: 'center',
}
}
if (homeStore.h2O2SensorData.length === 6) {
return {
gridTemplateColumns: 'repeat(3, 1fr)',
gridTemplateRows: 'repeat(3, 1fr)',
}
}
}
}
</script> </script>
<template> <template>
<div v-loading="loading" class="home"> <div v-loading="loading" class="home">
<div v-if="route.path === '/home'" class="home-grid-container"> <div v-if="route.path === '/home'" class="home-grid-container">
<div class="home-left">
<el-card v-if="!deviceStore.isLowCost" class="card">
<div class="home-left" :style="styles">
<el-card
v-if="!deviceStore.isLowCost"
class="card"
:class="{
'card-center-1': !deviceStore.isLowCost && homeStore.h2O2SensorData.length === 2,
'card-center-2': !deviceStore.isLowCost && homeStore.h2O2SensorData.length === 4,
}"
>
<template #default> <template #default>
<!-- <div class="title-line" /> --> <!-- <div class="title-line" /> -->
<div class="card-title-name"> <div class="card-title-name">
@ -106,14 +174,16 @@ const nowLiquid = computed(() => {
</div> </div>
</template> </template>
</el-card> </el-card>
<el-card class="card" :class="{ 'card-center': deviceStore.isLowCost }">
<Environment :env-params="environmentParams" />
</el-card>
<el-card class="card">
<Environment :env-params="probe1Params" />
</el-card>
<el-card class="card">
<Environment :env-params="probe2Params" />
<el-card
v-for="(item, index) in homeStore.h2O2SensorData"
:key="item.sensorId"
class="card"
:class="{
'card-center-1': index === 0 && deviceStore.isLowCost && homeStore.h2O2SensorData.length === 3,
'card-center-2': index === 0 && deviceStore.isLowCost && homeStore.h2O2SensorData.length === 5,
}"
>
<Environment :env-params="item" />
</el-card> </el-card>
</div> </div>
<div class="home-grid-item home-right"> <div class="home-grid-item home-right">
@ -151,13 +221,12 @@ $input-height: 3rem;
.home-left { .home-left {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px; gap: 10px;
.card { .card {
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 100%;
border: 1px solid rgb(225, 225, 225); border: 1px solid rgb(225, 225, 225);
position: relative; position: relative;
border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
@ -177,7 +246,7 @@ $input-height: 3rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
font-size: 26px;
font-size: 20px;
padding: 1rem; padding: 1rem;
} }
@ -209,8 +278,16 @@ $input-height: 3rem;
.el-button { .el-button {
background-color: #2892f3 !important; background-color: #2892f3 !important;
} }
.card-center {
.card-center-1 {
grid-column: 1 / -1; // 占据整行 grid-column: 1 / -1; // 占据整行
justify-self: center; // 横向居中 justify-self: center; // 横向居中
} }
.card-center-2 {
grid-column: 1 / 3; // 占据整行
justify-self: center; // 横向居中
}
:deep(.el-card__body) {
height: 100%;
}
</style> </style>
Write Preview
Loading…
Cancel
Save