This commit is contained in:
zyy 2020-04-28 14:49:57 +08:00
commit 56fa896b6d
7 changed files with 49 additions and 17 deletions

View File

@ -6,7 +6,7 @@ NODE_ENV = 'development'
# VUE_APP_BASE_API = 'https://joylink.club/jlcloud' # 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.4:9000'
VUE_APP_BASE_API = 'http://192.168.3.6: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, # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled. # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

View File

@ -4,4 +4,4 @@ VUE_APP_PRO = 'local'
# base api # base api
VUE_APP_BASE_API = 'https://joylink.club/jlcloud' VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
VUE_VOICE_API = 'https://joylink.club' VUE_APP_VOICE_API = 'https://joylink.club'

View File

@ -3,4 +3,4 @@ NODE_ENV = 'production'
# base api # base api
VUE_APP_BASE_API = 'https://joylink.club/jlcloud' VUE_APP_BASE_API = 'https://joylink.club/jlcloud'
VUE_VOICE_API = 'https://joylink.club' VUE_APP_VOICE_API = 'https://joylink.club'

View File

@ -3,4 +3,4 @@ NODE_ENV = 'test'
# base api # base api
VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud' VUE_APP_BASE_API = 'https://test.joylink.club/jlcloud'
VUE_VOICE_API = 'https://test.joylink.club' VUE_APP_VOICE_API = 'https://test.joylink.club'

View File

@ -154,6 +154,13 @@ function handleSimulationInfo(state, data) {
date: +new Date(`${myDate1} ${chatTime}`) date: +new Date(`${myDate1} ${chatTime}`)
}; };
state.simulationText = params; 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) { // switch (data.member.role) {
// case '01': // case '01':
// role = '管理员'; // role = '管理员';
@ -235,6 +242,7 @@ const socket = {
simulationStart: '', // 仿真-开始消息 simulationStart: '', // 仿真-开始消息
simulationReset: '', // 仿真-异常消息 simulationReset: '', // 仿真-异常消息
simulationText: {}, // 仿真-用户交互消息(聊天/命令) simulationText: {}, // 仿真-用户交互消息(聊天/命令)
coversitionList:{}, // 历史仿真-用户消息列表
message: {}, // 仿真聊天 message: {}, // 仿真聊天
msgQueue: [], // 命令请求列表 msgQueue: [], // 命令请求列表
@ -259,7 +267,6 @@ const socket = {
beLogoutCount: 0, // 被登出 beLogoutCount: 0, // 被登出
runPlanReloadCount: 0 // 仿真运行图变更 runPlanReloadCount: 0 // 仿真运行图变更
}, },
getters: { getters: {
}, },
mutations: { mutations: {

View File

@ -1,5 +1,6 @@
<template> <template>
<div v-quickMenuDrag class="chatBox"> <!-- v-quickMenuDrag -->
<div 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>
@ -33,7 +34,7 @@
</div> </div>
</div> </div>
<div class="chat-box-content"> <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 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" />
@ -285,6 +286,7 @@ export default {
changeCoversition(coversition) { changeCoversition(coversition) {
this.headerTitle = coversition.name; this.headerTitle = coversition.name;
this.currentCoversition = {id:coversition.id, group:coversition.group}; this.currentCoversition = {id:coversition.id, group:coversition.group};
this.$refs.chatContent.reloadData(this.currentCoversition);
} }
} }
}; };

View File

@ -6,10 +6,11 @@
<div v-if="chatContent.group" class="userName">{{ chatContent.memberName }}</div> <div v-if="chatContent.group" class="userName">{{ chatContent.memberName }}</div>
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div> <div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
</div> </div>
<div class="userBubble"> <div class="userBubble" @click="playAudio('audio'+index)">
<div class="userMessage"> <div class="userMessage">
<div class="messageText">{{ chatContent.message }}</div> <span class="el-icon-video-play playicon" />
<audio :src="baseUrl+chatContent.src" style="display:none" /> <span class="messageText">{{ chatContent.message }}</span>
<audio :id="'audio'+index" :src="baseUrl+chatContent.src" style="display:none" />
</div> </div>
</div> </div>
</div> </div>
@ -27,23 +28,39 @@ export default {
data() { data() {
return { return {
chatContentList:[], chatContentList:[],
baseUrl:'' coversition:{},
baseUrl:process.env.VUE_APP_VOICE_API
}; };
}, },
watch:{ watch:{
'$store.state.socket.simulationText':function (val, old) { // 仿 '$store.state.socket.simulationText':function (val, old) { // 仿
if (this.currentCoversition.id == val.conversationId) { 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() { created() {
console.log('VUE_VOICE_API' + process.env.VUE_VOICE_API); this.coversition = this.currentCoversition;
this.baseUrl = process.env.VUE_VOICE_API; this.inintData();
}, },
methods:{ 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) { formatTime(time) {
return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || 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; display: inline-block;
overflow: auto; overflow: auto;
padding-bottom: 20px; padding-bottom: 20px;
cursor:auto;
} }
.leftUser{ .leftUser{
float: left; float: left;
@ -72,15 +90,20 @@ export default {
.userName{} .userName{}
.userChatTime{font-size: 12px;} .userChatTime{font-size: 12px;}
.userBubble{ .userBubble{
max-width: 300px; max-width: 200px;
font-size: 12px; font-size: 12px;
padding: 10px; padding: 10px;
background: #ccc; background: #ccc;
border-radius: 5px; border-radius: 5px;
cursor: pointer;
}
.playicon{
font-size: 20px;
vertical-align: top;
} }
.textRight{text-align: right;} .textRight{text-align: right;}
.userMessage{} .userMessage{}
.messageText{} .messageText{line-height: 20px;}
.chatContentInClass{ .chatContentInClass{
display: inline-block; display: inline-block;
width: 100%; width: 100%;