From f88e91ab58e6031cd20853bd85615145c7c46862 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E5=87=A4=E5=90=89?= <baifengji@163.com>
Date: Sun, 6 Jul 2025 17:06:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=AD=A3=E8=B4=9F=E5=8E=8B=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E4=B8=8D=E5=86=8D=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/HomeSetting.vue     | 55 ----------------------
 src/components/home/PressureControl.vue | 81 +++++++++++++++++++++++++++++++++
 src/views/home/index.vue                |  2 +
 3 files changed, 83 insertions(+), 55 deletions(-)
 create mode 100644 src/components/home/PressureControl.vue

diff --git a/src/components/home/HomeSetting.vue b/src/components/home/HomeSetting.vue
index 1f097e1..8a4d164 100644
--- a/src/components/home/HomeSetting.vue
+++ b/src/components/home/HomeSetting.vue
@@ -157,46 +157,6 @@ const setRealtimeConfig = async (key: string, val: string) => {
 }
 
 /**
- * @function 打开压力控制模态框
- * @desc 初始化压力类型和强度选项
- */
-const onSetPressure = () => {
-  const pressureVal = pressureConfig.value
-  const { typeDisplayNames, types, intensitys } = pressureVal || {}
-
-  // 构建压力类型选项（左列）
-  const leftOptions: System.Option[]
-    = typeDisplayNames?.map((name: string, index: number) => ({
-      label: name,
-      value: types[index],
-    })) || []
-
-  // 构建压力强度选项（右列）
-  const rightOptions: System.Option[] = []
-  if (types?.includes('positivePressure')) {
-    intensitys?.positivePressure?.forEach((intensity: string) => {
-      rightOptions.push({ label: `${intensity}%`, value: intensity })
-    })
-  }
-
-  optionsLeft.value = leftOptions
-  optionsRight.value = rightOptions
-
-  // 获取已经设置的压力值
-  syncSendCmd({
-    className: 'PipelinePressureControl',
-    fnName: 'getState',
-  }).then((res) => {
-    if (res.ackcode === 0) {
-      defaultIntensityValue.value = res.rely.intensity
-      homeStore.updateDefaultIntensityValue(res.rely.intensity)
-      homeStore.updateDefaultIntensityTypeValue(res.rely.type)
-      isModalOpen.value = true
-    }
-  })
-}
-
-/**
  * @function 确认压力选择
  * @param {string|number[]} value - 选中的压力配置值（[类型, 强度]）
  * @desc 关闭模态框并更新压力配置
@@ -228,26 +188,11 @@ const settingWidth = computed(() => {
   }
   return '7.5rem'
 })
-
-const deviceType = computed(() => {
-  return __DEVICE_TYPE__
-})
 </script>
 
 <template>
   <div class="home-start-opt">
     <div class="home-opt-flex">
-      <div v-if="deviceType === deviceStore.deviceTypeMap.PipeDM">
-        <BtButton
-          button-text="压力控制"
-          text-size="1.3rem"
-          border-radius="5px"
-          width="7.5rem"
-          text-color="#1989fa"
-          height="3rem"
-          @click="onSetPressure"
-        />
-      </div>
       <div class="home-opt-ml">
         <BtButton
           button-text="查看图表"
diff --git a/src/components/home/PressureControl.vue b/src/components/home/PressureControl.vue
new file mode 100644
index 0000000..0860ced
--- /dev/null
+++ b/src/components/home/PressureControl.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { syncSendCmd } from 'apis/system'
+import { useDeviceStore } from 'stores/deviceStore'
+import { computed, onMounted, ref } from 'vue'
+
+import { useHomeStore } from '@/stores/homeStore'
+
+const selected = ref<string[]>([])
+// 级联数据：[{ label, value, children: [{ label, value }] }]
+const cascaderOptions = ref<{ label: string, value: string, children: { label: string, value: string }[] }[]>([])
+
+const homeStore = useHomeStore()
+const deviceStore = useDeviceStore()
+
+// 拉取配置并构建 cascaderOptions
+const getPressureConfig = async () => {
+  const res = await syncSendCmd({ className: 'PipelinePressureControl', fnName: 'getConfig' })
+  if (res.ackcode === 0) {
+    homeStore.updatePressureConfig(res.rely)
+    const { typeDisplayNames, types, intensitys } = res.rely
+    cascaderOptions.value = typeDisplayNames.map((name: string, idx: number) => {
+      const children = (intensitys[types[idx]] || []).map((val: string) => ({ label: `${val}%`, value: val }))
+      return { label: name, value: types[idx], children }
+    })
+
+    // 初始化当前状态
+    const stateRes = await syncSendCmd({ className: 'PipelinePressureControl', fnName: 'getState' })
+    if (stateRes.ackcode === 0) {
+      const { type, intensity } = stateRes.rely
+      selected.value = intensity ? [type, intensity] : [type]
+    }
+  }
+}
+
+onMounted(getPressureConfig)
+
+const deviceType = computed(() => {
+  return __DEVICE_TYPE__
+})
+
+// 用户选择后立即更新压力配置（支持仅选择类型的情况）
+const confirm = (val: string[]) => {
+  if (!val || !val.length)
+    return
+  homeStore.updatePressure(val)
+}
+</script>
+
+<template>
+  <div v-if="deviceType === deviceStore.deviceTypeMap.PipeDM" class="pressure-wrapper">
+    <el-cascader
+      v-model="selected"
+      :options="cascaderOptions"
+      placeholder="请选择压力类型和强度"
+      class="pressure-cascader"
+      input-props="{ style: 'text-align: center;' }"
+      popper-class="pressure-cascader-popper"
+      @change="confirm"
+    />
+  </div>
+</template>
+
+<style scoped>
+.pressure-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 0;
+}
+
+.pressure-cascader {
+  width: 100%;
+  max-width: 7.5rem;
+}
+</style>
+
+<!-- 全局样式，作用于弹出面板 -->
+<style>
+.pressure-cascader-popper .el-cascader-menu__item {
+  text-align: center;
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 52ea7ef..c8f18c2 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -4,6 +4,7 @@ import HomeFormula from 'components/home/HomeFormula.vue'
 import HomeLogLevel from 'components/home/HomeLogLevel.vue'
 import HomeOperation from 'components/home/HomeOperation.vue'
 import HomeSetting from 'components/home/HomeSetting.vue'
+import PressureControl from 'components/home/PressureControl.vue'
 import { useDeviceStore } from 'stores/deviceStore'
 import { useHomeStore } from 'stores/homeStore'
 import { useLiquidStore } from 'stores/liquidStore'
@@ -132,6 +133,7 @@ const deviceType = computed(() => {
         </div>
         <!-- 消毒设置 -->
         <div class="bottom">
+          <PressureControl />
           <HomeSetting />
         </div>
       </div>