综合演练仿真添加聊天窗口调整(未完成)

src/api/chat.js

@@ -293,3 +293,20 @@ export function getSimulationMembersNew(group) {
         method: 'get'
     });
 }
+
+// 获取仿真会话列表（新版地图）
+export function getSimulationConversationListNew(group) {
+    return request({
+        url: `/simulation/${group}/conversations`,
+        method: 'get'
+    });
+}
+
+// 获取/创建仿真会话（新版地图）
+export function getSimulationConversationIdNew(params, group) {
+    return request({
+        url: `/simulation/${group}/wx/conversation`,
+        method: 'get',
+        params: params
+    });
+}

src/views/newMap/jointTrainingNew/chatBox.vue

@@ -4,7 +4,7 @@
       <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="each-chat-member">{{ 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'">{{ member.role+'-'+member.name }}</div>
         </div>
       </div>
       <div class="chat-box-main">
@@ -16,6 +16,9 @@
           <div class="showMembers" @click="handleMembers()">
             <i class="el-icon-user-solid" />
           </div>
+          <div class="chat-setting" @click="handleSetting()">
+            <i class="el-icon-s-tools" />
+          </div>
         </div>
         <div class="chat-box-content">
           <div v-if="recordSending" class="chat_record_tip">
@@ -38,15 +41,20 @@
         <i class="el-icon-circle-plus" />
       </div>
     </div>
+    <chat-setting ref="chatSetting" />
   </div>
 </template>
 <script>
+import ChatSetting from './chatSetting';
 import RecordRTC from 'recordrtc';
-import {getSimulationMembersNew} from '@/api/chat';
+import {getSimulationMembersNew, getSimulationConversationListNew, getSimulationConversationIdNew} from '@/api/chat';
 import ConstConfig from '@/scripts/ConstConfig';
 import Cookies from 'js-cookie';
 export default {
     name: 'ChatBox',
+    components:{
+        ChatSetting
+    },
     data() {
         return {
             minimize:false,
@@ -59,7 +67,18 @@ export default {
             microphone:null
         };
     },
+    mounted() {
+        this.initPage();
+    },
     methods:{
+        initPage() {
+            // getSimulationConversationIdNew({ memberId:'' }, this.$route.query.group).then(response=>{
+            //     debugger;
+            // });
+            getSimulationConversationListNew(this.$route.query.group).then(resp=>{
+                debugger;
+            });
+        },
         handleMinimality(data) {
             if (data == 'min') {
                 this.minimize = true;
@@ -156,6 +175,9 @@ export default {
                 }
             });
         },
+        handleSetting() {
+            this.$refs.chatSetting.doShow();
+        },
         handleMembers() {
             if (this.showMembers) {
                 this.showMembers = false;
@@ -217,13 +239,20 @@ export default {
 }
 .chat-box-footer{
 
+}
+.chat-setting{
+    float: right;
+    line-height: 40px;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 16px;
 }
 .chat-box-footer-tool{
     width: 100%;
     height: 30px;
 }
 .chat-box-footer-send{
-    background: #6dbcff;
+    background: #36a2fd;
     width: 65px;
     font-size: 12px;
     padding: 5px 0px 4px 0px;
@@ -268,6 +297,9 @@ export default {
     white-space: nowrap;
     cursor: pointer;
 }
+.each-chat-member-outline{
+    color: #ccc;
+}
 .chat-box-members{
     position: absolute;
     width: 140px;

src/views/newMap/jointTrainingNew/chatSetting.vue

@@ -0,0 +1,121 @@
+<template>
+  <div v-show="dialogVisible" class="chat-popup">
+    <div class="chat-setting-header">
+      <div class="chat-setting-title">设置</div>
+      <div class="chat-setting-close">
+        <i class="el-icon-close" @click="dialogVisible=false" />
+      </div>
+    </div>
+    <div class="chat-setting-content">
+      <div class="chat-setting-language">
+        <div class="setting-language-title">语言: </div>
+        <el-switch
+          v-model="form.language"
+          class="setting-language-select"
+          active-color="#409EFF"
+          inactive-color="#ff4949"
+          active-text="中"
+          inactive-text="En"
+          active-value="zh"
+          inactive-value="en"
+          @change="changeLanguage()"
+        />
+      </div>
+      <div class="chat-setting-sex">
+        <div class="setting-sex-title">性别: </div>
+        <el-switch
+          v-model="form.sex"
+          class="setting-sex-select"
+          active-color="#409EFF"
+          inactive-color="#ff4949"
+          active-icon-class="el-icon-male"
+          inactive-icon-class="el-icon-female"
+          active-value="man"
+          inactive-value="woman"
+          @change="changeSex()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+    name: 'ChatSetting',
+    data() {
+        return {
+            dialogVisible: false,
+            loading:false,
+            form:{
+                language:'zh',
+                sex:'man'
+            }
+        };
+    },
+    methods:{
+        doShow() {
+            this.dialogVisible = true;
+        },
+        changeLanguage() {
+
+        },
+        changeSex() {
+
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.chat-popup{
+    position: absolute;
+    width: 54%;
+    height: 143px;
+    border: 1px #dedede solid;
+    left: 23%;
+    top: 24%;
+    z-index: 7;
+    border-radius: 4px;
+    -webkit-box-shadow: 3px 3px 3px #dedede;
+    box-shadow: 3px 3px 3px #dedede;
+    background: #fff;
+}
+.chat-setting-header{
+    padding-left: 10px;
+    padding-top: 6px;
+    font-size: 14px;
+    border-bottom: 1px #dedede solid;
+    padding-bottom: 6px;
+}
+.chat-setting-title{
+    display: inline-block;
+}
+.chat-setting-close{
+    float: right;
+    display: inline-block;
+    margin-right: 5px;
+    font-size: 16px;
+    cursor: pointer;
+}
+.chat-setting-content{
+
+}
+.chat-setting-language,.chat-setting-sex{
+    display: inline-block;
+    margin-top: 20px;
+}
+.setting-language-title,.setting-sex-title{
+    display: inline-block;
+    font-size: 14px;
+    margin-left: 20px;
+    vertical-align: top;
+    margin-top: 3px;
+}
+.setting-language-select,.setting-sex-select{
+    display: inline-block;
+    vertical-align: top;
+}
+</style>
+<style lang="scss">
+.setting-sex-select .el-icon-male,.setting-sex-select .el-icon-female{
+    font-size:18px !important;
+}
+</style>