From f7bfa8b62d131e166f080c1d622486ef0856fa4f Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Tue, 27 May 2025 20:26:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/variable.scss                    |   1 +
 src/components/common/BTButton/index.vue           |   8 +-
 .../common/CascadingSelectModal/index.vue          | 290 +++++++++++++++++++++
 src/components/formula/FormulaConfig.vue           |   4 +-
 src/components/home/HomeFormula.vue                |   1 -
 src/components/home/HomeOperation.vue              |   1 +
 src/components/home/HomeSetting.vue                | 154 ++++++++---
 src/components/home/LineChart.vue                  | 123 +++++++++
 src/components/home/chart.vue                      |  72 -----
 src/layouts/default.vue                            |   4 +-
 src/libs/constant.ts                               |  11 +
 src/router/routes.ts                               |   2 +-
 src/stores/formulaStore.ts                         |   1 -
 src/stores/homeStore.ts                            |  26 +-
 src/types/home.d.ts                                |  12 +
 src/views/formula/index.vue                        |   1 +
 src/views/home/chart.vue                           | 190 ++++++++++++++
 src/views/home/index.vue                           |   8 +-
 18 files changed, 784 insertions(+), 125 deletions(-)
 create mode 100644 src/components/common/CascadingSelectModal/index.vue
 create mode 100644 src/components/home/LineChart.vue
 delete mode 100644 src/components/home/chart.vue
 create mode 100644 src/views/home/chart.vue

diff --git a/src/assets/styles/variable.scss b/src/assets/styles/variable.scss
index 666e30e..6e62db4 100644
--- a/src/assets/styles/variable.scss
+++ b/src/assets/styles/variable.scss
@@ -4,3 +4,4 @@ $danger-color: #DF1515;
 $warn-color: #EE8223;
 $info-color: #909399;
 $gradient-color: linear-gradient(185deg, rgb(175 216 255) -90%, #fff 24%);
+$main-container: calc(100vh - 16vh)
\ No newline at end of file
diff --git a/src/components/common/BTButton/index.vue b/src/components/common/BTButton/index.vue
index 738f0fb..c9fe4db 100644
--- a/src/components/common/BTButton/index.vue
+++ b/src/components/common/BTButton/index.vue
@@ -62,6 +62,11 @@ const props = defineProps({
     type: String,
     default: '16px',
   },
+  // padding
+  padding: {
+    type: String,
+    default: '.714vw 1.339vw',
+  },
 })
 
 const emits = defineEmits(['click'])
@@ -89,6 +94,7 @@ const handleClick = (event: MouseEvent) => {
       borderRadius,
       fontSize: textSize,
       fontWeight: 400,
+      padding,
     }"
     @click="handleClick"
   >
