From 80d05e3c1591b4ad6ca9ddb7905f16774bf6ffa9 Mon Sep 17 00:00:00 2001 From: guoapeng Date: Mon, 24 Mar 2025 17:07:22 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E8=BE=93=E5=85=A5=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .postcssrc.js | 8 +- src/components/spray/trayGraph/index.vue | 73 +++++++--- src/libs/utils.ts | 4 + src/views/spray/index.vue | 229 +++++++++++++++++-------------- 4 files changed, 195 insertions(+), 119 deletions(-) diff --git a/.postcssrc.js b/.postcssrc.js index 31e35cd..7843a00 100644 --- a/.postcssrc.js +++ b/.postcssrc.js @@ -24,7 +24,7 @@ export default { viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw - selectorBlackList: ['.ignore', '.hairlines', ':after'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 + selectorBlackList: ['.ignore', '.hairlines', ':after', '.left-line', '.right-line', '.line'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 @@ -33,7 +33,11 @@ export default { }, 'postcss-viewport-units': { - filterRule: rule => !rule.selector.includes('::after') && !rule.selector.includes('::before') && !rule.selector.includes(':after') && !rule.selector.includes(':before'), + filterRule: rule => + !rule.selector.includes('::after') + && !rule.selector.includes('::before') + && !rule.selector.includes(':after') + && !rule.selector.includes(':before'), }, 'cssnano': { diff --git a/src/components/spray/trayGraph/index.vue b/src/components/spray/trayGraph/index.vue index 2a23079..90771b4 100644 --- a/src/components/spray/trayGraph/index.vue +++ b/src/components/spray/trayGraph/index.vue @@ -22,11 +22,13 @@ onMounted(() => { addStage() }) +const zoom = 5 + const addStage = () => { stage.value = new Konva.Stage({ container: props.container, - width: 25 * 5, - height: 75 * 5, + width: 25 * zoom, + height: 75 * zoom, }) layer.value = new Konva.Layer() @@ -39,15 +41,15 @@ const addStage = () => { layer.value.draw() } -let newWidth = 85 -let newHeight = 200 +let newWidth = (25 - 5 * 2) * zoom +let newHeight = (75 - 15 * 2) * zoom const addSelect = () => { rect.value = new Konva.Rect({ - x: 20, - y: 100, - width: 85, - height: 200, + x: 5 * zoom, + y: 15 * zoom, + width: (25 - 5 * 2) * zoom, + height: (75 - 15 * 2) * zoom, fill: 'rgba(238,10,36, 0.2)', draggable: true, }) @@ -103,7 +105,7 @@ const addSelect = () => { } const addGuideLine = () => { - for (let i = 5; i < stage.value.width(); i += 5) { + for (let i = zoom; i < stage.value.width(); i += zoom) { layer.value.add( new Konva.Line({ points: [i, 0, i, stage.value.height()], @@ -114,11 +116,12 @@ const addGuideLine = () => { }), ) } - for (let j = 5; j < stage.value.height(); j += 5) { + for (let j = zoom; j < stage.value.height(); j += zoom) { layer.value.add( new Konva.Line({ points: [0, j, stage.value.width(), j], - stroke: [50, 100, 150, 200, 250, 300].includes(j) ? '#54FF9F' : '#ddd', + stroke: [10 * zoom, 20 * zoom, 30 * zoom, 40 * zoom, 50 * zoom, 60 * zoom].includes(j) ? '#ccc' : '#ddd', + // stroke: '#ddd', strokeWidth: 1, listening: false, }), @@ -132,10 +135,10 @@ const getSelection = () => { const pos = rect.value.position() console.log(newWidth, newHeight) return { - x1: formatNum(pos.x / 5), - y1: formatNum(pos.y / 5), - x2: formatNum((pos.x + newWidth) / 5), - y2: formatNum((pos.y + newHeight) / 5), + x1: formatNum(pos.x / zoom), + y1: formatNum(pos.y / zoom), + x2: formatNum((pos.x + newWidth) / zoom), + y2: formatNum((pos.y + newHeight) / zoom), } } return null @@ -161,7 +164,7 @@ const addLine = (stroke: string = 'green') => { const newLine = new Konva.Line({ points: [], stroke, - strokeWidth: 5, + strokeWidth: zoom, listening: false, }) lines.value.push(newLine) // 修改: 将新线条添加到 lines 数组中 @@ -221,12 +224,48 @@ defineExpose({ diff --git a/src/libs/utils.ts b/src/libs/utils.ts index e30be42..55906f6 100644 --- a/src/libs/utils.ts +++ b/src/libs/utils.ts @@ -109,3 +109,7 @@ const rgbToHex = (r: number, g: number, b: number): string => { } export const colors = generateColors(100) + +export function isNumber(value: any) { + return typeof value === 'number' && !Number.isNaN(value) +} diff --git a/src/views/spray/index.vue b/src/views/spray/index.vue index dfeee80..59918ba 100644 --- a/src/views/spray/index.vue +++ b/src/views/spray/index.vue @@ -18,36 +18,6 @@ import { nextTick, onMounted, onUnmounted, ref } from 'vue' const systemStore = useSystemStore() -const sprayRefs = ref([]) - -const updateParam = () => { - updateForm.value = { - motorZHeight: form.value.motorZHeight, // 高度 - gasPressure: form.value.gasPressure, // Mpa兆帕 - volume: form.value.volume, // 单位uL微升 - highVoltage: form.value.highVoltage, // 是否打开高压 - highVoltageValue: form.value.highVoltageValue, // 高压值 - movingSpeed: form.value.movingSpeed, // 毫米 - } - infoVisible.value = true -} - -const submitParam = async () => { - const params = { - cmdCode: 'matrix_spray_change_param', - cmdId: '', - params: updateForm.value, - } - form.value = { - ...form.value, - ...updateForm.value, - } - await sendControl(params) - infoVisible.value = false -} - -const infoVisible = ref(false) - onMounted(async () => { socket.init(sprayPointReceiveMessage, 'spray_point') socket.init(finishMessage, 'cmd_response') @@ -67,6 +37,26 @@ onUnmounted(() => { socket.unregisterCallback(finishMessage, 'cmd_response') }) +const matrixList = ref<{ name: string, id: number }[]>([]) +const getMatrixList = async () => { + const res = await listMatrix({ pageNum: 1, pageSize: 100, matrixName: '' }) + matrixList.value = res.list +} + +const matrixCraftList = ref([]) +const matrixChange = async (value: number) => { + form.value.matrixCraftId = undefined + matrixCraftList.value = await getListByMatrixId(value) +} + +const matrixCraftChange = (value: number) => { + form.value = { + ...form.value, + ...matrixCraftList.value.find((item: { id: number }) => item.id === value), + } + // formRef.value.validate() +} + const getSpraying = async () => { const res: any = await getSprayStatus() const sprayTaskSprayedList = res.sprayTaskSprayedList @@ -93,10 +83,34 @@ const getSpraying = async () => { }) } -const matrixList = ref([]) -const getMatrixList = async () => { - const res = await listMatrix({ pageNum: 1, pageSize: 100, matrixName: '' }) - matrixList.value = res.list +const sprayRefs = ref([]) + +const infoVisible = ref(false) + +const updateParam = () => { + updateForm.value = { + motorZHeight: form.value.motorZHeight, // 高度 + gasPressure: form.value.gasPressure, // Mpa兆帕 + volume: form.value.volume, // 单位uL微升 + highVoltage: form.value.highVoltage, // 是否打开高压 + highVoltageValue: form.value.highVoltageValue, // 高压值 + movingSpeed: form.value.movingSpeed, // 毫米 + } + infoVisible.value = true +} + +const submitParam = async () => { + const params = { + cmdCode: 'matrix_spray_change_param', + cmdId: '', + params: updateForm.value, + } + form.value = { + ...form.value, + ...updateForm.value, + } + await sendControl(params) + infoVisible.value = false } const form = ref({ @@ -145,7 +159,7 @@ const checkPosition = () => { } }) .filter((item: { select: boolean }) => item.select) - console.log(position) + for (let i = 0; i < position.length; i++) { const p = position[i] if (p.x1 < 0 || p.y1 < 0 || p.x2 < 0 || p.y2 < 0 || p.x1 > 25 || p.y1 > 75 || p.x2 > 25 || p.y2 > 75) { @@ -157,6 +171,7 @@ const checkPosition = () => { } const maskVisible = ref(false) + const startWork = async () => { formRef.value.validate(async (valid: boolean) => { console.log('valid', valid) @@ -185,10 +200,49 @@ const startWork = async () => { }) } +const pauseWork = async () => { + const params = { + cmdCode: 'matrix_spray_pause', + cmdId: '', + } + await sendControl(params) +} + +const continueWork = async () => { + const params = { + cmdCode: 'matrix_spray_continue', + cmdId: '', + params: { + motorZHeight: form.value.motorZHeight, // 高度 + gasPressure: form.value.gasPressure, // Mpa兆帕 + volume: form.value.volume, // 单位uL微升 + highVoltage: form.value.highVoltage, // 是否打开高压 + highVoltageValue: form.value.highVoltageValue, // 高压值 + movingSpeed: form.value.movingSpeed, // 毫米 + }, + } + await sendControl(params) + currentSpeed = Number(form.value.movingSpeed) +} + +const stopWork = async () => { + const params = { + cmdCode: 'matrix_spray_stop', + cmdId: '', + } + await sendControl(params) + form.value.position.forEach((item, index) => { + if (item.select) { + sprayRefs.value[index].clearLines() + } + }) +} + let currentSpeed = 0 -// let poll: ReturnType console.log(currentSpeed) +// let poll: ReturnType +let cmdId = '' const sprayPointReceiveMessage = (data: any) => { if (data.cmdId === cmdId) { const { currentPoint, index, number } = data @@ -225,7 +279,7 @@ const sprayPointReceiveMessage = (data: any) => { // }, 500) // } } -let cmdId = '' + const finishMessage = (data: any) => { if (data.cmdId === cmdId) { if (data.status === 'fail') { @@ -255,78 +309,39 @@ const drawLine = async (index: number, point: { x: number, y: number }, number: }) } -const pauseWork = async () => { - const params = { - cmdCode: 'matrix_spray_pause', - cmdId: '', - } - await sendControl(params) -} - -const continueWork = async () => { - const params = { - cmdCode: 'matrix_spray_continue', - cmdId: '', - params: { - motorZHeight: form.value.motorZHeight, // 高度 - gasPressure: form.value.gasPressure, // Mpa兆帕 - volume: form.value.volume, // 单位uL微升 - highVoltage: form.value.highVoltage, // 是否打开高压 - highVoltageValue: form.value.highVoltageValue, // 高压值 - movingSpeed: form.value.movingSpeed, // 毫米 - }, - } - await sendControl(params) - currentSpeed = Number(form.value.movingSpeed) -} - -const stopWork = async () => { - const params = { - cmdCode: 'matrix_spray_stop', - cmdId: '', - } - await sendControl(params) - form.value.position.forEach((item, index) => { - if (item.select) { - sprayRefs.value[index].clearLines() - } - }) -} - -const matrixCraftList = ref([]) -const matrixChange = async (value: number) => { - form.value.matrixCraftId = undefined - matrixCraftList.value = await getListByMatrixId(value) -} - -const matrixCraftChange = (value: number) => { - form.value = { - ...form.value, - ...matrixCraftList.value.find((item: { id: number }) => item.id === value), - } - // formRef.value.validate() -} - -const rules = { - matrixId: [{ required: true, message: '请选择基质', trigger: 'change' }], +const updateFormRules = { motorZHeight: [ { required: true, trigger: 'blur', validator: (rule: any, value: any, callback: any) => { setTimeout(() => { - if (value < 15) { - callback(new Error('最小安全高度为15mm')) - } - else { - callback() + if (!value) { + callback(new Error('请输入高度')) } + else + if (value < 15) { + callback(new Error('最小安全高度为15mm')) + } + else { + callback() + } }, 500) }, }, ], gasPressure: [{ required: true, message: '请输入氮气气压', trigger: 'blur' }], - volume: [{ required: true, message: '请输入基质流速', trigger: 'blur' }], + volume: [{ required: true, trigger: 'blur', validator: (rule: any, value: any, callback: any) => { + if (!value) { + callback(new Error('请输入基质流速')) + } + else if (value > 100) { + callback(new Error('基质流速最大为100 uL/min')) + } + else { + callback() + } + } }], highVoltageValue: [ { required: true, @@ -344,9 +359,24 @@ const rules = { }, }, ], - movingSpeed: [{ required: true, message: '请输入移动速度', trigger: 'blur' }], + movingSpeed: [{ required: true, trigger: 'blur', validator: (rule: any, value: any, callback: any) => { + if (!value) { + callback(new Error('请输入移动速度')) + } + else if (value > 50) { + callback(new Error('移动速度最大为50 mm/s')) + } + else { + callback() + } + } }], +} + +const rules = { + matrixId: [{ required: true, message: '请选择基质', trigger: 'change' }], spacing: [{ required: true, message: '请输入间距', trigger: 'blur' }], times: [{ required: true, message: '请输入喷涂次数', trigger: 'blur' }], + ...updateFormRules, } const addVisible = ref(false) @@ -471,7 +501,6 @@ const addCraft = () => { @@ -504,7 +533,7 @@ const addCraft = () => { - +