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. 357
      src/views/debug/index.vue

357
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,7 +22,10 @@
</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]" />
<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>
@ -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>
@ -54,15 +64,21 @@
</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="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]">
方向：
@ -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">
@ -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,7 +319,7 @@
</main>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ref, onMounted, onUnmounted } from "vue";
import { createWebSocket, sharedWsUrl } from "@/services/socket";
import { ElMessage } from "element-plus";
import type {
@ -278,8 +328,8 @@
SyringeType,
SyringeParams,
VoltageType,
ControlValueType
} from '@/services/globalCmd/cmdTypes'
ControlValueType,
} from "@/services/globalCmd/cmdTypes";
import {
moveMotorToPosition,
switchThreeWayValve,
@ -296,24 +346,24 @@ import {
turnOnLightPanel,
stopWash,
stopDehumidify,
setMotorSpeed
setMotorSpeed,
} from "@/services/globalCmd/globalCmd";
const activeName = ref('debug')
const voltageValue = ref()
const activeName = ref("debug");
const voltageValue = ref();
const syringeForm = ref<SyringeParams>({
rotationSpeed: 1,
time: 0,
direction:'1'
})
direction: "1",
});
const workForm = ref<Record<string, any>>({
routeType: 1,
})
});
const axis = ref<any>({
index: 0
})
index: 0,
});
const rotateForm = ref<{ axis: "X" | "Y" | "Z"; speed: number }>({axis:"X",speed:20})
let subscription:any
const rotateForm = ref<{ axis: "X" | "Y" | "Z"; speed: number }>({ axis: "X", speed: 20 });
let subscription: any;
onMounted(() => {
//连接websocket
const wsClient = createWebSocket(sharedWsUrl);
@ -321,85 +371,85 @@ import {
//@ts-ignore
if (data.type == "moveMotorToPosition") {
//@ts-ignore
ElMessage.success(data.data.text)
ElMessage.success(data.data.text);
}
});
wsClient.connect();
})
});
onUnmounted(() => {
subscription && subscription.unsubscribe();
});
const machineryForm = ref<Record<string, string>>({})
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])
}
}
position: parseFloat(machineryForm.value[axis]),
},
};
moveMotorToPosition(params).then((res: any) => {
console.log('-----moveMotorToPosition----res---', res)
success(res)
})
}
console.log("-----moveMotorToPosition----res---", res);
success(res);
});
};
const onSwitchThreeWayValve = (type: string) => {
const params = <any>{
params:{type}
}
params: { type },
};
switchThreeWayValve(params).then((res: any) => {
console.log('---onSwitchThreeWayValve---res---', res)
success(res)
})
}
console.log("---onSwitchThreeWayValve---res---", res);
success(res);
});
};
const onControlValve = (type: ControlNitrogen, open: boolean) => {
const params = <ControlValueType>{
params: {
valveType: type,
isOpen:open
}
}
isOpen: open,
},
};
controlValve(params).then((res: any) => {
console.log('---onControlValve---res---', res)
success(res)
})
}
console.log("---onControlValve---res---", res);
success(res);
});
};
const onStopDehumidify = () => {
stopDehumidify().then((res: any) => {
success(res)
})
}
success(res);
});
};
const onStopWash = () => {
stopWash({}).then((res: any) => {
success(res)
})
}
success(res);
});
};
//电压控制 开启
const onTurnOnHighVoltage = () => {
const params = <VoltageType>{
params:{voltage: +voltageValue.value}
}
params: { voltage: +voltageValue.value },
};
turnOnHighVoltage(params).then((res: any) => {
console.log('---onTurnOnHighVoltage- 电压控制 on --res---', res)
success(res)
})
}
console.log("---onTurnOnHighVoltage- 电压控制 on --res---", res);
success(res);
});
};
//电压控制 关闭
const onTurnOffHighVoltage = () => {
turnOffHighVoltage().then((res: any) => {
console.log('---onTurnOffHighVoltage- 电压控制 off--res---', res)
success(res)
})
}
console.log("---onTurnOffHighVoltage- 电压控制 off--res---", res);
success(res);
});
};
//注射泵开启
const onTurnOnSyringePump = () => {
@ -408,123 +458,117 @@ import {
params: {
rotationSpeed: syringeForm.value.rotationSpeed,
direction: syringeForm.value.direction,
time: syringeForm.value.time
}
}
time: syringeForm.value.time,
},
};
turnOnSyringePump(params).then((res: any) => {
console.log('---onTurnOffHighVoltage- 电泵开启--res---', res)
success(res)
})
}
console.log("---onTurnOffHighVoltage- 电泵开启--res---", res);
success(res);
});
};
const onTurnOffSyringePump = () => {
turnOffSyringePump().then((res: any) => {
success(res)
})
}
success(res);
});
};
const onStartWork = () => {
const params = <any>{
params: {
...workForm.value,
position:<any>[
axis.value,
]
}
}
position: <any>[axis.value],
},
};
startWork(params).then((res: any) => {
console.log('startWork-----', startWork)
success(res)
})
}
console.log("startWork-----", startWork);
success(res);
});
};
function onStopWork() {
stopWork().then((res: any) => {
console.log('startWork-----', startWork)
success(res)
})
console.log("startWork-----", startWork);
success(res);
});
}
const onRotate = () => {
const params = {
...rotateForm.value
}
...rotateForm.value,
};
setMotorSpeed(params).then((res: any) => {
success(res)
})
}
success(res);
});
};
const onStopRotate = (axis: string) => {
const params = {
params: {
axis,
}
}
},
};
stopMotor(params).then((res: any) => {
console.log('res--停止电机-')
success(res)
})
}
console.log("res--停止电机-");
success(res);
});
};
type resData = {
code: number;
msg: string;
}
};
const onTurnOnLightPanel = () => {
const params = {
params: {
brightness: 40
}
}
brightness: 40,
},
};
turnOnLightPanel(params).then((res: any) => {
success(res)
})
}
success(res);
});
};
function onTurnOffLightPanel() {
const params = {
params: {
brightness: 40
}
}
brightness: 40,
},
};
turnOffLightPanel(params).then((res: any) => {
success(res)
})
success(res);
});
}
function success(data: resData) {
if(data && data.msg == 'ok'){
ElMessage.success('发送成功')
if (data && data.msg == "ok") {
ElMessage.success("发送成功");
} else {
ElMessage.error('发送失败')
ElMessage.error("发送失败");
}
}
</script>
<style lang="scss" scoped>
div {
color: #0349A8;
color: #0349a8;
}
.el-button--primary {
background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);;
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 {
display: flex;
align-items: center;
color: #0349A8;
color: #0349a8;
}
}
@ -536,17 +580,16 @@ import {
.debug_left {
width: 42vw;
height: 18.75rem;
background: #FBFBFB;
background: #fbfbfb;
height: 70vh;
padding: 2rem;
}
.debug_right {
width: 42vw;
height: 70vh;
background: #FBFBFB;
background: #fbfbfb;
margin-left: 2rem;
padding: 2rem;
}
}
</style>
Write Preview
Loading…
Cancel
Save