From 39465a273f4a404d23019a182d519180e273826c Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Sat, 22 Mar 2025 21:57:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=96=B7=E6=B6=82=E7=BB=98=E5=88=B6?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eslint.config.js                         |   1 +
 src/components/common/FTButton/index.vue |   2 -
 src/components/spray/trayGraph/index.vue |   8 +-
 src/libs/socket.ts                       |  12 ++
 src/stores/useSystemStore.ts             |   2 +-
 src/views/spray/index.vue                | 260 +++++++++++++++++++++++++++----
 tsconfig.json                            |   1 +
 vite.config.ts                           |   2 +-
 8 files changed, 250 insertions(+), 38 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 23803f2..6304f0a 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -15,4 +15,5 @@ export default lintConfig({
     'ts/no-use-before-define': 0,
     'no-alert': 0,
   },
+  globals: { process: 'readonly' },
 })
diff --git a/src/components/common/FTButton/index.vue b/src/components/common/FTButton/index.vue
index 5ed5162..8ccabb1 100644
--- a/src/components/common/FTButton/index.vue
+++ b/src/components/common/FTButton/index.vue
@@ -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() // 执行异步操作
diff --git a/src/components/spray/trayGraph/index.vue b/src/components/spray/trayGraph/index.vue
index 09c7034..075a80d 100644
--- a/src/components/spray/trayGraph/index.vue
+++ b/src/components/spray/trayGraph/index.vue
@@ -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() // 批量重绘提升性能
 }
diff --git a/src/libs/socket.ts b/src/libs/socket.ts
index b264d13..4b309ab 100644
--- a/src/libs/socket.ts
+++ b/src/libs/socket.ts
@@ -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,
diff --git a/src/stores/useSystemStore.ts b/src/stores/useSystemStore.ts
index 51d0c69..8ecdec6 100644
--- a/src/stores/useSystemStore.ts
+++ b/src/stores/useSystemStore.ts
@@ -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,
diff --git a/src/views/spray/index.vue b/src/views/spray/index.vue
index 1630179..0129cbd 100644
--- a/src/views/spray/index.vue
+++ b/src/views/spray/index.vue
@@ -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 () => {
diff --git a/tsconfig.json b/tsconfig.json
index ada98a5..961a4a4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["node"],
     "composite": true,
     "target": "esnext",
     "jsx": "preserve",
diff --git a/vite.config.ts b/vite.config.ts
index 22dbc41..633ed22 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
   base: './',
   envPrefix: 'FT_',
   esbuild: {
-    drop: ['console'],
+    drop: process.env.NODE_ENV === 'production' ? ['console'] : [],
   },
   build: {
     sourcemap: false,