2022/2/26

minggao/src/page/commandCenter/realTime.vue

@@ -89,13 +89,27 @@
                     top: 11px;
                   "
                 >
-                  <el-badge :value="1" is-dot :max="99" class="item">
+                  <el-badge
+                    v-if="scope.row.unread"
+                    :value="
+                      scope.row.unread
+                    "
+                    is-dot
+                    :max="99"
+                    class="item"
+                  >
                     <img
                       @click="msgAxios(scope.row)"
                       src="../../assets/images/realTime/xiaoxi.png"
                       alt=""
                     />
                   </el-badge>
+                  <img
+                      v-else
+                      @click="msgAxios(scope.row)"
+                      src="../../assets/images/realTime/xiaoxi.png"
+                      alt=""
+                    />
                 </span>
                 <span style="position: absolute; top: 12px; left: 60px">
                   <img
@@ -352,6 +366,7 @@ export default {
 
       // 表格
       tableData: [],
+      websockMsgList: [], // websocket传递来的数组数据
       loading: false, // 加载
       org_id: "", //组织id
 
@@ -397,7 +412,9 @@ export default {
       // 文本消息功能
       url:
         // "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
-        "ws" + this.$wsUrl + "/api/api_gateway?method=control_center.real_time.im_message",
+        "ws" +
+        this.$wsUrl +
+        "/api/api_gateway?method=control_center.real_time.im_message",
       websock: null,
       getUserObj: {}, // 获取到当前点击的行数据
       msgList: [], //当前点击的账号消息列表
@@ -445,6 +462,20 @@ export default {
         this.notLogin(); //退出房间
       }
     },
+
+    // 给表格文本消息增加提示，数据从webscoket中获取
+    tableData(val) {
+      for (var i = 0; i < val.length; i++) {
+        let sdhkj = val[i];
+        for (var k = 0; k < this.websockMsgList.length; k++) {
+          let sdjaks = this.websockMsgList[k]
+          if (sdhkj.user_id == sdjaks.user_id) {
+            this.tableData[k].unread = sdjaks.unread
+          }
+        }
+      }
+    },
+    // 测试
   },
   //方法集合
   methods: {
@@ -673,18 +704,6 @@ export default {
           console.log(">>> sendMsg, error: ", error);
         }
       }
-
-      // var obj = {};
-      // obj = {
-      //   action: "send",
-      //   recv_user_id: "167",
-      //   data: {
-      //     msg_status: false,
-      //     msg_info: this.input,
-      //   },
-      // };
-      // var v = JSON.stringify(obj);
-      // this.websock.send(v);
     },
 
     // 取消回车换行行为
@@ -700,46 +719,37 @@ export default {
     moreMsg() {},
 
     // 文本消息功能初始化
-    msgInit() {
+    async msgInit() {
       var that = this;
       if (typeof WebSocket === "undefined") {
         alert("您的浏览器不支持socket！");
       } else {
-        console.log(location.host);
-        console.log(window.WebSocket);
         this.websock = new window.WebSocket(
           this.url + "&token=" + localStorage.getItem("session")
         );
-        // window.s = this.websock
-
         this.websock.onopen = (event) => {
           console.log("WebSocket：已连接");
           console.log(event);
+          // 发送消息 - 获取对话列表
+          var obj1 = {};
+          obj1 = {
+            action: "list",
+            recv_user_id: "",
+            data: {
+              msg_status: false,
+              msg_info: "",
+            },
+          };
+          this.websock.send(JSON.stringify(obj1));
         };
         this.websock.onmessage = (event) => {
           // console.log("WebSocket:消息");
-          // console.log(JSON.parse(event.data));
           var data = JSON.parse(event.data);
           if (data.action == "none") {
             // 获取聊天记录
-            console.log(this.getUserObj.user_id);
-            console.log(data.data);
             var datArr = data.data; // 总数据
+            this.websockMsgList = datArr; // 把数据定义在data中
             if (datArr.length !== 0) {
-              // for (var i = 0; i < datArr.length; i++) {
-              //   for (var j = 0; j < datArr[i].msg_list.length; j++) {
-              //     if (
-              //       this.getUserObj.user_id ==
-              //       datArr[i].msg_list[j].recv_user_id
-              //     ) {
-              //       data.data[i].msg_list = data.data[i].msg_list.reverse();
-              //       this.msgList = data.data[i];
-              //       return;
-              //       // console.log(111)
-              //     }
-              //   }
-              // }
-
               for (var i = 0; i < datArr.length; i++) {
                 if (this.getUserObj.user_id == datArr[i].user_id) {
                   data.data[i].msg_list = data.data[i].msg_list.reverse();
@@ -797,6 +807,7 @@ export default {
           console.log("WebSocket:已关闭");
           console.log(event);
         };
+
       }
     },
 
@@ -910,16 +921,22 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    // console.log("ws" + this.$wsUrl + ":12345/api/api_gateway?method=control_center.real_time.im_message")
-
+  created() {
     this.loading = true;
     this.loading2 = true;
     this.organizationData(); //获取左侧组织列表
     this.userListData(); // 获取右侧用户列表
-    this.msgInit(); // 文本消息功能初始化
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // this.loading = true;
+    // this.loading2 = true;
+    // this.organizationData(); //获取左侧组织列表
+    // this.userListData(); // 获取右侧用户列表
+    console.log(this.websock)
+    if (this.websock == null) {
+      this.msgInit(); // 文本消息功能初始化
+    }
     this.videoInit(); // 视频消息功能初始化
   },
   beforeCreate() {}, //生命周期 - 创建之前