|
|
@@ -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;
|