|
|
@ -5,6 +5,7 @@ import HomeFormula from 'components/home/HomeFormula.vue' |
|
|
|
import HomeLogLevel from 'components/home/HomeLogLevel.vue' |
|
|
|
import HomeOperation from 'components/home/HomeOperation.vue' |
|
|
|
import HomeSetting from 'components/home/HomeSetting.vue' |
|
|
|
import { useDeviceStore } from 'stores/deviceStore' |
|
|
|
import { useHomeStore } from 'stores/homeStore' |
|
|
|
import { useLiquidStore } from 'stores/liquidStore' |
|
|
|
import { computed, ref, watchEffect } from 'vue' |
|
|
@ -16,6 +17,7 @@ import { useSystemStore } from '@/stores/systemStore' |
|
|
|
|
|
|
|
const route = useRoute() |
|
|
|
const homeStore = useHomeStore() |
|
|
|
const deviceStore = useDeviceStore() |
|
|
|
const liquidStore = useLiquidStore() |
|
|
|
const formulaStore = useFormulaStore() |
|
|
|
const systemStore = useSystemStore() |
|
|
@ -69,7 +71,7 @@ const nowLiquidProgress = computed(() => { |
|
|
|
if (!liquidInfo.value.nowLiquid) { |
|
|
|
return 0 |
|
|
|
} |
|
|
|
const nl = roundNumber(Number(((liquidInfo.value.nowLiquid / liquidTotal.value) * 100)), 0) |
|
|
|
const nl = roundNumber(Number((liquidInfo.value.nowLiquid / liquidTotal.value) * 100), 0) |
|
|
|
return nl |
|
|
|
}) |
|
|
|
|
|
|
@ -82,13 +84,12 @@ const nowLiquid = computed(() => { |
|
|
|
<template> |
|
|
|
<div v-loading="loading" class="home"> |
|
|
|
<div v-if="route.path === '/home'" class="home-grid-container"> |
|
|
|
<div class="home-grid-item merged-cell"> |
|
|
|
<div class="home-left"> |
|
|
|
<el-card class="card"> |
|
|
|
<el-card v-if="!deviceStore.isLowCost" class="card"> |
|
|
|
<template #default> |
|
|
|
<!-- <div class="title-line" /> --> |
|
|
|
<div class="card-title-name"> |
|
|
|
<img :src="homeLiquid"> {{ $t('message.disinfectant') }} |
|
|
|
<img :src="homeLiquid"> 消毒液 |
|
|
|
</div> |
|
|
|
<div class="card-progress"> |
|
|
|
<div class="card-progress-content"> |
|
|
@ -100,17 +101,16 @@ const nowLiquid = computed(() => { |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-card> |
|
|
|
<el-card class="card"> |
|
|
|
<Environment :env-params="environmentParams" line-color="#ffb380" /> |
|
|
|
<el-card class="card" :class="{ 'card-center': deviceStore.isLowCost }"> |
|
|
|
<Environment :env-params="environmentParams" /> |
|
|
|
</el-card> |
|
|
|
<el-card class="card"> |
|
|
|
<Environment :env-params="probe1Params" line-color="#80ffb3" /> |
|
|
|
<Environment :env-params="probe1Params" /> |
|
|
|
</el-card> |
|
|
|
<el-card class="card"> |
|
|
|
<Environment :env-params="probe2Params" line-color="#cc99ff" /> |
|
|
|
<Environment :env-params="probe2Params" /> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="home-grid-item home-right"> |
|
|
|
<!-- 正在进行的配方 --> |
|
|
|
<HomeFormula /> |
|
|
@ -134,30 +134,31 @@ const nowLiquid = computed(() => { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.home-grid-container { |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
|
gap: 20px; |
|
|
|
} |
|
|
|
.home-merged-cell { |
|
|
|
grid-column: 1 / 2; |
|
|
|
background-color: #ff6b6b; |
|
|
|
grid-template-columns: 2fr 1fr; |
|
|
|
gap: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.home-left { |
|
|
|
height: 100%; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
|
grid-template-rows: repeat(2, auto); |
|
|
|
gap: 20px; |
|
|
|
grid-template-rows: repeat(2, 1fr); |
|
|
|
gap: 10px; |
|
|
|
|
|
|
|
.card { |
|
|
|
text-align: center; |
|
|
|
height: 40vh; |
|
|
|
width: 30.5vw; |
|
|
|
width: 100%; |
|
|
|
border: 1px solid rgb(225, 225, 225); |
|
|
|
position: relative; |
|
|
|
border-radius: 10px 10px 10px 10px; |
|
|
|
background: #FFFFFF; |
|
|
|
background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%); |
|
|
|
background: #ffffff; |
|
|
|
background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%); |
|
|
|
|
|
|
|
.title-line { |
|
|
|
height: 1vw; |
|
|
|
background-color: #b3d9ff; |
|
|
@ -166,6 +167,7 @@ const nowLiquid = computed(() => { |
|
|
|
border-radius: 10px 10px 0 0; |
|
|
|
margin: -2.12rem; |
|
|
|
} |
|
|
|
|
|
|
|
.card-title-name { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
@ -173,14 +175,17 @@ const nowLiquid = computed(() => { |
|
|
|
font-size: 26px; |
|
|
|
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; |
|
|
@ -190,13 +195,17 @@ const nowLiquid = computed(() => { |
|
|
|
} |
|
|
|
|
|
|
|
.home-right { |
|
|
|
width: 32.8vw; |
|
|
|
background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%); |
|
|
|
background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%); |
|
|
|
position: relative; |
|
|
|
border-radius: 10px; |
|
|
|
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
.el-button { |
|
|
|
background-color: #2892F3 !important; |
|
|
|
background-color: #2892f3 !important; |
|
|
|
} |
|
|
|
.card-center { |
|
|
|
grid-column: 1 / -1; // 占据整行 |
|
|
|
justify-self: center; // 横向居中 |
|
|
|
} |
|
|
|
</style> |