feat: 调试功能实现

.env.dev

@@ -2,5 +2,5 @@
 
 FT_NODE_ENV=dev
 
-FT_WS_URL=ws://192.168.1.199:8080/ws
+FT_WS_URL=ws://192.168.1.199:9527
 FT_PROXY=http://192.168.1.199:8080

package.json

@@ -8,6 +8,7 @@
   "keywords": [],
   "main": "index.js",
   "scripts": {
+    "dev:server": "node server/index.js",
     "dev": "vite --mode dev",
     "dev:test": "vite --mode test",
     "dev:prod": "vite --mode prod",
@@ -30,6 +31,7 @@
     "axios": "1.8.2",
     "cssnano": "^7.0.6",
     "element-plus": "^2.9.5",
+    "express": "^5.1.0",
     "konva": "^9.3.18",
     "lodash": "^4.17.21",
     "pinia": "^3.0.1",
@@ -43,7 +45,8 @@
     "postcss-write-svg": "^3.0.1",
     "tailwindcss": "^4.0.12",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "ws": "^8.18.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.3.0",

server/index.js

@@ -0,0 +1,73 @@
+// const express = require('express')
+import express from 'express'
+import { WebSocketServer } from 'ws'
+
+const app = express()
+
+const PORT = 8080 // 可根据需要更改端口号
+app.listen(PORT, () => {
+  console.log(`服务器已启动，正在监听端口 ${PORT}`)
+})
+app.use(express.json())
+
+const levels = ['info', 'warn', 'success', 'error', 'finish']
+
+app.post('/api/debug/cmd', (req, res) => {
+  const { commandId, command, params } = req.body
+  console.log('收到命令:', command, '参数:', params)
+
+  // 模拟返回数据
+  const mockResponse = {
+    code: '0',
+    msg: '成功',
+    data: null,
+  }
+
+  let messageNum = 0
+
+  // 异步广播消息
+  setTimeout(() => {
+    res.json(mockResponse)
+    const poll = setInterval(() => {
+      if (messageNum === 10) {
+        clearInterval(poll)
+      }
+      broadcast({
+        type: 'notification',
+        data: {
+          commandId,
+          command,
+          level: levels[Math.floor(Math.random() * levels.length)],
+          title: `步骤${messageNum}执行完成`,
+          content: `具体信息${messageNum}`,
+          dateTime: new Date().toLocaleString(),
+        },
+      })
+      messageNum++
+    }, Math.floor(Math.random() * (1000 - 500 + 1)) + 500)
+  }, 1000)
+})
+
+const wss = new WebSocketServer({ port: 9527 })
+
+const clients = new Set()
+wss.on('connection', (ws) => {
+  clients.add(ws)
+  ws.on('close', () => {
+    console.log('客户端断开')
+  })
+})
+
+function broadcast(message) {
+  try {
+    const jsonMessage = JSON.stringify(message)
+    clients.forEach((client) => {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(jsonMessage)
+      }
+    })
+  }
+  catch (e) {
+    console.log('广播发送失败:', e, message)
+  }
+}

src/apis/system.ts

@@ -0,0 +1,9 @@
+import http from 'libs/http'
+
+export interface Params {
+  commandId: string
+  command: string
+  params: any
+}
+export const debugControl = (params: Params): Promise<any> => http.post('/debug/cmd', params)
+export const control = (params: Params): Promise<any> => http.post('/cmd', params)

src/assets/styles/element.scss

@@ -2,8 +2,6 @@
   --el-font-size-base: 14px;
   --el-button-size: 30px;
 
-
-
   --el-color-primary:  #1989FA;
   //--el-button-active-bg-color: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);
   //--text-color-primary: #17213c;

src/components/common/FTButton/index.vue

