From 4ffda4f614ba64173fda8f5867c494e6e35cdacd Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Tue, 16 Aug 2022 17:17:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AE=9E=E8=AE=AD=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=92=8C=E8=AF=AD=E9=9F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/chat.js                               |   16 +
 src/router/index.js                           |    6 +
 src/scripts/cmdPlugin/CommandEnum.js          |    4 +
 src/store/modules/socket.js                   |    3 +
 src/views/designPlatform/demonList.vue        |   24 +
 src/views/designPlatform/trainingDesign.vue   |  168 +++
 src/views/newMap/chatView/chatContent.vue     |   25 +-
 src/views/newMap/chatView/voiceChatBox.vue    | 1221 +++++++++++++++++
 src/views/newMap/displayNew/demonChat.vue     |    9 +
 .../component/covertOperation.js              |   23 +
 .../scriptPreview/scriptButtonGroup.vue       |    2 +-
 .../scriptPreview/scriptPreviewChat.vue       |    9 +
 .../scriptDisplay/scriptRecord/index.vue      |   12 +-
 .../newMap/jointTrainingNew/menuDemon.vue     |    5 +-
 src/views/scriptManage/getAction.vue          |    2 +-
 15 files changed, 1517 insertions(+), 12 deletions(-)
 create mode 100644 src/views/designPlatform/trainingDesign.vue
 create mode 100644 src/views/newMap/chatView/voiceChatBox.vue

diff --git a/src/api/chat.js b/src/api/chat.js
index 81cedad06..7eaa66243 100644
--- a/src/api/chat.js
+++ b/src/api/chat.js
@@ -61,3 +61,19 @@ export function sendConversationText (group, id, data) {
         data
     });
 }
+/** 发送会话语音(新接口) */
+export function sendChatAudioBase64 (group, data) {
+    return request({
+        url: `/simulation/${group}/operate/Conversation_Chat_Audio_Base64`,
+        method: 'post',
+        data
+    });
+}
+/** 发送会话文字(新接口) */
+export function sendChatText (group, data) {
+    return request({
+        url: `/simulation/${group}/operate/Conversation_Chat_Text`,
+        method: 'post',
+        data
+    });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 6762baaca..b5087c19a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -117,6 +117,7 @@ const DesignPlatform = () => import('@/views/designPlatform/index');
 const MapPreviewNew = () => import('@/views/designPlatform/mapPreviewNew');
 const BigScreen = () => import('@/views/designPlatform/bigScreen');
 const BigSplitScreen = () => import('@/views/designPlatform/bigSplitScreen');
+const TrainingDesign = () => import('@/views/designPlatform/trainingDesign');
 const TestRunplan = () => import('@/views/designPlatform/testRunplan');
 
 const Package = () => import('@/views/package/index');
@@ -478,6 +479,11 @@ export const publicAsyncRoute = [
         component: BigSplitScreen,
         hidden: true
     },
+    { // 实训设计
+        path: '/trainingDesign',
+        component: TrainingDesign,
+        hidden: true
+    },
     {
         path: '/jointTrainingNew',
         component: JointTrainingNew,
diff --git a/src/scripts/cmdPlugin/CommandEnum.js b/src/scripts/cmdPlugin/CommandEnum.js
index e30f6b585..9616eaa65 100644
--- a/src/scripts/cmdPlugin/CommandEnum.js
+++ b/src/scripts/cmdPlugin/CommandEnum.js
@@ -472,5 +472,9 @@ export default {
         CMD_RAIL_FILL_IN_REGISTER: {value: 'RAIL_FILL_IN_REGISTER', label: '填写行车簿册'},
         CMD_RAIL_QUERY_REGISTER: {value: 'RAIL_QUERY_REGISTER', label: '查询行车簿册'},
         CMD_RAIL_GIVE_TICKET_TO: {value: 'RAIL_GIVE_TICKET_TO', label: '给出票据'}
+    },
+    Conversation: {
+        CMD_Conversation_Chat_Text: {value: 'Conversation_Chat_Text', label: '发送文本消息'},
+        CMD_Conversation_Chat_Audio_Base64: {value: 'Conversation_Chat_Audio_Base64', label: '发送语音消息'}
     }
 };
diff --git a/src/store/modules/socket.js b/src/store/modules/socket.js
index 1f73bf0fe..02a83329c 100644
--- a/src/store/modules/socket.js
+++ b/src/store/modules/socket.js
@@ -96,6 +96,9 @@ function handle(state, data) {
     case 'Simulation_Conversation': // 仿真-用户交互消息（聊天/命令）
         handleSimulationInfo(state, msg);
         break;
+    case 'Simulation_Conversation_Operation': // 仿真-用户交互消息（聊天/命令）-新
+        handleSimulationInfo(state, {id: msg.id, message: msg, messageType: 'MESSAGE'});
+        break;
     case 'Simulation_PlayBack_Conversation': // 回放-用户交互消息
         handleSimulationInfo(state, msg);
         break;
diff --git a/src/views/designPlatform/demonList.vue b/src/views/designPlatform/demonList.vue
index c63aa55d2..db764c81c 100644
--- a/src/views/designPlatform/demonList.vue
+++ b/src/views/designPlatform/demonList.vue
@@ -27,6 +27,7 @@ import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/ut
 import FilterCity from '@/views/components/filterCity';
 import localStore from 'storejs';
 import { ProjectCode, GetMapListByProjectList } from '@/scripts/ProjectConfig';
+import { createSimulationNew } from '@/api/simulation';
 
 export default {
     name: 'PublicMapList',
@@ -133,6 +134,19 @@ export default {
                 this.$router.push({ path: `/bigSplitScreen/${obj.mapId}` });
                 break;
             }
+            case 'trainingDesign': {
+                const data = { mapId: obj.mapId, prdType: '01' };
+                createSimulationNew(data).then(resp => {
+                    if (this.loadingProjectList.includes(this.project)) {
+                        this.$store.dispatch('app/transitionAnimations');
+                    }
+                    const query = { ...data, group: resp.data, scriptId: obj.id, lineCode:obj.lineCode};
+                    this.$router.push({ path: `/trainingDesign`, query });
+                }).catch(error => {
+                    this.$messageBox(`${this.$t('scriptRecord.createSimulationFail')}: ${error.message}`);
+                });
+                break;
+            }
             }
         },
         async refresh(filterSelect) {
@@ -206,6 +220,16 @@ export default {
                         cityCode: elem.cityCode
                     });
                     this.isAdministrator() ? elem.children.push({id: '8', name: this.$t('designPlatform.lesson3dDesign'), type: 'lesson3dDesign'}) : '';
+                    elem.children.push(
+                        {
+                            id: '9',
+                            name: '实训设计',
+                            type: 'trainingDesign',
+                            mapId: elem.id,
+                            lineCode: elem.lineCode,
+                            cityCode: elem.cityCode
+                        }
+                    );
 
                 });
 
