综合演练仿真 聊天 切换聊天 聊天布局 语音播放代码调整

.env.development

@@ -6,7 +6,7 @@ NODE_ENV = 'development'
 # VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
 # VUE_APP_BASE_API = 'http://192.168.3.4:9000'
 VUE_APP_BASE_API = 'http://192.168.3.6:9000'
-VUE_VOICE_API = 'https://test.joylink.club'
+VUE_APP_VOICE_API = 'https://test.joylink.club'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

.env.native

@@ -4,4 +4,4 @@ VUE_APP_PRO = 'local'
 
 # base api
 VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
-VUE_VOICE_API = 'https://joylink.club'
+VUE_APP_VOICE_API = 'https://joylink.club'

.env.production

@@ -3,4 +3,4 @@ NODE_ENV = 'production'
 
 # base api
 VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
-VUE_VOICE_API = 'https://joylink.club'
+VUE_APP_VOICE_API = 'https://joylink.club'

.env.staging

@@ -3,4 +3,4 @@ NODE_ENV = 'test'
 
 # base api
 VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'
-VUE_VOICE_API = 'https://test.joylink.club'
+VUE_APP_VOICE_API = 'https://test.joylink.club'

src/store/modules/socket.js

@@ -154,6 +154,13 @@ function handleSimulationInfo(state, data) {
         date: +new Date(`${myDate1} ${chatTime}`)
     };
     state.simulationText = params;
+    if (state.coversitionList[data.conversationId]) {
+        state.coversitionList[data.conversationId].push(params);
+    } else {
+        state.coversitionList[data.conversationId] = [];
+        state.coversitionList[data.conversationId].push(params);
+    }
+
     // switch (data.member.role) {
     // case '01':
     //     role = '管理员';
@@ -235,6 +242,7 @@ const socket = {
         simulationStart: '',	// 仿真-开始消息
         simulationReset: '', // 仿真-异常消息
         simulationText: {}, // 仿真-用户交互消息（聊天/命令）
+        coversitionList:{}, // 历史仿真-用户消息列表
 
         message: {}, // 仿真聊天
         msgQueue: [],	// 命令请求列表
@@ -259,7 +267,6 @@ const socket = {
         beLogoutCount: 0, // 被登出
         runPlanReloadCount: 0 // 仿真运行图变更
     },
-
     getters: {
     },
     mutations: {

src/views/newMap/jointTrainingNew/chatBox.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-quickMenuDrag class="chatBox">
+  <!-- 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>
@@ -33,7 +34,7 @@
             </div>
           </div>
           <div class="chat-box-content">
-            <chat-content :current-coversition="currentCoversition" />
+            <chat-content ref="chatContent" :current-coversition="currentCoversition" />
             <div v-if="recordSending" class="chat_record_tip">
               <div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
               <div class="record_icon" />
@@ -285,6 +286,7 @@ export default {
         changeCoversition(coversition) {
             this.headerTitle = coversition.name;
             this.currentCoversition = {id:coversition.id, group:coversition.group};
+            this.$refs.chatContent.reloadData(this.currentCoversition);
         }
     }
 };

src/views/newMap/jointTrainingNew/chatContent.vue

@@ -6,10 +6,11 @@
           <div v-if="chatContent.group" class="userName">{{ chatContent.memberName }}</div>
           <div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
         </div>
-        <div class="userBubble">
+        <div class="userBubble" @click="playAudio('audio'+index)">
           <div class="userMessage">
-            <div class="messageText">{{ chatContent.message }}</div>
+            <span class="el-icon-video-play playicon" />
-            <audio :src="baseUrl+chatContent.src" style="display:none" />
+            <span class="messageText">{{ chatContent.message }}</span>
+            <audio :id="'audio'+index" :src="baseUrl+chatContent.src" style="display:none" />
           </div>
         </div>
       </div>
@@ -27,23 +28,39 @@ export default {
     data() {
         return {
             chatContentList:[],
-            baseUrl:''
+            coversition:{},
+            baseUrl:process.env.VUE_APP_VOICE_API
         };
     },
     watch:{
         '$store.state.socket.simulationText':function (val, old) { //  仿真聊天
             if (this.currentCoversition.id == val.conversationId) {
-                this.chatContentList.push(this.$store.state.socket.simulationText);
+                const simulationText = this.$store.state.socket.simulationText;
+                this.chatContentList.push(simulationText);
             }
         }
     },
-    mounted() {
+    created() {
-        console.log('VUE_VOICE_API' + process.env.VUE_VOICE_API);
+        this.coversition = this.currentCoversition;
-        this.baseUrl = process.env.VUE_VOICE_API;
+        this.inintData();
     },
     methods:{
+        inintData() {
+            const coversitionListAll = Object.assign({}, this.$store.state.socket.coversitionList);
+            const coversitionList = coversitionListAll[this.coversition.id] || [];
+            // console.log('inintData---coversitionList' + JSON.stringify(this.$store.state.socket.coversitionList[this.coversition.id]));
+            this.chatContentList = coversitionList;
+        },
         formatTime(time) {
             return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time;
+        },
+        playAudio(id) {
+            document.querySelector('#' + id).play();
+        },
+        reloadData(currentCoversition) {
+            this.chatContentList = [];
+            this.coversition = currentCoversition;
+            this.inintData();
         }
     }
 };
@@ -55,6 +72,7 @@ export default {
     display: inline-block;
     overflow: auto;
     padding-bottom: 20px;
+    cursor:auto;
 }
 .leftUser{
     float: left;
@@ -72,15 +90,20 @@ export default {
 .userName{}
 .userChatTime{font-size: 12px;}
 .userBubble{
-    max-width: 300px;
+    max-width: 200px;
     font-size: 12px;
     padding: 10px;
     background: #ccc;
     border-radius: 5px;
+    cursor: pointer;
+}
+.playicon{
+    font-size: 20px;
+    vertical-align: top;
 }
 .textRight{text-align: right;}
 .userMessage{}
-.messageText{}
+.messageText{line-height: 20px;}
 .chatContentInClass{
         display: inline-block;
     width: 100%;