增加防抖

package.json

@@ -16,6 +16,7 @@
     "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "4.x",
     "axios": "^1.8.4",
+    "lodash": "^4.17.21",
     "mqtt": "^5.10.4",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "@types/lodash": "^4.17.16",
     "@types/node": "^22.13.8",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-prettier": "^10.2.0",

pnpm-lock.yaml

@@ -11,12 +11,18 @@ importers:
       '@ant-design/icons-vue':
         specifier: ^7.0.1
         version: 7.0.1(vue@3.5.13(typescript@5.8.2))
+      '@types/lodash':
+        specifier: ^4.17.16
+        version: 4.17.16
       ant-design-vue:
         specifier: 4.x
         version: 4.2.6(vue@3.5.13(typescript@5.8.2))
       axios:
         specifier: ^1.8.4
         version: 1.8.4
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       mqtt:
         specifier: ^5.10.4
         version: 5.10.4
@@ -626,6 +632,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/lodash@4.17.16':
+    resolution: {integrity: sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==}
+
   '@types/node@22.13.8':
     resolution: {integrity: sha512-G3EfaZS+iOGYWLLRCEAXdWK9my08oHNZ+FHluRiggIYJPOXzhOiDgpVCUHaUvyIC5/fj7C/p637jdzC666AOKQ==}
 
@@ -2583,6 +2592,8 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/lodash@4.17.16': {}
+
   '@types/node@22.13.8':
     dependencies:
       undici-types: 6.20.0

src/utils/mqtt/mqtt.ts

@@ -67,7 +67,6 @@ export class Mqtt {
 
   onMessage(topic: string, payload: string, packet?: unknown) {
     try {
-      console.debug(packet)
       const notify = JSON.parse(payload) as NotifyMessage
       // console.debug(notify);
 

src/views/home/CarArrive.vue

@@ -155,6 +155,7 @@ import { Modal } from 'ant-design-vue'
 import { useRoute } from 'vue-router'
 import type { VehicleInfo, VehicleResponse } from './types'
 import { mqttInstants, InitMqtt } from '../../utils/mqtt'
+import { debounce } from 'lodash'
 
 const route = useRoute()
 const ccmNo = route.params.ccmNo || '5'
@@ -403,13 +404,13 @@ const editInfo = (params: { licensePlate?: string; arriveNum?: string | number }
     })
 }
 
-const onMessage = (msg: Record<string, string>) => {
+const onMessage = debounce((msg: Record<string, string>) => {
   const { car, position } = msg
   console.log('接收到了onMessage消息 = ', msg)
   if (!car || Number(positionNo) !== Number(position)) return
   arriveNo.value = position
   getVehicleInfo(car)
-}
+}, 10000)
 
 onMounted(() => {
   getCars()