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

优化消息上报全局状态

feature/debug
LiLongLong 5 months ago
parent
ef34660d3f
commit
f69f4e46d6
8 changed files with 262 additions and 80 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. 14
      src/App.vue
  2. 6
      src/router/index.ts
  3. 66
      src/services/globalCmd/cmdTypes.ts
  4. 10
      src/services/globalCmd/globalCmd.ts
  5. 18
      src/stores/equipmentStatus.ts
  6. 144
      src/views/debug/index.vue
  7. 12
      src/views/debug/type.ts
  8. 56
      src/views/matrixManage/matrixList.vue

14
src/App.vue
View File

@ -1,12 +1,20 @@
<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
import HeaderBar from "@/components/HeaderBar.vue";
import { RouterView } from "vue-router";
import { createWebSocket, sharedWsUrl } from "./services/socket";
import { useEquipmentStatusStore } from "@/stores/equipmentStatus";
const equipmentStatusStore = useEquipmentStatusStore()
const wsClient = createWebSocket(sharedWsUrl);
wsClient.dataOb.subscribe((data:any) => {
if (data.type === "status") {
equipmentStatusStore.setEquipmentStatus(data['data'])
}
});
wsClient.connect();
</script>
<template>
<RouterView />
</template>
<style scoped>
</style>

6
src/router/index.ts
View File

@ -8,6 +8,8 @@ import SprayView from "../views/SprayView.vue";
import PrintView from "../views/PrintView.vue";
import Debug from '../views/debug/index.vue'
import SpurtPrint from '../views/spurtPrint/index.vue'
import MatrixManage from '../views/matrixManage/matrixList.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -49,6 +51,10 @@ const router = createRouter({
path: "/spurtPrint",
name: "spurtPrint",
component: SpurtPrint
},{
path: "/matrixManage",
name: "matrixManage",
component: MatrixManage
}
],
},

66
src/services/globalCmd/cmdTypes.ts
View File

