1236 lines
47 KiB
Vue
1236 lines
47 KiB
Vue
<template>
|
|
<div class="chatBox" :class="{'active': drawer}" :style="{'bottom':bottom+'px'}">
|
|
<div class="menuTrainListBtn" @click="clickBtn">
|
|
<template v-if="userRole == 'DISPATCHER'">
|
|
<p style="margin: 0;">调</p>
|
|
<p style="margin: 0;">度</p>
|
|
<p style="margin: 0;">电</p>
|
|
<p style="margin: 0;">话</p>
|
|
</template>
|
|
<template v-if="userRole != 'AUDIENCE' && userRole != 'DISPATCHER'">
|
|
<p style="margin: 0;">电</p>
|
|
<p style="margin: 0;">话</p>
|
|
</template>
|
|
<template v-if="userRole == 'AUDIENCE'">
|
|
<p style="margin: 0;">通</p>
|
|
<p style="margin: 0;">话</p>
|
|
<p style="margin: 0;">记</p>
|
|
<p style="margin: 0;">录</p>
|
|
</template>
|
|
</div>
|
|
<div class="chat-box-main">
|
|
<!-- v-if="!conversitionId && userRole !== 'AUDIENCE' && !commonConversation" -->
|
|
<template v-if="userRole != 'AUDIENCE'">
|
|
<div class="chat-box-header">
|
|
<!-- <div class="chat-box-header-title">
|
|
<el-input v-model="queryMember" size="small" placeholder="请输入搜索人员">
|
|
<el-button slot="append" icon="el-icon-search" />
|
|
</el-input>
|
|
</div> -->
|
|
<div class="chat-setting" @click="handleSetting()">
|
|
<i class="el-icon-s-tools" />
|
|
</div>
|
|
<!-- <div v-if="!commonConversation" class="chat-setting" @click="goCommonConversation">
|
|
<el-tooltip effect="dark" content="公共会话" placement="top-start">
|
|
<i class="el-icon-chat-line-round" />
|
|
</el-tooltip>
|
|
</div>
|
|
<div v-if="conversitionId && commonConversation" class="chat-setting" @click="cancelCommonConversation">
|
|
<el-tooltip effect="dark" content="私有会话" placement="top-start">
|
|
<i class="el-icon-chat-round" />
|
|
</el-tooltip>
|
|
</div> -->
|
|
</div>
|
|
<div class="chat-box-content">
|
|
<div style="position:relative">
|
|
<div v-for="(item, index) in treeData" :key="index" class="proper_box">
|
|
<div class="proper_title">{{ item.label }}</div>
|
|
<div v-for="(data, i) in item.children" :key="i" style="position: relative; width: 73px; heigth: 73px; margin-left: 5px; float: left;">
|
|
<div v-if="data.show && item.id == 'driver'" class="proper_content_box" :class="{'active': data.active,'isInviting':data.isInviting}" @click="handleCheckChange(data)">
|
|
<span class="proper_content_box_text">{{ data.label + (data.userId? '(' + (simulationUsers[data.userId]||{}).nickName + ')': '') }}</span>
|
|
</div>
|
|
<div v-if="item.id != 'driver'" class="proper_content_box" :class="{'active':data.active,'isInviting':data.isInviting}" @click="handleCheckChange(data)">
|
|
<span class="proper_content_box_text">{{ data.label + (data.userId? '(' + (simulationUsers[data.userId]||{}).nickName + ')': '') }}</span>
|
|
</div>
|
|
<div v-if="data.loading" class="mask_loading">
|
|
<i class="el-icon-loading" style="margin-bottom: 4px;" />
|
|
<span>呼叫中</span>
|
|
</div>
|
|
<div v-if="data.isConnect||data.disabled" class="content_connect" />
|
|
<div v-if="data.isInviting" class="isInvitingClick" @click="acceptUser(data.id)" />
|
|
</div>
|
|
</div>
|
|
<div v-if="connectSuccess" class="connectSuccess" />
|
|
</div>
|
|
</div>
|
|
<div class="chat-box-content1">
|
|
<chat-content
|
|
ref="chatContent"
|
|
:project="project"
|
|
:is-answering="IsAnswering"
|
|
:conversition-id="conversitionId"
|
|
:conversition-member-list="conversitionMemberList"
|
|
:message-list="messageList"
|
|
:my-member-id="myMemberId"
|
|
:simulation-users="simulationUsers"
|
|
:common-conversation="commonConversation"
|
|
:user-role="userRole"
|
|
@changeMessageList="changeMessageList"
|
|
/>
|
|
</div>
|
|
<div class="chat-box-footer">
|
|
<div v-if="!connect">
|
|
<div style="width: 400px;font-size: 14px;line-height: 38px; padding-left: 10px;">{{ userString }}</div>
|
|
<el-button size="mini" type="primary" class="chat-box-footer-create" :loading="createLoading" @click="createCoversition()">
|
|
<i class="el-icon-phone" />
|
|
</el-button>
|
|
</div>
|
|
<div v-else>
|
|
<el-button v-if="isButtonShow && !commonConversation" size="mini" type="danger" class="chat-box-footer-create chat-box-footer-quit" :loading="quitLoading" @click="quitConversition()">
|
|
<i class="el-icon-phone" />
|
|
</el-button>
|
|
<el-button v-if="isButtonShow && !commonConversation" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" @click="startRecording()">
|
|
<el-progress id="record_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
|
|
<i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
|
|
<span class="iconfont icon-yuyin"></span>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="chat-box-header">
|
|
<div class="chat-setting" @click="handleSetting()">
|
|
<i class="el-icon-s-tools" />
|
|
</div>
|
|
<!-- <div v-if="!conversitionId && userRole !== 'AUDIENCE'" class="chat-setting" @click="cancelCommonConversation">
|
|
<el-tooltip effect="dark" content="成员列表" placement="top-start">
|
|
<i class="el-icon-s-custom" />
|
|
</el-tooltip>
|
|
</div> -->
|
|
<!-- <div v-if="!commonConversation" class="chat-setting" @click="goCommonConversation">
|
|
<el-tooltip effect="dark" content="公共会话" placement="top-start">
|
|
<i class="el-icon-chat-line-round" />
|
|
</el-tooltip>
|
|
</div>
|
|
<div v-if="conversitionId && commonConversation" class="chat-setting" @click="cancelCommonConversation">
|
|
<el-tooltip effect="dark" content="私有会话" placement="top-start">
|
|
<i class="el-icon-chat-round" />
|
|
</el-tooltip>
|
|
</div> -->
|
|
</div>
|
|
<div class="chat-box-content chat-box-content_audience">
|
|
<chat-content
|
|
ref="chatContent"
|
|
:project="project"
|
|
:is-answering="IsAnswering"
|
|
:conversition-id="conversitionId"
|
|
:conversition-member-list="conversitionMemberList"
|
|
:message-list="messageList"
|
|
:my-member-id="myMemberId"
|
|
:simulation-users="simulationUsers"
|
|
:common-conversation="commonConversation"
|
|
:user-role="userRole"
|
|
width="360px"
|
|
@changeMessageList="changeMessageList"
|
|
/>
|
|
<chat-member-list ref="chatMemberList" :conversition-member-list="conversitionMemberList" :simulation-users="simulationUsers" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ChatSetting from './chatSetting';
|
|
import ChatContent from './chatContent';
|
|
import ChatMemberList from './chatMemberList';
|
|
import RecordRTC from 'recordrtc';
|
|
import {sendSimulationConversition, startConversition, overSimulationConversition, getAllConversition, acceptConversitionInvite} from '@/api/chat';
|
|
import { getSessionStorage } from '@/utils/auth';
|
|
export default {
|
|
name: 'ChatBox',
|
|
components:{
|
|
ChatSetting,
|
|
ChatContent,
|
|
ChatMemberList
|
|
},
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
userRole: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
drawer: false,
|
|
bottom:15,
|
|
recordSending:false,
|
|
commonConversation: false,
|
|
seconds:0,
|
|
inter:null,
|
|
connectSuccess:false,
|
|
recorders: null,
|
|
microphone:null,
|
|
createLoading:false,
|
|
form:{
|
|
language:'zh',
|
|
sex:'1'
|
|
},
|
|
treeData: [],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'label'
|
|
},
|
|
// queryMember: '',
|
|
activeTrains: [],
|
|
firstClick: true,
|
|
memberData: {},
|
|
simulationUsers: {},
|
|
userString: '',
|
|
memberIdList: [],
|
|
memberObject: '',
|
|
quitLoading: false,
|
|
conversitionMemberList: [],
|
|
commonMemberList: [],
|
|
messageList: [], // 消息列表
|
|
commonMessageList: [],
|
|
conversitionStateMap:{},
|
|
myMemberId: ''
|
|
};
|
|
},
|
|
computed:{
|
|
isButtonShow() {
|
|
return this.userRole != 'AUDIENCE';
|
|
},
|
|
project() {
|
|
return getSessionStorage('project');
|
|
},
|
|
IsAnswering() {
|
|
return !(this.$route.path.includes('refereeJsxtDisplay'));
|
|
},
|
|
userId() {
|
|
return this.$store.state.user.id;
|
|
},
|
|
conversitionId() {
|
|
// console.log(this.conversitionStateMap, this.myMemberId, this.conversitionStateMap[this.myMemberId], (this.conversitionStateMap[this.myMemberId] || {conversitionId:''}));
|
|
return (this.conversitionStateMap[this.myMemberId] || {conversitionId:''}).conversitionId;
|
|
},
|
|
connect() {
|
|
return (this.conversitionStateMap[this.myMemberId] || {connect:false}).connect;
|
|
},
|
|
privateMemberList() {
|
|
return (this.conversitionStateMap[this.myMemberId] || {privateMemberList: []}).privateMemberList;
|
|
},
|
|
privateMessageList() {
|
|
return (this.conversitionStateMap[this.myMemberId] || {privateMessageList: []}).privateMessageList;
|
|
}
|
|
},
|
|
watch:{
|
|
// queryMember(val) {
|
|
// if (this.$refs.tree) {
|
|
// this.$refs.tree.filter(val);
|
|
// }
|
|
// },
|
|
conversitionId(val) {
|
|
if (val) {
|
|
this.conversitionMemberList = this.privateMemberList;
|
|
this.messageList = [...this.privateMessageList];
|
|
}
|
|
},
|
|
userRole(val) {
|
|
if (val === 'AUDIENCE') {
|
|
this.goCommonConversation();
|
|
this.myMemberId = '';
|
|
} else {
|
|
this.myMemberId = (this.simulationUsers[this.userId] || {}).memberId;
|
|
this.cancelCommonConversation();
|
|
}
|
|
},
|
|
'$store.state.map.mapViewLoadedCount': function(val) {
|
|
const object = document.querySelector('.menuButton');
|
|
if (object) {
|
|
const objectBottom = object.offsetHeight || 0;
|
|
this.bottom = objectBottom + 15;
|
|
} else {
|
|
this.bottom = 15;
|
|
}
|
|
this.isAudienceInitData();
|
|
},
|
|
'$store.state.training.prdType': function(val) {
|
|
this.$nextTick(() => {
|
|
const object = document.querySelector('.menuButton');
|
|
if (object) {
|
|
const objectBottom = object.offsetHeight || 0;
|
|
this.bottom = objectBottom + 15;
|
|
} else {
|
|
this.bottom = 15;
|
|
}
|
|
});
|
|
},
|
|
'$store.state.socket.createConversition':function(val) {
|
|
val.memberList.forEach(member => {
|
|
// if (val.creatorId == member.memberId) {
|
|
this.$set(this.conversitionStateMap, member.memberId, {conversitionId: val.id, privateMemberList: val.memberList, privateMessageList: [], connect:member.connect});
|
|
// }
|
|
});
|
|
},
|
|
'$store.state.socket.inviteSimulationConversition':function(val) {
|
|
this.treeData.forEach(item => {
|
|
// && item.children.length
|
|
if (item.children && item.children[val.creatorId]) {
|
|
item.children[val.creatorId].isInviting = true;
|
|
}
|
|
});
|
|
},
|
|
'$store.state.map.activeTrainListChange': function (val) { // 按计划行车的列车列表更新标识
|
|
this.activeTrains = [];
|
|
const activeTrainList = this.$store.state.map.activeTrainList;
|
|
if (activeTrainList && activeTrainList.length) {
|
|
activeTrainList.forEach(groupNumber => {
|
|
this.activeTrains.push(groupNumber);
|
|
});
|
|
}
|
|
this.filterNode();
|
|
if (activeTrainList.length <= 0) {
|
|
this.resetCoversition();
|
|
this.treeData.forEach(item => {
|
|
if (item.children) {
|
|
const memberList = Object.values(item.children);
|
|
memberList.forEach(data =>{
|
|
data.active = false;
|
|
data.isConnect = false;
|
|
data.loading = false;
|
|
data.disabled = false;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
// if (this.$refs.tree) {
|
|
// this.$refs.tree.filter(this.queryMember);
|
|
// }
|
|
},
|
|
'$store.state.training.simulationUserList': {
|
|
handler(val, o) {
|
|
this.simulationUsers = {};
|
|
if (val && val.length) {
|
|
val.forEach(user => {
|
|
this.simulationUsers[user.userId] = user;
|
|
});
|
|
this.myMemberId = this.simulationUsers[this.userId].memberId;
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
'$store.state.socket.exitConversition': function (val) {
|
|
for (const memberId in this.conversitionStateMap) {
|
|
if (memberId == val.memberId) {
|
|
this.conversitionStateMap[memberId].connect = false;
|
|
this.conversitionStateMap[memberId].conversitionId = '';
|
|
this.conversitionStateMap[memberId].privateMemberList = [];
|
|
this.conversitionStateMap[memberId].privateMessageList = [];
|
|
} else if ( this.conversitionStateMap[memberId].conversitionId == val.id ) {
|
|
const mList = [];
|
|
this.conversitionStateMap[memberId].privateMemberList.forEach(member => {
|
|
if (member.memberId != val.memberId) {
|
|
mList.push(member);
|
|
}
|
|
});
|
|
this.conversitionStateMap[memberId].privateMemberList = mList;
|
|
}
|
|
}
|
|
// 有人退出会话更新人员列表
|
|
this.treeData.forEach(item => {
|
|
if (item.children && item.children[val.memberId]) {
|
|
const member = item.children[val.memberId];
|
|
member.active = false;
|
|
member.isConnect = false;
|
|
member.disabled = false;
|
|
}
|
|
});
|
|
},
|
|
'$store.state.training.memberList': function (val) {
|
|
if (val && val.length) {
|
|
this.memberData = this.$store.state.training.memberData;
|
|
const dispatcherList = {};
|
|
const electricDispatcherList = {};
|
|
const depotDispatcherList = {};
|
|
const stationSupervisorList = {};
|
|
const driverList = {};
|
|
const maintainerList = {};
|
|
const parentDepartmentList = {};
|
|
val.forEach(item => {
|
|
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
|
|
this.memberData[item.id]['active'] = false;
|
|
this.memberData[item.id]['loading'] = false;
|
|
this.memberData[item.id]['isInviting'] = false;
|
|
switch (item.type) {
|
|
case 'DISPATCHER':
|
|
this.memberData[item.id].label = '行调' + (item.name || '');
|
|
this.memberData[item.id].labelName = '行调' + (item.name || '');
|
|
dispatcherList[item.id] = this.memberData[item.id];
|
|
break;
|
|
case 'ELECTRIC_DISPATCHER':
|
|
electricDispatcherList[item.id] = this.memberData[item.id];
|
|
break;
|
|
case 'DEPOT_DISPATCHER':
|
|
this.memberData[item.id].label = '车辆段';
|
|
this.memberData[item.id].labelName = '车辆段' + (item.name || '');
|
|
depotDispatcherList[item.id] = this.memberData[item.id];
|
|
break;
|
|
case 'STATION_SUPERVISOR':
|
|
this.memberData[item.id].label = device.name;
|
|
this.memberData[item.id].labelName = '值班员-' + device.name;
|
|
// this.memberData[item.id].label = '值班员-' + device.name;
|
|
stationSupervisorList[item.id] = this.memberData[item.id];
|
|
break;
|
|
case 'DRIVER':
|
|
this.memberData[item.id]['show'] = false;
|
|
this.memberData[item.id].label = item.deviceCode;
|
|
this.memberData[item.id].labelName = '司机-' + item.deviceCode;
|
|
driverList[item.id] = this.memberData[item.id];
|
|
break;
|
|
case 'MAINTAINER':
|
|
this.memberData[item.id].label = '通号' + (item.name || '');
|
|
this.memberData[item.id].labelName = '通号' + (item.name || '');
|
|
// this.memberData[item.id].label = item.name || '';
|
|
maintainerList[item.id] = this.memberData[item.id];
|
|
break;
|
|
case 'PARENT_DEPARTMENT':
|
|
this.memberData[item.id].label = '上级部门' + (item.name || '');
|
|
this.memberData[item.id].labelName = '上级部门' + (item.name || '');
|
|
parentDepartmentList[item.id] = this.memberData[item.id];
|
|
}
|
|
});
|
|
// { label: '全部集中站', value: 'allConcentrateStation', active: false, sign: 'DEVICE_STATION' },
|
|
stationSupervisorList['ALL_STATION'] = { label: '所有车站', value: 'allStation', active: false, sign: 'ALL_STATION' };
|
|
driverList['ALL_TRAIN'] = { label: '所有司机', value: 'allTrain', show: false, active: false, sign: 'ALL_TRAIN' };
|
|
this.treeData = [{
|
|
label: '行调',
|
|
id: 'dispatcher',
|
|
type: 'role',
|
|
children: dispatcherList
|
|
}, {
|
|
label: '车站值班员',
|
|
id: 'stationSupervisor',
|
|
type: 'role',
|
|
children: stationSupervisorList
|
|
}, {
|
|
label: '司机',
|
|
id: 'driver',
|
|
type: 'role',
|
|
children: driverList
|
|
}, {
|
|
label: '通号',
|
|
id: 'maintainer',
|
|
type: 'role',
|
|
children: maintainerList
|
|
}, {
|
|
label: '车辆段',
|
|
id: 'depotDispatcher',
|
|
type: 'role',
|
|
children: depotDispatcherList
|
|
}, {
|
|
label: '上级部门',
|
|
id: 'parentDepartment',
|
|
type: 'role',
|
|
children: parentDepartmentList
|
|
}];
|
|
this.initCommonMemberList();
|
|
// this.$nextTick(() => {
|
|
// if (this.$refs.tree) {
|
|
// this.$refs.tree.filter(this.queryMember);
|
|
// }
|
|
// });
|
|
}
|
|
},
|
|
'$store.state.socket.simulationReset': function () {
|
|
this.conversitionStateMap = {};
|
|
},
|
|
'$store.state.socket.acceptConversionInvite':function(val) {
|
|
this.conversitionStateMap[val.memberId].connect = true;
|
|
this.conversitionStateMap[val.memberId].conversitionId = val.id;
|
|
if (this.conversitionId == val.id) {
|
|
this.treeData.forEach(data => {
|
|
if (data.children && val.memberId != this.myMemberId) {
|
|
const member = data.children[val.memberId];
|
|
if (member) {
|
|
member.isConnect = true;
|
|
member.active ? member.loading = false : member.active = true;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.firstClick = true;
|
|
this.$nextTick(() => {
|
|
this.filterNode();
|
|
});
|
|
},
|
|
methods:{
|
|
getUserRole() {
|
|
if (this.userRole === 'AUDIENCE') {
|
|
this.goCommonConversation();
|
|
this.myMemberId = '';
|
|
} else {
|
|
this.myMemberId = (this.simulationUsers[this.userId] || {}).memberId;
|
|
this.cancelCommonConversation();
|
|
}
|
|
},
|
|
clickBtn() {
|
|
if (this.drawer) {
|
|
this.drawer = false;
|
|
} else {
|
|
this.drawer = true;
|
|
// this.$nextTick(() => {
|
|
// if (this.$refs.tree) {
|
|
// this.$refs.tree.filter(this.queryMember);
|
|
// }
|
|
// });
|
|
}
|
|
},
|
|
acceptUser() {
|
|
acceptConversitionInvite(this.group, this.conversitionId).then(res=>{
|
|
this.connectSuccess = true;
|
|
this.treeData.forEach(data => {
|
|
if (data.children) {
|
|
const member = data.children[res.data.creatorId];
|
|
if (member) {
|
|
member.active = true;
|
|
member.isConnect = true;
|
|
member.isInviting = false;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
},
|
|
setSetting(data) {
|
|
this.form = data;
|
|
},
|
|
// 创建会话 拨打电话
|
|
createCoversition() {
|
|
if (this.memberIdList.length || this.memberObject) {
|
|
this.createLoading = true;
|
|
if (this.memberIdList.length > 0) {
|
|
// this.memberObject
|
|
this.treeData.forEach(data => {
|
|
this.memberIdList.forEach(memberId=>{
|
|
const member = data.children[memberId];
|
|
if (member && member.active) { member.loading = true; }
|
|
});
|
|
});
|
|
} else {
|
|
// allTrain
|
|
if (this.memberObject == 'ALL_STATION') {
|
|
const stationList = Object.values(this.treeData[1].children);
|
|
const length = stationList.length;
|
|
stationList.forEach((item, index) => {
|
|
if (index != length - 1) {
|
|
item.active = true;
|
|
item.loading = true;
|
|
} else {
|
|
item.active = false;
|
|
item.loading = false;
|
|
}
|
|
});
|
|
} else if (this.memberObject == 'ALL_TRAIN') {
|
|
const trainList = Object.values(this.treeData[2].children);
|
|
const length = trainList.length;
|
|
trainList.forEach((item, index) => {
|
|
if (index != length - 1) {
|
|
item.active = true;
|
|
item.loading = true;
|
|
} else {
|
|
item.active = false;
|
|
item.loading = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
startConversition(this.group, this.memberIdList, this.memberObject).then(resp => {
|
|
this.connectSuccess = true;
|
|
if (this.memberObject == 'ALL_STATION') {
|
|
const stationList = this.treeData[1].children;
|
|
const member = stationList['ALL_STATION'];
|
|
member.active = false;
|
|
member.isConnect = true;
|
|
} else if (this.memberObject == 'ALL_TRAIN') {
|
|
const trainList = this.treeData[2].children;
|
|
const train = trainList['ALL_TRAIN'];
|
|
train.active = false;
|
|
train.isConnect = true;
|
|
}
|
|
this.messageList = [];
|
|
this.memberIdList = [];
|
|
this.memberObject = '';
|
|
// this.$message.success('创建会话成功！');
|
|
this.createLoading = false;
|
|
}).catch((error) => {
|
|
this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建仿真失败！');
|
|
this.createLoading = false;
|
|
});
|
|
} else {
|
|
this.userString = '请选择人员';
|
|
}
|
|
},
|
|
coverName(inviteUser) {
|
|
const member = this.$store.state.training.memberData[inviteUser.creatorId];
|
|
if (member.userId) {
|
|
const user = this.simulationUsers[member.userId];
|
|
return member.label + '(' + user.nickName + ')';
|
|
} else {
|
|
return member.label;
|
|
}
|
|
},
|
|
// 语音录制开始
|
|
startRecording() {
|
|
const that = this;
|
|
if (!this.recordSending) {
|
|
if (!this.recordSending && !this.recorders && !this.microphone) {
|
|
this.$refs.chatSetting.doClose();
|
|
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
|
|
navigator.getUserMedia(
|
|
{ audio: true } // 只启用音频
|
|
, function (stream) {
|
|
that.microphone = stream;
|
|
that.recorders = new RecordRTC(that.microphone, {
|
|
type: 'audio',
|
|
recorderType: StereoAudioRecorder,
|
|
numberOfAudioChannels: 1,
|
|
bitsPerSecond:256000,
|
|
desiredSampRate: 16000
|
|
});
|
|
that.recorders.startRecording();
|
|
that.recordSending = true;
|
|
that.inter = setInterval(() => {
|
|
if (that.seconds < 60) {
|
|
that.seconds++;
|
|
} else {
|
|
clearInterval(that.inter);
|
|
}
|
|
}, 1000);
|
|
}, function (error) {
|
|
switch (error.code || error.name) {
|
|
case 'PERMISSION_DENIED':
|
|
case 'PermissionDeniedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '用户拒绝提供信息',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
case 'NOT_SUPPORTED_ERROR':
|
|
case 'NotSupportedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '浏览器不支持硬件设备',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
case 'MANDATORY_UNSATISFIED_ERROR':
|
|
case 'MandatoryUnsatisfiedError':
|
|
that.$message({
|
|
showClose: true,
|
|
message: '无法发现指定的硬件设备',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
default:
|
|
that.$message({
|
|
showClose: true,
|
|
message: '无法打开麦克风',
|
|
type: 'error'
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
} else {
|
|
this.stopRecording(); // 发送语音
|
|
}
|
|
},
|
|
cancleRecording() {
|
|
if (this.microphone) {
|
|
clearInterval(this.inter);
|
|
this.seconds = 0;
|
|
this.microphone.stop();
|
|
this.microphone = null;
|
|
this.recordSending = false;
|
|
this.recorders = null;
|
|
}
|
|
},
|
|
// 停止录制 发送语音
|
|
stopRecording() {
|
|
const that = this;
|
|
this.recorders.stopRecording(function(blobURL) {
|
|
clearInterval(that.inter);
|
|
that.seconds = 0;
|
|
const blob = that.recorders.getBlob();
|
|
const fd = new FormData();
|
|
fd.append('file', blob);
|
|
sendSimulationConversition(that.group, that.conversitionId, fd)
|
|
.then((data) => {
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
if (that.microphone) {
|
|
that.microphone.stop();
|
|
that.microphone = null;
|
|
that.recordSending = false;
|
|
that.recorders = null;
|
|
}
|
|
});
|
|
},
|
|
handleSetting() {
|
|
this.$refs.chatSetting.doShow();
|
|
},
|
|
// 点击按钮事件
|
|
handleCheckChange(data, jude = false) {
|
|
this.memberObject = '';
|
|
if (data.userId && data.userId == this.$store.state.user.id) {
|
|
return;
|
|
}
|
|
if (data.value == 'allConcentrateStation' || data.value == 'allStation' || data.value == 'allTrain') {
|
|
this.treeData.forEach(data => {
|
|
this.memberIdList.forEach(memberId=>{
|
|
const member = data.children[memberId];
|
|
if (member && member.active) { member.active = false; }
|
|
});
|
|
});
|
|
if (data.value == 'allStation') {
|
|
const stationList = Object.values(this.treeData[1].children);
|
|
const length = stationList.length;
|
|
if (!data.active) {
|
|
stationList.forEach((item, index) => {
|
|
if (index != length - 1) {
|
|
item.disabled = true;
|
|
}
|
|
});
|
|
} else {
|
|
stationList.forEach((item, index) => {
|
|
if (index != length - 1) {
|
|
item.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
} else if (data.value == 'allTrain') {
|
|
const trainList = Object.values(this.treeData[2].children);
|
|
const length = trainList.length;
|
|
if (!data.active) {
|
|
trainList.forEach((item, index) => {
|
|
if (index != length - 1) {
|
|
item.disabled = true;
|
|
}
|
|
});
|
|
} else {
|
|
trainList.forEach((item, index) => {
|
|
if (index != length - 1) {
|
|
item.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
this.memberIdList = [];
|
|
data.active = !data.active;
|
|
this.memberObject = data.sign;
|
|
} else {
|
|
if (!jude) {
|
|
data.active = !data.active;
|
|
}
|
|
const member = data;
|
|
if (data.active) {
|
|
if (member && member.type === 'DRIVER' && !this.activeTrains.includes(member.deviceCode)) {
|
|
return;
|
|
}
|
|
if (member && member.userId) {
|
|
this.memberIdList.push(member.id);
|
|
} else if (member) {
|
|
this.memberIdList.push(member.id);
|
|
}
|
|
} else {
|
|
this.memberIdList.forEach((id, index) => {
|
|
if (id == member.id) {
|
|
this.memberIdList.splice(index, 1);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
// 过滤全部列车 显示正在运行的列车
|
|
filterNode() {
|
|
if (this.treeData[2]) {
|
|
const trainList = Object.values(this.treeData[2]['children']);
|
|
trainList.forEach(train => {
|
|
train.show = false;
|
|
if (this.activeTrains.includes(train.deviceCode)) {
|
|
train.show = true;
|
|
}
|
|
});
|
|
const member = this.treeData[2]['children']['ALL_TRAIN'];
|
|
if (this.activeTrains.length > 0) {
|
|
member.show = true;
|
|
} else {
|
|
this.memberObject = '';
|
|
const trainList = Object.values(this.treeData[2].children);
|
|
trainList.forEach(train=>{
|
|
if (train.active) {
|
|
train.active = false;
|
|
const memberId = train.id;
|
|
this.memberIdList.splice(this.memberIdList.indexOf(memberId), 1);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
// 退出会话
|
|
quitConversition() {
|
|
this.quitLoading = true;
|
|
this.userString = '';
|
|
overSimulationConversition(this.group, this.conversitionId).then(resp => {
|
|
this.connectSuccess = false;
|
|
this.conversitionMemberList = [];
|
|
this.messageList = [];
|
|
this.quitLoading = false;
|
|
this.conversitionStateMap[this.myMemberId].connect = false;
|
|
// this.$nextTick(() => {
|
|
// this.$refs.tree && this.$refs.tree.filter(this.queryMember);
|
|
// });
|
|
this.treeData.forEach(item => {
|
|
if (item.children) {
|
|
const memberList = Object.values(item.children);
|
|
memberList.forEach(data =>{
|
|
data.active = false;
|
|
data.isConnect = false;
|
|
data.loading = false;
|
|
data.disabled = false;
|
|
});
|
|
}
|
|
});
|
|
}).catch(() => {
|
|
this.$message.error('退出会话失败！');
|
|
this.quitLoading = false;
|
|
});
|
|
},
|
|
sortByMessageTime(message1, message2) {
|
|
const time1 = new Date(message1.time).valueOf();
|
|
const time2 = new Date(message2.time).valueOf();
|
|
return time1 - time2;
|
|
},
|
|
// 获取历史消息
|
|
isAudienceInitData() {
|
|
getAllConversition(this.group).then(resp => {
|
|
const messages = [];
|
|
if (resp.data && resp.data.length) {
|
|
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);
|
|
});
|
|
const tempMessageList = [];
|
|
!conversation.over && conversation.messageList.forEach(message => {
|
|
message.src = `/audio/${message.audioPath}`;
|
|
tempMessageList.push(message);
|
|
});
|
|
!conversation.over && conversation.memberList.forEach(member => {
|
|
const param = {
|
|
conversitionId: conversation.id,
|
|
privateMemberList: conversation.memberList,
|
|
privateMessageList: tempMessageList
|
|
};
|
|
this.$set(this.conversitionStateMap, member.memberId, param);
|
|
});
|
|
});
|
|
this.getUserRole();
|
|
}
|
|
this.commonMessageList = messages.sort(this.sortByMessageTime);
|
|
this.initCommonMemberList();
|
|
});
|
|
},
|
|
// 初始化人员列表
|
|
initCommonMemberList() {
|
|
const temDispatcherList = [];
|
|
const temStationSupervisorList = [];
|
|
const temMaintainerList = [];
|
|
const temDriverList = [];
|
|
const temDepotDispatcherList = [];
|
|
this.$store.state.training.memberList.forEach(item =>{
|
|
switch (item.type) {
|
|
case 'DISPATCHER':
|
|
temDispatcherList.push({memberId: item.id, connect:true });
|
|
break;
|
|
case 'STATION_SUPERVISOR':
|
|
temStationSupervisorList.push({memberId: item.id, connect:true });
|
|
break;
|
|
case 'MAINTAINER':
|
|
temMaintainerList.push({memberId: item.id, connect:true });
|
|
break;
|
|
case 'DRIVER':
|
|
temDriverList.push({memberId: item.id, connect:true });
|
|
break;
|
|
case 'DEPOT_DISPATCHER':
|
|
temDepotDispatcherList.push({memberId: item.id, connect:true });
|
|
break;
|
|
}
|
|
});
|
|
this.commonMemberList = [...temDispatcherList, ...temStationSupervisorList, ...temMaintainerList, ...temDriverList, ...temDepotDispatcherList];
|
|
if (this.userRole == 'AUDIENCE' || this.commonConversation) {
|
|
this.conversitionMemberList = [];
|
|
this.messageList = [...this.commonMessageList];
|
|
this.conversitionMemberList = this.commonMemberList;
|
|
}
|
|
},
|
|
changeMessageList(data) {
|
|
this.commonMessageList.push(data.message);
|
|
// if (this.conversitionStateMap[data.message.memberId]) {
|
|
// this.conversitionStateMap[data.message.memberId].privateMessageList.push(data.message);
|
|
// }
|
|
if (this.conversitionStateMap[data.message.memberId]) {
|
|
(this.conversitionStateMap[data.message.memberId].privateMemberList || []).forEach(member => {
|
|
this.conversitionStateMap[member.memberId] && this.conversitionStateMap[member.memberId].privateMessageList.push(data.message);
|
|
});
|
|
}
|
|
if (this.commonConversation) {
|
|
this.messageList.push(data.message);
|
|
} else if (!this.commonConversation && this.conversitionId === data.id) {
|
|
this.messageList.push(data.message);
|
|
}
|
|
},
|
|
goCommonConversation() {
|
|
!this.commonConversation && this.$refs.chatContent && this.$refs.chatContent.conversationChange();
|
|
this.commonConversation = true;
|
|
this.conversitionMemberList = this.commonMemberList;
|
|
this.messageList = [...this.commonMessageList];
|
|
},
|
|
cancelCommonConversation() {
|
|
this.commonConversation && this.$refs.chatContent && this.$refs.chatContent.conversationChange();
|
|
this.commonConversation = false;
|
|
this.conversitionMemberList = this.privateMemberList;
|
|
this.messageList = [...this.privateMessageList];
|
|
// this.$nextTick(() => {
|
|
// this.$refs.tree && this.$refs.tree.filter(this.queryMember);
|
|
// });
|
|
},
|
|
clearAllData() {
|
|
this.recordSending = false;
|
|
this.inter = null;
|
|
this.recorders = null;
|
|
this.microphone = null;
|
|
this.treeData = [];
|
|
this.conversitionMemberList = [];
|
|
this.messageList = [];
|
|
},
|
|
// 剧本重置清空公有会话
|
|
resetCoversition() {
|
|
this.commonMessageList = [];
|
|
this.conversitionStateMap = {};
|
|
this.messageList = this.commonMessageList;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.chatBox {
|
|
position: absolute;
|
|
left: 0;
|
|
top: calc((100% - 600px) / 2);
|
|
height: 600px;
|
|
width: 503px;
|
|
transform: translateX(-503px);
|
|
transition: all 0.4s;
|
|
z-index: 9;
|
|
&.active{
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
.proper_box{
|
|
overflow: hidden;
|
|
.proper_title{
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 30px;
|
|
font-size: 14px;
|
|
background: #F27867;
|
|
line-height: 30px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.proper_content_box{
|
|
float: left;
|
|
width: 73px;
|
|
height: 73px;
|
|
font-size: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #676688;
|
|
border-radius: 4px;
|
|
margin-left: 5px;
|
|
margin-bottom: 5px;
|
|
padding: 0 3px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
position: relative;
|
|
&.active{
|
|
background: #6BBE16;
|
|
}
|
|
}
|
|
.mask_loading{
|
|
position: absolute;
|
|
width: 73px;
|
|
height: 73px;
|
|
left: 5px;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba(0,0,0,0.4);
|
|
flex-direction: column;
|
|
border-radius:4px;
|
|
font-size: 14px;
|
|
}
|
|
.content_connect,.isInvitingClick{
|
|
position: absolute;
|
|
width: 73px;
|
|
height: 73px;
|
|
left: 5px;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba(0,0,0,0);
|
|
flex-direction: column;
|
|
border-radius:4px;
|
|
font-size: 14px;
|
|
}
|
|
.isInvitingClick{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.menuTrainListBtn {
|
|
background: #fff;
|
|
text-align: center;
|
|
border-radius: 0px 6px 6px 0px;
|
|
position: absolute;
|
|
top: 40%;
|
|
z-index: 2;
|
|
transform: translateX(502px);
|
|
cursor: pointer;
|
|
z-index: 9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
padding: 7px 4px;
|
|
.el-icon-more{
|
|
font-size: 20px;
|
|
margin-top: 9px;
|
|
transform-origin: 50% 50%;
|
|
transform: rotate(90deg);
|
|
margin-left:0px;
|
|
}
|
|
}
|
|
.chat-box-header{
|
|
width: 100%;
|
|
height: 40px;
|
|
border-bottom: 1px #dedede solid;
|
|
.chat-box-header-title{
|
|
font-size: 15px;
|
|
margin-left: 15px;
|
|
display: inline-block;
|
|
margin-top: 5px;
|
|
width: 70%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.chat-box-content{
|
|
width: 100%;
|
|
height: 300px;
|
|
position: relative;
|
|
overflow: auto;
|
|
}
|
|
.chat-box-content_audience{
|
|
height: calc(100% - 40px);
|
|
}
|
|
.chat-box-content1{
|
|
height: 200px;
|
|
position: relative;
|
|
border-top: 1px #9a9a9a solid;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.chat-box-footer{
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 55px;
|
|
position: relative;
|
|
border-top: 1px solid #afafaf;
|
|
}
|
|
.chat-setting{
|
|
float: right;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.chat-createGroup{
|
|
float: right;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
position: relative;
|
|
}
|
|
.chat-box-footer-tool{
|
|
width: 100%;
|
|
height: 17px;
|
|
}
|
|
.minimality {
|
|
float: right;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
font-size:16px;
|
|
}
|
|
.chat-box-main{
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
height: 100%;
|
|
top: 0;
|
|
border-right: 1px #dedede solid;
|
|
z-index: 4;
|
|
background: #fff;
|
|
border-radius: 5px;
|
|
left: 0;
|
|
// font-size:0;
|
|
}
|
|
.chat-box-footer-create{
|
|
font-size: 16px;
|
|
text-align: center;
|
|
color: #fff;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 6px;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: green;
|
|
border: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.chat-box-footer-quit{
|
|
background: red;
|
|
}
|
|
.chat-box-footer-send{
|
|
background: #F2F2F2;
|
|
right: 55px;
|
|
cursor: pointer;
|
|
.icon-yuyin{
|
|
color: #333;
|
|
font-size: 24px;
|
|
margin: 0;
|
|
}
|
|
&.active{
|
|
.icon-yuyin{
|
|
color: green;
|
|
}
|
|
}
|
|
.close_icon{
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 11px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.showMembers{
|
|
float: right;
|
|
line-height: 40px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
font-size: 17px;
|
|
}
|
|
#record_progress_bar{
|
|
width: 40px;
|
|
height: 40px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 50%;
|
|
}
|
|
.chat_record_tip{
|
|
height: 28px;
|
|
display: inline-block;
|
|
background: #dfe6ee;
|
|
width: 370px;
|
|
font-size: 13px;
|
|
border-top: 1px #d8dce5 solid;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.chat-box-footer-send.disbled{
|
|
cursor: no-drop;
|
|
}
|
|
.connectSuccess{
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
left:0;
|
|
top:0;
|
|
z-index:2;
|
|
}
|
|
.proper_content_box_text{
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.isInviting::before{
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
background:#6BBE16;
|
|
animation: isInviting infinite 1s;
|
|
-moz-animation: isInviting infinite 1s; /* Firefox */
|
|
-webkit-animation: isInviting infinite 1s; /* Safari 和 Chrome */
|
|
-o-animation: isInviting infinite 1s; /* Opera */
|
|
}
|
|
@keyframes isInviting
|
|
{
|
|
0% {opacity:1;}
|
|
50%{opacity:0;}
|
|
100% {opacity: 1;}
|
|
}
|
|
@-webkit-keyframes isInviting /* Safari 和 Chrome */
|
|
{
|
|
0% {opacity:1;}
|
|
50%{opacity:0;}
|
|
100% {opacity: 1;}
|
|
}
|
|
</style>
|