From 056b9ffe9eaf56e9a198866bacfc441da6b1773e Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Tue, 28 Apr 2020 14:04:22 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E5=90=88=E6=BC=94=E7=BB=83=E4=BB=BF?=
 =?UTF-8?q?=E7=9C=9F=20=E8=81=8A=E5=A4=A9=20=E5=88=87=E6=8D=A2=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=20=E8=81=8A=E5=A4=A9=E5=B8=83=E5=B1=80=20=E8=AF=AD?=
 =?UTF-8?q?=E9=9F=B3=E6=92=AD=E6=94=BE=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  2 +-
 .env.native                                   |  2 +-
 .env.production                               |  2 +-
 .env.staging                                  |  2 +-
 src/store/modules/socket.js                   |  9 +++-
 src/views/newMap/jointTrainingNew/chatBox.vue |  6 ++-
 .../newMap/jointTrainingNew/chatContent.vue   | 43 ++++++++++++++-----
 7 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/.env.development b/.env.development
index 8527b4390..535c20d5e 100644
--- a/.env.development
+++ b/.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.
diff --git a/.env.native b/.env.native
index 5aeec66b3..d1152d456 100644
--- a/.env.native
+++ b/.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'
diff --git a/.env.production b/.env.production
index ec96837f2..684381f92 100644
--- a/.env.production
+++ b/.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'
diff --git a/.env.staging b/.env.staging
index 74355abe2..605ec30ae 100644
--- a/.env.staging
+++ b/.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'
diff --git a/src/store/modules/socket.js b/src/store/modules/socket.js
index 27836680d..81fb2b9d4 100644
--- a/src/store/modules/socket.js
+++ b/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: {
diff --git a/src/views/newMap/jointTrainingNew/chatBox.vue b/src/views/newMap/jointTrainingNew/chatBox.vue
index 0a696d2df..f9862fce8 100644
--- a/src/views/newMap/jointTrainingNew/chatBox.vue
+++ b/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);
         }
     }
 };
diff --git a/src/views/newMap/jointTrainingNew/chatContent.vue b/src/views/newMap/jointTrainingNew/chatContent.vue
index e54a1982f..66e9c2600 100644
--- a/src/views/newMap/jointTrainingNew/chatContent.vue
+++ b/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>
-            <audio :src="baseUrl+chatContent.src" style="display:none" />
+            <span class="el-icon-video-play playicon" />
+            <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() {
-        console.log('VUE_VOICE_API' + process.env.VUE_VOICE_API);
-        this.baseUrl = process.env.VUE_VOICE_API;
+    created() {
+        this.coversition = this.currentCoversition;
+        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%;