color-titration-web/src/views/debug/index.vue

<script lang="ts" setup>
import { socket } from 'libs/socket'
import { cmdNameMap, formatDateTime } from 'libs/utils'
import { useDebugStore } from 'stores/debugStore'
import { useSystemStore } from 'stores/systemStore'
import { onMounted, onUnmounted, ref } from 'vue'

const systemStore = useSystemStore()

const debugStore = useDebugStore()

let currentCommandId = ''

onMounted(() => {
  socket.init(receiveMessage, 'cmd_debug')
  socket.init(receiveMessage, 'cmd_response')
})

onUnmounted(() => {
  socket.unregisterCallback(receiveMessage, 'cmd_debug')
  socket.unregisterCallback(receiveMessage, 'cmd_response')
})

const receiveMessage = (data: Socket.cmdData) => {
  data.commandId === currentCommandId && systemStore.pushSystemList(data)
  if (['start', 'success', 'fail'].includes(data.status)) {
    const cmdName = cmdNameMap[data.command as keyof typeof cmdNameMap] || data.command
    systemStore.insertLog({ cmdName, status: data.status as System.SystemLog['status'], time: formatDateTime() })
  }
}

const savePositionVisible = ref(false)

const commandHandle = async (command: string, params?: unknown) => {
  currentCommandId = Date.now().toString()
  const data = {
    commandId: currentCommandId,
    command,
    params,
  }
  await debugStore.sendControl(data)
}
</script>

