消息实时显示

src/api/ws.js

@@ -0,0 +1,51 @@
+
+import website from "@/config/website";
+import { getStore} from "@/util/store";
+import { getUserInfo} from '@/api/user'
+const userInfo=getStore({name: 'userInfo'}) || [];
+let ws = {};
+let socket
+ws.msgCount={
+    myMessageCount:'0',
+    userId:'1111111'
+}
+ws.setInitSocket= function(uid){
+	const user_id = userInfo.user_id;
+        socket = new WebSocket(website.socket + user_id);
+        socket.onopen = function (evt) {
+            console.log('websocket链接成功');
+        };
+      
+        socket.onclose = function (evt) {
+            console.log('websocket连接已断开')
+        };
+        let that=this
+        socket.onmessage = function ({data}) {
+            if (data) {
+                if(JSON.parse(data)!==null){
+                   ws.msgCount = JSON.parse(data)
+                    
+                }
+            }
+            console.log(data,'消息信息')
+        };
+        socket.onerror = function ({data}) {
+            console.log('发生错误:', data)
+        };
+
+}
+ws.socketSend= function(uid){
+	const user_id = userInfo.user_id;
+        console.log('发送消息:',)
+        if (socket) {
+            socket.send(user_id);
+        } else {
+            setTimeout(()=>{
+                socket.send(user_id);
+            }, 1000)
+        }
+    
+
+}
+export default ws;
+ 

src/page/index/index.vue

@@ -26,9 +26,9 @@
           v-show="!isSearch"
         >
           <keep-alive>
-            <router-view class="avue-view" v-if="$route.meta.keepAlive" />
+            <router-view class="avue-view" v-if="$route.meta.keepAlive" :msgCount="msgCount" />
           </keep-alive>
-          <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
+          <router-view class="avue-view" v-if="!$route.meta.keepAlive" :msgCount="msgCount" />
         </div>
       </div>
     </div>
@@ -66,14 +66,10 @@ export default {
       index: this,
     };
   },
- watch: {
-        $route(val){
-          //发送消息
-          this.socketSend()
-        },
-    },
 
 
+ computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu", "userInfo"]),
+
   data() {
     return {
       //搜索控制
@@ -83,11 +79,23 @@ export default {
       //刷新token的时间
       refreshTime: "",
       msgCount:{
-        myMessageCount:2
+        myMessageCount:'0',
+        userId:'1111111'
+  
       },
       routeinfo:{}
     };
   },
+ watch: {
+        $route(val){
+          //发送消息
+          this.socketSend()
+        },
+        menu(){
+           this.socketSend()
+        },
+
+    },
   created() {
   
     //实时检测刷新token
@@ -97,11 +105,9 @@ export default {
 
   mounted() {
     this.init();
-    this.setInitSocket()
-     
-
+   
   },
-  computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu", "userInfo"]),
+ 
 
   props: [],
   methods: {
@@ -153,6 +159,7 @@ export default {
     },
     // 定时检测token
     refreshToken() {
+       this.setInitSocket()
       this.refreshTime = setInterval(() => {
         const token =
           getStore({
@@ -186,9 +193,12 @@ export default {
         socket.onclose = function (evt) {
             console.log('websocket连接已断开')
         };
+        let that=this
         socket.onmessage = function ({data}) {
             if (data) {
-                this.msgCount = JSON.parse(data)
+                if(JSON.parse(data)!==null){
+                   that.msgCount = JSON.parse(data)
+                }
             }
             console.log(data,'消息信息')
         };

src/page/index/sidebar/index.vue

@@ -34,9 +34,16 @@
     props:{
       msgCount:{
         type:Object,
+         default: {
+           myMessageCount:0
+         }
        
       }
     },
+     watch: {
+       
+    },
+
     data() {
       return {};
     },

src/page/index/sidebar/sidebarItem.vue

@@ -18,7 +18,7 @@
             <i :class="item[iconKey]"></i>
             <span slot="title"
                   :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
-            <el-badge :value="msgCount.myMessageCount" class="menu-elbadge" v-if="item.code === 'work'&&msgCount.myMessageCount>0"/>
+            <el-badge :value="msgCount.myMessageCount||0" class="menu-elbadge" v-if="item.code === 'work'&&msgCount.myMessageCount>0"/>
           </div>
           
         </template>
@@ -31,7 +31,7 @@
             <div>
               <i :class="child[iconKey]"></i>
               <span slot="title">{{generateTitle(child)}}</span>
-              <el-badge :value="msgCount.myMessageCount" class="menu-elbadge1" v-if="child['code'] === 'new1'&&msgCount.myMessageCount>0"/>
+              <el-badge :value="msgCount.myMessageCount||0" class="menu-elbadge1" v-if="child['code'] === 'new1'&&msgCount.myMessageCount>0"/>
             </div>
           </el-menu-item>
           <sidebar-item v-else
@@ -78,12 +78,17 @@
         type: Boolean
       },
       msgCount:{
-         type: Object
+         type: Object,
+         default: {
+           myMessageCount:0
+         }
       }
     },
     created() {
     },
+
     mounted() {
+      
     },
     computed: {
       ...mapGetters(["roles"]),

src/views/news/news.vue

@@ -5,7 +5,12 @@
       mode="horizontal"
       @select="handleSelect"
     >
-      <el-menu-item index="1">我的消息</el-menu-item>
+      <el-menu-item index="1">
+        
+         <el-badge :value="msgCount.myMessageCount" style="display: flex;" >
+              <span class="font-bold">我的消息&nbsp;</span>
+          </el-badge>
+        </el-menu-item>
       <el-menu-item index="2">所有消息</el-menu-item>
     </el-menu>
     <avue-crud
@@ -138,6 +143,7 @@
 <script>
 import { queryBusinessUserOpinionList, manageUserOperationStatus, queryBusinessUserOpinionListAll } from "@/api/news/news.js";
 import { mapGetters } from "vuex";
+import ws from "@/api/ws.js";
 export default {
   data () {
     return {
@@ -233,6 +239,14 @@ export default {
       };
     },
   },
+  props:{
+    msgCount:{
+         type: Object,
+         default: {
+           myMessageCount:0
+         }
+    }
+  },
   created () {
     this.init();
     //console.log(this.userInfo)
@@ -272,6 +286,7 @@ export default {
       this.activeIndex = key
     },
     async SubmissionProgress () {//提交进度弹框保存按钮事件
+   
       if (this.curRow.currentLink == 2) {
         if (this.operation.manageTime) {
           await this.manageUserOperationStatus({
@@ -314,6 +329,7 @@ export default {
       }
     },
     async queryBusinessUserOpinionList () {//获取分配给当前登录用户的工单记录
+       this.showLoading=true
       const { data: res } = await queryBusinessUserOpinionList({
         current: this.page.currentPage,
         size: this.page.pageSize
@@ -322,6 +338,8 @@ export default {
       if (res.code == 200) {
         this.data = res.data.records
         this.page.total = res.data.total
+          this.showLoading=false
+
       }
     },
     async manageUserOperationStatus (da) {//业务人员提交环节操作
@@ -333,7 +351,10 @@ export default {
           message: '提交成功!'
         })
         //重新刷新列表
-        await this.queryBusinessUserOpinionList();
+        // await this.queryBusinessUserOpinionList();
+        //刷新页面
+          window.location.reload()
+
       }
     },
     async queryBusinessUserOpinionListAll () {//所有工单处理列表