joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

剧本预览代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2020-07-22 17:20:24 +08:00
parent 9ba8764130
commit 597822430e
6 changed files with 205 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/store/modules/socket.js
View File

@ -29,15 +29,6 @@ function handle(state, data) {
case 'Simulation_Script_Tip': // 仿真-聊天界面用户进出仿真消息
handleSimulationScriptTipInfo(state, msg); // 用户进出仿真消息
break;
case 'Simulation_Start_Conversation': // 综合演练仿真-聊天界面用户邀请其他人加入群聊
state.inviteOtherIntoChat = msg;
break;
case 'Simulation_Accept_Conversation': // 综合演练仿真-聊天界面用户接受被邀请
state.acceptInviteChat = msg;
break;
case 'Simulation_Exist_Conversation': // 综合演练仿真-聊天界面用户退出群聊发送消息
state.quitCoversition = msg;
break;
case 'Simulation_PlayBack_Finish': // 竞赛裁判系统裁判员回放结束推送
state.playBackFinish++; // 竞赛裁判系统裁判员回放结束推送
break;
@ -228,9 +219,6 @@ const socket = {
simulationStart: '', // 仿真-开始消息
simulationOver:0, // 退出仿真推送消息
simulationReset: 0, // 仿真-异常消息
inviteOtherIntoChat:{}, // 综合演练仿真-聊天界面用户邀请其他人加入群聊推送信息
acceptInviteChat:{}, // 综合演练仿真-聊天界面用户接受聊天邀请,
quitCoversition:{}, // 综合演练仿真-聊天界面用户退出群聊推送消息,
// coversitionList:{}, // 历史仿真-用户消息列表
inviteSimulationConversition: {}, // 仿真会话邀请消息
acceptConversionInvite:{}, // 仿真会话成员接收邀请

65
src/views/newMap/chatView/chatBox.vue
View File

@ -54,7 +54,7 @@
</div>
<div v-else>
<div class="chat-box-footer-tool" />
<!-- <el-button v-if="isButtonShow&&isCreate" size="mini" type="danger" class="chat-box-footer-quit" :loading="loading" @click="quitCoversition()">退出群聊</el-button> -->
<el-button v-if="isQuitShow" size="mini" type="danger" class="chat-box-footer-quit" :loading="loading" @click="quitConversition()">退出群聊</el-button>
<el-button v-if="isStartRecord" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
</div>
@ -69,6 +69,8 @@
</div>
</div>
<chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
<!-- @getCoversitionList="getCoversitionList" -->
<chat-tooltip ref="chatToolTip" :group="group" :conversition-id="conversitionId" :invite-user-name="inviteUserName" />
</div>
</template>
<script>
@ -76,14 +78,16 @@ import ChatSetting from './chatSetting';
import ChatMemberList from './chatMemberList';
import ChatContent from './chatContent';
import RecordRTC from 'recordrtc';
// , overSimulationConversition, getAllConversition
import {sendSimulationConversition, startConversition} from '@/api/chat';
import ChatTooltip from './chatTooltip';
// getAllConversition
import {sendSimulationConversition, startConversition, overSimulationConversition} from '@/api/chat';
export default {
name:'ChatBoxDraft',
components:{
ChatSetting,
ChatMemberList,
ChatContent
ChatContent,
ChatTooltip
},
props:{
isShow:{
@ -117,6 +121,14 @@ export default {
isStartRecord:{
type:Boolean,
required:true
},
isQuitShow:{
type:Boolean,
required:true
},
inviteUserName:{
type:String,
required:true
}
},
data() {
@ -302,7 +314,6 @@ export default {
this.loading = true;
startConversition(this.group, this.memberIdList).then(resp => {
if (resp.data) {
// this.conversitionId = resp.data.id;
this.loading = false;
this.memberIdList = [];
this.userString = '';
@ -313,33 +324,33 @@ export default {
this.dialogVisible = false;
});
}
// this.createLoading = true;
// startConversition(this.group, this.memberIdList).then(resp => {
// this.conversitionId = resp.data.id;
// this.messageList = [];
// this.privateMessageList = [];
// this.userString = '';
// this.isConversitionCreator = true;
// this.$message.success('创建会话成功！');
// this.createLoading = false;
// }).catch((error) => {
// this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建仿真失败！');
// this.createLoading = false;
// });
},
quitConversition() {
this.loading = true;
overSimulationConversition(this.group, this.conversitionId).then(resp => {
this.$emit('resetCoversition');
this.loading = false;
}).catch(() => {
this.$message.error('退出会话失败！');
this.loading = false;
});
},
inviteMember() {
this.$refs.chatToolTip.doShow();
}
}
};
</script>
<style lang="scss" scoped>
// .chat-box-footer-quit{
// font-size: 12px;
// padding: 5px 15px;
// color: #fff;
// float: left;
// margin-left: 10px;
// margin-bottom: 10px;
// cursor: pointer;
// }
.chat-box-footer-quit{
font-size: 12px;
padding: 5px 15px;
color: #fff;
float: left;
margin-left: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.chatBox{
width: 503px;
position: absolute;

2
src/views/newMap/chatView/chatContent.vue
View File

@ -120,7 +120,7 @@ export default {
display: inline-block;
}
.userHeader{margin-bottom: 2px;}
.userName{font-size: 12px;display:inline-block;}
.userName{font-size: 12px;display:inline-block;margin-right:10px;}
.userChatTime{font-size: 12px;display:inline-block;}
.userBubble{
max-width: 200px;

95
src/views/newMap/chatView/chatTooltip.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div v-show="dialogVisible" class="chatTooltipAll">
<div class="chatTooltip">
<div class="chatTooltipHeader">
{{ inviteUserName }} 邀请您加入会话！
</div>
<div class="chatTooltipBootom">
<div class="create-group-bottom">
<el-button :loading="loading" size="small" type="primary" @click="doCreate">接受</el-button>
<el-button size="small" @click="doClose">拒绝</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import {acceptConversitionInvite} from '@/api/chat';
export default {
name:'ChatTooltip',
props: {
group: {
type: String,
required: true
},
inviteUserName:{
type: String,
required: true
},
conversitionId:{
type: String,
required: true
}
},
data() {
return {
dialogVisible:false,
loading:false
};
},
// {"conversationId":"22e10b17-7a6c-4b1b-8724-f87fb2053b76","from":{"id":"17","userId":"75","name":"赵",
// "role":"STATION_SUPERVISOR","deviceType":"STATION","deviceCode":"Station32955","deviceName":"世纪大道","online":true,"robot":false}
methods:{
doShow() {
this.loading = false;
this.dialogVisible = true;
},
doCreate() {
this.loading = true;
acceptConversitionInvite(this.group, this.conversitionId).then(res=>{
this.loading = false;
this.dialogVisible = false;
this.$emit('getCoversitionList');
}).catch(error=>{
this.$messageBox('接受邀请失败: ' + error.message);
});
},
doClose() {
this.dialogVisible = false;
}
}
};
</script>
<style lang="scss" scoped>
.chatTooltip{
position: absolute;
width: 290px;
left: 23%;
top: 42%;
z-index: 5;
background: #fff;
padding: 15px;
box-shadow: #969090 0px 0px 10px;
border-radius: 4px;
line-height: 20px;
transform: translateY(-50%);
}
.chatTooltipHeader{
margin-top:10px;
font-size:14px;
}
.chatTooltipBootom{
margin-top:10px;
text-align: center;
margin-bottom:10px;
}
.chatTooltipAll{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index: 10;
}
</style>

90
src/views/newMap/displayNew/scriptPreviewChat.vue
View File

@ -9,7 +9,10 @@
: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>
@ -45,22 +48,31 @@ export default {
conversitionId:'',
currentMemberList:[],
chatContentList:[],
isStartRecord:false
isStartRecord:false,
inviteUserName:'',
createCoversition:false,
inviteUser:{},
isQuitShow:false
};
},
computed:{
isShow() {
return this.userRole != '' && this.userRole != 'ADMIN' && !this.isHasCoversition;
return this.userRole != '' &&
this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' &&
!this.isHasCoversition && this.createCoversition;
}
},
watch:{
// 创建会话
'$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=>{
@ -75,34 +87,43 @@ export default {
});
this.currentMemberList = memberList;
} else {
// 如果是观众看所有人的会话
if (this.userRole == 'AUDIENCE') {
this.isHasCoversition = true;
this.currentMemberList = this.memberData;
}
}
//
// if (member.userId == this.$store.state.user.id) {
// const memberList = [];
// val.memberIds.forEach(id=>{
// if (val.creatorId == id) {
// memberList.push({memberId:id, connect:true});
// } else {
// memberList.push({memberId:id, connect:false});
// }
// });
// this.conversitionMemberList = memberList;
// this.privateMemberList = memberList;
// this.commonConversation = false;
// }
// this.conversitionId = val.id;
}
},
// 用户接受会话
'$store.state.socket.acceptConversionInvite':function(val) {
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') {
@ -119,6 +140,7 @@ export default {
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 );
@ -128,20 +150,18 @@ export default {
}
}
},
// 会话聊天消息
'$store.state.socket.conversationInfo':function (val, old) { // 仿真聊天
const simulationText = this.$store.state.socket.conversationInfo;
if (this.conversitionId == val.id && val.messageType == 'MESSAGE') {
if (val.messageType == 'MESSAGE' && (this.conversitionId == val.id || this.userRole == 'AUDIENCE')) {
this.chatContentList.push(this.addContent(simulationText.message));
// this.scrollTop();
} else {
if (!simulationText.all && val.messageType == 'MESSAGE') {
this.chatContentList.push(this.addContent(simulationText.message));
}
}
},
// 剧本执行完成消息
'$store.state.socket.scriptFinish':function(val, old) {
this.$message('剧本执行完成');
},
// 退出会话消息
'$store.state.socket.overConversition': function (val) {
if (val.id === this.conversitionId) {
this.conversitionId = '';
@ -151,6 +171,17 @@ export default {
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();
}
}
},
methods:{
@ -170,6 +201,19 @@ export default {
text.message = simulationText.content;
}
return text;
},
resetCoversition() {
this.conversitionId = '';
this.scriptTip = '';
this.isHasCoversition = false;
this.currentMemberList = [];
this.chatContentList = [];
this.isStartRecord = false;
this.inviteUserName = '';
this.createCoversition = false;
this.inviteUser = {};
this.isQuitShow = false;
}
}