<template lang="pug">
  div.debug-content
    el-row.button-content
      el-col(:span="8")
        div.button-box
          ft-button(type="primary", :click-handle="() => commandHandle('enable_all_motor')")
            | 使能所有电机
      el-col(:span="8")
        div.button-box
          ft-button(type="primary", :click-handle="() => commandHandle('disable_all_motor')")
            | 失能所有电机
      el-col(:span="8")
        div.button-box
          ft-button(type="primary", :click-handle="() => commandHandle('stop_all_motor')")
            | 停止所有电机
    el-row(:gutter="10", class="card-content")
      el-col(:span="8")
        el-card
          template(#header)
            div.card-header
              span 转运模组
          el-divider 机械臂-大臂
          div.card-box
            el-form
              el-form-item(label="角度")
                el-input(v-model="debugStore.formData.transferModule.bigMotorData.relative.angle", type="number", placeholder="请输入角度")
                  template(#append)
                    | °
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.transferModule.bigMotorData.relative.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="循环")
                el-input(v-model="debugStore.formData.transferModule.bigMotorData.relative.times", type="number", placeholder="请输入次数")
                  template(#append)
                    | 次
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('robotic_arm_big_move_by', { ...debugStore.formData.transferModule.bigMotorData.relative, angle: debugStore.formData.transferModule.bigMotorData.relative.angle })")
                  | 右转
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('robotic_arm_big_stop')")
                  | 停止
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('robotic_arm_big_move_by', { ...debugStore.formData.transferModule.bigMotorData.relative, angle: -(debugStore.formData.transferModule.bigMotorData.relative.angle ?? 0) })")
                  | 左转
                ft-button(type="primary", size="small", :click-handle="() => commandHandle('robotic_arm_big_origin')")
                  | 回原点
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('robotic_arm_big_enable')")
                  | 电机使能
                ft-button(size="small", :click-handle="() => commandHandle('robotic_arm_big_disable')")
                  | 电机失能
              el-form-item(label="角度")
                el-input(v-model="debugStore.formData.transferModule.bigMotorData.absolute.angle", type="number", placeholder="请输入目标角度")
                  template(#append)
                    | °
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.transferModule.bigMotorData.absolute.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('robotic_arm_big_move_to', debugStore.formData.transferModule.bigMotorData.absolute)")
                  | 开始
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('robotic_arm_big_stop')")
                  | 停止
          el-divider 机械臂-小臂
          div.card-box
            el-form
              el-form-item(label="角度")
                el-input(v-model="debugStore.formData.transferModule.smallMotorData.relative.angle", type="number", placeholder="请输入角度")
                  template(#append)
                    | °
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.transferModule.smallMotorData.relative.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="循环")
                el-input(v-model="debugStore.formData.transferModule.smallMotorData.relative.times", type="number", placeholder="请输入次数")
                  template(#append)
                    | 次
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('robotic_arm_small_move_by', { ...debugStore.formData.transferModule.smallMotorData.relative, distance: debugStore.formData.transferModule.smallMotorData.relative.angle })")
                  | 前进
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('robotic_arm_small_stop')")
                  | 停止
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('robotic_arm_small_move_by', { ...debugStore.formData.transferModule.smallMotorData.relative, distance: -(debugStore.formData.transferModule.smallMotorData.relative.angle ?? 0) })")
                  | 后退
                ft-button(type="primary", size="small", :click-handle="() => commandHandle('robotic_arm_small_origin')")
                  | 回原点
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('robotic_arm_small_enable')")
                  | 电机使能
                ft-button(size="small", :click-handle="() => commandHandle('robotic_arm_small_disable')")
                  | 电机失能
          el-divider Z轴电机
          div.card-box
            el-form
              el-form-item(label="距离")
                el-input(v-model="debugStore.formData.transferModule.zMotorData.relative.distance", type="number", placeholder="请输入距离")
                  template(#append)
                    | mm
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.transferModule.zMotorData.relative.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="循环")
                el-input(v-model="debugStore.formData.transferModule.zMotorData.relative.times", type="number", placeholder="请输入次数")
                  template(#append)
                    | 次
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('z_move_by', { ...debugStore.formData.transferModule.zMotorData.relative, distance: debugStore.formData.transferModule.zMotorData.relative.distance })")
                  | 前进
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('z_stop')")
                  | 停止
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('z_move_by', { ...debugStore.formData.transferModule.zMotorData.relative, distance: -(debugStore.formData.transferModule.zMotorData.relative.distance ?? 0) })")
                  | 后退
                ft-button(type="primary", size="small", :click-handle="() => commandHandle('z_origin')")
                  | 回原点
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('z_enable')")
                  | 电机使能
                ft-button(size="small", :click-handle="() => commandHandle('z_disable')")
                  | 电机失能
          el-divider 夹爪电机
          div.card-box
            el-form
              el-form-item(label="距离")
                el-input(v-model="debugStore.formData.transferModule.clawMotorData.distance", type="number", placeholder="请输入距离")
                  template(#append)
                    | mm
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.transferModule.clawMotorData.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="循环")
                el-input(v-model="debugStore.formData.transferModule.clawMotorData.times", type="number", placeholder="请输入次数")
                  template(#append)
                    | 次
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('claw_open', { ...debugStore.formData.transferModule.clawMotorData, distance: debugStore.formData.transferModule.clawMotorData.distance })")
                  | 打开
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('claw_close', { ...debugStore.formData.transferModule.clawMotorData, distance: -(debugStore.formData.transferModule.clawMotorData.distance ?? 0) })")
                  | 闭合
      el-col(:span="8")
        el-card
          template(#header)
            div.card-header
              span 蠕动泵
          el-divider 陶瓷蠕动泵
          div.card-box
            el-form
              el-form-item(label="容量")
                el-input(v-model="debugStore.formData.peristalticPumpData.ceramicPump.volume", type="number", placeholder="请输入容量")
                  template(#append)
                    | mL
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.peristalticPumpData.ceramicPump.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="泵")
                el-select(v-model="debugStore.formData.peristalticPumpData.ceramicPump.pumpCode", placeholder="请选择泵")
                  el-option(v-for="item in 2", :key="item", :label="`泵-${item}`", :value="`ceramic_pump_${item}`")
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('ceramic_pump_open', { ...debugStore.formData.peristalticPumpData.ceramicPump, direction: 'forward' })")
                  | 正转
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('ceramic_pump_close')")
                  | 停止
                ft-button(size="small", type="primary", class="stop-button", :click-handle="() => commandHandle('ceramic_pump_open', { ...debugStore.formData.peristalticPumpData.ceramicPump, direction: 'backward' })")
                  | 反转
          el-divider 无刷蠕动泵
          div.card-box
            el-form
              el-form-item(label="容量")
                el-input(v-model="debugStore.formData.peristalticPumpData.brushlessPump.volume", type="number", placeholder="请输入容量")
                  template(#append)
                    | mL
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.peristalticPumpData.brushlessPump.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="泵")
                el-select(v-model="debugStore.formData.peristalticPumpData.brushlessPump.pumpCode", placeholder="请选择泵")
                  el-option(v-for="item in 10", :key="item", :label="`泵-${item}`", :value="`brushless_pump_${item}`")
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('brushless_pump_open', { ...debugStore.formData.peristalticPumpData.brushlessPump, direction: 'forward' })")
                  | 正转
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('brushless_pump_close')")
                  | 停止
                ft-button(size="small", type="primary", class="stop-button", :click-handle="() => commandHandle('brushless_pump_open', { ...debugStore.formData.peristalticPumpData.brushlessPump, direction: 'backward' })")
                  | 反转
          el-divider 步进蠕动泵
          div.card-box
            el-form
              el-form-item(label="容量")
                el-input(v-model="debugStore.formData.peristalticPumpData.stepPump.volume", type="number", placeholder="请输入容量")
                  template(#append)
                    | mL
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.peristalticPumpData.stepPump.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="泵")
                el-select(v-model="debugStore.formData.peristalticPumpData.stepPump.pumpCode", type="number", placeholder="请选择泵")
                  el-option(v-for="item in 3", :key="item", :label="`泵-${item}`", :value="`step_pump_${item}`")
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('brushless_pump_open', { ...debugStore.formData.peristalticPumpData.stepPump, direction: 'forward' })")
                  | 正转
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('brushless_pump_close')")
                  | 停止
                ft-button(size="small", type="primary", class="stop-button", :click-handle="() => commandHandle('brushless_pump_open', { ...debugStore.formData.peristalticPumpData.stepPump, direction: 'backward' })")
                  | 反转
        el-card
          template(#header)
            div.card-header
              span 滴定移动电机
          div.card-box
            el-form
              el-form-item(label="距离")
                el-input(v-model="debugStore.formData.titrationModule.relative.distance", type="number", placeholder="请输入距离")
                  template(#append)
                    | mm
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.titrationModule.relative.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="循环")
                el-input(v-model="debugStore.formData.titrationModule.relative.times", type="number", placeholder="请输入次数")
                  template(#append)
                    | 次
              el-form-item(label="电机")
                el-select(v-model="debugStore.formData.titrationModule.relative.motorCode", placeholder="请选择电机")
                  el-option(v-for="item in 2", :key="item", :label="`电机${item}`", :value="`titration_motor_${item}`")
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('titration_motor_move_by', { ...debugStore.formData.titrationModule.relative, distance: debugStore.formData.titrationModule.relative.distance })")
                  | 前进
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('titration_motor_stop', { motorCode: debugStore.formData.titrationModule.relative.motorCode })")
                  | 停止
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('z_move_by', { ...debugStore.formData.titrationModule.relative, distance: -(debugStore.formData.titrationModule.relative.distance ?? 0) })")
                  | 后退
                ft-button(type="primary", size="small", :click-handle="() => commandHandle('titration_motor_origin', { motorCode: debugStore.formData.titrationModule.relative.motorCode })")
                  | 回原点
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('z_enable', { motorCode: debugStore.formData.titrationModule.relative.motorCode })")
                  | 电机使能
                ft-button(size="small", :click-handle="() => commandHandle('z_disable', { motorCode: debugStore.formData.titrationModule.relative.motorCode })")
                  | 电机失能
      el-col(:span="8")
        el-card
          template(#header)
            div.card-header
              span 加热模组
          el-divider 加热棒
          div.card-box
            el-form
              el-form-item(label="温度")
                el-input(v-model="debugStore.formData.heatArea.temperature", type="number", placeholder="请输入温度")
                  template(#append)
                    | ℃
              el-form-item(label="区域")
                el-select(v-model="debugStore.formData.heatArea.heatModuleCode", placeholder="请选择区域")
                  el-option(v-for="item in 2", :key="item", :label="`加热区${item}`", :value="`heat_module_${item}`")
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('heater_start', debugStore.formData.heatArea)")
                  | 开始加热
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('heater_stop', debugStore.formData.heatArea)")
                  | 停止加热
        el-card
          template(#header)
            div.card-header
              span 指示灯
          div.card-box
            el-form
              el-form-item(label="颜色")
                el-select(v-model="debugStore.formData.lightModule.color", placeholder="请选择颜色")
                  el-option(v-for="item in [{ value: 'red', label: '红色' }, { value: 'yellow', label: '黄色' }, { value: 'green', label: '绿色' }]", :key="item.value", :label="item.label", :value="item.value")
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('door_open', { ...debugStore.formData.door })")
                  | 开启
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('door_stop')")
                  | 关闭
        el-card
          template(#header)
            div.card-header
              span 磁子搅拌电机
          div.card-box
            el-form
              el-form-item(label="距离")
                el-input(v-model="debugStore.formData.magnetStirMotor.relative.distance", type="number", placeholder="请输入距离")
                  template(#append)
                    | mm
              el-form-item(label="速度")
                el-input(v-model="debugStore.formData.magnetStirMotor.relative.speed", type="number", placeholder="请输入速度")
                  template(#append)
                    | rpm/min
              el-form-item(label="循环")
                el-input(v-model="debugStore.formData.magnetStirMotor.relative.times", type="number", placeholder="请输入次数")
                  template(#append)
                    | 次
              el-form-item(label="电机")
                el-select(v-model="debugStore.formData.magnetStirMotor.relative.motorCode", placeholder="请选择电机")
                  el-option(v-for="item in 2", :key="item", :label="`电机${item}`", :value="`magnet_stir_motor_${item}`")
              el-form-item
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('magnet_stir_motor_move_by', { ...debugStore.formData.magnetStirMotor.relative, distance: debugStore.formData.magnetStirMotor.relative.distance })")
                  | 前进
                ft-button(size="small", class="stop-button", :click-handle="() => commandHandle('magnet_stir_motor_stop', { motorCode: debugStore.formData.magnetStirMotor.relative.motorCode })")
                  | 停止
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('magnet_stir_motor_move_by', { ...debugStore.formData.magnetStirMotor.relative, distance: -(debugStore.formData.magnetStirMotor.relative.distance ?? 0) })")
                  | 后退
                ft-button(type="primary", size="small", :click-handle="() => commandHandle('magnet_stir_motor_origin', { motorCode: debugStore.formData.magnetStirMotor.relative.motorCode })")
                  | 回原点
                ft-button(size="small", type="primary", :click-handle="() => commandHandle('magnet_stir_motor_enable', { motorCode: debugStore.formData.magnetStirMotor.relative.motorCode })")
                  | 电机使能
                ft-button(size="small", :click-handle="() => commandHandle('magnet_stir_motor_disable', { motorCode: debugStore.formData.magnetStirMotor.relative.motorCode })")
                  | 电机失能
          el-divider 磁子投放
          ft-button(size="small", type="primary", :click-handle="() => commandHandle('magnet_open')")
            | 打开磁子投放开关
          ft-button(size="small", :click-handle="() => commandHandle('magnet_close')")
            | 关闭磁子投放开关
    SavePosition(v-if="savePositionVisible", @ok="savePositionVisible = false", @cancel="savePositionVisible = false")
</template>

<style lang="stylus" scoped>
.debug-content
  overflow hidden
  max-height 100%
  .button-content
    height 40px
  .card-content
    height calc(100% - 40px)
    overflow auto

.el-card
  margin-bottom 10px

:deep(.el-card__header)
  padding 5px 10px
  background rgba(0, 0, 0, 0.03)

.el-input, .el-select
  width 100%

.el-form-item
  margin-bottom 10px
  margin-right 0

.card-header
  display flex
  align-items center
  justify-content space-between

.select-label
  margin-right 10px

:deep(.el-card__body)
  padding 10px 5px

.el-form-item__content
  .ft-button
    margin-bottom 10px

.button-box
  display flex
  justify-content center

:deep(.el-form-item).button-center
  .el-form-item__content
    width 100%
    display flex
    justify-content center

.stop-button
  margin-right 8px
  font-weight 900
  margin-left 3px

.el-divider
  margin 15px 0
</style>