fix: 测试页ui优化

src/components/home/HomeOperation.vue

@@ -3,7 +3,6 @@ import { sendCmd } from 'apis/system'
 import homeFinish from 'assets/images/home/home-finish.svg'
 import homeStart from 'assets/images/home/home-start.svg'
 import { startTimer, stopTimer } from 'libs/countdownTimer'
-import { deviceStateMap } from 'libs/utils'
 import { computed, ref, watchEffect } from 'vue'
 
 import { getDeviceStatus } from '@/libs/deviceComm'
@@ -144,6 +143,26 @@ const doStopDisinfect = async () => {
 const operationState = computed(() => {
   return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished'
 })
+
+const startInjection = async () => {
+  const stopParams = {
+    className: 'DisinfectionCtrlServiceExt',
+    fnName: 'stop',
+    params: {},
+  }
+  await sendCmd(stopParams)
+  FtMessage.success('操作成功')
+}
+
+const stopInjection = async () => {
+  const stopParams = {
+    className: 'DisinfectionCtrlServiceExt',
+    fnName: 'stop',
+    params: {},
+  }
+  await sendCmd(stopParams)
+  FtMessage.success('操作成功')
+}
 </script>
 
 <template>
@@ -181,6 +200,15 @@ const operationState = computed(() => {
       </template>
     </bt-button>
   </div>
+  <div style="width: 100%; display: flex; justify-content: center; margin-top: 10px">
+    <el-button type="primary" @click="startInjection">
+      开始注射
+    </el-button>
+    <el-button type="danger" @click="stopInjection">
+      结束注射
+    </el-button>
+  </div>
+
   <!-- 开始消毒时显示剩余时间或状态 -->
   <div v-if="!operationState" class="home-remain-time">
     <div class="home-remaini-label">
@@ -200,7 +228,7 @@ const operationState = computed(() => {
 .home-disinfect {
   display: flex;
   justify-content: center;
-  margin-top: 40px;
+  margin-top: 20px;
 }
 .home-start {
   background: #31cb7a;

src/components/home/PressureControl.vue

@@ -44,12 +44,12 @@ const deviceType = computed(() => {
 const sealStore = useSealStore()
 const sealInfo = computed(() => sealStore.sealInfo)
 // 用户选择后立即更新压力配置（支持仅选择类型的情况）
-const confirm = (val: string[]) => {
+const confirm = async (val: string[]) => {
   // 判断设备当前的状态
   if (sealInfo.value.workState === 'stopping' || sealInfo.value.workState === 'idle') {
     if (!val || !val.length)
       return
-    homeStore.updatePressure(val)
+    await homeStore.updatePressure(val)
   }
   else {
     FtMessageBox.error('密封性测试中,禁止修改正负压')

src/stores/homeStore.ts

@@ -159,7 +159,7 @@ export const useHomeStore = defineStore('home', () => {
    * @param {Array<string|number>} pressureData - 压力配置数据 [压力类型, 压力值]
    * @desc 更新压力类型及对应压力值配置
    */
-  const updatePressure = async (pressureData: string | number[]) => {
+  const updatePressure = async (pressureData: string[]) => {
     if (pressureData && pressureData.length) {
       const type = pressureData[0]
       const pressureTypeParams = {
@@ -167,7 +167,7 @@ export const useHomeStore = defineStore('home', () => {
         fnName: 'setType',
         params: { type },
       }
-      syncSendCmd(pressureTypeParams)
+      await syncSendCmd(pressureTypeParams)
       // 正压或负压时保存设置的压力值
       if (type === 'positivePressure' || type === 'negativePressure') {
         const intensity = pressureData[1]
@@ -176,7 +176,7 @@ export const useHomeStore = defineStore('home', () => {
           fnName: 'setIntensity',
           params: { intensity: Number(intensity) },
         }
-        syncSendCmd(intensityParams)
+        await syncSendCmd(intensityParams)
       }
     }
   }

src/views/debug/index.vue

@@ -13,10 +13,7 @@ const h2O2SensorData = ref<Home.DisplayrelyMgrParams[]>(homeStore.h2O2SensorData
 const sprayPumpGpmValue = ref<number>(5)
 const airLeakDetectTestMode = ref<string>('disinfection')
 
-const formatValue = (v?: number) =>
-  v === 0 || v == null
-    ? '--'
-    : roundNumber(v, 2)
+const formatValue = (v?: number) => (v === 0 || v == null ? '--' : roundNumber(v, 2))
 
 watchEffect(() => {
   const hdData = homeStore.h2O2SensorData
@@ -176,8 +173,8 @@ const deviceType = computed(() => __DEVICE_TYPE__)
         <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: 5rem">
-                {{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}
+              <div class="debug-label" style="text-align: right; width: 5rem">
+                {{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}:
               </div>
               <div class="env-content-p">
                 <span>温度</span>
@@ -223,7 +220,6 @@ const deviceType = computed(() => __DEVICE_TYPE__)
       <hr class="divider">
       <div class="debug-lower">
         <section>
-          <div>
           <div v-if="deviceType !== deviceState.deviceTypeMap.LargeSpaceDM_B" class="debug-left-lh">
             <div class="debug-label">
               加液泵控制：
@@ -275,7 +271,6 @@ const deviceType = computed(() => __DEVICE_TYPE__)
               <bt-button type="primary" button-text="切换" @click="airLeakDetectTestModeDoSetMode" />
             </div>
           </div>
-          </div>
         </section>
         <section class="debug-right">
           <div>
@@ -332,17 +327,18 @@ const deviceType = computed(() => __DEVICE_TYPE__)
 <style lang="scss" scoped>
 $lineHeight: 12vh;
 .main-content {
-  height: $main-container-height;
+  height: 100%;
   overflow: hidden;
   background: $gradient-color;
-  padding: 4vh;
-  font-size: 20px;
+  display: flex;
+  flex-direction: column;
   .debug-upper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: auto auto;
   }
   .debug-lower {
+    flex: 1;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
@@ -354,38 +350,45 @@ $lineHeight: 12vh;
   }
 }
 .divider {
-  margin-top: 4vh;
-  margin-bottom: 4vh;
+  margin: 20px;
 }
 .debug-env {
   display: flex;
-  align-items: flex-start;
+  justify-content: center;
+  align-items: center;
+  .debug-env-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+  }
+  .debug-env-right {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: center;
+  }
 }
 .debug-left-lh {
   display: flex;
-  gap: 1rem;
-  height: $lineHeight;
+  gap: 5px;
+  align-items: center;
+  margin-bottom: 20px;
   .debug-env-content {
     display: flex;
+    align-items: center;
     .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 {
@@ -411,9 +414,6 @@ $lineHeight: 12vh;
   color: #2892f3;
 }
 
-.debug-env-right .env-content-p .unit {
-  font-size: 0.9em;
-}
 .env-lh {
   height: 5vh;
 }
@@ -421,8 +421,9 @@ $lineHeight: 12vh;
   width: 10vw;
 }
 .debug-label {
-  width: 18vw;
+  width: 150px !important;
   text-align: end;
+  margin-right: 10px;
 }
 .debug-text {
   color: #2892f3;

src/views/home/index.vue

@@ -205,7 +205,8 @@ $input-height: 3rem;
 .middle {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 5px;
+  padding: 5px 0;
 }
 .el-button {
   background-color: #2892f3 !important;