综合演练仿真 聊天 创建对话，以及对话切换
This commit is contained in:
joylink_cuiweidong
parent
9dcb650a48
commit
72f78751ce
@ -4,34 +4,47 @@
|
||||
<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-box-header">
|
||||
<div class="chat-box-header-title">所有人</div>
|
||||
<div class="minimality" @click="handleMinimality('min')">
|
||||
<i class="el-icon-remove" />
|
||||
</div>
|
||||
<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 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-box-content">
|
||||
<div v-if="recordSending" class="chat_record_tip">
|
||||
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
|
||||
<div class="record_icon" />
|
||||
<div class="record_tip_text">正在录音...</div>
|
||||
<div class="record_tip_confirm" @click="stopRecording()">确定</div>
|
||||
<div class="record_tip_cancle" @click="cancleRecording()">取消</div>
|
||||
<div class="chat-window">
|
||||
<div class="chat-box-header">
|
||||
<div class="chat-box-header-title">{{ headerTitle }}</div>
|
||||
<div class="minimality" @click="handleMinimality('min')">
|
||||
<i class="el-icon-remove" />
|
||||
</div>
|
||||
<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">
|
||||
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
|
||||
<div class="record_icon" />
|
||||
<div class="record_tip_text">正在录音...</div>
|
||||
<div class="record_tip_confirm" @click="stopRecording()">确定</div>
|
||||
<div class="record_tip_cancle" @click="cancleRecording()">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-box-footer">
|
||||
<div class="chat-box-footer-tool" />
|
||||
<div class="chat-box-footer-send" @click="startRecording()">发送语音</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-box-footer">
|
||||
<div class="chat-box-footer-tool" />
|
||||
<div class="chat-box-footer-send" @click="startRecording()">发送语音</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,7 +54,7 @@
|
||||
<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,24 +221,25 @@ export default {
|
||||
this.showMembers = false;
|
||||
} else {
|
||||
this.showMembers = true;
|
||||
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) {
|
||||
const rolename = element.value;
|
||||
if (Cookies.get('user_lang') == 'en') {
|
||||
lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
|
||||
} else {
|
||||
lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
|
||||
}
|
||||
});
|
||||
lastData = JSON.parse(lastData);
|
||||
this.memberList = lastData;
|
||||
});
|
||||
|
||||
this.getSimulationMembers();
|
||||
}
|
||||
},
|
||||
getSimulationMembers() {
|
||||
getSimulationMembersNew(this.$route.query.group).then(resp => {
|
||||
let lastData = JSON.stringify(resp.data);
|
||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||||
roleTypeList.forEach(function(element) {
|
||||
const rolename = element.value;
|
||||
if (Cookies.get('user_lang') == 'en') {
|
||||
lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
|
||||
} else {
|
||||
lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
|
||||
}
|
||||
});
|
||||
lastData = JSON.parse(lastData);
|
||||
this.memberList = lastData;
|
||||
});
|
||||
},
|
||||
async subscribe() {
|
||||
if (!this.$store.state.socket.assistantIsSubscribe) {
|
||||
this.clearSubscribe();
|
||||
@ -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;
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
inactive-color="#ff4949"
|
||||
active-icon-class="el-icon-male"
|
||||
inactive-icon-class="el-icon-female"
|
||||
active-value="man"
|
||||
inactive-value="woman"
|
||||
active-value="1"
|
||||
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,
|
||||
form:{
|
||||
language:'zh',
|
||||
sex:'man'
|
||||
}
|
||||
loading:false
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
@ -59,10 +61,10 @@ export default {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
changeLanguage() {
|
||||
|
||||
this.$emit('setSetting', this.form);
|
||||
},
|
||||
changeSex() {
|
||||
|
||||
this.$emit('setSetting', this.form);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user