diff --git a/src/views/designPlatform/trainingDesign.vue b/src/views/designPlatform/trainingDesign.vue
new file mode 100644
index 000000000..4f7904ca8
--- /dev/null
+++ b/src/views/designPlatform/trainingDesign.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="train">
+    <div v-show="maskOpen" class="trainMask" />
+    <jlmap-visual ref="jlmapVisual" />
+    <voice-chat-box v-if="$route.query.lineCode == '16'" ref="chatbox" :group="group" :user-role="userRole" />
+    <chat-box v-else ref="chatbox" :group="group" :user-role="userRole" />
+    <div class="trainBack">
+      <el-button-group>
+        <el-button type="primary" @click="back">返回</el-button>
+      </el-button-group>
+    </div>
+  </div>
+</template>
+<script>
+import JlmapVisual from '@/views/newMap/jlmapNew/index';
+import {loadMapDataById } from '@/utils/loaddata';
+import { clearSimulation } from '@/api/simulation';
+import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
+import { getToken } from '@/utils/auth';
+import chatBox from '@/views/newMap/chatView/chatBox.vue';
+import VoiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
+
+export default {
+    name: 'TrainingDesign',
+    components: {
+        JlmapVisual,
+        chatBox,
+        VoiceChatBox
+    },
+    props: {
+        widthLeft: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            maskOpen: false
+        };
+    },
+    computed: {
+        mapId() {
+            return this.$route.query.mapId;
+        },
+        width() {
+            return this.$store.state.app.width;
+        },
+        height() {
+            return this.$store.state.app.height;
+        },
+        group() {
+            return this.$route.query.group;
+        },
+        userRole() {
+            let role = 'AUDIENCE';
+            switch (this.$store.state.training.prdType) {
+            case '02': { role = 'DISPATCHER'; break; }
+            case '01': { role = 'STATION_SUPERVISOR'; break; }
+            case '04': { role = 'DRIVER'; break; }
+            case '05': { role = 'DEPOT_DISPATCHER'; break; }
+            default: { role = 'AUDIENCE'; break; }
+            }
+            return role;
+        }
+    },
+    watch: {
+        $route() {
+            this.$nextTick(() => {
+                this.initLoadData();
+            });
+        },
+        '$store.state.app.windowSizeCount': function() { // 窗口缩放
+            this.setWindowSize();
+        },
+        '$store.state.map.mapViewLoadedCount':function() {
+            this.$store.dispatch('map/setTrainWindowShow', false);
+            if (this.$route.query.group && !this.$route.path.includes('displayIscs')) {
+                this.subscribe();
+            }
+        },
+        '$store.state.socket.equipmentStatus': function (val) {
+            if (val.length && this.$route.query.group) {
+                this.statusMessage(val);
+            }
+        },
+        '$store.state.socket.simulationOver':function(val) {
+            this.backOut();
+        }
+    },
+    async beforeDestroy() {
+        await this.$store.dispatch('map/mapClear');
+        this.$store.dispatch('training/setPrdType', '');
+    },
+    mounted() {
+        this.$store.dispatch('training/setPrdType', '01');
+        this.setWindowSize();
+        this.initLoadData();
+    },
+    methods: {
+        initLoadData() { // 加载地图数据
+            if (this.$route.query.group) {
+                loadMapDataById(this.mapId, 'simulation');
+            } else {
+                this.$store.dispatch('training/changeMode', { mode: null });
+                loadMapDataById(this.mapId, 'preview');
+            }
+        },
+        async statusMessage(list) {
+            await this.$store.dispatch('training/updateMapState', list);
+            await this.$store.dispatch('socket/setEquipmentStatus');
+        },
+        setWindowSize() {
+            const width = this.width;
+            const height = this.height;
+            this.$store.dispatch('config/resize', { width, height });
+        },
+        async back() {
+            if (this.$route.query.group) {
+                await clearSimulation(this.$route.query.group);
+                this.clearSubscribe();
+            }
+            this.$store.dispatch('training/over').then(() => {
+                history.go(-1);
+            });
+        },
+        backOut() {
+            if (this.$route.query.projectDevice) {
+                this.$store.dispatch('LogOut').then(() => {
+                    location.reload();
+                });
+            }
+        },
+        async subscribe() {
+            this.clearSubscribe();
+            const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
+            creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
+            // await this.$store.dispatch('training/setHasSubscribed');
+        },
+        clearSubscribe() {
+            clearSubscribe(`${displayTopic}\/${this.$route.query.group}`);
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .train {
+        width: 100%;
+		overflow: hidden;
+        position: relative;
+    }
+	.trainMask{
+        opacity: 1;
+        background: #000;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 9;
+    }
+	.trainBack {
+        position: absolute;
+        float: right;
+        right: 15px;
+        bottom: 15px;
+		z-index: 19;
+    }
+</style>
diff --git a/src/views/newMap/chatView/chatContent.vue b/src/views/newMap/chatView/chatContent.vue
index 68bf4fc04..2b5d953de 100644
--- a/src/views/newMap/chatView/chatContent.vue
+++ b/src/views/newMap/chatView/chatContent.vue
@@ -7,7 +7,12 @@
             <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 class="userBubble" @click="playAudio(baseUrl+chatContent.src, chatContent)">
+          <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"> -->
@@ -20,9 +25,9 @@
               <!-- <span class="messageText">{{ chatContent.content }}</span> -->
             </div>
           </div>
-          <audio id="audioPlay" style="display:none" />
         </div>
       </div>
+      <audio id="audioPlay" style="display:none" />
     </div>
   </div>
 </template>
@@ -220,28 +225,29 @@ export default {
     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;
-    // max-width: 200px;
     // padding: 10px;
     padding: 5px 10px 6px 10px;
-    width: 140px;
+    min-width: 140px;
     background: #ccc;
     border-radius: 5px;
     cursor: pointer;
     display:inline-block;
-	height: 30px;
-    overflow: hidden;
+	// height: 30px;
+    // overflow: hidden;
 }
 .playicon{
     font-size: 20px;
@@ -307,9 +313,12 @@ export default {
 .userMessage{
 	position: relative;
 }
-.messageText{line-height: 20px;}
+.messageText{
+	line-height: 20px;
+	word-break: break-all;
+}
 .chatContentInClass{
-        display: inline-block;
+    display: inline-block;
     width: 100%;
 }
 
diff --git a/src/views/newMap/chatView/voiceChatBox.vue b/src/views/newMap/chatView/voiceChatBox.vue
new file mode 100644
index 000000000..09276a89c
--- /dev/null
+++ b/src/views/newMap/chatView/voiceChatBox.vue
@@ -0,0 +1,1221 @@
+<template>
+  <div class="voiceChatBox" :class="{'active': drawer}" :style="{'bottom':bottom+'px'}">
+    <div class="menuTrainListBtn" @click="clickBtn">
+      <div>
+        <div id="voiceName" />
+        <div class="teleNameIn">语音</div>
+      </div>
+    </div>
+    <div class="chat-box-main">
+      <div class="chat-box-header">
+        <div class="chat-setting" @click="handleSetting()">
+          <i class="el-icon-s-tools" />
+        </div>
+      </div>
+      <div class="chat-box-content1">
+        <chat-content
+          ref="chatContent"
+          :project="project"
+          :is-answering="IsAnswering"
+          :conversition-id="conversitionId"
+          :conversition-member-list="conversitionMemberList"
+          :message-list="messageList"
+          :my-member-id="myMemberId"
+          :simulation-users="simulationUsers"
+          :conversition-state-map="conversitionStateMap"
+          :common-conversation="commonConversation"
+          :user-role="userRole"
+          @changeMessageList="changeMessageList"
+        />
+      </div>
+      <div class="chat-box-footer">
+        <el-input v-model="textContent" size="small" placeholder="请输入会话文字，点击T发送" style="flex: 1; margin-left: 5px;" :rows="1" />
+        <el-button size="mini" class="chat-box-footer-create" :disabled="contentSend" @click="sendText">T</el-button>
+        <el-button v-if="!$route.query.record" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" :disabled="audioPlay" size="mini" type="primary" @click="startRecording()">
+          <el-progress id="voice_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
+          <i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
+          <span class="iconfont icon-yuyin">&#xe62b;</span>
+        </el-button>
+      </div>
+      <div v-if="maskShow&&drawer" class="mask" />
+    </div>
+    <audio id="teleRing" :src="teleRing" preload loop />
+    <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
+  </div>
+</template>
+<script>
+import teleRing from '@/assets/teleRing.mp3';
+import ChatSetting from './chatSetting';
+import ChatContent from './chatContent';
+import RecordRTC from 'recordrtc';
+import {sendChatAudioBase64, overSimulationConversition, getAllConversition, acceptConversitionInvite, sendChatText} from '@/api/chat';
+import { getSessionStorage } from '@/utils/auth';
+import { getSimulationMemberList} from '@/api/simulation';
+import { getUserListCommon } from '@/api/rtSimulation';
+export default {
+    name: 'NewChatBox',
+    components:{
+        ChatSetting,
+        ChatContent
+    },
+    props: {
+        group: {
+            type: String,
+            required: true
+        },
+        userRole: {
+            type: String,
+            required: true
+        },
+        isReplaceBg: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            drawer: false,
+            bottom:15,
+            recordSending:false,
+            commonConversation: false,
+            seconds:0,
+            inter:null,
+            connectSuccess:false,
+            teleRing:teleRing,
+            recorders: null,
+            microphone:null,
+            createLoading:false,
+            form:{
+                language:'zh',
+                sex:'1'
+            },
+            treeData: [],
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            // queryMember: '',
+            activeTrains: [],
+            firstClick: true,
+            memberData: {},
+            simulationUsers: {},
+            userString: '',
+            memberIdList: [],
+            memberObject: '',
+            quitLoading: false,
+            conversitionMemberList: [],
+            commonMemberList: [],
+            messageList: [], // 消息列表
+            commonMessageList: [],
+            conversitionStateMap:{},
+            myMemberId: '',
+            audioPlay:false,
+            textContent: ''
+        };
+    },
+    computed:{
+        contentSend() {
+            return !this.textContent;
+        },
+        project() {
+            return getSessionStorage('project');
+        },
+        IsAnswering() {
+            return !(this.$route.path.includes('refereeJsxtDisplay'));
+        },
+        maskShow() {
+            return this.isReplaceBg;
+        },
+        userId() {
+            return this.$store.state.user.id;
+        },
+        conversitionId() {
+            return (this.conversitionStateMap[this.myMemberId] || {conversitionId:''}).conversitionId;
+        },
+        connect() {
+            return (this.conversitionStateMap[this.myMemberId] || {connect:false}).connect;
+        },
+        privateMemberList() {
+            return (this.conversitionStateMap[this.myMemberId] || {privateMemberList: []}).privateMemberList;
+        },
+        privateMessageList() {
+            if (this.conversitionStateMap[this.myMemberId] && this.conversitionStateMap[this.myMemberId].connect) {
+                return (this.conversitionStateMap[this.myMemberId] || {privateMessageList: []}).privateMessageList;
+            } else {
+                return [];
+            }
+        }
+    },
+    watch:{
+        connect(val) {
+            if (val) {
+                this.conversitionMemberList = this.privateMemberList;
+                this.messageList = [...this.privateMessageList];
+            }
+        },
+        // userRole(val) {
+        //     if (val == 'AUDIENCE') {
+        //         this.goCommonConversation();
+        //         this.myMemberId = '';
+        //     } else {
+        //         this.myMemberId = (this.simulationUsers[this.userId] || {}).memberId;
+        //         this.cancelCommonConversation();
+        //     }
+        // },
+        '$store.state.map.mapViewLoadedCount': function(val) {
+            const object = document.querySelector('.menuButton');
+            if (object) {
+                const objectBottom = object.offsetHeight || 0;
+                this.bottom = objectBottom + 15;
+            } else {
+                this.bottom = 15;
+            }
+            this.isAudienceInitData();
+            getSimulationMemberList(this.group).then(resp => {
+                this.$store.dispatch('training/setMemberList', {memberList:resp.data, userId:this.$store.state.user.id});
+            }).catch(() => {
+                this.$messageBox('获取仿真成员列表失败！');
+            });
+            getUserListCommon(this.$route.query.group).then(res => {
+                this.$store.dispatch('training/setSimulationUserList', res.data);
+            }).catch(() => {
+                this.$messageBox('获取所有仿真用户失败！');
+            });
+        },
+        '$store.state.training.prdType': function(val) {
+            this.$nextTick(() => {
+                const object = document.querySelector('.menuButton');
+                if (object) {
+                    const objectBottom = object.offsetHeight || 0;
+                    this.bottom = objectBottom + 15;
+                } else {
+                    this.bottom = 15;
+                }
+            });
+        },
+        '$store.state.socket.createConversition':function(val) {
+            val.memberList.forEach(member => {
+                // if (val.creatorId == member.memberId) {
+                this.$set(this.conversitionStateMap, member.memberId, {conversitionId: val.id, privateMemberList: val.memberList, privateMessageList: [], connect:member.connect});
+                // }
+            });
+        },
+        '$store.state.socket.inviteSimulationConversition':function(val) {
+            this.treeData.forEach(item => {
+                if (item.children) {
+                    const memberList = Object.values(item.children);
+                    memberList.forEach(data =>{
+                        data.disabled = true;
+                    });
+                    if (item.children[val.creatorId]) {
+                        item.children[val.creatorId].isInviting = true;
+                        // const offsetTop = document.getElementById('proper_content_box' + val.creatorId).parentNode.offsetTop;
+                        // document.querySelector('.chat-box-content').scrollTop = (offsetTop - 40) > 0 ? (offsetTop - 80) : 0;
+                        if (!document.querySelector('#voiceName').classList.contains('flash')) {
+                            document.querySelector('#voiceName').classList.add('flash');
+                            document.querySelector('#teleRing').play();
+                        }
+                    }
+
+                }
+            });
+        },
+        '$store.state.map.activeTrainListChange': function (val) { // 按计划行车的列车列表更新标识
+            this.activeTrains = [];
+            const activeTrainList = this.$store.state.map.activeTrainList;
+            if (activeTrainList && activeTrainList.length) {
+                activeTrainList.forEach(groupNumber => {
+                    this.activeTrains.push(groupNumber);
+                });
+            }
+            this.filterNode();
+            if (activeTrainList.length <= 0) {
+                this.resetCoversition();
+            }
+        },
+        '$store.state.training.simulationUserList': {
+            handler(val, o) {
+                this.simulationUsers = {};
+                if (val && val.length) {
+                    val.forEach(user => {
+                        if (!user.userId) {
+                            user.userId = user.id;
+                        }
+                        if (!user.nickName) {
+                            user.nickName = user.name;
+                        }
+                        this.simulationUsers[user.userId] = user;
+                    });
+                    this.myMemberId = this.simulationUsers[this.userId].memberId;
+                }
+            },
+            deep: true
+        },
+        '$store.state.socket.exitConversition': function (val) {
+            for (const memberId in this.conversitionStateMap) {
+                if (memberId == val.memberId) {
+                    this.conversitionStateMap[memberId].connect = false;
+                    this.conversitionStateMap[memberId].conversitionId = '';
+                    this.conversitionStateMap[memberId].privateMemberList = [];
+                    this.conversitionStateMap[memberId].privateMessageList = [];
+                } else if ( this.conversitionStateMap[memberId].conversitionId == val.id ) {
+                    const mList = [];
+                    this.conversitionStateMap[memberId].privateMemberList.forEach(member => {
+                        if (member.memberId != val.memberId) {
+                            mList.push(member);
+                        }
+                    });
+                    this.conversitionStateMap[memberId].privateMemberList = mList;
+                }
+            }
+            // 有人退出会话更新人员列表
+            this.treeData.forEach(item => {
+                if (item.children && item.children[val.memberId]) {
+                    const member = item.children[val.memberId];
+                    member.active = false;
+                    member.isConnect = false;
+                    member.disabled = false;
+                }
+            });
+        },
+        '$store.state.training.memberList': function (val) {
+            if (val && val.length) {
+                this.memberData = this.$store.state.training.memberData;
+                const dispatcherList = {};
+                const electricDispatcherList = {};
+                const depotDispatcherList = {};
+                const stationSupervisorList = {};
+                const driverList = {};
+                const maintainerList = {};
+                const parentDepartmentList = {};
+                const parkingLotSignalBuilding = {};
+                const stationAssistant = {};
+                const stationMaster = {};
+                const stationSignaler = {};
+                const stationPassenger = {};
+                const stationSwitchMan = {};
+                const stationFacilitator = {};
+                const stationWorker = {};
+                const deviceManager = {};
+                const trainMaster = {};
+                val.forEach(item => {
+                    const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
+                    this.memberData[item.id]['active'] = false;
+                    this.memberData[item.id]['loading'] = false;
+                    this.memberData[item.id]['isInviting'] = false;
+                    switch (item.type) {
+                    case 'DISPATCHER':
+                        this.memberData[item.id].label = '行调' + (item.name || '');
+                        this.memberData[item.id].labelName = '行调' + (item.name || '');
+                        dispatcherList[item.id] = this.memberData[item.id];
+                        break;
+                    case 'ELECTRIC_DISPATCHER':
+                        this.memberData[item.id].label = '电力调度' + (item.name || '');
+                        this.memberData[item.id].labelName = '电力调度' + (item.name || '');
+                        electricDispatcherList[item.id] = this.memberData[item.id];
+                        break;
+                    case 'DEPOT_DISPATCHER':
+                        this.memberData[item.id].label = '车辆段信号楼';
+                        this.memberData[item.id].labelName = '车辆段信号楼' + (item.name || '');
+                        depotDispatcherList[item.id] = this.memberData[item.id];
+                        break;
+                    case 'STATION_SUPERVISOR':
+                        this.memberData[item.id].label = device.name;
+                        this.memberData[item.id].labelName = '值班员-' + device.name;
+                        // this.memberData[item.id].label = '值班员-' + device.name;
+                        stationSupervisorList[item.id] = this.memberData[item.id];
+                        break;
+                    case 'DRIVER':
+                        this.memberData[item.id]['show'] = false;
+                        this.memberData[item.id].label = item.deviceCode;
+                        this.memberData[item.id].labelName = '司机-' + item.deviceCode;
+                        driverList[item.id] = this.memberData[item.id];
+                        break;
+                    case 'MAINTAINER':
+                        this.memberData[item.id].label = '通号' + (item.name || '');
+                        this.memberData[item.id].labelName = '通号' + (item.name || '');
+                        maintainerList[item.id] = this.memberData[item.id];
+                        break;
+                    case 'PARENT_DEPARTMENT':
+                        this.memberData[item.id].label = '上级部门' + (item.name || '');
+                        this.memberData[item.id].labelName = '上级部门' + (item.name || '');
+                        parentDepartmentList[item.id] = this.memberData[item.id];
+                        break;
+                    case 'PARKING_LOT_SIGNAL_BUILDING':
+                        this.memberData[item.id].label = '停车场信号楼' + (item.name || '');
+                        this.memberData[item.id].labelName = '停车场信号楼' + (item.name || '');
+                        parkingLotSignalBuilding[item.id] = this.memberData[item.id];
+                        break;
+                    case 'STATION_ASSISTANT':
+                        this.memberData[item.id].label = '车站助理-' + device.name + (item.name || '');
+                        this.memberData[item.id].labelName = '车站助理-' + device.name + ( item.name || '');
+                        stationAssistant[item.id] = this.memberData[item.id];
+                        break;
+                    case 'STATION_MASTER':
+                        this.memberData[item.id].label = '车站站长-' + device.name + (item.name || '');
+                        this.memberData[item.id].labelName = '车站站长-' + device.name + (item.name || '');
+                        stationMaster[item.id] = this.memberData[item.id];
+                        break;
+                    case 'STATION_SIGNALER':
+                        this.memberData[item.id].label = '车站信号员-' + device.name + (item.name || '');
+                        this.memberData[item.id].labelName = '车站信号员-' + device.name + (item.name || '');
+                        stationSignaler[item.id] = this.memberData[item.id];
+                        break;
+                    case 'STATION_PASSENGER':
+                        this.memberData[item.id].label = '车站客运员-' + device.name + (item.name || '');
+                        this.memberData[item.id].labelName = '车站客运员-' + device.name + (item.name || '');
+                        stationPassenger[item.id] = this.memberData[item.id];
+                        break;
+                    case 'STATION_SWITCH_MAN':
+                        this.memberData[item.id].label = '车站扳道员-' + device.name + (item.name || '');
+                        this.memberData[item.id].labelName = '车站扳道员-' + device.name + (item.name || '');
+                        stationSwitchMan[item.id] = this.memberData[item.id];
+                        break;
+                    case 'STATION_FACILITATOR':
+                        this.memberData[item.id].label = '车站引导员-' + device.name + (item.name || '');
+                        this.memberData[item.id].labelName = '车站引导员-' + device.name + (item.name || '');
+                        stationFacilitator[item.id] = this.memberData[item.id];
+                        break;
+                    case 'STATION_WORKER':
+                        this.memberData[item.id].label = '车站工务工-' + device.name + (item.name || '');
+                        this.memberData[item.id].labelName = '车站工务工-' + device.name + (item.name || '');
+                        stationWorker[item.id] = this.memberData[item.id];
+                        break;
+                    case 'DEVICE_MANAGER':
+                        this.memberData[item.id].label = '设备管理员-' + device.name + (item.name || '');
+                        this.memberData[item.id].labelName = '设备管理员-' + device.name + (item.name || '');
+                        deviceManager[item.id] = this.memberData[item.id];
+                        break;
+                    case 'TRAIN_MASTER':
+                        // + device.name
+                        // + device.name
+                        this.memberData[item.id].label = '车务段段长-' + (item.name || '');
+                        this.memberData[item.id].labelName = '车务段段长-' + (item.name || '');
+                        trainMaster[item.id] = this.memberData[item.id];
+                        break;
+                    }
+                });
+                // { label: '全部集中站', value: 'allConcentrateStation', active: false, sign: 'DEVICE_STATION' },
+                if (this.$store.state.training.prdType == '02') {
+                    stationSupervisorList['ALL_STATION'] = { label: '所有车站', value: 'allStation', active: false, sign: 'ALL_STATION' };
+                }
+                driverList['ALL_TRAIN'] = { label: '所有司机', value: 'allTrain', show: false, active: false, sign: 'ALL_TRAIN' };
+                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
+                }, {
+                    label: '车辆段信号楼',
+                    id: 'depotDispatcher',
+                    type: 'role',
+                    children: depotDispatcherList
+                }, {
+                    label: '上级部门',
+                    id: 'parentDepartment',
+                    type: 'role',
+                    children: parentDepartmentList
+                }, {
+
+                    label: '电力调度',
+                    id: 'electricDispatcher',
+                    type: 'role',
+                    children: electricDispatcherList
+                }, {
+                    label: '停车场信号楼',
+                    id: 'parkingLotSignalBuilding',
+                    type: 'role',
+                    children: parkingLotSignalBuilding
+                },
+                {
+                    label: '车站助理',
+                    id: 'stationAssistant',
+                    type: 'role',
+                    children: stationAssistant
+                },
+                {
+                    label: '车站站长',
+                    id: 'stationMaster',
+                    type: 'role',
+                    children: stationMaster
+                },
+                {
+                    label: '车站信号员',
+                    id: 'stationSignaler',
+                    type: 'role',
+                    children: stationSignaler
+                },
+                {
+                    label: '车站客运员',
+                    id: 'stationPassenger',
+                    type: 'role',
+                    children: stationPassenger
+                },
+                {
+                    label: '车站扳道员',
+                    id: 'stationSwitchMan',
+                    type: 'role',
+                    children: stationSwitchMan
+                },
+                {
+                    label: '车站引导员',
+                    id: 'stationFacilitator',
+                    type: 'role',
+                    children: stationFacilitator
+                },
+                {
+                    label: '车站工务工',
+                    id: 'stationWorker',
+                    type: 'role',
+                    children: stationWorker
+                },
+                {
+                    label: '设备管理员',
+                    id: 'deviceManager',
+                    type: 'role',
+                    children: deviceManager
+                },
+                {
+                    label: '车务段段长',
+                    id: 'trainMaster',
+                    type: 'role',
+                    children: trainMaster
+                }
+                ];
+                this.initCommonMemberList();
+                this.filterNode();
+                // this.$nextTick(() => {
+                //     if (this.$refs.tree) {
+                //         this.$refs.tree.filter(this.queryMember);
+                //     }
+                // });
+            }
+        },
+        '$store.state.socket.simulationReset': function () { // 仿真重置
+            this.conversitionStateMap = {};
+            const voiceName = document.querySelector('#voiceName');
+            if (voiceName) {
+                voiceName.classList.remove('flash');
+            }
+            document.querySelector('#teleRing').pause();
+        },
+        '$store.state.socket.acceptConversionInvite':function(val) {
+            this.conversitionStateMap[val.memberId].connect = true;
+            this.conversitionStateMap[val.memberId].conversitionId = val.id;
+            if (this.conversitionId == val.id) {
+                this.treeData.forEach(data => {
+                    if (data.children && val.memberId != this.myMemberId) {
+                        const member = data.children[val.memberId];
+                        if (member) {
+                            member.isConnect = true;
+                            member.active ? member.loading = false : member.active = true;
+                        }
+                    }
+                });
+            }
+            if (this.myMemberId == val.memberId) {
+                this.connectSuccess = true;
+                document.querySelector('#voiceName').classList.remove('flash');
+                document.querySelector('#teleRing').pause();
+                this.treeData.forEach(data => {
+                    if (data.children) {
+                        const member = data.children[val.creatorId];
+                        if (member) {
+                            member.active = true;
+                            member.isConnect = true;
+                            member.isInviting = false;
+                        }
+                    }
+                });
+            }
+        },
+        '$store.state.scriptRecord.audioPlay':function(val) {
+            this.audioPlay = val;
+        },
+        '$store.state.scriptRecord.updateRoleId':function(val) {
+            if (this.conversitionStateMap[val]) {
+                this.treeData.forEach(item => {
+                    if (item.children) {
+                        const memberList = Object.values(item.children);
+                        memberList.forEach(data =>{
+                            const member = this.conversitionStateMap[val];
+                            // && privateMem.connect;
+                            const memberInfo = member.privateMemberList.find(privateMem=>{ return privateMem.memberId == data.id; });
+                            // member.connect
+                            if (member && data.id != val && memberInfo) {
+                                data.isConnect = true;
+                                data.active = true;
+                                this.connectSuccess = true;
+                            } else {
+                                data.active = false;
+                                data.isConnect = false;
+                                this.connectSuccess = false;
+                            }
+                            data.loading = false;
+                            data.disabled = false;
+                            data.isInviting = false;
+                        });
+                    }
+                });
+                if (!this.connect) {
+                    this.memberIdList = [];
+                    this.memberObject = '';
+                }
+            } else {
+                this.memberIdList = [];
+                this.memberObject = '';
+                this.connectSuccess = false;
+                this.treeData.forEach(item => {
+                    if (item.children) {
+                        const memberList = Object.values(item.children);
+                        memberList.forEach(data =>{
+                            data.active = false;
+                            data.isConnect = false;
+                            data.loading = false;
+                            data.disabled = false;
+                            data.isInviting = false;
+                        });
+                    }
+                });
+            }
+
+        }
+    },
+    beforeDestroy() {
+        this.$store.dispatch('scriptRecord/updateAudioPlay', false);
+    },
+    mounted() {
+        this.firstClick = true;
+        this.$nextTick(() => {
+            this.filterNode();
+        });
+    },
+    methods:{
+        getUserRole() {
+            if (this.userRole === 'AUDIENCE') {
+                this.goCommonConversation();
+                this.myMemberId = '';
+            } else {
+                this.myMemberId = (this.simulationUsers[this.userId] || {}).memberId;
+                this.cancelCommonConversation();
+            }
+        },
+        clickBtn() {
+            this.drawer = !this.drawer;
+        },
+        acceptUser() {
+            acceptConversitionInvite(this.group, this.conversitionId).then(res=>{
+                this.connectSuccess = true;
+                document.querySelector('#voiceName').classList.remove('flash');
+                document.querySelector('#teleRing').pause();
+                this.treeData.forEach(data => {
+                    if (data.children) {
+                        const member = data.children[res.data.creatorId];
+                        if (member) {
+                            member.active = true;
+                            member.isConnect = true;
+                            member.isInviting = false;
+                        }
+                    }
+                });
+            });
+
+        },
+        setSetting(data) {
+            this.form = data;
+        },
+        coverName(inviteUser) {
+            const member = this.$store.state.training.memberData[inviteUser.creatorId];
+            if (member.userId) {
+                const user = this.simulationUsers[member.userId];
+                return member.label + '(' + user.nickName + ')';
+            } else {
+                return member.label;
+            }
+        },
+        // 语音录制开始
+        startRecording() {
+            this.audioPlay = true;
+            const that = this;
+            if (!this.recordSending) {
+                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.audioPlay = false;
+                            that.inter = setInterval(() => {
+                                if (that.seconds < 60) {
+                                    that.seconds++;
+                                } else {
+                                    clearInterval(that.inter);
+                                    that.stopRecording();
+                                }
+                            }, 1000);
+                        }, function (error) {
+                            that.audioPlay = false;
+                            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;
+                            }
+                        }
+                    );
+                }
+            } else {
+                this.stopRecording(); // 发送语音
+            }
+        },
+        cancleRecording() {
+            if (this.microphone) {
+                clearInterval(this.inter);
+                this.seconds = 0;
+                this.microphone.stop();
+                this.microphone = null;
+                this.recordSending = false;
+                this.recorders = null;
+            }
+        },
+        // 停止录制 发送语音
+        stopRecording() {
+            this.audioPlay = true;
+            clearInterval(this.inter);
+            this.seconds = 0;
+            const that = this;
+            this.recorders.stopRecording(function(blobURL) {
+                that.recorders.getDataURL(function(BaseURL) {
+                    // const blob = that.recorders.getBlob();
+                    // const fd = new FormData();
+                    // fd.append('file', blob);
+                    sendChatAudioBase64(that.group, {fileBase64Str: BaseURL})
+                        .then((data) => {
+                            that.textContent = '';
+                            that.audioPlay = false;
+                        })
+                        .catch(error => {
+                            console.log(error);
+                            that.$message.error('语音发送失败: ' + error.message);
+                            that.audioPlay = false;
+                        });
+                    if (that.microphone) {
+                        that.microphone.stop();
+                        that.microphone = null;
+                        that.recordSending = false;
+                        that.recorders = null;
+                    }
+                });
+            });
+        },
+        sendText() {
+            sendChatText(this.group, {content: this.textContent}).then(resp => {
+                this.textContent = '';
+            }).catch((error) => {
+                this.$message.error('发送会话文字失败：' + error.message);
+            });
+        },
+        handleSetting() {
+            this.$refs.chatSetting.doShow();
+        },
+        // 过滤全部列车 显示正在运行的列车
+        filterNode() {
+            if (this.treeData[2]) {
+                const trainList = Object.values(this.treeData[2]['children']);
+                trainList.forEach(train => {
+                    train.show = false;
+                    if (this.activeTrains.includes(train.deviceCode)) {
+                        train.show = true;
+                    }
+                });
+                const member = this.treeData[2]['children']['ALL_TRAIN'];
+                if (this.activeTrains.length > 0) {
+                    member.show = true;
+                } else {
+                    this.memberObject = '';
+                    const trainList = Object.values(this.treeData[2].children);
+                    trainList.forEach(train=>{
+                        if (train.active) {
+                            train.active = false;
+                            const memberId = train.id;
+                            this.memberIdList.splice(this.memberIdList.indexOf(memberId), 1);
+                        }
+                    });
+                }
+            }
+        },
+        // 退出会话
+        quitConversition() {
+            this.quitLoading = true;
+            this.userString = '';
+            overSimulationConversition(this.group, this.conversitionId).then(resp => {
+                if (this.recordSending) {
+                    this.cancleRecording();
+                }
+                this.connectSuccess = false;
+                this.conversitionMemberList = [];
+                this.messageList = [];
+                this.quitLoading = false;
+                this.conversitionStateMap[this.myMemberId].connect = false;
+                // this.$nextTick(() => {
+                //     this.$refs.tree && this.$refs.tree.filter(this.queryMember);
+                // });
+                this.treeData.forEach(item => {
+                    if (item.children) {
+                        const memberList = Object.values(item.children);
+                        memberList.forEach(data =>{
+                            data.active = false;
+                            data.isConnect = false;
+                            data.loading = false;
+                            data.disabled = false;
+                        });
+                    }
+                });
+            }).catch(() => {
+                this.$message.error('退出会话失败！');
+                this.quitLoading = false;
+            });
+        },
+        sortByMessageTime(message1, message2) {
+            const time1 = new Date(message1.time).valueOf();
+            const time2 = new Date(message2.time).valueOf();
+            return time1 - time2;
+        },
+        // 获取历史消息
+        isAudienceInitData() {
+            getAllConversition(this.group).then(resp => {
+                const messages = [];
+                if (resp.data && resp.data.length) {
+                    resp.data.forEach(conversation => {
+                        (conversation.messageList || []).forEach(message => {
+                            const member = this.memberData[message.memberId];
+                            message.src = `${message.audioPath}`;
+                            message.members = conversation.memberList;
+                            if (member) {
+                                message.self = this.$store.state.userId == member.userId;
+                            }
+                            messages.push(message);
+                        });
+                        const tempMessageList = [];
+                        !conversation.over && conversation.messageList.forEach(message => {
+                            message.src = `${message.audioPath}`;
+                            tempMessageList.push(message);
+                        });
+                        !conversation.over && conversation.memberList.forEach(member => {
+                            const param = {
+                                conversitionId: conversation.id,
+                                privateMemberList: conversation.memberList,
+                                privateMessageList: tempMessageList
+                            };
+                            this.$set(this.conversitionStateMap, member.memberId, param);
+                        });
+                    });
+                    this.getUserRole();
+                }
+                this.commonMessageList = messages.sort(this.sortByMessageTime);
+                this.initCommonMemberList();
+            });
+        },
+        // 初始化人员列表
+        initCommonMemberList() {
+            const temDispatcherList = [];
+            const temStationSupervisorList = [];
+            const temMaintainerList = [];
+            const temDriverList = [];
+            const temDepotDispatcherList = [];
+            const temStationAssistList = [];
+            const temStationMasterList = [];
+            const temStationSignalerList = [];
+            const temStationPassengerList = [];
+            const temStationSwitchManList = [];
+            const temStationFacilitatorList = [];
+            const temStationWorkerList = [];
+            const temDeviceManagerList = [];
+            const temTrainMasterList = [];
+            this.$store.state.training.memberList.forEach(item =>{
+                switch (item.type) {
+                case 'DISPATCHER':
+                    temDispatcherList.push({memberId: item.id, connect:true });
+                    break;
+                case 'STATION_SUPERVISOR':
+                    temStationSupervisorList.push({memberId: item.id, connect:true });
+                    break;
+                case 'MAINTAINER':
+                    temMaintainerList.push({memberId: item.id, connect:true });
+                    break;
+                case 'DRIVER':
+                    temDriverList.push({memberId: item.id, connect:true });
+                    break;
+                case 'DEPOT_DISPATCHER':
+                    temDepotDispatcherList.push({memberId: item.id, connect:true });
+                    break;
+                case 'STATION_ASSISTANT':
+                    temStationAssistList.push({memberId: item.id, connect:true });
+                    break;
+                case 'STATION_MASTER':
+                    temStationMasterList.push({memberId: item.id, connect:true });
+                    break;
+                case 'STATION_SIGNALER':
+                    temStationSignalerList.push({memberId: item.id, connect:true });
+                    break;
+                case 'STATION_PASSENGER':
+                    temStationPassengerList.push({memberId: item.id, connect:true });
+                    break;
+                case 'STATION_SWITCH_MAN':
+                    temStationSwitchManList.push({memberId: item.id, connect:true });
+                    break;
+                case 'STATION_FACILITATOR':
+                    temStationFacilitatorList.push({memberId: item.id, connect:true });
+                    break;
+                case 'STATION_WORKER':
+                    temStationWorkerList.push({memberId: item.id, connect:true });
+                    break;
+                case 'DEVICE_MANAGER':
+                    temDeviceManagerList.push({memberId: item.id, connect:true });
+                    break;
+                case 'TRAIN_MASTER':
+                    temTrainMasterList.push({memberId: item.id, connect:true });
+                    break;
+                }
+            });
+            this.commonMemberList = [...temDispatcherList, ...temStationSupervisorList, ...temMaintainerList, ...temDriverList, ...temDepotDispatcherList,
+                ...temStationAssistList, ...temStationMasterList, ...temStationSignalerList, ...temStationPassengerList, ...temStationSwitchManList,
+                ...temStationFacilitatorList, ...temStationWorkerList, ...temDeviceManagerList, ...temTrainMasterList];
+            if (this.userRole == 'AUDIENCE' || this.commonConversation) {
+                this.conversitionMemberList = [];
+                this.messageList = [...this.commonMessageList];
+                this.conversitionMemberList = this.commonMemberList;
+            }
+        },
+        changeMessageList(data) {
+            this.commonMessageList.push(data.message);
+            if (this.conversitionStateMap[data.message.memberId]) {
+                (this.conversitionStateMap[data.message.memberId].privateMemberList || []).forEach(member => {
+                    this.conversitionStateMap[member.memberId] && this.conversitionStateMap[member.memberId].privateMessageList.push(data.message);
+                });
+            }
+            // if (this.commonConversation) {
+            //     this.messageList.push(data.message);
+            // } else if (!this.commonConversation && this.conversitionId === data.id && this.conversitionStateMap[this.myMemberId] && this.conversitionStateMap[this.myMemberId].connect) {
+            //     this.messageList.push(data.message);
+            // }
+            this.messageList.push(data.message);
+        },
+        goCommonConversation() {
+            !this.commonConversation && this.$refs.chatContent && this.$refs.chatContent.conversationChange();
+            this.commonConversation = true;
+            this.conversitionMemberList = this.commonMemberList;
+            this.messageList = [...this.commonMessageList];
+        },
+        cancelCommonConversation() {
+            this.commonConversation && this.$refs.chatContent && this.$refs.chatContent.conversationChange();
+            this.commonConversation = false;
+            this.conversitionMemberList = this.privateMemberList;
+            this.messageList = [...this.privateMessageList];
+            this.$nextTick(() => {
+                // this.$refs.tree && this.$refs.tree.filter(this.queryMember);
+                this.filterNode();
+            });
+        },
+        clearAllData() {
+            this.recordSending = false;
+            this.inter = null;
+            this.recorders = null;
+            this.microphone = null;
+            this.treeData = [];
+            this.conversitionMemberList = [];
+            this.messageList = [];
+        },
+        // 剧本重置清空公有会话
+        resetCoversition() {
+            this.commonMessageList = [];
+            this.conversitionStateMap = {};
+            this.messageList = [];
+            this.connectSuccess = false;
+            this.$store.dispatch('scriptRecord/updateAudioPlay', false);
+            this.treeData.forEach(item => {
+                if (item.children) {
+                    const memberList = Object.values(item.children);
+                    memberList.forEach(data =>{
+                        data.active = false;
+                        data.isConnect = false;
+                        data.loading = false;
+                        data.disabled = false;
+                        data.isInviting = false;
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.voiceChatBox {
+	position: absolute;
+    left: 0;
+	top: calc((100% - 600px) / 2);
+    height: 600px;
+	width: 503px;
+	transform: translateX(-503px);
+	transition: all 0.4s;
+	z-index: 35;
+	&.active{
+		transform: translateX(0px);
+	}
+}
+.menuTrainListBtn {
+    background: #fff;
+    text-align: center;
+    border-radius: 0px 6px 6px 0px;
+    position: absolute;
+    top: 40%;
+    z-index: 2;
+	transform: translateX(502px);
+    cursor: pointer;
+	z-index: 9;
+	display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    padding: 7px 4px;
+	.el-icon-more{
+		font-size: 20px;
+		margin-top: 9px;
+		transform-origin: 50% 50%;
+		transform: rotate(90deg);
+		margin-left:0px;
+	}
+}
+.chat-box-header{
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px #dedede solid;
+	.chat-box-header-title{
+		font-size: 15px;
+		margin-left: 15px;
+		display: inline-block;
+		margin-top: 5px;
+		width: 70%;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+}
+.chat-box-content1{
+	height: 500px;
+	position: relative;
+	border-top: 1px #9a9a9a solid;
+	margin-top: 8px;
+}
+
+.chat-box-footer{
+    display: flex;
+	align-items: center;
+    width: 100%;
+	height: 55px;
+	border-top: 1px solid #afafaf;
+}
+.chat-setting{
+    float: right;
+    line-height: 40px;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 16px;
+}
+.chat-box-main{
+    position: absolute;
+    width: 100%;
+    left: 0;
+    height: 100%;
+    top: 0;
+    border-right: 1px #dedede solid;
+    z-index: 4;
+    background: #fff;
+    border-radius: 5px;
+    left: 0;
+    // font-size:0;
+}
+.chat-box-footer-create{
+    font-size: 16px;
+    color: #fff;
+	margin-left: 5px;
+	margin-right: 5px;
+    cursor: pointer;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background: green;
+	border: none;
+	display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.chat-box-footer-send{
+	position: relative;
+    background: #F2F2F2;
+	cursor: pointer;
+	.icon-yuyin{
+		color: #333;
+		font-size: 24px;
+		margin: 0;
+	}
+	&.active{
+		.icon-yuyin{
+			color: green;
+		}
+	}
+	.close_icon{
+		position: absolute;
+		top: -15px;
+		left: 11px;
+		font-size: 16px;
+		color: #333;
+		font-weight: 600;
+	}
+}
+#voice_progress_bar{
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 50%;
+}
+.chat-box-footer-send.disbled{
+    cursor: no-drop;
+}
+.connectSuccess{
+    position:absolute;
+    width:100%;
+    height:100%;
+    left:0;
+    top:0;
+    z-index:2;
+}
+.proper_content_box_text{
+    position: absolute;
+}
+.flash{
+    opacity: 1;
+    animation: isInviting infinite 1s;
+    -moz-animation: isInviting infinite 1s;	/* Firefox */
+    -webkit-animation: isInviting infinite 1s;	/* Safari 和 Chrome */
+    -o-animation: isInviting infinite 1s;	/* Opera */
+}
+
+.mask {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	opacity: 0.7;
+	z-index: 2000;
+	&::before{
+		content: '';
+		position: absolute;
+		top:0;
+		right:0;
+		bottom:0;
+		left:0;
+		background: #aaa;
+		filter: blur(20px);
+	}
+}
+
+#voiceName{
+    background: #6BBE16;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    border-radius: 0px 5px 5px 0px;
+    z-index: -1;
+    opacity: 0;
+}
+</style>
+<style lang="scss">
+.isInviting::before{
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    background:#6BBE16;
+    animation: isInviting infinite 1s;
+    -moz-animation: isInviting infinite 1s;	/* Firefox */
+    -webkit-animation: isInviting infinite 1s;	/* Safari 和 Chrome */
+    -o-animation: isInviting infinite 1s;	/* Opera */
+}
+@keyframes isInviting
+{
+    0% {opacity:1;}
+    50%{opacity:0;}
+    100% {opacity: 1;}
+}
+@-webkit-keyframes isInviting /* Safari 和 Chrome */
+{
+    0% {opacity:1;}
+    50%{opacity:0;}
+    100% {opacity: 1;}
+}
+.teleNameIn{
+    width: 16px;
+    white-space: pre-wrap;
+    font-size:16px;
+}
+</style>
diff --git a/src/views/newMap/displayNew/demonChat.vue b/src/views/newMap/displayNew/demonChat.vue
index 42bb23329..665be16a3 100644
--- a/src/views/newMap/displayNew/demonChat.vue
+++ b/src/views/newMap/displayNew/demonChat.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
+    <voice-chat-box
+      v-if="$route.query.lineCode == '16'"
+      ref="chatbox"
+      :group="group"
+      :user-role="userRole"
+    />
     <chat-box
+      v-else
       ref="chatbox"
       :group="group"
       :user-role="userRole"
@@ -10,12 +17,14 @@
 </template>
 <script>
 import ChatBox from '../chatView/chatBox.vue';
+import voiceChatBox from '../chatView/voiceChatBox.vue';
 import ScriptTip from '@/views/newMap/displayNew/scriptDisplay/component/scriptTip';
 
 export default {
     name:'DemonChat',
     components:{
         ChatBox,
+        voiceChatBox,
         ScriptTip
     },
     props: {
diff --git a/src/views/newMap/displayNew/scriptDisplay/component/covertOperation.js b/src/views/newMap/displayNew/scriptDisplay/component/covertOperation.js
index 867736b41..53d1e6904 100644
--- a/src/views/newMap/displayNew/scriptDisplay/component/covertOperation.js
+++ b/src/views/newMap/displayNew/scriptDisplay/component/covertOperation.js
@@ -828,6 +828,29 @@ export const operateEnum = {
             // ticketId
             // memberId
         }
+    },
+    Conversation: {
+        type:'语音',
+        Conversation_Chat_Text: {
+            isList:true,
+            name:'发送文本消息',
+            params:[
+                {
+                    code:'content',
+                    name:'文本内容'
+                }
+            ]
+        },
+        Conversation_Chat_Audio_Base64: {
+            name:'发送语音消息',
+            isList:true,
+            params:[
+                {
+                    code:'fileBase64Str',
+                    name:'语音内容'
+                }
+            ]
+        }
     }
     //
 };
diff --git a/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptButtonGroup.vue b/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptButtonGroup.vue
index ee6c39ddb..4cb4f824d 100644
--- a/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptButtonGroup.vue
+++ b/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptButtonGroup.vue
@@ -568,7 +568,7 @@ export default {
     .trainingButton{
         position: absolute;
         left: 5px;
-		z-index: 1;
+		z-index: 2;
     }
     .display-draft{
         position: absolute;
diff --git a/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptPreviewChat.vue b/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptPreviewChat.vue
index 369d76bfe..027bfd7bf 100644
--- a/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptPreviewChat.vue
+++ b/src/views/newMap/displayNew/scriptDisplay/scriptPreview/scriptPreviewChat.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
+    <voice-chat-box
+      v-if="$route.query.lineCode == '16'"
+      ref="chatbox"
+      :group="group"
+      :user-role="userRole"
+    />
     <chat-box
+      v-else
       ref="chatbox"
       :group="group"
       :user-role="userRole"
@@ -10,11 +17,13 @@
 </template>
 <script>
 import ChatBox from '@/views/newMap/chatView/chatBox.vue';
+import voiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
 import ScriptTip from '@/views/newMap/displayNew/scriptDisplay/component/scriptTip';
 export default {
     name:'ScriptPreviewChat',
     components:{
         ChatBox,
+        voiceChatBox,
         ScriptTip
     },
     props: {
diff --git a/src/views/newMap/displayNew/scriptDisplay/scriptRecord/index.vue b/src/views/newMap/displayNew/scriptDisplay/scriptRecord/index.vue
index df5ce36fa..dc0ddb731 100644
--- a/src/views/newMap/displayNew/scriptDisplay/scriptRecord/index.vue
+++ b/src/views/newMap/displayNew/scriptDisplay/scriptRecord/index.vue
@@ -43,7 +43,15 @@
       @resetChat="resetChat"
       @setReplace="setReplace"
     />
+    <voice-chat-box
+      v-if="$route.query.lineCode == '16'"
+      ref="chatbox"
+      :group="group"
+      :user-role="userRole"
+      :is-replace-bg="isReplaceBg"
+    />
     <chat-box
+      v-else
       ref="chatbox"
       :group="group"
       :user-role="userRole"
@@ -63,6 +71,7 @@ import ModifyTime from '@/views/newMap/displayNew/demon/modifyTime';
 import { Notification } from 'element-ui';
 import { getSimulationMemberList} from '@/api/simulation';
 import ChatBox from '@/views/newMap/chatView/chatBox.vue';
+import voiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
 
 export default {
     name: 'MenuScript',
@@ -72,7 +81,8 @@ export default {
         MenuSchema,
         DemonMenu,
         TipScriptRecordNew,
-        ChatBox
+        ChatBox,
+        voiceChatBox
     },
     props: {
         offsetBottom: {
diff --git a/src/views/newMap/jointTrainingNew/menuDemon.vue b/src/views/newMap/jointTrainingNew/menuDemon.vue
index 099f095e7..3fcf919a4 100644
--- a/src/views/newMap/jointTrainingNew/menuDemon.vue
+++ b/src/views/newMap/jointTrainingNew/menuDemon.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
     <status-icon v-if="statusIconShow" ref="statusIcon" />
-    <chat-box v-if="!noChatBox" :group="group" :user-role="userRole" />
+    <voice-chat-box v-if="!noChatBox && $route.query.lineCode == '16'" :group="group" :user-role="userRole" />
+    <chat-box v-if="!noChatBox && $route.query.lineCode != '16'" :group="group" :user-role="userRole" />
     <!-- 地图没有报错-->
     <!-- 地图错误判断 -->
     <div v-if="!dataError&&hasOneButton" class="display_top_draft" :style="{top: statusIconShow ? offset + 60 + 'px':offset+'px'}">
@@ -56,6 +57,7 @@
 import QrCode from '@/components/QrCode';
 import StatusIcon from '@/views/components/StatusIcon/statusIcon';
 import ChatBox from '../chatView/chatBox';
+import voiceChatBox from '../chatView/voiceChatBox';
 import Equipment from '@/views/newMap/displayNew/demon/equipment';
 import SetTime from '@/views/newMap/displayNew/demon/setTime';
 import ModifyTime from '@/views/newMap/displayNew/demon/modifyTime';
@@ -74,6 +76,7 @@ export default {
     name: 'MenuDemonJoint',
     components: {
         ChatBox,
+        voiceChatBox,
         QrCode,
         SetTime,
         ModifyTime,
diff --git a/src/views/scriptManage/getAction.vue b/src/views/scriptManage/getAction.vue
index bb4d71574..48f47193e 100644
--- a/src/views/scriptManage/getAction.vue
+++ b/src/views/scriptManage/getAction.vue
@@ -178,7 +178,7 @@ export default {
                         });
                     });
                     if (operateName) {
-                        const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗', ControlConvertMenu:'控制模式', Driver:'司机', Train:'列车', CTC:'车务终端', RAIL:'票据/簿册'};
+                        const deviceTypeList = {Section:'区段', Switch:'道岔', Signal:'信号机', Stand:'站台', Station:'车站', TrainWindow:'车次窗', ControlConvertMenu:'控制模式', Driver:'司机', Train:'列车', CTC:'车务终端', RAIL:'票据/簿册', Conversation: '语音'};
                         const operateTypeName = deviceTypeList[operateType];
                         this.actionInfoList.push({id: element.id, isOperation: true, memberName: memberName, command: operateTypeName + '(' + operateName.label + ')', row: element, visible: false, condition: element.condition, isDelete:true, deleteLoading:false });
                     }