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.
|
|
<script lang="ts" setup> import { roundNumber } from '@/libs/utils' import { useFormulaStore } from '@/stores/formulaStore' import { useSystemStore } from '@/stores/systemStore' 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' import HomeOperation from 'components/home/HomeOperation.vue' import HomeSetting from 'components/home/HomeSetting.vue' import { useHomeStore } from 'stores/homeStore' import { useLiquidStore } from 'stores/liquidStore' import { computed, ref, watchEffect } from 'vue' import { useRoute } from 'vue-router'
const route = useRoute() const homeStore = useHomeStore() const liquidStore = useLiquidStore() const formulaStore = useFormulaStore() const systemStore = useSystemStore() 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] || initEnv2) const liquidInfo = ref<Liquid.LiquidData>(liquidStore.liquidStateData) const liquidTotal = ref<number>(liquidStore.liquidTotal) const formulaInfo = ref() 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) { environmentParams.value = { ...homeStore.h2O2SensorData[0], title: '仓内', type: 'inside', } } })
// 当前消毒液余量百分比
const nowLiquidProgress = computed(() => { const nl = roundNumber(Number(((liquidInfo.value.nowLiquid / liquidTotal.value) * 100)), 0) return nl })
// 当前消毒液余量
const nowLiquid = computed(() => { return roundNumber(liquidInfo.value.nowLiquid, 0) }) </script>
<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"> <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 class="card"> <Environment :env-params="environmentParams" line-color="#ffb380" /> </el-card> <el-card class="card"> <Environment :env-params="probe1Params" line-color="#80ffb3" /> </el-card> <el-card class="card"> <Environment :env-params="probe2Params" line-color="#cc99ff" /> </el-card> </div> </div> <div class="home-grid-item home-right"> <!-- 正在进行的配方 --> <HomeFormula /> <!-- 选择消毒的等级 --> <HomeLogLevel /> <!-- 开始消毒、停止消毒及状态区 --> <HomeOperation /> <!-- 消毒设置 --> <HomeSetting /> </div> </div> <div v-else> <router-view /> </div> </div> </template>
<style lang="scss" scoped> $input-height: 3rem; .home{ min-height: $main-container-height; } .home-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .home-merged-cell { grid-column: 1 / 2; background-color: #ff6b6b; } .home-left { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); gap:1.5rem; .card { text-align: center; height: 40.1vh; width: 30.5vw; border: 1px solid rgb(225, 225, 225); position: relative; border-radius: 10px 10px 10px 10px; background: #FFFFFF; background: $gradient-color; .title-line{ height: 1vw; background-color: #b3d9ff; position: absolute; width: 100%; border-radius: 10px 10px 0 0; margin: -2.12rem; } .card-title-name{ display: flex; align-items: center; gap: 10px; 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; font-weight: bold; } } }
.home-right{ width: 31vw; background: $gradient-color; position: relative; } .el-button { background-color: #2892F3 !important; } </style>
|