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>
      </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, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 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>