接口接入

src/layout/top.vue

@@ -30,6 +30,15 @@
             @click="show = true"
           >
             <el-button icon="Search" circle color="#C1C4CB" />
+
+            <el-badge :value="2" :max="99" class="ml-20">
+              <el-button
+                icon="Bell"
+                circle
+                color="#C1C4CB"
+                @click="$router.push('/msg')"
+              />
+            </el-badge>
           </div>
           <div class="padding flex flex-align-center pointer">
             <el-avatar
@@ -69,6 +78,7 @@ import { useStore } from '../store/user.js'
 import permissionStore from '@/store/permission.js'
 import search from './search/index.vue'
 import config from '../config/website.js'
+import { ElNotification } from 'element-plus'
 
 export default {
   name: 'top',
@@ -154,6 +164,7 @@ export default {
   },
   methods: {
     initWebSocket() {
+      console.log(333)
       const wsuri = 'ws://192.168.31.83:8200/websocket/' + this.user.info.userId
       this.websock = new WebSocket(wsuri)
       this.websock.onmessage = this.websocketonmessage
@@ -168,11 +179,11 @@ export default {
       // 开启心跳
       this.start()
       // 连接建立之后执行send方法发送数据
-      const actions = {
-        room: '007854ce7b93476487c7ca8826d17eba',
-        info: '1121212'
-      }
-      this.websocketsend(JSON.stringify(actions))
+      // const actions = {
+      //   room: '007854ce7b93476487c7ca8826d17eba',
+      //   info: '1121212'
+      // }
+      // this.websocketsend(JSON.stringify(actions))
     },
     // 通信发生错误时触发
     websocketonerror() {
@@ -182,6 +193,12 @@ export default {
     // 客户端接收服务端数据时触发
     websocketonmessage(e) {
       console.log(e.data)
+      ElNotification({
+        title: 'Warning',
+        message: e.data,
+        type: 'success',
+        offset: 100
+      })
       // 收到服务器信息，心跳重置
       this.reset()
     },

src/views/msg/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-card shadow="hover">
+    <div class="light-green-bg">
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item v-for="i in 20" :name="i" :key="i">
+          <template #title>
+            <div class="dot" />
+            <span>消息标题</span>
+          </template>
+          <div>
+            Consistent with real life: in line with the process and logic of
+            real life, and comply with languages and habits that the users are
+            used to;
+          </div>
+          <div>
+            Consistent within interface: all elements should be consistent, such
+            as: design style, icons and texts, position of elements, etc.
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </el-card>
+</template>
+
+<route>
+{
+name: '通知中心',
+meta: { 'back':true,'showMsg' : "填写了”项目实际入库时间“的项目将不在预审管理中显示"}
+}
+</route>
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.dot {
+  background-color: red;
+  width: 10px;
+  height: 10px;
+  margin-right: 10px;
+  border-radius: 10px;
+}
+:deep(.el-collapse-item__header):hover {
+  background-color: #efefef;
+}
+</style>