disinfector_vue/src/components/home/HomeFormula.vue

<script lang="ts" setup>
// import homeRound from 'assets/images/home/home-round.svg'
import { useHomeStore } from 'stores/homeStore'
import { ref, watchEffect } from 'vue'

import { useFormulaStore } from '@/stores/formulaStore'

const formulaStore = useFormulaStore()
const homeStore = useHomeStore()
const formulaInfo = ref()
const rate = ref()
const log = ref()
watchEffect(async () => {
  if (['idle', 'finished'].includes(homeStore.disinfectionState.state)) {
    formulaInfo.value = formulaStore.selectedFormulaInfo
    rate.value = formulaStore.selectedFormulaInfo?.injection_pump_speed
    log.value = formulaStore.selectedFormulaInfo?.loglevel
  }
  else {
    const realForm = (await formulaStore.getRealtimeConfig()).rely
    rate.value = homeStore.realRate || realForm?.injection_pump_speed
    log.value = homeStore.realLog || realForm?.loglevel
  }
})
</script>

<template>
  <div class="home-right-title">
    <el-descriptions :column="1">
      <el-descriptions-item label="配方">
        <el-tooltip :content="formulaInfo?.name || '默认'" placement="bottom-start">
          <div class="text">
            {{ formulaInfo?.name || '默认' }}
          </div>
        </el-tooltip>
      </el-descriptions-item>
      <!--      <el-descriptions-item label="设定注射速率"> -->
      <!--        <el-tag> -->
      <!--          <span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ rate }}</span>g/min -->
      <!--        </el-tag> -->
      <!--      </el-descriptions-item> -->
      <el-descriptions-item label="实时注射速率">
        <el-tag>
          <span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{
            homeStore.disinfectionState.injectedVelocity
          }}</span>g/min
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="目标消毒等级">
        <el-tag>
          <span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ log }}</span>Log
        </el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="实时消毒等级">
        <el-tag>
          <span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ homeStore.disinfectionState.nlog }}</span>Log
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style lang="scss" scoped>
.home-right-title {
  .title-formula {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 10px;
    font-size: 1.5rem;
    flex-wrap: nowrap;
    .name-text {
      // 不换行显示省略号
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .title-formula {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
  }
  .title-spend {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    font-size: 1.5rem;
  }
}
:deep(.el-descriptions) {
  width: 100%;
  .el-descriptions__body {
    background: rgba(0, 0, 0, 0);
  }
}
:deep(.el-descriptions__cell) {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
  padding: 5px !important;
  .el-descriptions__label {
    display: inline-block;
    width: 120px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #606266;
  }
  .el-descriptions__content {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: flex-end;
  }
}
.text {
  text-align: right;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>