disinfector_vue/src/views/debug/index.vue

<script lang="ts" setup>
import { sendCmd } from 'apis/system'
import { roundNumber } from 'libs/utils'
import { useDebugStore } from 'stores/debugStore'
import { useHomeStore } from 'stores/homeStore'
import { ref, watchEffect } from 'vue'

const homeStore = useHomeStore()
const debugStore = useDebugStore()
const h2O2SensorData = ref<Home.DisplayrelyMgrParams[]>(homeStore.h2O2SensorData)
const sprayPumpGpmValue = ref<number>(5)
const airLeakDetectTestMode = ref<string>('disinfection')

watchEffect(() => {
  const hdData = homeStore.h2O2SensorData
  if (hdData && hdData.length) {
    h2O2SensorData.value = [...hdData]
  }
})

// 加液
const liquidFillingPumpDoLiquidFilling = async () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'liquidFillingPumpDoLiquidFilling',
    params: {},
  }
  await sendCmd(data)
}
// 排液
const liquidFillingPumpDoLiquidDischarge = async () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'liquidFillingPumpDoLiquidDischarge',
    params: {},
  }
  sendCmd(data)
}
// 停止加液 或 排液。停止电机
const liquidFillingPumpDoStop = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'liquidFillingPumpDoStop',
    params: {},
  }
  sendCmd(data)
}

// 打开空压机
const airCompressorDoOpen = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'airCompressorDoOpen',
    params: {},
  }
  sendCmd(data)
}

// 关闭空压机
const airCompressorDoClose = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'airCompressorDoClose',
    params: {},
  }
  sendCmd(data)
}

// 打开加热
const heatingDoOpen = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'heatingDoOpen',
    params: {},
  }
  sendCmd(data)
}
// 关闭加热
const heatingDoClose = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'heatingDoClose',
    params: {},
  }
  sendCmd(data)
}

// 喷液泵控制 喷液(gpm)
const sprayPumpDoForward = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'sprayPumpDoForward',
    params: {
      gpm: sprayPumpGpmValue.value,
    },
  }
  sendCmd(data)
}
// 喷液泵控制 回流(gpm)
const sprayPumpDoBackward = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'sprayPumpDoBackward',
    params: {
      gpm: sprayPumpGpmValue.value,
    },
  }
  sendCmd(data)
}
// 喷液泵控制 停止
const onClosePump = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'sprayPumpDoStop',
    params: {},
  }
  sendCmd(data)
}

// 打开风机
const blowerDoOpen = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'blowerDoOpen',
    params: {},
  }
  sendCmd(data)
}
// 关闭风机
const blowerDoClose = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'blowerDoClose',
    params: {},
  }
  sendCmd(data)
}

// 气密性测试模式切换
const airLeakDetectTestModeDoSetMode = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'airLeakDetectTestModeDoSetMode',
    params: {
      mode: airLeakDetectTestMode.value,
    },
  }
  sendCmd(data)
}

// 打印测试
const printerDoTest = () => {
  const data = {
    className: 'TestPageCtrlService',
    fnName: 'printerDoTest',
    params: {},
  }
  sendCmd(data)
}
</script>

