菜单消息数量

src/layout/index.vue

@@ -11,7 +11,7 @@
             </div>
             <div class="hc-aside-menu-box">
                 <el-scrollbar>
-                    <MenuBar :datas="MenuBarData" :cur="MenuBarKey" :collapse="isCollapse" @change="MenuBarChange"/>
+                    <MenuBar :datas="MenuBarData" :cur="MenuBarKey" :collapse="isCollapse" :msgCount="msgCount" @change="MenuBarChange"/>
                 </el-scrollbar>
             </div>
             <div class="hc-aside-bar-box">
@@ -179,6 +179,8 @@ const projectContractData = (projectContractData) => {
             useAppState.setContractInfo(letContractInfo)
             useAppState.setProjectId(letProjectInfo?.id)
             useAppState.setContractId(letContractInfo?.id)
+            //发送消息
+            socketSend(letProjectInfo?.id + ',' + letContractInfo?.id)
         } else {
             projectValue.value = String(contractId)
             projectInfo.value = UserProjectInfo
@@ -207,6 +209,8 @@ const projectContractChange = (val) => {
     projectInfo.value = UserProjectInfo
     contractInfo.value = UserContractInfo
     window.$message?.info('切换了项目，数据更新中');
+    //发送消息
+    socketSend(val[0] + ',' + val[1])
     //刷新路由
     reloadRouter.value = false
     nextTick(()=>{
@@ -239,18 +243,41 @@ const logoClick = () => {
     router.push({name: 'home-index'});
 }
 
+//消息数量
+const msgCount = ref({
+    allCount: 0,
+    taskCount: 0,
+    messageCount: 0,
+})
+
 //推送系统
+let socket;
 const setInitSocket = () => {
     const user_id = userInfo.value.user_id;
-    var Socket = new WebSocket('ws://192.168.0.155:5399/websocket/' + user_id);
-    console.log(Socket)
-    //client.connect('ws://192.168.0.155:5399/websocket/' + user_id, 'echo-protocol');
+    socket = new WebSocket('ws://192.168.0.155:5399/websocket/' + user_id);
+    socket.onopen = function (evt) {
+        console.log('websocket链接成功');
+        socket.send('1582926913532841985,1582927887764803585');
+    };
+    socket.onclose = function (evt) {
+        console.log('websocket连接已断开')
+    };
+    socket.onmessage = function ({data}) {
+        let msg = JSON.parse(data)
+        msgCount.value = msg
+        console.log(msg)
+    };
+    socket.onerror = function ({data}) {
+        console.log('发生错误:', data)
+    };
 }
 
-const socketSend = () => {
-
+//发送消息
+const socketSend = (msg) => {
+    if (socket) {
+        socket.send(msg);
+    }
 }
-
 </script>
 
 <style lang="scss" scoped>

src/layout/modules/MenuBar.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
         </el-menu-item>
-        <MenuItem :datas="datas" :cur="curKey" :collapse="isCollapse" @change="MenuClick"/>
+        <MenuItem :datas="datas" :cur="curKey" :collapse="isCollapse" :msgCount="msgCount" @change="MenuClick"/>
     </el-menu>
 </template>
 
@@ -29,6 +29,10 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    msgCount: {
+        type: Object,
+        default: () => ({})
+    },
 })
 
 //初始变量

src/layout/modules/MenuItem.vue

@@ -7,12 +7,12 @@
                         <HcIcon :name="item?.source" :fill="curKey === item?.code" class="hc-menu-icon" v-if="item?.source"/>
                         <div class="name truncate" v-if="isCollapse">{{ item?.name.substring(0,2) }}</div>
                         <div class="name truncate" v-else>{{ item?.name }}</div>
-                        <el-badge :value="20" v-if="item?.code === 'tasks'"/>
+                        <el-badge :value="msgCount.allCount" v-if="item?.code === 'tasks' && msgCount?.allCount > 0"/>
                     </div>
                 </div>
                 <HcIcon name="arrow-down-s" ui="el-icon el-sub-menu__icon-arrow"/>
             </template>
-            <MenuItem :datas="item?.children" :cur="curKey" @change="MenuClick"/>
+            <MenuItem :datas="item?.children" :cur="curKey" :msgCount="msgCount" @change="MenuClick"/>
         </el-sub-menu>
         <el-menu-item :index="item?.code" v-else @click="MenuClick(item)">
             <div class="hc-aside-menu-item">
@@ -20,7 +20,8 @@
                     <HcIcon :name="item?.source" :fill="curKey === item?.code" class="hc-menu-icon" v-if="item?.source"/>
                     <div class="name truncate" v-if="isCollapse">{{ item?.name.substring(0,2) }}</div>
                     <div class="name truncate" v-else>{{ item?.name }}</div>
-                    <el-badge :value="12" v-if="item?.code === 'tasks-data' || item?.code === 'message-data'"/>
+                    <el-badge :value="msgCount.taskCount" v-if="item?.code === 'tasks-data' && msgCount?.taskCount > 0"/>
+                    <el-badge :value="msgCount.messageCount" v-if="item?.code === 'message-data' && msgCount?.messageCount > 0"/>
                 </div>
             </div>
         </el-menu-item>
@@ -33,7 +34,7 @@ import MenuItem from "./MenuItem.vue"
 const props = defineProps({
     datas: {
         type: Array,
-        default: () => []
+        default: () => ([])
     },
     cur: {
         type: String,
@@ -43,6 +44,14 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    msgCount: {
+        type: Object,
+        default: () => ({
+            allCount: 0,
+            taskCount: 0,
+            messageCount: 0,
+        })
+    },
 })
 //初始变量
 const curKey = ref(props.cur);