增加气路控制功能

src/components/home/HomeFormula.vue

@@ -7,9 +7,15 @@ import { useFormulaStore } from '@/stores/formulaStore'
 
 const formulaStore = useFormulaStore()
 const homeStore = useHomeStore()
+// const gasStore = useGasStore()
 const formulaInfo = ref()
 const rate = ref()
 const log = ref()
+// const selectChannel = (channel: string, event: any) => {
+//   FtMessageBox.warning(`请确认打开${event.target.textContent}?`).then(() => {
+//     gasStore.selectChannel(channel)
+//   })
+// }
 watchEffect(async () => {
   if (['idle', 'finished'].includes(homeStore.disinfectionState.state)) {
     formulaInfo.value = formulaStore.selectedFormulaInfo
@@ -59,6 +65,14 @@ watchEffect(async () => {
           }}</span>Log
         </el-tag>
       </el-descriptions-item>
+      <!--      <el-descriptions-item label="气路控制"> -->
+      <!--        <el-radio-group size="small"> -->
+      <!--          <el-radio-button label="降解通道" value="degradation" @click="selectChannel(gasStore.channelSwitcherMap[0], $event)" /> -->
+      <!--          <el-radio-button label="消毒通道" value="disinfection" @click="selectChannel(gasStore.channelSwitcherMap[0], $event)" /> -->
+      <!--          <el-radio-button label="除湿通道" value="dehumidification" @click="selectChannel(gasStore.channelSwitcherMap[0], $event)" /> -->
+      <!--        </el-radio-group> -->
+      <!--      </el-descriptions-item> -->
+      <!--    </el-descriptions> -->
     </el-descriptions>
   </div>
 </template>

src/views/home/index.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
+import homeProbe1 from 'assets/images/home/home-probe1.svg'
 import Environment from 'components/home/Environment.vue'
 import HomeFormula from 'components/home/HomeFormula.vue'
 import HomeOperation from 'components/home/HomeOperation.vue'
 import HomeSetting from 'components/home/HomeSetting.vue'
 import PressureControl from 'components/home/PressureControl.vue'
+import { FtMessageBox } from 'libs/messageBox'
 import { useDeviceStore } from 'stores/deviceStore'
+import { useGasStore } from 'stores/gasStore'
 import { useHomeStore } from 'stores/homeStore'
 import { useLiquidStore } from 'stores/liquidStore'
 import { computed, onMounted, ref, watchEffect } from 'vue'
@@ -14,6 +17,12 @@ import { roundNumber } from '@/libs/utils'
 import { useFormulaStore } from '@/stores/formulaStore'
 import { useSystemStore } from '@/stores/systemStore'
 
+const gasStore = useGasStore()
+const selectChannel = (channel: string, name: any) => {
+  FtMessageBox.warning(`请确认打开${name}?`).then(() => {
+    gasStore.selectChannel(channel)
+  })
+}
 const route = useRoute()
 const homeStore = useHomeStore()
 const deviceStore = useDeviceStore()
@@ -97,11 +106,42 @@ const deviceType = computed(() => {
             :key="item.sensorId"
             class="card"
             :class="{
-              'card-one': [deviceStore.deviceTypeMap.PipeDM, deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType),
+              'card-one': [deviceStore.deviceTypeMap.PipeDM].includes(deviceType),
+              'card-two': [deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType),
             }"
           >
             <Environment :env-params="item" />
           </el-card>
+          <el-card
+            class="card"
+            :class="{
+              'card-three': [deviceStore.deviceTypeMap.PipeDM, deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType),
+            }"
+          >
+            <div class="box">
+              <div class="title">
+                <div style="width: 100%; display: flex; align-items: center">
+                  <img :src="homeProbe1" alt="" style="margin-right: 10px">气路控制
+                </div>
+
+                <el-tag type="danger">
+                  离线
+                </el-tag>
+              </div>
+              <div class="btn-box">
+                <h4>当前通道：{{ gasStore.currentChannel === gasStore.channelSwitcherMap[0] ? '降解通道' : gasStore.currentChannel === gasStore.channelSwitcherMap[1] ? '消毒通道' : '除湿通道' }}</h4>
+                <el-button :type="gasStore.currentChannel === gasStore.channelSwitcherMap[0] ? 'success' : 'primary'" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[0]" @click="() => selectChannel(gasStore.channelSwitcherMap[0], '降解通道')">
+                  降解通道
+                </el-button>
+                <el-button :type="gasStore.currentChannel === gasStore.channelSwitcherMap[1] ? 'success' : 'primary'" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[1]" @click="() => selectChannel(gasStore.channelSwitcherMap[1], '消毒通道')">
+                  消毒通道
+                </el-button>
+                <el-button :type="gasStore.currentChannel === gasStore.channelSwitcherMap[2] ? 'success' : 'primary'" :disabled="(!gasStore.isOnline) || gasStore.currentChannel === gasStore.channelSwitcherMap[2]" @click="() => selectChannel(gasStore.channelSwitcherMap[2], '除湿通道')">
+                  除湿通道
+                </el-button>
+              </div>
+            </div>
+          </el-card>
         </div>
         <div class="left-box">
           <el-card
@@ -194,6 +234,13 @@ $input-height: 3rem;
     .card-one {
       width: 100% !important;
     }
+    .card-two {
+      width: calc((100% / 3)*2 - 10px)  !important;
+    }
+    .card-three {
+
+      width: calc(100% / 3 - 10px)  !important;
+    }
     .card {
       flex: 0 0 auto;
       width: calc(100% / 3 - 10px);
@@ -277,4 +324,31 @@ $input-height: 3rem;
   font-weight: bold;
   margin-top: 10px;
 }
+
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 18px;
+  padding: 10px;
+}
+.box {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+.btn-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  .el-button {
+    margin: 0;
+  }
+}
 </style>