You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
588 lines
16 KiB
588 lines
16 KiB
<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>
|