From d4e3468dab0080be2d0b12f4a37389b8498b0749 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Thu, 29 May 2025 23:01:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96=E5=92=8C?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9B=9E=E5=8E=9F=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.test                                   |   4 +-
 src/apis/system.ts                          |   3 +-
 src/components/SavePosition/index.vue       |  12 +-
 src/components/check/index.vue              |  45 ++++--
 src/components/home/ExtractLiquid/index.vue | 178 +++++++++++++++++++++++
 src/components/home/FillSolution/index.vue  |   4 +-
 src/components/home/Tube/index.vue          |   2 +-
 src/layouts/default.vue                     |  50 ++++---
 src/libs/utils.ts                           |  14 ++
 src/router/index.ts                         |   2 +-
 src/stores/systemStore.ts                   |   1 +
 src/types/home.d.ts                         |   2 +-
 src/types/system.d.ts                       |   1 -
 src/views/home/index.vue                    | 209 ++++++++++++++++------------
 14 files changed, 397 insertions(+), 130 deletions(-)
 create mode 100644 src/components/home/ExtractLiquid/index.vue

diff --git a/.env.test b/.env.test
index 2822908..7a0fe46 100644
--- a/.env.test
+++ b/.env.test
@@ -2,6 +2,6 @@
 
 FT_NODE_ENV=test
 
-FT_WS_URL=ws://192.168.1.199:8080/ws
-FT_PROXY=http://192.168.1.199:8080
+FT_WS_URL=ws://192.168.10.200:8080/ws
+FT_PROXY=http://192.168.10.200:8080
 FT_API_BASE=/api
\ No newline at end of file
diff --git a/src/apis/system.ts b/src/apis/system.ts
index 44ef96f..7f4e8b6 100644
--- a/src/apis/system.ts
+++ b/src/apis/system.ts
@@ -3,5 +3,6 @@ import http from 'libs/http'
 export const debugControl = <T>(params: System.CmdControlParams<T>): Promise<null> => http.post('/debug/cmd', params)
 export const control = <T>(params: System.CmdControlParams<T>): Promise<null> => http.post('/cmd', params)
 export const getStatus = (): Promise<System.SystemStatus> => http.get('/sys/device-status')
-export const getPoint = (motor: string): Promise<{ position: string }> => http.get(`/motor/position/${motor}`)
+export const getPoint = (motor: string): Promise<string> => http.get(`/motor/position/${motor}`)
 export const requireOutTray = (): Promise<{ moduleCode: string }[]> => http.get('/self-test/require-out-tray')
+export const setIgnoreItem = (params: { ignoreSelfTestType: string, ignore: boolean }): Promise<null> => http.post('/self-test/set-ignore-item', params)
diff --git a/src/components/SavePosition/index.vue b/src/components/SavePosition/index.vue
index f960e50..54210c3 100644
--- a/src/components/SavePosition/index.vue
+++ b/src/components/SavePosition/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { updatePoint } from 'apis/point'
+import { getPointList, updatePoint } from 'apis/point'
 import { getPoint } from 'apis/system'
 import { onMounted, ref } from 'vue'
 
@@ -7,6 +7,7 @@ const emits = defineEmits(['ok', 'cancel'])
 
 const pointList = ref<Point.Point[]>([])
 onMounted(async () => {
+  pointList.value = await getPointList()
 })
 
 const form = ref<Point.UpdateParams>({})
