综合演练仿真 聊天 发送语音消息

src/directive/quickMenuDrag/quickMenuDrag.js

@@ -29,8 +29,20 @@ export default {
                 const t = e.clientY - disY;
 
                 /** 移动当前元素*/
+                if (l + styL < 0) {
+                    dragDom.style.left = `0px`;
+                } else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
+                    dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`;
+                } else {
                     dragDom.style.left = `${l + styL}px`;
+                }
+                if (t + styT < 0) {
+                    dragDom.style.top = `0px`;
+                } else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
+                    dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`;
+                } else {
                     dragDom.style.top = `${t + styT}px`;
+                }
 
                 /** 将此时的位置传出去*/
                 // binding.value({ x: e.pageX, y: e.pageY });

src/views/newMap/jointTrainingNew/chatBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chatBox">
+  <div v-quickMenuDrag 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>
@@ -14,7 +14,7 @@
             <div
               v-for="coversition in coversitionList"
               :key="coversition.id"
-              :class="coversition.id==currentCoversition?'coversition-active each-coversition':'each-coversition'"
+              :class="coversition.id==currentCoversition.id?'coversition-active each-coversition':'each-coversition'"
               @click="changeCoversition(coversition)"
             >{{ coversition.name }}</div>
           </div>
@@ -25,7 +25,7 @@
             <div class="minimality" @click="handleMinimality('min')">
               <i class="el-icon-remove" />
             </div>
-            <div class="showMembers" @click="handleMembers()">
+            <div v-show="currentCoversition.group==undefined?true:currentCoversition.group" class="showMembers" @click="handleMembers()">
               <i class="el-icon-user-solid" />
             </div>
             <div class="chat-setting" @click="handleSetting()">
@@ -33,6 +33,7 @@
             </div>
           </div>
           <div class="chat-box-content">
+            <audio src="http://192.168.3.6:9000/2020/4/23/1587636830913-ReWF1got.wav" autoplay preload="preload" />
             <div v-if="recordSending" class="chat_record_tip">
               <div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
               <div class="record_icon" />
@@ -62,7 +63,7 @@ import { getToken } from '@/utils/auth';
 import { creatSubscribe, clearSubscribe, assistant} from '@/utils/stomp';
 import ChatSetting from './chatSetting';
 import RecordRTC from 'recordrtc';
-import {getSimulationMembersNew, getSimulationConversationListNew, getSimulationConversationIdNew} from '@/api/chat';
+import {getSimulationMembersNew, getSimulationConversationListNew, getSimulationConversationIdNew, uploadAudioFileNew} from '@/api/chat';
 import ConstConfig from '@/scripts/ConstConfig';
 import Cookies from 'js-cookie';
 export default {
@@ -91,7 +92,7 @@ export default {
                 language:'zh',
                 sex:'1'
             },
-            currentCoversition:'',
+            currentCoversition:{id:'all', name:'所有人', group:true},
             headerTitle:'所有人'
         };
     },
@@ -108,6 +109,7 @@ export default {
             getSimulationConversationListNew(this.$route.query.group).then(resp=>{
                 if (resp.data) {
                     this.coversitionList = resp.data;
+                    this.coversitionList.unshift({id:'all', name:'所有人', group:true});
                 }
             });
         },
@@ -127,13 +129,15 @@ export default {
             const that = this;
             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',
-                            checkForInactiveTracks: true
+                            recorderType: StereoAudioRecorder,
+                            numberOfAudioChannels: 2
                         });
                         that.recorders.startRecording();
                         that.recordSending = true;
@@ -203,6 +207,13 @@ export default {
                 const blob = that.recorders.getBlob();
                 const fd = new FormData();
                 fd.append('file', blob);
+                uploadAudioFileNew(that.group, that.form.language, that.form.sex, that.currentCoversition.id, fd)
+                    .then((data) => {
+                        debugger;
+                    })
+                    .catch(error => {
+                        console.log(error);
+                    });
                 // 调用接口（待添加）
                 if (that.microphone) {
                     that.microphone.stop();
@@ -259,18 +270,18 @@ export default {
                         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.coversitionList.push(data);
                         }
-                        this.currentCoversition = data.id;
+                        this.currentCoversition = {id:data.id, group:data.group};
                         this.headerTitle = data.name;
-
+                        this.showMembers = false;
                     }
                 });
             }
         },
         changeCoversition(coversition) {
-            this.currentCoversition = coversition.id;
             this.headerTitle = coversition.name;
+            this.currentCoversition = {id:coversition.id, group:coversition.group};
         }
     }
 };
@@ -283,6 +294,7 @@ export default {
   padding-left:5px;
   left: 0;
   bottom:28px;
+  z-index:22;
 }
 .chat-box{
   width: 100%;

src/views/newMap/jointTrainingNew/chatSetting.vue

@@ -75,7 +75,7 @@ export default {
     width: 54%;
     height: 143px;
     border: 1px #dedede solid;
-    left: 23%;
+    left: 33%;
     top: 24%;
     z-index: 7;
     border-radius: 4px;