395 lines
13 KiB
Vue
395 lines
13 KiB
Vue
<template>
|
|
<div class="room">
|
|
<div class="room__head">
|
|
<div class="room__head--title">
|
|
{{ $t('trainRoom.comprehensiveDrillRoom') }}
|
|
</div>
|
|
<div class="room__head--notes">
|
|
{{ $t('trainRoom.comprehensiveTrainingManager') + room.creator.nickName }}
|
|
</div>
|
|
</div>
|
|
<div class="room__container">
|
|
<e-members
|
|
class="room__container--members"
|
|
:room="room"
|
|
:members="members"
|
|
:height="height"
|
|
@message="messageInfo"
|
|
/>
|
|
<e-roles
|
|
class="room__container--roles"
|
|
:room="room"
|
|
:members="members"
|
|
:height="height"
|
|
:station-list="stationList"
|
|
:available-station-list="availableStationList"
|
|
:stand-list="standList"
|
|
:door-list="doorList"
|
|
@message="messageInfo"
|
|
@joinTraining="jumpInSimulation"
|
|
@clearSubscribe="clearSubscribe"
|
|
/>
|
|
<e-chat
|
|
class="room__container--chat"
|
|
:room="room"
|
|
:members="members"
|
|
:height="height"
|
|
@message="messageInfo"
|
|
/>
|
|
</div>
|
|
<div class="room__footer" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getToken } from '@/utils/auth';
|
|
import { creatSubscribe, clearSubscribe, roomTopic} from '@/utils/stomp';
|
|
import eMembers from './e-members';
|
|
import eChat from './e-chat';
|
|
import eRoles from './e-roles';
|
|
import { postRoomDetail, getJointTrainRoomUserList, getRealDevices, putJointTrainingSimulationEntrance, getjointTraining } from '@/api/chat';
|
|
import { postRoomDetailNew, getJointTrainRoomUserListNew, putJointTrainingSimulationEntranceNew, getjointTrainingNew, getRealDevicesNew, getAvailableStaionList} from '@/api/jointTraining';
|
|
import { getPublishMapInfo, hasDoorStationList } from '@/api/jmap/map';
|
|
import { launchFullscreen } from '@/utils/screen';
|
|
import { getStationList } from '@/api/runplan';
|
|
import { checkLoginLine } from '@/api/login';
|
|
|
|
export default {
|
|
components: {
|
|
eMembers,
|
|
eChat,
|
|
eRoles
|
|
},
|
|
data() {
|
|
return {
|
|
room: {
|
|
totalNum: 0,
|
|
group: '',
|
|
mapId: '',
|
|
creatorId: '',
|
|
creator: {
|
|
nickName: ''
|
|
},
|
|
permissionRest: 0,
|
|
permissionNum: 0,
|
|
state: ''
|
|
},
|
|
userMap: [],
|
|
members: [],
|
|
stationList: [],
|
|
availableStationList:[],
|
|
standList: [],
|
|
doorList: [],
|
|
timer: null
|
|
};
|
|
},
|
|
computed: {
|
|
height() {
|
|
return this.$store.state.app.height - 100;
|
|
},
|
|
group() {
|
|
return this.$route.query.group;
|
|
},
|
|
drawWay() {
|
|
return this.$route.query.drawWay + '';
|
|
},
|
|
userId() {
|
|
return this.$store.state.user ? this.$store.state.user.id : '';
|
|
}
|
|
},
|
|
watch: {
|
|
members: {
|
|
deep: true,
|
|
handler() {
|
|
this.room.permissionRest = this.members.filter(elem => ['AUDIENCE'].includes(elem.userRole.toUpperCase())).length;
|
|
}
|
|
},
|
|
// 用户信息
|
|
'$store.state.socket.roleList': async function (val) {
|
|
if (val.length) {
|
|
await this.dispatchUsers(val);
|
|
}
|
|
},
|
|
// 房间消息
|
|
'$store.state.socket.jointRoomInfo': async function (val) {
|
|
if (val.creatorId) {
|
|
await this.dispatchRoomInfo(val);
|
|
}
|
|
},
|
|
// 设备信息
|
|
'$store.state.socket.realDeviceInfo': async function (val) {
|
|
await this.getStandList();
|
|
},
|
|
// 路由切换
|
|
'$route': async function() {
|
|
await this.loadInit();
|
|
}
|
|
},
|
|
async created() {
|
|
await this.loadInit();
|
|
},
|
|
methods: {
|
|
async loadInit() {
|
|
await this.subscribe();
|
|
if (!this.$store.state.socket.setInRoom && this.drawWay !== 'true') {
|
|
await getjointTraining(this.group);
|
|
} else if (!this.$store.state.socket.setInRoom && this.drawWay === 'true') {
|
|
await getjointTrainingNew(this.group);
|
|
}
|
|
await this.getRoomInfo();
|
|
await this.getUserList();
|
|
await this.getStandList();
|
|
await this.getStaionList(this.room.mapId);
|
|
if (this.drawWay === 'true') {
|
|
await this.getAvailableStaionList(this.room.mapId);
|
|
}
|
|
await this.getDoorList(this.room.mapId, this.stationList);
|
|
if (this.timer) { clearInterval(this.timer); }
|
|
this.timer = setInterval(() => {
|
|
checkLoginLine();
|
|
}, 5000 * 60);
|
|
},
|
|
async getRoomInfo() {
|
|
let resp = '';
|
|
if (this.drawWay === 'true') {
|
|
resp = await postRoomDetailNew(this.group);
|
|
} else {
|
|
resp = await postRoomDetail(this.group);
|
|
}
|
|
this.room = {
|
|
permissionRest: 0,
|
|
totalNum: Number(resp.data.permissionNum) + Number(resp.data.audiencePermissionNum),
|
|
...resp.data || {}
|
|
};
|
|
},
|
|
async getStandList() {
|
|
let resp = '';
|
|
if (this.drawWay === 'true') {
|
|
resp = await getRealDevicesNew(this.group);
|
|
} else {
|
|
resp = await getRealDevices(this.group);
|
|
}
|
|
this.standList = resp.data || [];
|
|
},
|
|
async getStaionList(mapId) {
|
|
const resp = await getStationList(mapId);
|
|
this.stationList = resp.data || [];
|
|
},
|
|
async getAvailableStaionList(mapId) {
|
|
const resp = await getAvailableStaionList(mapId);
|
|
this.availableStationList = resp.data || [];
|
|
},
|
|
async getDoorList(mapId, stationList) {
|
|
const doorList = [];
|
|
hasDoorStationList(mapId).then(res =>{
|
|
stationList.forEach(item => {
|
|
res.data.forEach(it =>{
|
|
if (item.code === it.stationCode) {
|
|
const direction = parseInt(it.doorLocationType) % 2 === 0 ? this.$t('trainRoom.uplinkPlatform') : this.$t('trainRoom.downlinkPlatform');
|
|
doorList.push({code: it.code, name: item.name + direction});
|
|
}
|
|
});
|
|
});
|
|
this.doorList = doorList;
|
|
}).catch(() => {
|
|
this.$messageBox(this.$t('error.getScreenDoorsListFailed'));
|
|
});
|
|
},
|
|
async getUserList() {
|
|
let res = '';
|
|
if (this.drawWay === 'true') {
|
|
res = await getJointTrainRoomUserListNew(this.group);
|
|
} else {
|
|
res = await getJointTrainRoomUserList(this.group);
|
|
}
|
|
this.members = (res.data || []).map(elem => { return this.transformUser(elem); });
|
|
},
|
|
async dispatchUsers(users) {
|
|
users.forEach(user => {
|
|
const index = this.members.findIndex(elem => { return user.id == elem.id; });
|
|
if (user.userRole) {
|
|
if (index >= 0) {
|
|
this.checkUserState(user, this.members[index]);
|
|
this.members.splice(index, 1, this.transformUser(user));
|
|
} else {
|
|
this.checkUserState(user, null);
|
|
this.members.push(this.transformUser(user));
|
|
}
|
|
} else {
|
|
if (this.members[index]) {
|
|
this.checkUserState(user, this.members[index]);
|
|
this.members.splice(index, 1);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
async dispatchRoomInfo(room) {
|
|
Object.assign(this.room, room);
|
|
switch (room.state) {
|
|
case '03': // 房间销毁
|
|
{ this.clearSubscribe();
|
|
this.$router.go(-1);
|
|
break; }
|
|
case '02': // 开始仿真
|
|
{
|
|
// this.clearSubscribe();
|
|
await this.jumpInSimulation();
|
|
break; }
|
|
}
|
|
|
|
// 清空房间信息
|
|
this.$store.dispatch('socket/setJointRoomInfo');
|
|
},
|
|
async checkUserState(user, old) {
|
|
const message = {
|
|
join: true,
|
|
id: user.id,
|
|
userName: user.nickName,
|
|
userRole: user.userRole,
|
|
name: user.name,
|
|
roomTip: '',
|
|
chatInfo: true,
|
|
inSimulation: user.inSimulation,
|
|
inRoom: user.inRoom,
|
|
session: 'session',
|
|
oneself: user.id === this.$store.state.user.id
|
|
};
|
|
if (old) {
|
|
if (!user.userRole) {
|
|
this.$store.dispatch('socket/setChatContent', {...message, roomTip: `${user.nickName}被提出房间`});
|
|
if (this.userId == user.id) {
|
|
await this.jumpOutRoom();
|
|
}
|
|
} else if (old.userRole) {
|
|
if (old.inRoom && !user.inRoom) {
|
|
this.$store.dispatch('socket/setChatContent', {...message, roomTip: `${user.nickName}离线`});
|
|
if (this.userId == user.id) {
|
|
await this.jumpOutRoom();
|
|
}
|
|
}
|
|
|
|
if (!old.inRoom && user.inRoom) {
|
|
this.$store.dispatch('socket/setChatContent', {...message, roomTip: `${user.nickName}在线`});
|
|
}
|
|
|
|
if (!old.inSimulation && user.inSimulation) {
|
|
this.$store.dispatch('socket/setChatContent', {...message, roomTip: `${user.nickName}进入仿真`});
|
|
if (this.userId == user.id && user.userRole.toUpperCase() !== 'ADMIN') {
|
|
await this.jumpInSimulation();
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
this.$store.dispatch('socket/setChatContent', {...message, roomTip: `${user.nickName}进入房间`});
|
|
}
|
|
},
|
|
async jumpInSimulation() {
|
|
const room = this.room;
|
|
if (this.drawWay === 'true') {
|
|
await putJointTrainingSimulationEntranceNew(room.group);
|
|
} else {
|
|
await putJointTrainingSimulationEntrance(room.group);
|
|
}
|
|
const rest = await getPublishMapInfo(room.mapId);
|
|
const query = { lineCode: rest.data.lineCode, mapId: room.mapId, group: room.group, roomId: room.id };
|
|
if (this.drawWay === 'true') {
|
|
query.drawWay = this.drawWay;
|
|
this.$router.replace({ path: `/jointTrainingNew`, query: query});
|
|
} else {
|
|
this.$router.replace({ path: `/jointTraining`, query: query });
|
|
}
|
|
// 清空房间信息
|
|
this.$store.dispatch('socket/setJointRoomInfo');
|
|
launchFullscreen();
|
|
},
|
|
async jumpOutRoom() {
|
|
this.$router.go(-1);
|
|
this.messageInfo({error: 'warning', message: this.$t('tip.beKickedOut')});
|
|
},
|
|
transformUser(user) {
|
|
// 根据用户角色专用数据数据
|
|
switch (user.userRole) {
|
|
case 'IBP':
|
|
user.deviceCode = [user.deviceCode || '', user.ibpPart || ''];
|
|
break;
|
|
}
|
|
|
|
return user;
|
|
},
|
|
messageInfo(info) {
|
|
this.$message({ showClose: true, ...info });
|
|
},
|
|
async subscribe() {
|
|
if (!this.$store.state.socket.roomIsSubscribe) {
|
|
this.clearSubscribe();
|
|
const header = { group: this.group || '', 'X-Token': getToken() };
|
|
creatSubscribe(`${roomTopic}\/${this.group}`, header);
|
|
await this.$store.dispatch('socket/setRoomSubscribe', true);
|
|
}
|
|
},
|
|
async clearSubscribe() {
|
|
clearSubscribe(`${roomTopic}\/${this.group}`);
|
|
await this.$store.dispatch('socket/setRoomSubscribe', false);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.room {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
background: #f0f0f0;
|
|
|
|
&__head {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #000;
|
|
color: #fff;
|
|
padding: 10px;
|
|
position: relative;
|
|
|
|
&--title {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&--notes {
|
|
position: absolute;
|
|
left: 10px;
|
|
bottom: 5px;
|
|
}
|
|
}
|
|
|
|
&__container {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
padding: 10px;
|
|
|
|
&--members {
|
|
flex-shrink: 1;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&--roles {
|
|
flex-grow: 5;
|
|
flex-shrink: 5;
|
|
}
|
|
|
|
&--chat {
|
|
flex-basis: 360px;
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
height: 20px;
|
|
}
|
|
|
|
}
|
|
</style>
|