matrix-spray-web/src/views/debug/index.vue

<script setup lang="ts">
import { FtMessage } from 'libs/message'
import { sendControl } from 'libs/utils'
import { reactive } from 'vue'

const form = reactive({
  x: {
    current: undefined,
    position: undefined,
    speed: undefined,
    direction: 'forward',
  },
  y: {
    current: undefined,
    position: undefined,
    speed: undefined,
    direction: 'forward',
  },
  z: {
    current: undefined,
    position: undefined,
    speed: undefined,
    direction: 'forward',
  },
  direction: 'forward',
  speed: undefined,
  voltage: undefined,
})
const motorMove = async (device: 'x' | 'y' | 'z') => {
  if (!form[device].position || !form[device].speed) {
    FtMessage.error('请补全参数')
    return
  }
  const params = {
    cmdCode: { x: 'motor_x_to_position', y: 'motor_y_to_position', z: 'motor_z_to_position' }[device],
    cmdId: '',
    params: form[device],
  }
  await sendControl(params, 'debug')
}
const motorStop = async (device: 'x' | 'y' | 'z') => {
  const params = {
    cmdCode: { x: 'motor_x_stop', y: 'motor_y_stop', z: 'motor_z_stop' }[device],
    cmdId: '',
    params: form[device],
  }
  await sendControl(params, 'debug')
}
const motorToHome = async (device: 'x' | 'y' | 'z') => {
  const params = {
    cmdCode: { x: 'motor_x_origin', y: 'motor_y_origin', z: 'motor_z_origin' }[device],
    cmdId: '',
    params: form[device],
  }
  await sendControl(params, 'debug')
}

