瀏覽代碼

Merge http://39.104.94.153:3000/yf_zy/MingGao_vue

zhangyun 4 年之前
父節點
當前提交
b5d3a9b80b
共有 3 個文件被更改,包括 104 次插入79 次删除
  1. 1 1
      minggao/config/index.js
  2. 1 1
      minggao/package-lock.json
  3. 102 77
      minggao/src/page/commandCenter/realTime.vue

+ 1 - 1
minggao/config/index.js

@@ -23,7 +23,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.1.29', // can be overwritten by process.env.HOST
+    host: '192.168.137.1', // can be overwritten by process.env.HOST
     port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

+ 1 - 1
minggao/package-lock.json

@@ -11164,7 +11164,7 @@
     },
     "vuex": {
       "version": "3.6.2",
-      "resolved": "https://registry.npmmirror.com/vuex/download/vuex-3.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
     "watchpack": {

+ 102 - 77
minggao/src/page/commandCenter/realTime.vue

@@ -89,13 +89,25 @@
                     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 +364,7 @@ export default {
 
       // 表格
       tableData: [],
+      websockMsgList: [], // websocket传递来的数组数据
       loading: false, // 加载
       org_id: "", //组织id
 
@@ -360,7 +373,7 @@ export default {
       loading2: false,
       defaultProps: {
         children: "childrens",
-        label: "org_name",
+        label: "org_name"
       },
 
       // 分页
@@ -397,11 +410,13 @@ 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: [], //当前点击的账号消息列表
-      userName: "",
+      userName: ""
     };
   },
   //监听属性 类似于data概念
@@ -414,7 +429,7 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function () {
+        setTimeout(function() {
           //防止过度调用监测事件,导致卡顿
           that.timer = false;
         }, 400);
@@ -445,6 +460,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: {
@@ -487,21 +516,21 @@ export default {
         data: this.qs.stringify({
           page: this.page,
           page_item: "100000000",
-          org_name: "",
-        }),
+          org_name: ""
+        })
       })
-        .then((res) => {
+        .then(res => {
           if (res.data.data.page_list.length !== 0) {
             var obj = {
               org_name: "全部",
-              id: "",
+              id: ""
             };
             var data = res.data.data.page_list;
             this.data = [obj, ...data]; // 左侧组织列表
           }
           this.loading2 = false;
         })
-        .catch((err) => {
+        .catch(err => {
           this.loading2 = false;
         });
     },
@@ -516,10 +545,10 @@ export default {
           page_item: "20",
           real_name: this.nameVal, //用户名称
           mobile: this.phoneVal, // 电话
-          org_id: this.org_id,
-        }),
+          org_id: this.org_id
+        })
       })
-        .then((res) => {
+        .then(res => {
           if (res.data.data.page_item !== 0) {
             var data = res.data.data.page_list;
             var list = [];
@@ -532,7 +561,7 @@ export default {
             this.loading = false;
           }
         })
-        .catch((err) => {
+        .catch(err => {
           this.loading = false;
         });
     },
@@ -549,11 +578,20 @@ export default {
         recv_user_id: data.user_id,
         data: {
           msg_status: false,
-          msg_info: "",
-        },
+          msg_info: ""
+        }
       };
-      console.log(data);
-      this.websock.send(JSON.stringify(obj));
+      this.websock.send(JSON.stringify(obj)); // 获取聊天记录
+      var readObj = {};
+      readObj = {
+        action: "read",
+        send_user_id: data.user_id,
+        data: {
+          msg_status: false,
+          msg_info: ""
+        }
+      };
+      this.websock.send(JSON.stringify(readObj)); // 消息已读
       this.dialogVisible = true;
     },
 
@@ -571,8 +609,8 @@ export default {
         recv_user_id: data.user_id,
         data: {
           msg_status: false,
-          msg_info: "",
-        },
+          msg_info: ""
+        }
       };
       this.websock.send(JSON.stringify(obj));
       // // 登录房间
@@ -638,10 +676,10 @@ export default {
     // 当音视频通话关闭时的回调
     handleClose(done) {
       this.$confirm("目前正在音视频通话中,确认关闭?")
-        .then((_) => {
+        .then(_ => {
           done();
         })
-        .catch((_) => {});
+        .catch(_ => {});
     },
 
     // 发送消息
@@ -651,7 +689,7 @@ export default {
           this.$message({
             message: "不能发送空白消息!",
             type: "warning",
-            duration: 1500,
+            duration: 1500
           });
         }
         this.input = "";
@@ -663,8 +701,8 @@ export default {
             recv_user_id: this.getUserObj.user_id,
             data: {
               msg_status: false,
-              msg_info: this.input,
-            },
+              msg_info: this.input
+            }
           };
           var v = JSON.stringify(obj);
           this.websock.send(v);
@@ -673,18 +711,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 +726,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) => {
+        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) => {
+        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();
@@ -761,8 +778,8 @@ export default {
               recv_user_id: this.getUserObj.user_id,
               data: {
                 msg_status: false,
-                msg_info: "",
-              },
+                msg_info: ""
+              }
             };
             this.websock.send(JSON.stringify(obj));
           } else if (data.action == "recv_video") {
@@ -780,7 +797,7 @@ export default {
                 { userID: this.UserID, userName: this.UserID },
                 { userUpdate: true }
               )
-              .then((result) => {
+              .then(result => {
                 if (result == true) {
                   console.log("0000000000000000000000000000000000000登录成功");
                   this.plugFlow(); //推流
@@ -789,11 +806,11 @@ export default {
               });
           }
         };
-        this.websock.onerror = (event) => {
+        this.websock.onerror = event => {
           console.log("WebSocket:发生错误 ");
           console.log(event);
         };
-        this.websock.onclose = (event) => {
+        this.websock.onclose = event => {
           console.log("WebSocket:已关闭");
           console.log(event);
         };
@@ -824,7 +841,7 @@ export default {
                 this.$message({
                   message: "没人接听,请稍后重试",
                   type: "warning",
-                  duration: 2500,
+                  duration: 2500
                 });
               }
               this.videoVisible = false;
@@ -870,7 +887,7 @@ export default {
         }
       );
 
-      this.zg.on("publisherStateUpdate", (result) => {
+      this.zg.on("publisherStateUpdate", result => {
         // 推流状态更新回调
         console.log("推流状态更新");
       });
@@ -907,19 +924,27 @@ export default {
       } else {
         console.log("不兼容");
       }
-    },
+    }
   },
   //生命周期 - 创建完成(可以访问当前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("---------------------------");
+    console.log(this.websock);
+    console.log("---------------------------");
+    if (this.websock == null) {
+      this.msgInit(); // 文本消息功能初始化
+    }
     this.videoInit(); // 视频消息功能初始化
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -928,7 +953,7 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
 };
 </script>
 <style lang="less" scoped>
@@ -1049,7 +1074,7 @@ export default {
   .list_msgBox1 {
     display: flex;
     margin-top: 22px;
-    justify-content: end;
+    justify-content: flex-end;
   }
   .list_msgBox2 {
     display: flex;