实训平台 综合演练 聊天代码调整

src/store/modules/socket.js

@@ -23,6 +23,9 @@ function handle(state, data) {
     case 'Simulation_DeviceStatus': // 仿真-设备状态消息
         state.equipmentStatus = msg;
         break;
+    case 'Simulation_User': // 仿真-聊天界面用户进出仿真消息
+        handleSimulationUserinfo(state, msg); // 用户进出仿真消息
+        break;
     case 'Simulation_RunFact': // 仿真-列车实际到发车站消息
         // let runFactMsg = msg;
         // if (runFactMsg.constructor !== Array ) {
@@ -215,6 +218,10 @@ function handleUserinfo(state, data) {
     state.roleList = (data instanceof Array) ? data : [data];
 }
 
+function handleSimulationUserinfo(state, data) {
+    state.simulationRoleList = (data instanceof Array) ? data : [data];
+}
+
 function handlePushMsgQueue(state, msg) {
     if (msg instanceof Array) {
         state.msgQueue.concat(msg);
@@ -235,6 +242,7 @@ const socket = {
         jointRoomInfo: {}, // 受邀请房间信息
         chatContent: {}, // 聊天室聊天内容
         roleList: [], // 设置角色信息
+        simulationRoleList:[], // 设置仿真的聊天角色信息
         jointRoomPrepare: false, // 演练房间准备状态
         equipmentStatus: [], // 仿真-设备状态消息
         trainStationList: [], //  仿真-列车实际到发车站消息

src/utils/stomp.js

@@ -5,7 +5,6 @@ import store from '@/store/index_APP_TARGET';
 export const displayTopic = '/user/queue/simulation'; // 其他仿真topic
 export const perpetualTopic = '/user/topic/message'; // 公用topic
 export const roomTopic = '/user/queue/room'; // 房间topic
-export const assistant = '/user/topic/simulation/assistant';// 房间里仿真聊天topic
 
 // 建立连接并订阅地址
 export function creatSubscribe(topic, header) {

src/views/designPlatform/demonList.vue

@@ -92,7 +92,8 @@ export default {
             switch (obj.type) {
             case 'scriptDesign': {
                 setSessionStorage('designType', 'scriptDesign');
-                this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}?lineCode=${obj.lineCode}&drawWay=${obj.drawWay}` });
+                const query = {lineCode:obj.lineCode, drawWay:obj.drawWay};
+                this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}?`, query});
                 break;
             }
             case 'lessonDesign': {

src/views/newMap/jointTrainingNew/chatBox.vue

@@ -2,24 +2,9 @@
   <!-- v-quickMenuDrag  -->
   <div class="chatBox">
     <div v-show="!minimize" class="chat-box">
-      <div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'">
-        <div class="chat-member-title">成员列表</div>
-        <div class="chat-member-list">
-          <div v-for="member in memberList" :key="member.id" :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'" @click="createConversition(member)">{{ handleMember(member) }}</div>
-        </div>
-      </div>
+      <chat-member-list ref="chatMemberList" :group="group" @addCoversition="addCoversition" />
       <div class="chat-box-main">
-        <div class="chat-coversition">
-          <div id="coversition-list-name" />
-          <div class="coversition-list">
-            <div
-              v-for="coversition in coversitionList"
-              :key="coversition.id"
-              :class="coversition.id==currentCoversition.id?'coversition-active each-coversition':'each-coversition'"
-              @click="changeCoversition(coversition)"
-            >{{ handleMemberName(coversition) }}</div>
-          </div>
-        </div>
+        <chat-coversition-list ref="chatCoversitionList" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
         <div class="chat-window">
           <div class="chat-box-header">
             <div class="chat-box-header-title">{{ headerTitle }}</div>
@@ -60,19 +45,19 @@
   </div>
 </template>
 <script>
-import { getToken } from '@/utils/auth';
-import { creatSubscribe, clearSubscribe, assistant} from '@/utils/stomp';
 import ChatSetting from './chatSetting';
 import ChatContent from './chatContent';
+import ChatMemberList from './chatMemberList';
+import ChatCoversitionList from './chatCoversitionList';
 import RecordRTC from 'recordrtc';
-import {getSimulationMembersNew, getSimulationConversationListNew, getSimulationConversationIdNew, uploadAudioFileNew} from '@/api/chat';
-import ConstConfig from '@/scripts/ConstConfig';
-import Cookies from 'js-cookie';
+import {uploadAudioFileNew} from '@/api/chat';
 export default {
     name: 'ChatBox',
     components:{
         ChatSetting,
-        ChatContent
+        ChatContent,
+        ChatMemberList,
+        ChatCoversitionList
     },
     props: {
         group: {
@@ -83,10 +68,8 @@ export default {
     data() {
         return {
             minimize:false,
-            showMembers:false,
             recordSending:false,
-            memberList:[],
-            coversitionList:[],
+            currentCoversition:{},
             seconds:0,
             inter:null,
             recorders: null,
@@ -95,28 +78,23 @@ export default {
                 language:'zh',
                 sex:'1'
             },
-            currentCoversition:{},
             headerTitle:'所有人'
         };
     },
+    watch: {
+        '$store.state.socket.simulationRoleList': function (val) {
+            if (val && val.length) {
+                this.$nextTick(() => {
+                    debugger;
+                });
+            }
+        }
+    },
     mounted() {
         this.initPage();
     },
-    async beforeDestroy() {
-        this.clearSubscribe();
-    },
     methods:{
         async initPage() {
-            this.subscribe();
-            this.getSimulationMembers();
-            getSimulationConversationListNew(this.$route.query.group).then(resp=>{
-                if (resp.data) {
-                    this.coversitionList = resp.data;
-                    if (resp.data && resp.data.length && resp.data.length > 0) {
-                        this.currentCoversition = resp.data[0];
-                    }
-                }
-            });
         },
         handleMinimality(data) {
             if (data == 'min') {
@@ -129,35 +107,16 @@ export default {
         setSetting(data) {
             this.form = data;
         },
-        handleMemberName(conversition) {
-            if (conversition.group) {
-                return conversition.name;
-            } else {
-                let coversitionName = '';
-                conversition.memberList.forEach(member=>{
-                    if (member.userId != this.$store.state.user.id) {
-                        const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
-                        let data = member.role;
-                        roleTypeList.forEach(function(element) {
-                            const rolename = element.value;
-                            if (Cookies.get('user_lang') == 'en') {
-                                data = data.replace(rolename, element.enLabel);
-                            } else {
-                                data = data.replace(rolename, element.label);
-                            }
-                        });
-                        const deviceName = member.deviceName ? '-' + member.deviceName : '';
-                        const memberName = member.name ? '-' + member.name : '';
-                        coversitionName = data + deviceName + memberName;
-                    }
-                });
-                return coversitionName;
-            }
+        setCurrentCoversition(coversition) {
+            this.currentCoversition = coversition;
         },
-        handleMember(member) {
-            const deviceName = member.deviceName ? '-' + member.deviceName : '';
-            const memberName = member.name ? '-' + member.name : '';
-            return member.role + deviceName + memberName;
+        setHeadTitle(headerTitle) {
+            this.headerTitle = headerTitle;
+        },
+        addCoversition({data, headerTitle}) {
+            this.$refs.chatCoversitionList.addCoversition(data);
+            this.currentCoversition = {id:data.id, group:data.group};
+            this.headerTitle = headerTitle;
         },
         // 语音录制开始
         startRecording() {
@@ -264,63 +223,7 @@ export default {
         },
         handleMembers() {
             this.$refs.chatSetting.doClose();
-            if (this.showMembers) {
-                this.showMembers = false;
-            } else {
-                this.showMembers = true;
-                this.getSimulationMembers();
-            }
-        },
-        getSimulationMembers() {
-            getSimulationMembersNew(this.$route.query.group).then(resp => {
-                let lastData = JSON.stringify(resp.data);
-                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);
-                this.memberList = lastData;
-            });
-        },
-        async subscribe() {
-            if (!this.$store.state.socket.assistantIsSubscribe) {
-                this.clearSubscribe();
-                const header = { group: this.group || '', 'X-Token': getToken() };
-                creatSubscribe(`${assistant}\/${this.group}`, header);
-                await this.$store.dispatch('socket/setAssistantSubscribe', true);
-            }
-        },
-        async clearSubscribe() {
-            clearSubscribe(`${assistant}\/${this.group}`);
-            await this.$store.dispatch('socket/setAssistantSubscribe', false);
-        },
-        createConversition(member) {
-            if (member.userId != this.$store.state.user.id && member.online) {
-                getSimulationConversationIdNew({ memberId: member.id }, this.group).then(resp => {
-                    if (resp.data) {
-                        const data = resp.data;
-                        const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
-                        if (index < 0) {
-                            this.coversitionList.push(data);
-                        }
-                        const headtTitle = this.handleMemberName(data);
-                        this.currentCoversition = {id:data.id, group:data.group};
-                        this.headerTitle = headtTitle;
-                        this.showMembers = false;
-                    }
-                });
-            }
-        },
-        changeCoversition(coversition) {
-            const headtTitle = this.handleMemberName(coversition);
-            this.headerTitle = headtTitle;
-            this.currentCoversition = {id:coversition.id, group:coversition.group};
-            // this.$refs.chatContent.reloadData(this.currentCoversition);
+            this.$refs.chatMemberList.doShow();
         }
     }
 };
@@ -358,30 +261,6 @@ export default {
 }
 .chat-box-contentTip{
 
-}
-.chat-coversition{
-    width: 100px;
-    display: inline-block;
-    border-right: 1px #dedede solid;
-    height: 100%;
-    vertical-align: top;
-    background: #f9f9f9;
-    border-radius: 5px 0px 0px 5px;
-}
-.coversition-list{
-    padding: 3px 0px 10px 0px;
-    height: 355px;
-    overflow: auto;
-    margin-top:40px;
-}
-.each-coversition{
-    font-size: 14px;
-    padding: 10px 7px 10px 10px;
-    border-bottom: 1px #dedede solid;
-    cursor: pointer;
-}
-.coversition-active{
-    background: #e0e0e0;
 }
 .chat-box-footer{
     display: inline-block;
@@ -435,45 +314,13 @@ export default {
     left:5px;
     font-size:0;
 }
-.chat-member-list{
-    margin-top: 13px;
-    font-size: 12px;
-    margin-left: 2px;
-    height: 350px;
-    overflow-y: auto;
-}
-.each-chat-member{
-    margin-bottom: 10px;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
-}
-.each-chat-member-outline{
-    color: #ccc;
-}
 .chat-coversition{
 
 }
 .coversition-list{
 
 }
-.chat-box-members{
-    position: absolute;
-    width: 140px;
-    right: 0;
-    height: 100%;
-    background: #fff;
-    border-right: 1px #dedede solid;
-    border-radius: 0px 5px 5px 0px;
-    z-index: 2;
-    transition: transform 1s;
-    padding: 12px 2px 10px 16px;
-    font-size: 14px;
-}
-.chat-member-title{
-}
+
 .showMembers{
     float: right;
     line-height: 40px;
@@ -481,9 +328,6 @@ export default {
     cursor: pointer;
     font-size: 17px;
 }
-.memberAnimate{
-  transform: translateX(97%);
-}
 #record_progress_bar{
     height: 100%;
     position: absolute;

src/views/newMap/jointTrainingNew/chatCoversitionList.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="chat-coversition">
+    <div id="coversition-list-name" />
+    <div class="coversition-list">
+      <div
+        v-for="coversition in coversitionList"
+        :key="coversition.id"
+        :class="coversition.id==currentCoversition.id?'coversition-active each-coversition':'each-coversition'"
+        @click="changeCoversition(coversition)"
+      >{{ coversition.coverName }}</div>
+    </div>
+  </div>
+</template>
+<script>
+import ConstConfig from '@/scripts/ConstConfig';
+import Cookies from 'js-cookie';
+import {getSimulationConversationListNew} from '@/api/chat';
+export default {
+    name:'ChatCoversitionList',
+    data() {
+        return {
+            coversitionList:[],
+            currentCoversition:{}
+        };
+    },
+    mounted() {
+        getSimulationConversationListNew(this.$route.query.group).then(resp=>{
+            if (resp.data) {
+                const data = resp.data;
+                data.map(coversition=>{
+                    coversition.coverName = this.handleMemberName(coversition);
+                    return coversition;
+                });
+                this.coversitionList = data;
+                if (resp.data && resp.data.length && resp.data.length > 0) {
+                    this.currentCoversition = resp.data[0];
+                    this.$emit('setCurrentCoversition', resp.data[0]);
+                }
+            }
+        });
+    },
+    methods:{
+        addCoversition(data) {
+            const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
+            if (index < 0) {
+                data.coverName = this.handleMemberName(data);
+                this.coversitionList.push(data);
+            }
+        },
+        changeCoversition(coversition) {
+            this.$emit('setHeadTitle', coversition.coverName);
+            this.currentCoversition = {id:coversition.id, group:coversition.group};
+            this.$emit('setCurrentCoversition', coversition);
+            // this.$refs.chatContent.reloadData(this.currentCoversition);
+        },
+        handleMemberName(conversition) {
+            if (conversition.group) {
+                return conversition.name;
+            } else {
+                let coversitionName = '';
+                conversition.memberList.forEach(member=>{
+                    if (member.userId != this.$store.state.user.id) {
+                        const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
+                        let data = member.role;
+                        roleTypeList.forEach(function(element) {
+                            const rolename = element.value;
+                            if (Cookies.get('user_lang') == 'en') {
+                                data = data.replace(rolename, element.enLabel);
+                            } else {
+                                data = data.replace(rolename, element.label);
+                            }
+                        });
+                        const deviceName = member.deviceName ? '-' + member.deviceName : '';
+                        const memberName = member.name ? '-' + member.name : '';
+                        coversitionName = data + deviceName + memberName;
+                    }
+                });
+                return coversitionName;
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.chat-coversition{
+    width: 100px;
+    display: inline-block;
+    border-right: 1px #dedede solid;
+    height: 100%;
+    vertical-align: top;
+    background: #f9f9f9;
+    border-radius: 5px 0px 0px 5px;
+}
+.coversition-list{
+    padding: 3px 0px 10px 0px;
+    height: 355px;
+    overflow: auto;
+    margin-top:40px;
+}
+.each-coversition{
+    font-size: 14px;
+    padding: 10px 7px 10px 10px;
+    border-bottom: 1px #dedede solid;
+    cursor: pointer;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.coversition-active{
+    background: #e0e0e0;
+}
+</style>

src/views/newMap/jointTrainingNew/chatMemberList.vue

@@ -0,0 +1,154 @@
+<template>
+  <div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'">
+    <div class="chat-member-title">成员列表</div>
+    <div class="chat-member-list">
+      <div
+        v-for="member in memberList"
+        :key="member.id"
+        :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'"
+        @click="createConversition(member)"
+      >{{ member.memberName }}</div>
+    </div>
+  </div>
+</template>
+<script>
+import {getSimulationMembersNew, getSimulationConversationIdNew} from '@/api/chat';
+import ConstConfig from '@/scripts/ConstConfig';
+import Cookies from 'js-cookie';
+export default {
+    name: 'ChatMemberList',
+    props: {
+        group: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            showMembers:false,
+            memberList:[]
+        };
+    },
+    mounted() {
+        this.getSimulationMembers();
+    },
+    methods:{
+        createConversition(member) {
+            if (member.userId != this.$store.state.user.id && member.online) {
+                getSimulationConversationIdNew({ memberId: member.id }, this.group).then(resp => {
+                    if (resp.data) {
+                        const data = resp.data;
+                        this.$emit('addCoversition', {data:data, headerTitle:member.memberName});
+                        this.showMembers = false;
+                    }
+                });
+            }
+        },
+        getSimulationMembers() {
+            getSimulationMembersNew(this.$route.query.group).then(resp => {
+                let lastData = JSON.stringify(resp.data);
+                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.map(member=>{
+                    const deviceName = member.deviceName ? '-' + member.deviceName : '';
+                    const memberName = member.name ? '-' + member.name : '';
+                    member.memberName = member.role + deviceName + memberName;
+                    return member;
+                });
+                this.memberList = lastData;
+            });
+        },
+        doShow() {
+            if (this.showMembers) {
+                this.showMembers = false;
+            } else {
+                this.showMembers = true;
+                this.getSimulationMembers();
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.memberAnimate{
+  transform: translateX(97%);
+}
+.chat-box-members{
+    position: absolute;
+    width: 140px;
+    right: 0;
+    height: 100%;
+    background: #fff;
+    border-right: 1px #dedede solid;
+    border-radius: 0px 5px 5px 0px;
+    z-index: 2;
+    transition: transform 1s;
+    padding: 12px 2px 10px 16px;
+    font-size: 14px;
+}
+.chat-member-title{
+}
+.chat-member-list{
+    margin-top: 13px;
+    font-size: 12px;
+    margin-left: 2px;
+    height: 350px;
+    overflow-y: auto;
+}
+.each-chat-member{
+    margin-bottom: 10px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+}
+.each-chat-member-outline{
+    color: #ccc;
+}
+
+// 谷歌、safari、qq浏览器、360浏览器滚动条样式
+// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+.chat-member-list::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    // height: 110px;
+    background-color: #FFFFFF;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+.chat-member-list::-webkit-scrollbar-track {
+    // box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background-color: #FFFFFF;;
+}
+/*定义滑块 内阴影+圆角*/
+.chat-member-list::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    // box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #cacaca;
+}
+/*滑块效果*/
+.chat-member-list::-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/jointTrainingNew/menuDemon.vue

@@ -102,7 +102,6 @@ export default {
             }
         },
         '$store.state.socket.roleList': function (val) {
-            debugger;
             if (val && val.length) {
                 this.$nextTick(() => {
                     this.addrolesList(val);
@@ -259,7 +258,6 @@ export default {
             });
         },
         back() {
-            debugger;
             this.$store.dispatch('training/over').then(() => {
                 this.backLoading = true;
                 putJointTrainingSimulationUserNew(this.group).then(() => {

src/views/scriptManage/home.vue

@@ -126,7 +126,7 @@ export default {
         },
         drawUp(index, row) {
             const drawWay = this.$route.query.drawWay;
-            if (drawWay == 'true') {
+            if (drawWay && JSON.parse(drawWay)) {
                 scriptRecordNotifyNew(row.id).then(resp => {
                     const query = { mapId: row.mapId, group: resp.data, scriptId: row.id, lang:row.lang, lineCode:this.$route.query.lineCode, drawWay:drawWay};
                     this.$router.push({ path: `${UrlConfig.scriptDisplayNew}/script`, query });
@@ -264,7 +264,8 @@ export default {
             }).catch(() => { });
         },
         previewScript(index, row) {
-            if (this.$route.query.drawWay == 'true') {
+            const drawWay = this.$route.query.drawWay;
+            if (drawWay && JSON.parse(drawWay)) {
                 scriptDraftRecordNotifyNew(row.id).then(resp => {
                     const query = { mapId: row.mapId, group: resp.data, scriptId: row.id, try:0, lineCode:this.$route.query.lineCode, drawWay:true};
                     this.$router.push({ path: `${UrlConfig.design.displayNew}/demon`, query });