const threeWayValveOpenSyringePipeline = async () => {
  const params = {
    cmdCode: 'three_way_valve_open_syringe_pipeline',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}

const threeWayValveOpenNozzlePipeline = async () => {
  const params = {
    cmdCode: 'three_way_valve_open_nozzle_pipeline',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}

const threeWayValveCloseAll = async () => {
  const params = {
    cmdCode: 'three_way_valve_close_all',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}

const lightingPanelOpen = async () => {
  const params = {
    cmdCode: 'lighting_panel_open',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}

const lightingPanelClose = async () => {
  const params = {
    cmdCode: 'lighting_panel_close',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}

const washValveOpen = async () => {
  const params = {
    cmdCode: 'wash_valve_open',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}
const washValveClose = async () => {
  const params = {
    cmdCode: 'wash_valve_close',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}
const nozzleValveOpen = async () => {
  const params = {
    cmdCode: 'nozzle_valve_open',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}
const nozzleValveClose = async () => {
  const params = {
    cmdCode: 'nozzle_valve_close',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}

const dehumidifierValveOpen = async () => {
  const params = {
    cmdCode: 'dehumidifier_valve_open',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}
const dehumidifierValveClose = async () => {
  const params = {
    cmdCode: 'dehumidifier_valve_close',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}

const syringePumpInjectionVolumeSet = async () => {
  if (!form.speed) {
    FtMessage.error('请输入注射泵速度')
    return
  }
  const params = {
    cmdCode: 'syringe_pump_start',
    cmdId: '',
    params: {
      direction: form.direction,
      speed: form.speed,
    },
  }
  await sendControl(params, 'debug')
}

const syringePumpStop = async () => {
  const params = {
    cmdCode: 'syringe_pump_stop',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}

const highVoltageOpen = async () => {
  if (!form.voltage) {
    FtMessage.error('请输入电压值')
    return
  }
  if (form.voltage > 6000) {
    FtMessage.error('电压值最大为6000V')
    return
  }
  const params = {
    cmdCode: 'high_voltage_open',
    cmdId: '',
    params: {
      voltage: form.voltage,
    },
  }
  await sendControl(params, 'debug')
}

const highVoltageClose = async () => {
  const params = {
    cmdCode: 'high_voltage_close',
    cmdId: '',
  }
  await sendControl(params, 'debug')
}
</script>

<template>
  <div>
    <el-card>
      <el-form label-width="auto" label-suffix=":">
        <el-form-item label="X轴">
          <div style="display: flex; align-items: center;margin: 5px 0">
            <div style="margin: 0 5px">
              <span>移动</span>
              <el-input v-model="form.x.position" style="width: 100px" type="number" />
              <span>mm</span>
            </div>
            <div style="margin: 0 5px">
              <span>速度</span>
              <el-input v-model="form.x.speed" style="width: 100px" type="number" />
              <span>mm/s</span>
            </div>

            <el-radio-group v-model="form.x.direction" style="margin: 10px">
              <div style="display: flex">
                <el-radio value="forward">
                  前进
                </el-radio>
                <el-radio value="backward">
                  后退
                </el-radio>
              </div>
            </el-radio-group>

            <ft-button type="primary" :click-handle="() => motorMove('x')">
              执行
            </ft-button>
            <ft-button type="primary" :click-handle="() => motorStop('x')">
              停止
            </ft-button>
            <ft-button :click-handle="() => motorToHome('x')">
              回原点
            </ft-button>
          </div>
        </el-form-item>
        <el-form-item label="Y轴">
          <div style="display: flex; align-items: center;margin: 5px 0">
            <div style="margin: 0 5px">
              <span>移动</span>
              <el-input v-model="form.y.position" style="width: 100px" type="number" />
              <span>mm</span>
            </div>
            <div style="margin: 0 5px">
              <span>速度</span>
              <el-input v-model="form.y.speed" style="width: 100px" type="number" />
              <span>mm/s</span>
            </div>

            <el-radio-group v-model="form.y.direction" style="margin: 10px">
              <div style="display: flex">
                <el-radio value="forward">
                  前进
                </el-radio>
                <el-radio value="backward">
                  后退
                </el-radio>
              </div>
            </el-radio-group>

            <ft-button type="primary" :click-handle="() => motorMove('y')">
              执行
            </ft-button>
            <ft-button type="primary" :click-handle="() => motorStop('y')">
              停止
            </ft-button>
            <ft-button :click-handle="() => motorToHome('y')">
              回原点
            </ft-button>
          </div>
        </el-form-item>
        <el-form-item label="Z轴">
          <div style="display: flex; align-items: center;margin: 5px 0">
            <div style="margin: 0 5px">
              <span>移动</span>
              <el-input v-model="form.z.position" style="width: 100px" type="number" />
              <span>mm</span>
            </div>
            <div style="margin: 0 5px">
              <span>速度</span>
              <el-input v-model="form.z.speed" style="width: 100px" type="number" />
              <span>mm/s</span>
            </div>

            <el-radio-group v-model="form.z.direction" style="margin: 10px">
              <div style="display: flex">
                <el-radio value="forward">
                  前进
                </el-radio>
                <el-radio value="backward">
                  后退
                </el-radio>
              </div>
            </el-radio-group>

            <ft-button type="primary" :click-handle="() => motorMove('z')">
              执行
            </ft-button>
            <ft-button type="primary" :click-handle="() => motorStop('z')">
              停止
            </ft-button>
            <ft-button :click-handle="() => motorToHome('z')">
              回原点
            </ft-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-form label-width="auto" label-suffix=":">
        <el-form-item label="注射泵">
          <div style="display: flex; align-items: center; margin: 5px 0">
            <el-input v-model="form.speed" type="number" style="width: 100px;" />
            <span>ul/min</span>
            <el-radio-group v-model="form.direction" style="margin: 10px">
              <div style="display: flex">
                <el-radio value="forward">
                  前进
                </el-radio>
                <el-radio value="backward">
                  后退
                </el-radio>
              </div>
            </el-radio-group>
            <ft-button type="primary" style="margin-left: 10px" :click-handle="syringePumpInjectionVolumeSet">
              开始
            </ft-button>
            <ft-button :click-handle="syringePumpStop">
              停止
            </ft-button>
          </div>
        </el-form-item>

        <el-form-item label="电压控制器">
          <div style="display: flex; align-items: center; margin: 5px 0">
            <el-input v-model="form.voltage" type="number" style="width: 100px;" />
            <span>V</span>
            <ft-button type="primary" style="margin-left: 10px" :click-handle="highVoltageOpen">
              开启
            </ft-button>
            <ft-button :click-handle="highVoltageClose">
              关闭
            </ft-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="display: flex;justify-content: center">
          <ft-button type="primary" :click-handle="lightingPanelOpen">
            开启照明灯
          </ft-button>
          <ft-button :click-handle="lightingPanelClose">
            关闭照明灯
          </ft-button>
          <div style="margin-top: 10px;display: flex;justify-content: center">
            <ft-button type="primary" :click-handle="threeWayValveOpenSyringePipeline">
              打开喷嘴管路
            </ft-button>
            <ft-button type="primary" :click-handle="threeWayValveOpenNozzlePipeline">
              打开注射器管路
            </ft-button>
            <ft-button :click-handle="threeWayValveCloseAll">
              全部关闭
            </ft-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="display: flex;justify-content: center">
          <ft-button type="primary" :click-handle="washValveOpen">
            打开清洗阀
          </ft-button>
          <ft-button type="primary" :click-handle="nozzleValveOpen">
            打开喷嘴阀
          </ft-button>
          <ft-button type="primary" :click-handle="dehumidifierValveOpen">
            打开除湿阀
          </ft-button>
          <div style="margin-top: 10px;display: flex;justify-content: center">
            <ft-button :click-handle="washValveClose">
              关闭清洗阀
            </ft-button>
            <ft-button :click-handle="nozzleValveClose">
              关闭喷嘴阀
            </ft-button>
            <ft-button :click-handle="dehumidifierValveClose">
              关闭除湿阀
            </ft-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.el-card {
  margin: 30px 0;
  border-radius: 20px;
  color: var(--el-color-primary);
}
:deep(.el-card__body) {
  padding: 50px;
}
.card-header {
  display: flex;
  align-items: center;
}
.num-box {
  margin: 0 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--el-color-primary);
  font-size: 30px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-footer {
  display: flex;
  justify-content: flex-end;
  margin: 50px;
}
.hint-text {
  display: flex;
  height: 400px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: var(--el-color-primary);
}
.num-text {
  color: var(--el-color-primary);
  font-weight: 900;
  font-size: 70px;
}

:deep(.el-form-item) {
  --font-size: 40px;
  margin-bottom: 10px
}

.el-input {
  margin: 0 15px
}
</style>