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

fix: 增加无线传感器显示

master
guoapeng 2 weeks ago
parent
701df6c8cd
commit
ea6bd8b97e
6 changed files with 162 additions and 148 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/components/home/Environment.vue
  2. 12
      src/components/home/HomeFormula.vue
  3. 4
      src/libs/countdownTimer.ts
  4. 100
      src/stores/homeStore.ts
  5. 5
      src/types/home.d.ts
  6. 162
      src/views/home/index.vue

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

@ -44,7 +44,7 @@ const imgs: Record<string, any> = {
}
const titles: Record<string, any> = {
Internal: '仓内',
Internal: '仓内传感器',
WiredExtSensor: '外接传感器',
WirelessExtSensor: '无线传感器',
}
@ -60,7 +60,13 @@ onMounted(() => {
<template>
<div class="box">
<div class="title">
<img :src="imgs[envParams.type] || homeInside" alt=""> {{ titles[envParams.type] }}
<div style="width: 100%; display: flex; align-items: center">
<img :src="imgs[envParams.type] || homeInside" alt="" style="margin-right: 10px"> {{ titles[envParams.type] }}
</div>
<el-tag v-if="!envParams.online" type="danger">
离线
</el-tag>
</div>
<div style="display: flex; flex-direction: column; justify-content: flex-end">
<div class="env-row odd">
@ -120,6 +126,7 @@ div {
.title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 20px;
padding: 10px;

12
src/components/home/HomeFormula.vue
View File

@ -23,21 +23,21 @@ watchEffect(() => {
</div>
<div v-if="formulaInfo && formulaInfo.injection_pump_speed" class="title-spend">
<span>速率</span>
<span style="color: #31CB7A">{{ formulaInfo.injection_pump_speed }}</span>g/分钟
<span style="color: #31cb7a">{{ formulaInfo.injection_pump_speed }}</span>g/分钟
</div>
</div>
</template>
<style lang="scss" scoped>
.home-right-title{
.home-right-title {
background: #fff;
width: 90%;
width: 100%;
border-radius: 10px;
margin: 10px auto;
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 1.5rem;
.title-formula{
.title-formula {
display: flex;
align-items: center;
gap: 5px;
@ -45,13 +45,13 @@ watchEffect(() => {
font-size: 1.5rem;
flex-wrap: nowrap;
}
.title-formula{
.title-formula {
flex: 1 1 auto;
min-width: 0;
white-space: normal;
word-break: break-word;
}
.title-spend{
.title-spend {
justify-self: end;
display: flex;
align-items: center;

4
src/libs/countdownTimer.ts
View File

@ -16,11 +16,11 @@ class CountdownTimer {
private formatTime(seconds: number): string {
const hours = Math.floor(seconds / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
const secs = seconds % 60
// const secs = seconds % 60
const timeStr = [
hours.toString().padStart(2, '0'),
minutes.toString().padStart(2, '0'),
secs.toString().padStart(2, '0'),
// secs.toString().padStart(2, '0'),
].join(':')
return timeStr
}

100
src/stores/homeStore.ts
View File

@ -5,18 +5,100 @@ import { computed, ref } from 'vue'
import { DEVICE_STATES } from '@/libs/utils'
const deviceTypeMap = {
LargeSpaceDM: 'DT600N', // 大空间
SmallSpaceDM: 'DT300N', // 小空间
PipeDM: 'DT300W', // 管道式
DrawBarDM: 'DT100N', // 拉杆箱
LargeSpaceDM_B: 'DT600B', // 大空间标准（低成本）
}
// 传感器数据初始值
const h2O2Data: Home.DisplayrelyMgrParams[] = [
const h2O2Data: Home.DisplayrelyMgrParams[] = [deviceTypeMap.PipeDM, deviceTypeMap.DrawBarDM].includes(__DEVICE_TYPE__)
? [
{
type: 'Internal',
online: true,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
{
type: 'WirelessExtSensor',
online: false,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
{
type: 'WirelessExtSensor',
online: false,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
{
type: 'WirelessExtSensor',
online: false,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
]
: [
{
type: 'Internal',
online: true,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
{
type: 'WiredExtSensor',
online: false,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
{
type: 'WiredExtSensor',
online: false,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
{
type: 'WirelessExtSensor',
online: false,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
{
type: 'WirelessExtSensor',
online: false,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
{
type: 'inside',
title: '仓内',
temp: 0,
rh: 0,
rs: 0,
h2o2: 0,
chartId: 'inside',
type: 'WirelessExtSensor',
online: false,
temp: -1,
rh: -1,
rs: -1,
h2o2: -1,
},
]
]
// 消毒状态初始值
const initDisinfectState = {

5
src/types/home.d.ts
View File

@ -8,8 +8,9 @@ declare namespace Home {
type: string // 传感器类型 Internal, WiredExSensor
}
interface DisplayrelyMgrParams extends DisplayrelyMgr {
title: string
chartId: string
title?: string
chartId?: string
online?: boolean
}
interface DisplayrelyMgrs {
internalSensorNum: number // 内置传感器数量

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

@ -1,5 +1,4 @@
<script lang="ts" setup>
import homeLiquid from 'assets/images/home/home-liquid.svg'
import Environment from 'components/home/Environment.vue'
import HomeFormula from 'components/home/HomeFormula.vue'
import HomeLogLevel from 'components/home/HomeLogLevel.vue'
@ -64,85 +63,18 @@ const styles = ref<any>({
})
const computedStyle = () => {
// console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData.length)
if (__DEVICE_TYPE__ === deviceStore.deviceTypeMap.LargeSpaceDM_B) {
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) {
if (
deviceType.value === deviceStore.deviceTypeMap.PipeDM
|| deviceType.value === deviceStore.deviceTypeMap.DrawBarDM
) {
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)',
}
}
}
}
const deviceType = computed(() => {
@ -155,43 +87,13 @@ const deviceType = computed(() => {
<div v-if="route.path === '/home'" class="home-grid-container">
<div class="home-left" :style="styles">
<el-card
v-if="deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B"
class="card"
:class="{
'card-center-1':
deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B && homeStore.h2O2SensorData.length === 2,
'card-center-2':
deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B && homeStore.h2O2SensorData.length === 4,
}"
>
<template #default>
<!-- <div class="title-line" /> -->
<div class="card-title-name">
<img :src="homeLiquid"> 消毒液
</div>
<div class="card-progress">
<div class="card-progress-content">
<el-progress :text-inside="true" :stroke-width="35" :percentage="nowLiquidProgress" />
</div>
</div>
<div class="card-num-g">
{{ nowLiquid }}（g）
</div>
</template>
</el-card>
<el-card
v-for="(item, index) in homeStore.h2O2SensorData"
:key="item.sensorId"
class="card"
:class="{
'card-center-1':
index === 0
&& deviceType === deviceStore.deviceTypeMap.LargeSpaceDM_B
&& homeStore.h2O2SensorData.length === 3,
'card-center-2':
index === 0
&& deviceType === deviceStore.deviceTypeMap.LargeSpaceDM_B
&& homeStore.h2O2SensorData.length === 5,
&& (deviceType === deviceStore.deviceTypeMap.PipeDM || deviceType === deviceStore.deviceTypeMap.DrawBarDM),
}"
>
<Environment :env-params="item" />
@ -201,7 +103,22 @@ const deviceType = computed(() => {
<!-- 正在进行的配方 -->
<div class="top">
<HomeFormula />
<div v-if="deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B" style="margin-top: 20px">
<div class="card-progress">
<!-- <div class="card-title-name"> -->
<!-- <img :src="homeLiquid"> -->
<!-- </div> -->
<div class="card-progress-content">
<el-progress size="small" :text-inside="true" :stroke-width="25" :percentage="nowLiquidProgress" />
</div>
</div>
<div class="card-num-g">
消毒液剩余:{{ nowLiquid }}（g）
</div>
</div>
</div>
<div class="middle">
<!-- 选择消毒的等级 -->
<HomeLogLevel v-if="formulaStore.isDefaultFormula" />
@ -266,26 +183,11 @@ $input-height: 3rem;
font-size: 20px;
padding: 1rem;
}
.card-progress {
display: flex;
justify-content: center;
margin-top: 3rem;
.card-progress-content {
width: 92%;
}
}
.card-num-g {
margin-top: 3.5vw;
font-size: 26px;
font-weight: bold;
}
}
}
.home-right {
padding: 10px;
background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
border-radius: 10px;
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
@ -313,4 +215,26 @@ $input-height: 3rem;
:deep(.el-card__body) {
height: 100%;
}
.card-progress {
margin-top: 10px;
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
.card-title-name {
margin-right: 10px;
}
.card-progress-content {
width: 100%;
}
}
.card-num-g {
text-align: center;
font-size: 15px;
color: #3f4349;
font-weight: bold;
margin-top: 10px;
}
</style>
Write Preview
Loading…
Cancel
Save