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:
fan 2022-11-07 16:15:22 +08:00
parent deeaba2690
commit 19bb41b0d8
7 changed files with 1722 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/newMap/display/index.vue
View File

@ -10,10 +10,8 @@
</div>
</template>
<script>
// import { timeFormat } from '@/utils/date';
import { getSessionStorage } from '@/utils/auth';
import { mapGetters } from 'vuex';
// import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
import TerminalsPicture from './terminals/index';
import SimulationMenu from './simulationMenu';
import { clearSimulation, getSimulationInfoNew} from '@/api/simulation';
@ -38,7 +36,6 @@ export default {
// textStatusHeight: 0,
// planRunning:false,
dataError: false,
group:'',
terminalsShow: true
// showMap: false
};
@ -62,6 +59,9 @@ export default {
// 当前的所属项目
project() {
return getSessionStorage('project');
},
group() {
return this.$route.query.group;
}
},
watch:{
@ -102,7 +102,6 @@ export default {
},
// 初始化
initLoadData() {
this.group = this.$route.query.group;
// this.$store.dispatch('training/reset');
this.loadSimulationInfo();
},

10
src/views/newMap/display/simulationMenu.vue
View File

@ -57,7 +57,7 @@
<training-position-tip v-if="trainingDetail||trainingId" ref="trainingPositionTip" />
<training-menu v-if="trainingDetail" ref="trainingMenu" :offset-bottom="offsetBottom" />
<TrainingDesign v-if="trainingDesignShow" ref="trainingDesign" />
<voice-chat-box v-if="hasVoice" :group="group" />
</div>
</template>
<script>
@ -95,6 +95,7 @@ import TrainingTip from './trainingList/trainingTip.vue';
import TrainingPositionTip from './trainingList/trainingPositionTip.vue';
import TrainingMenu from './trainingList/trainingMenu';
import TrainingDesign from '@/views/trainingManage/index.vue';
import VoiceChatBox from './voiceChatBox/index';
export default {
name: 'SimulationMenu',
@ -126,7 +127,8 @@ export default {
TrainingTip,
TrainingPositionTip,
TrainingMenu,
TrainingDesign
TrainingDesign,
VoiceChatBox
// StatusIcon
},
props: {
@ -447,7 +449,8 @@ export default {
DEPOT_DISPATCHER: '09',
DRIVER: '04',
RAIL_CTC: '10'
}
},
hasVoice: false
};
},
computed: {
@ -536,6 +539,7 @@ export default {
item.isShow = val.hasLpf;
}
});
this.hasVoice = val.hasVoice;
this.menuList = [...this.allMenuList];
}
},

14
src/views/newMap/display/terminals/localWork.vue
View File

