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-21 19:27:32 +08:00
parent 1038063860
commit f3d2982bd2
5 changed files with 411 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,20 @@
<div class="record_tip_cancle" @click="cancleRecording()">取消</div>
</div>
</div>
<chat-member-list ref="chatMemberList" :current-member-list="currentMemberList" />
<chat-member-list ref="chatMemberList" :current-member-list="currentMemberListData" />
</div>
<div class="chat-box-footer">
<div v-if="isShow">
<div class="userString">{{ userString }}</div>
<el-button :loading="loading" size="mini" type="primary" class="chat-box-create-coversite" @click="doCreate">创建群聊</el-button>
<div v-if="scriptTip" class="scriptTip">{{ scriptTip }}</div>
</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="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>
</div>
</div>
</div>
@ -62,8 +75,9 @@
import ChatSetting from './chatSetting';
import ChatMemberList from './chatMemberList';
import ChatContent from './chatContent';
// startConversition, overSimulationConversition, getAllConversition
import {sendSimulationConversition} from '@/api/chat';
import RecordRTC from 'recordrtc';
// , overSimulationConversition, getAllConversition
import {sendSimulationConversition, startConversition} from '@/api/chat';
export default {
name:'ChatBoxDraft',
components:{
@ -77,7 +91,7 @@ export default {
required:true
},
treeData:{
type:Object,
type:Array,
required:true
},
group: {
@ -95,6 +109,14 @@ export default {
chatContentList:{
type:Array,
required: true
},
scriptTip:{
type:String,
required:true
},
isStartRecord:{
type:Boolean,
required:true
}
},
data() {
@ -114,10 +136,18 @@ export default {
recorders: null,
seconds:0,
inter:null,
microphone:null
microphone:null,
loading:false,
userString:'',
memberIdList:[],
currentMemberListData:[]
};
},
watch:{
'currentMemberList':(val)=>{
debugger;
this.currentMemberListData = val;
},
'$store.state.map.mapViewLoadedCount':function(val) {
const object = document.querySelector('.menuButton');
if (object) {
@ -149,7 +179,16 @@ export default {
},
handleCheckChange() {
const memberList = this.$refs.tree.getCheckedNodes();
this.$emit('checkedMember', memberList);
this.userString = '';
this.memberIdList = [];
if (memberList && memberList.length) {
memberList.forEach(member => {
if (member && !(member.children) && (member.userId == '' || member.userId)) {
this.userString += member.memberName + ',';
this.memberIdList.push(member.id);
}
});
}
},
handleMinimality(data) {
if (data == 'min') {
@ -162,6 +201,71 @@ export default {
setSetting(data) {
this.form = data;
},
// 语音录制开始
startRecording() {
this.$emit('setScriptTip', '');
const that = this;
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;
}
}
);
}
},
// 停止录制
stopRecording() {
const that = this;
@ -196,6 +300,36 @@ export default {
this.recordSending = false;
this.recorders = null;
}
},
doCreate() {
if (this.memberIdList.length > 0) {
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 = '';
}
}).catch(error=>{
this.$message.error(error.code == '3005' ? '创建会话失败:仿真会话成员忙线中！' : '创建会话失败！');
this.loading = false;
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;
// });
}
}
};
@ -254,11 +388,11 @@ export default {
position: relative;
}
// .chat-box-footer{
// display: inline-block;
// width: 100%;
// position: relative;
// }
.chat-box-footer{
display: inline-block;
width: 100%;
position: relative;
}
.chat-window{
display: inline-block;
width: 100%;
@ -270,27 +404,27 @@ export default {
cursor: pointer;
font-size: 16px;
}
// .chat-box-footer-tool{
// width: 100%;
// height: 30px;
// }
// .chat-box-footer-send{
// font-size: 12px;
// text-align: center;
// float: right;
// margin-right: 10px;
// margin-bottom: 10px;
// cursor: pointer;
// padding: 5px 15px;
// }
// .chat-box-create-coversite{
// font-size: 12px;
// float: right;
// margin-right: 10px;
// margin-top: 18px;
// cursor: pointer;
// padding: 5px 15px;
// }
.chat-box-footer-tool{
width: 100%;
height: 30px;
}
.chat-box-footer-send{
font-size: 12px;
text-align: center;
float: right;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
padding: 5px 15px;
}
.chat-box-create-coversite{
font-size: 12px;
float: right;
margin-right: 10px;
margin-top: 18px;
cursor: pointer;
padding: 5px 15px;
}
.minimality {
float: right;
line-height: 40px;
@ -317,46 +451,46 @@ export default {
// .coversition-list{
// }
// .chat-box-footer-send.disbled{
// cursor: no-drop;
// }
.chat-box-footer-send.disbled{
cursor: no-drop;
}
// .scriptTip{
// position: absolute;
// width: 260px;
// padding: 10px;
// background: rgb(250, 246, 3);
// right: 7px;
// bottom:45px;
// border-radius: 5px;
// font-size: 14px;
// color: #000000;
// z-index: 2;
// }
// .scriptTip::after{
// content: '';
// position: absolute;
// width: 0;
// height: 0;
// border-left: 10px solid transparent;
// border-right: 10px solid transparent;
// border-top: 8px solid #faf603;
// right: 16px;
// bottom: -7px;
// }
.scriptTip{
position: absolute;
width: 260px;
padding: 10px;
background: rgb(250, 246, 3);
right: 7px;
bottom:45px;
border-radius: 5px;
font-size: 14px;
color: #000000;
z-index: 2;
}
.scriptTip::after{
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 8px solid #faf603;
right: 16px;
bottom: -7px;
}
// .userString{
// height: 50px;
// width: 409px;
// position: absolute;
// left: 0;
// top: 0;
// padding: 4px 5px;
// overflow-x: auto;
// font-size: 13px;
// line-height: 135%;
// resize: none;
// }
.userString{
height: 50px;
width: 409px;
position: absolute;
left: 0;
top: 0;
padding: 4px 5px;
overflow-x: auto;
font-size: 13px;
line-height: 135%;
resize: none;
}
// .showMembers{
// float: right;

8
src/views/newMap/chatView/chatMemberList.vue
View File

@ -26,6 +26,12 @@ export default {
return this.$store.state.user.id;
}
},
watch:{
'currentMemberList':()=>{
debugger;
this.currentMemberList;
}
},
mounted() {
},
methods:{
@ -62,7 +68,7 @@ export default {
margin-top: 10px;
font-size: 12px;
margin-left: 0px;
height: 350px;
height: 250px;
overflow-y: auto;
}
.each-chat-member{

109
src/views/newMap/displayNew/designIndex.vue
View File

@ -5,7 +5,7 @@
<map-system-draft ref="mapCanvas" @back="back" />
</transition>
<script-preview-chat ref="chatbox" :group="group" :user-role="userRole" />
<script-preview-chat ref="chatbox" :group="group" :user-role="userRole" :member-data="memberData" :tree-data="treeData" />
<div class="display-draft">
<el-button v-if="isscriptRun&&!dataError" type="danger" @click="handleQuitQuest">{{ $t('display.demon.exitScript') }}</el-button>
<el-button type="primary" @click="back">{{ $t('display.demon.back') }}</el-button>
@ -43,7 +43,6 @@ import { quitScriptNew, scriptRePreview } from '@/api/simulation';
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
import { mapGetters } from 'vuex';
import { setGoodsTryUse } from '@/api/management/goods';
import { clearSimulation, getSimulationInfoNew } from '@/api/simulation';
import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
import { checkLoginLine } from '@/api/login';
@ -51,6 +50,7 @@ import { loadNewMapDataByGroup } from '@/utils/loaddata';
import { EventBus } from '@/scripts/event-bus';
import { Notification } from 'element-ui';
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
// 三维
// import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
@ -91,6 +91,7 @@ export default {
mapBoxP: null,
dataError: false,
panelShow: true,
memberData:[],
simulationShow: false,
drivingShow: false,
isscriptRun:false, // 剧本是否正在加载
@ -104,8 +105,9 @@ export default {
'04': '02', // 司机 => 行调
'05': '' // 派班 => null
},
userRole:'AUDIENCE',
isDrive: this.prdType == '04'
userRole:'',
isDrive: this.prdType == '04',
treeData:[]
};
},
computed: {
@ -318,10 +320,6 @@ export default {
this.endViewLoading();
}
},
async runAddRolesLoadShow() {
const row = {group: this.$route.query.group, id: this.$route.query.scriptId};
this.$refs.addQuest.handleLoad(1, row);
},
async back() {
await clearSimulation(this.group);
this.$store.dispatch('training/over').then(() => {
@ -342,6 +340,87 @@ export default {
} else {
this.userRole = 'AUDIENCE';
}
const memberList = this.$store.state.training.memberData;
memberList[data.id].userId = this.$store.state.user.id;
memberList[data.id].disabled = true;
let lastData = JSON.stringify(memberList);
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);
lastData = Object.values(lastData);
const lastMemberList = [];
const dispatcherList = [];
const electricDispatcherList = [];
const depotDispatcherList = [];
const stationSupervisorList = [];
const driverList = [];
const maintainerList = [];
this.treeData = [];
lastData.forEach((member, index)=>{
if (member.type != '观众') {
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;
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: driverList
}, {
label: '通号',
id: 'maintainer',
type: 'role',
children: maintainerList
}];
this.memberData = lastMemberList;
},
// 退出剧本
handleQuitQuest() {
@ -350,8 +429,8 @@ export default {
getSimulationInfoNew(this.group).then(()=>{
this.isscriptRun = false;
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
this.userRole = 'AUDIENCE';
this.$refs.chatbox.clearAllData();
this.userRole = '';
// this.$refs.chatbox.clearAllData();
}).catch(()=>{
this.$messageBox(this.$t('display.demon.exitTaskFail'));
});
@ -379,16 +458,6 @@ export default {
await clearSimulation(this.group);
await this.$store.dispatch('training/over');
},
// 设置使用时间
async tryTime(param) {
const data = {
goodsId: param.goodsId,
time: param.time
};
if (data.goodsId) {
await setGoodsTryUse(data);
}
},
switchMode(prdType) {
this.$store.dispatch('training/setPrdType', prdType);
},

2
src/views/newMap/displayNew/menuSchema.vue
View File

@ -220,7 +220,7 @@ export default {
Vue.prototype.$jlmap.setOptions(newMapLocation);
}
}
this.$emit('selectQuest', {row, roleName});
this.$emit('selectQuest', {row, roleName, id});
} catch (error) {
this.$messageBox(error.message);
}

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

@ -7,9 +7,13 @@
:conversition-id="conversitionId"
:current-member-list="currentMemberList"
:chat-content-list="chatContentList"
:script-tip="scriptTip"
:is-start-record="isStartRecord"
@setScriptTip="setScriptTip"
/>
</template>
<script>
import CMD from '@/scripts/cmdPlugin/CommandEnum';
import ChatBox from '../chatView/chatBox.vue';
export default {
name:'ScriptPreviewChat',
@ -24,16 +28,119 @@ export default {
userRole: {
type: String,
required: true
},
memberData:{
type: Array,
required: true
},
treeData:{
type: Array,
required: true
}
},
data() {
return {
isShow:false,
treeData:{},
scriptTip:'',
isHasCoversition:false,
conversitionId:'',
currentMemberList:[],
chatContentList:[]
chatContentList:[],
isStartRecord:false
};
},
computed:{
isShow() {
return this.userRole != '' && this.userRole != 'ADMIN' && !this.isHasCoversition;
}
},
watch:{
'$store.state.socket.createConversition':function(val) {
this.isHasCoversition = true;
this.isStartRecord = true;
this.conversitionId = val.id;
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) {
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;
}
}
//
// 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) {
this.currentMemberList.forEach(member => {
if (member.id == val.memberId) {
member.connect = true;
}
});
},
'$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 = [];
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 (this.conversitionId == val.id && val.messageType == 'MESSAGE') {
this.chatContentList.push(this.addContent(simulationText.message));
// this.scrollTop();
} else {
if (!simulationText.all && val.messageType == 'MESSAGE') {
this.chatContentList.push(this.addContent(simulationText.message));
}
}
}
},
methods:{
setScriptTip(scriptTip) {
this.scriptTip = scriptTip;
}
}
};