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
8babc50407
commit
39465a273f
8 changed files with 250 additions and 38 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. 1
      eslint.config.js
  2. 2
      src/components/common/FTButton/index.vue
  3. 8
      src/components/spray/trayGraph/index.vue
  4. 12
      src/libs/socket.ts
  5. 2
      src/stores/useSystemStore.ts
  6. 260
      src/views/spray/index.vue
  7. 1
      tsconfig.json
  8. 2
      vite.config.ts

1
eslint.config.js
View File

@ -15,4 +15,5 @@ export default lintConfig({
'ts/no-use-before-define': 0,
'no-alert': 0,
},
globals: { process: 'readonly' },
})

2
src/components/common/FTButton/index.vue
View File

@ -23,10 +23,8 @@ const props = defineProps({
const isLoading = ref(false)
async function handleClick() {
console.log(props.clickHandle)
if (!props.clickHandle || isLoading.value)
return
console.log(32452353)
isLoading.value = true // 进入 loading
try {
await props.clickHandle() // 执行异步操作

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

@ -168,11 +168,15 @@ const addLine = (stroke: string = 'green') => {
layer.value.draw()
}
const updateLine = (point: { x: number, y: number }, index: number) => {
const updateLine = (point: { x: number, y: number }, index: number, stroke: string = 'green') => {
if (lines.value.length === 0) {
return
}
const currentLine = lines.value[index] // 修改: 获取最后一条线条
if (!lines.value[index]) {
addLine(stroke)
}
const currentLine = lines.value[index]
currentLine.points([...currentLine.points(), point.x, point.y])
currentLine.getLayer()!.batchDraw() // 批量重绘提升性能
}

12
src/libs/socket.ts
View File

@ -28,6 +28,8 @@ interface socket {
// eslint-disable-next-line ts/no-unsafe-function-type
registerCallback: Function
// eslint-disable-next-line ts/no-unsafe-function-type
unregisterCallback: Function
// eslint-disable-next-line ts/no-unsafe-function-type
registerInitCallback: Function
// eslint-disable-next-line ts/no-unsafe-function-type
init: (receiveMessage?: Function | null, type?: string, connectURL?: string) => any
@ -95,6 +97,16 @@ export const socket: socket = {
socket.receiveMessageCallBackObj[type].push(fn)
},
// 添加 unregisterCallback 方法
unregisterCallback: (fn: any, type: any) => {
if (socket.receiveMessageCallBackObj[type]) {
const index = socket.receiveMessageCallBackObj[type].indexOf(fn)
if (index !== -1) {
socket.receiveMessageCallBackObj[type].splice(index, 1)
}
}
},
init: async (
receiveMessageCallBack: any,
type?: string,

2
src/stores/useSystemStore.ts
View File

@ -16,7 +16,7 @@ export const useSystemStore = defineStore('system', {
systemSensor: {
humidity: 0,
},
isDebug: false,
isDebug: import.meta.env.FT_NODE_ENV === 'dev',
streamVisible: false,
systemList: [{ cmdCode: '' }],
targetHumidity: 0,

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

@ -1,7 +1,6 @@
<script setup lang="ts">
import { list as listMatrix } from 'apis/matrix'
import { getListByMatrixId, update } from 'apis/matrixCraft'
import { getDeviceStatus, getSprayStatus } from 'apis/system'
import route from 'assets/images/route.png'
import route_active from 'assets/images/route_active.png'
import route_horizontal_active from 'assets/images/route_horizontal2.png'
@ -14,7 +13,7 @@ import { FtMessage } from 'libs/message'
import { socket } from 'libs/socket'
import { sendControl } from 'libs/utils'
import { useSystemStore } from 'stores/useSystemStore'
import { nextTick, onMounted, ref } from 'vue'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
const systemStore = useSystemStore()
@ -48,44 +47,237 @@ const submitParam = async () => {
const infoVisible = ref(false)
const data = {
cmdId: '1742650987568',
cmdCode: 'matrix_spray_start',
sprayTaskSprayedList: [
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 20,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 23,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 23,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 26,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 26,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 29,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 29,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 32,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 32,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 35,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 35,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 38,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 38,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 41,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 41,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 44,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 44,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 21,
y: 47,
},
},
{
index: 0,
number: 1,
sprayedPoints: {
x: 4,
y: 47,
},
},
],
sprayParams: {
matrixId: 1,
matrixCraftId: 1,
matrixPathType: 'horizontal',
motorZHeight: 60,
gasPressure: 3,
volume: 20,
highVoltage: true,
highVoltageValue: 4000,
spacing: 3,
movingSpeed: 10,
times: 2,
position: [
{
select: true,
x1: 4,
y1: 20,
x2: 21,
y2: 60,
index: 0,
},
],
id: 1,
createTime: '2025-03-18 19:33:46',
updateTime: '2025-03-18 19:33:46',
name: '工艺1',
createUser: null,
},
}
onMounted(async () => {
socket.init(sprayPointReceiveMessage, 'spray_point')
socket.init(finishMessage, 'cmd_response')
await getMatrixList()
console.log(222, systemStore.systemStatus.spraying)
await getDeviceStatus().then((res: any) => {
systemStore.updateSystemStatus(res)
if (systemStore.systemStatus.spraying) {
getSpraying()
}
})
// await getDeviceStatus().then((res: any) => {
// systemStore.updateSystemStatus(res)
// if (systemStore.systemStatus.spraying) {
// getSpraying()
// }
// })
getSpraying()
})
const isActive = true
onUnmounted(() => {
socket.unregisterCallback(sprayPointReceiveMessage, 'spray_point')
socket.unregisterCallback(finishMessage, 'cmd_response')
// isActive = false
})
const getSpraying = async () => {
const res = await getSprayStatus()
const res: any = data
// const res: any = await getSprayStatus()
const sprayTaskSprayedList = res.sprayTaskSprayedList
form.value = res.sprayParams
cmdId = res.cmdId
form.value.position = [{ select: false }, { select: false }, { select: false }, { select: false }]
sprayTaskSprayedList.forEach((item: any) => {
form.value.position[item.index] = {
select: true,
x1: item.x1,
y1: item.y1,
x2: item.x2,
y2: item.y2,
index: item.index,
}
form.value = {
...res.sprayParams,
position: [{ select: false }, { select: false }, { select: false }, { select: false }],
}
res.sprayParams.position.forEach((p: any) => {
form.value.position[p.index] = p
nextTick(() => {
sprayRefs.value[item.index].updateSelection(item.x1 * 5, item.y1 * 5, (item.x1 + item.x2) * 5, (item.y1 + item.y2) * 5)
console.log('x', p.x1 * 5)
console.log('y', p.y1 * 5)
console.log('width', (p.x1 + p.x2) * 5)
console.log('height', (p.y1 + p.y2) * 5)
sprayRefs.value[p.index].updateSelection(p.x1 * 5, p.y1 * 5, (p.x2 - p.x1) * 5, (p.y2 - p.y1) * 5)
})
sprayTaskSprayedList.forEach((task: any) => {
nextTick(() => {
drawLine(task.index, { x: task.sprayedPoints.x * 5, y: task.sprayedPoints.y * 5 }, task.number)
})
})
sprayTaskSprayedList.forEach((task: any) => {
nextTick(() => {
drawLine(task.index, { x: task.sprayedPoints.x * 5, y: task.sprayedPoints.y * 5 }, task.number)
})
// socket.init(sprayPointReceiveMessage, 'spray_point')
// socket.init(finishMessage, 'cmd_response')
})
}
@ -184,9 +376,9 @@ console.log(currentSpeed)
const colors = ['#FAF0E6', '#191970', '#2E8B57', '#C0FF3E', '#8B658B', '#EE7942', '#EE1289', '#FF00FF', '#C6E2FF', '#556B2F', '#00BFFF', '#7B68EE']
const sprayPointReceiveMessage = (data: any) => {
if (data.cmdId === cmdId) {
const { currentPoint, nextPoint, index, number } = data
const { currentPoint, index, number } = data
drawLine(index, { x: currentPoint.x * 5, y: currentPoint.y * 5 }, number)
drawLine(index, { x: nextPoint.x * 5, y: nextPoint.y * 5 }, number)
// drawLine(index, { x: nextPoint.x * 5, y: nextPoint.y * 5 }, number)
}
// if (poll) {
@ -231,13 +423,17 @@ const finishMessage = (data: any) => {
}
const drawLine = async (index: number, point: { x: number, y: number }, number: number) => {
console.log('drawLine', sprayRefs.value[index], index, point, number)
await nextTick(() => {
if (!sprayRefs.value[index].hasLine(number)) {
if (!isActive) {
return
}
if (!(sprayRefs.value[index].hasLine(number))) {
sprayRefs.value[index].addLine(colors[number])
}
sprayRefs.value[index].updateLine(point, number, colors[number])
})
console.log('drawLine', point)
sprayRefs.value[index].updateLine(point, number)
}
const pauseWork = async () => {

1
tsconfig.json
View File

@ -1,5 +1,6 @@
{
"compilerOptions": {
"types": ["node"],
"composite": true,
"target": "esnext",
"jsx": "preserve",

2
vite.config.ts
View File

@ -11,7 +11,7 @@ export default defineConfig({
base: './',
envPrefix: 'FT_',
esbuild: {
drop: ['console'],
drop: process.env.NODE_ENV === 'production' ? ['console'] : [],
},
build: {
sourcemap: false,

Write Preview
Loading…
Cancel
Save