@@ -99,6 +105,6 @@ const handleClick = (event: MouseEvent) => {
 
 <style lang="scss" scoped>
   .pl{
-    padding-left: 10px;
+    padding-left: 5px;
   }
 </style>
diff --git a/src/components/common/CascadingSelectModal/index.vue b/src/components/common/CascadingSelectModal/index.vue
new file mode 100644
index 0000000..db1d9e7
--- /dev/null
+++ b/src/components/common/CascadingSelectModal/index.vue
@@ -0,0 +1,290 @@
+<script lang="ts" setup>
+import { defineEmits, defineProps, onBeforeMount, ref, toRefs } from 'vue'
+
+const props = defineProps({
+  optionsLeft: {
+    type: Array as () => System.Option[],
+    required: true,
+  },
+  options: {
+    type: Array as () => System.Option[],
+    required: true,
+  },
+  selectedValue: {
+    type: [String, Number, Boolean, Object],
+    default: null,
+  },
+  placeholder: {
+    type: String,
+    default: '请选择',
+  },
+  searchable: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emits = defineEmits(['confirm', 'cancel'])
+
+const { optionsLeft, options } = toRefs(props)
+
+const tempSelectedLeftValue = ref('positivePressure')
+
+const tempSelectedRightValue = ref()
+
+const tempSelectedValue = ref<string[]>(['positivePressure', '10%'])
+
+const filteredOptionsLeft = ref<System.Option[]>([])
+
+const filteredOptionsRight = ref<System.Option[]>([])
+
+onBeforeMount(() => {
+  filteredOptionsLeft.value = optionsLeft.value.filter(item => item.value)
+  filteredOptionsRight.value = options.value.filter(item => item.value)
+})
+
+const selectOptionLeft = (option: System.Option) => {
+  if (option.value === 'constantPressure') {
+    tempSelectedValue.value = [option.value]
+    filteredOptionsRight.value = []
+  }
+  else {
+    tempSelectedValue.value[0] = option.value
+    filteredOptionsRight.value = options.value.filter(item => item.value)
+  }
+  tempSelectedLeftValue.value = option.value
+}
+
+const selectOption = (option: System.Option) => {
+  tempSelectedRightValue.value = option.value
+  tempSelectedValue.value[1] = option.value
+}
+
+const confirmSelection = () => {
+  emits('confirm', tempSelectedValue.value)
+}
+
+const handleCancel = () => {
+  emits('cancel')
+}
+</script>
+
+<template>
+  <div class="modal-overlay" @click.self="handleCancel">
+    <div class="modal-container">
+      <div>
+        <div class="modal-header">
+          <h3>{{ placeholder }}</h3>
+          <button class="close-btn" @click="handleCancel">
+            <i class="fa fa-times"></i>
+          </button>
+        </div>
+        <div class="modal-main">
+          <div class="modal-content">
+            <ul class="options-list">
+              <li
+                v-for="(option, index) in filteredOptionsLeft"
+                :key="option.value || index"
+                :class="{ selected: option.value === tempSelectedLeftValue }"
+                @click="selectOptionLeft(option)"
+              >
+                {{ option.label }}
+              </li>
+            </ul>
+            <div v-if="!filteredOptionsLeft.length" class="no-results">
+              没有找到匹配项
+            </div>
+          </div>
+          <div class="modal-content">
+            <ul class="options-list">
+              <li
+                v-for="(option, index) in filteredOptionsRight"
+                :key="option.value || index"
+                :class="{ selected: option.value === tempSelectedRightValue }"
+                @click="selectOption(option)"
+              >
+                {{ option.label }}
+              </li>
+            </ul>
+            <div v-if="!filteredOptionsRight.length" class="no-results">
+              没有找到匹配项
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="cancel-btn" @click="handleCancel">取消</button>
+        <button class="confirm-btn" @click="confirmSelection">确定</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.modal-container {
+  background-color: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 400px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: #1e293b;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  color: #94a3b8;
+  transition: color 0.2s ease;
+}
+
+.close-btn:hover {
+  color: #64748b;
+}
+
+.modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 0;
+  max-height: 15vw;
+}
+
+.search-box {
+  position: relative;
+  padding: 8px 16px;
+}
+
+.search-box input {
+  width: 100%;
+  padding: 10px 32px 10px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.search-box input:focus {
+  border-color: #3b82f6;
+}
+
+.search-box i {
+  position: absolute;
+  right: 28px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94a3b8;
+}
+
+.options-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.options-list li {
+  padding: 14px 20px;
+  font-size: 16px;
+  color: #334155;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  text-align: center;
+}
+
+.options-list li:hover {
+  background-color: #f1f5f9;
+}
+
+.options-list li.selected {
+  background-color: #a4c4f1;
+  color: #0284c7;
+  font-weight: 500;
+  text-align: center;
+}
+
+.no-results {
+  padding: 16px 20px;
+  font-size: 14px;
+  color: #94a3b8;
+  text-align: center;
+}
+
+.modal-footer {
+  padding: 12px 16px;
+  border-top: 1px solid #e2e8f0;
+  display: flex;
+  gap: 12px;
+}
+
+.modal-footer button {
+  flex: 1;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cancel-btn {
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  color: #64748b;
+}
+
+.cancel-btn:hover {
+  background-color: #f8fafc;
+}
+
+.confirm-btn {
+  background-color: #3b82f6;
+  border: none;
+  color: white;
+}
+
+.confirm-btn:hover {
+  background-color: #2563eb;
+}
+
+.modal-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+</style>
diff --git a/src/components/formula/FormulaConfig.vue b/src/components/formula/FormulaConfig.vue
index 2e9d846..efd3f4e 100644
--- a/src/components/formula/FormulaConfig.vue
+++ b/src/components/formula/FormulaConfig.vue
@@ -213,8 +213,8 @@ const openKeyboardType = (labelName: string) => {
       bottom: 5rem;
       display: flex;
       justify-content: center;
-      margin-left: 24vw;
-      position: absolute;
+      position:absolute;
+      margin-left: 20rem;
     }
     .default-btn{
       margin-top: 1rem;
diff --git a/src/components/home/HomeFormula.vue b/src/components/home/HomeFormula.vue
index 4dbfaee..0d5b4ed 100644
--- a/src/components/home/HomeFormula.vue
+++ b/src/components/home/HomeFormula.vue
@@ -31,7 +31,6 @@ watchEffect(() => {
 .home-right-title{
   display: grid;
   grid-template-columns: 1fr 1fr;
-  height: 2rem;
   .title-formula{
     display: flex;
     justify-self: start;
diff --git a/src/components/home/HomeOperation.vue b/src/components/home/HomeOperation.vue
index f49a271..c8e9e7a 100644
--- a/src/components/home/HomeOperation.vue
+++ b/src/components/home/HomeOperation.vue
@@ -25,6 +25,7 @@ const onStartDisinfect = () => {
   }
   if (disinfectionState.value.state === 'disinfection') {
     countdownTimer.value = new CountdownTimer(10 * 60 * 1000, (times: string) => {
+      homeStore.updateHomeRemainTime(times)
       curStateRemainTimeS.value = times
     })
     countdownTimer.value.init()
diff --git a/src/components/home/HomeSetting.vue b/src/components/home/HomeSetting.vue
index 538ac95..5d1d174 100644
--- a/src/components/home/HomeSetting.vue
+++ b/src/components/home/HomeSetting.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { useFormulaStore } from '@/stores/formulaStore'
+import { useHomeStore } from '@/stores/homeStore'
 import homeChart from 'assets/images/home/home-chart.svg'
 import homeRunSvg from 'assets/images/home/home-run.svg'
-import homeSetting from 'assets/images/home/home-setting.svg'
+import homeSettingSvg from 'assets/images/home/home-setting.svg'
+import CascadingSelectModal from 'components/common/CascadingSelectModal/index.vue'
 import Config from 'components/home/Config.vue'
-import { provide, ref } from 'vue'
+import { onMounted, provide, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const configRef = ref()
@@ -13,15 +15,24 @@ provide<(methods: Home.GrandsonMethods) => void>('registerGrandsonMethods', (met
 })
 const router = useRouter()
 const formulaStore = useFormulaStore()
+const homeStore = useHomeStore()
 const deviceState = ref(1)
+const isModalOpen = ref(false)
+const optionsLeft = ref<System.Option[]>([])
+const optionsRight = ref<System.Option[]>([])
+const selectedValue = ref()
 // 消毒设置
 const disinfectFormulaVisible = ref(false)
 const onDisinfectConfig = () => {
-  // router.push('/home/config')
   formulaStore.initFormulaData()
   disinfectFormulaVisible.value = true
 }
 
+onMounted(() => {
+  // 初始化正负压力值
+  homeStore.getPressureConfig()
+})
+
 const onShowChart = () => {
   router.push('/home/chart')
 }
@@ -33,6 +44,48 @@ const onSave = () => {
   onClose()
 }
 
+// 设置压力
+const onSetPressure = () => {
+  // 接口中获取压力值
+  const pressureConfig = homeStore.pressureConfig
+  console.log('pressureConfig---', pressureConfig)
+  const { typeDisplayNames, types } = pressureConfig
+  const intensitys: Record<string, any> = pressureConfig.intensitys
+  const left: System.Option[] = []
+  let negativePressure: string[] = []
+  if (typeDisplayNames && typeDisplayNames.length) {
+    typeDisplayNames.forEach((el: string, index: number) => {
+      left.push({
+        label: el,
+        value: types[index],
+      })
+      if (types[index] === 'positivePressure') {
+        negativePressure = intensitys.positivePressure
+      }
+    })
+  }
+  optionsLeft.value = left
+  const right: System.Option[] = []
+  if (negativePressure.length) {
+    negativePressure.forEach((el) => {
+      right.push({
+        label: el,
+        value: el,
+      })
+    })
+  }
+  optionsRight.value = right
+  isModalOpen.value = true
+}
+
+const handleConfirm = (value: string[]) => {
+  console.log('value---', value)
+  isModalOpen.value = false
+}
+const handleCancel = () => {
+  isModalOpen.value = false
+}
+
 const onClose = () => {
   disinfectFormulaVisible.value = false
 }
@@ -41,28 +94,56 @@ const onClose = () => {
 <template>
   <div class="home-start-opt">
     <div class="home-opt-flex">
-      <el-button class="el-button-text-color" size="large" @click="onShowChart">
-        <div class="home-chart">
-          <div><img :src="homeChart" style="width: 20px"></div>
-          <div class="home-chart-text">
-            图表数据
-          </div>
-        </div>
-      </el-button>
-      <el-button class="el-button-text-color" size="large" @click="onDisinfectConfig">
-        <div v-if="deviceState === 1" class="home-chart">
-          <div><img :src="homeSetting" style="width: 20px"></div>
-          <div class="home-chart-text">
-            消毒设置
-          </div>
-        </div>
-        <div v-else class="home-chart">
-          <div><img :src="homeRunSvg" style="width: 20px"></div>
-          <div class="home-chart-text">
-            运行参数
-          </div>
-        </div>
-      </el-button>
+      <bt-button
+        button-text="压力控制"
+        text-size="14px"
+        border-radius="5px"
+        text-color="#1989fa"
+        padding="0.8vw"
+        @click="onSetPressure"
+      >
+        <template #icon>
+          <el-icon><Sort /></el-icon>
+        </template>
+      </bt-button>
+      <bt-button
+        button-text="查看图表"
+        text-size="14px"
+        border-radius="5px"
+        text-color="#1989fa"
+        padding="0.8vw"
+        @click="onShowChart"
+      >
+        <template #icon>
+          <img :src="homeChart" width="15" alt="">
+        </template>
+      </bt-button>
+
+      <bt-button
+        v-if="deviceState === 1"
+        button-text="消毒设置"
+        text-size="14px"
+        border-radius="5px"
+        text-color="#1989fa"
+        padding="0.8vw"
+        @click="onDisinfectConfig"
+      >
+        <template #icon>
+          <img :src="homeSettingSvg" width="15" alt="">
+        </template>
+      </bt-button>
+      <bt-button
+        v-else
+        button-text="运行参数"
+        text-size="14px"
+        border-radius="5px"
+        text-color="#1989fa"
+        @click="onDisinfectConfig"
+      >
+        <template #icon>
+          <img :src="homeRunSvg" width="15" alt="">
+        </template>
+      </bt-button>
     </div>
   </div>
   <ft-dialog v-model="disinfectFormulaVisible" width="80vw" :ok-handle="onSave" @cancel="onClose">
@@ -70,6 +151,15 @@ const onClose = () => {
       <Config ref="configRef" />
     </div>
   </ft-dialog>
+  <CascadingSelectModal
+    v-if="isModalOpen"
+    :options-left="optionsLeft"
+    :options="optionsRight"
+    :selected-value="selectedValue"
+    placeholder="请选择"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  />
 </template>
 
 <style lang="scss" scoped>
@@ -80,20 +170,6 @@ const onClose = () => {
   gap: 5px;
   .home-opt-flex{
     display: flex;
-    gap: 25px;
-    .el-button-text-color{
-      color: #1989fa;
-      font-weight: 400;
-    }
-    .home-chart{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 5px;
-      .home-chart-text{
-        font-size: 1.2rem;
-      }
-    }
   }
 }
 </style>
diff --git a/src/components/home/LineChart.vue b/src/components/home/LineChart.vue
new file mode 100644
index 0000000..0890fda
--- /dev/null
+++ b/src/components/home/LineChart.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '仓内',
+  },
+  chartId: {
+    type: String,
+    default: 'inside',
+  },
+})
+
+onMounted(() => {
+  const chartDom = document.getElementById(props.chartId)
+  if (chartDom) {
+    const myChart = echarts.init(chartDom)
+
+    // mock生成随机数据
+    const generateRandomData = (maxValue: number) => {
+      return Math.floor(Math.random() * maxValue)
+    }
+
+    const temperatureData: number[] = [0]
+    const humidityData: number[] = [0]
+    const h2o2ConcentrationData: number[] = [0]
+    const h2o2SaturationData: number[] = [0]
+
+    const dataLength = 20
+    for (let i = 0; i < dataLength; i++) {
+      temperatureData.push(generateRandomData(400))
+      humidityData.push(generateRandomData(200))
+      h2o2ConcentrationData.push(generateRandomData(100))
+      h2o2SaturationData.push(generateRandomData(500))
+    }
+
+    const option = {
+      title: {
+        text: props.title,
+      },
+      tooltip: {
+        trigger: 'axis',
+      },
+      legend: {
+        // data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
+        data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
+        orient: 'horizontal', // 水平布局
+        itemWidth: 10, // 图例图形宽度
+        itemHeight: 10, // 图例图形高度
+        columnWidth: 80, // 每列宽度，可按需调整
+        top: '5%', // 距离容器顶部距离
+        left: 'center', // 水平居中
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: Array.from({ length: dataLength }, (_, i) => `点${i + 1}`),
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          name: '温度',
+          type: 'line',
+          data: temperatureData.sort((a, b) => a - b),
+          symbol: 'circle',
+          symbolSize: 2,
+          lineStyle: {
+            color: '#1e90ff',
+            width: 1,
+          },
+        },
+        {
+          name: '湿度',
+          type: 'line',
+          data: humidityData.sort((a, b) => a - b),
+          symbol: 'circle',
+          symbolSize: 2,
+          lineStyle: {
+            color: '#32cd32',
+            width: 1,
+          },
+        },
+        {
+          name: 'H2O2浓度',
+          type: 'line',
+          data: h2o2ConcentrationData.sort((a, b) => a - b),
+          symbol: 'circle',
+          symbolSize: 2,
+          lineStyle: {
+            color: '#ffd700',
+            width: 1,
+          },
+        },
+        {
+          name: 'H2O2饱和度',
+          type: 'line',
+          data: h2o2SaturationData.sort((a, b) => a - b),
+          symbol: 'circle',
+          symbolSize: 2,
+          lineStyle: {
+            color: '#ff0000',
+            width: 1,
+          },
+        },
+      ],
+    }
+    myChart.setOption(option)
+  }
+})
+</script>
+
+<template>
+  <div class="line-chart">
+    <div :id="chartId" style="width: 32vw; height: 50vh;" />
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/components/home/chart.vue b/src/components/home/chart.vue
deleted file mode 100644
index 2b6b7b2..0000000
--- a/src/components/home/chart.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts" setup>
-import * as echarts from 'echarts'
-import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  const myChart = echarts.init(document.getElementById('line-chart') as HTMLElement)
-
-  // 假设的数据，你可以根据实际情况替换
-  const xData = [1950, 1953, 1956, 1959, 1962, 1965, 1968, 1971, 1974, 1977, 1980, 1983, 1986, 1989, 1992, 1995, 1998, 2001, 2004, 2007, 2010, 2013]
-  const yData1 = [7000, 12000, 14000, 16000, 18000, 20000, 22000, 24000, 26000, 28000, 30000, 32000, 34000, 36000, 38000, 40000, 42000, 40000, 41000, 43000, 45000, 44000]
-  const yData2 = [6000, 9000, 11000, 13000, 15000, 17000, 19000, 21000, 23000, 25000, 27000, 29000, 31000, 33000, 35000, 37000, 39000, 36000, 37000, 38000, 36000, 37000]
-
-  // 配置项
-  const option: echarts.EChartsOption = {
-    xAxis: {
-      type: 'category',
-      data: xData,
-    },
-    yAxis: {
-      type: 'value',
-      name: 'Income',
-    },
-    series: [
-      {
-        name: 'Series 1',
-        type: 'line',
-        data: yData1,
-      },
-      {
-        name: 'Series 2',
-        type: 'line',
-        data: yData2,
-      },
-    ],
-  }
-  // 使用刚指定的配置项和数据显示图表
-  myChart.setOption(option)
-})
-const goHome = () => {
-  router.push('/home')
-}
-</script>
-
-<template>
-  <div class="chart-main">
-    <div id="line-chart" style="width: 800px; height: 400px;"></div>
-    <div class="chart-home">
-      <bt-button
-        button-text="返回"
-        @click="goHome"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.chart-main{
-  height: 100%;
-  overflow: hidden;
-  padding: 10px;
-  background: $gradient-color;
-  height: 83vh;
-}
-.chart-home{
-  position: absolute;
-  bottom: 5rem;
-  margin-left: 45vw;
-}
-</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 6595c03..90ab711 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -241,9 +241,7 @@ const onLogout = () => {
 }
 .content {
   width: 100%;
-  height: 100%;
-  border-radius: 10px;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+  height: $main-container;
   padding: 10px;
 }
 .footer-expand {
diff --git a/src/libs/constant.ts b/src/libs/constant.ts
index e0bf577..b5b41d1 100644
--- a/src/libs/constant.ts
+++ b/src/libs/constant.ts
@@ -18,6 +18,17 @@ export const formulaNameMap: Record<string, any> = {
   loglevel: '消毒等级',
 }
 
+// 空气压力初始化数据
+export const PARSSURE_DATA = {
+  intensitys: {
+    constantPressure: null,
+    negativePressure: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
+    positivePressure: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
+  },
+  typeDisplayNames: ['恒压', '正压', '负压'],
+  types: ['constantPressure', 'positivePressure', 'negativePressure'],
+}
+
 // 配方是否可配置初始数据
 export const FORMULA_CONFIG_DATA: Formula.FormulaConfig[] = [
   {
diff --git a/src/router/routes.ts b/src/router/routes.ts
index c4f8fae..ed260f7 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -32,7 +32,7 @@ const authRoutes: RouteRecordRaw[] = [
     }, {
       path: 'chart',
       name: 'chart',
-      component: () => import('components/home/chart.vue'),
+      component: () => import('views/home/chart.vue'),
     }],
   },
   {
diff --git a/src/stores/formulaStore.ts b/src/stores/formulaStore.ts
index 0471af4..8bd7c4e 100644
--- a/src/stores/formulaStore.ts
+++ b/src/stores/formulaStore.ts
@@ -62,7 +62,6 @@ export const useFormulaStore = defineStore('formula', () => {
         updateLogLevels(item)
       }
     })
-    console.log('names--', JSON.stringify(names), names)
   }
 
   const updateLogLevels = (logLevelItem: Formula.FormulaConfig) => {
diff --git a/src/stores/homeStore.ts b/src/stores/homeStore.ts
index 15c2a10..145f994 100644
--- a/src/stores/homeStore.ts
+++ b/src/stores/homeStore.ts
@@ -1,3 +1,5 @@
+import { sendCmd } from 'apis/system'
+import { PARSSURE_DATA } from 'libs/constant'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
@@ -44,6 +46,7 @@ export const useHomeStore = defineStore('home', () => {
   const h2O2SensorData = ref(h2O2Data)
   const liquidData = ref(liquidItem)
   const liquidTotal = ref(2500)
+  const curStateRemainTime = ref<string>()
   const logLevelList = [{
     label: '1级',
     value: 1,
@@ -68,6 +71,20 @@ export const useHomeStore = defineStore('home', () => {
     }
   }
 
+  // 压力值
+  const pressureConfig = ref<Home.ParssureData>(PARSSURE_DATA)
+  const getPressureConfig = async () => {
+    const pressureParams = {
+      className: 'PipelinePressureControl',
+      fnName: 'getConfig',
+      params: {},
+    }
+    const res = await sendCmd(pressureParams)
+    if (res.rely) {
+      pressureConfig.value = res.rely
+    }
+  }
+
   const updateHomeLiquid = (liquidInfo: Home.LiquidData) => {
     liquidData.value = liquidInfo
   }
@@ -121,6 +138,10 @@ export const useHomeStore = defineStore('home', () => {
   const updateHomeDisinfectionState = (disinfectState: Home.DisinfectState) => {
     disinfectionState.value = disinfectState
   }
+
+  const updateHomeRemainTime = (timer: string) => {
+    curStateRemainTime.value = timer
+  }
   return {
     // 变量
     h2O2SensorData,
@@ -129,7 +150,8 @@ export const useHomeStore = defineStore('home', () => {
     logLevelList,
     deviceStete,
     disinfectionState,
-
+    pressureConfig,
+    curStateRemainTime,
     // 方法
     updateHomeData,
     updateHomeLiquid,
@@ -137,5 +159,7 @@ export const useHomeStore = defineStore('home', () => {
     stopDisinfect,
     setDeviceState,
     updateHomeDisinfectionState,
+    getPressureConfig,
+    updateHomeRemainTime,
   }
 })
diff --git a/src/types/home.d.ts b/src/types/home.d.ts
index d41c5d5..c9cb098 100644
--- a/src/types/home.d.ts
+++ b/src/types/home.d.ts
@@ -45,4 +45,16 @@ declare namespace Home {
   interface Map {
     [key: string]: any
   }
+
+  interface Intensitys {
+    constantPressure: null
+    negativePressure: string[]
+    positivePressure: string[]
+  }
+
+  interface ParssureData {
+    intensitys: Intensitys
+    typeDisplayNames: string[]
+    types: string[]
+  }
 }
diff --git a/src/views/formula/index.vue b/src/views/formula/index.vue
index bed0a0d..ea2d19c 100644
--- a/src/views/formula/index.vue
+++ b/src/views/formula/index.vue
@@ -65,6 +65,7 @@ const onAddFormula = () => {
     grid-column:  2 / 4;
     box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
     background: $gradient-color;
+    position: relative;
   }
 }
 </style>
diff --git a/src/views/home/chart.vue b/src/views/home/chart.vue
new file mode 100644
index 0000000..80ea4fc
--- /dev/null
+++ b/src/views/home/chart.vue
@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+import { useFormulaStore } from '@/stores/formulaStore'
+import { useHomeStore } from '@/stores/homeStore'
+import homeFinish from 'assets/images/home/home-finish.svg'
+import homeSettingSvg from 'assets/images/home/home-setting.svg'
+import HomeFormula from 'components/home/HomeFormula.vue'
+import LineChart from 'components/home/LineChart.vue'
+import { ref, watchEffect } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const formulaStore = useFormulaStore()
+const homeStore = useHomeStore()
+const formulaInfo = ref()
+const disinfectionState = ref(homeStore.disinfectionState)
+const curStateRemainTime = ref(homeStore.curStateRemainTime)
+
+watchEffect(() => {
+  formulaInfo.value = formulaStore.currentSelectedFormulaInfo
+  disinfectionState.value = homeStore.disinfectionState
+  curStateRemainTime.value = homeStore.curStateRemainTime
+})
+const onDisinfectConfig = () => {
+
+}
+// 结束消毒
+const onFinishDisinfect = () => {
+  // countdownTimer.value && countdownTimer.value.stopTimer()
+  homeStore.updateHomeDisinfectionState({
+    ...disinfectionState.value,
+    state: 'idle',
+  })
+}
+
+const goHome = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <main class="main-content">
+    <div class="line-chart-title">
+      <div v-if="formulaInfo && formulaInfo.name" class="line-chart-formula">
+        <HomeFormula />
+      </div>
+      <div class="line-chart-set">
+        <bt-button
+          button-text="消毒机数据"
+          text-size="14px"
+          border-radius="5px"
+          height="3.5rem"
+          text-color="#1989fa"
+          padding="0.8vw"
+          @click="onDisinfectConfig"
+        >
+          <template #icon>
+            <el-icon style="font-weight: bold;"><Operation /></el-icon>
+          </template>
+        </bt-button>
+        <bt-button
+          button-text="消毒设置"
+          text-size="14px"
+          border-radius="5px"
+          height="3.5rem"
+          text-color="#1989fa"
+          padding="0.8vw"
+          @click="onDisinfectConfig"
+        >
+          <template #icon>
+            <img :src="homeSettingSvg" width="15" alt="">
+          </template>
+        </bt-button>
+      </div>
+    </div>
+    <div class="line-chart-content">
+      <div>
+        <LineChart key="1" title="仓内" chart-id="inside" />
+      </div>
+      <div>
+        <LineChart key="2" title="探头1" chart-id="env1" />
+      </div>
+      <div>
+        <LineChart key="3" title="探头2" chart-id="env2" />
+      </div>
+    </div>
+    <div class="line-chart-bottom">
+      <div class="home-chart-time">
+        <div class="home-remain-time">
+          <div class="home-chart-label">
+            预计剩余时间:
+          </div>
+          <div v-if="curStateRemainTime" class="home-chart-value">
+            {{ curStateRemainTime }}
+          </div>
+          <div v-else class="home-chart-value">
+            空闲
+          </div>
+        </div>
+      </div>
+      <div class="home-chart-btn">
+        <bt-button
+          button-text="结束消毒"
+          bg-color="#FF6767"
+          text-color="#FFFFFF"
+          width="15vw"
+          height="7vh"
+          text-size="24px"
+          border-radius="12px"
+          @click="onFinishDisinfect"
+        >
+          <template #icon>
+            <img :src="homeFinish" alt="">
+          </template>
+        </bt-button>
+        <bt-button
+          button-text="返回"
+          width="10vw"
+          height="7vh"
+          text-color="#1989fa"
+          text-size="24px"
+          border-radius="12px"
+          @click="goHome"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+.main-content{
+  overflow: hidden;
+  background: $gradient-color;
+  height: $main-container;
+  .line-chart-formula{
+    width: 25vw;
+    background: #E0F0FF;
+    height: 3.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #E0F0FF;
+    border-radius: 10px;
+    margin-left: 2rem;
+  }
+  .line-chart-set{
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    width: 65vw;
+  }
+  .line-chart-title{
+    height: 15%;
+    display: flex;
+    align-items: center;
+  }
+  .line-chart-content{
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    height: 65%;
+  }
+  .line-chart-bottom{
+    height: 15%;
+    display: flex;
+    padding-right: 20px;
+    .home-chart-btn{
+      display: flex;
+      justify-content: end;
+      width: 65%;
+    }
+    .home-chart-time{
+      width: 35%;
+      .home-remain-time{
+        background: #F6FAFE;
+        width: 27vw;
+        height: 8vh;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        gap: 10px;
+        margin-left: 1rem;
+        .home-chart-value{
+          color: #2892F3;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index b8840fa..6aae19b 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -97,12 +97,11 @@ const nowLiquidProgress = computed(() => {
   .home-grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
+    gap: 1.5rem;
   }
   .home-merged-cell {
-    grid-column: 1 / span 2;
+    grid-column: 1 / 2;
     background-color: #ff6b6b;
-    width: 66vw;
   }
   .home-left {
     display: grid;
@@ -112,7 +111,7 @@ const nowLiquidProgress = computed(() => {
     .card {
       text-align: center;
       height: 40.1vh;
-      width: 30vw;
+      width: 30.5vw;
       border: 1px solid rgb(225, 225, 225);
       position: relative;
       border-radius: 10px 10px 10px 10px;
@@ -153,6 +152,7 @@ const nowLiquidProgress = computed(() => {
     width: 31vw;
     height: 83vh;
     background: $gradient-color;
+    position: relative;
   }
   .el-button {
     background-color: #2892F3 !important;