disinfector_vue/src/views/home/index.vue

<script lang="ts" setup>
import homeProbe1 from 'assets/images/home/home-probe1.svg'
import Environment from 'components/home/Environment.vue'
import HomeFormula from 'components/home/HomeFormula.vue'
import HomeOperation from 'components/home/HomeOperation.vue'
import HomeSetting from 'components/home/HomeSetting.vue'
import PressureControl from 'components/home/PressureControl.vue'
import { FtMessageBox } from 'libs/messageBox'
import { useDeviceStore } from 'stores/deviceStore'
import { useGasStore } from 'stores/gasStore'
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 gasStore = useGasStore()
const selectChannel = (channel: string, name: any) => {
  FtMessageBox.warning(`请确认打开${name}?`).then(() => {
    gasStore.selectChannel(channel)
  })
}
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="{
          'grid-template-rows': [
            deviceStore.deviceTypeMap.DrawBarDM,
            deviceStore.deviceTypeMap.LargeSpaceDM_B,
          ].includes(deviceType)
            ? 'repeat(1, 1fr)'
            : 'repeat(2, 1fr)',
        }"
      >
        <div
          class="left-box"
          :class="{
            'left-box-1': [deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType),
          }"
        >
          <el-card
            v-for="item in homeStore.h2O2SensorData
              .filter(item =>
                [deviceStore.deviceTypeMap.DrawBarDM, deviceStore.deviceTypeMap.LargeSpaceDM_B].includes(deviceType)
                  ? item.type === 'Internal'
                  : item.type !== 'WirelessExtSensor',
              )
              .concat(
                [deviceStore.deviceTypeMap.LargeSpaceDM_B].includes(deviceType)
                  ? homeStore.h2O2SensorData
                    .filter(item => item.type === 'WirelessExtSensor')
                    .filter((item, index) => index < 2)
                  : [],
              )"
            :key="item.sensorId"
            class="card"
            :class="{
              'card-one': [deviceStore.deviceTypeMap.PipeDM].includes(deviceType),
              'card-two': [deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType),
            }"
          >
            <Environment :env-params="item" />
          </el-card>
          <el-card v-if="deviceStore.deviceTypeMap.DrawBarDM === deviceType" class="card card-three">
            <div class="box">
              <div class="title">
                <div style="width: 100%; display: flex; align-items: center">
                  <img :src="homeProbe1" alt="" style="margin-right: 10px">气路控制
                </div>

                <el-tag v-if="!gasStore.isOnline" type="danger">
                  离线
                </el-tag>
              </div>
              <h4 style="text-align: center">
                当前通道：{{
                  gasStore.currentChannel === gasStore.channelSwitcherMap[0]
                    ? '降解通道'
                    : gasStore.currentChannel === gasStore.channelSwitcherMap[1]
                      ? '消毒通道'
                      : '除湿通道'
                }}
              </h4>
              <div class="btn-box">
                <el-button
                  size="large"
                  :type="gasStore.currentChannel === gasStore.channelSwitcherMap[0] ? 'info' : 'primary'"
                  :disabled="!gasStore.isOnline || gasStore.currentChannel === gasStore.channelSwitcherMap[0]"
                  @click="() => selectChannel(gasStore.channelSwitcherMap[0], '降解通道')"
                >
                  降解通道
                </el-button>
                <el-button
                  size="large"
                  :type="gasStore.currentChannel === gasStore.channelSwitcherMap[1] ? 'info' : 'primary'"
                  :disabled="!gasStore.isOnline || gasStore.currentChannel === gasStore.channelSwitcherMap[1]"
                  @click="() => selectChannel(gasStore.channelSwitcherMap[1], '消毒通道')"
                >
                  消毒通道
                </el-button>
                <el-button
                  size="large"
                  :type="gasStore.currentChannel === gasStore.channelSwitcherMap[2] ? 'info' : 'primary'"
                  :disabled="!gasStore.isOnline || gasStore.currentChannel === gasStore.channelSwitcherMap[2]"
                  @click="() => selectChannel(gasStore.channelSwitcherMap[2], '除湿通道')"
                >
                  除湿通道
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
        <div v-if="deviceType !== deviceStore.deviceTypeMap.DrawBarDM" class="left-box">
          <el-card
            v-for="item in homeStore.h2O2SensorData.filter(item => item.type === 'WirelessExtSensor')"
            :key="item.sensorId"
            class="card"
          >
            <Environment :env-params="item" />
          </el-card>
        </div>
      </div>
      <div class="home-grid-item home-right">
        <!-- 正在进行的配方 -->
        <div class="top">
          <HomeFormula />

          <div
            v-if="![deviceStore.deviceTypeMap.LargeSpaceDM_B, deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType)"
            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 || 0 }}（g）
            </div>
          </div>
        </div>

        <div class="middle">
          <!-- 选择消毒的等级 -->
          <!--          <HomeLogLevel v-if="!formulaStore.selectedFormulaInfo?.name" /> -->
          <!-- 开始消毒、停止消毒及状态区 -->
          <HomeOperation />
        </div>
        <!-- 消毒设置 -->
        <div
          class="bottom"
          :style="{
            justifyContent: deviceType === deviceStore.deviceTypeMap.PipeDM ? 'space-between' : 'space-evenly',
          }"
        >
          <PressureControl />
          <HomeSetting />
        </div>
      </div>
    </div>

    <router-view v-else />
  </div>
</template>

<style lang="scss" scoped>
.bottom {
  display: flex;
}
$input-height: 3rem;
.home {
  width: 100%;
  height: 100%;
}
.home-grid-container .home-left .left-box-1 {
  flex-direction: column !important;
  .card {
    height: calc(50% - 5px) !important;
    width: 100% !important;
  }
}

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

.home-left {
  height: 100%;
  width: 100%;
  display: grid;
  //grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  .left-box {
    display: flex; // 使用 Flexbox 布局
    flex-direction: row; // 子元素水平排列（默认值）
    align-items: flex-start; // 子元素顶部对齐
    overflow-x: auto; // 横向滚动支持
    width: 100%; // 父容器宽度占满
    gap: 10px; // 子元素之间的间距（可选）
    .card-one {
      width: 100% !important;
    }
    .card-two {
      width: calc((100% / 3) * 2 - 10px) !important;
    }
    .card-three {
      width: calc(100% / 3 - 10px) !important;
    }
    .card {
      flex: 0 0 auto;
      width: calc(100% / 3 - 10px);
      height: 100%;
      min-width: 200px;
      border: 1px solid rgb(225, 225, 225);
      border-radius: 10px;
      background: rgba(147, 203, 255, 0.1);
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

      .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%);
  background: rgba(147, 203, 255, 0.1);
  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: 5px;
  padding: 5px 0;
}
.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;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
  padding: 10px;
}
.box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0;
}
.btn-box {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  .el-button {
    margin: 0;
  }
}
</style>