|
|
<template> <main> <div class="ml-[20px]"> <el-tabs v-model="activeName" class="demo-tabs"> <el-tab-pane label="设备调试" name="debug"></el-tab-pane> <el-tab-pane label="应用调试" name="app"></el-tab-pane> </el-tabs> </div> <div v-if="activeName == 'debug'"> <div class="debug_axis"> <div class="axis"> <div class="w-[3rem]">X轴：</div> <input v-model="machineryForm.X" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" /> <div class="w-[3rem]">毫米</div> <div class="flex"> <el-button type="primary" @click="onMoveMachinery('X')">移动</el-button> <el-button type="primary" @click="onStopRotate('X')">停止</el-button> </div> </div> <div class="axis"> <div class="w-[4rem]">Y轴：</div> <input v-model="machineryForm.Y" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" /> <div class="w-[2.5rem]">毫米</div> <div class="flex"> <el-button type="primary" @click="onMoveMachinery('Y')">移动</el-button> <el-button type="primary" @click="onStopRotate('Y')">停止</el-button> </div> </div> <div class="axis"> <div class="w-[3rem]">Z轴：</div> <input v-model="machineryForm.Z" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" /> <div class="w-[2.5rem]">毫米</div> <div class="flex"> <el-button type="primary" @click="onMoveMachinery('Z')">移动</el-button> <el-button type="primary" @click="onStopRotate('Z')">停止</el-button> </div> </div> </div> <div class="debug_main"> <div class="debug_left"> <div class=""> <el-row> <el-col :span="6" class="text-right">指定电机转速</el-col> <el-col :span="20" class="ml-[5rem]"> <el-radio-group v-model="rotateForm.axis"> <el-radio value="X">X</el-radio> <el-radio value="Y">Y</el-radio> <el-radio value="Z">Z</el-radio> </el-radio-group> <div class="flex"> <div> 速度:<input type="number" v-model="rotateForm.speed" placeholder="" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />毫米/秒 </div> <div class="ml-[20px]"> <el-button type="primary" @click="onRotate">确定</el-button> </div> </div> </el-col> </el-row> <el-divider /> <el-row> <el-col :span="6" class="text-right"> 电压控制器： </el-col> <el-col :span="6" class="ml-[20px]"> <input v-model="voltageValue" placeholder="0~5000v" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> </el-col> <el-col :span="8"> <el-button type="primary" @click="onTurnOnHighVoltage">开启</el-button> <el-button @click="onTurnOffHighVoltage">关闭</el-button> </el-col> </el-row> <el-divider /> <el-row class="mt-[10px]"> <el-col :span="4" class="text-right"> 注射泵： </el-col> <el-col :span="20"> <div class="ml-[20px]"> <input v-model="syringeForm.rotationSpeed" placeholder="转速" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />微升/每分钟 </div> <div class="mt-[10px] ml-[20px]"> <input v-model="syringeForm.time" placeholder="时间" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />秒 </div> <div class="ml-[20px] mt-[10px]"> 方向： <el-radio v-model="syringeForm.direction" value="0">后退</el-radio> <el-radio v-model="syringeForm.direction" value="1">前进</el-radio> <br /> <el-button type="primary" @click="onTurnOnSyringePump">开始</el-button> <el-button type="primary" class="ml-[20px]" @click="onTurnOffSyringePump">停止</el-button> </div> </el-col> </el-row> <el-divider /> <el-row class="mt-[10px]"> <el-col :span="6" class="text-right"> 湿度： </el-col> <el-col :span="12" class="ml-[20px]"> <input placeholder="湿度" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> <div class="flex mt-[10px]"> <el-button type="primary">开始除湿</el-button> <el-button type="primary">结束除湿</el-button> </div> </el-col> </el-row> <el-divider /> </div> </div> <div class="debug_right"> <div> <el-button type="primary">急停</el-button> <div class="mt-[20px]"> <input v-model="brightness" placeholder="亮度" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> <el-button class="ml-[20px]" type="primary" @click="onTurnOnLightPanel">开启照明灯</el-button> <el-button @click="onTurnOffLightPanel">关闭照明灯</el-button> </div> </div> <el-divider /> <div> <div>切换三通</div> <el-button type="primary" @click="onSwitchThreeWayValve('clean')">管路切换到基质</el-button> <el-button type="primary" @click="onSwitchThreeWayValve('spray')">管路切换到清洗</el-button> </div> <el-divider /> <div> <div>气压阀</div> <div> <el-button type="primary" @click="onControlValve('Cleaning', true)">打开清洗阀</el-button> <el-button @click="onControlValve('Cleaning', false)">关闭清洗阀</el-button> </div> <div class="mt-[10px]"> <el-button type="primary" @click="onControlValve('Nozzle', true)">打开喷嘴阀</el-button> <el-button @click="onControlValve('Nozzle', false)">关闭喷嘴阀</el-button> </div> <div class="mt-[10px]"> <el-button type="primary" @click="onControlValve('Dehumidification', true)">打开除湿阀</el-button> <el-button @click="onControlValve('Dehumidification', false)">关闭除湿阀</el-button> </div> </div> <el-divider /> <div class="mt-[10px]"> <el-button type="primary" @click="onStartWash('injector')">开始清洗注射器</el-button> <el-button type="primary" @click="onStartWash('nozzle')">开始清洗喷涂部分</el-button> <el-button @click="onStopWash">停止清洗</el-button> </div> <!-- <el-divider /> <div class="h-[13rem] bg-[#f4f4f4] p-[10px]"> <div>状态反馈区</div> </div> --> </div> </div> </div> <div v-if="activeName == 'app'"> <div class="bg-[#FBFBFB] h-[75vh] p-[10px]"> <el-row class="mt-[10px]"> <el-col :span="3" class="text-right"> 开始喷涂： </el-col>
<el-col :span="12" class="ml-[20px]"> <div>喷涂路线</div> <div> <el-radio-group v-model="workForm.routeType"> <el-radio :value="1">横向</el-radio> <el-radio :value="2">纵向</el-radio> </el-radio-group> </div> <div class="mt-[20px]"> 选择玻片： <el-radio-group v-model="axis.index"> <el-radio :value="0">玻片1</el-radio> <el-radio :value="1">玻片2</el-radio> <el-radio :value="2">玻片3</el-radio> <el-radio :value="3">玻片4</el-radio> </el-radio-group> </div> <div class="mt-[20px]"> 行间距： <input v-model="workForm.space" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> 毫米 </div>
<div class="mt-[20px]"> 氮气流速： <input v-model="workForm.nitrogenFlowVelocity" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> 毫米/秒 </div>
<div class="mt-[20px]"> 氮气气压： <input v-model="workForm.matrixFlowVelocity" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> Mp </div>
<div class="mt-[20px]"> 电压： <input v-model="workForm.voltage" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> V </div>
<div class="mt-[20px]"> 喷针距离玻片高度： <input v-model="workForm.height" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> 毫米 </div>
<div class="mt-[20px]"> 移速： <input v-model="workForm.movementSpeed" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> 毫米/秒 </div>
<div>起始坐标：</div> <div> X:<input v-model="axis.x1" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> Y:<input v-model="axis.y1" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> </div> <div class="mt-[10px]">结束坐标：</div> <div class="flex"> X:<input v-model="axis.x2" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> Y:<input v-model="axis.y2" placeholder="" type="number" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" /> </div> <div class="mt-[20px] text-center"> <el-button type="primary" class="ml-[10px] w-[100px]" @click="onStartWork">开始喷涂</el-button> <el-button type="primary" class="ml-[10px] w-[100px]" @click="onStopWork">结束喷涂</el-button> </div> </el-col> </el-row> </div> </div> </main></template><script lang="ts" setup>import { ref, onMounted, onUnmounted, watch } from "vue";import { createWebSocket, sharedWsUrl } from "@/services/socket";import { ElMessage } from "element-plus";import type { ControlNitrogen, MachineryType, SyringeType, SyringeParams, VoltageType, ControlValueType, Axis,} from "@/services/globalCmd/cmdTypes";import { moveMotorToPosition, switchThreeWayValve, controlValve, turnOnHighVoltage, turnOffHighVoltage, turnOnSyringePump, turnOffSyringePump, startWork, stopWork, stopMotor, turnOffLightPanel, turnOnLightPanel, stopWash, stopDehumidify, setMotorSpeed, type WashType, startWash} from "@/services/globalCmd/globalCmd";import type { BaseResponse } from "@/services/httpRequest";import type { WorkType } from '../../services/globalCmd/cmdTypes';const activeName = ref("debug");const voltageValue = ref();const syringeForm = ref<SyringeParams>({ rotationSpeed: 1, time: 0, direction: "1",});const workForm = ref<WorkType>({ routeType: 1, space: 2, nitrogenFlowVelocity: 1, nitrogenAirPressure: 1, matrixFlowVelocity: 1, voltage: 1, needPower: false, height: 6, movementSpeed: 10, position: [],});const axis = ref<Axis>({ index: 0, x1: 10, y1: 10, x2: 20, y2: 20,});
const rotateForm = ref<{ axis: "X" | "Y" | "Z"; speed: number }>({ axis: "X", speed: 20 });
watch(voltageValue,(newVal)=>{ if(newVal > 5000){ voltageValue.value = 5000 } if(newVal < 0){ voltageValue.value = 0 }})
onMounted(() => { //连接websocket
const wsClient = createWebSocket(sharedWsUrl); const subscription = wsClient.dataOb.subscribe(data => { }); wsClient.connect();
onUnmounted(() => { subscription && subscription.unsubscribe(); });});
const machineryForm = ref<Record<string, string>>({});const onMoveMachinery = (axis: string) => { if (!axis) return; const params = <MachineryType>{ axis, position: parseFloat(machineryForm.value[axis]), }; moveMotorToPosition(params).then((res) => { console.log("-----moveMotorToPosition----res---", res); success(res); });};
const onSwitchThreeWayValve = (type: string) => { const params = { type, }; switchThreeWayValve(params).then((res) => { console.log("---onSwitchThreeWayValve---res---", res); success(res); });};
const onControlValve = (type: ControlNitrogen, open: boolean) => { const params = <ControlValueType>{ params: { valveType: type, isOpen: open, }, }; controlValve(params).then((res) => { console.log("---onControlValve---res---", res); success(res); });};
const onStopDehumidify = () => { stopDehumidify().then((res) => { success(res); });};
function onStartWash(type: WashType) { startWash({ type }).then(res => { if (res.success) { ElMessage.success("已经开始清洗"); } else { ElMessage.error(res.msg); } });}
const onStopWash = () => { stopWash({}).then((res) => { success(res); });};
//电压控制 开启
const onTurnOnHighVoltage = () => { const params = <VoltageType>{ params: { voltage: +voltageValue.value }, }; turnOnHighVoltage(params).then((res) => { console.log("---onTurnOnHighVoltage- 电压控制 on --res---", res); success(res); });};
//电压控制 关闭
const onTurnOffHighVoltage = () => { turnOffHighVoltage().then((res) => { console.log("---onTurnOffHighVoltage- 电压控制 off--res---", res); success(res); });};
//注射泵开启
const onTurnOnSyringePump = () => { // SyringeType
const params = <SyringeType>{ params: { rotationSpeed: syringeForm.value.rotationSpeed, // direction: syringeForm.value.direction,
// time: syringeForm.value.time,
}, }; turnOnSyringePump(params).then((res) => { console.log("---onTurnOffHighVoltage- 电泵开启--res---", res); success(res); });};
const onTurnOffSyringePump = () => { turnOffSyringePump().then((res) => { success(res); });};
const onStartWork = () => { const params = <WorkType>{ ...workForm.value, position: [axis.value], };
startWork(params).then((res) => { success(res); });};
function onStopWork() { stopWork().then((res) => { success(res); });}
const onRotate = () => { const params = { ...rotateForm.value, };
setMotorSpeed(params).then((res) => { success(res); });};
const onStopRotate = (axis: string) => { stopMotor({axis}).then((res) => { success(res); });};
let brightness = ref()const onTurnOnLightPanel = () => { turnOnLightPanel({brightness: brightness.value}).then(res => { success(res); });};
function onTurnOffLightPanel() { const params = { brightness: brightness.value, }; turnOffLightPanel(params).then((res) => { success(res); });}
function success(data:BaseResponse) { if (data && data.msg == "ok") { ElMessage.success("发送成功"); } else { ElMessage.error(data.msg); }}</script><style lang="scss" scoped>div { color: #0349a8;}.el-button--primary { background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);}.debug_axis { height: 3rem; background: #fbfbfb; margin-left: 3.5rem; margin-right: 3.5rem; border-radius: 6px; display: flex; align-items: center;
.axis { display: flex; align-items: center; color: #0349a8; }}
.debug_main { display: flex; align-items: center; margin-left: 4rem; margin-top: 2rem; .debug_left { width: 42vw; height: 18.75rem; background: #fbfbfb; height: 70vh; padding: 2rem; } .debug_right { width: 42vw; height: 70vh; background: #fbfbfb; margin-left: 2rem; padding: 2rem; }}</style>
|
