This commit is contained in:
joylink_cuiweidong 2020-09-25 14:47:13 +08:00
commit 4dfb904133
11 changed files with 438 additions and 266 deletions

View File

@ -0,0 +1,21 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1601011033041'); /* IE9 */
src: url('iconfont.eot?t=1601011033041#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALkAAsAAAAABqAAAAKXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBLIFAATYCJAMICwYABCAFhG0HLxvlBREVlA1kPxJst1FLIFoNS5FBOKGpFGODN0E8rn3OS7L/csCgEKngAcihQuG7wtQRSNbVu/9Ll766X2Mi1C3Z569yTHc7ubFzuQ5fhMN4lAEJDosjAQLyDLimfgI9yC8OaC4RQVHJkYADmw6sE0cj20hGvmHsApfwGAIEkKKItPq9o1gM1ioBZLfcWMLmwhgMy1kEX81Bg9zCwarL6hPgZvh9+QfFWVA4GqthkNtWafwrtAv0Ke+UWZ8gAgI67gAaKAIGZLQ23Q8aYZwmIG3IwL5qBX4Wep7vQvZqR9hfZ1UHAZAEFfekdFW3Wq0AMPF4JRgedTWokIKDjx+v+sPP5d27k3r/nd97DqqsEJQHL6/oiffvzwRE0069iA5++Or0ywAjnWX1m3jbIfOhtKN0BPMdYl+zENCBtIcLQ9luWPDKYuV1ztMuqBSG0iASiheefH92LHjgHiwJuHluWEJ48PHtUTC3qbn1d2gEAM/VBboJBBB48roqciG09r9dGQC+3n00GQY919DPC/acHoF/p+zZZ3S15VRGVdZ6FZWjVioggADAA/sj/Bhrib7RvGCJvl2vH8kpNJYs0rBFcAikFD4sDQigUMfxQCIdA40Yf6CA5g1AhPmAEuINtDBfpGF/4YjxD5+wlggwXuSFgXIqTYtQrJRh8sQy7Tt23Gqi2gPlcxNLVh3yF5KpjKFrOcXchjqSObZMt9xTZWTpW/TBc9Q0PQ7SV5SqVagOa9vmujdZad+C0UKQmCIZlHhCpVSvw/5oZUqfPyC5WSMmLU01yQsiJuXkyGVxepAbQ9er6V5emdzkPEoxxESvhXwwjzQaPTTUz6uQlLIUI5KDNdsexn0N1vqm9gPKWRuWVWXP0DjPz7IDAAA=') format('woff2'),
url('iconfont.woff?t=1601011033041') format('woff'),
url('iconfont.ttf?t=1601011033041') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1601011033041#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-yuyin:before {
content: "\e62b";
}

Binary file not shown.

View File

