joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
joylink_cuiweidong 2020-04-23 18:47:43 +08:00
parent 26f59a4e4e
commit 545dc4a62e
3 changed files with 70 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/directive/quickMenuDrag/quickMenuDrag.js
View File

@ -1,45 +1,57 @@
export default { export default {
bind(el) { bind(el) {
const dragDom = el; const dragDom = el;
dragDom.style.cursor = 'move'; dragDom.style.cursor = 'move';
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/ /** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dragDom.onmousedown = (e) => { dragDom.onmousedown = (e) => {
/** 鼠标按下，计算当前元素距离可视区的距离*/ /** 鼠标按下，计算当前元素距离可视区的距离*/
const disX = e.clientX; const disX = e.clientX;
const disY = e.clientY; const disY = e.clientY;
/** 获取到的值带px 正则匹配替换*/ /** 获取到的值带px 正则匹配替换*/
let styL, styT; let styL, styT;
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/ /** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
if (sty.left.includes('%')) { if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100); styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100); styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
} else { } else {
styL = +sty.left.replace(/\px/g, ''); styL = +sty.left.replace(/\px/g, '');
styT = +sty.top.replace(/\px/g, ''); styT = +sty.top.replace(/\px/g, '');
} }
document.onmousemove = function (e) { document.onmousemove = function (e) {
/** 通过事件委托，计算移动的距离*/ /** 通过事件委托，计算移动的距离*/
const l = e.clientX - disX; const l = e.clientX - disX;
const t = e.clientY - disY; const t = e.clientY - disY;
/** 移动当前元素*/ /** 移动当前元素*/
dragDom.style.left = `${l + styL}px`; if (l + styL < 0) {
dragDom.style.top = `${t + styT}px`; 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 }); // binding.value({ x: e.pageX, y: e.pageY });
}; };
document.onmouseup = function () { document.onmouseup = function () {
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
}; };
}; };
} }
}; };

32
src/views/newMap/jointTrainingNew/chatBox.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="chatBox"> <div v-quickMenuDrag class="chatBox">
<div v-show="!minimize" class="chat-box"> <div v-show="!minimize" class="chat-box">
<div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'"> <div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'">
<div class="chat-member-title">成员列表</div> <div class="chat-member-title">成员列表</div>
@ -14,7 +14,7 @@
<div <div
v-for="coversition in coversitionList" v-for="coversition in coversitionList"
:key="coversition.id" :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)" @click="changeCoversition(coversition)"
>{{ coversition.name }}</div> >{{ coversition.name }}</div>
</div> </div>
@ -25,7 +25,7 @@
<div class="minimality" @click="handleMinimality('min')"> <div class="minimality" @click="handleMinimality('min')">
<i class="el-icon-remove" /> <i class="el-icon-remove" />
</div> </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" /> <i class="el-icon-user-solid" />
</div> </div>
<div class="chat-setting" @click="handleSetting()"> <div class="chat-setting" @click="handleSetting()">
@ -33,6 +33,7 @@
</div> </div>
</div> </div>
<div class="chat-box-content"> <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 v-if="recordSending" class="chat_record_tip">
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" /> <div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
<div class="record_icon" /> <div class="record_icon" />
@ -62,7 +63,7 @@ import { getToken } from '@/utils/auth';
import { creatSubscribe, clearSubscribe, assistant} from '@/utils/stomp'; import { creatSubscribe, clearSubscribe, assistant} from '@/utils/stomp';
import ChatSetting from './chatSetting'; import ChatSetting from './chatSetting';
import RecordRTC from 'recordrtc'; 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 ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
export default { export default {
@ -91,7 +92,7 @@ export default {
language:'zh', language:'zh',
sex:'1' sex:'1'
}, },
currentCoversition:'', currentCoversition:{id:'all', name:'所有人', group:true},
headerTitle:'所有人' headerTitle:'所有人'
}; };
}, },
@ -108,6 +109,7 @@ export default {
getSimulationConversationListNew(this.$route.query.group).then(resp=>{ getSimulationConversationListNew(this.$route.query.group).then(resp=>{
if (resp.data) { if (resp.data) {
this.coversitionList = resp.data; this.coversitionList = resp.data;
this.coversitionList.unshift({id:'all', name:'所有人', group:true});
} }
}); });
}, },
@ -127,13 +129,15 @@ export default {
const that = this; const that = this;
if (!this.recordSending && !this.recorders && !this.microphone) { if (!this.recordSending && !this.recorders && !this.microphone) {
this.$refs.chatSetting.doClose(); this.$refs.chatSetting.doClose();
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
navigator.getUserMedia( navigator.getUserMedia(
{ audio: true } // 只启用音频 { audio: true } // 只启用音频
, function (stream) { , function (stream) {
that.microphone = stream; that.microphone = stream;
that.recorders = new RecordRTC(that.microphone, { that.recorders = new RecordRTC(that.microphone, {
type: 'audio', type: 'audio',
checkForInactiveTracks: true recorderType: StereoAudioRecorder,
numberOfAudioChannels: 2
}); });
that.recorders.startRecording(); that.recorders.startRecording();
that.recordSending = true; that.recordSending = true;
@ -203,6 +207,13 @@ export default {
const blob = that.recorders.getBlob(); const blob = that.recorders.getBlob();
const fd = new FormData(); const fd = new FormData();
fd.append('file', blob); 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) { if (that.microphone) {
that.microphone.stop(); that.microphone.stop();
@ -259,18 +270,18 @@ export default {
const data = resp.data; const data = resp.data;
const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; }); const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
if (index < 0) { 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.headerTitle = data.name;
this.showMembers = false;
} }
}); });
} }
}, },
changeCoversition(coversition) { changeCoversition(coversition) {
this.currentCoversition = coversition.id;
this.headerTitle = coversition.name; this.headerTitle = coversition.name;
this.currentCoversition = {id:coversition.id, group:coversition.group};
} }
} }
}; };
@ -283,6 +294,7 @@ export default {
padding-left:5px; padding-left:5px;
left: 0; left: 0;
bottom:28px; bottom:28px;
z-index:22;
} }
.chat-box{ .chat-box{
width: 100%; width: 100%;

2
src/views/newMap/jointTrainingNew/chatSetting.vue
View File

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