From 45cb0661fedba32b86148d0cf77299850be76dbd Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Fri, 30 May 2025 17:08:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/AddLiquid/index.vue     | 35 ++++++++----
 src/components/home/ExtractLiquid/index.vue | 32 +++++++----
 src/components/home/FillSolution/index.vue  | 21 +++----
 src/components/home/StartClean/index.vue    | 88 +++++++++++++++++++++++++++++
 src/views/home/index.vue                    | 78 +++++++++++++++++++++----
 5 files changed, 210 insertions(+), 44 deletions(-)

diff --git a/src/components/home/AddLiquid/index.vue b/src/components/home/AddLiquid/index.vue
index 0a75083..5f161b5 100644
--- a/src/components/home/AddLiquid/index.vue
+++ b/src/components/home/AddLiquid/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { getSolsList } from 'apis/solution'
-import { FtMessage } from 'libs/message'
 import { socket } from 'libs/socket'
 import { useHomeStore } from 'stores/homeStore'
 import { useSystemStore } from 'stores/systemStore'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 const emits = defineEmits(['ok', 'cancel'])
 
@@ -84,19 +83,19 @@ const getSols = async () => {
   const res = await getSolsList()
   solsList.value = res.list
 }
-
-const tubes = computed(() => {
-  const tray = systemStore.systemStatus.trays?.find(item => item.inSolutionPositon)
-  return tray?.tubes || []
-})
+//
+// const tubes = computed(() => {
+//   const tray = systemStore.systemStatus.trays?.find(item => item.inSolutionPositon)
+//   return tray?.tubes || []
+// })
 
 const selectedColumns = ref(Array.from({ length: 5 }).fill(false))
 
 const mousedownHandle = async (index: number) => {
-  if (!tubes.value.find(item => item.columnNum === index)?.exists) {
-    FtMessage.error('该列没有试管')
-    return
-  }
+  // if (!tubes.value.find(item => item.columnNum === index)?.exists) {
+  //   FtMessage.error('该列没有试管')
+  //   return
+  // }
   selectedColumns.value[index - 1] = !selectedColumns.value[index - 1]
   form.value.columns = selectedColumns.value.map((item, index) => {
     return item ? index + 1 : false
@@ -110,11 +109,23 @@ const mousedownHandle = async (index: number) => {
     <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
       <el-form-item label="选择试管" prop="columns">
         <div class="tube-item">
+          <!--          <div -->
+          <!--            v-for="item in 5" -->
+          <!--            :key="item" -->
+          <!--            class="tube-line" -->
+          <!--            :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }" -->
+
+          <!--            @click.prevent="() => mousedownHandle(item)" -->
+          <!--            @touch.prevent="() => mousedownHandle(item)" -->
+          <!--          > -->
+          <!--            <span v-for="i in 8" :key="i" class="tube-line-inner" /> -->
+          <!--          </div> -->
+
           <div
             v-for="item in 5"
             :key="item"
             class="tube-line"
-            :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }"
+            :class="{ 'tube-line-active': selectedColumns[item - 1] }"
 
             @click.prevent="() => mousedownHandle(item)"
             @touch.prevent="() => mousedownHandle(item)"
diff --git a/src/components/home/ExtractLiquid/index.vue b/src/components/home/ExtractLiquid/index.vue
index f18d969..661108d 100644
--- a/src/components/home/ExtractLiquid/index.vue
+++ b/src/components/home/ExtractLiquid/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { getSolsList } from 'apis/solution'
-import { FtMessage } from 'libs/message'
 import { socket } from 'libs/socket'
 import { useHomeStore } from 'stores/homeStore'
 import { useSystemStore } from 'stores/systemStore'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 const emits = defineEmits(['ok', 'cancel'])
 
@@ -79,18 +78,18 @@ const getSols = async () => {
   solsList.value = res.list
 }
 
-const tubes = computed(() => {
-  const tray = systemStore.systemStatus.trays?.find(item => item.inSolutionPositon)
-  return tray?.tubes || []
-})
+// const tubes = computed(() => {
+//   const tray = systemStore.systemStatus.trays?.find(item => item.inSolutionPositon)
+//   return tray?.tubes || []
+// })
 
 const selectedColumns = ref(Array.from({ length: 5 }).fill(false))
 
 const mousedownHandle = async (index: number) => {
-  if (!tubes.value.find(item => item.columnNum === index)?.exists) {
-    FtMessage.error('该列没有试管')
-    return
-  }
+  // if (!tubes.value.find(item => item.columnNum === index)?.exists) {
+  //   FtMessage.error('该列没有试管')
+  //   return
+  // }
   selectedColumns.value[index - 1] = !selectedColumns.value[index - 1]
   form.value.columns = selectedColumns.value.map((item, index) => {
     return item ? index + 1 : false
@@ -104,11 +103,22 @@ const mousedownHandle = async (index: number) => {
     <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
       <el-form-item label="选择试管" prop="columns">
         <div class="tube-item">
+          <!--          <div -->
+          <!--            v-for="item in 5" -->
+          <!--            :key="item" -->
+          <!--            class="tube-line" -->
+          <!--            :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }" -->
+
+          <!--            @click.prevent="() => mousedownHandle(item)" -->
+          <!--            @touch.prevent="() => mousedownHandle(item)" -->
+          <!--          > -->
+          <!--            <span v-for="i in 8" :key="i" class="tube-line-inner" /> -->
+          <!--          </div> -->
           <div
             v-for="item in 5"
             :key="item"
             class="tube-line"
-            :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }"
+            :class="{ 'tube-line-active': selectedColumns[item - 1] }"
 
             @click.prevent="() => mousedownHandle(item)"
             @touch.prevent="() => mousedownHandle(item)"
diff --git a/src/components/home/FillSolution/index.vue b/src/components/home/FillSolution/index.vue
index cb36484..923d74c 100644
--- a/src/components/home/FillSolution/index.vue
+++ b/src/components/home/FillSolution/index.vue
@@ -22,7 +22,14 @@ const queryContainerList = async () => {
   containerList.value = res.filter(item => item.type === 0)
 }
 
-const cancel = () => {
+const cancel = async () => {
+  currentCommandId = Date.now().toString()
+  const params = {
+    commandId: currentCommandId,
+    command: 'liquid_motor_origin',
+    params: {},
+  }
+  await homeStore.sendControl(params)
   emits('cancel')
 }
 
@@ -59,17 +66,11 @@ const filled_solution_start = async () => {
 }
 
 const filled_solution_stop = async () => {
-  if (!checked.value) {
-    FtMessage.warning('请选择要停止预充的溶液')
-    return
-  }
   currentCommandId = Date.now().toString()
   const params = {
     commandId: currentCommandId,
     command: 'liquid_pre_fill_stop',
-    params: {
-      solutionId: checked.value,
-    },
+    params: {},
   }
   await homeStore.sendControl(params)
 }
@@ -90,8 +91,8 @@ const checked = ref<number>()
       <ft-button type="primary" :click-handle="filled_solution_stop">
         停止预充
       </ft-button>
-      <ft-button @click="cancel">
-        关闭
+      <ft-button :click-handle="cancel">
+        完成预充
       </ft-button>
     </template>
   </FtDialog>
diff --git a/src/components/home/StartClean/index.vue b/src/components/home/StartClean/index.vue
index 67fffa1..c9baacc 100644
--- a/src/components/home/StartClean/index.vue
+++ b/src/components/home/StartClean/index.vue
@@ -8,10 +8,23 @@ const homeStore = useHomeStore()
 
 const form = ref({
   cycle: undefined,
+  columns: [],
 })
 const formRef = ref()
 
+const validateHandle = (rule: any, value: any, callback: any) => {
+  if (!value?.length) {
+    callback(new Error('请选择试管'))
+  }
+  else {
+    callback()
+  }
+}
+
 const rules = {
+  columns: [
+    { required: true, message: '请选择试管', trigger: 'change', validator: validateHandle },
+  ],
   cycle: [
     { required: true, trigger: 'blur', message: '请输入清洗次数' },
   ],
@@ -45,11 +58,51 @@ const commandHandle = async (command: string, params?: unknown) => {
   }
   await homeStore.sendControl(data)
 }
+
+const selectedColumns = ref(Array.from({ length: 5 }).fill(false))
+
+const mousedownHandle = async (index: number) => {
+  // if (!tubes.value.find(item => item.columnNum === index)?.exists) {
+  //   FtMessage.error('该列没有试管')
+  //   return
+  // }
+  selectedColumns.value[index - 1] = !selectedColumns.value[index - 1]
+  form.value.columns = selectedColumns.value.map((item, index) => {
+    return item ? index + 1 : false
+  }).filter(item => item !== false)
+  formRef.value.validateField('columns')
+}
 </script>
 
 <template>
   <FtDialog visible title="设置清洗次数" width="40%" :ok-handle="okHandle" @cancel="cancel">
     <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
+      <el-form-item label="选择试管" prop="columns">
+        <div class="tube-item">
+          <!--          <div -->
+          <!--            v-for="item in 5" -->
+          <!--            :key="item" -->
+          <!--            class="tube-line" -->
+          <!--            :class="{ 'tube-line-active': selectedColumns[item - 1], 'tube-line-disable': !tubes.find(tu => tu.columnNum === item)?.exists }" -->
+
+          <!--            @click.prevent="() => mousedownHandle(item)" -->
+          <!--            @touch.prevent="() => mousedownHandle(item)" -->
+          <!--          > -->
+          <!--            <span v-for="i in 8" :key="i" class="tube-line-inner" /> -->
+          <!--          </div> -->
+          <div
+            v-for="item in 5"
+            :key="item"
+            class="tube-line"
+            :class="{ 'tube-line-active': selectedColumns[item - 1] }"
+
+            @click.prevent="() => mousedownHandle(item)"
+            @touch.prevent="() => mousedownHandle(item)"
+          >
+            <span v-for="i in 8" :key="i" class="tube-line-inner" />
+          </div>
+        </div>
+      </el-form-item>
       <el-form-item label="清洗次数" prop="cycle">
         <el-select
           v-model="form.cycle"
@@ -75,4 +128,39 @@ const commandHandle = async (command: string, params?: unknown) => {
 .el-tag {
   margin-right: 5px;
 }
+
+.tube-item {
+  padding: 5px;
+  background: #384D5D;
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+  grid-gap: 5px;
+  position: relative;
+  .tube-line {
+    display: flex;
+    flex-direction: column;
+    .tube-line-inner {
+      display: inline-block;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      background: #fff;
+      margin: 2px;
+      transition: background 0.5s;
+    }
+  }
+  .tube-line-disable {
+    .tube-line-inner {
+      background: #C6C6C6;
+    }
+  }
+  .tube-line-active {
+    .tube-line-inner {
+      background: #26D574;
+    }
+  }
+
+}
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a9b112e..bbd72d2 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -10,6 +10,7 @@ import StartClean from 'components/home/StartClean/index.vue'
 import StartExperiment from 'components/home/StartExperiment/index.vue'
 
 import Tube from 'components/home/Tube/index.vue'
+import { ElMessageBox } from 'element-plus'
 import { FtMessage } from 'libs/message'
 import { socket } from 'libs/socket'
 import { cmdNameMap, formatDateTime } from 'libs/utils'
@@ -133,6 +134,63 @@ const commandHandle = async (command: string, params?: unknown) => {
   }
   await homeStore.sendControl(data)
 }
+
+const move_to_liquid_area = async () => {
+  if (!selectedHeatArea.value?.value) {
+    await ElMessageBox.confirm(
+      '是否要将上料区托盘移至加液位? ',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        showClose: false,
+        showCancelButton: false,
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        type: 'warning',
+        customClass: 'init-message',
+      },
+    )
+  }
+  await commandHandle('move_to_liquid_area', { heatModuleCode: selectedHeatArea.value?.value })
+}
+
+const move_to_feed_area = async () => {
+  if (!selectedHeatArea.value?.value) {
+    await ElMessageBox.confirm(
+      '是否要将加液位托盘移至上料区? ',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        showClose: false,
+        showCancelButton: false,
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        type: 'warning',
+        customClass: 'init-message',
+      },
+    )
+  }
+  await commandHandle('move_to_feed_area', { heatModuleCode: selectedHeatArea.value?.value })
+}
+
+const move_to_anneal_area = async () => {
+  if (!selectedHeatArea.value?.value) {
+    await ElMessageBox.confirm(
+      '是否要将加液位或上料区的托盘移至退火区? ',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        showClose: false,
+        showCancelButton: false,
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        type: 'warning',
+        customClass: 'init-message',
+      },
+    )
+  }
+  await commandHandle('move_to_anneal_area', { heatModuleCode: selectedHeatArea.value?.value })
+}
 </script>
 
 <template>
@@ -156,13 +214,13 @@ const commandHandle = async (command: string, params?: unknown) => {
               移至加热位
             </ft-button>
 
-            <ft-button size="large" :click-handle="() => commandHandle('move_to_liquid_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
-              移至加/排液位
+            <ft-button size="large" :click-handle="move_to_liquid_area">
+              移至加液位
             </ft-button>
-            <ft-button size="large" :click-handle="() => commandHandle('move_to_feed_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
-              移至上/下料区
+            <ft-button size="large" :click-handle="move_to_feed_area">
+              移至上料区
             </ft-button>
-            <ft-button size="large" :click-handle="() => commandHandle('move_to_anneal_area', { heatModuleCode: selectedHeatArea?.value || undefined })">
+            <ft-button size="large" :click-handle="move_to_anneal_area">
               移至退火位
             </ft-button>
           </div>
@@ -240,16 +298,14 @@ const commandHandle = async (command: string, params?: unknown) => {
         </el-col>
         <el-col :span="6">
           <div style="display: grid; gap: 10px; grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(3, 1fr);height: 100%">
-            <ft-button size="large" :click-handle="() => commandHandle('x_origin')">
-              x轴回原点
+            <ft-button size="large" :click-handle="() => commandHandle('liquid_motor_origin')">
+              加液臂回原点
             </ft-button>
-
             <ft-button size="large" :click-handle="() => commandHandle('z_origin')">
               z轴回原点
             </ft-button>
-
-            <ft-button size="large" :click-handle="() => commandHandle('liquid_motor_origin')">
-              加液臂回原点
+            <ft-button size="large" :click-handle="() => commandHandle('x_origin')">
+              x轴回原点
             </ft-button>
           </div>
         </el-col>