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, onMounted, 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 liquidInfo = ref<Liquid.LiquidData>(liquidStore.liquidStateData)
const liquidTotal = ref<number>(liquidStore.liquidTotal)
const formulaInfo = ref()
const loading = ref(false)

onMounted(() => {
  watchEffect(() => {
    formulaInfo.value = formulaStore.currentSelectedFormulaInfo
    liquidTotal.value = liquidStore.liquidTotal
    liquidInfo.value = liquidStore.liquidStateData
    loading.value = systemStore.loading
    if (homeStore.h2O2SensorData && homeStore.h2O2SensorData.length) {
      styles.value = computedStyle()
      // console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData)
      environmentParams.value = {
        ...homeStore.h2O2SensorData[0],
        title: '仓内',
        type: 'inside',
      }
    }
  })
})

// 当前消毒液余量百分比
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)
})

const styles = ref<any>({
  gridTemplateColumns: 'repeat(2, 1fr)',
  gridTemplateRows: 'repeat(2, 1fr)',
})

const computedStyle = () => {
  // console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData.length)
  if (deviceStore.isLowCost) {
    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) {
      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)',
      }
    }
  }
}
</script>

<template>
  <div v-loading="loading" class="home">
    <div v-if="route.path === '/home'" class="home-grid-container">
      <div class="home-left" :style="styles">
        <el-card
          v-if="!deviceStore.isLowCost"
          class="card"
          :class="{
            'card-center-1': !deviceStore.isLowCost && homeStore.h2O2SensorData.length === 2,
            'card-center-2': !deviceStore.isLowCost && 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 && deviceStore.isLowCost && homeStore.h2O2SensorData.length === 3,
            'card-center-2': index === 0 && deviceStore.isLowCost && homeStore.h2O2SensorData.length === 5,
          }"
        >
          <Environment :env-params="item" />
        </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;
  gap: 10px;

  .card {
    text-align: center;
    width: 100%;
    height: 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: 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 {
  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-1 {
  grid-column: 1 / -1; // 占据整行
  justify-self: center; // 横向居中
}
.card-center-2 {
  grid-column: 1 / 3; // 占据整行
  justify-self: center; // 横向居中
}

:deep(.el-card__body) {
  height: 100%;
}
</style>