336 lines
14 KiB
Vue
336 lines
14 KiB
Vue
|
<template>
|
||
|
|
<chat-box
|
||
|
|
ref="chatbox"
|
||
|
|
:group="group"
|
||
|
|
:is-show="isShow"
|
||
|
|
:tree-data="treeData"
|
||
|
|
:offset-bottom="offsetBottom"
|
||
|
|
:conversition-id="conversitionId"
|
||
|
|
:current-member-list="currentMemberList"
|
||
|
|
:chat-content-list="chatContentList"
|
||
|
|
:script-tip="scriptTip"
|
||
|
|
:is-start-record="isStartRecord"
|
||
|
|
:invite-user-name="inviteUserName"
|
||
|
|
:is-quit-show="isQuitShow"
|
||
|
|
@setScriptTip="setScriptTip"
|
||
|
|
@resetCoversition="resetCoversition"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import ChatBox from '../chatView/chatBox.vue';
|
||
|
|
import ConstConfig from '@/scripts/ConstConfig';
|
||
|
|
import CMD from '@/scripts/cmdPlugin/CommandEnum';
|
||
|
|
import Cookies from 'js-cookie';
|
||
|
|
// getAllSimulationUser
|
||
|
|
import { getSimulationMemberList} from '@/api/simulation';
|
||
|
|
export default {
|
||
|
|
name:'DemonChat',
|
||
|
|
components:{
|
||
|
|
ChatBox
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
group: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
userRole: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
offsetBottom:{
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
scriptTip:'',
|
||
|
|
isHasCoversition:false,
|
||
|
|
conversitionId:'',
|
||
|
|
currentMemberList:[],
|
||
|
|
memberData:{},
|
||
|
|
chatContentList:[],
|
||
|
|
isStartRecord:false,
|
||
|
|
inviteUserName:'',
|
||
|
|
createCoversition:true,
|
||
|
|
inviteUser:{},
|
||
|
|
isQuitShow:false,
|
||
|
|
treeData:[],
|
||
|
|
driverList:[]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
isShow() {
|
||
|
|
return this.userRole != '' &&
|
||
|
|
this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' &&
|
||
|
|
!this.isHasCoversition && this.createCoversition;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||
|
|
getSimulationMemberList(this.group).then(resp => {
|
||
|
|
let lastData = JSON.stringify(resp.data);
|
||
|
|
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||
|
|
roleTypeList.forEach(function(element) {
|
||
|
|
const rolename = element.value;
|
||
|
|
if (Cookies.get('user_lang') == 'en') {
|
||
|
|
lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
|
||
|
|
} else {
|
||
|
|
lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
lastData = JSON.parse(lastData);
|
||
|
|
const lastMemberList = [];
|
||
|
|
const dispatcherList = [];
|
||
|
|
const electricDispatcherList = [];
|
||
|
|
const depotDispatcherList = [];
|
||
|
|
const stationSupervisorList = [];
|
||
|
|
this.driverList = [];
|
||
|
|
const maintainerList = [];
|
||
|
|
this.treeData = [];
|
||
|
|
lastData.forEach((member, index)=>{
|
||
|
|
if (member.type != '观众') {
|
||
|
|
if (!member.userId) {
|
||
|
|
member.userId = '';
|
||
|
|
member.disabled = false;
|
||
|
|
} else {
|
||
|
|
member.disabled = true;
|
||
|
|
}
|
||
|
|
const name = member.name == undefined ? '' : '-' + member.name;
|
||
|
|
if (member.deviceCode) {
|
||
|
|
const device = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
|
||
|
|
if (device) {
|
||
|
|
if (device._type == 'Train') {
|
||
|
|
member.memberName = member.type + device.groupNumber + name;
|
||
|
|
lastMemberList.push(member);
|
||
|
|
member.label = member.memberName;
|
||
|
|
this.driverList.push(member);
|
||
|
|
} else {
|
||
|
|
member.memberName = member.type + device.name + name;
|
||
|
|
lastMemberList.push(member);
|
||
|
|
if (device._type == 'Station') {
|
||
|
|
member.label = member.memberName;
|
||
|
|
stationSupervisorList.push(member);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
member.memberName = member.type + member.deviceCode + name;
|
||
|
|
lastMemberList.push(member);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
member.memberName = member.type + name;
|
||
|
|
member.label = member.memberName;
|
||
|
|
if (member.type == '行调') {
|
||
|
|
dispatcherList.push(member);
|
||
|
|
} else if (member.type == '通号') {
|
||
|
|
maintainerList.push(member);
|
||
|
|
}
|
||
|
|
lastMemberList.push(member);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.treeData = [{
|
||
|
|
label: '行调',
|
||
|
|
id: 'dispatcher',
|
||
|
|
type: 'role',
|
||
|
|
children: dispatcherList
|
||
|
|
}, {
|
||
|
|
label: '车站值班员',
|
||
|
|
id: 'stationSupervisor',
|
||
|
|
type: 'role',
|
||
|
|
children: stationSupervisorList
|
||
|
|
}, {
|
||
|
|
label: '司机',
|
||
|
|
id: 'driver',
|
||
|
|
type: 'role',
|
||
|
|
children: []
|
||
|
|
}, {
|
||
|
|
label: '通号',
|
||
|
|
id: 'maintainer',
|
||
|
|
type: 'role',
|
||
|
|
children: maintainerList
|
||
|
|
}];
|
||
|
|
this.memberData = lastMemberList;
|
||
|
|
}).catch(() => {
|
||
|
|
this.$messageBox('获取仿真成员列表失败！');
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 创建会话
|
||
|
|
'$store.state.socket.createConversition':function(val) {
|
||
|
|
this.scriptTip = '';
|
||
|
|
if (this.memberData.length > 0) {
|
||
|
|
const member = this.memberData.find(member=>{ return member.id == val.creatorId; });
|
||
|
|
if (member && member.userId == this.$store.state.user.id) {
|
||
|
|
// 当前用户创建的会话
|
||
|
|
this.isHasCoversition = true;
|
||
|
|
this.isStartRecord = true;
|
||
|
|
this.isQuitShow = true;
|
||
|
|
this.conversitionId = val.id;
|
||
|
|
const memberList = [];
|
||
|
|
val.memberIds.forEach(id=>{
|
||
|
|
if (val.creatorId == id) {
|
||
|
|
member.connect = true;
|
||
|
|
memberList.push(member);
|
||
|
|
} else {
|
||
|
|
const member = this.memberData.find(member=>{ return member.id == id; });
|
||
|
|
member.connect = false;
|
||
|
|
member && memberList.push(member);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.currentMemberList = memberList;
|
||
|
|
} else {
|
||
|
|
// 如果是观众看所有人的会话
|
||
|
|
if (this.userRole == 'AUDIENCE') {
|
||
|
|
this.isHasCoversition = true;
|
||
|
|
this.currentMemberList = this.memberData;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 用户接受会话
|
||
|
|
'$store.state.socket.acceptConversionInvite':function(val) {
|
||
|
|
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.inviteUser = {};
|
||
|
|
this.isStartRecord = true;
|
||
|
|
this.isQuitShow = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.currentMemberList = memberList;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 剧本提示
|
||
|
|
'$store.state.socket.simulationScriptTip':function(val, old) {
|
||
|
|
if (val) {
|
||
|
|
if (val.type == 'Conversation') {
|
||
|
|
this.scriptTip = '请说：' + val.content;
|
||
|
|
} else if (val.type == 'Command') {
|
||
|
|
const commandName = val.operationType;
|
||
|
|
let device = val.operationType.split('_')[0];
|
||
|
|
if (device == 'CM') {
|
||
|
|
device = 'ControlConvertMenu';
|
||
|
|
}
|
||
|
|
const operateName = Object.values(CMD[device]).find(res=>{ return res.value == commandName; });
|
||
|
|
this.$messageBox('请执行【' + operateName.label + '】操作');
|
||
|
|
} else if (val.type == 'Over_Conversation') {
|
||
|
|
this.scriptTip = '请结束当前会话';
|
||
|
|
} else if (val.type == 'Start_Conversation' ) {
|
||
|
|
const inviteMember = [];
|
||
|
|
this.createCoversition = true;
|
||
|
|
val.conversationMemberIds.forEach(id=>{
|
||
|
|
if (val.memberId != id) {
|
||
|
|
inviteMember.push((this.memberData.find(member=>{ return member.id == id; }) || {label:''}).label );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.scriptTip = '请创建会话,选择' + inviteMember.toString();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 会话聊天消息
|
||
|
|
'$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')) {
|
||
|
|
this.chatContentList.push(this.addContent(simulationText.message));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 按计划行车的列车列表更新(更新司机列表)
|
||
|
|
'$store.state.map.activeTrainListChange': function (val) {
|
||
|
|
const activeTrainList = this.$store.state.map.activeTrainList;
|
||
|
|
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;
|
||
|
|
},
|
||
|
|
// 剧本执行完成消息
|
||
|
|
'$store.state.socket.scriptFinish':function(val, old) {
|
||
|
|
this.$message('剧本执行完成');
|
||
|
|
},
|
||
|
|
// 退出会话消息
|
||
|
|
'$store.state.socket.overConversition': function (val) {
|
||
|
|
if (val.id === this.conversitionId) {
|
||
|
|
this.conversitionId = '';
|
||
|
|
this.scriptTip = '';
|
||
|
|
this.currentMemberList = [];
|
||
|
|
this.chatContentList = [];
|
||
|
|
this.isHasCoversition = false;
|
||
|
|
this.isStartRecord = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 邀请会话的消息
|
||
|
|
'$store.state.socket.inviteSimulationConversition':function(val) {
|
||
|
|
const member = this.memberData.find(member=>{ return member.id == val.creatorId; });
|
||
|
|
if (member) {
|
||
|
|
this.inviteUserName = member.label;
|
||
|
|
this.conversitionId = val.id;
|
||
|
|
member.connect = true;
|
||
|
|
this.inviteUser = member;
|
||
|
|
this.$refs.chatbox.inviteMember();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
setScriptTip(scriptTip) {
|
||
|
|
this.scriptTip = scriptTip;
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
},
|
||
|
|
clearAllData() {
|
||
|
|
this.resetCoversition();
|
||
|
|
},
|
||
|
|
resetCoversition() {
|
||
|
|
this.conversitionId = '';
|
||
|
|
this.scriptTip = '';
|
||
|
|
this.isHasCoversition = false;
|
||
|
|
this.currentMemberList = [];
|
||
|
|
this.chatContentList = [];
|
||
|
|
this.isStartRecord = false;
|
||
|
|
this.inviteUserName = '';
|
||
|
|
this.createCoversition = true;
|
||
|
|
this.inviteUser = {};
|
||
|
|
this.isQuitShow = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|