2020-07-23 17:51:37 +08:00
|
|
|
<template>
|
2020-08-20 20:27:19 +08:00
|
|
|
<div>
|
|
|
|
<chat-box
|
|
|
|
ref="chatbox"
|
|
|
|
:group="group"
|
2020-09-11 09:26:51 +08:00
|
|
|
:user-role="userRole"
|
2020-08-20 20:27:19 +08:00
|
|
|
/>
|
2020-09-11 09:26:51 +08:00
|
|
|
<script-tip ref="scriptTip" :offset="offset" @allowCreatCoversition="allowCreatCoversition" />
|
2020-08-20 20:27:19 +08:00
|
|
|
</div>
|
2020-07-23 17:51:37 +08:00
|
|
|
</template>
|
|
|
|
<script>
|
2020-09-11 09:26:51 +08:00
|
|
|
import ChatBox from '../jointTrainingNew/chatView/chatBox.vue';
|
2020-08-20 20:27:19 +08:00
|
|
|
import ScriptTip from '@/views/newMap/displayNew/scriptDisplay/component/scriptTip';
|
2020-09-11 09:26:51 +08:00
|
|
|
// import {getAllConversition} from '@/api/chat';
|
2020-07-23 17:51:37 +08:00
|
|
|
export default {
|
|
|
|
name:'DemonChat',
|
|
|
|
components:{
|
2020-08-20 20:27:19 +08:00
|
|
|
ChatBox,
|
|
|
|
ScriptTip
|
2020-07-23 17:51:37 +08:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
group: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
|
|
|
},
|
|
|
|
userRole: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
2020-08-20 20:27:19 +08:00
|
|
|
},
|
|
|
|
offset: {
|
|
|
|
type: Number,
|
|
|
|
required: true
|
2020-07-23 17:51:37 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isHasCoversition:false,
|
|
|
|
conversitionId:'',
|
|
|
|
currentMemberList:[],
|
|
|
|
chatContentList:[],
|
2020-08-03 19:21:56 +08:00
|
|
|
activeTrainList:[],
|
2020-07-23 17:51:37 +08:00
|
|
|
isStartRecord:false,
|
|
|
|
inviteUserName:'',
|
|
|
|
createCoversition:true,
|
|
|
|
inviteUser:{},
|
|
|
|
isQuitShow:false,
|
|
|
|
treeData:[],
|
2020-08-03 19:21:56 +08:00
|
|
|
driverList:[],
|
|
|
|
simulationUsers:{}
|
2020-07-23 17:51:37 +08:00
|
|
|
};
|
|
|
|
},
|
|
|
|
computed:{
|
|
|
|
isShow() {
|
|
|
|
return this.userRole != '' &&
|
|
|
|
this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' &&
|
|
|
|
!this.isHasCoversition && this.createCoversition;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch:{
|
2020-09-11 09:26:51 +08:00
|
|
|
// '$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始获取仿真成员
|
|
|
|
// getSimulationMemberList(this.group).then(resp => {
|
|
|
|
// this.driverList = [];
|
|
|
|
// this.treeData = [];
|
|
|
|
// const result = covertMemberData(this.activeTrainList, resp.data);
|
|
|
|
// this.driverList = result.driverList;
|
|
|
|
// this.treeData = [{
|
|
|
|
// label: '行调',
|
|
|
|
// id: 'dispatcher',
|
|
|
|
// type: 'role',
|
|
|
|
// children: result.deviceListData[0]
|
|
|
|
// }, {
|
|
|
|
// label: '车站值班员',
|
|
|
|
// id: 'stationSupervisor',
|
|
|
|
// type: 'role',
|
|
|
|
// children: result.deviceListData[2]
|
|
|
|
// }, {
|
|
|
|
// label: '司机',
|
|
|
|
// id: 'driver',
|
|
|
|
// type: 'role',
|
|
|
|
// children: result.deviceListData[3]
|
|
|
|
// }, {
|
|
|
|
// label: '通号',
|
|
|
|
// id: 'maintainer',
|
|
|
|
// type: 'role',
|
|
|
|
// children: result.deviceListData[1]
|
|
|
|
// }, {
|
|
|
|
// label: '车辆段',
|
|
|
|
// id: 'depotDispatcher',
|
|
|
|
// type: 'role',
|
|
|
|
// children: result.deviceListData[4]
|
|
|
|
// }];
|
|
|
|
// this.memberData = result.lastMemberList;
|
|
|
|
// }).catch(() => {
|
|
|
|
// this.$messageBox('获取仿真成员列表失败!');
|
|
|
|
// });
|
|
|
|
// },
|
2020-07-23 17:51:37 +08:00
|
|
|
// 创建会话
|
2020-09-11 09:26:51 +08:00
|
|
|
// '$store.state.socket.createConversition':function(val) {
|
|
|
|
// if (this.memberData.length > 0) {
|
|
|
|
// const conversitionMember = this.memberData.find(member=>{ return member.userId == this.$store.state.user.id; });
|
|
|
|
// if (conversitionMember && val.memberIds.includes(conversitionMember.id)) {
|
|
|
|
// // 当前用户创建的会话
|
|
|
|
// if (val.creatorId !== conversitionMember.id) {
|
|
|
|
// this.$message.success(this.coverName(val) + '与你开启会话');
|
|
|
|
// }
|
|
|
|
// this.isHasCoversition = true;
|
|
|
|
// this.isStartRecord = true;
|
|
|
|
// this.isQuitShow = true;
|
|
|
|
// this.conversitionId = val.id;
|
|
|
|
// const memberList = [];
|
|
|
|
// val.memberIds.forEach(id=>{
|
|
|
|
// if (val.creatorId == id) {
|
|
|
|
// const member = this.memberData.find(member=>{ return member.id == id; });
|
|
|
|
// member.connect = true;
|
|
|
|
// memberList.push(member);
|
|
|
|
// } else {
|
|
|
|
// const member = this.memberData.find(member=>{ return member.id == id; });
|
|
|
|
// // member.connect = false;
|
|
|
|
// member.connect = true;
|
|
|
|
// member && memberList.push(member);
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// this.currentMemberList = memberList;
|
|
|
|
// } else {
|
|
|
|
// // 如果是观众看所有人的会话
|
|
|
|
// if (this.userRole == 'AUDIENCE') {
|
|
|
|
// this.isHasCoversition = true;
|
|
|
|
// this.currentMemberList = this.memberData;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// },
|
2020-07-23 17:51:37 +08:00
|
|
|
// 用户接受会话
|
2020-09-11 09:26:51 +08:00
|
|
|
// '$store.state.socket.acceptConversionInvite':function(val) {
|
|
|
|
// this.conversitionId = val.id;
|
|
|
|
// if (this.conversitionId) {
|
|
|
|
// let result = false;
|
|
|
|
// // 更改成员列表里面的成员状态
|
|
|
|
// const memberList = this.currentMemberList.map(member => {
|
|
|
|
// if (member.id == val.memberId) {
|
|
|
|
// member.connect = true;
|
|
|
|
// result = true;
|
|
|
|
// }
|
|
|
|
// return member;
|
|
|
|
// });
|
|
|
|
// // 如果该用户不在成员列表里面,就动态加进去(当前会话)
|
|
|
|
// if (!result && this.conversitionId) {
|
|
|
|
// const member = this.memberData.find(member=>{ return member.id == val.memberId; });
|
|
|
|
// if (member) {
|
|
|
|
// member.connect = true;
|
|
|
|
// memberList.push(member);
|
|
|
|
// // 如果是当前的用户
|
|
|
|
// if (member.userId == this.$store.state.user.id) {
|
|
|
|
// memberList.push(this.inviteUser);
|
|
|
|
// this.isStartRecord = true;
|
|
|
|
// this.isQuitShow = true;
|
|
|
|
// this.inviteUser = {};
|
|
|
|
// this.isHasCoversition = true;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// this.currentMemberList = memberList;
|
|
|
|
// }
|
|
|
|
// },
|
2020-07-23 17:51:37 +08:00
|
|
|
// 会话聊天消息
|
2020-09-11 09:26:51 +08:00
|
|
|
// '$store.state.socket.conversationInfo':function (val, old) { // 仿真聊天
|
|
|
|
// const simulationText = this.$store.state.socket.conversationInfo;
|
|
|
|
// if (val.messageType == 'MESSAGE' && (this.conversitionId == val.id || this.userRole == 'AUDIENCE')) {
|
|
|
|
// const content = this.addContent(simulationText.message);
|
|
|
|
// this.chatContentList.push(content);
|
|
|
|
// if (!content.self) {
|
|
|
|
// this.$refs.chatbox.addAudioList(content);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// },
|
2020-07-23 17:51:37 +08:00
|
|
|
// 按计划行车的列车列表更新(更新司机列表)
|
2020-09-11 09:26:51 +08:00
|
|
|
// '$store.state.map.activeTrainListChange': function (val) {
|
|
|
|
// const activeTrainList = this.$store.state.map.activeTrainList;
|
|
|
|
// activeTrainList.sort((a, b) => {
|
|
|
|
// return parseInt(a) - parseInt(b);
|
|
|
|
// });
|
|
|
|
// if (this.driverList.length > 0) {
|
|
|
|
// const driverList = [];
|
|
|
|
// if (activeTrainList && activeTrainList.length) {
|
|
|
|
// activeTrainList.forEach(groupNumber => {
|
|
|
|
// const drivers = this.driverList.find(driver=>{
|
|
|
|
// return driver.deviceCode == groupNumber;
|
|
|
|
// });
|
|
|
|
// if (drivers) {
|
|
|
|
// driverList.push(drivers);
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// this.treeData[2].children = driverList;
|
|
|
|
// this.memberData = [...this.treeData[0].children, ...this.treeData[1].children, ...this.treeData[2].children, ...this.treeData[3].children, ...this.treeData[4].children];
|
|
|
|
// } else {
|
|
|
|
// this.activeTrainList = activeTrainList;
|
|
|
|
// }
|
|
|
|
// },
|
2020-07-23 17:51:37 +08:00
|
|
|
// 剧本执行完成消息
|
|
|
|
'$store.state.socket.scriptFinish':function(val, old) {
|
2020-08-26 15:28:32 +08:00
|
|
|
this.$message('剧本演出完毕');
|
2020-08-20 20:27:19 +08:00
|
|
|
this.$refs.scriptTip.resetScriptTip();
|
2020-07-23 17:51:37 +08:00
|
|
|
},
|
|
|
|
// 退出会话消息
|
2020-09-11 09:26:51 +08:00
|
|
|
// '$store.state.socket.overConversition': function (val) {
|
|
|
|
// if (val.id === this.conversitionId) {
|
|
|
|
// this.conversitionId = '';
|
|
|
|
// this.currentMemberList = [];
|
|
|
|
// this.chatContentList = [];
|
|
|
|
// this.isHasCoversition = false;
|
|
|
|
// this.isStartRecord = false;
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// '$store.state.socket.exitConversition': function (val) {
|
|
|
|
// const member = this.memberData.find(member=>{ return member.memberId == val.member; });
|
|
|
|
// if (val.id === this.conversitionId && member.userId == this.$store.state.user.id) {
|
|
|
|
// this.conversitionId = '';
|
|
|
|
// this.currentMemberList = [];
|
|
|
|
// this.chatContentList = [];
|
|
|
|
// this.isHasCoversition = false;
|
|
|
|
// this.isStartRecord = false;
|
|
|
|
// } else if (val.id === this.conversitionId) {
|
|
|
|
// const mList = [];
|
|
|
|
// this.currentMemberList.forEach(member => {
|
|
|
|
// if (member.memberId != val.memberId) {
|
|
|
|
// mList.push(member);
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// this.currentMemberList = mList;
|
|
|
|
// }
|
|
|
|
// },
|
2020-07-23 17:51:37 +08:00
|
|
|
// 邀请会话的消息
|
|
|
|
'$store.state.socket.inviteSimulationConversition':function(val) {
|
2020-09-01 11:20:53 +08:00
|
|
|
// const conversitionMember = this.memberData.find(member=>{ return member.id == val.creatorId; });
|
|
|
|
// if (conversitionMember) {
|
|
|
|
// this.inviteUserName = conversitionMember.label;
|
|
|
|
// this.conversitionId = val.id;
|
|
|
|
// conversitionMember.connect = true;
|
|
|
|
// conversitionMember.online = true;
|
|
|
|
// this.inviteUser = conversitionMember;
|
|
|
|
//
|
|
|
|
// this.currentMemberList.push(conversitionMember);
|
|
|
|
// const member = this.memberData.find(member=>{ return member.id == val.memberId; });
|
|
|
|
// member.connect = true;
|
|
|
|
// this.currentMemberList.push(member);
|
|
|
|
// this.isStartRecord = true;
|
|
|
|
// this.isHasCoversition = true;
|
|
|
|
// // this.$refs.chatbox.inviteMember();
|
|
|
|
// this.$message.success(this.inviteUserName + '与你开启会话');
|
|
|
|
// }
|
2020-07-23 17:51:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
methods:{
|
|
|
|
addContent(simulationText) {
|
|
|
|
const text = {};
|
|
|
|
const member = this.currentMemberList.find(member=>{
|
|
|
|
return member.id == simulationText.memberId;
|
|
|
|
});
|
|
|
|
if (member) {
|
|
|
|
text.self = (this.$store.state.user.id == member.userId);
|
|
|
|
text.member = member;
|
|
|
|
text.chatTime = simulationText.time;
|
|
|
|
text.src = simulationText.audioPath;
|
|
|
|
text.message = simulationText.content;
|
|
|
|
}
|
|
|
|
return text;
|
|
|
|
},
|
2020-09-01 11:20:53 +08:00
|
|
|
coverName(inviteUser) {
|
|
|
|
const member = this.memberData.find(member=>{ return member.id == inviteUser.creatorId; });
|
|
|
|
return member.label;
|
|
|
|
},
|
2020-07-23 17:51:37 +08:00
|
|
|
clearAllData() {
|
|
|
|
this.resetCoversition();
|
2020-08-21 14:55:28 +08:00
|
|
|
this.createCoversition = true;
|
2020-08-20 20:27:19 +08:00
|
|
|
this.$refs.scriptTip.resetScriptTip();
|
|
|
|
},
|
|
|
|
setMembers(roleId) {
|
|
|
|
this.memberData.map(member=>{
|
|
|
|
if (member.id == roleId) {
|
|
|
|
member.userId = this.$store.state.user.id;
|
2020-08-21 14:55:28 +08:00
|
|
|
member.userName = this.$store.state.user.nickname;
|
2020-08-20 20:27:19 +08:00
|
|
|
member.disabled = true;
|
2020-08-21 14:55:28 +08:00
|
|
|
} else {
|
|
|
|
member.userId = '';
|
|
|
|
member.userName = '';
|
|
|
|
member.disabled = false;
|
2020-08-20 20:27:19 +08:00
|
|
|
}
|
2020-08-21 14:55:28 +08:00
|
|
|
const userName = member.userName ? '-' + member.userName : '';
|
|
|
|
const name = member.name == undefined ? '' : '-' + member.name;
|
|
|
|
member.label = member.type + member.deviceName + name + userName;
|
2020-08-20 20:27:19 +08:00
|
|
|
});
|
2020-07-23 17:51:37 +08:00
|
|
|
},
|
|
|
|
resetCoversition() {
|
|
|
|
this.conversitionId = '';
|
|
|
|
this.isHasCoversition = false;
|
|
|
|
this.currentMemberList = [];
|
|
|
|
this.chatContentList = [];
|
|
|
|
this.isStartRecord = false;
|
|
|
|
this.inviteUserName = '';
|
|
|
|
this.inviteUser = {};
|
|
|
|
this.isQuitShow = false;
|
2020-08-20 20:27:19 +08:00
|
|
|
},
|
|
|
|
allowCreatCoversition() {
|
|
|
|
this.createCoversition = true;
|
|
|
|
},
|
|
|
|
resetScriptTip() {
|
|
|
|
this.$refs.scriptTip.resetScriptTip();
|
2020-07-23 17:51:37 +08:00
|
|
|
}
|
2020-08-03 19:21:56 +08:00
|
|
|
// isAudienceInitData() {
|
|
|
|
// getAllConversition(this.group).then(resp => {
|
|
|
|
// const messages = [];
|
|
|
|
// if (resp.data && resp.data.length) {
|
|
|
|
// debugger;
|
|
|
|
// resp.data.forEach(conversation => {
|
|
|
|
// (conversation.messageList || []).forEach(message => {
|
|
|
|
// const member = this.memberData[message.memberId];
|
|
|
|
// message.src = `/audio/${message.audioPath}`;
|
|
|
|
// message.members = conversation.memberList;
|
|
|
|
// if (member) {
|
|
|
|
// message.self = this.$store.state.userId == member.userId;
|
|
|
|
// }
|
|
|
|
// messages.push(message);
|
|
|
|
// });
|
|
|
|
// if (this.userRole !== 'AUDIENCE') {
|
|
|
|
// const user = this.simulationUsers[this.$store.state.user.id];
|
|
|
|
// this.isConversitionCreator = conversation.creatorId == user.memberId;
|
|
|
|
// !conversation.over && conversation.memberList.forEach(member =>{
|
|
|
|
// if (member.memberId == user.memberId && member.connect) {
|
|
|
|
// this.conversitionMemberList = conversation.memberList;
|
|
|
|
// this.conversitionId = conversation.id;
|
|
|
|
// this.messageList = [];
|
|
|
|
// conversation.messageList.forEach(message => {
|
|
|
|
// const member = this.memberData[message.memberId];
|
|
|
|
// message.src = `/audio/${message.audioPath}`;
|
|
|
|
// if (member) {
|
|
|
|
// message.self = this.$store.state.userId == member.userId;
|
|
|
|
// }
|
|
|
|
// this.privateMessageList.push(message);
|
|
|
|
// this.messageList.push(message);
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// this.commonMessageList = messages.sort(this.sortByMessageTime);
|
|
|
|
// // this.initCommonMemberList();
|
|
|
|
// });
|
|
|
|
// }
|
2020-07-23 17:51:37 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|