disinfector_vue/src/views/home/index.vue

<script lang="ts" setup>
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',
      }
    }
  })
})

// 当前消毒液余量百分比（最大不超过100）
const nowLiquidProgress = computed(() => {
  const now = Number(liquidInfo.value.nowLiquid)
  const total = Number(liquidTotal.value)
  if (!now || total <= 0) {
    return 0
  }
  // 先算出百分比并四舍五入
  const rawPercent = roundNumber((now / total) * 100, 0)
  // 如果大于100，就返回100；否则返回原值
  return rawPercent > 100 ? 100 : rawPercent
})

// 当前消毒液余量
const nowLiquid = computed(() => {
  return roundNumber(liquidInfo.value.nowLiquid, 0)
})

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

const computedStyle = () => {
  if (
    deviceType.value === deviceStore.deviceTypeMap.PipeDM
    || deviceType.value === deviceStore.deviceTypeMap.DrawBarDM
  ) {
    return {
      gridTemplateColumns: 'repeat(3, 1fr)',
      gridTemplateRows: 'repeat(2, 1fr)',
    }
  }
  return {
    gridTemplateColumns: 'repeat(3, 1fr)',
    gridTemplateRows: 'repeat(2, 1fr)',
  }
}
const deviceType = computed(() => {
  return __DEVICE_TYPE__
})
</script>

<template>
  <div class="home">
    <div v-if="route.path === '/home'" class="home-grid-container">
      <div class="home-left" :style="styles">
        <el-card
          v-for="(item, index) in homeStore.h2O2SensorData"
          :key="item.sensorId"
          class="card"
          :class="{
            'card-center-1':
              index === 0
              && (deviceType === deviceStore.deviceTypeMap.PipeDM || deviceType === deviceStore.deviceTypeMap.DrawBarDM),
          }"
        >
          <Environment :env-params="item" />
        </el-card>
      </div>
      <div class="home-grid-item home-right">
        <!-- 正在进行的配方 -->
        <div class="top">
          <HomeFormula />

          <div v-if="deviceType !== deviceStore.deviceTypeMap.LargeSpaceDM_B" style="margin-top: 60px">
            <div class="card-progress">
              <!--              <div class="card-title-name"> -->
              <!--                <img :src="homeLiquid"> -->
              <!--              </div> -->
              <div class="card-progress-content">
                <el-progress size="small" :text-inside="true" :stroke-width="40" :percentage="nowLiquidProgress" />
              </div>
            </div>
            <div class="card-num-g">
              消毒液剩余:{{ nowLiquid }}（g）
            </div>
          </div>
        </div>

        <div class="middle">
          <!-- 选择消毒的等级 -->
          <HomeLogLevel v-if="formulaStore.isDefaultFormula" />
          <!-- 开始消毒、停止消毒及状态区 -->
          <HomeOperation />
        </div>
        <!-- 消毒设置 -->
        <div class="bottom">
          <HomeSetting />
        </div>
      </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;
    }
  }
}

.home-right {
  padding: 10px;
  background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
  border-radius: 10px;
  box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.middle {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.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%;
}

.card-progress {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  .card-title-name {
    margin-right: 10px;
  }

  .card-progress-content {
    width: 100%;
  }
}
.card-num-g {
  text-align: center;
  font-size: 15px;
  color: #3f4349;
  font-weight: bold;
  margin-top: 10px;
}
</style>