发送消息

src/config/website.js

@@ -44,4 +44,7 @@ export default {
   authUrl: 'http://localhost/blade-auth/oauth/render',
   // 报表设计器地址(cloud端口为8108,boot端口为80)
   reportUrl: 'http://localhost:8108/ureport',
+  //  socket: 'wss://business.hcxxy.com/wss/websocket/',  //测试线上
+  //  socket: 'ws://127.0.0.1:5399/websocket/',  //打包线上
+    socket: 'ws://192.168.0.155:5399/websocket/',  //刘艺城            192.168.0.155:5399
 }

src/page/index/index.vue

@@ -7,7 +7,7 @@
     <div class="avue-layout">
       <div class="avue-left">
         <!-- 左侧导航栏 -->
-        <sidebar />
+        <sidebar :msgCount="msgCount" />
       </div>
       <div class="avue-main">
         <!-- 顶部标签卡 -->
@@ -38,6 +38,7 @@
 
 <script>
 import { mapGetters } from "vuex";
+
 import tags from "./tags";
 import search from "./search";
 import top from "./top/";
@@ -46,8 +47,13 @@ import admin from "@/util/admin";
 import { validatenull } from "@/util/validate";
 import { calcDate } from "@/util/date.js";
 import { getStore } from "@/util/store.js";
+import website from '@/config/website';
+
+let socket
+//初始组合式
 
 export default {
+
   components: {
     top,
     tags,
@@ -60,6 +66,14 @@ export default {
       index: this,
     };
   },
+ watch: {
+        $route(val){
+          //发送消息
+          this.socketSend()
+        },
+    },
+
+
   data() {
     return {
       //搜索控制
@@ -68,16 +82,27 @@ export default {
       refreshLock: false,
       //刷新token的时间
       refreshTime: "",
+      msgCount:{
+        myMessageCount:2
+      },
+      routeinfo:{}
     };
   },
   created() {
+  
     //实时检测刷新token
     this.refreshToken();
+  
   },
+
   mounted() {
     this.init();
+    this.setInitSocket()
+     
+
   },
-  computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
+  computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu", "userInfo"]),
+
   props: [],
   methods: {
     showCollapse() {
@@ -97,8 +122,10 @@ export default {
     openMenu(item = {}) {
       this.$store.dispatch("GetMenu", item.id).then((data) => {
         if (data.length !== 0) {
+         
           this.$router.$avueRouter.formatRoutes(data, true);
         }
+          
         //当点击顶部菜单后默认打开第一个菜单
         /*if (!this.validatenull(item)) {
           let itemActive = {},
@@ -121,6 +148,8 @@ export default {
           });
         }*/
       });
+         //发送消息
+      
     },
     // 定时检测token
     refreshToken() {
@@ -145,6 +174,44 @@ export default {
         }
       }, 10000);
     },
+      //推送系统
+
+    setInitSocket () {
+        const user_id = this.userInfo.user_id;
+        socket = new WebSocket(website.socket + user_id);
+        socket.onopen = function (evt) {
+            console.log('websocket链接成功');
+        };
+      
+        socket.onclose = function (evt) {
+            console.log('websocket连接已断开')
+        };
+        socket.onmessage = function ({data}) {
+            if (data) {
+                this.msgCount = JSON.parse(data)
+            }
+            console.log(data,'消息信息')
+        };
+        socket.onerror = function ({data}) {
+            console.log('发生错误:', data)
+        };
+    },
+
+    //发送消息
+    socketSend (msg) {
+       const user_id = this.userInfo.user_id;
+        console.log('发送消息:',)
+        if (socket) {
+          console.log(222222222)
+            socket.send(user_id);
+        } else {
+            setTimeout(()=>{
+                socket.send(user_id);
+            }, 1000)
+        }
+    }
+
   },
+  
 };
 </script>

src/page/index/sidebar/index.vue

@@ -14,7 +14,9 @@
                       :screen="screen"
                       first
                       :props="website.menu.props"
-                      :collapse="keyCollapse"></sidebar-item>
+                      :collapse="keyCollapse"
+                      :msgCount="msgCount"
+                      ></sidebar-item>
       </el-menu>
     </el-scrollbar>
   </div>
@@ -29,6 +31,12 @@
     name: "sidebar",
     components: {sidebarItem, logo},
     inject: ["index"],
+    props:{
+      msgCount:{
+        type:Object,
+       
+      }
+    },
     data() {
       return {};
     },

src/page/index/sidebar/sidebarItem.vue

@@ -14,9 +14,13 @@
                   :index="item[pathKey]"
                   :key="item[labelKey]">
         <template slot="title">
-          <i :class="item[iconKey]"></i>
-          <span slot="title"
-                :class="{'el-menu--display':collapse && first}">{{generateTitle(item)}}</span>
+          <div >
+            <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"/>
+          </div>
+          
         </template>
         <template v-for="(child,cindex) in item[childrenKey]">
           <el-menu-item :index="child[pathKey],cindex"
@@ -24,8 +28,11 @@
                         :class="{'is-active':vaildActive(child)}"
                         v-if="validatenull(child[childrenKey])"
                         :key="child[labelKey]">
-            <i :class="child[iconKey]"></i>
-            <span slot="title">{{generateTitle(child)}}</span>
+            <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"/>
+            </div>
           </el-menu-item>
           <sidebar-item v-else
                         :menu="[child]"
@@ -69,6 +76,9 @@
       },
       collapse: {
         type: Boolean
+      },
+      msgCount:{
+         type: Object
       }
     },
     created() {
@@ -144,3 +154,14 @@
   };
 </script>
 
+
+<style lang="scss" scoped>
+.menu-elbadge{
+  vertical-align: -webkit-baseline-middle;
+  margin-left:50px
+}
+.menu-elbadge1{
+  vertical-align: -webkit-baseline-middle;
+  margin-left:45px
+}
+</style>

src/views/wel/index.vue

@@ -249,6 +249,7 @@
 <script>
 // 引入统计图
 import { Area, Column, Pie } from '@antv/g2plot';
+import { mapGetters } from "vuex";
 import { queryBusinessUserOpinion, queryBusinessUserOpinionAll, queryProjectUserAmount, queryProjectPfx, queryOpinionTypeAmount, queryOpinionDetails, isIgnore, manageUserOperationStatus } from '@/api/news/news.js';
 export default {
   data () {
@@ -283,6 +284,8 @@ export default {
       cancel: true,
     }
   },
+
+  computed: mapGetters([ "userInfo"]),
   methods: {
     operationMethods () {
       this.operation.show = this.curRow.currentLink == 2;
@@ -295,6 +298,7 @@ export default {
       this.operationMethods();
     },
     async submissionProgress(){
+      // socketSend(this.userInfo.user_id)
       if (this.curRow.currentLink == 2) {
         if (this.operation.manageTime) {
           await this.manageUserOperationStatus({

vue.config.js

@@ -27,11 +27,13 @@ module.exports = {
             '/api': {
                 //本地服务接口地址
                 // target: 'http://192.168.3.64',
-                target: 'http://localhost:8090',
+                // target: 'http://localhost:8090',
                 // target: 'http://192.168.1.179:8090',
                 // target: 'http://192.168.31.96',
+                target: 'http://192.168.0.155:1888', //刘依程
                 //远程演示服务地址,可用于直接启动项目
                 // target: 'http://47.110.251.215:8090',
+
                 ws: true,
                 pathRewrite: {
                     '^/api': '/'