全局通知

src/App.vue

@@ -5,6 +5,93 @@
 </template>
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  data() {
+    return {
+      notificationInstance: null,  // 用于存储当前的通知实例
+      showNotification: false,     // 控制是否显示通知
+    }
+  },
+  mounted() {
+    this.initWebSocket();
+  }, methods: {
+    initWebSocket() {
+      const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'webSocket/stock'
+      this.websock = new WebSocket(wsUri)
+      this.websock.onerror = this.webSocketOnError
+      this.websock.onmessage = this.webSocketOnMessage
+      this.pollMsg()
+    },
+    webSocketOnError(e) {
+      this.$notify({
+        title: 'WebSocket连接发生错误',
+        type: 'error',
+        duration: 0
+      })
+    }, webSocketOnMessage(e) {
+      const data = JSON.parse(e.data)
+      if (data.msgType === 'INFO') {
+        this.createOrUpdateNotification(data);
+      } else if (data.msgType === 'ERROR') {
+        this.$notify({
+          title: '',
+          message: data.msg,
+          dangerouslyUseHTMLString: true,
+          type: 'error',
+          duration: 0
+        })
+      }
+    },
+    webSocketSend(agentData) {
+      this.websock.send(agentData)
+    },
+    createOrUpdateNotification(data) {
+      // 更新或创建通知
+      if (this.showNotification && this.notificationInstance) {
+        this.updateNotification(data);
+      } else {
+        this.createNotification(data);
+      }
+      this.showNotification = true;
+    },
+
+    updateNotification(data) {
+      // 尝试更新通知内容
+      try {
+        this.notificationInstance.title = '点击关注公众号';
+        this.notificationInstance.message = data.msg;
+      } catch (error) {
+        // 如果更新失败，关闭当前通知并重新创建
+        this.createNotification(data);
+      }
+    },
+
+    createNotification(data) {
+      // 创建一个新的通知实例
+      this.notificationInstance = this.$notify({
+        title: '点击关注公众号',
+        message: data.msg,
+        type: 'success',
+        offset: 100,
+        duration: 0,
+        onClose: this.onNotificationClose // 关闭时调用的方
+      });
+    },
+    onNotificationClose() {
+      this.showNotification = false;
+      this.notificationInstance = null;
+    }
+  },
+  beforeDestroy() {
+
+    if (this.websock && this.websock.readyState === WebSocket.OPEN) {
+      this.websock.close();
+    }
+    if (this.notificationInstance) {
+      this.notificationInstance.close();  // 关闭通知
+      this.showNotification = false;
+      this.notificationInstance = null;
+    }
+  }
 }
 </script>

src/api/stock.js

@@ -75,8 +75,8 @@ export function containerOut(data) {
 export function stockMsg(data) {
   return request({
     url: 'api/stock/stockMsg',
-    method: 'post',
+    method: 'get',
-    data
+    params: {data}
   })
 }
 

src/views/home.vue

@@ -36,107 +36,13 @@ export default {
   },
   data() {
     return {
-      notificationInstance: null,  // 用于存储当前的通知实例
-      showNotification: false,     // 控制是否显示通知
       lineChartData: lineChartData.newVisitis
     }
   },
-  mounted() {
-    this.initWebSocket();
-  },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]
     },
-    async pollMsg() {
-      //3秒轮询一次
-      this.pollingTimer = setInterval(async () => {
-        const data = {msg: '友仓智慧物流,软件定义物流。', msgType: 'INFO'}
-        console.log(data)
-        this.createOrUpdateNotification(data)
-      }, 3000);
-    },
-    initWebSocket() {
-      stockUrl.stockMsg();
-      const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'webSocket/stock'
-      this.websock = new WebSocket(wsUri)
-      this.websock.onerror = this.webSocketOnError
-      this.websock.onmessage = this.webSocketOnMessage
-      this.pollMsg()
-    },
-    webSocketOnError(e) {
-      this.$notify({
-        title: 'WebSocket连接发生错误',
-        type: 'error',
-        duration: 0
-      })
-    }, webSocketOnMessage(e) {
-      const data = JSON.parse(e.data)
-      if (data.msgType === 'INFO') {
-        this.createOrUpdateNotification(data);
-      } else if (data.msgType === 'ERROR') {
-        this.$notify({
-          title: '',
-          message: data.msg,
-          dangerouslyUseHTMLString: true,
-          type: 'error',
-          duration: 0
-        })
-      }
-    },
-    webSocketSend(agentData) {
-      this.websock.send(agentData)
-    },
-    createOrUpdateNotification(data) {
-      // 更新或创建通知
-      if (this.showNotification && this.notificationInstance) {
-        this.updateNotification(data);
-      } else {
-        this.createNotification(data);
-      }
-      this.showNotification = true;
-    },
-
-    updateNotification(data) {
-      // 尝试更新通知内容
-      try {
-        this.notificationInstance.title = '点击关注公众号';
-        this.notificationInstance.message = data.msg;
-      } catch (error) {
-        // 如果更新失败，关闭当前通知并重新创建
-        this.createNotification(data);
-      }
-    },
-
-    createNotification(data) {
-      // 创建一个新的通知实例
-      this.notificationInstance = this.$notify({
-        title: '点击关注公众号',
-        message: data.msg,
-        type: 'success',
-        offset: 100,
-        duration: 0,
-        onClose: this.onNotificationClose // 关闭时调用的方
-      });
-    },
-    onNotificationClose() {
-      this.showNotification = false;
-      this.notificationInstance = null;
-    }
-  },
-  beforeDestroy() {
-    if (this.pollingTimer) {
-      clearInterval(this.pollingTimer);
-    }
-    if (this.websock && this.websock.readyState === WebSocket.OPEN) {
-      this.websock.close();
-    }
-    if (this.notificationInstance) {
-      console.log(111)
-      this.notificationInstance.close();  // 关闭通知
-      this.showNotification = false;
-      this.notificationInstance = null;
-    }
   }
 }
 </script>