剧本预览代码调整
聊天会话代码优化
This commit is contained in:
joylink_cuiweidong
parent
7e8aa6e72c
commit
54b838a46b
459
src/views/newMap/chatView/chatBox.vue
Normal file
459
src/views/newMap/chatView/chatBox.vue
Normal file
@ -0,0 +1,459 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chatBox" :style="{'bottom':bottom+'px'}">
|
||||||
|
<div v-show="!minimize" class="chat-box">
|
||||||
|
<div class="chat-box-main">
|
||||||
|
<div class="chat-window">
|
||||||
|
<div class="chat-box-header">
|
||||||
|
<div class="chat-box-header-title">
|
||||||
|
<el-input v-if="isShow" v-model="queryMember" size="small" placeholder="请输入搜索人员">
|
||||||
|
<el-button slot="append" icon="el-icon-search" />
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="minimality" @click="handleMinimality('min')">
|
||||||
|
<i class="el-icon-remove" />
|
||||||
|
</div>
|
||||||
|
<div class="chat-setting" @click="handleSetting()">
|
||||||
|
<i class="el-icon-s-tools" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="isShow" class="chat-box-content">
|
||||||
|
<el-tree
|
||||||
|
ref="tree"
|
||||||
|
:data="treeData"
|
||||||
|
:props="defaultProps"
|
||||||
|
node-key="id"
|
||||||
|
default-expand-all
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
show-checkbox
|
||||||
|
style="margin: 10px;overflow-y: auto;height: 100%;margin-right: 0;"
|
||||||
|
@check-change="handleCheckChange"
|
||||||
|
>
|
||||||
|
<span :id="data.id" slot-scope="{ node, data }">
|
||||||
|
<span style="font-size: 14px">{{ data.label }}</span>
|
||||||
|
</span>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
<div v-else class="chat-box-content">
|
||||||
|
<div class="chatcontent">
|
||||||
|
<chat-content ref="chatContent" :chat-content-list="chatContentList" />
|
||||||
|
<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>
|
||||||
|
<chat-member-list ref="chatMemberList" :current-member-list="currentMemberList" />
|
||||||
|
</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" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ChatSetting from './chatSetting';
|
||||||
|
import ChatMemberList from './chatMemberList';
|
||||||
|
import ChatContent from './chatContent';
|
||||||
|
// startConversition, overSimulationConversition, getAllConversition
|
||||||
|
import {sendSimulationConversition} from '@/api/chat';
|
||||||
|
export default {
|
||||||
|
name:'ChatBoxDraft',
|
||||||
|
components:{
|
||||||
|
ChatSetting,
|
||||||
|
ChatMemberList,
|
||||||
|
ChatContent
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
isShow:{
|
||||||
|
type:Boolean,
|
||||||
|
required:true
|
||||||
|
},
|
||||||
|
treeData:{
|
||||||
|
type:Object,
|
||||||
|
required:true
|
||||||
|
},
|
||||||
|
group: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
conversitionId:{
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
currentMemberList:{
|
||||||
|
type:Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
chatContentList:{
|
||||||
|
type:Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
minimize:true,
|
||||||
|
bottom:15,
|
||||||
|
queryMember:'',
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'label'
|
||||||
|
},
|
||||||
|
form:{
|
||||||
|
language:'zh',
|
||||||
|
sex:'1'
|
||||||
|
},
|
||||||
|
recordSending:false,
|
||||||
|
recorders: null,
|
||||||
|
seconds:0,
|
||||||
|
inter:null,
|
||||||
|
microphone:null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'$store.state.training.prdType': function(val) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const object = document.querySelector('.menuButton');
|
||||||
|
if (object) {
|
||||||
|
const objectBottom = parseInt(object.style.bottom) || 0;
|
||||||
|
this.bottom = this.bottom + object.offsetHeight + objectBottom;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
queryMember(val) {
|
||||||
|
if (this.$refs.tree) {
|
||||||
|
this.$refs.tree.filter(val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleSetting() {
|
||||||
|
this.$refs.chatSetting.doShow();
|
||||||
|
},
|
||||||
|
filterNode(value, data) {
|
||||||
|
return data.label.indexOf(value) !== -1;
|
||||||
|
},
|
||||||
|
handleCheckChange() {
|
||||||
|
const memberList = this.$refs.tree.getCheckedNodes();
|
||||||
|
this.$emit('checkedMember', memberList);
|
||||||
|
},
|
||||||
|
handleMinimality(data) {
|
||||||
|
if (data == 'min') {
|
||||||
|
this.minimize = true;
|
||||||
|
this.$refs.chatSetting.doClose();
|
||||||
|
} else {
|
||||||
|
this.minimize = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setSetting(data) {
|
||||||
|
this.form = data;
|
||||||
|
},
|
||||||
|
// 停止录制
|
||||||
|
stopRecording() {
|
||||||
|
const that = this;
|
||||||
|
this.recorders.stopRecording(function(blobURL) {
|
||||||
|
const data = URL.createObjectURL(that.recorders.getBlob());
|
||||||
|
console.log('--------', data);
|
||||||
|
clearInterval(that.inter);
|
||||||
|
that.seconds = 0;
|
||||||
|
const blob = that.recorders.getBlob();
|
||||||
|
const fd = new FormData();
|
||||||
|
fd.append('file', blob);
|
||||||
|
sendSimulationConversition(that.group, that.conversitionId, fd)
|
||||||
|
.then((data) => {
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
if (that.microphone) {
|
||||||
|
that.microphone.stop();
|
||||||
|
that.microphone = null;
|
||||||
|
that.recordSending = false;
|
||||||
|
that.recorders = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cancleRecording() {
|
||||||
|
if (this.microphone) {
|
||||||
|
clearInterval(this.inter);
|
||||||
|
this.seconds = 0;
|
||||||
|
this.microphone.stop();
|
||||||
|
this.microphone = null;
|
||||||
|
this.recordSending = false;
|
||||||
|
this.recorders = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// .chat-box-footer-quit{
|
||||||
|
// font-size: 12px;
|
||||||
|
// padding: 5px 15px;
|
||||||
|
// color: #fff;
|
||||||
|
// float: left;
|
||||||
|
// margin-left: 10px;
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
// cursor: pointer;
|
||||||
|
// }
|
||||||
|
.chatBox{
|
||||||
|
width: 503px;
|
||||||
|
position: absolute;
|
||||||
|
padding-left:5px;
|
||||||
|
left: 0;
|
||||||
|
bottom:15px;
|
||||||
|
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: 4px;
|
||||||
|
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{
|
||||||
|
|
||||||
|
// }
|
||||||
|
.chatcontent{
|
||||||
|
height: 100%;
|
||||||
|
width: 362px;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .chat-box-footer{
|
||||||
|
// display: inline-block;
|
||||||
|
// width: 100%;
|
||||||
|
// position: relative;
|
||||||
|
// }
|
||||||
|
.chat-window{
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.chat-setting{
|
||||||
|
float: right;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
// .chat-box-footer-tool{
|
||||||
|
// width: 100%;
|
||||||
|
// height: 30px;
|
||||||
|
// }
|
||||||
|
// .chat-box-footer-send{
|
||||||
|
// font-size: 12px;
|
||||||
|
// text-align: center;
|
||||||
|
// float: right;
|
||||||
|
// margin-right: 10px;
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
// cursor: pointer;
|
||||||
|
// padding: 5px 15px;
|
||||||
|
// }
|
||||||
|
// .chat-box-create-coversite{
|
||||||
|
// font-size: 12px;
|
||||||
|
// float: right;
|
||||||
|
// margin-right: 10px;
|
||||||
|
// margin-top: 18px;
|
||||||
|
// cursor: pointer;
|
||||||
|
// padding: 5px 15px;
|
||||||
|
// }
|
||||||
|
.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-send.disbled{
|
||||||
|
// cursor: no-drop;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .scriptTip{
|
||||||
|
// position: absolute;
|
||||||
|
// width: 260px;
|
||||||
|
// padding: 10px;
|
||||||
|
// background: rgb(250, 246, 3);
|
||||||
|
// right: 7px;
|
||||||
|
// bottom:45px;
|
||||||
|
// border-radius: 5px;
|
||||||
|
// font-size: 14px;
|
||||||
|
// color: #000000;
|
||||||
|
// z-index: 2;
|
||||||
|
// }
|
||||||
|
// .scriptTip::after{
|
||||||
|
// content: '';
|
||||||
|
// position: absolute;
|
||||||
|
// width: 0;
|
||||||
|
// height: 0;
|
||||||
|
// border-left: 10px solid transparent;
|
||||||
|
// border-right: 10px solid transparent;
|
||||||
|
// border-top: 8px solid #faf603;
|
||||||
|
// right: 16px;
|
||||||
|
// bottom: -7px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .userString{
|
||||||
|
// height: 50px;
|
||||||
|
// width: 409px;
|
||||||
|
// position: absolute;
|
||||||
|
// left: 0;
|
||||||
|
// top: 0;
|
||||||
|
// padding: 4px 5px;
|
||||||
|
// overflow-x: auto;
|
||||||
|
// font-size: 13px;
|
||||||
|
// line-height: 135%;
|
||||||
|
// resize: none;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
181
src/views/newMap/chatView/chatContent.vue
Normal file
181
src/views/newMap/chatView/chatContent.vue
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chatcontentIn">
|
||||||
|
<div class="chatcontentInner">
|
||||||
|
<div v-for="(chatContent,index) in chatContentList" :key="index" class="chatContentInClass">
|
||||||
|
<!-- <div :class="chatContent.userId?'rightUser':'leftUser'">
|
||||||
|
<div class="userHeader">
|
||||||
|
<div v-if="!chatContent.self" class="userName">{{ covertName(chatContent,false) }}</div>
|
||||||
|
<div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ chatContent.time }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="userBubble" @click="playAudio(baseUrl+chatContent.src)">
|
||||||
|
<div class="userMessage">
|
||||||
|
<span class="el-icon-video-play playicon" />
|
||||||
|
<span class="messageText">{{ chatContent.content }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<audio id="audioPlay" style="display:none" />
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
chatContentList:{
|
||||||
|
type:Array,
|
||||||
|
required:true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// currentAudioList:[],
|
||||||
|
// currentAudioIndex:0,
|
||||||
|
// isPlay:false,
|
||||||
|
baseUrl:process.env.VUE_APP_VOICE_API
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.coversition = this.currentCoversition;
|
||||||
|
// this.inintData();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
scrollTop() {
|
||||||
|
this.$nextTick(function() {
|
||||||
|
const scrollTop = document.querySelector('.chatcontentInner').offsetHeight - document.querySelector('.chatcontentIn').offsetHeight + 30;
|
||||||
|
document.querySelector('.chatcontentIn').scrollTop = scrollTop;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 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 (status) {
|
||||||
|
// let result = '';
|
||||||
|
// const members = data.members || this.conversitionMemberList;
|
||||||
|
// (members || []).forEach(member => {
|
||||||
|
// if (member.memberId != data.memberId) {
|
||||||
|
// result += ('@' + this.covertEachName(member.memberId));
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// return result;
|
||||||
|
// } else {
|
||||||
|
// return this.covertEachName(data.memberId);
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// covertEachName(memberId) {
|
||||||
|
// let name = '';
|
||||||
|
// const member = this.$store.state.training.memberData[memberId];
|
||||||
|
// if (member && member.userId) {
|
||||||
|
// const user = this.simulationUsers[member.userId];
|
||||||
|
// name = member.label + '(' + user.nickName + ')';
|
||||||
|
// } else if (member) {
|
||||||
|
// name = member.label;
|
||||||
|
// }
|
||||||
|
// return name;
|
||||||
|
// },
|
||||||
|
// playAudio(audioUrl) {
|
||||||
|
// document.querySelector('#audioPlay').src = audioUrl;
|
||||||
|
// document.querySelector('#audioPlay').play();
|
||||||
|
// },
|
||||||
|
// conversationChange() {
|
||||||
|
// this.currentAudioList = [];
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chatcontentIn{
|
||||||
|
height: 100%;
|
||||||
|
width: 380px;
|
||||||
|
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>
|
||||||
116
src/views/newMap/chatView/chatMemberList.vue
Normal file
116
src/views/newMap/chatView/chatMemberList.vue
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chat-box-members">
|
||||||
|
<div class="chat-member-title">成员列表</div>
|
||||||
|
<div class="chat-member-list">
|
||||||
|
<div
|
||||||
|
v-for="member in currentMemberList"
|
||||||
|
:key="member.id"
|
||||||
|
:style="computedStyle(member)"
|
||||||
|
class="each-chat-member"
|
||||||
|
:title="member.memberName"
|
||||||
|
>{{ member.memberName }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ChatMemberList',
|
||||||
|
props: {
|
||||||
|
currentMemberList:{
|
||||||
|
type:Array,
|
||||||
|
required:true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
userId() {
|
||||||
|
return this.$store.state.user.id;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
computedStyle(member) {
|
||||||
|
if (member.userId && member.userId == this.userId) {
|
||||||
|
return {color: 'red'};
|
||||||
|
} else if (member.userId) {
|
||||||
|
return {color: member.connect && member.online ? 'green' : 'gray'};
|
||||||
|
} else {
|
||||||
|
return {color: member.connect ? 'green' : 'gray'};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.memberAnimate{
|
||||||
|
transform: translateX(97%);
|
||||||
|
}
|
||||||
|
.chat-box-members{
|
||||||
|
position: absolute;
|
||||||
|
width: 140px;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border-left: 1px #dedede solid;
|
||||||
|
padding: 12px 2px 10px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.chat-member-title{
|
||||||
|
}
|
||||||
|
.chat-member-list{
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 0px;
|
||||||
|
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>
|
||||||
126
src/views/newMap/chatView/chatSetting.vue
Normal file
126
src/views/newMap/chatView/chatSetting.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<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>
|
||||||
@ -5,7 +5,7 @@
|
|||||||
<map-system-draft ref="mapCanvas" @back="back" />
|
<map-system-draft ref="mapCanvas" @back="back" />
|
||||||
</transition>
|
</transition>
|
||||||
|
|
||||||
<chat-box ref="chatbox" :group="group" :user-role="userRole" />
|
<script-preview-chat ref="chatbox" :group="group" :user-role="userRole" />
|
||||||
<div class="display-draft">
|
<div class="display-draft">
|
||||||
<el-button v-if="isscriptRun&&!dataError" type="danger" @click="handleQuitQuest">{{ $t('display.demon.exitScript') }}</el-button>
|
<el-button v-if="isscriptRun&&!dataError" type="danger" @click="handleQuitQuest">{{ $t('display.demon.exitScript') }}</el-button>
|
||||||
<el-button type="primary" @click="back">{{ $t('display.demon.back') }}</el-button>
|
<el-button type="primary" @click="back">{{ $t('display.demon.back') }}</el-button>
|
||||||
@ -37,7 +37,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import RunPlanLoad from './demon/runPlanLoad';
|
import RunPlanLoad from './demon/runPlanLoad';
|
||||||
import RunPlanView from './demon/runPlanView';
|
import RunPlanView from './demon/runPlanView';
|
||||||
import ChatBox from '../jointTrainingNew/chatView/chatBox';
|
import ScriptPreviewChat from './scriptPreviewChat.vue';
|
||||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||||
import { quitScriptNew, scriptRePreview } from '@/api/simulation';
|
import { quitScriptNew, scriptRePreview } from '@/api/simulation';
|
||||||
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
|
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
|
||||||
@ -62,7 +62,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
RunPlanLoad,
|
RunPlanLoad,
|
||||||
RunPlanView,
|
RunPlanView,
|
||||||
ChatBox,
|
ScriptPreviewChat,
|
||||||
MapSystemDraft,
|
MapSystemDraft,
|
||||||
MenuSchema,
|
MenuSchema,
|
||||||
MenuSystemTime,
|
MenuSystemTime,
|
||||||
|
|||||||
40
src/views/newMap/displayNew/scriptPreviewChat.vue
Normal file
40
src/views/newMap/displayNew/scriptPreviewChat.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<chat-box
|
||||||
|
ref="chatbox"
|
||||||
|
:group="group"
|
||||||
|
:is-show="isShow"
|
||||||
|
:tree-data="treeData"
|
||||||
|
:conversition-id="conversitionId"
|
||||||
|
:current-member-list="currentMemberList"
|
||||||
|
:chat-content-list="chatContentList"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ChatBox from '../chatView/chatBox.vue';
|
||||||
|
export default {
|
||||||
|
name:'ScriptPreviewChat',
|
||||||
|
components:{
|
||||||
|
ChatBox
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
group: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
userRole: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow:false,
|
||||||
|
treeData:{},
|
||||||
|
conversitionId:'',
|
||||||
|
currentMemberList:[],
|
||||||
|
chatContentList:[]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user