消息通知

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,19 +39,60 @@ 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 {
+.dashboard-editor-container {
   padding: 2px;
   background-color: rgb(240, 242, 245);
   position: relative;
+
   .chart-wrapper {
     background: #fff;
     padding: 16px 16px;
@@ -59,6 +100,7 @@ export default {
     margin-right: 10px;
     margin-left: 10px;
   }
+
   .chart-wrapper2 {
     background: #fff;
     padding: 16px 16px;
@@ -69,11 +111,11 @@ export default {
   .lightgreen-box {
     height: 260px;
   }
-  }
+}
 
-  @media (max-width:1024px) {
+@media (max-width: 1024px) {
   .chart-wrapper {
     padding: 8px;
   }
-  }
+}
 </style>