综合演练仿真 聊天 创建对话，以及对话切换

src/views/newMap/jointTrainingNew/chatBox.vue

@@ -4,12 +4,24 @@
       <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'">{{ member.role+'-'+member.name }}</div>
+          <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.role+'-'+member.name }}</div>
         </div>
       </div>
       <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?'coversition-active each-coversition':'each-coversition'"
+              @click="changeCoversition(coversition)"
+            >{{ coversition.name }}</div>
+          </div>
+        </div>
+        <div class="chat-window">
           <div class="chat-box-header">
-          <div class="chat-box-header-title">所有人</div>
+            <div class="chat-box-header-title">{{ headerTitle }}</div>
             <div class="minimality" @click="handleMinimality('min')">
               <i class="el-icon-remove" />
             </div>
@@ -35,13 +47,14 @@
           </div>
         </div>
       </div>
+    </div>
     <div v-show="minimize" class="reminder-drag minimize-box">
       <div class="chat-title">聊天窗口</div>
       <div class="minimality" @click="handleMinimality('max')">
         <i class="el-icon-circle-plus" />
       </div>
     </div>
-    <chat-setting ref="chatSetting" />
+    <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
   </div>
 </template>
 <script>
@@ -49,7 +62,7 @@ import { getToken } from '@/utils/auth';
 import { creatSubscribe, clearSubscribe, assistant} from '@/utils/stomp';
 import ChatSetting from './chatSetting';
 import RecordRTC from 'recordrtc';
-import {getSimulationMembersNew, getSimulationConversationListNew} from '@/api/chat';
+import {getSimulationMembersNew, getSimulationConversationListNew, getSimulationConversationIdNew} from '@/api/chat';
 import ConstConfig from '@/scripts/ConstConfig';
 import Cookies from 'js-cookie';
 export default {
@@ -69,10 +82,17 @@ export default {
             showMembers:false,
             recordSending:false,
             memberList:[],
+            coversitionList:[],
             seconds:0,
             inter:null,
             recorders: null,
-            microphone:null
+            microphone:null,
+            form:{
+                language:'zh',
+                sex:'1'
+            },
+            currentCoversition:'',
+            headerTitle:'所有人'
         };
     },
     mounted() {
@@ -84,8 +104,11 @@ export default {
     methods:{
         async initPage() {
             await this.subscribe();
+            this.getSimulationMembers();
             getSimulationConversationListNew(this.$route.query.group).then(resp=>{
-                debugger;
+                if (resp.data) {
+                    this.coversitionList = resp.data;
+                }
             });
         },
         handleMinimality(data) {
@@ -96,6 +119,9 @@ export default {
                 this.minimize = false;
             }
         },
+        setSetting(data) {
+            this.form = data;
+        },
         // 语音录制开始
         startRecording() {
             const that = this;
@@ -195,8 +221,11 @@ export default {
                 this.showMembers = false;
             } else {
                 this.showMembers = true;
+                this.getSimulationMembers();
+            }
+        },
+        getSimulationMembers() {
             getSimulationMembersNew(this.$route.query.group).then(resp => {
-                    // this.memberList = netdata.data;
                 let lastData = JSON.stringify(resp.data);
                 const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
                 roleTypeList.forEach(function(element) {
@@ -210,8 +239,6 @@ export default {
                 lastData = JSON.parse(lastData);
                 this.memberList = lastData;
             });
-
-            }
         },
         async subscribe() {
             if (!this.$store.state.socket.assistantIsSubscribe) {
@@ -224,13 +251,33 @@ export default {
         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({id:data.id, name:data.name});
+                        }
+                        this.currentCoversition = data.id;
+                        this.headerTitle = data.name;
+
+                    }
+                });
+            }
+        },
+        changeCoversition(coversition) {
+            this.currentCoversition = coversition.id;
+            this.headerTitle = coversition.name;
         }
     }
 };
 </script>
 <style lang="scss" scoped>
 .chatBox{
-  width: 400px;
+  width: 503px;
   height: 400px;
   position: absolute;
   padding-left:5px;
@@ -260,9 +307,38 @@ 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;
+    width: 100%;
+}
+.chat-window{
+    display: inline-block;
+    width: 400px;
 }
 .chat-setting{
     float: right;
@@ -293,6 +369,7 @@ export default {
     line-height: 40px;
     margin-right: 10px;
     cursor: pointer;
+    font-size:16px;
 }
 .chat-box-main{
     position: absolute;
@@ -305,6 +382,7 @@ export default {
     background: #fff;
     border-radius: 5px;
     left:5px;
+    font-size:0;
 }
 .chat-member-list{
     margin-top: 13px;
@@ -323,6 +401,12 @@ export default {
 }
 .each-chat-member-outline{
     color: #ccc;
+}
+.chat-coversition{
+
+}
+.coversition-list{
+
 }
 .chat-box-members{
     position: absolute;

src/views/newMap/jointTrainingNew/chatSetting.vue

@@ -30,8 +30,8 @@
           inactive-color="#ff4949"
           active-icon-class="el-icon-male"
           inactive-icon-class="el-icon-female"
-          active-value="man"
+          active-value="1"
-          inactive-value="woman"
+          inactive-value="0"
           @change="changeSex()"
         />
       </div>
@@ -41,14 +41,16 @@
 <script>
 export default {
     name: 'ChatSetting',
+    props:{
+        form:{
+            type:Object,
+            required:true
+        }
+    },
     data() {
         return {
             dialogVisible: false,
-            loading:false,
+            loading:false
-            form:{
-                language:'zh',
-                sex:'man'
-            }
         };
     },
     methods:{
@@ -59,10 +61,10 @@ export default {
             this.dialogVisible = false;
         },
         changeLanguage() {
-
+            this.$emit('setSetting', this.form);
         },
         changeSex() {
-
+            this.$emit('setSetting', this.form);
         }
     }
 };