消息数量websoket展示

src/layout/index.vue

@@ -43,7 +43,7 @@
                 <router-view v-slot="{ Component }" v-if="reloadRouter">
                     <transition name="fade-transform">
                         <keep-alive include="ProductList">
-                            <component :is="Component" />
+                            <component :is="Component"  :msgCount="msgCount"/>
                         </keep-alive>
                     </transition>
                 </router-view>
@@ -253,6 +253,11 @@ const msgCount = ref({
     allCount: 0,
     taskCount: 0,
     messageCount: 0,
+    messageCount_1:0,
+    messageCount_2:0,
+    messageCount_3:0,
+    messageCount_4:0,
+    messageCount_5:0,
 })
 
 //推送系统
@@ -270,7 +275,7 @@ const setInitSocket = () => {
         if (data) {
             msgCount.value = JSON.parse(data)
         }
-        console.log(data)
+        console.log(data,'消息信息')
     };
     socket.onerror = function ({data}) {
         console.log('发生错误:', data)

src/layout/modules/MenuItem.vue

@@ -50,6 +50,11 @@ const props = defineProps({
             allCount: 0,
             taskCount: 0,
             messageCount: 0,
+            messageCount_1:0,
+            messageCount_2:0,
+            messageCount_3:0,
+            messageCount_4:0,
+            messageCount_5:0,
         })
     },
 })

src/views/tasks/message-data.vue

@@ -51,11 +51,12 @@
 </template>
 
 <script setup>
-import {ref,onMounted} from "vue";
+import {ref,onMounted,watch} from "vue";
 import {useAppStore} from "~src/store";
 import {useRouter, useRoute} from 'vue-router'
 import messageApi from '~api/tasks/message';
 import {getObjValue,getArrValue} from "vue-utils-plus"
+import website from '~src/config/index'
 
 //变量
 const router = useRouter()
@@ -63,14 +64,44 @@ const useRoutes = useRoute()
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId);
 const contractId = ref(useAppState.getContractId);
+const userInfo = ref(useAppState.getUserInfo);
 
 //路由参数数据
 const routerQuery = useRoutes?.query;
 let MenuType = routerQuery?.MenuType || '1'
-
+//消息数量
+const props = defineProps(
+ {
+    msgCount: {
+        type: Object,
+        default: () => ({
+            allCount: 0,
+            taskCount: 0,
+            messageCount: 0,
+            messageCount_1:0,
+            messageCount_2:0,
+            messageCount_3:0,
+            messageCount_4:0,
+            messageCount_5:0,
+        })
+    },
+ }
+)
+const menumsgCount = ref(props.msgCount)
+//监听
+//监听
+watch(() => [
+    props.msgCount,
+], ([val]) => {
+   menumsgCount.value=val
+   if(val){
+        queryCurrentUserMessageCount()
+   }
+  
+}  
+)
 //渲染完成
 onMounted(()=> {
-    queryCurrentUserMessageCount()
     searchForm.value.type = MenuType
     searchForm.value.current = 1
     searchClick()
@@ -85,6 +116,7 @@ const menuOptions = ref([
     {key: '4', label: '工单反馈', icon: 'question-answer', badge: 0},
     {key: '5', label: '系统消息', icon: 'chat-settings', badge: 0},
 ]);
+
 const handleMenuValue = (item) => {
     searchForm.value.type = item.key
     searchForm.value.current = 1
@@ -98,18 +130,11 @@ const handleMenuValue = (item) => {
 
 //获取消息数量
 const queryCurrentUserMessageCount = async () => {
-    const typeArr = ['typeOneNumber','typeTowNumber','typeThreeNumber','typeFourNumber','typeFiveNumber'];
-    const { data } = await messageApi.queryCurrentUserMessageCount({
-        projectId: projectId.value,
-        contractId: contractId.value,
-    })
-    //处理数据
-    let res = getObjValue(data)
+    const typeArr = ['messageCount_1','messageCount_2','messageCount_3','messageCount_4','messageCount_5'];
     for (let i = 0; i < typeArr.length; i++) {
-        menuOptions.value[i].badge = res[typeArr[i]] ?? 0
+        menuOptions.value[i].badge =menumsgCount.value[typeArr[i]] ?? 0
     }
 }
-
 //消息类型
 const smsTypeData = ref([{label: "已读消息", value: "1"}, {label: "未读消息", value: "2"}])