@ -6,9 +6,11 @@ export type ControlType = {
};
export type SyringeType = {
rotationSpeed: string | number;
params : {
rotationSpeed: number;
direction: string | number;
time: string | number;
time: number;
}
};
type PositionType = {
x: number;
@ -27,3 +29,63 @@ export type WorkType = {
movementSpeed: number;
position: PositionListType;
};
export type MachineryType = {
axis: string,
position: string | number
}
export type ControlNitrogen = 'Dehumidification' | 'Cleaning' | 'Nozzle'
export type VoltageType = {
params:{
voltage: number
}
}
export type ControlValueType = {
params: {
valveType: ControlNitrogen,
isOpen:boolean
}
}
export type EquipmentStatusType = {
emergencyStop: boolean //急停状态
pause: boolean,
//X轴电机状态
xAxisPosition: number //电机位置
xAxisSpeed: number //电机速度
xAxisMovementEnded: boolean
xAxisAtOrigin: boolean
xAxisLimited: boolean
//Y轴电机状态
yAxisPosition: number
yAxisSpeed: number
yAxisMovementEnded: boolean
yAxisAtOrigin: boolean
yAxisLimited:boolean
//Z轴电机状态
zAxisPosition: number
zAxisSpeed: number
zAxisMovementEnded: boolean
zAxisAtOrigin: boolean
zAxisLimited:boolean
//三通阀状态
threeWayValvePosition: string
// 流量计状态
flowRate: number
// 温湿度传感器状态
temperature:number
humidity: number
//注射泵状态
syringePumpNormal: boolean
}

10
src/services/globalCmd/globalCmd.ts
View File

@ -1,6 +1,6 @@
import httpRequest, { type BaseResponse } from "../httpRequest";
import { addTxnRecord } from "../txn";
import type { OperationCmd, ControlType, SyringeType, WorkType } from "./cmdTypes";
import type { VoltageType, ControlValueType, SyringeType, WorkType } from "./cmdTypes";
//移动电机
export function moveMotorToPosition(params: { commandName: string; params: Record<string, any> }) {
@ -23,13 +23,13 @@ export function switchThreeWayValve(params: { type: string }) {
}
//氮气三路
export function controlValve(params: ControlType) {
export function controlValve(params: ControlValueType) {
const commandId = addTxnRecord({ ...params, category: "debug" });
return httpRequest<BaseResponse<string>>({ url: "/api/cmd/controlValve", params: { ...params, commandId }, method: "POST" });
}
//电压控制 开启
export function turnOnHighVoltage(params: { voltage: string | number }) {
export function turnOnHighVoltage(params: VoltageType) {
const commandId = addTxnRecord({ ...params, category: "debug" });
return httpRequest<BaseResponse<string>>({
url: "/api/cmd/turnOnHighVoltage",
@ -60,3 +60,7 @@ export function startWork(params: WorkType) {
export function stopWork() {
return httpRequest<BaseResponse<string>>({ url: "/api/cmd/stopWork", method: "POST" });
}
export function rotate(params:any){
return httpRequest<BaseResponse<string>>({ url: "/api/cmd/rotate",params, method: "POST" });
}

18
src/stores/equipmentStatus.ts
View File

@ -0,0 +1,18 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import * as R from "ramda";
import type { EquipmentStatusType } from '../services/globalCmd/cmdTypes'
export const useEquipmentStatusStore = defineStore("equipmentStatus", () => {
const equipmentStatus = ref<EquipmentStatusType[] | undefined>();
const setEquipmentStatus = (data: EquipmentStatusType[]) => {
if (!R.equals(equipmentStatus.value, data)) {
equipmentStatus.value = data;
}
};
return {
equipmentStatus,
setEquipmentStatus
}
})

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

@ -10,7 +10,7 @@
<div class="debug_axis">
<div class="axis">
<div>X轴：</div>
<input v-model="machineryForm.X" type="text" 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="ml-[10px]">毫米</div>
<div class="ml-[10px]">
<el-button type="primary" @click="onMoveMachinery('X')">移动</el-button>
@ -18,7 +18,7 @@
</div>
<div class="axis ml-[100px]">
Y轴：
<input v-model="machineryForm.Y" type="text" 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="ml-[10px]">毫米</div>
<div class="ml-[10px]">
<el-button type="primary" @click="onMoveMachinery('Y')">移动</el-button>
@ -26,7 +26,7 @@
</div>
<div class="axis ml-[100px]">
Z轴：
<input v-model="machineryForm.Z" type="text" 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="ml-[10px]">毫米</div>
<div class="ml-[10px]">
<el-button type="primary" @click="onMoveMachinery('Z')">移动</el-button>
@ -42,7 +42,7 @@
电压控制器：
</el-col>
<el-col :span="6" class="ml-[20px]">
<input v-model="voltageValue" placeholder='0~5000v' type="text" 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>
@ -56,10 +56,10 @@
</el-col>
<el-col :span="20">
<div class="ml-[20px]">
<input v-model="syringeForm.rotationSpeed" placeholder='转速' type="text" 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="text" 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,44 +76,42 @@
湿度：
</el-col>
<el-col :span="6" class="ml-[20px]">
<input placeholder='湿度' type="text" 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]" />
</el-col>
<el-col :span="4">
<el-button type="primary">确定</el-button>
</el-col>
</el-row>
<el-divider />
<el-row class="mt-[10px]">
<el-col :span="6" class="text-right">
电机速度：
</el-col>
<el-col :span="7" class="ml-[20px]">
<input placeholder='速度' type="text" 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="4" class="ml-[10px]">
<el-button type="primary">确定</el-button>
</el-col>
</el-row>
<el-row class="mt-[10px]">
<el-col :span="6" class="text-right">
电机移动时间：
</el-col>
<el-col :span="7" class="ml-[20px]">
<input placeholder='时间' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
秒
<el-col :span="4" class="text-right">
</el-col>
<el-col :span="4" class="ml-[10px]">
<el-button type="primary">确定</el-button>
<el-col :span="18">
<div>指定转速&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;指定时间：</div>
<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>
转速:<input type="number" v-model="rotateForm.rotationSpeed" 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>
<el-button type="primary" @click="onStopRotate">停止</el-button>
</div>
</el-col>
</el-row>
<el-divider />
<el-row class="mt-[10px]">
<!-- <el-row class="mt-[10px]">
<el-col :span="6" class="text-right">
推基质容量：
</el-col>
<el-col :span="6" class="ml-[20px]">
<input placeholder='容量' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />ml
<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]" />ml
</el-col>
<el-col :span="4" class="ml-[10px]">
<el-button type="primary">确定</el-button>
@ -124,12 +122,12 @@
预充基质：
</el-col>
<el-col :span="6" class="ml-[20px]">
<input placeholder='容量' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />ml
<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]" />ml
</el-col>
<el-col :span="4" class="ml-[10px]">
<el-button type="primary">确定</el-button>
</el-col>
</el-row>
</el-row> -->
</div>
</div>
@ -140,8 +138,8 @@
<el-divider />
<div>
<div>切换三通</div>
<el-button type="primary" @cick="onSwitchThreeWayValve('clean')">管路切换到基质</el-button>
<el-button type="primary" @cick="onSwitchThreeWayValve('spray')">管路切换到清洗</el-button>
<el-button type="primary" @click="onSwitchThreeWayValve('clean')">管路切换到基质</el-button>
<el-button type="primary" @click="onSwitchThreeWayValve('spray')">管路切换到清洗</el-button>
</div>
<el-divider />
<div>
@ -157,6 +155,7 @@
<el-divider />
<div class="h-[13rem] bg-[#f4f4f4] p-[10px]">
<div>状态反馈区</div>
</div>
</div>
</div>
@ -179,49 +178,49 @@
<div class="mt-[20px]">
行间距：
<input v-model="workForm.space" placeholder='' type="text" 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="text" 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="text" 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="text" 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="text" 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="text" 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="startAxis.x" placeholder='' type="text" 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="startAxis.y" placeholder='' type="text" 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="startAxis.x" 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="startAxis.y" 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="endAxis.x" placeholder='' type="text" 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="endAxis.y" placeholder='' type="text" 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="endAxis.x" 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="endAxis.y" 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">
@ -236,7 +235,13 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { createWebSocket, sharedWsUrl } from "@/services/socket";
import type { ControlNitrogen, MachineryType, SyringeType } from './type'
import type {
ControlNitrogen,
MachineryType,
SyringeType,
VoltageType,
ControlValueType
} from '@/services/globalCmd/cmdTypes'
import {
moveMotorToPosition,
switchThreeWayValve,
@ -245,14 +250,20 @@ import {
turnOffHighVoltage,
turnOnSyringePump,
turnOffSyringePump,
startWork
startWork,
rotate
} from "@/services/globalCmd/globalCmd";
const activeName = ref('debug')
const voltageValue = ref()
const syringeForm = ref<Partial<SyringeType>>({})
const syringeForm = ref<Record<string, string>>({})
const workForm = ref<Record<string, string>>({})
const startAxis = ref<any>({})
const endAxis = ref<any>({})
const axis = ref()
const rotationSpeed = ref()
const time = ref()
const rotateForm = ref<Record<string, string>>({})
let subscription:any
onMounted(()=>{
//连接websocket
@ -283,16 +294,21 @@ import {
}
const onSwitchThreeWayValve = (type:string) => {
switchThreeWayValve({type}).then(res => {
const params = <any>{
params:{type}
}
switchThreeWayValve(params).then(res => {
console.log('---onSwitchThreeWayValve---res---', res)
})
}
const onControlValve = (type:ControlNitrogen) => {
const params = {
const params = <ControlValueType>{
params:{
valveType:type,
isOpen:true
}
}
controlValve(params).then(res => {
console.log('---onControlValve---res---', res)
})
@ -300,7 +316,10 @@ import {
//电压控制 开启
const onTurnOnHighVoltage = () => {
turnOnHighVoltage({voltage: voltageValue.value}).then(res => {
const params = <VoltageType>{
params:{voltage: +voltageValue.value}
}
turnOnHighVoltage(params).then(res => {
console.log('---onTurnOnHighVoltage- 电压控制 on --res---', res)
})
}
@ -316,10 +335,14 @@ import {
const onTurnOnSyringePump = () => {
// SyringeType
const params = <SyringeType>{
...syringeForm.value
params:{
rotationSpeed: 1,
direction: 2,
time: 3
}
}
turnOnSyringePump(params).then(res => {
console.log('---onTurnOffHighVoltage- 电压控制 off--res---', res)
console.log('---onTurnOffHighVoltage- 电泵开启--res---', res)
})
}
@ -331,18 +354,35 @@ import {
const onStartWork = () => {
const params = <any>{
params:{
...workForm.value,
position:<any>[
startAxis.value,
endAxis.value
]
}
}
console.log('params---', params)
startWork(params).then(res => {
console.log('startWork-----', startWork)
})
}
const onRotate = () => {
const params = {
params : {
...rotateForm.value
}
}
rotate(params).then(res => {
})
}
const onStopRotate = () => {
}
</script>
<style lang="scss" scoped>
div{

12
src/views/debug/type.ts
View File

@ -1,12 +0,0 @@
export type MachineryType = {
axis: string,
position: string | number
}
export type ControlNitrogen = 'Dehumidification' | 'Cleaning' | 'Nozzle'
export type SyringeType = {
rotationSpeed: string | number,
direction: string | number,
time: string | number,
}

56
src/views/matrixManage/matrixList.vue
View File

@ -0,0 +1,56 @@
<template>
<main>
<div class="opt_btn p-[3rem]">
<el-button type="primary" @click="onAdd">新增基质</el-button>
<el-button>编辑</el-button>
<el-button>删除</el-button>
</div>
<div class="matrix_list">
</div>
<el-dialog v-model="addVisible" width="20rem" align-center>
<template #header><h2>新增基质</h2></template>
<el-form ref="ruleFormRef" :model="addForm" label-width="auto" style="max-width: 600px;" :rules="rules">
<el-form-item label="基质名称" prop="name">
<el-input v-model="addForm.name" />
</el-form-item>
</el-form>
<div class="flex justify-center">
<el-button type="primary" @click="onSave">保存</el-button>
<el-button @click="onCancel">取消</el-button>
</div>
</el-dialog>
</main>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const addVisible = ref(false)
const addForm = ref<Record<string,string>>({})
const rules = ref({
name: [{
required: true,
message: '请输入名称',
trigger: 'change',
}]
})
const matrixList = ref([])
const onAdd = () => {
addVisible.value = true;
}
const onSave = () => {
console.log('form----', addForm.value)
}
const onCancel = () => {
addForm.value = {}
addVisible.value = false;
}
</script>
<style lang="scss" scoped>
.el-button--primary{
background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);;
}
</style>
Write Preview
Loading…
Cancel
Save