@@ -39,6 +40,10 @@ const cancel = () => {
 
 const motor = [
   {
+    name: '转运机械臂三维点',
+    code: 'Transfer',
+  },
+  {
     name: 'X轴电机',
     code: 'XSV',
   },
@@ -60,8 +65,7 @@ const motor = [
 ]
 
 const selectChange = async (val: string) => {
-  const res = await getPoint(val)
-  form.value!.position = res.position
+  form.value!.position = await getPoint(val)
 }
 </script>
 
@@ -87,7 +91,7 @@ const selectChange = async (val: string) => {
             v-for="item in pointList"
             :key="item.id"
             :label="item.name"
-            :value="item.code"
+            :value="item.id"
           />
         </el-select>
       </el-form-item>
diff --git a/src/components/check/index.vue b/src/components/check/index.vue
index 5919975..a5c75c5 100644
--- a/src/components/check/index.vue
+++ b/src/components/check/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getSelfFinish, getSelfStatus } from 'apis/self'
-import { requireOutTray } from 'apis/system'
+import { requireOutTray, setIgnoreItem } from 'apis/system'
 import { ElMessageBox } from 'element-plus'
 import { socket } from 'libs/socket'
 import { useHomeStore } from 'stores/homeStore'
@@ -12,10 +12,10 @@ const homeStore = useHomeStore()
 const systemStore = useSystemStore()
 
 const checkMap = ref(new Map([
-  ['transferZOrigin', { status: '', name: 'z轴回原点', params: { commandId: '', command: `transfer_x_origin`, params: {} } }],
-  ['transferXOrigin', { status: '', name: 'x轴回原点', params: { commandId: '', command: `transfer_z_origin`, params: {} } }],
-  ['doorOrigin', { status: '', name: '门电机回原点', params: { commandId: '', command: `door_origin`, params: {} } }],
-  ['dualRobotOrigin', { status: '', name: '加液机械臂回原点', params: { commandId: '', command: `dual_robot_origin`, params: {} } }],
+  ['transferZOrigin', { status: '', ignoreKey: 'transferZOriginIsIgnore', name: 'z轴回原点', params: { commandId: '', command: `transfer_z_origin`, params: {} } }],
+  ['transferXOrigin', { status: '', ignoreKey: 'transferXOriginIsIgnore', name: 'x轴回原点', params: { commandId: '', command: `transfer_x_origin`, params: {} } }],
+  ['doorOrigin', { status: '', ignoreKey: 'doorOriginIsIgnore', name: '门电机回原点', params: { commandId: '', command: `door_origin`, params: {} } }],
+  ['dualRobotOrigin', { status: '', ignoreKey: 'dualRobotOriginIsIgnore', name: '加液机械臂回原点', params: { commandId: '', command: `dual_robot_origin`, params: {} } }],
 ]))
 
 const checkList = ref<any[]>([])
@@ -30,6 +30,12 @@ onMounted(async () => {
     if (entry) {
       entry.status = res[key] ? 'success' : 'error'
     }
+    for (const [checkKey] of checkMap.value) {
+      const data = checkMap.value.get(checkKey)
+      if (key === data?.ignoreKey) {
+        res[key] && (data.status = 'ignore')
+      }
+    }
   }
   await ElMessageBox.confirm(
     '设备转运机械臂x、z, 加液机械臂, 门等需进行初始化，请确认机械臂行进路径无杂物',
@@ -148,6 +154,14 @@ const checkHandle1 = async () => {
   })
   activeStep.value = 2
 }
+
+const ignore = async (item: any) => {
+  await setIgnoreItem({
+    ignoreSelfTestType: item.ignoreKey,
+    ignore: true,
+  })
+  item.status = 'ignore'
+}
 </script>
 
 <template>
@@ -169,9 +183,18 @@ const checkHandle1 = async () => {
         <el-icon v-else-if="item.status === ''" class="el-icon--loading">
           <Loading />
         </el-icon>
-        <ft-button v-if="item.status !== 'success'" size="small" type="primary" :click-handle="() => commandHandle(item)">
+        <el-icon v-else-if="item.status === 'ignore'">
+          <More />
+        </el-icon>
+        <ft-button v-if="item.status !== 'success'" type="primary" :click-handle="() => commandHandle(item)">
           回原点
         </ft-button>
+        <ft-button v-if="item.status !== 'ignore'" type="primary" :click-handle="() => ignore(item)">
+          忽略
+        </ft-button>
+        <ft-button v-if="item.status === 'ignore'" type="danger" :click-handle="() => ignore(item)">
+          取消忽略
+        </ft-button>
       </div>
     </div>
     <div v-if="activeStep === 1" class="check-box">
@@ -209,7 +232,7 @@ const checkHandle1 = async () => {
 
     <template #footer>
       <div style="height: 40px">
-        <FtButton v-if="activeStep === 0 && checkList.length === 4 && checkList.every(item => item.status === 'success')" type="primary" :click-handle="checkHandle">
+        <FtButton v-if="activeStep === 0 && checkList.every(item => ['success', 'ignore'].includes(item.status))" type="primary" :click-handle="checkHandle">
           下一步
         </FtButton>
         <FtButton v-if="activeStep === 1 && percentage === 100" type="primary" :click-handle="checkHandle1">
@@ -234,6 +257,7 @@ const checkHandle1 = async () => {
 }
 .progress-box {
   width: 100%;
+  height: 40px;
   display: flex;
   align-items: center;
   p {
@@ -243,7 +267,7 @@ const checkHandle1 = async () => {
     margin-left: 10px;
   }
   .el-progress {
-    flex: 1;
+    width: 80%;
   }
 }
 .check-main{
@@ -258,7 +282,7 @@ const checkHandle1 = async () => {
   align-items: center;
   margin-bottom: 10px;
   .el-tag {
-    flex: 1;
+    width: 70%;
   }
   .el-icon {
     margin: 0 10px;
@@ -284,4 +308,7 @@ const checkHandle1 = async () => {
 .el-icon.el-icon--loading {
   animation: spin 1s linear infinite;
 }
+.ft-button {
+  width:120px
+}
 </style>
diff --git a/src/components/home/ExtractLiquid/index.vue b/src/components/home/ExtractLiquid/index.vue
new file mode 100644
index 0000000..f18d969
--- /dev/null
+++ b/src/components/home/ExtractLiquid/index.vue
@@ -0,0 +1,178 @@
+<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'
+
+const emits = defineEmits(['ok', 'cancel'])
+
+const homeStore = useHomeStore()
+const systemStore = useSystemStore()
+
+onMounted(() => {
+  getSols()
+  socket.init(receiveMessage, 'cmd_debug')
+  socket.init(receiveMessage, 'cmd_response')
+})
+
+onUnmounted(() => {
+  socket.unregisterCallback(receiveMessage, 'cmd_debug')
+  socket.unregisterCallback(receiveMessage, 'cmd_response')
+})
+
+let currentCommandId = ''
+const receiveMessage = (data: Socket.cmdData) => {
+  data.commandId === currentCommandId && systemStore.pushSystemList(data)
+}
+
+const form = ref<{
+  columns?: number[]
+  solutionId?: number
+  volume?: number
+}>({})
+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 },
+  ],
+}
+
+const okHandle = async () => {
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
+      return
+    }
+    currentCommandId = Date.now().toString()
+    const params = {
+      commandId: currentCommandId,
+      command: 'liquid_reduce',
+      params: form.value,
+    }
+    await homeStore.sendControl(params)
+    emits('ok')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
+const cancel = () => {
+  emits('cancel')
+}
+
+const solsList = ref<Solution.SolutionItem[]>([])
+
+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 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" :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>
+      </el-form-item>
+    </el-form>
+  </FtDialog>
+</template>
+
+<style scoped lang="scss">
+.el-tag {
+  margin-right: 5px;
+}
+.el-row {
+  height: 450px;
+  .el-col {
+    height: 100%;
+    overflow: auto;
+    :deep(.el-tag) {
+      width: 100%;
+      margin-bottom: 5px;
+      .el-tag__content {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+.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/components/home/FillSolution/index.vue b/src/components/home/FillSolution/index.vue
index f1fe261..cb36484 100644
--- a/src/components/home/FillSolution/index.vue
+++ b/src/components/home/FillSolution/index.vue
@@ -50,7 +50,7 @@ const filled_solution_start = async () => {
   currentCommandId = Date.now().toString()
   const params = {
     commandId: currentCommandId,
-    command: 'filled_solution_start',
+    command: 'liquid_pre_fill_start',
     params: {
       solutionId: checked.value,
     },
@@ -66,7 +66,7 @@ const filled_solution_stop = async () => {
   currentCommandId = Date.now().toString()
   const params = {
     commandId: currentCommandId,
-    command: 'filled_solution_stop',
+    command: 'liquid_pre_fill_stop',
     params: {
       solutionId: checked.value,
     },
diff --git a/src/components/home/Tube/index.vue b/src/components/home/Tube/index.vue
index 8a7fd72..e5b7c7d 100644
--- a/src/components/home/Tube/index.vue
+++ b/src/components/home/Tube/index.vue
@@ -30,7 +30,7 @@ const homeStore = useHomeStore()
 const systemStore = useSystemStore()
 const mousedownHandle = async (index: number) => {
   await trayTube({
-    trayUuid: tray.value!.uuid,
+    trayUuid: tray.value?.uuid,
     tubes: [
       {
         columnNum: index,
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 8cc022f..21cdc7e 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -9,6 +9,7 @@ import { useActivateDebug } from 'hooks/useActivateDebug'
 import { isClose } from 'libs/socket'
 import { formatDateTime } from 'libs/utils'
 import { authRoutes } from 'router/routes'
+import { useDebugStore } from 'stores/debugStore'
 import { useSystemStore } from 'stores/systemStore'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -26,24 +27,6 @@ const timeInterval = setInterval(() => {
 
 onMounted(async () => {
   if (!systemStore.systemStatus.selfTest && systemStore.systemStatus.currentUser?.username !== 'test') {
-    // await ElMessageBox.confirm(
-    //   '<p>即将对设备进行初始化, 请确保以下内容: </p>'
-    //   + '<ul>'
-    //   + '<li>1. 设备内部无杂物</li>'
-    //   + '<li>2. 夹爪没有夹取物品</li>'
-    //   + '<li>3. 加液区无试管架<li>'
-    //   + '</ul> ',
-    //   '提示',
-    //   {
-    //     confirmButtonText: '确认',
-    //     showClose: false,
-    //     dangerouslyUseHTMLString: true,
-    //     showCancelButton: false,
-    //     closeOnClickModal: false,
-    //     type: 'warning',
-    //     customClass: 'init-message',
-    //   },
-    // )
     isCheck.value = true
   }
   solutionList.value = (await getSolsList()).list
@@ -58,7 +41,7 @@ const menuList = computed(() => {
     if (item.meta?.isDefault) {
       return true
     }
-    return !!(['/debug', '/positionDebug'].includes(item.path) && systemStore.isDebug)
+    return (['/debug', '/positionDebug'].includes(item.path) && systemStore.isDebug)
   })
 })
 
@@ -92,6 +75,15 @@ const statusMap = {
     name: '指令执行异常',
   },
 }
+
+const commandHandle = async (command: string, params?: unknown) => {
+  const data = {
+    commandId: Date.now().toString(),
+    command,
+    params,
+  }
+  await useDebugStore().sendControl(data)
+}
 </script>
 
 <template>
@@ -103,6 +95,9 @@ const statusMap = {
         <img :class="systemStore.menuExpand ? 'expand-icon' : 'fold-icon'" src="../assets/images/expand.svg" alt="" @click="systemStore.updateMenuExpand()">
       </div>
       <div class="header-right">
+        <ft-button v-if="systemStore.isDebug" type="primary" :click-handle="() => commandHandle('stop_all_motor')">
+          停止所有电机
+        </ft-button>
         <el-dropdown class="wifi-dropdown" trigger="click">
           <div class="wifi-icon">
             <img v-if="isClose" src="../assets/images/wifi.svg" alt="">
@@ -184,8 +179,16 @@ const statusMap = {
                     :key
                     :type="statusMap[item?.status as keyof typeof statusMap].type"
                   >
-                    {{ item.cmdName }}: {{ statusMap[item.status as keyof typeof statusMap].name }}
-                    {{ item.time }}
+                    <div style="display: flex;justify-content: space-between;width: 100%">
+                      <span>
+                        <span>{{ item.cmdName }}: </span>
+                        <span>{{ statusMap[item.status as keyof typeof statusMap].name }}</span>
+                      </span>
+
+                      <span>{{ item.time }}</span>
+                    </div>
+                    <!--                    {{ item.cmdName }}: {{ statusMap[item.status as keyof typeof statusMap].name }} -->
+                    <!--                    {{ item.time }} -->
                   </el-tag>
                 </div>
               </template>
@@ -447,9 +450,12 @@ const statusMap = {
   width: 500px;
   height: 400px;
   overflow: auto;
-  .el-tag {
+  :deep(.el-tag) {
     margin: 5px 0;
     width: 100%;
+    .el-tag__content {
+      width: 100%;
+    }
   }
 }
 
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index e805ca4..6a435a1 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -43,6 +43,20 @@ export const cmdNameMap = {
   transfer_x_origin: 'x轴回原点',
   door_origin: '门电机回原点',
   dual_robot_origin: '加液机械臂回原点',
+  move_to_anneal_area: '移至退火位',
+  beep_open: '蜂鸣器开启',
+  beep_close: '蜂鸣器关闭',
+  enable_all_motor: '使能所有电机',
+  disable_all_motor: '失能所有电机',
+  stop_all_motor: '停止所有电机',
+  x_enable: '使能x轴电机',
+  x_disable: '失能x轴电机',
+  z_enable: '使能z轴电机',
+  z_disable: '失能z轴电机',
+  liquid_motor_enable: '使能加液臂电机',
+  liquid_motor_disable: '失能加液臂电机',
+  door_enable: '使能门电机',
+  door_disable: '失能门电机',
 
 }
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 0a345fc..30e5ab4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,7 +11,7 @@ const router = createRouter({
 
 router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
   const systemStore = useSystemStore()
-  if (getToken() && (systemStore.systemStatus.currentUser?.username || import.meta.env.FT_NODE_ENV !== 'prod')) {
+  if (getToken() && systemStore.systemStatus.currentUser?.username) {
     if (to.name === 'login') {
       next({ name: from.name })
     }
diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts
index 102d852..ef2a011 100644
--- a/src/stores/systemStore.ts
+++ b/src/stores/systemStore.ts
@@ -226,6 +226,7 @@ export const useSystemStore = defineStore('system', {
   actions: {
     insertLog(log: System.SystemLog) {
       this.systemLogList.unshift(log)
+      this.systemLogList = this.systemLogList.slice(0, 200)
     },
     updateDebug() {
       this.isDebug = !this.isDebug
diff --git a/src/types/home.d.ts b/src/types/home.d.ts
index 0523755..7456e78 100644
--- a/src/types/home.d.ts
+++ b/src/types/home.d.ts
@@ -14,7 +14,7 @@ declare namespace Home {
     heatTemperature: number | undefined
   }
   interface TrayTubeParams {
-    trayUuid: string
+    trayUuid?: string
     tubes: {
       columnNum: number
       addSolution?: boolean
diff --git a/src/types/system.d.ts b/src/types/system.d.ts
index 51dd50a..7b5e555 100644
--- a/src/types/system.d.ts
+++ b/src/types/system.d.ts
@@ -1,5 +1,4 @@
 declare namespace System {
-  import Craft = CraftTypes.Craft
 
   interface SystemStore {
     systemStatus: SystemStatus
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 280ad2d..a9b112e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,6 +2,7 @@
 import { startCraft } from 'apis/crafts'
 import { stopTask } from 'apis/home'
 import AddLiquid from 'components/home/AddLiquid/index.vue'
+import ExtractLiquid from 'components/home/ExtractLiquid/index.vue'
 import FillSolution from 'components/home/FillSolution/index.vue'
 import SelectCraft from 'components/home/SelectCraft/index.vue'
 import SetTemperature from 'components/home/SetTemperature/index.vue'
@@ -121,6 +122,8 @@ const addLiquidVisible = ref(false)
 
 const cleanVisible = ref(false)
 
+const extractLiquidVisible = ref(false)
+
 const commandHandle = async (command: string, params?: unknown) => {
   currentCommandId = Date.now().toString()
   const data = {
@@ -138,86 +141,119 @@ const commandHandle = async (command: string, params?: unknown) => {
       <Tube v-for="(item, index) in systemStore.systemStatus.heatModule" :key="item.moduleCode" :data="item" @select-change="homeStore.selectChange(index)" @set-temperature="setTemperature(item)" />
     </div>
     <div class="button-box">
-      <ft-button size="large" :click-handle="() => commandHandle('door_open')">
-        开门
-      </ft-button>
-
-      <ft-button size="large" :click-handle="() => commandHandle('door_close')">
-        关门
-      </ft-button>
-
-      <ft-button size="large" @click="startExperimentHandle">
-        开始记录
-      </ft-button>
-      <ft-button size="large" :click-handle="stopExperimentHandle">
-        结束记录
-      </ft-button>
-
-      <ft-button size="large" @click="selectCraft">
-        选择预设
-      </ft-button>
-
-      <ft-button size="large" :click-handle="executeCraftHandle">
-        执行预设
-      </ft-button>
-
-      <ft-button size="large" @click="cleanVisible = true">
-        开始清洗
-      </ft-button>
-
-      <ft-button size="large" @click=" fillSolutionVisible = true">
-        预充管路
-      </ft-button>
-
-      <ft-button size="large" @click="addLiquidVisible = true">
-        添加溶液
-      </ft-button>
-
-      <ft-button size="large" :click-handle="() => commandHandle('liquid_reduce')">
-        抽取溶液
-      </ft-button>
-      <ft-button size="large" :click-handle="() => commandHandle('move_to_heat_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
-        移至加热位
-      </ft-button>
-
-      <ft-button size="large" :click-handle="() => commandHandle('move_to_solution_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
-        移至加/排液位
-      </ft-button>
-      <ft-button size="large" :click-handle="() => commandHandle('move_to_feed_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
-        移至上/下料区
-      </ft-button>
-
-      <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('heat_start', { heatModuleCode: selectedHeatArea!.value })">
-        开始加热
-      </ft-button>
-
-      <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('heat_stop', { heatModuleCode: selectedHeatArea!.value })">
-        停止加热
-      </ft-button>
-
-      <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('fan_start', { heatModuleCode: selectedHeatArea!.value })">
-        开始降温
-      </ft-button>
-
-      <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('fan_stop', { heatModuleCode: selectedHeatArea!.value })">
-        停止降温
-      </ft-button>
-
-      <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_start', { heatModuleCode: selectedHeatArea!.value })">
-        开始烘干
-      </ft-button>
-
-      <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_stop', { heatModuleCode: selectedHeatArea!.value })">
-        停止烘干
-      </ft-button>
-
-      <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_start', { heatModuleCode: selectedHeatArea!.value })">
-        开始退火
-      </ft-button>
-
-      <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_stop', { heatModuleCode: selectedHeatArea!.value })">
-        停止退火
-      </ft-button>
+      <el-row style="width: 100%; height: 100%" :gutter="20">
+        <el-col :span="6">
+          <div style="display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);height: 100%">
+            <ft-button size="large" :click-handle="() => commandHandle('door_open')">
+              开门
+            </ft-button>
+
+            <ft-button size="large" :click-handle="() => commandHandle('door_close')">
+              关门
+            </ft-button>
+
+            <ft-button size="large" :click-handle="() => commandHandle('move_to_heat_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
+              移至加热位
+            </ft-button>
+
+            <ft-button size="large" :click-handle="() => commandHandle('move_to_liquid_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
+              移至加/排液位
+            </ft-button>
+            <ft-button size="large" :click-handle="() => commandHandle('move_to_feed_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
+              移至上/下料区
+            </ft-button>
+            <ft-button size="large" :click-handle="() => commandHandle('move_to_anneal_area', { heatModuleCode: selectedHeatArea?.value || undefined })">
+              移至退火位
+            </ft-button>
+          </div>
+        </el-col>
+        <el-col :span="6" style="display: grid; gap: 10px; grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(2, 1fr)">
+          <div style="display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);height: 100%">
+            <ft-button size="large" @click="startExperimentHandle">
+              开始记录
+            </ft-button>
+            <ft-button size="large" :click-handle="stopExperimentHandle">
+              结束记录
+            </ft-button>
+
+            <ft-button size="large" @click="selectCraft">
+              选择预设
+            </ft-button>
+
+            <ft-button size="large" :click-handle="executeCraftHandle">
+              执行预设
+            </ft-button>
+          </div>
+          <div style="display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr)">
+            <ft-button size="large" @click="cleanVisible = true">
+              开始清洗
+            </ft-button>
+
+            <ft-button size="large" @click=" fillSolutionVisible = true">
+              预充管路
+            </ft-button>
+
+            <ft-button size="large" @click="addLiquidVisible = true">
+              添加溶液
+            </ft-button>
+
+            <ft-button size="large" @click="extractLiquidVisible = true">
+              抽取溶液
+            </ft-button>
+          </div>
+        </el-col>
+
+        <el-col :span="6">
+          <div style="display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);height: 100%">
+            <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('heater_start', { heatModuleCode: selectedHeatArea!.value })">
+              开始加热
+            </ft-button>
+
+            <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('heater_stop', { heatModuleCode: selectedHeatArea!.value })">
+              停止加热
+            </ft-button>
+
+            <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('fan_start', { heatModuleCode: selectedHeatArea!.value })">
+              开始降温
+            </ft-button>
+
+            <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('fan_stop', { heatModuleCode: selectedHeatArea!.value })">
+              停止降温
+            </ft-button>
+
+            <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_start', { heatModuleCode: selectedHeatArea!.value })">
+              开始烘干
+            </ft-button>
+
+            <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_stop', { heatModuleCode: selectedHeatArea!.value })">
+              停止烘干
+            </ft-button>
+
+            <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_start', { heatModuleCode: selectedHeatArea!.value })">
+              开始退火
+            </ft-button>
+
+            <ft-button size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_stop', { heatModuleCode: selectedHeatArea!.value })">
+              停止退火
+            </ft-button>
+          </div>
+        </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>
+
+            <ft-button size="large" :click-handle="() => commandHandle('z_origin')">
+              z轴回原点
+            </ft-button>
+
+            <ft-button size="large" :click-handle="() => commandHandle('liquid_motor_origin')">
+              加液臂回原点
+            </ft-button>
+          </div>
+        </el-col>
+      </el-row>
     </div>
 
     <StartExperiment v-if="startVisible" @ok="startVisible = false" @cancel="startVisible = false" />
@@ -225,6 +261,7 @@ const commandHandle = async (command: string, params?: unknown) => {
     <SelectCraft v-if="selectCraftVisible" @ok="selectCraftVisible = false" @cancel="selectCraftVisible = false" />
     <SetTemperature v-if="setTemperatureVisible" @ok="setTemperatureVisible = false" @cancel="setTemperatureVisible = false" />
     <AddLiquid v-if="addLiquidVisible" @ok="addLiquidVisible = false" @cancel="addLiquidVisible = false" />
+    <ExtractLiquid v-if="extractLiquidVisible" @ok="extractLiquidVisible = false" @cancel="extractLiquidVisible = false" />
     <FillSolution v-if="fillSolutionVisible" @ok="fillSolutionVisible = false" @cancel="fillSolutionVisible = false" />
   </div>
 </template>
@@ -232,7 +269,7 @@ const commandHandle = async (command: string, params?: unknown) => {
 <style scoped lang="scss">
 .home-page {
       .page-top{
-        height: 70%;
+        height: 65%;
         border-radius: 8px;
         padding: 0 10px 10px;
         display: grid;
@@ -243,11 +280,11 @@ const commandHandle = async (command: string, params?: unknown) => {
         align-items: center;
       }
         .button-box {
-          height: 30%;
-          display: grid;
-          grid-template-columns: repeat(6, 1fr); /* 创建3列等宽轨道 */
-          grid-template-rows: repeat(4, 1fr);   /* 创建2行自动高度 */
-          gap: 10px 20px;
+          height: 35%;
+          //display: grid;
+          //grid-template-columns: repeat(6, 1fr); /* 创建3列等宽轨道 */
+          //grid-template-rows: repeat(4, 1fr);   /* 创建2行自动高度 */
+          //gap: 10px 20px;
           .ft-button {
             //width: 100px;
             font-weight: bold;