disinfector_vue/src/views/home/index.vue

<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>