<template>
  <div class="dashboard-container">
    <main class="main-content">
      <!-- 上下布局  -->
      <section class="debug-env">
        <!-- 左侧：H₂O₂ 传感器数据 -->
        <div class="debug-env-left">
          <div
            v-for="(item, index) in h2O2SensorData"
            :key="index"
            class="debug-left-lh env-lh"
          >
            <div class="debug-env-content">
              <div class="debug-label env-content-p" style="text-align: right; width: 8rem">
                {{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}
              </div>
              <div class="env-content-p">
                <span>温度</span>
                <span class="debug-text">{{ roundNumber(item.temp, 2) }}</span>°C
              </div>
              <div class="env-content-p">
                <span>湿度</span>
                <span class="debug-text">{{ roundNumber(item.rh, 2) }}</span>%RH
              </div>
              <div class="env-content-p">
                <span>H₂O₂浓度</span>
                <span class="debug-text">{{ roundNumber(item.h2o2, 2) }}</span>ppm
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：电机电流 & 加热温度 -->
        <div class="debug-env-right">
          <div class="env-content-p">
            <span class="label">空压机电流</span>
            <span class="value">
              <span class="debug-text">{{ debugStore.debugPageState?.airCompressorCurrent ?? 0 }}</span>
              <span class="unit">A</span>
            </span>
          </div>
          <div class="env-content-p">
            <span class="label">风机电流</span>
            <span class="value">
              <span class="debug-text">{{ debugStore.debugPageState?.blowerCurrent ?? 0 }}</span>
              <span class="unit">A</span>
            </span>
          </div>
          <div class="env-content-p">
            <span class="label">加热片电流</span>
            <span class="value">
              <span class="debug-text">{{ debugStore.debugPageState?.heaterCurrent ?? 0 }}</span>
              <span class="unit">A</span>
            </span>
          </div>
          <div class="env-content-p">
            <span class="label">加热片温度</span>
            <span class="value">
              <span class="debug-text">{{ debugStore.debugPageState?.heaterTemperature ?? 0 }}</span>
              <span class="unit">℃</span>
            </span>
          </div>
        </div>
      </section>
      <hr class="divider">
      <div class="debug-lower">
        <section>
          <div>
            <div class="debug-left-lh">
              <div class="debug-label">
                加液泵控制：
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="加液"
                  @click="liquidFillingPumpDoLiquidFilling"
                />
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="排空"
                  @click="liquidFillingPumpDoLiquidDischarge"
                />
              </div>
              <div>
                <bt-button
                  button-text="停止"
                  @click="liquidFillingPumpDoStop"
                />
              </div>
            </div>
            <div class="debug-left-lh">
              <div class="debug-label">
                空压机控制：
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="打开"
                  @click="airCompressorDoOpen"
                />
              </div>
              <div>
                <bt-button
                  button-text="关闭"
                  @click="airCompressorDoClose"
                />
              </div>
            </div>
            <div class="debug-left-lh">
              <div class="debug-label">
                加热片控制：
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="打开"
                  @click="heatingDoOpen"
                />
              </div>
              <div>
                <bt-button
                  button-text="关闭"
                  @click="heatingDoClose"
                />
              </div>
            </div>
            <div class="debug-left-lh">
              <div class="debug-label">
                气密性阀门模式：
              </div>
              <div class="debug-bw">
                <el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%;">
                  <el-option label="消毒模式" value="disinfection" />
                  <el-option label="加压模式" value="inflation" />
                  <el-option label="泄露测试模式" value="leakTest" />
                </el-select>
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="切换"
                  @click="airLeakDetectTestModeDoSetMode"
                />
              </div>
            </div>
          </div>
        </section>
        <section class="debug-right">
          <div>
            <div class="debug-left-lh">
              <div class="debug-label">
                喷液泵控制：
              </div>
              <div class="debug-bw">
                <el-select v-model="sprayPumpGpmValue" placeholder="请选择加液量" style="width: 100%;">
                  <el-option v-for="opt in [2, 5, 8, 10, 15]" :key="opt" :label="`${opt} gpm`" :value="opt" />
                </el-select>
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="喷液"
                  @click="sprayPumpDoForward"
                />
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="回流"
                  @click="sprayPumpDoBackward"
                />
              </div>
              <div>
                <bt-button
                  button-text="停止"
                  @click="onClosePump"
                />
              </div>
            </div>
            <div class="debug-left-lh">
              <div class="debug-label">
                风机控制：
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="打开"
                  @click="blowerDoOpen"
                />
              </div>
              <div>
                <bt-button
                  button-text="关闭"
                  @click="blowerDoClose"
                />
              </div>
            </div>
            <div class="debug-left-lh">
              <div class="debug-label">
                打印机测试：
              </div>
              <div>
                <bt-button
                  type="primary"
                  button-text="测试"
                  @click="printerDoTest"
                />
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  </div>
</template>

<style lang="scss" scoped>
  $lineHeight: 12vh;
  .main-content{
    height: $main-container-height;
    overflow: hidden;
    background: $gradient-color;
    padding: 4vh;
    font-size: 20px;
    .debug-upper{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto auto;
    }
    .debug-lower{
      display: grid;
      grid-template-columns: repeat(2,1fr);
    }
    .debug-left{
      .debug-inside{
        display: flex;
        gap: 1rem;
      }
    }
  }
  .divider{
    margin-top: 4vh;
    margin-bottom: 4vh;
  }
  .debug-env {
    display: flex;
    align-items: flex-start;
  }
  .debug-left-lh{
    display: flex;
    gap: 1rem;
    height: $lineHeight;
    .debug-env-content{
      display: flex;
      .env-content-p{
        padding: 5px;
      }
    }
  }

  .debug-env-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 20rem;
    align-items: flex-start;
  }

  .env-content-p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
  }

  .debug-env-right .env-content-p {
    display: flex;
    align-items: center;
  }

  .debug-env-right .env-content-p .label {
    display: inline-block;
    width: 6.5rem;    /* 根据最长文字“加热片电流”微调 */
    text-align: right;
    margin-right: 0.75rem;
  }

  .debug-env-right .env-content-p .value {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
  }

  .debug-env-right .env-content-p .debug-text {
    font-weight: bold;
    color: #2892F3;
  }

  .debug-env-right .env-content-p .unit {
    font-size: 0.9em;
  }
  .env-lh{
    height: 5vh;
  }
  .debug-bw{
    width: 10vw;
  }
  .debug-label{
    width: 18vw;
    text-align: end;
  }
  .debug-text{
    color: #2892F3;
    padding: 5px;
  }
</style>