From fa46f73d3478ea01d850b3c07498de48a9b17a51 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Mon, 7 Jul 2025 17:54:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B5=8B=E8=AF=95=E9=A1=B5ui=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/HomeOperation.vue   |  32 ++++++-
 src/components/home/PressureControl.vue |   4 +-
 src/stores/homeStore.ts                 |   6 +-
 src/views/debug/index.vue               | 151 ++++++++++++++++----------------
 src/views/home/index.vue                |   3 +-
 5 files changed, 113 insertions(+), 83 deletions(-)

diff --git a/src/components/home/HomeOperation.vue b/src/components/home/HomeOperation.vue
index abd201f..9b7cbc2 100644
--- a/src/components/home/HomeOperation.vue
+++ b/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;
diff --git a/src/components/home/PressureControl.vue b/src/components/home/PressureControl.vue
index 603b4e9..6af1d54 100644
--- a/src/components/home/PressureControl.vue
+++ b/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('密封性测试中,禁止修改正负压')
diff --git a/src/stores/homeStore.ts b/src/stores/homeStore.ts
index 78f8f66..053026c 100644
--- a/src/stores/homeStore.ts
+++ b/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)
       }
     }
   }
diff --git a/src/views/debug/index.vue b/src/views/debug/index.vue
index 99c784b..d26d4a3 100644
--- a/src/views/debug/index.vue
+++ b/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,57 +220,55 @@ 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">
-                加液泵控制：
-              </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 v-if="deviceType !== deviceState.deviceTypeMap.LargeSpaceDM_B" class="debug-left-lh">
+            <div class="debug-label">
+              加液泵控制：
             </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>
+              <bt-button type="primary" button-text="加液" @click="liquidFillingPumpDoLiquidFilling" />
             </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>
+              <bt-button type="primary" button-text="排空" @click="liquidFillingPumpDoLiquidDischarge" />
             </div>
-            <div v-if="deviceType !== deviceState.deviceTypeMap.LargeSpaceDM_B" 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>
+              <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 v-if="deviceType !== deviceState.deviceTypeMap.LargeSpaceDM_B" 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>
         </section>
@@ -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;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 093062c..38d6fa3 100644
--- a/src/views/home/index.vue
+++ b/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;