剧本预览代码调整
聊天会话代码优化
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" />
|
||||
</transition>
|
||||
|
||||
<chat-box ref="chatbox" :group="group" :user-role="userRole" />
|
||||
<script-preview-chat ref="chatbox" :group="group" :user-role="userRole" />
|
||||
<div class="display-draft">
|
||||
<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>
|
||||
@ -37,7 +37,7 @@
|
||||
<script>
|
||||
import RunPlanLoad from './demon/runPlanLoad';
|
||||
import RunPlanView from './demon/runPlanView';
|
||||
import ChatBox from '../jointTrainingNew/chatView/chatBox';
|
||||
import ScriptPreviewChat from './scriptPreviewChat.vue';
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
import { quitScriptNew, scriptRePreview } from '@/api/simulation';
|
||||
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
components: {
|
||||
RunPlanLoad,
|
||||
RunPlanView,
|
||||
ChatBox,
|
||||
ScriptPreviewChat,
|
||||
MapSystemDraft,
|
||||
MenuSchema,
|
||||
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