@ -58,6 +58,13 @@ export default {
},
'$store.state.map.initJlmapLoadedCount': function (val) {
this.handleLocalWorkData();
},
'$store.state.training.roleDeviceCode': function (val) {
const type = this.datie ? 'chainStation' : 'localWork';
const picture = this.mapData.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(this.roleDeviceCode) && picture.type === type);
if (picture) {
this.handlerPictureShow(picture);
}
}
},
methods: {
@ -68,13 +75,6 @@ export default {
const logicData = {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData};
const repaint = this.$store.state.map.initJlmapLoadedCount === 1;
this.$jlmap.setMap(this.mapData, this.mapDevice, logicData, repaint);
// if (this.lineCode === '14') {
// const list = [];
// for (const key in this.mapDevice) {
// list.push(this.mapDevice[key]);
// }
// this.$jlmap.updateShowMode(list, '02');
// }
if (this.mapData && this.mapData.pictureList) {
const type = this.datie ? 'chainStation' : 'localWork';
const picture = this.mapData.pictureList.find(picture => picture.stationCodes && picture.stationCodes.includes(this.roleDeviceCode) && picture.type === type);

363
src/views/newMap/display/voiceChatBox/chatContent.vue Normal file
View File

@ -0,0 +1,363 @@
<template>
<div class="chatcontentIn" :style="{width: width}">
<div class="chatcontentInner">
<div v-for="(chatContent,index) in messageList" :key="index" class="chatContentInClass">
<div :class="chatContent.memberId == myMemberId?'rightUser':'leftUser'">
<div class="userHeader">
<div v-if="!chatContent.self" class="userName">{{ covertName(chatContent.memberId) }}</div>
<div :class="chatContent.memberId == myMemberId?'userChatTime textRight':'userChatTime'">{{ covertTime(chatContent.time) }}</div>
</div>
<div v-if="chatContent.type == 'Text'" class="userBubble">
<div class="userMessage">
<span class="messageText">{{ chatContent.content }}</span>
</div>
</div>
<div v-else class="userBubble" style="height: 30px;width: 140px;" @click="playAudio(baseUrl+chatContent.src, chatContent)">
<div class="userMessage">
<!-- <span class="el-icon-video-play playicon" /> -->
<!-- <img :src="yuyin" class="playicon1"> -->
<!-- 语音播放 -->
<div class="wifi-symbol">
<div class="wifi-circle first" />
<div class="wifi-circle second" :class="{'second-amit': chatContent.activeAtuo}" />
<div class="wifi-circle third" :class="{'third-amit': chatContent.activeAtuo}" />
</div>
<!-- <span class="messageText">{{ chatContent.content }}</span> -->
</div>
</div>
</div>
</div>
<audio id="audioPlay" style="display:none" />
</div>
</div>
</template>
<script>
import {overConversationMessage} from '@/api/chat';
export default {
props:{
messageList:{
type:Array,
required:true
},
conversitionStateMap: {
type: Object,
required: true
},
isAnswering:{
type:Boolean,
required:true
},
conversitionId: {
type: String,
required: true
},
conversitionMemberList: {
type: Array,
required: true
},
simulationUsers: {
type: Object,
required: true
},
userRole: {
type: String,
required: true
},
commonConversation: {
type: Boolean,
required: true
},
myMemberId: {
type: String,
default() {
return '';
}
},
width: {
type: String,
default() {
return '100%';
}
}
},
data() {
return {
chatContentList:[],
currentAudioList:[],
// yuyin:yuyin,
currentAudioIndex:0,
isPlay:false,
baseUrl: this.$store.state.user.resourcesUrl
};
},
watch:{
'$store.state.socket.conversationInfo':function (val, old) { // 仿真聊天
const conversationInfo = this.$store.state.socket.conversationInfo;
const member = this.$store.state.training.memberData[val.message.memberId];
conversationInfo.message.src = `${conversationInfo.message.audioPath}`;
this.$emit('changeMessageList', conversationInfo);
if (this.conversitionId == val.id && this.conversitionStateMap[this.myMemberId] && this.conversitionStateMap[this.myMemberId].connect) {
if (member && member.userId != this.$store.state.user.id) {
this.currentAudioList.push({audioUrl:this.baseUrl + conversationInfo.message.audioPath, id:val.message.id});
if (!this.isPlay) {
this.isPlay = true;
this.$store.dispatch('scriptRecord/updateAudioPlay', true);
this.playAllAudio();
}
}
this.scrollTop();
} else if (this.userRole === 'AUDIENCE' || this.commonConversation) {
if (member && member.userId != this.$store.state.user.id) {
this.currentAudioList.push({audioUrl:this.baseUrl + conversationInfo.message.audioPath, id:val.message.id});
if (!this.isPlay) {
this.isPlay = true;
this.$store.dispatch('scriptRecord/updateAudioPlay', true);
this.playAllAudio();
}
}
}
},
'$store.state.scriptRecord.audioPlay':function(val) {
this.isPlay = val;
if (!val) {
this.currentAudioList = [];
}
}
},
mounted() {
},
methods:{
scrollTop() {
this.$nextTick(function() {
const scrollTop = document.querySelector('.chatcontentInner').offsetHeight - document.querySelector('.chatcontentIn').offsetHeight + 30;
document.querySelector('.chatcontentIn').scrollTop = scrollTop;
});
},
playAllAudio() {
this.playEachAudio(this.currentAudioList[this.currentAudioIndex]);
},
playEachAudio(audioObject) {
this.$nextTick(function() {
this.messageList.forEach(item => {
if (item.id == audioObject.id) {
this.$set(item, 'activeAtuo', true);
}
});
document.querySelector('#audioPlay').src = audioObject.audioUrl;
document.querySelector('#audioPlay').play();
const that = this;
document.querySelector('#audioPlay').onended = function() {
that.messageList.forEach(item => {
if (item.id == audioObject.id) {
that.$set(item, 'activeAtuo', false);
}
});
overConversationMessage(that.$route.query.group, audioObject.id).then(res=>{
that.currentAudioList.shift();
if (that.currentAudioList.length > 0) {
that.playEachAudio(that.currentAudioList[that.currentAudioIndex]);
} else {
that.isPlay = false;
that.$store.dispatch('scriptRecord/updateAudioPlay', false);
}
});
};
});
},
covertName(memberId) {
let name = '';
const member = this.$store.state.training.memberData[memberId];
if (member && member.userId) {
const user = this.simulationUsers[member.userId];
name = member.label + '(' + user.nickName + ')';
} else if (member) {
name = member.label;
}
return name;
},
covertTime(time) {
const date = new Date(time);
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
hour = hour > 9 ? hour : '0' + hour;
minute = minute > 9 ? minute : '0' + minute;
second = second > 9 ? second : '0' + second;
return hour + ':' + minute + ':' + second;
},
playAudio(audioUrl, data) {
this.messageList.forEach(item => {
this.$set(item, 'activeAtuo', false);
});
if (!this.isPlay) {
const that = this;
document.querySelector('#audioPlay').src = audioUrl;
this.$set(data, 'activeAtuo', true);
document.querySelector('#audioPlay').play();
document.querySelector('#audioPlay').onended = function() {
that.$set(data, 'activeAtuo', false);
};
}
},
conversationChange() {
this.currentAudioList = [];
}
}
};
</script>
<style lang="scss" scoped>
.chatcontentIn{
// height: 200px;
height: calc(100% - 5px);
// width: 360px;
width: 100%;
display: inline-block;
overflow: auto;
padding-bottom: 20px;
cursor:auto;
background: #fff;
}
.leftUser{
float: left;
margin-left: 10px;
margin-top: 10px;
display: inline-block;
max-width: 80%;
}
.rightUser{
float: right;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
max-width: 80%;
}
.userHeader{margin-bottom: 2px;}
.userName{font-size: 12px;display:inline-block;margin-right:10px;}
.userChatTime{font-size: 12px;display:inline-block;}
.userBubble{
font-size: 12px;
// padding: 10px;
padding: 5px 10px 6px 10px;
min-width: 140px;
background: #ccc;
border-radius: 5px;
cursor: pointer;
display:inline-block;
// height: 30px;
// overflow: hidden;
}
.playicon{
font-size: 20px;
vertical-align: top;
}
// .playicon1{
// width:17px;
// }
.wifi-symbol {
width: 48px;
height: 48px;
box-sizing: border-box;
overflow: hidden;
transform: rotate(135deg);
position: absolute;
left: 5px;
top: -13px;
}
.wifi-circle {
border: 1px solid #000000;
border-radius: 50%;
position: absolute;
}
.first {
width: 9px;
height: 9px;
background: #cccccc;
top: 45px;
left: 45px;
border: 2px solid #000;
}
.second {
width: 20px;
height: 20px;
top: 40px;
left: 40px;
&.second-amit{
animation: fadeInOut 1s infinite 0.2s;
}
}
.third {
width: 26px;
height: 26px;
top: 36px;
left: 36px;
&.third-amit{
animation: fadeInOut 1s infinite 0.4s;
}
}
@keyframes fadeInOut {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
.textRight{text-align: right;}
.userMessage{
position: relative;
}
.messageText{
line-height: 20px;
word-break: break-all;
}
.chatContentInClass{
display: inline-block;
width: 100%;
}
.rightUser .userBubble{
float:right;
}
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
.chatcontentIn::-webkit-scrollbar {
width: 6px;
height: 6px;
// height: 110px;
background-color: #FFFFFF;
}
/*定义滚动条轨道 内阴影+圆角*/
.chatcontentIn::-webkit-scrollbar-track {
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFFFFF;;
}
/*定义滑块 内阴影+圆角*/
.chatcontentIn::-webkit-scrollbar-thumb {
border-radius: 10px;
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #cacaca;
}
/*滑块效果*/
.chatcontentIn::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}
</style>

126
src/views/newMap/display/voiceChatBox/chatSetting.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<div v-show="dialogVisible" class="chat-popup">
<div class="chat-setting-header">
<div class="chat-setting-title">设置</div>
<div class="chat-setting-close">
<i class="el-icon-close" @click="dialogVisible=false" />
</div>
</div>
<div class="chat-setting-content">
<div class="chat-setting-language">
<div class="setting-language-title">语言: </div>
<el-switch
v-model="form.language"
class="setting-language-select"
active-color="#409EFF"
inactive-color="#ff4949"
active-text="中"
inactive-text="En"
active-value="zh"
inactive-value="en"
@change="changeLanguage()"
/>
</div>
<div class="chat-setting-sex">
<div class="setting-sex-title">性别: </div>
<el-switch
v-model="form.sex"
class="setting-sex-select"
active-color="#409EFF"
inactive-color="#ff4949"
active-icon-class="el-icon-male"
inactive-icon-class="el-icon-female"
active-value="1"
inactive-value="0"
@change="changeSex()"
/>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ChatSetting',
props:{
form:{
type:Object,
required:true
}
},
data() {
return {
dialogVisible: false,
loading:false
};
},
methods:{
doShow() {
this.dialogVisible = true;
},
doClose() {
this.dialogVisible = false;
},
changeLanguage() {
this.$emit('setSetting', this.form);
},
changeSex() {
this.$emit('setSetting', this.form);
}
}
};
</script>
<style lang="scss" scoped>
.chat-popup{
position: absolute;
width: 54%;
height: 143px;
border: 1px #dedede solid;
left: 22%;
top: 24%;
z-index: 7;
border-radius: 4px;
-webkit-box-shadow: 3px 3px 3px #928787;
box-shadow: 3px 3px 3px #928787;
background: #fff;
}
.chat-setting-header{
padding-left: 10px;
padding-top: 6px;
font-size: 14px;
border-bottom: 1px #dedede solid;
padding-bottom: 6px;
}
.chat-setting-title{
display: inline-block;
}
.chat-setting-close{
float: right;
display: inline-block;
margin-right: 5px;
font-size: 16px;
cursor: pointer;
}
.chat-setting-content{
}
.chat-setting-language,.chat-setting-sex{
display: inline-block;
margin-top: 20px;
}
.setting-language-title,.setting-sex-title{
display: inline-block;
font-size: 14px;
margin-left: 20px;
vertical-align: top;
margin-top: 3px;
}
.setting-language-select,.setting-sex-select{
display: inline-block;
vertical-align: top;
}
</style>
<style lang="scss">
.setting-sex-select .el-icon-male,.setting-sex-select .el-icon-female{
font-size:18px !important;
}
</style>

1212
src/views/newMap/display/voiceChatBox/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

6
src/views/publish/publishMap/editSubsystem.vue
View File

@ -155,7 +155,8 @@ export default {
{ key: 'hasTraining', label: '是否有实训', value: false, type: 'checkbox'},
{ key: 'hasExam', label: '是否有考试', value: false, type: 'checkbox' },
{ key: 'trainingDesign', label: '是否实训设计', value: false, type: 'checkbox' },
{ key: 'hasLpf', label: '是否有大客流', value: false, type: 'checkbox' }
{ key: 'hasLpf', label: '是否有大客流', value: false, type: 'checkbox' },
{ key: 'hasVoice', label: '是否有语音指令', value: false, type: 'checkbox' }
],
endTableData: [
{ key: 'DEFAULT_MEMBER', label: '默认仿真成员', value: '', type: 'select', optionList: [] },
@ -359,7 +360,8 @@ export default {
{ key: 'client', label: '初始客户端', value: '', type: 'select', optionList: this.clientList},
{ key: 'hasTraining', label: '是否有实训', value: false, type: 'checkbox'},
{ key: 'hasExam', label: '是否有考试', value: false, type: 'checkbox' },
{ key: 'trainingDesign', label: '是否实训设计', value: false, type: 'checkbox' }
{ key: 'trainingDesign', label: '是否实训设计', value: false, type: 'checkbox' },
{ key: 'hasVoice', label: '是否有语音指令', value: false, type: 'checkbox' }
];
this.endTableData = [
{ key: 'DEFAULT_MEMBER', label: '默认仿真成员', value: '', type: 'select', optionList: [] },