综合演练仿真 聊天 切换聊天 聊天布局 语音播放代码调整
This commit is contained in:
joylink_cuiweidong
parent
bfe23bf70b
commit
056b9ffe9e
@ -6,7 +6,7 @@ NODE_ENV = 'development'
|
||||
# VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
||||
# VUE_APP_BASE_API = 'http://192.168.3.4:9000'
|
||||
VUE_APP_BASE_API = 'http://192.168.3.6:9000'
|
||||
VUE_VOICE_API = 'https://test.joylink.club'
|
||||
VUE_APP_VOICE_API = 'https://test.joylink.club'
|
||||
|
||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||
|
||||
@ -4,4 +4,4 @@ VUE_APP_PRO = 'local'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
||||
VUE_VOICE_API = 'https://joylink.club'
|
||||
VUE_APP_VOICE_API = 'https://joylink.club'
|
||||
|
||||
@ -3,4 +3,4 @@ NODE_ENV = 'production'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
|
||||
VUE_VOICE_API = 'https://joylink.club'
|
||||
VUE_APP_VOICE_API = 'https://joylink.club'
|
||||
|
||||
@ -3,4 +3,4 @@ NODE_ENV = 'test'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'
|
||||
VUE_VOICE_API = 'https://test.joylink.club'
|
||||
VUE_APP_VOICE_API = 'https://test.joylink.club'
|
||||
|
||||
@ -154,6 +154,13 @@ function handleSimulationInfo(state, data) {
|
||||
date: +new Date(`${myDate1} ${chatTime}`)
|
||||
};
|
||||
state.simulationText = params;
|
||||
if (state.coversitionList[data.conversationId]) {
|
||||
state.coversitionList[data.conversationId].push(params);
|
||||
} else {
|
||||
state.coversitionList[data.conversationId] = [];
|
||||
state.coversitionList[data.conversationId].push(params);
|
||||
}
|
||||
|
||||
// switch (data.member.role) {
|
||||
// case '01':
|
||||
// role = '管理员';
|
||||
@ -235,6 +242,7 @@ const socket = {
|
||||
simulationStart: '', // 仿真-开始消息
|
||||
simulationReset: '', // 仿真-异常消息
|
||||
simulationText: {}, // 仿真-用户交互消息（聊天/命令）
|
||||
coversitionList:{}, // 历史仿真-用户消息列表
|
||||
|
||||
message: {}, // 仿真聊天
|
||||
msgQueue: [], // 命令请求列表
|
||||
@ -259,7 +267,6 @@ const socket = {
|
||||
beLogoutCount: 0, // 被登出
|
||||
runPlanReloadCount: 0 // 仿真运行图变更
|
||||
},
|
||||
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div v-quickMenuDrag class="chatBox">
|
||||
<!-- v-quickMenuDrag -->
|
||||
<div 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>
|
||||
@ -33,7 +34,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-box-content">
|
||||
<chat-content :current-coversition="currentCoversition" />
|
||||
<chat-content ref="chatContent" :current-coversition="currentCoversition" />
|
||||
<div v-if="recordSending" class="chat_record_tip">
|
||||
<div id="record_progress_bar" :style="'width:'+100/60*seconds+'%'" />
|
||||
<div class="record_icon" />
|
||||
@ -285,6 +286,7 @@ export default {
|
||||
changeCoversition(coversition) {
|
||||
this.headerTitle = coversition.name;
|
||||
this.currentCoversition = {id:coversition.id, group:coversition.group};
|
||||
this.$refs.chatContent.reloadData(this.currentCoversition);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -6,10 +6,11 @@
|
||||
<div v-if="chatContent.group" class="userName">{{ chatContent.memberName }}</div>
|
||||
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
|
||||
</div>
|
||||
<div class="userBubble">
|
||||
<div class="userBubble" @click="playAudio('audio'+index)">
|
||||
<div class="userMessage">
|
||||
<div class="messageText">{{ chatContent.message }}</div>
|
||||
<audio :src="baseUrl+chatContent.src" style="display:none" />
|
||||
<span class="el-icon-video-play playicon" />
|
||||
<span class="messageText">{{ chatContent.message }}</span>
|
||||
<audio :id="'audio'+index" :src="baseUrl+chatContent.src" style="display:none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,23 +28,39 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chatContentList:[],
|
||||
baseUrl:''
|
||||
coversition:{},
|
||||
baseUrl:process.env.VUE_APP_VOICE_API
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
'$store.state.socket.simulationText':function (val, old) { // 仿真聊天
|
||||
if (this.currentCoversition.id == val.conversationId) {
|
||||
this.chatContentList.push(this.$store.state.socket.simulationText);
|
||||
const simulationText = this.$store.state.socket.simulationText;
|
||||
this.chatContentList.push(simulationText);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('VUE_VOICE_API' + process.env.VUE_VOICE_API);
|
||||
this.baseUrl = process.env.VUE_VOICE_API;
|
||||
created() {
|
||||
this.coversition = this.currentCoversition;
|
||||
this.inintData();
|
||||
},
|
||||
methods:{
|
||||
inintData() {
|
||||
const coversitionListAll = Object.assign({}, this.$store.state.socket.coversitionList);
|
||||
const coversitionList = coversitionListAll[this.coversition.id] || [];
|
||||
// console.log('inintData---coversitionList' + JSON.stringify(this.$store.state.socket.coversitionList[this.coversition.id]));
|
||||
this.chatContentList = coversitionList;
|
||||
},
|
||||
formatTime(time) {
|
||||
return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time;
|
||||
},
|
||||
playAudio(id) {
|
||||
document.querySelector('#' + id).play();
|
||||
},
|
||||
reloadData(currentCoversition) {
|
||||
this.chatContentList = [];
|
||||
this.coversition = currentCoversition;
|
||||
this.inintData();
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -55,6 +72,7 @@ export default {
|
||||
display: inline-block;
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
cursor:auto;
|
||||
}
|
||||
.leftUser{
|
||||
float: left;
|
||||
@ -72,15 +90,20 @@ export default {
|
||||
.userName{}
|
||||
.userChatTime{font-size: 12px;}
|
||||
.userBubble{
|
||||
max-width: 300px;
|
||||
max-width: 200px;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
background: #ccc;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.playicon{
|
||||
font-size: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.textRight{text-align: right;}
|
||||
.userMessage{}
|
||||
.messageText{}
|
||||
.messageText{line-height: 20px;}
|
||||
.chatContentInClass{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user