Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
joylink_cuiweidong
commit
02d486c1af
@ -2,9 +2,9 @@ export function getBaseUrl() {
|
|||||||
let BASE_API;
|
let BASE_API;
|
||||||
if (process.env.NODE_ENV === 'development') {
|
if (process.env.NODE_ENV === 'development') {
|
||||||
// BASE_API = 'https://joylink.club/jlcloud';
|
// BASE_API = 'https://joylink.club/jlcloud';
|
||||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||||
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
|
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
|
||||||
BASE_API = 'http://192.168.3.6:9000'; // 旭强
|
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
|
||||||
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
|
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
|
||||||
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
|
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
|
||||||
// BASE_API = 'http://b29z135112.zicp.vip';
|
// BASE_API = 'http://b29z135112.zicp.vip';
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Notification } from 'element-ui';
|
import { Notification } from 'element-ui';
|
||||||
import ChatBox from '@/views/newMap/jointTrainingNew/chatView/chatBox';
|
import ChatBox from '@/views/newMap/jointTrainingNew/newChatView/chatBox';
|
||||||
import {setPlaySpeed, startPlaying, playingPause, endPlaying, fromPauseToPlay} from '@/api/competition';
|
import {setPlaySpeed, startPlaying, playingPause, endPlaying, fromPauseToPlay} from '@/api/competition';
|
||||||
export default {
|
export default {
|
||||||
name:'MenuPlay',
|
name:'MenuPlay',
|
||||||
|
|||||||
@ -108,7 +108,7 @@ import MenuPractice from '@/views/newMap/displayNew/menuPractice';
|
|||||||
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
||||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||||
import Scheduling from './demon/scheduling';
|
import Scheduling from './demon/scheduling';
|
||||||
import { clearSimulation, getSimulationInfoNew} from '@/api/simulation';
|
import { clearSimulation, getSimulationInfoNew, getSimulationMemberList, getAllSimulationUser} from '@/api/simulation';
|
||||||
import { getTrainingDetailNew } from '@/api/jmap/training';
|
import { getTrainingDetailNew } from '@/api/jmap/training';
|
||||||
// loadScriptNew, , scriptExecuteNew
|
// loadScriptNew, , scriptExecuteNew
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
@ -342,6 +342,7 @@ export default {
|
|||||||
}
|
}
|
||||||
this.checkLoginLineTimer();
|
this.checkLoginLineTimer();
|
||||||
this.checkMouseStatusTimer();
|
this.checkMouseStatusTimer();
|
||||||
|
this.initMemberUserInfo();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.$messageBox(`初始化失败: ${error.message}`);
|
this.$messageBox(`初始化失败: ${error.message}`);
|
||||||
this.endViewLoading();
|
this.endViewLoading();
|
||||||
@ -385,6 +386,18 @@ export default {
|
|||||||
this.endViewLoading();
|
this.endViewLoading();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
initMemberUserInfo() {
|
||||||
|
getSimulationMemberList(this.$route.query.group).then(resp => {
|
||||||
|
this.$store.dispatch('training/setMemberList', {memberList:resp.data, userId: this.$store.state.user.id});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$messageBox('获取仿真成员列表失败！');
|
||||||
|
});
|
||||||
|
getAllSimulationUser(this.$route.query.group).then(resp => {
|
||||||
|
this.$store.dispatch('training/setSimulationUserList', resp.data);
|
||||||
|
}).catch(() => {
|
||||||
|
this.$messageBox('获取所有仿真用户失败！');
|
||||||
|
});
|
||||||
|
},
|
||||||
// 加载实操地图数据
|
// 加载实操地图数据
|
||||||
async initPracticeData() {
|
async initPracticeData() {
|
||||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||||
|
|||||||
@ -35,7 +35,7 @@
|
|||||||
<!-- 单人仿真 -->
|
<!-- 单人仿真 -->
|
||||||
<script>
|
<script>
|
||||||
import SetTime from './demon/setTime';
|
import SetTime from './demon/setTime';
|
||||||
import ChatBox from './chatView/chatBox';
|
import ChatBox from '../jointTrainingNew/newChatView/chatBox';
|
||||||
import { Notification } from 'element-ui';
|
import { Notification } from 'element-ui';
|
||||||
import { getGoodsTryUse } from '@/api/management/goods';
|
import { getGoodsTryUse } from '@/api/management/goods';
|
||||||
import { ranAsPlan, exitRunPlan, clearSimulation, getSimulationInfoNew } from '@/api/simulation';
|
import { ranAsPlan, exitRunPlan, clearSimulation, getSimulationInfoNew } from '@/api/simulation';
|
||||||
|
|||||||
@ -1,506 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- v-quickMenuDrag -->
|
|
||||||
<div class="chatBox" :style="{'bottom':bottom+'px'}">
|
|
||||||
<div v-show="!minimize" class="chat-box">
|
|
||||||
<chat-member-list v-if="project!='refereeJsxt'|| IsAnswering" ref="chatMemberList" :group="group" :current-coversition="currentCoversition" />
|
|
||||||
<div class="chat-box-main">
|
|
||||||
<chat-coversition-list ref="chatCoversitionList" :user-role="userRole" @hideAddCoversition="hideAddCoversition" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
|
|
||||||
<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 v-show="currentCoversition.all==undefined?true&&isShow:currentCoversition.all&&isShow" class="chat-createGroup" @click="handleCreateGroup()">
|
|
||||||
<i class="el-icon-plus" style="font-weight: bolder;" />
|
|
||||||
</div>
|
|
||||||
<div class="chat-setting" @click="handleSetting()">
|
|
||||||
<i class="el-icon-s-tools" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chat-box-content">
|
|
||||||
<chat-content ref="chatContent" :project="project" :is-answering="IsAnswering" :current-coversition="currentCoversition" @changeCoversition="changeCoversition" />
|
|
||||||
<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" />
|
|
||||||
<el-button v-if="isButtonShow" size="mini" type="danger" class="chat-box-footer-quit" :loading="quitLoading" @click="quitCoversition()">退出群聊</el-button>
|
|
||||||
<el-button v-if="currentCoversition.all||isButtonShow" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-show="minimize" class="reminder-drag minimize-box">
|
|
||||||
<div class="chat-title">聊天窗口</div>
|
|
||||||
<div class="minimality" @click="handleMinimality('max')">
|
|
||||||
<i class="el-icon-circle-plus" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
|
|
||||||
<chat-create-group ref="createGroup" :group="group" @addCoversition="addCoversition" />
|
|
||||||
<chat-tooltip :group="group" @getCoversitionList="getCoversitionList" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import ChatSetting from './chatSetting';
|
|
||||||
import ChatContent from './chatContent';
|
|
||||||
import ChatMemberList from './chatMemberList';
|
|
||||||
import ChatCoversitionList from './chatCoversitionList';
|
|
||||||
import ChatCreateGroup from './chatCreateGroup';
|
|
||||||
import ChatTooltip from './chatTooltip';
|
|
||||||
import RecordRTC from 'recordrtc';
|
|
||||||
import {uploadAudioFileNew, quitCoversition} from '@/api/chat';
|
|
||||||
import { getSessionStorage } from '@/utils/auth';
|
|
||||||
export default {
|
|
||||||
name: 'ChatBox',
|
|
||||||
components:{
|
|
||||||
ChatSetting,
|
|
||||||
ChatContent,
|
|
||||||
ChatMemberList,
|
|
||||||
ChatCoversitionList,
|
|
||||||
ChatCreateGroup,
|
|
||||||
ChatTooltip
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
group: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
userRole: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
minimize:true,
|
|
||||||
bottom:15,
|
|
||||||
recordSending:false,
|
|
||||||
currentCoversition:{},
|
|
||||||
seconds:0,
|
|
||||||
inter:null,
|
|
||||||
recorders: null,
|
|
||||||
microphone:null,
|
|
||||||
isHasCoversition:false,
|
|
||||||
quitLoading:false,
|
|
||||||
form:{
|
|
||||||
language:'zh',
|
|
||||||
sex:'1'
|
|
||||||
},
|
|
||||||
headerTitle:''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
isShow() {
|
|
||||||
return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' && !this.isHasCoversition;
|
|
||||||
},
|
|
||||||
isButtonShow() {
|
|
||||||
return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE' && this.isHasCoversition;
|
|
||||||
},
|
|
||||||
project() {
|
|
||||||
return getSessionStorage('project');
|
|
||||||
},
|
|
||||||
IsAnswering() {
|
|
||||||
return !(this.$route.path.includes('refereeJsxtDisplay'));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
'$store.state.map.mapViewLoadedCount':function(val) {
|
|
||||||
const object = document.querySelector('.menuButton');
|
|
||||||
if (object) {
|
|
||||||
const objectBottom = parseInt(object.style.bottom) || 0;
|
|
||||||
this.bottom = this.bottom + object.offsetHeight + objectBottom;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initPage();
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
async initPage() {
|
|
||||||
},
|
|
||||||
handleMinimality(data) {
|
|
||||||
if (data == 'min') {
|
|
||||||
this.minimize = true;
|
|
||||||
this.$refs.chatSetting.doClose();
|
|
||||||
this.$refs.createGroup.doClose();
|
|
||||||
} else {
|
|
||||||
this.minimize = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setSetting(data) {
|
|
||||||
this.form = data;
|
|
||||||
},
|
|
||||||
getCoversitionList() {
|
|
||||||
this.$refs.chatCoversitionList.initPage(false);
|
|
||||||
},
|
|
||||||
setCurrentCoversition(coversition) {
|
|
||||||
if (coversition && coversition.id) {
|
|
||||||
this.currentCoversition = coversition;
|
|
||||||
this.headerTitle = coversition.name;
|
|
||||||
} else {
|
|
||||||
this.headerTitle = '';
|
|
||||||
}
|
|
||||||
if (this.recordSending) {
|
|
||||||
this.cancleRecording();
|
|
||||||
}
|
|
||||||
this.$refs.chatContent.scrollTop();
|
|
||||||
},
|
|
||||||
setHeadTitle(headerTitle) {
|
|
||||||
this.headerTitle = headerTitle;
|
|
||||||
},
|
|
||||||
hideAddCoversition() {
|
|
||||||
this.isHasCoversition = true;
|
|
||||||
},
|
|
||||||
quitCoversition() {
|
|
||||||
this.quitLoading = true;
|
|
||||||
quitCoversition(this.group, this.currentCoversition.id).then(res=>{
|
|
||||||
this.currentCoversition = {all:undefined, id:null};
|
|
||||||
this.$refs.chatCoversitionList.initPage(true);
|
|
||||||
this.isHasCoversition = false;
|
|
||||||
this.quitLoading = false;
|
|
||||||
}).catch(error=>{
|
|
||||||
this.$messageBox('退出会话失败: ' + error.message);
|
|
||||||
this.quitLoading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
addCoversition({data, headerTitle}) {
|
|
||||||
this.$refs.chatCoversitionList.addCoversition(data);
|
|
||||||
this.isHasCoversition = true;
|
|
||||||
this.currentCoversition = {id:data.id, all:data.all};
|
|
||||||
this.headerTitle = headerTitle;
|
|
||||||
},
|
|
||||||
// 语音录制开始
|
|
||||||
startRecording() {
|
|
||||||
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',
|
|
||||||
recorderType: StereoAudioRecorder,
|
|
||||||
numberOfAudioChannels: 1,
|
|
||||||
bitsPerSecond:256000,
|
|
||||||
desiredSampRate: 16000
|
|
||||||
});
|
|
||||||
that.recorders.startRecording();
|
|
||||||
that.recordSending = true;
|
|
||||||
that.inter = setInterval(() => {
|
|
||||||
if (that.seconds < 60) {
|
|
||||||
that.seconds++;
|
|
||||||
} else {
|
|
||||||
clearInterval(that.inter);
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
}, function (error) {
|
|
||||||
switch (error.code || error.name) {
|
|
||||||
case 'PERMISSION_DENIED':
|
|
||||||
case 'PermissionDeniedError':
|
|
||||||
that.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '用户拒绝提供信息',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'NOT_SUPPORTED_ERROR':
|
|
||||||
case 'NotSupportedError':
|
|
||||||
that.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '浏览器不支持硬件设备',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'MANDATORY_UNSATISFIED_ERROR':
|
|
||||||
case 'MandatoryUnsatisfiedError':
|
|
||||||
that.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '无法发现指定的硬件设备',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
that.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '无法打开麦克风',
|
|
||||||
type: 'error'
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
cancleRecording() {
|
|
||||||
if (this.microphone) {
|
|
||||||
clearInterval(this.inter);
|
|
||||||
this.seconds = 0;
|
|
||||||
this.microphone.stop();
|
|
||||||
this.microphone = null;
|
|
||||||
this.recordSending = false;
|
|
||||||
this.recorders = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 停止录制
|
|
||||||
stopRecording() {
|
|
||||||
const that = this;
|
|
||||||
this.recorders.stopRecording(function(blobURL) {
|
|
||||||
clearInterval(that.inter);
|
|
||||||
that.seconds = 0;
|
|
||||||
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) => {
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
if (that.microphone) {
|
|
||||||
that.microphone.stop();
|
|
||||||
that.microphone = null;
|
|
||||||
that.recordSending = false;
|
|
||||||
that.recorders = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
changeCoversition(data) {
|
|
||||||
this.$refs.chatCoversitionList.changeCoversitionOther(data);
|
|
||||||
},
|
|
||||||
handleSetting() {
|
|
||||||
this.$refs.chatSetting.doShow();
|
|
||||||
},
|
|
||||||
handleCreateGroup() {
|
|
||||||
this.$refs.createGroup.doShow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.chatBox{
|
|
||||||
width: 503px;
|
|
||||||
// height: 400px;
|
|
||||||
position: absolute;
|
|
||||||
padding-left:5px;
|
|
||||||
left: 0;
|
|
||||||
bottom:28px;
|
|
||||||
z-index:9;
|
|
||||||
}
|
|
||||||
.chat-box{
|
|
||||||
width: 100%;
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
.chat-box-header{
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
border-bottom: 1px #dedede solid;
|
|
||||||
}
|
|
||||||
.chat-box-header-title{
|
|
||||||
font-size: 15px;
|
|
||||||
margin-left: 15px;
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 70%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.chat-box-content{
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
border-bottom: 1px #dedede solid;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.chat-box-contentTip{
|
|
||||||
|
|
||||||
}
|
|
||||||
.chat-box-footer{
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.chat-window{
|
|
||||||
display: inline-block;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
.chat-setting{
|
|
||||||
float: right;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-right: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.chat-createGroup{
|
|
||||||
float: right;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-right: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.chat-box-footer-tool{
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
.chat-box-footer-send{
|
|
||||||
background: #36a2fd;
|
|
||||||
width: 65px;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 5px 0px 4px 0px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #fff;
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.minimality {
|
|
||||||
float: right;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-right: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size:16px;
|
|
||||||
}
|
|
||||||
.chat-box-main{
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
border-right: 1px #dedede solid;
|
|
||||||
z-index: 4;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
left:5px;
|
|
||||||
font-size:0;
|
|
||||||
}
|
|
||||||
.chat-coversition{
|
|
||||||
|
|
||||||
}
|
|
||||||
.coversition-list{
|
|
||||||
|
|
||||||
}
|
|
||||||
.chat-box-footer-quit{
|
|
||||||
background: red;
|
|
||||||
width: 65px;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 5px 0px 4px 0px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #fff;
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.showMembers{
|
|
||||||
float: right;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-right: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 17px;
|
|
||||||
}
|
|
||||||
#record_progress_bar{
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
background: #bbe5f5;
|
|
||||||
}
|
|
||||||
.chat_record_tip{
|
|
||||||
height: 28px;
|
|
||||||
display: inline-block;
|
|
||||||
background: #dfe6ee;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 13px;
|
|
||||||
border-top: 1px #d8dce5 solid;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.record_icon{
|
|
||||||
display: inline-block;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background: #25d825;
|
|
||||||
border-radius: 10px;
|
|
||||||
left: 7px;
|
|
||||||
margin-right: 0px;
|
|
||||||
box-shadow: -1px 0px 3px #6d6d6d;
|
|
||||||
border: 1px #28d228 solid;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
.record_tip_text{
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-left: 3px;
|
|
||||||
// padding: 8px 0px 6px 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
left:20px
|
|
||||||
}
|
|
||||||
.record_tip_confirm{
|
|
||||||
position: absolute;
|
|
||||||
right: 63px;
|
|
||||||
padding: 3px 0px 2px 0px;
|
|
||||||
border: 1px #a2a5aa solid;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 45px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
top: 4px;
|
|
||||||
background: #eeeeee;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.record_tip_cancle{
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
padding: 3px 0px 2px 0px;
|
|
||||||
border: 1px #a2a5aa solid;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 45px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
top: 4px;
|
|
||||||
background: #eeeeee;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.chat-box-footer-send.disbled{
|
|
||||||
cursor: no-drop;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimize-box {
|
|
||||||
width: 97.5%;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 222;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
.chat-title {
|
|
||||||
float: left;
|
|
||||||
font-size: 15px;
|
|
||||||
margin-left: 10px;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimality {
|
|
||||||
float: right;
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-right: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,290 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="chatcontentIn">
|
|
||||||
<div class="chatcontentInner">
|
|
||||||
<div v-for="(chatContent,index) in chatContentList" :key="index" class="chatContentInClass">
|
|
||||||
<div :class="chatContent.self?'rightUser':'leftUser'">
|
|
||||||
<div class="userHeader">
|
|
||||||
<!-- chatContent.all&& -->
|
|
||||||
<div v-if="!chatContent.self" class="userName">{{ covertName(chatContent.member,false) }}</div>
|
|
||||||
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="userBubble" @click="playAudio(baseUrl+chatContent.src)">
|
|
||||||
<div class="userMessage">
|
|
||||||
<!-- chatContent.all&& -->
|
|
||||||
<span v-if="!chatContent.member.robot&&chatContent.all">{{ covertName(chatContent.targetUser,true) }}</span>
|
|
||||||
<span class="el-icon-video-play playicon" />
|
|
||||||
<span class="messageText">{{ chatContent.message }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<audio id="audioPlay" style="display:none" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import {getSimulationContextListNew} from '@/api/chat';
|
|
||||||
import ConstConfig from '@/scripts/ConstConfig';
|
|
||||||
import Cookies from 'js-cookie';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props:{
|
|
||||||
currentCoversition:{
|
|
||||||
type:Object,
|
|
||||||
required:true
|
|
||||||
},
|
|
||||||
project:{
|
|
||||||
type:String,
|
|
||||||
required:true
|
|
||||||
},
|
|
||||||
isAnswering:{
|
|
||||||
type:Boolean,
|
|
||||||
required:true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chatContentList:[],
|
|
||||||
coversition:{},
|
|
||||||
currentAudioList:[],
|
|
||||||
currentAudioIndex:0,
|
|
||||||
isPlay:false,
|
|
||||||
baseUrl:process.env.VUE_APP_VOICE_API
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
'$store.state.socket.simulationText':function (val, old) { // 仿真聊天
|
|
||||||
// if (this.currentCoversition.id == val.conversationId) {
|
|
||||||
// const simulationText = this.$store.state.socket.simulationText;
|
|
||||||
// this.chatContentList.push(simulationText);
|
|
||||||
// }
|
|
||||||
const simulationText = this.$store.state.socket.simulationText;
|
|
||||||
if (this.currentCoversition.id == val.id) {
|
|
||||||
this.chatContentList.push(simulationText);
|
|
||||||
if (simulationText.member.userId != this.$store.state.user.id) {
|
|
||||||
this.currentAudioList.push(this.baseUrl + simulationText.src);
|
|
||||||
console.log(this.isPlay);
|
|
||||||
if (!this.isPlay) {
|
|
||||||
this.isPlay = true;
|
|
||||||
this.playAllAudio();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.scrollTop();
|
|
||||||
} else {
|
|
||||||
if (!simulationText.all) {
|
|
||||||
this.$emit('changeCoversition', simulationText);
|
|
||||||
// this.$emit('addCoversition', {data:simulationText, headerTitle:''});
|
|
||||||
this.chatContentList.push(simulationText);
|
|
||||||
if (simulationText.member.userId != this.$store.state.user.id) {
|
|
||||||
this.currentAudioList.push(this.baseUrl + simulationText.src);
|
|
||||||
console.log(this.isPlay);
|
|
||||||
if (!this.isPlay) {
|
|
||||||
this.isPlay = true;
|
|
||||||
this.playAllAudio();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (this.project == 'refereeJsxt') {
|
|
||||||
this.chatContentList.push(simulationText);
|
|
||||||
simulationText.name = '所有人';
|
|
||||||
this.$emit('changeCoversition', simulationText);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$route() {
|
|
||||||
this.inintData();
|
|
||||||
},
|
|
||||||
currentCoversition:function (val, old) {
|
|
||||||
if (val && (this.project != 'refereeJsxt' || this.isAnswering)) {
|
|
||||||
this.chatContentList = [];
|
|
||||||
this.coversition = this.currentCoversition;
|
|
||||||
this.inintData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// this.coversition = this.currentCoversition;
|
|
||||||
// this.inintData();
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
inintData() {
|
|
||||||
if (this.coversition.id) {
|
|
||||||
getSimulationContextListNew(this.$route.query.group, this.coversition.id).then(res=>{
|
|
||||||
const userId = this.$store.state.user.id;
|
|
||||||
const coversitionList = res.data.map(coversition=>{
|
|
||||||
coversition.self = false;
|
|
||||||
if (coversition.member.userId == userId) {
|
|
||||||
coversition.self = true;
|
|
||||||
}
|
|
||||||
coversition.src = coversition.isAudio ? `/audio/${coversition.audioPath}` : '';
|
|
||||||
coversition.targetUser = coversition.targetMember ? coversition.targetMember : 'All';
|
|
||||||
return coversition;
|
|
||||||
});
|
|
||||||
this.chatContentList = coversitionList;
|
|
||||||
this.scrollTop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 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;
|
|
||||||
},
|
|
||||||
scrollTop() {
|
|
||||||
this.$nextTick(function() {
|
|
||||||
const scrollTop = document.querySelector('.chatcontentInner').offsetHeight - document.querySelector('.chatcontentIn').offsetHeight + 30;
|
|
||||||
document.querySelector('.chatcontentIn').scrollTop = scrollTop;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
formatTime(time) {
|
|
||||||
return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time;
|
|
||||||
},
|
|
||||||
playAllAudio() {
|
|
||||||
this.playEachAudio(this.currentAudioList[this.currentAudioIndex]);
|
|
||||||
},
|
|
||||||
playEachAudio(audioUrl) {
|
|
||||||
this.$nextTick(function() {
|
|
||||||
document.querySelector('#audioPlay').src = audioUrl;
|
|
||||||
document.querySelector('#audioPlay').play();
|
|
||||||
const that = this;
|
|
||||||
document.querySelector('#audioPlay').onended = function() {
|
|
||||||
that.currentAudioList.shift();
|
|
||||||
console.log(that.currentAudioList.length);
|
|
||||||
if (that.currentAudioList.length > 0) {
|
|
||||||
that.playEachAudio(that.currentAudioList[that.currentAudioIndex]);
|
|
||||||
} else {
|
|
||||||
that.isPlay = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
covertName(data, status) {
|
|
||||||
if (data != 'All') {
|
|
||||||
if (data instanceof Array) {
|
|
||||||
let result = '';
|
|
||||||
data.forEach(each=>{
|
|
||||||
result += this.covertEachName(each, status);
|
|
||||||
});
|
|
||||||
return result;
|
|
||||||
} else {
|
|
||||||
return this.covertEachName(data, status);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return '@All';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
covertEachName(data, status) {
|
|
||||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
|
||||||
roleTypeList.forEach(function(element) {
|
|
||||||
const rolename = element.value;
|
|
||||||
if (Cookies.get('user_lang') == 'en') {
|
|
||||||
if (rolename == data.role) {
|
|
||||||
data.role = element.enLabel;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (rolename == data.role) {
|
|
||||||
data.role = element.label;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const deviceName = data.deviceName ? '-' + data.deviceName : '';
|
|
||||||
const memberName = data.name ? '-' + data.name : '';
|
|
||||||
if (status) {
|
|
||||||
return '@' + data.role + deviceName + memberName;
|
|
||||||
} else {
|
|
||||||
return data.role + deviceName + memberName;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
playAudio(audioUrl) {
|
|
||||||
document.querySelector('#audioPlay').src = audioUrl;
|
|
||||||
document.querySelector('#audioPlay').play();
|
|
||||||
}
|
|
||||||
// reloadData(currentCoversition) {
|
|
||||||
// this.chatContentList = [];
|
|
||||||
// this.coversition = currentCoversition;
|
|
||||||
// this.inintData();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.chatcontentIn{
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: auto;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
cursor:auto;
|
|
||||||
}
|
|
||||||
.leftUser{
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.rightUser{
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.userHeader{margin-bottom: 2px;}
|
|
||||||
.userName{font-size: 12px;display:inline-block;}
|
|
||||||
.userChatTime{font-size: 12px;display:inline-block;}
|
|
||||||
.userBubble{
|
|
||||||
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;width: 100%;}
|
|
||||||
.userMessage{}
|
|
||||||
.messageText{line-height: 20px;}
|
|
||||||
.chatContentInClass{
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
|
||||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
|
||||||
.chatcontentIn::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
// height: 110px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
/*定义滚动条轨道 内阴影+圆角*/
|
|
||||||
.chatcontentIn::-webkit-scrollbar-track {
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #FFFFFF;;
|
|
||||||
}
|
|
||||||
/*定义滑块 内阴影+圆角*/
|
|
||||||
.chatcontentIn::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 10px;
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
|
||||||
background-color: #cacaca;
|
|
||||||
}
|
|
||||||
/*滑块效果*/
|
|
||||||
.chatcontentIn::-webkit-scrollbar-thumb:hover {
|
|
||||||
border-radius: 5px;
|
|
||||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
/*IE滚动条颜色*/
|
|
||||||
html {
|
|
||||||
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
|
||||||
scrollbar-highlight-color:#000;
|
|
||||||
scrollbar-3dlight-color:#000;
|
|
||||||
scrollbar-darkshadow-color:#000;
|
|
||||||
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
|
||||||
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
|
||||||
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,172 +0,0 @@
|
|||||||
<template>
|
|
||||||
<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.id?'coversition-active each-coversition':'each-coversition'"
|
|
||||||
@click="changeCoversition(coversition)"
|
|
||||||
>
|
|
||||||
<div class="coversitionName">{{ coversition.name }}</div>
|
|
||||||
<!-- <div v-if="!coversition.all" class="el-icon-close closeConversition" @click="closeCoversition(coversition.id)" /> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import {getSimulationConversationListNew} from '@/api/chat';
|
|
||||||
export default {
|
|
||||||
name:'ChatCoversitionList',
|
|
||||||
props: {
|
|
||||||
userRole: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
coversitionList:[],
|
|
||||||
currentCoversition:{}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
'userRole':function(val) {
|
|
||||||
this.initPage(true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// this.initPage(true);
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
initPage(status) {
|
|
||||||
getSimulationConversationListNew(this.$route.query.group).then(resp=>{
|
|
||||||
if (resp.data) {
|
|
||||||
const data = resp.data;
|
|
||||||
if (this.userRole == 'ADMIN' || this.userRole == 'AUDIENCE') {
|
|
||||||
this.coversitionList = data;
|
|
||||||
} else {
|
|
||||||
this.coversitionList = data.filter(coversition=>{ return coversition.all == false; });
|
|
||||||
if (this.coversitionList.length >= 1) {
|
|
||||||
this.$emit('hideAddCoversition');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (resp.data && resp.data.length && resp.data.length > 0 && status) {
|
|
||||||
if (this.userRole == 'ADMIN' || this.userRole == 'AUDIENCE') {
|
|
||||||
this.currentCoversition = data[0];
|
|
||||||
this.$emit('setCurrentCoversition', resp.data[0]);
|
|
||||||
} else {
|
|
||||||
if (this.coversitionList.length >= 1) {
|
|
||||||
this.currentCoversition = data[0];
|
|
||||||
this.$emit('setCurrentCoversition', resp.data[0]);
|
|
||||||
} else {
|
|
||||||
this.currentCoversition = null;
|
|
||||||
this.$emit('setCurrentCoversition', this.currentCoversition);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (resp.data && resp.data.length && resp.data.length > 0 && !status) {
|
|
||||||
const coversition = data.filter(coversition=>{ return coversition.all == false; });
|
|
||||||
this.currentCoversition = coversition[0];
|
|
||||||
this.$emit('setCurrentCoversition', coversition[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
addCoversition(data) {
|
|
||||||
const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
|
|
||||||
if (index < 0) {
|
|
||||||
this.coversitionList.push(data);
|
|
||||||
this.currentCoversition = data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeCoversition(coversition) {
|
|
||||||
this.$emit('setHeadTitle', coversition.name);
|
|
||||||
this.currentCoversition = {id:coversition.id, all:coversition.all};
|
|
||||||
this.$emit('setCurrentCoversition', coversition);
|
|
||||||
// this.$refs.chatContent.reloadData(this.currentCoversition);
|
|
||||||
},
|
|
||||||
changeCoversitionOther(coversition) {
|
|
||||||
const index = this.coversitionList.findIndex(item=>{ return item.id == coversition.id; });
|
|
||||||
if (index < 0) {
|
|
||||||
this.coversitionList.push(coversition);
|
|
||||||
}
|
|
||||||
this.changeCoversition(coversition);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.coversitionName{
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.closeConversition{
|
|
||||||
vertical-align: top;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
|
||||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
|
||||||
.coversition-list::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
// height: 110px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
/*定义滚动条轨道 内阴影+圆角*/
|
|
||||||
.coversition-list::-webkit-scrollbar-track {
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #FFFFFF;;
|
|
||||||
}
|
|
||||||
/*定义滑块 内阴影+圆角*/
|
|
||||||
.coversition-list::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 10px;
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
|
||||||
background-color: #cacaca;
|
|
||||||
}
|
|
||||||
/*滑块效果*/
|
|
||||||
.coversition-list::-webkit-scrollbar-thumb:hover {
|
|
||||||
border-radius: 5px;
|
|
||||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
/*IE滚动条颜色*/
|
|
||||||
html {
|
|
||||||
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
|
||||||
scrollbar-highlight-color:#000;
|
|
||||||
scrollbar-3dlight-color:#000;
|
|
||||||
scrollbar-darkshadow-color:#000;
|
|
||||||
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
|
||||||
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
|
||||||
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,234 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-show="dialogVisible" class="chat-create-group-all">
|
|
||||||
<div class="chat-create-group">
|
|
||||||
<div class="create-group-header">
|
|
||||||
<div class="create-group-title">添加会话对象</div>
|
|
||||||
<div class="create-group-close">
|
|
||||||
<i class="el-icon-close" @click="dialogVisible=false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="create-group-content">
|
|
||||||
<div class="chat-member-list">
|
|
||||||
<el-checkbox-group v-model="checkList">
|
|
||||||
<el-checkbox
|
|
||||||
v-for="member in memberList"
|
|
||||||
:key="member.id"
|
|
||||||
class="each-chat-member"
|
|
||||||
:label="member"
|
|
||||||
:disabled="member.userId === userId"
|
|
||||||
>{{ member.memberName }}</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
<div class="currentSelectList">
|
|
||||||
<div
|
|
||||||
v-for="member in checkList"
|
|
||||||
:key="member.id"
|
|
||||||
class="eachSelect"
|
|
||||||
>
|
|
||||||
{{ member.memberName }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- :style="member.userId === userId ?'color:red':''" -->
|
|
||||||
</div>
|
|
||||||
<div class="create-group-bottom">
|
|
||||||
<el-button :loading="loading" size="small" type="primary" @click="doCreate">创建会话</el-button>
|
|
||||||
<el-button size="small" @click="doClose">取消</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import {getSimulationMembersNew, getSimulationConversationIdNew} from '@/api/chat';
|
|
||||||
import ConstConfig from '@/scripts/ConstConfig';
|
|
||||||
import Cookies from 'js-cookie';
|
|
||||||
export default {
|
|
||||||
name:'ChatCreateGroup',
|
|
||||||
props: {
|
|
||||||
group: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialogVisible:false,
|
|
||||||
loading:false,
|
|
||||||
memberList:[],
|
|
||||||
checkList:[]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
userId() {
|
|
||||||
return this.$store.state.user.id;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
doShow() {
|
|
||||||
this.getSimulationMembers();
|
|
||||||
this.dialogVisible = true;
|
|
||||||
},
|
|
||||||
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);
|
|
||||||
lastData = lastData.filter(memberIn=>{ return memberIn.role != '观众'; });
|
|
||||||
lastData.map(member=>{
|
|
||||||
const deviceName = member.deviceName ? '-' + member.deviceName : '';
|
|
||||||
const memberName = member.name ? '-' + member.name : '';
|
|
||||||
member.memberName = member.role + deviceName + memberName;
|
|
||||||
return member;
|
|
||||||
});
|
|
||||||
this.memberList = lastData;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
doCreate() {
|
|
||||||
if (this.checkList.length > 0) {
|
|
||||||
this.loading = true;
|
|
||||||
const checkList = this.checkList.map(function(check) { return check.id; });
|
|
||||||
getSimulationConversationIdNew(checkList, this.group).then(resp => {
|
|
||||||
if (resp.data) {
|
|
||||||
const data = resp.data;
|
|
||||||
this.loading = false;
|
|
||||||
this.$emit('addCoversition', {data:data, headerTitle:resp.data.name});
|
|
||||||
this.dialogVisible = false;
|
|
||||||
this.checkList = [];
|
|
||||||
}
|
|
||||||
}).catch(error=>{
|
|
||||||
this.$messageBox('创建会话失败: ' + error.message);
|
|
||||||
this.loading = false;
|
|
||||||
this.dialogVisible = false;
|
|
||||||
this.checkList = [];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
doClose() {
|
|
||||||
this.checkList = [];
|
|
||||||
this.dialogVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.chat-create-group-all{
|
|
||||||
position:absolute;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
z-index:10;
|
|
||||||
}
|
|
||||||
.chat-create-group{
|
|
||||||
position: absolute;
|
|
||||||
width: 70%;
|
|
||||||
height: 300px;
|
|
||||||
border: 1px #dedede solid;
|
|
||||||
left: 26%;
|
|
||||||
top: 8%;
|
|
||||||
z-index: 7;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: #b5aeae 0 0 10px;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.create-group-header{
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-top: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-bottom: 1px #dedede solid;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
}
|
|
||||||
.create-group-title{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.create-group-close{
|
|
||||||
float: right;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 5px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.chat-member-list{
|
|
||||||
width: 54%;
|
|
||||||
height: 216px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 5px 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
border-right: 1px #ccc solid;
|
|
||||||
display:inline-block;
|
|
||||||
}
|
|
||||||
.create-group-content{
|
|
||||||
width: 100%;
|
|
||||||
height: 220px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 1px #dedede solid;
|
|
||||||
}
|
|
||||||
.create-group-bottom{
|
|
||||||
text-align: center;
|
|
||||||
margin-top:8px;
|
|
||||||
}
|
|
||||||
.each-chat-member{
|
|
||||||
display:block;
|
|
||||||
margin-top:5px;
|
|
||||||
}
|
|
||||||
.currentSelectList{
|
|
||||||
display: inline-block;
|
|
||||||
width: 44%;
|
|
||||||
font-size: 14px;
|
|
||||||
vertical-align: top;
|
|
||||||
padding: 5px 10px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 216px;
|
|
||||||
}
|
|
||||||
.eachSelect{
|
|
||||||
display:block;
|
|
||||||
margin-top:5px;
|
|
||||||
}
|
|
||||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
|
||||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
|
||||||
.chat-member-list::-webkit-scrollbar,.currentSelectList::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
// height: 110px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
/*定义滚动条轨道 内阴影+圆角*/
|
|
||||||
.chat-member-list::-webkit-scrollbar-track,.currentSelectList::-webkit-scrollbar-track{
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #FFFFFF;;
|
|
||||||
}
|
|
||||||
/*定义滑块 内阴影+圆角*/
|
|
||||||
.chat-member-list::-webkit-scrollbar-thumb,.currentSelectList::-webkit-scrollbar-thumb{
|
|
||||||
border-radius: 10px;
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
|
||||||
background-color: #cacaca;
|
|
||||||
}
|
|
||||||
/*滑块效果*/
|
|
||||||
.chat-member-list::-webkit-scrollbar-thumb:hover,.currentSelectList::-webkit-scrollbar-thumb:hover {
|
|
||||||
border-radius: 5px;
|
|
||||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
/*IE滚动条颜色*/
|
|
||||||
html {
|
|
||||||
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
|
||||||
scrollbar-highlight-color:#000;
|
|
||||||
scrollbar-3dlight-color:#000;
|
|
||||||
scrollbar-darkshadow-color:#000;
|
|
||||||
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
|
||||||
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
|
||||||
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,163 +0,0 @@
|
|||||||
<template>
|
|
||||||
<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="each-chat-member"
|
|
||||||
:style="member.userId === userId ?'color:red':''"
|
|
||||||
:title="member.memberName"
|
|
||||||
>{{ member.memberName }}</div>
|
|
||||||
<!-- :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'" -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
// getSimulationMembersNew,
|
|
||||||
import {getSimulationChatMemberNew} from '@/api/chat';
|
|
||||||
import ConstConfig from '@/scripts/ConstConfig';
|
|
||||||
import Cookies from 'js-cookie';
|
|
||||||
export default {
|
|
||||||
name: 'ChatMemberList',
|
|
||||||
props: {
|
|
||||||
group: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
currentCoversition:{
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showMembers:true,
|
|
||||||
memberList:[]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
userId() {
|
|
||||||
return this.$store.state.user.id;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
currentCoversition:function (val, old) {
|
|
||||||
if (val) {
|
|
||||||
this.getSimulationMembers();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'$store.state.socket.acceptInviteChat':function(val) {
|
|
||||||
this.getSimulationMembers();
|
|
||||||
},
|
|
||||||
'$store.state.socket.quitCoversition':function(val) {
|
|
||||||
this.getSimulationMembers();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
getSimulationMembers() {
|
|
||||||
this.memberList = [];
|
|
||||||
if (this.currentCoversition.id) {
|
|
||||||
getSimulationChatMemberNew(this.$route.query.group, this.currentCoversition.id).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);
|
|
||||||
lastData = lastData.filter(memberIn=>{ return memberIn.role != '观众'; });
|
|
||||||
lastData.map(member=>{
|
|
||||||
const deviceName = member.deviceName ? '-' + member.deviceName : '';
|
|
||||||
const memberName = member.name ? '-' + member.name : '';
|
|
||||||
member.memberName = member.role + deviceName + memberName;
|
|
||||||
return member;
|
|
||||||
});
|
|
||||||
this.memberList = lastData;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.memberAnimate{
|
|
||||||
transform: translateX(97%);
|
|
||||||
}
|
|
||||||
.chat-box-members{
|
|
||||||
position: absolute;
|
|
||||||
width: 140px;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
border-right: 1px #dedede solid;
|
|
||||||
border-radius: 0px 5px 5px 0px;
|
|
||||||
z-index: 2;
|
|
||||||
transition: transform 1s;
|
|
||||||
padding: 12px 2px 10px 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.chat-member-title{
|
|
||||||
}
|
|
||||||
.chat-member-list{
|
|
||||||
margin-top: 13px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-left: 2px;
|
|
||||||
height: 350px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.each-chat-member{
|
|
||||||
margin-bottom: 10px;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.each-chat-member-outline{
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
|
|
||||||
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
|
||||||
.chat-member-list::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
// height: 110px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
}
|
|
||||||
/*定义滚动条轨道 内阴影+圆角*/
|
|
||||||
.chat-member-list::-webkit-scrollbar-track {
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #FFFFFF;;
|
|
||||||
}
|
|
||||||
/*定义滑块 内阴影+圆角*/
|
|
||||||
.chat-member-list::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 10px;
|
|
||||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
|
||||||
background-color: #cacaca;
|
|
||||||
}
|
|
||||||
/*滑块效果*/
|
|
||||||
.chat-member-list::-webkit-scrollbar-thumb:hover {
|
|
||||||
border-radius: 5px;
|
|
||||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
||||||
background: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
/*IE滚动条颜色*/
|
|
||||||
html {
|
|
||||||
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
|
|
||||||
scrollbar-highlight-color:#000;
|
|
||||||
scrollbar-3dlight-color:#000;
|
|
||||||
scrollbar-darkshadow-color:#000;
|
|
||||||
scrollbar-Shadow-color:#adadad;/*滑块边色*/
|
|
||||||
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
|
|
||||||
scrollbar-track-color:#eeeeee;/*背景颜色*/
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-show="dialogVisible" class="chat-popup">
|
|
||||||
<div class="chat-setting-header">
|
|
||||||
<div class="chat-setting-title">设置</div>
|
|
||||||
<div class="chat-setting-close">
|
|
||||||
<i class="el-icon-close" @click="dialogVisible=false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chat-setting-content">
|
|
||||||
<div class="chat-setting-language">
|
|
||||||
<div class="setting-language-title">语言: </div>
|
|
||||||
<el-switch
|
|
||||||
v-model="form.language"
|
|
||||||
class="setting-language-select"
|
|
||||||
active-color="#409EFF"
|
|
||||||
inactive-color="#ff4949"
|
|
||||||
active-text="中"
|
|
||||||
inactive-text="En"
|
|
||||||
active-value="zh"
|
|
||||||
inactive-value="en"
|
|
||||||
@change="changeLanguage()"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="chat-setting-sex">
|
|
||||||
<div class="setting-sex-title">性别: </div>
|
|
||||||
<el-switch
|
|
||||||
v-model="form.sex"
|
|
||||||
class="setting-sex-select"
|
|
||||||
active-color="#409EFF"
|
|
||||||
inactive-color="#ff4949"
|
|
||||||
active-icon-class="el-icon-male"
|
|
||||||
inactive-icon-class="el-icon-female"
|
|
||||||
active-value="1"
|
|
||||||
inactive-value="0"
|
|
||||||
@change="changeSex()"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'ChatSetting',
|
|
||||||
props:{
|
|
||||||
form:{
|
|
||||||
type:Object,
|
|
||||||
required:true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialogVisible: false,
|
|
||||||
loading:false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
doShow() {
|
|
||||||
this.dialogVisible = true;
|
|
||||||
},
|
|
||||||
doClose() {
|
|
||||||
this.dialogVisible = false;
|
|
||||||
},
|
|
||||||
changeLanguage() {
|
|
||||||
this.$emit('setSetting', this.form);
|
|
||||||
},
|
|
||||||
changeSex() {
|
|
||||||
this.$emit('setSetting', this.form);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.chat-popup{
|
|
||||||
position: absolute;
|
|
||||||
width: 54%;
|
|
||||||
height: 143px;
|
|
||||||
border: 1px #dedede solid;
|
|
||||||
left: 33%;
|
|
||||||
top: 24%;
|
|
||||||
z-index: 7;
|
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-box-shadow: 3px 3px 3px #dedede;
|
|
||||||
box-shadow: 3px 3px 3px #dedede;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.chat-setting-header{
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-top: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-bottom: 1px #dedede solid;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
}
|
|
||||||
.chat-setting-title{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.chat-setting-close{
|
|
||||||
float: right;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 5px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.chat-setting-content{
|
|
||||||
|
|
||||||
}
|
|
||||||
.chat-setting-language,.chat-setting-sex{
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.setting-language-title,.setting-sex-title{
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-left: 20px;
|
|
||||||
vertical-align: top;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
.setting-language-select,.setting-sex-select{
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss">
|
|
||||||
.setting-sex-select .el-icon-male,.setting-sex-select .el-icon-female{
|
|
||||||
font-size:18px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-show="dialogVisible" class="chatTooltipAll">
|
|
||||||
<div class="chatTooltip">
|
|
||||||
<div class="chatTooltipHeader">
|
|
||||||
{{ userName }} 邀请您加入会话！
|
|
||||||
</div>
|
|
||||||
<div class="chatTooltipBootom">
|
|
||||||
<div class="create-group-bottom">
|
|
||||||
<el-button :loading="loading" size="small" type="primary" @click="doCreate">接受</el-button>
|
|
||||||
<el-button size="small" @click="doClose">拒绝</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import ConstConfig from '@/scripts/ConstConfig';
|
|
||||||
import Cookies from 'js-cookie';
|
|
||||||
import {acceptCoversitionInvite} from '@/api/chat';
|
|
||||||
export default {
|
|
||||||
name:'ChatTooltip',
|
|
||||||
props: {
|
|
||||||
group: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
userName:'',
|
|
||||||
dialogVisible:false,
|
|
||||||
loading:false,
|
|
||||||
conversationId:''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
'$store.state.socket.inviteOtherIntoChat':function(val) {
|
|
||||||
this.userName = this.coverName(val);
|
|
||||||
this.dialogVisible = true;
|
|
||||||
this.conversationId = val.conversationId;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// {"conversationId":"22e10b17-7a6c-4b1b-8724-f87fb2053b76","from":{"id":"17","userId":"75","name":"赵",
|
|
||||||
// "role":"STATION_SUPERVISOR","deviceType":"STATION","deviceCode":"Station32955","deviceName":"世纪大道","online":true,"robot":false}
|
|
||||||
methods:{
|
|
||||||
coverName(inviteUser) {
|
|
||||||
const member = inviteUser.from;
|
|
||||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
|
||||||
let data = member.role;
|
|
||||||
roleTypeList.forEach(function(element) {
|
|
||||||
const rolename = element.value;
|
|
||||||
if (Cookies.get('user_lang') == 'en') {
|
|
||||||
data = data.replace(rolename, element.enLabel);
|
|
||||||
} else {
|
|
||||||
data = data.replace(rolename, element.label);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const deviceName = member.deviceName ? '-' + member.deviceName : '';
|
|
||||||
const memberName = member.name ? '-' + member.name : '';
|
|
||||||
return data + deviceName + memberName;
|
|
||||||
},
|
|
||||||
doCreate() {
|
|
||||||
this.loading = true;
|
|
||||||
acceptCoversitionInvite(this.group, this.conversationId).then(res=>{
|
|
||||||
this.loading = false;
|
|
||||||
this.dialogVisible = false;
|
|
||||||
this.$emit('getCoversitionList');
|
|
||||||
}).catch(error=>{
|
|
||||||
this.$messageBox('接受邀请失败: ' + error.message);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
doClose() {
|
|
||||||
this.dialogVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.chatTooltip{
|
|
||||||
position: absolute;
|
|
||||||
width: 290px;
|
|
||||||
left: 32%;
|
|
||||||
top: 42%;
|
|
||||||
z-index: 5;
|
|
||||||
background: #fff;
|
|
||||||
padding: 15px;
|
|
||||||
box-shadow: #969090 0px 0px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
line-height: 20px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
.chatTooltipHeader{
|
|
||||||
margin-top:10px;
|
|
||||||
font-size:14px;
|
|
||||||
}
|
|
||||||
.chatTooltipBootom{
|
|
||||||
margin-top:10px;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom:10px;
|
|
||||||
}
|
|
||||||
.chatTooltipAll{
|
|
||||||
position:absolute;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -51,7 +51,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-box-content">
|
<div class="chat-box-content">
|
||||||
<chat-content ref="chatContent" :project="project" :is-answering="IsAnswering" :conversition-id="conversitionId" :message-list="messageList" />
|
<chat-content
|
||||||
|
ref="chatContent"
|
||||||
|
:project="project"
|
||||||
|
:is-answering="IsAnswering"
|
||||||
|
:conversition-id="conversitionId"
|
||||||
|
:conversition-member-list="conversitionMemberList"
|
||||||
|
:message-list="messageList"
|
||||||
|
:simulation-users="simulationUsers"
|
||||||
|
@changeMessageList="changeMessageList"
|
||||||
|
/>
|
||||||
<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" />
|
||||||
@ -268,7 +277,7 @@ export default {
|
|||||||
this.$refs.chatSetting.doClose();
|
this.$refs.chatSetting.doClose();
|
||||||
} else {
|
} else {
|
||||||
this.firstClick && this.$nextTick(() => {
|
this.firstClick && this.$nextTick(() => {
|
||||||
this.userRole == 'AUDIENCE' && this.isAudienceInitData();
|
this.isAudienceInitData();
|
||||||
if (this.$refs.tree) {
|
if (this.$refs.tree) {
|
||||||
this.$refs.tree.filter(this.queryMember);
|
this.$refs.tree.filter(this.queryMember);
|
||||||
}
|
}
|
||||||
@ -303,7 +312,7 @@ export default {
|
|||||||
startConversition(this.group, this.memberIdList).then(resp => {
|
startConversition(this.group, this.memberIdList).then(resp => {
|
||||||
this.conversitionId = resp.data.id;
|
this.conversitionId = resp.data.id;
|
||||||
this.conversitionMemberList = resp.data.memberList;
|
this.conversitionMemberList = resp.data.memberList;
|
||||||
this.messageList = resp.data.messageList;
|
this.messageList = [];
|
||||||
this.userString = '';
|
this.userString = '';
|
||||||
this.isConversitionCreator = true;
|
this.isConversitionCreator = true;
|
||||||
this.$message.success('创建会话成功！');
|
this.$message.success('创建会话成功！');
|
||||||
@ -470,7 +479,17 @@ export default {
|
|||||||
this.conversitionId = data.id;
|
this.conversitionId = data.id;
|
||||||
this.conversitionMemberList = data.memberList;
|
this.conversitionMemberList = data.memberList;
|
||||||
this.isConversitionCreator = false;
|
this.isConversitionCreator = false;
|
||||||
this.messageList = data.messageList;
|
this.messageList = [];
|
||||||
|
if (data.messageList && data.messageList) {
|
||||||
|
data.messageList.forEach(message => {
|
||||||
|
const member = this.memberData[message.memberId];
|
||||||
|
message.src = `/audio/${message.audioPath}`;
|
||||||
|
if (member) {
|
||||||
|
message.self = this.$store.state.userId == member.userId;
|
||||||
|
}
|
||||||
|
this.messageList.push(message);
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
connectMember(val) {
|
connectMember(val) {
|
||||||
this.conversitionMemberList.forEach(member => {
|
this.conversitionMemberList.forEach(member => {
|
||||||
@ -479,19 +498,55 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
sortByMessageTime(message1, message2) {
|
||||||
|
const time1 = new Date(message1.time).valueOf();
|
||||||
|
const time2 = new Date(message2.time).valueOf();
|
||||||
|
return time1 - time2;
|
||||||
|
},
|
||||||
isAudienceInitData() {
|
isAudienceInitData() {
|
||||||
getAllConversition(this.group).then(resp => {
|
getAllConversition(this.group).then(resp => {
|
||||||
if (resp.data && resp.data.length) {
|
if (resp.data && resp.data.length) {
|
||||||
let messageList = [];
|
const messageList = [];
|
||||||
resp.data.forEach(conversation => {
|
resp.data.forEach(conversation => {
|
||||||
messageList = [...messageList, ...conversation.messageList];
|
if (this.userRole == 'AUDIENCE') {
|
||||||
|
(conversation.messageList || []).forEach(message => {
|
||||||
|
const member = this.memberData[message.memberId];
|
||||||
|
message.src = `/audio/${message.audioPath}`;
|
||||||
|
message.members = conversation.memberList;
|
||||||
|
if (member) {
|
||||||
|
message.self = this.$store.state.userId == member.userId;
|
||||||
|
}
|
||||||
|
messageList.push(message);
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
const user = this.simulationUsers[this.$store.state.user.id];
|
||||||
|
!conversation.over && conversation.memberList.forEach(member =>{
|
||||||
|
if (member.memberId == user.memberId) {
|
||||||
|
this.conversitionMemberList = conversation.memberList;
|
||||||
|
this.conversitionId = conversation.id;
|
||||||
|
this.messageList = [];
|
||||||
|
conversation.messageList.forEach(message => {
|
||||||
|
const member = this.memberData[message.memberId];
|
||||||
|
message.src = `/audio/${message.audioPath}`;
|
||||||
|
if (member) {
|
||||||
|
message.self = this.$store.state.userId == member.userId;
|
||||||
|
}
|
||||||
|
this.messageList.push(message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.messageList = messageList.sort(this.sortByMessageTime);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.conversitionMemberList = [];
|
this.conversitionMemberList = [];
|
||||||
this.$store.state.training.memberList.forEach(item =>{
|
this.$store.state.training.memberList.forEach(item =>{
|
||||||
this.conversitionMemberList.push({memberId: item.id, connect:true });
|
this.conversitionMemberList.push({memberId: item.id, connect:true });
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
changeMessageList(data) {
|
||||||
|
this.messageList.push(data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -5,15 +5,15 @@
|
|||||||
<div :class="chatContent.self?'rightUser':'leftUser'">
|
<div :class="chatContent.self?'rightUser':'leftUser'">
|
||||||
<div class="userHeader">
|
<div class="userHeader">
|
||||||
<!-- chatContent.all&& -->
|
<!-- chatContent.all&& -->
|
||||||
<div v-if="!chatContent.self" class="userName">{{ covertName(chatContent.member,false) }}</div>
|
<div v-if="!chatContent.self" class="userName">{{ covertName(chatContent,false) }}</div>
|
||||||
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
|
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ chatContent.time }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="userBubble" @click="playAudio(baseUrl+chatContent.src)">
|
<div class="userBubble" @click="playAudio(baseUrl+chatContent.src)">
|
||||||
<div class="userMessage">
|
<div class="userMessage">
|
||||||
<!-- chatContent.all&& -->
|
<!-- chatContent.all&& -->
|
||||||
<span v-if="!chatContent.member.robot&&chatContent.all">{{ covertName(chatContent.targetUser,true) }}</span>
|
<span>{{ covertName(chatContent,true) }}</span>
|
||||||
<span class="el-icon-video-play playicon" />
|
<span class="el-icon-video-play playicon" />
|
||||||
<span class="messageText">{{ chatContent.message }}</span>
|
<span class="messageText">{{ chatContent.content }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<audio id="audioPlay" style="display:none" />
|
<audio id="audioPlay" style="display:none" />
|
||||||
@ -39,6 +39,14 @@ export default {
|
|||||||
conversitionId: {
|
conversitionId: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
|
},
|
||||||
|
conversitionMemberList: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
simulationUsers: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -54,10 +62,15 @@ export default {
|
|||||||
watch:{
|
watch:{
|
||||||
'$store.state.socket.conversationInfo':function (val, old) { // 仿真聊天
|
'$store.state.socket.conversationInfo':function (val, old) { // 仿真聊天
|
||||||
const conversationInfo = this.$store.state.socket.conversationInfo;
|
const conversationInfo = this.$store.state.socket.conversationInfo;
|
||||||
|
const member = this.$store.state.training.memberData[val.message.memberId];
|
||||||
|
conversationInfo.message.src = `/audio/${conversationInfo.message.audioPath}`;
|
||||||
|
if (member) {
|
||||||
|
conversationInfo.message.self = this.$store.state.userId == member.userId;
|
||||||
|
}
|
||||||
if (this.conversitionId == val.id) {
|
if (this.conversitionId == val.id) {
|
||||||
this.chatContentList.push(conversationInfo);
|
this.$emit('changeMessageList', conversationInfo.message);
|
||||||
if (simulationText.userId != this.$store.state.user.id) {
|
if (member && member.userId != this.$store.state.user.id) {
|
||||||
this.currentAudioList.push(this.baseUrl + conversationInfo.src);
|
this.currentAudioList.push(this.baseUrl + '/audio/' + conversationInfo.message.audioPath);
|
||||||
if (!this.isPlay) {
|
if (!this.isPlay) {
|
||||||
this.isPlay = true;
|
this.isPlay = true;
|
||||||
this.playAllAudio();
|
this.playAllAudio();
|
||||||
@ -65,9 +78,9 @@ export default {
|
|||||||
}
|
}
|
||||||
this.scrollTop();
|
this.scrollTop();
|
||||||
} else if (this.userRole === 'AUDIENCE') {
|
} else if (this.userRole === 'AUDIENCE') {
|
||||||
this.messageList.push(conversationInfo.data);
|
this.$emit('changeMessageList', conversationInfo.message);
|
||||||
if (simulationText.userId != this.$store.state.user.id) {
|
if (member && member.userId != this.$store.state.user.id) {
|
||||||
this.currentAudioList.push(this.baseUrl + conversationInfo.src);
|
this.currentAudioList.push(this.baseUrl + '/audio/' + conversationInfo.message.audioPath);
|
||||||
if (!this.isPlay) {
|
if (!this.isPlay) {
|
||||||
this.isPlay = true;
|
this.isPlay = true;
|
||||||
this.playAllAudio();
|
this.playAllAudio();
|
||||||
@ -109,9 +122,9 @@ export default {
|
|||||||
document.querySelector('.chatcontentIn').scrollTop = scrollTop;
|
document.querySelector('.chatcontentIn').scrollTop = scrollTop;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
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;
|
||||||
},
|
// },
|
||||||
playAllAudio() {
|
playAllAudio() {
|
||||||
this.playEachAudio(this.currentAudioList[this.currentAudioIndex]);
|
this.playEachAudio(this.currentAudioList[this.currentAudioIndex]);
|
||||||
},
|
},
|
||||||
@ -132,41 +145,29 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
covertName(data, status) {
|
covertName(data, status) {
|
||||||
if (data != 'All') {
|
if (status) {
|
||||||
if (data instanceof Array) {
|
|
||||||
let result = '';
|
let result = '';
|
||||||
data.forEach(each=>{
|
const members = data.members || this.conversitionMemberList;
|
||||||
result += this.covertEachName(each, status);
|
(members || []).forEach(member => {
|
||||||
|
if (member.memberId != data.memberId) {
|
||||||
|
result += ('@' + this.covertEachName(member.memberId));
|
||||||
|
}
|
||||||
});
|
});
|
||||||
return result;
|
return result;
|
||||||
} else {
|
} else {
|
||||||
return this.covertEachName(data, status);
|
return this.covertEachName(data.memberId);
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return '@All';
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
covertEachName(data, status) {
|
covertEachName(memberId) {
|
||||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
let name = '';
|
||||||
roleTypeList.forEach(function(element) {
|
const member = this.$store.state.training.memberData[memberId];
|
||||||
const rolename = element.value;
|
if (member && member.userId) {
|
||||||
if (Cookies.get('user_lang') == 'en') {
|
const user = this.simulationUsers[member.userId];
|
||||||
if (rolename == data.role) {
|
name = member.label + '(' + user.nickName + ')';
|
||||||
data.role = element.enLabel;
|
} else if (member) {
|
||||||
}
|
name = member.label;
|
||||||
} else {
|
|
||||||
if (rolename == data.role) {
|
|
||||||
data.role = element.label;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const deviceName = data.deviceName ? '-' + data.deviceName : '';
|
|
||||||
const memberName = data.name ? '-' + data.name : '';
|
|
||||||
if (status) {
|
|
||||||
return '@' + data.role + deviceName + memberName;
|
|
||||||
} else {
|
|
||||||
return data.role + deviceName + memberName;
|
|
||||||
}
|
}
|
||||||
|
return name;
|
||||||
},
|
},
|
||||||
playAudio(audioUrl) {
|
playAudio(audioUrl) {
|
||||||
document.querySelector('#audioPlay').src = audioUrl;
|
document.querySelector('#audioPlay').src = audioUrl;
|
||||||
|
|||||||
@ -331,30 +331,30 @@ export default {
|
|||||||
item.scores.forEach(elem => {
|
item.scores.forEach(elem => {
|
||||||
if (elem.prdType === '01') {
|
if (elem.prdType === '01') {
|
||||||
this.showLocal = true;
|
this.showLocal = true;
|
||||||
localExamSocreRadio = elem.examSocreRadio * 100 * 60 / 100 / item.scores.length;
|
localExamSocreRadio = elem.examSocreRadio * 60 / item.scores.length;
|
||||||
localLessonPassRate = elem.lessonPassRate * 100 * 30 / 100 / item.scores.length;
|
localLessonPassRate = elem.lessonPassRate * 30 / item.scores.length;
|
||||||
totolScore += localExamSocreRadio * 100;
|
totolScore += localExamSocreRadio * 100;
|
||||||
totolScore += localLessonPassRate * 100;
|
totolScore += localLessonPassRate * 100;
|
||||||
} else if (elem.prdType === '02') {
|
} else if (elem.prdType === '02') {
|
||||||
this.showCenter = true;
|
this.showCenter = true;
|
||||||
centerExamSocreRadio = elem.examSocreRadio * 100 * 60 / 100 / item.scores.length;
|
centerExamSocreRadio = elem.examSocreRadio * 60 / item.scores.length;
|
||||||
centerLessonPassRate = elem.lessonPassRate * 100 * 30 / 100 / item.scores.length;
|
centerLessonPassRate = elem.lessonPassRate * 30 / item.scores.length;
|
||||||
totolScore += centerExamSocreRadio * 100;
|
totolScore += centerExamSocreRadio * 100;
|
||||||
totolScore += centerLessonPassRate * 100;
|
totolScore += centerLessonPassRate * 100;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
totolScore += item.attendance * 100 * 10 / 100 * 100;
|
totolScore += item.attendance * 100 * 10;
|
||||||
this.tableData.push(
|
this.tableData.push(
|
||||||
{
|
{
|
||||||
index: index + 1,
|
index: index + 1,
|
||||||
name: item.name,
|
name: item.name,
|
||||||
studentID: item.studentID,
|
studentID: item.studentID,
|
||||||
attendance: item.attendance * 100 * 10 / 100,
|
attendance: Math.round(item.attendance * 10) / 10,
|
||||||
localExamSocreRadio:localExamSocreRadio,
|
localExamSocreRadio: Math.round(localExamSocreRadio * 10) / 10,
|
||||||
localLessonPassRate: localLessonPassRate,
|
localLessonPassRate: Math.round(localLessonPassRate * 10) / 10,
|
||||||
centerExamSocreRadio: centerExamSocreRadio,
|
centerExamSocreRadio: Math.round(centerExamSocreRadio * 10) / 10,
|
||||||
centerLessonPassRate: centerLessonPassRate,
|
centerLessonPassRate: Math.round(centerLessonPassRate * 10) / 10,
|
||||||
totolScore: totolScore / 100
|
totolScore: Math.round(totolScore) / 100
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}).catch(() =>{
|
}).catch(() =>{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user