大铁实训设计没有根据角色切换显示&语音指令

src/views/newMap/display/index.vue

@@ -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();
         },

src/views/newMap/display/simulationMenu.vue

@@ -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];
         }
     },

src/views/newMap/display/terminals/localWork.vue

@@ -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);

src/views/newMap/display/voiceChatBox/chatContent.vue

@@ -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>

src/views/newMap/display/voiceChatBox/chatSetting.vue

@@ -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>

src/views/publish/publishMap/editSubsystem.vue

@@ -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: [] },