disinfector_vue/src/views/home/index.vue

<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'
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'
import { useRoute } from 'vue-router'

import { roundNumber } from '@/libs/utils'
import { useFormulaStore } from '@/stores/formulaStore'
import { useSystemStore } from '@/stores/systemStore'

const route = useRoute()
const homeStore = useHomeStore()
const deviceStore = useDeviceStore()
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) {
    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',
      }
    }

    if (homeStore.h2O2SensorData.length === 3) {
      probe1Params.value = {
        ...homeStore.h2O2SensorData[1],
        title: '探头1',
        type: 'env1',
      }
      probe2Params.value = {
        ...homeStore.h2O2SensorData[2],
        title: '探头2',
        type: 'env2',
      }
    }
  }
})

// 当前消毒液余量百分比
const nowLiquidProgress = computed(() => {
  if (!liquidInfo.value.nowLiquid) {
    return 0
  }
  return roundNumber(Number((liquidInfo.value.nowLiquid / liquidTotal.value) * 100), 0)
})

// 当前消毒液余量
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-left">
        <el-card v-if="!deviceStore.isLowCost" 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" :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>
      </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 {
  width: 100%;
  height: 100%;
}

.home-grid-container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}

.home-left {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;

  .card {
    text-align: center;
    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%);

    .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 {
  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;
}
.card-center {
  grid-column: 1 / -1; // 占据整行
  justify-self: center; // 横向居中
}
</style>