消息通知

src/api/stock.js

@@ -72,4 +72,12 @@ export function containerOut(data) {
   })
 }
 
-export default { add, edit, del,containerIn,containerOut,updateStockStatus,updateStock}
+export function stockMsg(data) {
+  return request({
+    url: 'api/stock/stockMsg',
+    method: 'post',
+    data
+  })
+}
+
+export default { add, edit, del,containerIn,containerOut,updateStockStatus,stockMsg}

src/views/home.vue

@@ -1,5 +1,4 @@
 <template>
-
 </template>
 
 <script>
@@ -7,6 +6,7 @@
 import PanelGroup from './dashboard/PanelGroup'
 import LineChart from './dashboard/LineChart'
 import crudOperation from "@crud/CRUD.operation.vue";
+import stockUrl from "@/api/stock";
 
 const lineChartData = {
   newVisitis: {
@@ -39,41 +39,83 @@ export default {
       lineChartData: lineChartData.newVisitis
     }
   },
+  mounted() {
+    this.initWebSocket();
+  },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]
-    }
+    },
+    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
+    },
+    webSocketOnError(e) {
+      this.$notify({
+        title: 'WebSocket连接发生错误',
+        type: 'error',
+        duration: 0
+      })
+    }, webSocketOnMessage(e) {
+      const data = JSON.parse(e.data)
+      console.log(data)
+      if (data.msgType === 'INFO') {
+        this.$notify({
+          title: '点击关注公众号',
+          message: data.msg,
+          type: 'success',
+          duration: 0
+        });
+      } else if (data.msgType === 'ERROR') {
+        this.$notify({
+          title: '',
+          message: data.msg,
+          dangerouslyUseHTMLString: true,
+          type: 'error',
+          duration: 0
+        })
+      }
+    },
+    webSocketSend(agentData) {
+      this.websock.send(agentData)
+    },
+
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 2px;
-    background-color: rgb(240, 242, 245);
-    position: relative;
-    .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px;
-      margin-bottom: 15px;
-      margin-right: 10px;
-      margin-left: 10px;
-    }
-    .chart-wrapper2 {
-      background: #fff;
-      padding: 16px 16px;
-      margin-right: 10px;
-      margin-left: 10px;
-    }
+.dashboard-editor-container {
+  padding: 2px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
 
-    .lightgreen-box {
-      height: 260px;
-    }
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    margin-left: 10px;
   }
 
-  @media (max-width:1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
+  .chart-wrapper2 {
+    background: #fff;
+    padding: 16px 16px;
+    margin-right: 10px;
+    margin-left: 10px;
   }
+
+  .lightgreen-box {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
 </style>