GuoAnPeng
/
matrix-spray-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix:输入校验

master
guoapeng 4 months ago
parent
7bb7fecb7a
commit
80d05e3c15
4 changed files with 195 additions and 119 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. 8
      .postcssrc.js
  2. 73
      src/components/spray/trayGraph/index.vue
  3. 4
      src/libs/utils.ts
  4. 229
      src/views/spray/index.vue

8
.postcssrc.js
View File

@ -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': {

73
src/components/spray/trayGraph/index.vue
View File

@ -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({
<template>
<div class="main">
<!-- <div class="left-line"> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- </div> -->
<div :id="container" />
<!-- <div class="right-line"> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- <div class="line" /> -->
<!-- </div> -->
</div>
</template>
<style scoped lang="scss">
.main {
padding: 10px;
padding: 40px;
position: relative;
display: flex;
.left-line {
width: 5px;
height: 100%;
.line {
width: 100%;
height: 50px;
border-bottom: 1px solid #ccc;
}
}
.right-line {
width: 5px;
height: 100%;
.line {
width: 100%;
height: 50px;
border-bottom: 1px solid #ddd;
}
}
}
</style>

4
src/libs/utils.ts
View File

@ -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)
}

229
src/views/spray/index.vue
View File

@ -18,36 +18,6 @@ import { nextTick, onMounted, onUnmounted, ref } from 'vue'
const systemStore = useSystemStore()
const sprayRefs = ref<any>([])
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<any>([])
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<any>([])
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<SprayForm>({
@ -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<typeof setInterval>
console.log(currentSpeed)
// let poll: ReturnType<typeof setInterval>
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<any>([])
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 = () => {
<el-input
v-show="form.highVoltage"
v-model="form.highVoltageValue"
max="5000"
type="number"
class="voltage-input"
/>
@ -504,7 +533,7 @@ const addCraft = () => {
</div>
</el-form>
<el-drawer v-model="infoVisible" title="调整参数" direction="rtl" :close-on-click-modal="false">
<el-form label-width="auto" style="display: flex; flex-direction: column; justify-content: center">
<el-form :model="updateForm" label-width="auto" style="display: flex; flex-direction: column; justify-content: center" :rules="updateFormRules">
<div>
<el-form-item label="Z轴高度" prop="motorZHeight">
<el-input v-model="updateForm.motorZHeight" type="number" />

Write Preview
Loading…
Cancel
Save