This commit is contained in:
fan 2020-05-13 18:22:05 +08:00
commit 39edb68018
9 changed files with 309 additions and 192 deletions

View File

@ -23,6 +23,9 @@ function handle(state, data) {
case 'Simulation_DeviceStatus': // 仿真-设备状态消息 case 'Simulation_DeviceStatus': // 仿真-设备状态消息
state.equipmentStatus = msg; state.equipmentStatus = msg;
break; break;
case 'Simulation_User': // 仿真-聊天界面用户进出仿真消息
handleSimulationUserinfo(state, msg); // 用户进出仿真消息
break;
case 'Simulation_RunFact': // 仿真-列车实际到发车站消息 case 'Simulation_RunFact': // 仿真-列车实际到发车站消息
// let runFactMsg = msg; // let runFactMsg = msg;
// if (runFactMsg.constructor !== Array ) { // if (runFactMsg.constructor !== Array ) {
@ -215,6 +218,10 @@ function handleUserinfo(state, data) {
state.roleList = (data instanceof Array) ? data : [data]; state.roleList = (data instanceof Array) ? data : [data];
} }
function handleSimulationUserinfo(state, data) {
state.simulationRoleList = (data instanceof Array) ? data : [data];
}
function handlePushMsgQueue(state, msg) { function handlePushMsgQueue(state, msg) {
if (msg instanceof Array) { if (msg instanceof Array) {
state.msgQueue.concat(msg); state.msgQueue.concat(msg);
@ -235,6 +242,7 @@ const socket = {
jointRoomInfo: {}, // 受邀请房间信息 jointRoomInfo: {}, // 受邀请房间信息
chatContent: {}, // 聊天室聊天内容 chatContent: {}, // 聊天室聊天内容
roleList: [], // 设置角色信息 roleList: [], // 设置角色信息
simulationRoleList:[], // 设置仿真的聊天角色信息
jointRoomPrepare: false, // 演练房间准备状态 jointRoomPrepare: false, // 演练房间准备状态
equipmentStatus: [], // 仿真-设备状态消息 equipmentStatus: [], // 仿真-设备状态消息
trainStationList: [], // 仿真-列车实际到发车站消息 trainStationList: [], // 仿真-列车实际到发车站消息

View File

@ -5,7 +5,6 @@ import store from '@/store/index_APP_TARGET';
export const displayTopic = '/user/queue/simulation'; // 其他仿真topic export const displayTopic = '/user/queue/simulation'; // 其他仿真topic
export const perpetualTopic = '/user/topic/message'; // 公用topic export const perpetualTopic = '/user/topic/message'; // 公用topic
export const roomTopic = '/user/queue/room'; // 房间topic export const roomTopic = '/user/queue/room'; // 房间topic
export const assistant = '/user/topic/simulation/assistant';// 房间里仿真聊天topic
// 建立连接并订阅地址 // 建立连接并订阅地址
export function creatSubscribe(topic, header) { export function creatSubscribe(topic, header) {

View File

@ -154,7 +154,7 @@ export default {
this.$refs.jlmapVisual.handleStateLoaded(); this.$refs.jlmapVisual.handleStateLoaded();
} else { } else {
this.maskOpen = true; this.maskOpen = true;
this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑'); // this.$messageBox('线, ');
} }
}, },
async back() { async back() {

View File

@ -92,7 +92,8 @@ export default {
switch (obj.type) { switch (obj.type) {
case 'scriptDesign': { case 'scriptDesign': {
setSessionStorage('designType', 'scriptDesign'); setSessionStorage('designType', 'scriptDesign');
this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}?lineCode=${obj.lineCode}&drawWay=${obj.drawWay}` }); const query = {lineCode:obj.lineCode, drawWay:obj.drawWay};
this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}?`, query});
break; break;
} }
case 'lessonDesign': { case 'lessonDesign': {

View File

@ -2,24 +2,9 @@
<!-- v-quickMenuDrag --> <!-- v-quickMenuDrag -->
<div class="chatBox"> <div class="chatBox">
<div v-show="!minimize" class="chat-box"> <div v-show="!minimize" class="chat-box">
<div :class="showMembers?'memberAnimate chat-box-members':'chat-box-members'"> <chat-member-list ref="chatMemberList" :group="group" @addCoversition="addCoversition" />
<div class="chat-member-title">成员列表</div>
<div class="chat-member-list">
<div v-for="member in memberList" :key="member.id" :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'" @click="createConversition(member)">{{ handleMember(member) }}</div>
</div>
</div>
<div class="chat-box-main"> <div class="chat-box-main">
<div class="chat-coversition"> <chat-coversition-list ref="chatCoversitionList" @setCurrentCoversition="setCurrentCoversition" @setHeadTitle="setHeadTitle" />
<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)"
>{{ handleMemberName(coversition) }}</div>
</div>
</div>
<div class="chat-window"> <div class="chat-window">
<div class="chat-box-header"> <div class="chat-box-header">
<div class="chat-box-header-title">{{ headerTitle }}</div> <div class="chat-box-header-title">{{ headerTitle }}</div>
@ -60,19 +45,19 @@
</div> </div>
</template> </template>
<script> <script>
import { getToken } from '@/utils/auth';
import { creatSubscribe, clearSubscribe, assistant} from '@/utils/stomp';
import ChatSetting from './chatSetting'; import ChatSetting from './chatSetting';
import ChatContent from './chatContent'; import ChatContent from './chatContent';
import ChatMemberList from './chatMemberList';
import ChatCoversitionList from './chatCoversitionList';
import RecordRTC from 'recordrtc'; import RecordRTC from 'recordrtc';
import {getSimulationMembersNew, getSimulationConversationListNew, getSimulationConversationIdNew, uploadAudioFileNew} from '@/api/chat'; import {uploadAudioFileNew} from '@/api/chat';
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
export default { export default {
name: 'ChatBox', name: 'ChatBox',
components:{ components:{
ChatSetting, ChatSetting,
ChatContent ChatContent,
ChatMemberList,
ChatCoversitionList
}, },
props: { props: {
group: { group: {
@ -83,10 +68,8 @@ export default {
data() { data() {
return { return {
minimize:false, minimize:false,
showMembers:false,
recordSending:false, recordSending:false,
memberList:[], currentCoversition:{},
coversitionList:[],
seconds:0, seconds:0,
inter:null, inter:null,
recorders: null, recorders: null,
@ -95,28 +78,23 @@ export default {
language:'zh', language:'zh',
sex:'1' sex:'1'
}, },
currentCoversition:{},
headerTitle:'所有人' headerTitle:'所有人'
}; };
}, },
watch: {
'$store.state.socket.simulationRoleList': function (val) {
if (val && val.length) {
this.$nextTick(() => {
debugger;
});
}
}
},
mounted() { mounted() {
this.initPage(); this.initPage();
}, },
async beforeDestroy() {
this.clearSubscribe();
},
methods:{ methods:{
async initPage() { async initPage() {
this.subscribe();
this.getSimulationMembers();
getSimulationConversationListNew(this.$route.query.group).then(resp=>{
if (resp.data) {
this.coversitionList = resp.data;
if (resp.data && resp.data.length && resp.data.length > 0) {
this.currentCoversition = resp.data[0];
}
}
});
}, },
handleMinimality(data) { handleMinimality(data) {
if (data == 'min') { if (data == 'min') {
@ -129,35 +107,16 @@ export default {
setSetting(data) { setSetting(data) {
this.form = data; this.form = data;
}, },
handleMemberName(conversition) { setCurrentCoversition(coversition) {
if (conversition.group) { this.currentCoversition = coversition;
return conversition.name;
} else {
let coversitionName = '';
conversition.memberList.forEach(member=>{
if (member.userId != this.$store.state.user.id) {
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 : '';
coversitionName = data + deviceName + memberName;
}
});
return coversitionName;
}
}, },
handleMember(member) { setHeadTitle(headerTitle) {
const deviceName = member.deviceName ? '-' + member.deviceName : ''; this.headerTitle = headerTitle;
const memberName = member.name ? '-' + member.name : ''; },
return member.role + deviceName + memberName; addCoversition({data, headerTitle}) {
this.$refs.chatCoversitionList.addCoversition(data);
this.currentCoversition = {id:data.id, group:data.group};
this.headerTitle = headerTitle;
}, },
// //
startRecording() { startRecording() {
@ -264,63 +223,7 @@ export default {
}, },
handleMembers() { handleMembers() {
this.$refs.chatSetting.doClose(); this.$refs.chatSetting.doClose();
if (this.showMembers) { this.$refs.chatMemberList.doShow();
this.showMembers = false;
} else {
this.showMembers = true;
this.getSimulationMembers();
}
},
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);
this.memberList = lastData;
});
},
async subscribe() {
if (!this.$store.state.socket.assistantIsSubscribe) {
this.clearSubscribe();
const header = { group: this.group || '', 'X-Token': getToken() };
creatSubscribe(`${assistant}\/${this.group}`, header);
await this.$store.dispatch('socket/setAssistantSubscribe', true);
}
},
async clearSubscribe() {
clearSubscribe(`${assistant}\/${this.group}`);
await this.$store.dispatch('socket/setAssistantSubscribe', false);
},
createConversition(member) {
if (member.userId != this.$store.state.user.id && member.online) {
getSimulationConversationIdNew({ memberId: member.id }, this.group).then(resp => {
if (resp.data) {
const data = resp.data;
const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
if (index < 0) {
this.coversitionList.push(data);
}
const headtTitle = this.handleMemberName(data);
this.currentCoversition = {id:data.id, group:data.group};
this.headerTitle = headtTitle;
this.showMembers = false;
}
});
}
},
changeCoversition(coversition) {
const headtTitle = this.handleMemberName(coversition);
this.headerTitle = headtTitle;
this.currentCoversition = {id:coversition.id, group:coversition.group};
// this.$refs.chatContent.reloadData(this.currentCoversition);
} }
} }
}; };
@ -358,30 +261,6 @@ export default {
} }
.chat-box-contentTip{ .chat-box-contentTip{
}
.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;
} }
.chat-box-footer{ .chat-box-footer{
display: inline-block; display: inline-block;
@ -435,45 +314,13 @@ export default {
left:5px; left:5px;
font-size:0; font-size:0;
} }
.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;
}
.chat-coversition{ .chat-coversition{
} }
.coversition-list{ .coversition-list{
} }
.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{
}
.showMembers{ .showMembers{
float: right; float: right;
line-height: 40px; line-height: 40px;
@ -481,9 +328,6 @@ export default {
cursor: pointer; cursor: pointer;
font-size: 17px; font-size: 17px;
} }
.memberAnimate{
transform: translateX(97%);
}
#record_progress_bar{ #record_progress_bar{
height: 100%; height: 100%;
position: absolute; position: absolute;

View File

@ -0,0 +1,112 @@
<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)"
>{{ coversition.coverName }}</div>
</div>
</div>
</template>
<script>
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
import {getSimulationConversationListNew} from '@/api/chat';
export default {
name:'ChatCoversitionList',
data() {
return {
coversitionList:[],
currentCoversition:{}
};
},
mounted() {
getSimulationConversationListNew(this.$route.query.group).then(resp=>{
if (resp.data) {
const data = resp.data;
data.map(coversition=>{
coversition.coverName = this.handleMemberName(coversition);
return coversition;
});
this.coversitionList = data;
if (resp.data && resp.data.length && resp.data.length > 0) {
this.currentCoversition = resp.data[0];
this.$emit('setCurrentCoversition', resp.data[0]);
}
}
});
},
methods:{
addCoversition(data) {
const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
if (index < 0) {
data.coverName = this.handleMemberName(data);
this.coversitionList.push(data);
}
},
changeCoversition(coversition) {
this.$emit('setHeadTitle', coversition.coverName);
this.currentCoversition = {id:coversition.id, group:coversition.group};
this.$emit('setCurrentCoversition', coversition);
// this.$refs.chatContent.reloadData(this.currentCoversition);
},
handleMemberName(conversition) {
if (conversition.group) {
return conversition.name;
} else {
let coversitionName = '';
conversition.memberList.forEach(member=>{
if (member.userId != this.$store.state.user.id) {
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 : '';
coversitionName = data + deviceName + memberName;
}
});
return coversitionName;
}
}
}
};
</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;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.coversition-active{
background: #e0e0e0;
}
</style>

View File

@ -0,0 +1,154 @@
<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="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'"
@click="createConversition(member)"
>{{ member.memberName }}</div>
</div>
</div>
</template>
<script>
import {getSimulationMembersNew, getSimulationConversationIdNew} from '@/api/chat';
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
export default {
name: 'ChatMemberList',
props: {
group: {
type: String,
required: true
}
},
data() {
return {
showMembers:false,
memberList:[]
};
},
mounted() {
this.getSimulationMembers();
},
methods:{
createConversition(member) {
if (member.userId != this.$store.state.user.id && member.online) {
getSimulationConversationIdNew({ memberId: member.id }, this.group).then(resp => {
if (resp.data) {
const data = resp.data;
this.$emit('addCoversition', {data:data, headerTitle:member.memberName});
this.showMembers = false;
}
});
}
},
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.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;
});
},
doShow() {
if (this.showMembers) {
this.showMembers = false;
} else {
this.showMembers = true;
this.getSimulationMembers();
}
}
}
};
</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;
}
// safariqq360
//
.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>

View File

@ -102,7 +102,6 @@ export default {
} }
}, },
'$store.state.socket.roleList': function (val) { '$store.state.socket.roleList': function (val) {
debugger;
if (val && val.length) { if (val && val.length) {
this.$nextTick(() => { this.$nextTick(() => {
this.addrolesList(val); this.addrolesList(val);
@ -259,7 +258,6 @@ export default {
}); });
}, },
back() { back() {
debugger;
this.$store.dispatch('training/over').then(() => { this.$store.dispatch('training/over').then(() => {
this.backLoading = true; this.backLoading = true;
putJointTrainingSimulationUserNew(this.group).then(() => { putJointTrainingSimulationUserNew(this.group).then(() => {

View File

@ -126,7 +126,7 @@ export default {
}, },
drawUp(index, row) { drawUp(index, row) {
const drawWay = this.$route.query.drawWay; const drawWay = this.$route.query.drawWay;
if (drawWay == 'true') { if (drawWay && JSON.parse(drawWay)) {
scriptRecordNotifyNew(row.id).then(resp => { scriptRecordNotifyNew(row.id).then(resp => {
const query = { mapId: row.mapId, group: resp.data, scriptId: row.id, lang:row.lang, lineCode:this.$route.query.lineCode, drawWay:drawWay}; const query = { mapId: row.mapId, group: resp.data, scriptId: row.id, lang:row.lang, lineCode:this.$route.query.lineCode, drawWay:drawWay};
this.$router.push({ path: `${UrlConfig.scriptDisplayNew}/script`, query }); this.$router.push({ path: `${UrlConfig.scriptDisplayNew}/script`, query });
@ -264,7 +264,8 @@ export default {
}).catch(() => { }); }).catch(() => { });
}, },
previewScript(index, row) { previewScript(index, row) {
if (this.$route.query.drawWay == 'true') { const drawWay = this.$route.query.drawWay;
if (drawWay && JSON.parse(drawWay)) {
scriptDraftRecordNotifyNew(row.id).then(resp => { scriptDraftRecordNotifyNew(row.id).then(resp => {
const query = { mapId: row.mapId, group: resp.data, scriptId: row.id, try:0, lineCode:this.$route.query.lineCode, drawWay:true}; const query = { mapId: row.mapId, group: resp.data, scriptId: row.id, try:0, lineCode:this.$route.query.lineCode, drawWay:true};
this.$router.push({ path: `${UrlConfig.design.displayNew}/demon`, query }); this.$router.push({ path: `${UrlConfig.design.displayNew}/demon`, query });