@@ -78,7 +78,7 @@ defineExpose({
   z-index: 100;
 }
 .my-button {
-  height: var(--el-button-size);
+  height: 30px;
   padding: 5px 20px;
   border-radius: 5px;
   display: flex;

src/components/common/FTStream/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cmdNameMap } from 'libs/utils'
-import { useSystemStore } from 'stores/useSystemStore'
+import { useSystemStore } from 'stores/systemStore'
 import { computed, nextTick, ref, watch } from 'vue'
 
 defineProps({
@@ -12,7 +12,7 @@ defineProps({
 
 const systemStore = useSystemStore()
 const title = computed(() => {
-  return cmdNameMap[systemStore.systemList[0]?.cmdCode as keyof typeof cmdNameMap] || systemStore.systemList[0]?.cmdCode
+  return cmdNameMap[systemStore.systemList[0]?.command as keyof typeof cmdNameMap] || systemStore.systemList[0]?.command
 })
 
 const maskBodyRef = ref<HTMLElement | null>(null)
@@ -20,8 +20,9 @@ const maskRef = ref<HTMLElement | null>(null)
 const maskHeaderRef = ref<HTMLElement | null>(null)
 
 const statusMap = {
-  fail: 'danger',
+  info: 'default',
   error: 'danger',
+  warn: 'warning',
   success: 'success',
   finish: 'primary',
   SEND: 'primary',
@@ -111,7 +112,7 @@ const handleMouseUp = () => {
               v-for="item in systemStore.systemList" :key="item"
               :timestamp="JSON.stringify(item.content)"
             >
-              <el-tag :type="statusMap[item.status]" class="mask-tag">
+              <el-tag :type="statusMap[item.level]" class="mask-tag">
                 {{ item.title }}
               </el-tag>
             </el-timeline-item>
@@ -124,32 +125,32 @@ const handleMouseUp = () => {
 
 <style scoped lang="scss">
 .mask {
-  width: 800px;
-  height: 500px;
-  padding: 20px;
+  width: 350px;
+  height: 200px;
+  padding: 5px 10px;
   background: #fff;
   box-shadow: var(--el-box-shadow-light);
   position: absolute;
-  bottom: 130px;
-  right: 100px;
-  border-radius: 10px;
+  bottom: 20px;
+  right: 20px;
+  border-radius: 8px;
   font-size: 30px;
   .mask-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 50px;
-    font-size: 30px;
+    height: 30px;
+    font-size: 16px;
     border-bottom: 1px solid #ddd;
     cursor: move; // 添加鼠标指针样式
     .el-icon svg{
-      width: 30px;
+      width: 18px;
       cursor: pointer;
     }
   }
   .mask-body {
-    padding: 10px;
-    height: calc(100% - 41px);
+    padding: 5px 2px;
+    height: calc(100% - 31px);
     overflow: auto;
   }
 }

src/layouts/default.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { authRoutes } from 'router/routes'
+import { useSystemStore } from 'stores/systemStore'
 import { useRouter } from 'vue-router'
 
+const systemStore = useSystemStore()
+
 const router = useRouter()
 </script>
 
@@ -20,6 +23,7 @@ const router = useRouter()
       </el-main>
     </el-container>
     <el-footer class="footer" />
+    <FtStream :visible="systemStore.streamVisible" />
   </el-container>
 </template>
 

src/libs/http.ts

@@ -26,7 +26,7 @@ http.interceptors.response.use(
   (response) => {
     if (
       response.status === 200
-      && response.data.code !== '00000'
+      && response.data.code !== '0'
     ) {
       // 返回错误拦截
       FtMessage.error(response.data.msg)

src/libs/utils.ts

@@ -1,33 +1,55 @@
+import { control, debugControl } from 'apis/system'
 import { FtMessage } from 'libs/message'
-import { socket } from 'libs/socket'
-import { useSystemStore } from 'stores/useSystemStore'
+import { useSystemStore } from 'stores/systemStore'
 
-export const sendControl = async (params: any) => {
-  if (!params.cmdId) {
-    params.cmdId = Date.now().toString()
+export const sendControl = async (params: any, type: 'debug' | 'control' = 'control') => {
+  if (!params.commandId) {
+    params.commandId = Date.now().toString()
   }
   const systemStore = useSystemStore()
 
   systemStore.systemList = []
-  const cmdName = cmdNameMap[params.cmdCode as keyof typeof cmdNameMap] || params.cmdCode
+  const cmdName = cmdNameMap[params.command as keyof typeof cmdNameMap] || params.command
 
-  socket.init((data: any) => {
-    if (data.cmdId === params.cmdId) {
-      systemStore.pushSystemList(data)
-    }
-  }, 'cmd_debug')
-  socket.init((data: any) => {
-    if (data.cmdId === params.cmdId) {
-      systemStore.pushSystemList(data)
-    }
-  }, 'cmd_response')
-  // TODO 接口调用
-  // await (type === 'debug' ? debugControl(params) : control(params))
+  await (type === 'debug' ? debugControl(params) : control(params))
   systemStore.updateStreamVisible(true)
   FtMessage.success(`[${cmdName}]已发送`)
 }
 
 export const cmdNameMap = {
+  door_open: '开门',
+  door_close: '关门',
+  door_stop: '停止开关门',
+  liquid_arm_rotation: '加液机械臂启动',
+  liquid_arm_reset: '加液机械臂复位',
+  liquid_arm_stop: '加液机械臂停止',
+  liquid_pump_start: '启动加液泵',
+  liquid_pump_stop: '停止加液泵',
+  liquid_pump_pre_filling: '预充加液头',
+  liquid_pump_pre_evacuation: '排空加液头',
+  shaker_start: '摇匀',
+  shaker_stop: '停止摇匀',
+  pallet_elevator_lift_up: '托盘上升',
+  pallet_elevator_lift_down: '托盘下降',
+  pallet_elevator_stop: '托盘停止',
+  heater_start: '开始加热',
+  heater_stop: '停止加热',
+  debug_heater_start_heat_maintaining: '启动恒温',
+  debug_heater_stop_heat_maintaining: '停止恒温',
+  debug_cold_trap_start_refrigeration: '启动制冷',
+  debug_cold_trap_stop_refrigeration: '停止制冷',
+  debug_fan_start: '打开风扇',
+  debug_fan_stop: '关闭风扇',
+  debug_transportation_arm_move: '龙门架机械臂移动',
+  debug_transportation_arm_stop: '龙门架机械臂停止移动',
+  debug_transportation_arm_reset: '龙门架机械臂复位',
+  debug_holding_jaw_open: '打开夹爪',
+  debug_holding_jaw_pause: '暂停夹爪',
+  debug_holding_jaw_close: '闭合夹爪',
+  debug_cover_elevator_lift_up: '拍子抬升',
+  debug_cover_elevator_stop: '拍子停止',
+  debug_cover_elevator_reset: '拍子复位',
+  debug_cover_elevator_lift_down: '拍子下降',
 
 }
 

src/stores/debugStore.ts

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia'
+
+export const useDebugStore = defineStore('debug', {
+  state: () => ({
+    formData: {
+      // 加液机械臂
+      liquidArmData: {
+        largeArmAngle: 10,
+        smallArmAngle: 20,
+        largeArmRotationRate: 10,
+        smallArmRotationRate: 10,
+      },
+      // 加液泵
+      liquidPumpData: {
+        index: 1,
+        rate: 3,
+      },
+      // 摇匀速度
+      shakeSpeed: {
+        rate: 10,
+      },
+      // 加热区
+      heatArea: {
+        index: 1,
+        heatMotorData: {
+          distance: 1,
+          rate: 10,
+        },
+        heatTemperature: {
+          temperature: 20,
+        },
+      },
+      // 转运模组
+      transferModule: {
+        // X轴
+        xMotorData: {
+          xDimDistance: 1,
+          xDimRate: 10,
+        },
+        // y轴
+        yMotorData: {
+          yDimDistance: 1,
+          yDimRate: 10,
+        },
+        // z轴
+        zMotorData: {
+          zDimDistance: 1,
+          zDimRate: 10,
+        },
+        // 夹爪
+        JawData: {
+          rate: 10,
+        },
+      },
+      // 拍子模组
+      lidData: {
+        rate: 10,
+        distance: 19,
+      },
+    },
+  }),
+  actions: {
+  },
+})

src/stores/useSystemStore.ts → src/stores/systemStore.ts

@@ -9,7 +9,7 @@ export const useSystemStore = defineStore('system', {
     },
     isDebug: import.meta.env.FT_NODE_ENV === 'dev',
     streamVisible: false,
-    systemList: [{ cmdCode: '' }],
+    systemList: [],
   }),
   actions: {
     updateStreamVisible(bool: boolean) {

src/views/debug/index.vue

@@ -1,3 +1,788 @@
+<script lang="ts" setup>
+import { socket } from 'libs/socket'
+import { sendControl } from 'libs/utils'
+import { useDebugStore } from 'stores/debugStore'
+import { useSystemStore } from 'stores/systemStore'
+import { onMounted, onUnmounted } from 'vue'
+
+const systemStore = useSystemStore()
+
+const debugStore = useDebugStore()
+
+onMounted(() => {
+  socket.init(receiveMessage, 'notification')
+})
+
+onUnmounted(() => {
+  socket.unregisterCallback(receiveMessage, 'notification')
+})
+
+const receiveMessage = (data: any) => {
+  systemStore.pushSystemList(data)
+}
+
+const pallet_elevator_lift_up = async () => {
+  const params = {
+    command: 'pallet_elevator_lift_up',
+    params: {
+      index: debugStore.formData.heatArea.index,
+      ...debugStore.formData.heatArea.heatMotorData,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const pallet_elevator_lift_down = async () => {
+  const params = {
+    command: 'pallet_elevator_lift_down',
+    params: {
+      index: debugStore.formData.heatArea.index,
+      ...debugStore.formData.heatArea.heatMotorData,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const pallet_elevator_stop = async () => {
+  const params = {
+    command: 'pallet_elevator_stop',
+    params: {
+      index: debugStore.formData.heatArea.index,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const heater_start = async () => {
+  const params = {
+    command: 'heater_start',
+    params: {
+      index: debugStore.formData.heatArea.index,
+      ...debugStore.formData.heatArea.heatTemperature,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+const heater_stop = async () => {
+  const params = {
+    command: 'heater_stop',
+    params: {
+      index: debugStore.formData.heatArea.index,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_heater_start_heat_maintaining = async () => {
+  const params = {
+    command: 'debug_heater_start_heat_maintaining',
+    params: {
+      index: debugStore.formData.heatArea.index,
+      ...debugStore.formData.heatArea.heatTemperature,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_heater_stop_heat_maintaining = async () => {
+  const params = {
+    command: 'debug_heater_stop_heat_maintaining',
+    params: {
+      index: debugStore.formData.heatArea.index,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_fan_start = async () => {
+  const params = {
+    command: 'debug_fan_start',
+    params: {
+      index: debugStore.formData.heatArea.index,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_fan_stop = async () => {
+  const params = {
+    command: 'debug_fan_stop',
+    params: {
+      index: debugStore.formData.heatArea.index,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_cover_elvator_lift_up = async () => {
+  const params = {
+    command: 'debug_cover_elvator_lift_up',
+    params: {
+      ...debugStore.formData.lidData,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_cover_elvator_lift_down = async () => {
+  const params = {
+    command: 'debug_cover_elvator_lift_down',
+    params: {
+      ...debugStore.formData.lidData,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_cover_elvator_reset = async () => {
+  const params = {
+    command: 'debug_cover_elvator_reset',
+    params: {},
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_cover_elvator_stop = async () => {
+  const params = {
+    command: 'debug_cover_elvator_stop',
+    params: {},
+  }
+  await sendControl(params, 'debug')
+}
+
+const liquid_arm_reset = async () => {
+  const params = {
+    command: 'liquid_arm_reset',
+    params: {
+      target: ['largeArm', 'smallArm'],
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const liquid_arm_rotation = async () => {
+  const params = {
+    command: 'liquid_arm_rotation',
+    params: {
+      ...debugStore.formData.liquidArmData,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const liquid_arm_stop = async () => {
+  const params = {
+    command: 'liquid_arm_stop',
+    params: {
+      target: ['largeArm', 'smallArm'],
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const liquid_pump_pre_filling = async () => {
+  const params = {
+    command: 'liquid_pump_pre_filling',
+    params: {
+      index: debugStore.formData.liquidPumpData.index,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const liquid_pump_pre_evacuation = async () => {
+  const params = {
+    command: 'liquid_pump_pre_evacuation',
+    params: {
+      index: debugStore.formData.liquidPumpData.index,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const liquid_pump_start = async () => {
+  const params = {
+    command: 'liquid_pump_start',
+    params: {
+      ...debugStore.formData.liquidPumpData,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const liquid_pump_stop = async () => {
+  const params = {
+    command: 'liquid_pump_stop',
+    params: {
+      index: debugStore.formData.liquidPumpData.index,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const shaker_start = async () => {
+  const params = {
+    command: 'shaker_start',
+    params: {
+      ...debugStore.formData.shakeSpeed,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const shaker_stop = async () => {
+  const params = {
+    command: 'shaker_stop',
+    params: {},
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_transportation_arm_reset = async (motor: 'x' | 'y' | 'z') => {
+  const params = {
+    command: 'debug_transportation_arm_reset',
+    params: {
+      dim: [motor],
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_transportation_arm_move = async (motor: 'x' | 'y' | 'z') => {
+  const params = {
+    command: 'debug_transportation_arm_move',
+    params: {
+      ...debugStore.formData.transferModule[`${motor}MotorData`],
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_transportation_arm_stop = async (motor: 'x' | 'y' | 'z') => {
+  const params = {
+    command: 'debug_transportation_arm_stop',
+    params: {
+      dim: [motor],
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_holding_jaw_open = async () => {
+  const params = {
+    command: 'debug_holding_jaw_open',
+    params: {
+      ...debugStore.formData.transferModule.JawData,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_holding_jaw_close = async () => {
+  const params = {
+    command: 'debug_holding_jaw_close',
+    params: {
+      ...debugStore.formData.transferModule.JawData,
+    },
+  }
+  await sendControl(params, 'debug')
+}
+
+const debug_holding_jaw_pause = async () => {
+  const params = {
+    command: 'debug_holding_jaw_pause',
+    params: {},
+  }
+  await sendControl(params, 'debug')
+}
+
+const door_open = async () => {
+  const params = {
+    command: 'door_open',
+    params: {},
+  }
+  await sendControl(params, 'debug')
+}
+
+const door_close = async () => {
+  const params = {
+    command: 'door_close',
+    params: {},
+  }
+  await sendControl(params, 'debug')
+}
+
+const door_stop = async () => {
+  const params = {
+    command: 'door_stop',
+    params: {},
+  }
+  await sendControl(params, 'debug')
+}
+</script>
+
 <template>
-  调试
+  <div class="debug-content">
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>加热模组</span>
+              <div>
+                <el-select v-model="debugStore.formData.heatArea.index" style="width: 150px" placeholder="请选择区域">
+                  <el-option v-for="item in 6" :key="item" :label="`A${item}`" :value="item" />
+                </el-select>
+              </div>
+            </div>
+          </template>
+          <el-divider>升降电机</el-divider>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="距离">
+                <el-input v-model="debugStore.formData.heatArea.heatMotorData.distance">
+                  <template #append>
+                    mm
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="速度">
+                <el-input v-model="debugStore.formData.heatArea.heatMotorData.rate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+            </el-form>
+            <ft-button type="primary" :click-handle="pallet_elevator_lift_up">
+              上升
+            </ft-button>
+            <ft-button type="primary" :click-handle="pallet_elevator_lift_down">
+              下降
+            </ft-button>
+            <ft-button :click-handle="pallet_elevator_stop">
+              停止
+            </ft-button>
+          </div>
+          <el-divider>加热棒</el-divider>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="温度">
+                <el-input v-model="debugStore.formData.heatArea.heatTemperature.temperature">
+                  <template #append>
+                    ℃
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="heater_start">
+                  开始加热
+                </ft-button>
+                <ft-button :click-handle="heater_stop">
+                  停止加热
+                </ft-button>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="debug_heater_start_heat_maintaining">
+                  开始恒温
+                </ft-button>
+                <ft-button :click-handle="debug_heater_stop_heat_maintaining">
+                  停止恒温
+                </ft-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <el-divider>拍子</el-divider>
+          <div class="card-box">
+            <ft-button type="primary">
+              启动吸附
+            </ft-button>
+            <ft-button>
+              停止吸附
+            </ft-button>
+          </div>
+          <el-divider>风扇</el-divider>
+          <div class="card-box">
+            <ft-button type="primary" :click-handle="debug_fan_start">
+              打开风扇
+            </ft-button>
+            <ft-button :click-handle="debug_fan_stop">
+              关闭风扇
+            </ft-button>
+          </div>
+        </el-card>
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>拍子存放模组</span>
+            </div>
+          </template>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="速度">
+                <el-input v-model="debugStore.formData.lidData.rate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="距离">
+                <el-input v-model="debugStore.formData.lidData.distance">
+                  <template #append>
+                    mm
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="debug_cover_elvator_lift_up">
+                  抬升
+                </ft-button>
+                <ft-button type="primary" :click-handle="debug_cover_elvator_lift_down">
+                  下降
+                </ft-button>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="debug_cover_elvator_reset">
+                  复位
+                </ft-button>
+                <ft-button :click-handle="debug_cover_elvator_stop">
+                  停止
+                </ft-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>加液模组</span>
+            </div>
+          </template>
+          <el-divider>加液臂</el-divider>
+          <div class="card-box">
+            <el-form inline>
+              <el-form-item label="大臂速度">
+                <el-input v-model="debugStore.formData.liquidArmData.largeArmRotationRate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="大臂角度">
+                <el-input v-model="debugStore.formData.liquidArmData.largeArmAngle">
+                  <template #append>
+                    °
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="小臂速度">
+                <el-input v-model="debugStore.formData.liquidArmData.smallArmRotationRate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="小臂角度">
+                <el-input v-model="debugStore.formData.liquidArmData.smallArmAngle">
+                  <template #append>
+                    °
+                  </template>
+                </el-input>
+              </el-form-item>
+            </el-form>
+
+            <ft-button type="primary" :click-handle="liquid_arm_reset">
+              复位
+            </ft-button>
+            <ft-button type="primary" :click-handle="liquid_arm_rotation">
+              开始
+            </ft-button>
+            <ft-button :click-handle="liquid_arm_stop">
+              停止
+            </ft-button>
+          </div>
+          <el-divider>加液泵</el-divider>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="加液速度">
+                <el-input v-model="debugStore.formData.liquidPumpData.rate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="加液泵头">
+                <el-select v-model="debugStore.formData.liquidPumpData.index" aria-placeholder="请选择泵头">
+                  <el-option v-for="item in 8" :key="item" :label="item" :value="item" />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="liquid_pump_pre_filling">
+                  预充
+                </ft-button>
+                <ft-button :click-handle="liquid_pump_pre_evacuation">
+                  排空
+                </ft-button>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="liquid_pump_start">
+                  启动
+                </ft-button>
+                <ft-button :click-handle="liquid_pump_stop">
+                  停止
+                </ft-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <el-divider>摇匀</el-divider>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="摇匀速度">
+                <el-input v-model="debugStore.formData.shakeSpeed.rate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+            </el-form>
+            <ft-button type="primary" :click-handle="shaker_start">
+              开始
+            </ft-button>
+            <ft-button :click-handle="shaker_stop">
+              停止
+            </ft-button>
+          </div>
+        </el-card>
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>相机模组</span>
+            </div>
+          </template>
+          <div class="card-box">
+            <!--            <el-form> -->
+            <!--              <el-form-item label="速度"> -->
+            <!--                <el-input> -->
+            <!--                  <template #append> -->
+            <!--                    mm/s -->
+            <!--                  </template> -->
+            <!--                </el-input> -->
+            <!--              </el-form-item> -->
+            <!--              <el-form-item label="距离"> -->
+            <!--                <el-input> -->
+            <!--                  <template #append> -->
+            <!--                    ° -->
+            <!--                  </template> -->
+            <!--                </el-input> -->
+            <!--              </el-form-item> -->
+            <!--              <el-form-item> -->
+            <!--                <ft-button type="primary"> -->
+            <!--                  抬升 -->
+            <!--                </ft-button> -->
+            <!--                <ft-button type="primary"> -->
+            <!--                  下降 -->
+            <!--                </ft-button> -->
+            <!--              </el-form-item> -->
+            <!--              <el-form-item> -->
+            <!--                <ft-button type="primary"> -->
+            <!--                  复位 -->
+            <!--                </ft-button> -->
+            <!--                <ft-button> -->
+            <!--                  停止 -->
+            <!--                </ft-button> -->
+            <!--              </el-form-item> -->
+            <!--            </el-form> -->
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>转运模组</span>
+            </div>
+          </template>
+          <el-divider>X轴电机</el-divider>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="距离">
+                <el-input v-model="debugStore.formData.transferModule.xMotorData.xDimDistance">
+                  <template #append>
+                    mm
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="速度">
+                <el-input v-model="debugStore.formData.transferModule.xMotorData.xDimRate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="() => debug_transportation_arm_reset('x')">
+                  回原点
+                </ft-button>
+                <ft-button type="primary" :click-handle="() => debug_transportation_arm_move('x')">
+                  开始
+                </ft-button>
+                <ft-button :click-handle="() => debug_transportation_arm_stop('x')">
+                  停止
+                </ft-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <el-divider>Y轴电机</el-divider>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="距离">
+                <el-input v-model="debugStore.formData.transferModule.yMotorData.yDimDistance">
+                  <template #append>
+                    mm
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="速度">
+                <el-input v-model="debugStore.formData.transferModule.yMotorData.yDimRate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="() => debug_transportation_arm_reset('y')">
+                  回原点
+                </ft-button>
+                <ft-button type="primary" :click-handle="() => debug_transportation_arm_move('y')">
+                  开始
+                </ft-button>
+                <ft-button :click-handle="() => debug_transportation_arm_stop('y')">
+                  停止
+                </ft-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <el-divider>Z轴电机</el-divider>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="距离">
+                <el-input v-model="debugStore.formData.transferModule.zMotorData.zDimDistance">
+                  <template #append>
+                    mm
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="速度">
+                <el-input v-model="debugStore.formData.transferModule.zMotorData.zDimRate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="() => debug_transportation_arm_reset('z')">
+                  回原点
+                </ft-button>
+                <ft-button type="primary" :click-handle="() => debug_transportation_arm_move('z')">
+                  开始
+                </ft-button>
+                <ft-button :click-handle="() => debug_transportation_arm_stop('z')">
+                  停止
+                </ft-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <el-divider>夹爪舵机</el-divider>
+          <div class="card-box">
+            <el-form>
+              <el-form-item label="速度">
+                <el-input v-model="debugStore.formData.transferModule.JawData.rate">
+                  <template #append>
+                    mm/s
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item>
+                <ft-button type="primary" :click-handle="debug_holding_jaw_open">
+                  打开
+                </ft-button>
+                <ft-button type="primary" :click-handle="debug_holding_jaw_close">
+                  闭合
+                </ft-button>
+                <ft-button :click-handle="debug_holding_jaw_pause">
+                  停止
+                </ft-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>门</span>
+            </div>
+          </template>
+          <div class="card-box">
+            <ft-button type="primary" :click-handle="door_open">
+              开门
+            </ft-button>
+            <ft-button type="primary" :click-handle="door_close">
+              关门
+            </ft-button>
+            <ft-button :click-handle="door_stop">
+              停止
+            </ft-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.debug-content {
+  overflow: auto;
+  max-height: 100%;
+}
+
+.el-card {
+  margin-bottom: 10px;
+}
+
+:deep(.el-card__header) {
+  padding: 5px 10px;
+}
+
+.el-input, .el-select {
+  width: 100%;
+}
+
+.el-form-item {
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+
+.card-box {
+  //display: flex;
+  //align-items: center;
+}
+
+:deep(.el-input-group__append) {
+  padding: 0 10px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.select-label {
+  margin-right: 10px;
+}
+:deep(.el-card__body) {
+  padding: 10px;
+}
+</style>