@ -0,0 +1,29 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="yuyin" unicode="&#58923;" d="M512.81 206.31c93.41 0 169.13 75.72 169.13 169.13V663c0 93.41-75.72 169.13-169.13 169.13S343.68 756.41 343.68 663v-287.56c0-93.41 75.72-169.13 169.13-169.13zM778.93 501.75c-17.05 0-30.87-13.82-30.87-30.87v-98.97c0-129.71-105.53-235.24-235.24-235.24S277.58 242.2 277.58 371.92v98.97c0 17.05-13.82 30.87-30.87 30.87s-30.87-13.82-30.87-30.87v-98.97c0-153.33 116.81-279.88 266.11-295.37v-78.36h-118.5c-17.05 0-30.87-13.82-30.87-30.87s13.82-30.87 30.87-30.87h295.52c17.05 0 30.87 13.82 30.87 30.87s-13.82 30.87-30.87 30.87H543.69v78.36c149.3 15.49 266.11 142.04 266.11 295.37v98.97c0 17.04-13.83 30.86-30.87 30.86z" horiz-adv-x="1024" />
</font>
</defs></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -4,6 +4,23 @@
@import './element-ui.scss';
@import './sidebar.scss';
@font-face {
font-family: 'iconfont';
src: url('./font/iconfont.eot');
src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
url('./font/iconfont.woff2') format('woff2'),
url('./font/iconfont.woff') format('woff'),
url('./font/iconfont.ttf') format('truetype'),
url('./font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;

View File

@ -1,24 +1,36 @@
<template>
<div class="chatBox" :class="{'active': drawer}" :style="{'bottom':bottom+'px'}">
<div class="menuTrainListBtn" @click="clickBtn">
<!-- <i class="el-icon-more" /> -->
<template v-if="userRole == 'DISPATCHER'">
<p style="margin: 0;"></p>
<p style="margin: 0;"></p>
<p style="margin: 0;"></p>
<p style="margin: 0;"></p>
</template>
<template v-if="userRole != 'AUDIENCE' && userRole != 'DISPATCHER'">
<p style="margin: 0;"></p>
<p style="margin: 0;"></p>
</template>
<template v-if="userRole == 'AUDIENCE'">
<p style="margin: 0;"></p>
<p style="margin: 0;"></p>
<p style="margin: 0;"></p>
<p style="margin: 0;"></p>
</template>
</div>
<div class="chat-box-main">
<template v-if="!conversitionId && userRole !== 'AUDIENCE' && !commonConversation">
<!-- v-if="!conversitionId && userRole !== 'AUDIENCE' && !commonConversation" -->
<template v-if="userRole != 'AUDIENCE'">
<div class="chat-box-header">
<div class="chat-box-header-title">
<!-- <div class="chat-box-header-title">
<el-input v-model="queryMember" size="small" placeholder="请输入搜索人员">
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
</div> -->
<div class="chat-setting" @click="handleSetting()">
<i class="el-icon-s-tools" />
</div>
<div v-if="!commonConversation" class="chat-setting" @click="goCommonConversation">
<!-- <div v-if="!commonConversation" class="chat-setting" @click="goCommonConversation">
<el-tooltip effect="dark" content="公共会话" placement="top-start">
<i class="el-icon-chat-line-round" />
</el-tooltip>
@ -27,53 +39,22 @@
<el-tooltip effect="dark" content="私有会话" placement="top-start">
<i class="el-icon-chat-round" />
</el-tooltip>
</div>
</div> -->
</div>
<div class="chat-box-content">
<el-tree
ref="tree"
:data="treeData"
:props="defaultProps"
node-key="id"
default-expand-all
show-checkbox
:filter-node-method="filterNode"
style="margin: 10px;overflow-y: auto;height: 100%;margin-right: 0;"
@node-click="handleNodeClick"
@check-change="handleCheckChange"
>
<span :id="data.id" slot-scope="{ node, data }">
<span style="font-size: 14px">{{ node.label + (data.userId? '(' + (simulationUsers[data.userId]||{}).nickName + ')': '') }}</span>
</span>
</el-tree>
</div>
<div class="chat-box-footer">
<div style="width: 400px;font-size: 14px;">{{ userString }}</div>
<el-button size="mini" type="primary" class="chat-box-footer-create" :loading="createLoading" @click="createCoversition()">创建会话</el-button>
</div>
</template>
<template v-else>
<div class="chat-box-header">
<div class="chat-setting" @click="handleSetting()">
<i class="el-icon-s-tools" />
</div>
<div v-if="!conversitionId && userRole !== 'AUDIENCE'" class="chat-setting" @click="cancelCommonConversation">
<el-tooltip effect="dark" content="成员列表" placement="top-start">
<i class="el-icon-s-custom" />
</el-tooltip>
</div>
<div v-if="!commonConversation" class="chat-setting" @click="goCommonConversation">
<el-tooltip effect="dark" content="公共会话" placement="top-start">
<i class="el-icon-chat-line-round" />
</el-tooltip>
</div>
<div v-if="conversitionId && commonConversation" class="chat-setting" @click="cancelCommonConversation">
<el-tooltip effect="dark" content="私有会话" placement="top-start">
<i class="el-icon-chat-round" />
</el-tooltip>
<div v-for="(item, index) in treeData" :key="index" class="proper_box">
<div class="proper_title">{{ item.label }}</div>
<div v-for="(data, i) in item.children" :key="i">
<div v-if="data.show && item.id == 'driver'" class="proper_content_box" :class="{'active': data.active}" @click="handleCheckChange(data)">{{ data.label + (data.userId? '(' + (simulationUsers[data.userId]||{}).nickName + ')': '') }}</div>
<div v-if="item.id != 'driver'" class="proper_content_box" :class="{'active':data.active}" @click="handleCheckChange(data)">{{ data.label + (data.userId? '(' + (simulationUsers[data.userId]||{}).nickName + ')': '') }}</div>
<div v-if="item.loading" class="mask_loading">
<i class="el-icon-loading" style="margin-bottom: 4px;" />
<span>呼叫中</span>
</div>
</div>
<div class="chat-box-content">
</div>
</div>
<div class="chat-box-content1">
<chat-content
ref="chatContent"
:project="project"
@ -87,19 +68,63 @@
:user-role="userRole"
@changeMessageList="changeMessageList"
/>
<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>
<chat-member-list ref="chatMemberList" :conversition-member-list="conversitionMemberList" :simulation-users="simulationUsers" />
</div>
<div class="chat-box-footer">
<div class="chat-box-footer-tool" />
<el-button v-if="isButtonShow && !commonConversation" size="mini" type="danger" class="chat-box-footer-quit" :loading="quitLoading" @click="quitConversition()">退出会话</el-button>
<el-button v-if="isButtonShow && !commonConversation" class="chat-box-footer-send" size="mini" type="primary" :disabled="recordSending" @click="startRecording()">发送语音</el-button>
<div v-if="!conversitionId">
<div style="width: 400px;font-size: 14px;line-height: 38px; padding-left: 10px;">{{ userString }}</div>
<el-button size="mini" type="primary" class="chat-box-footer-create" :loading="createLoading" @click="createCoversition()">
<i class="el-icon-phone" />
</el-button>
</div>
<div v-else>
<el-button v-if="isButtonShow && !commonConversation" size="mini" type="danger" class="chat-box-footer-create chat-box-footer-quit" :loading="quitLoading" @click="quitConversition()">
<i class="el-icon-phone" />
</el-button>
<el-button v-if="isButtonShow && !commonConversation" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" @click="startRecording()">
<el-progress id="record_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
<i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
<span class="iconfont icon-yuyin">&#xe62b;</span>
</el-button>
</div>
</div>
</template>
<template v-else>
<div class="chat-box-header">
<div class="chat-setting" @click="handleSetting()">
<i class="el-icon-s-tools" />
</div>
<!-- <div v-if="!conversitionId && userRole !== 'AUDIENCE'" class="chat-setting" @click="cancelCommonConversation">
<el-tooltip effect="dark" content="成员列表" placement="top-start">
<i class="el-icon-s-custom" />
</el-tooltip>
</div> -->
<!-- <div v-if="!commonConversation" class="chat-setting" @click="goCommonConversation">
<el-tooltip effect="dark" content="公共会话" placement="top-start">
<i class="el-icon-chat-line-round" />
</el-tooltip>
</div>
<div v-if="conversitionId && commonConversation" class="chat-setting" @click="cancelCommonConversation">
<el-tooltip effect="dark" content="私有会话" placement="top-start">
<i class="el-icon-chat-round" />
</el-tooltip>
</div> -->
</div>
<div class="chat-box-content chat-box-content_audience">
<chat-content
ref="chatContent"
:project="project"
:is-answering="IsAnswering"
:conversition-id="conversitionId"
:conversition-member-list="conversitionMemberList"
:message-list="messageList"
:my-member-id="myMemberId"
:simulation-users="simulationUsers"
:common-conversation="commonConversation"
:user-role="userRole"
width="360px"
@changeMessageList="changeMessageList"
/>
<chat-member-list ref="chatMemberList" :conversition-member-list="conversitionMemberList" :simulation-users="simulationUsers" />
</div>
</template>
</div>
@ -150,7 +175,7 @@ export default {
children: 'children',
label: 'label'
},
queryMember: '',
// queryMember: '',
activeTrains: [],
firstClick: true,
memberData: {},
@ -160,7 +185,7 @@ export default {
quitLoading: false,
conversitionMemberList: [],
commonMemberList: [],
messageList: [],
messageList: [], //
commonMessageList: [],
temData: [],
conversitionStateMap:{},
@ -191,11 +216,11 @@ export default {
}
},
watch:{
queryMember(val) {
if (this.$refs.tree) {
this.$refs.tree.filter(val);
}
},
// queryMember(val) {
// if (this.$refs.tree) {
// this.$refs.tree.filter(val);
// }
// },
conversitionId(val) {
if (val) {
this.conversitionMemberList = this.privateMemberList;
@ -244,9 +269,10 @@ export default {
this.activeTrains.push(groupNumber);
});
}
if (this.$refs.tree) {
this.$refs.tree.filter(this.queryMember);
}
this.filterNode();
// if (this.$refs.tree) {
// this.$refs.tree.filter(this.queryMember);
// }
},
'$store.state.training.simulationUserList': {
handler(val, o) {
@ -276,6 +302,16 @@ export default {
this.conversitionStateMap[memberId].privateMemberList = mList;
}
}
// 退
this.treeData.forEach(item => {
if (item.children && item.children.length) {
item.children.forEach(data =>{
if (data.id == val.memberId) {
data.active = false;
}
});
}
});
},
'$store.state.training.memberList': function (val) {
if (val && val.length) {
@ -288,6 +324,8 @@ export default {
const maintainerList = [];
val.forEach(item => {
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
this.memberData[item.id]['active'] = false;
this.memberData[item.id]['loading'] = false;
switch (item.type) {
case 'DISPATCHER':
this.memberData[item.id].label = '行调' + (item.name || '');
@ -301,19 +339,24 @@ export default {
depotDispatcherList.push(this.memberData[item.id]);
break;
case 'STATION_SUPERVISOR':
this.memberData[item.id].label = '值班员-' + device.name;
this.memberData[item.id].label = device.name;
// this.memberData[item.id].label = '-' + device.name;
stationSupervisorList.push(this.memberData[item.id]);
break;
case 'DRIVER':
this.memberData[item.id].label = '司机-列车' + item.deviceCode;
// this.memberData[item.id].label = '-' + item.deviceCode;
this.memberData[item.id]['show'] = false;
this.memberData[item.id].label = item.deviceCode;
driverList.push(this.memberData[item.id]);
break;
case 'MAINTAINER':
this.memberData[item.id].label = '通号' + (item.name || '');
// this.memberData[item.id].label = item.name || '';
maintainerList.push(this.memberData[item.id]);
break;
}
});
stationSupervisorList.push({ label: '全部集中站', value: 'allConcentrateStation', active: false }, { label: '全部车站', value: 'allStation', active: false });
this.treeData = [{
label: '行调',
id: 'dispatcher',
@ -342,11 +385,11 @@ export default {
}];
this.temData = [...dispatcherList, ...stationSupervisorList, ...driverList, ...maintainerList, ...depotDispatcherList];
this.initCommonMemberList();
this.$nextTick(() => {
if (this.$refs.tree) {
this.$refs.tree.filter(this.queryMember);
}
});
// this.$nextTick(() => {
// if (this.$refs.tree) {
// this.$refs.tree.filter(this.queryMember);
// }
// });
}
},
'$store.state.socket.simulationReset': function () {
@ -355,6 +398,9 @@ export default {
},
mounted() {
this.firstClick = true;
this.$nextTick(() => {
this.filterNode();
});
},
methods:{
clickBtn() {
@ -362,23 +408,24 @@ export default {
this.drawer = false;
} else {
this.drawer = true;
this.$nextTick(() => {
if (this.$refs.tree) {
this.$refs.tree.filter(this.queryMember);
}
});
// this.$nextTick(() => {
// if (this.$refs.tree) {
// this.$refs.tree.filter(this.queryMember);
// }
// });
}
},
setSetting(data) {
this.form = data;
},
//
createCoversition() {
if (this.memberIdList.length) {
this.createLoading = true;
startConversition(this.group, this.memberIdList).then(resp => {
this.messageList = [];
this.memberIdList = [];
this.userString = '';
// this.userString = '';
// this.$message.success('');
this.createLoading = false;
}).catch((error) => {
@ -386,7 +433,7 @@ export default {
this.createLoading = false;
});
} else {
this.userString = '群聊列表为空, 请选择人员';
this.userString = '请选择人员';
}
},
coverName(inviteUser) {
@ -401,6 +448,7 @@ export default {
//
startRecording() {
const that = this;
if (!this.recordSending) {
if (!this.recordSending && !this.recorders && !this.microphone) {
this.$refs.chatSetting.doClose();
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
@ -461,6 +509,9 @@ export default {
}
);
}
} else {
this.stopRecording(); //
}
},
cancleRecording() {
if (this.microphone) {
@ -498,39 +549,58 @@ export default {
handleSetting() {
this.$refs.chatSetting.doShow();
},
handleNodeClick() {
},
handleCheckChange() {
const memberList = this.$refs.tree.getCheckedKeys();
this.userString = '';
this.memberIdList = [];
if (memberList && memberList.length) {
memberList.forEach(memberId => {
const member = this.memberData[memberId];
handleCheckChange(data, jude = false) {
if (data.value == 'allConcentrateStation' || data.value == 'allStation') {
data.active = !data.active;
if (data.value == 'allConcentrateStation') {
this.treeData[1] && this.treeData[1]['children'].forEach(item => {
const stationModel = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
if (stationModel && stationModel.centralized) {
item.active = data.active;
this.handleCheckChange(item, true);
}
});
}
if (data.value == 'allStation') {
this.treeData[1] && this.treeData[1]['children'].forEach(item => {
if (item.value != 'allConcentrateStation' && item.value != 'allStation') {
item.active = data.active;
this.handleCheckChange(item, true);
}
});
}
} else {
if (!jude) {
data.active = !data.active;
}
const member = data;
if (data.active) {
if (member && member.type === 'DRIVER' && !this.activeTrains.includes(member.deviceCode)) {
return;
}
if (member && member.userId) {
this.memberIdList.push(member.id);
this.userString += ((this.userString ? ',' : '') + member.label + '(' + this.simulationUsers[member.userId].nickName + ')');
// this.userString += ((this.userString ? ',' : '') + member.label + '(' + this.simulationUsers[member.userId].nickName + ')');
} else if (member) {
this.userString += ((this.userString ? ',' : '') + member.label);
// this.userString += ((this.userString ? ',' : '') + member.label);
this.memberIdList.push(member.id);
}
} else {
this.memberIdList.forEach((id, index) => {
if (id == member.id) {
this.memberIdList.splice(index, 1);
}
});
}
}
},
filterNode(value, data) {
let flag = false;
if (this.memberData[data.id] && this.memberData[data.id].nickName) {
flag = this.memberData[data.id].nickName.indexOf(value) !== -1;
filterNode() {
this.treeData[2] && this.treeData[2]['children'].forEach(train => {
train.show = false;
if (this.activeTrains.includes(train.deviceCode)) {
train.show = true;
}
let driverNoShow = true;
if (data.type && data.type === 'DRIVER' && !this.activeTrains.includes(data.deviceCode)) {
driverNoShow = false;
}
return (data.label.indexOf(value) !== -1 || flag) && driverNoShow;
});
},
quitConversition() {
this.quitLoading = true;
@ -538,8 +608,15 @@ export default {
this.conversitionMemberList = [];
this.messageList = [];
this.quitLoading = false;
this.$nextTick(() => {
this.$refs.tree && this.$refs.tree.filter(this.queryMember);
// this.$nextTick(() => {
// this.$refs.tree && this.$refs.tree.filter(this.queryMember);
// });
this.treeData.forEach(item => {
if (item.children && item.children.length) {
item.children.forEach(data =>{
data.active = false;
});
}
});
}).catch(() => {
this.$message.error('退出会话失败!');
@ -551,6 +628,7 @@ export default {
const time2 = new Date(message2.time).valueOf();
return time1 - time2;
},
//
isAudienceInitData() {
getAllConversition(this.group).then(resp => {
const messages = [];
@ -583,6 +661,7 @@ export default {
this.initCommonMemberList();
});
},
//
initCommonMemberList() {
const temDispatcherList = [];
const temStationSupervisorList = [];
@ -609,7 +688,7 @@ export default {
}
});
this.commonMemberList = [...temDispatcherList, ...temStationSupervisorList, ...temMaintainerList, ...temDriverList, ...temDepotDispatcherList];
if (this.userRole === 'AUDIENCE' || this.commonConversation) {
if (this.userRole == 'AUDIENCE' || this.commonConversation) {
this.conversitionMemberList = [];
this.messageList = [...this.commonMessageList];
this.conversitionMemberList = this.commonMemberList;
@ -642,9 +721,9 @@ export default {
this.commonConversation = false;
this.conversitionMemberList = this.privateMemberList;
this.messageList = [...this.privateMessageList];
this.$nextTick(() => {
this.$refs.tree && this.$refs.tree.filter(this.queryMember);
});
// this.$nextTick(() => {
// this.$refs.tree && this.$refs.tree.filter(this.queryMember);
// });
},
clearAllData() {
this.recordSending = false;
@ -667,8 +746,8 @@ export default {
.chatBox {
position: absolute;
left: 0;
top: calc((100% - 400px) / 2);
height: 400px;
top: calc((100% - 600px) / 2);
height: 600px;
width: 503px;
transform: translateX(-503px);
transition: all 0.4s;
@ -677,6 +756,51 @@ export default {
transform: translateX(0px);
}
}
.proper_box{
overflow: hidden;
.proper_title{
width: 100%;
text-align: center;
height: 30px;
font-size: 14px;
background: #F27867;
line-height: 30px;
margin-bottom: 5px;
}
.proper_content_box{
float: left;
width: 73px;
height: 73px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
background: #676688;
border-radius: 4px;
margin-left: 5px;
margin-bottom: 5px;
padding: 0 3px;
text-align: center;
cursor: pointer;
color: #fff;
position: relative;
&.active{
background: #6BBE16;
}
}
.mask_loading{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.4);
flex-direction: column;
}
}
.menuTrainListBtn {
background: #fff;
text-align: center;
@ -720,15 +844,25 @@ export default {
.chat-box-content{
width: 100%;
height: 300px;
border-bottom: 1px #dedede solid;
position: relative;
overflow: auto;
}
.chat-box-content_audience{
height: calc(100% - 40px);
}
.chat-box-content1{
height: 200px;
position: relative;
border-top: 1px #9a9a9a solid;
margin-top: 8px;
}
.chat-box-footer{
display: inline-block;
width: 100%;
height: 50px;
overflow-y: auto;
height: 55px;
position: relative;
border-top: 1px solid #afafaf;
}
.chat-setting{
float: right;
@ -749,30 +883,6 @@ export default {
width: 100%;
height: 17px;
}
.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;
}
.chat-box-footer-quit{
width: 65px;
font-size: 12px;
padding: 5px 0px 4px 0px;
text-align: center;
border-radius: 3px;
color: #fff;
margin-left: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.minimality {
float: right;
line-height: 40px;
@ -791,21 +901,51 @@ export default {
background: #fff;
border-radius: 5px;
left: 0;
font-size:0;
// font-size:0;
}
.chat-box-footer-create{
width: 65px;
font-size: 12px;
padding: 5px 0px 4px 0px;
font-size: 16px;
text-align: center;
border-radius: 3px;
color: #fff;
position: absolute;
right: 5px;
bottom: 5px;
margin-right: 10px;
margin-top: 10px;
top: 6px;
line-height: 30px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
background: green;
border: none;
display: flex;
justify-content: center;
align-items: center;
}
.chat-box-footer-quit{
background: red;
}
.chat-box-footer-send{
background: #F2F2F2;
right: 55px;
cursor: pointer;
.icon-yuyin{
color: #333;
font-size: 24px;
margin: 0;
}
&.active{
.icon-yuyin{
color: green;
}
}
.close_icon{
position: absolute;
top: -15px;
left: 11px;
font-size: 16px;
color: #333;
font-weight: 600;
}
}
.showMembers{
float: right;
@ -815,9 +955,12 @@ export default {
font-size: 17px;
}
#record_progress_bar{
height: 100%;
width: 40px;
height: 40px;
position: absolute;
background: #bbe5f5;
left: 0;
top: 0;
border-radius: 50%;
}
.chat_record_tip{
height: 28px;
@ -830,54 +973,6 @@ export default {
bottom: 0;
left: 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;
}

View File

@ -1,5 +1,5 @@
<template>
<div class="chatcontentIn">
<div class="chatcontentIn" :style="{width: width}">
<div class="chatcontentInner">
<div v-for="(chatContent,index) in messageList" :key="index" class="chatContentInClass">
<div :class="chatContent.memberId == myMemberId?'rightUser':'leftUser'">
@ -56,6 +56,12 @@ export default {
default() {
return '';
}
},
width: {
type: String,
default() {
return '100%';
}
}
},
data() {
@ -144,12 +150,15 @@ export default {
</script>
<style lang="scss" scoped>
.chatcontentIn{
height: 100%;
width: 360px;
// height: 200px;
height: calc(100% - 5px);
// width: 360px;
width: 100%;
display: inline-block;
overflow: auto;
padding-bottom: 20px;
cursor:auto;
background: #fff;
}
.leftUser{
float: left;

View File

@ -84,7 +84,8 @@ export default {
margin-top: 13px;
font-size: 12px;
margin-left: 2px;
height: 250px;
// height: 250px;
height: calc(100% - 25px);
overflow-y: auto;
}
.each-chat-member{

View File

@ -26,7 +26,7 @@
@node-click="handleNodeClick"
>
<span :id="data.id" slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ data.label }}</span>
<span>{{ node.label }}</span>
<span v-if="data.type">
<el-select :key="data.id" v-model="data.userId" placeholder="请选择" clearable size="mini" @change="nodeMemberChange($event, data)">
<el-option
@ -147,7 +147,7 @@ export default {
},
'$store.state.training.memberList': function (val) {
if (val && val.length) {
this.memberData = this.$store.state.training.memberData;
this.memberData = JSON.parse(JSON.stringify(this.$store.state.training.memberData));
const dispatcherList = [];
const electricDispatcherList = [];
const depotDispatcherList = [];