LiLongLong
/
matrix_spraying_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

格式化debug页面

master
zhangjiming 5 months ago
parent
f201d4422a
commit
bf6f69ba90
1 changed files with 556 additions and 513 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 525
      src/views/debug/index.vue

525
src/views/debug/index.vue
View File

@ -10,7 +10,10 @@
<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]" />
<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>
@ -19,8 +22,11 @@
</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>
<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>
@ -28,7 +34,10 @@
</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]" />
<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>
@ -38,14 +47,15 @@
</div>
<div class="debug_main">
<div class="debug_left">
<div class="mt-[10px]">
<el-row>
<el-col :span="6" class="text-right">
电压控制器：
</el-col>
<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]" />
<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>
@ -53,22 +63,28 @@
</el-col>
</el-row>
<el-divider />
<el-row class="mt-[10px] ">
<el-col :span="4" class="text-right">
注射泵：
</el-col>
<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]" />毫米/秒
<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]" />秒
<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/>
<br />
<el-button type="primary" @click="onTurnOnSyringePump">开始</el-button>
<el-button type="primary" class="ml-[20px]" @click="onTurnOffSyringePump">停止</el-button>
</div>
@ -76,24 +92,22 @@
</el-row>
<el-divider />
<el-row class="mt-[10px]">
<el-col :span="6" class="text-right">
湿度：
</el-col>
<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]" />
<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 />
<el-row class="mt-[10px]">
<el-col :span="4" class="text-right">
</el-col>
<el-col :span="4" class="text-right"> </el-col>
<el-col :span="18">
<div>指定转速&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;指定时间：</div>
<el-radio-group v-model="rotateForm.axis">
@ -102,20 +116,21 @@
<el-radio value="Z">Z</el-radio>
</el-radio-group>
<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]" />毫米/秒
速度:<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]" />毫米/秒
<!-- 时间:<input type="number" v-model="rotateForm.time" 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="mt-[20px]">
<el-button type="primary" @click="onRotate">确定</el-button>
<!-- X:向左 向右 回原点
Y:前进 后退 回原点
Z:向上 向下 回原点
转速：速度 单位：毫米/秒 -->
<!-- <el-button type="primary" @click="onStopRotate">停止</el-button> -->
</div>
</el-col>
@ -143,7 +158,6 @@
<el-button type="primary">确定</el-button>
</el-col>
</el-row> -->
</div>
</div>
<div class="debug_right">
@ -162,16 +176,16 @@
<div>
<div>气压阀</div>
<div>
<el-button type="primary" @click="onControlValve('Cleaning',true)">打开清洗阀</el-button>
<el-button @click="onControlValve('Cleaning',false)">关闭清洗阀</el-button>
<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>
<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>
<el-button type="primary" @click="onControlValve('Dehumidification', true)">打开除湿阀</el-button>
<el-button @click="onControlValve('Dehumidification', false)">关闭除湿阀</el-button>
</div>
</div>
<el-divider />
@ -189,9 +203,7 @@
<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="3" class="text-right"> 开始喷涂： </el-col>
<el-col :span="12" class="ml-[20px]">
<div>喷涂路线</div>
@ -204,63 +216,101 @@
<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 :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]" />
<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]" />
<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]" />
<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]" />
<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]" />
<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]" />
<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]" />
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]" />
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>
@ -269,17 +319,17 @@
</main>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { createWebSocket, sharedWsUrl } from "@/services/socket";
import { ElMessage } from "element-plus";
import type {
import { ref, onMounted, onUnmounted } from "vue";
import { createWebSocket, sharedWsUrl } from "@/services/socket";
import { ElMessage } from "element-plus";
import type {
ControlNitrogen,
MachineryType,
SyringeType,
SyringeParams,
VoltageType,
ControlValueType
} from '@/services/globalCmd/cmdTypes'
ControlValueType,
} from "@/services/globalCmd/cmdTypes";
import {
moveMotorToPosition,
switchThreeWayValve,
@ -296,257 +346,250 @@ import {
turnOnLightPanel,
stopWash,
stopDehumidify,
setMotorSpeed
setMotorSpeed,
} from "@/services/globalCmd/globalCmd";
const activeName = ref('debug')
const voltageValue = ref()
const syringeForm = ref<SyringeParams>({
const activeName = ref("debug");
const voltageValue = ref();
const syringeForm = ref<SyringeParams>({
rotationSpeed: 1,
time: 0,
direction:'1'
})
const workForm = ref<Record<string, any>>({
direction: "1",
});
const workForm = ref<Record<string, any>>({
routeType: 1,
})
const axis = ref<any>({
index: 0
})
const rotateForm = ref<{ axis: "X" | "Y" | "Z"; speed: number }>({axis:"X",speed:20})
let subscription:any
onMounted(()=>{
});
const axis = ref<any>({
index: 0,
});
const rotateForm = ref<{ axis: "X" | "Y" | "Z"; speed: number }>({ axis: "X", speed: 20 });
let subscription: any;
onMounted(() => {
//连接websocket
const wsClient = createWebSocket(sharedWsUrl);
subscription = wsClient.dataOb.subscribe(data => {
//@ts-ignore
if(data.type == "moveMotorToPosition"){
if (data.type == "moveMotorToPosition") {
//@ts-ignore
ElMessage.success(data.data.text)
ElMessage.success(data.data.text);
}
});
wsClient.connect();
})
});
onUnmounted(() => {
onUnmounted(() => {
subscription && subscription.unsubscribe();
});
});
const machineryForm = ref<Record<string, string>>({})
const onMoveMachinery = (axis:string) => {
if(!axis)return;
const machineryForm = ref<Record<string, string>>({});
const onMoveMachinery = (axis: string) => {
if (!axis) return;
const params = {
commandName:'moveMotorToPosition',
commandName: "moveMotorToPosition",
params: <MachineryType>{
axis,
position:parseFloat(machineryForm.value[axis])
}
}
moveMotorToPosition(params).then((res:any) => {
console.log('-----moveMotorToPosition----res---', res)
success(res)
})
}
position: parseFloat(machineryForm.value[axis]),
},
};
moveMotorToPosition(params).then((res: any) => {
console.log("-----moveMotorToPosition----res---", res);
success(res);
});
};
const onSwitchThreeWayValve = (type:string) => {
const onSwitchThreeWayValve = (type: string) => {
const params = <any>{
params:{type}
}
switchThreeWayValve(params).then((res:any) => {
console.log('---onSwitchThreeWayValve---res---', res)
success(res)
})
}
params: { type },
};
switchThreeWayValve(params).then((res: any) => {
console.log("---onSwitchThreeWayValve---res---", res);
success(res);
});
};
const onControlValve = (type:ControlNitrogen,open:boolean) => {
const onControlValve = (type: ControlNitrogen, open: boolean) => {
const params = <ControlValueType>{
params:{
valveType:type,
isOpen:open
}
}
controlValve(params).then((res:any) => {
console.log('---onControlValve---res---', res)
success(res)
})
}
params: {
valveType: type,
isOpen: open,
},
};
controlValve(params).then((res: any) => {
console.log("---onControlValve---res---", res);
success(res);
});
};
const onStopDehumidify = () =>{
stopDehumidify().then((res:any)=>{
success(res)
})
}
const onStopDehumidify = () => {
stopDehumidify().then((res: any) => {
success(res);
});
};
const onStopWash = () => {
stopWash({}).then((res:any) => {
success(res)
})
}
const onStopWash = () => {
stopWash({}).then((res: any) => {
success(res);
});
};
//电压控制 开启
const onTurnOnHighVoltage = () => {
//电压控制 开启
const onTurnOnHighVoltage = () => {
const params = <VoltageType>{
params:{voltage: +voltageValue.value}
}
turnOnHighVoltage(params).then((res:any) => {
console.log('---onTurnOnHighVoltage- 电压控制 on --res---', res)
success(res)
})
}
params: { voltage: +voltageValue.value },
};
turnOnHighVoltage(params).then((res: any) => {
console.log("---onTurnOnHighVoltage- 电压控制 on --res---", res);
success(res);
});
};
//电压控制 关闭
const onTurnOffHighVoltage = () => {
turnOffHighVoltage().then((res:any) => {
console.log('---onTurnOffHighVoltage- 电压控制 off--res---', res)
success(res)
})
}
//电压控制 关闭
const onTurnOffHighVoltage = () => {
turnOffHighVoltage().then((res: any) => {
console.log("---onTurnOffHighVoltage- 电压控制 off--res---", res);
success(res);
});
};
//注射泵开启
const onTurnOnSyringePump = () => {
//注射泵开启
const onTurnOnSyringePump = () => {
// SyringeType
const params = <SyringeType>{
params:{
params: {
rotationSpeed: syringeForm.value.rotationSpeed,
direction: syringeForm.value.direction,
time: syringeForm.value.time
}
}
turnOnSyringePump(params).then((res:any) => {
console.log('---onTurnOffHighVoltage- 电泵开启--res---', res)
success(res)
})
}
time: syringeForm.value.time,
},
};
turnOnSyringePump(params).then((res: any) => {
console.log("---onTurnOffHighVoltage- 电泵开启--res---", res);
success(res);
});
};
const onTurnOffSyringePump = () => {
turnOffSyringePump().then((res:any) => {
success(res)
})
}
const onTurnOffSyringePump = () => {
turnOffSyringePump().then((res: any) => {
success(res);
});
};
const onStartWork = () => {
const onStartWork = () => {
const params = <any>{
params:{
params: {
...workForm.value,
position:<any>[
axis.value,
]
}
}
position: <any>[axis.value],
},
};
startWork(params).then((res:any) => {
console.log('startWork-----', startWork)
success(res)
})
}
startWork(params).then((res: any) => {
console.log("startWork-----", startWork);
success(res);
});
};
function onStopWork(){
stopWork().then((res:any) => {
console.log('startWork-----', startWork)
success(res)
})
}
function onStopWork() {
stopWork().then((res: any) => {
console.log("startWork-----", startWork);
success(res);
});
}
const onRotate = () => {
const onRotate = () => {
const params = {
...rotateForm.value
}
...rotateForm.value,
};
setMotorSpeed(params).then((res:any) => {
success(res)
})
}
setMotorSpeed(params).then((res: any) => {
success(res);
});
};
const onStopRotate = (axis:string) => {
const onStopRotate = (axis: string) => {
const params = {
params:{
params: {
axis,
}
}
stopMotor(params).then((res:any) => {
console.log('res--停止电机-')
success(res)
})
}
type resData = {
code:number;
msg:string;
}
const onTurnOnLightPanel = () => {
},
};
stopMotor(params).then((res: any) => {
console.log("res--停止电机-");
success(res);
});
};
type resData = {
code: number;
msg: string;
};
const onTurnOnLightPanel = () => {
const params = {
params:{
brightness: 40
}
}
turnOnLightPanel(params).then((res:any) => {
success(res)
})
}
params: {
brightness: 40,
},
};
turnOnLightPanel(params).then((res: any) => {
success(res);
});
};
function onTurnOffLightPanel(){
function onTurnOffLightPanel() {
const params = {
params:{
brightness: 40
}
}
turnOffLightPanel(params).then((res:any) => {
success(res)
})
}
function success(data:resData){
if(data && data.msg == 'ok'){
ElMessage.success('发送成功')
}else{
ElMessage.error('发送失败')
}
params: {
brightness: 40,
},
};
turnOffLightPanel(params).then((res: any) => {
success(res);
});
}
function success(data: resData) {
if (data && data.msg == "ok") {
ElMessage.success("发送成功");
} else {
ElMessage.error("发送失败");
}
}
</script>
<style lang="scss" scoped>
div{
color: #0349A8;
}
.el-button--primary{
background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);;
}
.debug_axis{
div {
color: #0349a8;
}
.el-button--primary {
background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);
}
.debug_axis {
height: 3rem;
background: #FBFBFB;
background: #fbfbfb;
margin-left: 3.5rem;
margin-right: 3.5rem;
border-radius: 6px;
display: flex;
align-items: center;
.axis{
.axis {
display: flex;
align-items: center;
color: #0349A8;
}
color: #0349a8;
}
}
.debug_main{
.debug_main {
display: flex;
align-items: center;
margin-left: 4rem;
margin-top:2rem;
.debug_left{
margin-top: 2rem;
.debug_left {
width: 42vw;
height: 18.75rem;
background: #FBFBFB;
background: #fbfbfb;
height: 70vh;
padding:2rem;
padding: 2rem;
}
.debug_right{
.debug_right {
width: 42vw;
height: 70vh;
background: #FBFBFB;
margin-left:2rem;
padding:2rem;
background: #fbfbfb;
margin-left: 2rem;
padding: 2rem;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save