1092 lines
32 KiB
Vue
1092 lines
32 KiB
Vue
<template>
|
||
<div class="room-box">
|
||
<div class="content-box">
|
||
<!-- title显示 -->
|
||
<div class="creator">
|
||
<p style="margin-top: 2px;font-size: 15px;">{{ $t('trainRoom.comprehensiveTrainingManager') + roomInfo.creator }}</p>
|
||
<p class="roomName">{{ $t('trainRoom.comprehensiveDrillRoom') }}</p>
|
||
<div style="padding-right: 30px;">
|
||
<p class="num">{{ $t('trainRoom.numberOfAssignableRoles') }}{{ permissionRest }} / {{ roomInfo.permissionNum - 1 }}</p>
|
||
</div>
|
||
</div>
|
||
<!-- 聊天窗口 -->
|
||
<div class="chat-box">
|
||
<train-chat :group-room="roomInfo.group" />
|
||
</div>
|
||
<!-- 参与人员 -->
|
||
<div class="personnel">
|
||
<div style="height: calc(100% - 20px); overflow-y: scroll; padding: 0px 30px;">
|
||
<div style="display: flex; justify-content: space-between;">
|
||
<div class="Scheduling">
|
||
<p class="title">{{ $t('trainRoom.dispatcher') }}</p>
|
||
<ul>
|
||
<li v-for="(nor, index) in dispatchList" :key="index" class="selectPerson">
|
||
<span>{{ nor.nickName }}</span>
|
||
<i
|
||
v-if="userId == roomInfo.creatorId"
|
||
class="el-icon-close delPerson"
|
||
@click="handleDelUser(dispatchList, nor, index)"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
<div v-if="userId == roomInfo.creatorId" class="add-box">
|
||
<el-button icon="el-icon-plus" circle plain @click="addingRoles('dispatch', '增加调度人员')" />
|
||
</div>
|
||
</div>
|
||
<div class="Scheduling">
|
||
<p class="title">{{ $t('trainRoom.stationAttendant') }}</p>
|
||
<ul>
|
||
<li v-for="(nor, index) in equipmentList" :key="index" class="selectPerson">
|
||
<span>{{ nor.nickName }}</span>
|
||
<i
|
||
v-if="userId == roomInfo.creatorId"
|
||
class="el-icon-close delPerson"
|
||
@click="handleDelUserForStation(nor, index, stationListForEquipment, equipmentList)"
|
||
/>
|
||
<div style="float: right; margin-right: 15px;">
|
||
<el-select
|
||
v-model="nor.deviceCode"
|
||
:placeholder="$t('global.choose')"
|
||
size="mini"
|
||
:disabled="userId != roomInfo.creatorId"
|
||
@change="handleChangeUser(nor, 'Attendant', stationListForEquipment, equipmentList)"
|
||
>
|
||
<el-option
|
||
v-for="item in stationListForEquipment"
|
||
:key="item.code"
|
||
:label="item.name"
|
||
:value="item.code"
|
||
:disabled="item.disabled"
|
||
style="margin-left: 10px"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div v-if="userId == roomInfo.creatorId" class="add-box">
|
||
<el-button
|
||
icon="el-icon-plus"
|
||
circle
|
||
plain
|
||
@click="addingRoles('equipment', '增加车站值班员')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between;">
|
||
<div class="Scheduling ">
|
||
<p class="title">{{ $t('trainRoom.teacher') }}</p>
|
||
<ul>
|
||
<li v-for="(nor, index) in adminList" :key="index" class="selectPerson">
|
||
<span>{{ nor.nickName }}</span>
|
||
<i
|
||
v-if="userId == roomInfo.creatorId"
|
||
class="el-icon-close delPerson"
|
||
@click="handleDelUser(adminList, nor, index)"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
<div v-if="userId == roomInfo.creatorId" class="add-box">
|
||
<el-button icon="el-icon-plus" circle plain @click="addingRoles('admin', '增加教员')" />
|
||
</div>
|
||
</div>
|
||
<div class="Scheduling ">
|
||
<p class="title">{{ $t('trainRoom.universalAccount') }}</p>
|
||
<ul>
|
||
<li v-for="(nor, index) in signalList" :key="index" class="selectPerson">
|
||
<span>{{ nor.nickName }}</span>
|
||
<i
|
||
v-if="userId == roomInfo.creatorId"
|
||
class="el-icon-close delPerson"
|
||
@click="handleDelUser(signalList, nor, index)"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
<div v-if="userId == roomInfo.creatorId" class="add-box">
|
||
<el-button icon="el-icon-plus" circle plain @click="addingRoles('signal', '增加通号')" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between;">
|
||
<div class="Scheduling">
|
||
<p class="title">{{ $t('trainRoom.driver') }}</p>
|
||
<ul>
|
||
<li v-for="(nor, index) in driverList" :key="index" class="selectPerson">
|
||
<span>{{ nor.nickName }}</span>
|
||
<i
|
||
v-if="userId == roomInfo.creatorId"
|
||
class="el-icon-close delPerson"
|
||
@click="handleDelUser(driverList, nor, index)"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
<div v-if="userId == roomInfo.creatorId" class="add-box">
|
||
<el-button icon="el-icon-plus" circle plain @click="addingRoles('driver', '增加司机')" />
|
||
</div>
|
||
</div>
|
||
<div class="Scheduling">
|
||
<p class="title">IBP</p>
|
||
<ul>
|
||
<li v-for="(nor, index) in ibpList" :key="index" class="selectPerson">
|
||
<span>{{ nor.nickName }}</span>
|
||
<i
|
||
v-if="userId == roomInfo.creatorId"
|
||
class="el-icon-close delPerson"
|
||
@click="handleDelUserForStation(nor, index, stationListForIBP, ibpList)"
|
||
/>
|
||
<div style="float: right; margin-right: 15px;">
|
||
<el-cascader
|
||
v-model="nor.deviceCode"
|
||
size="mini"
|
||
:placeholder="$t('global.choose')"
|
||
:disabled="userId != roomInfo.creatorId"
|
||
:options="stationListForIBP"
|
||
@change="handleChangeUser(nor, 'IBP', stationListForIBP, ibpList)"
|
||
/>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div v-if="userId == roomInfo.creatorId" class="add-box">
|
||
<el-button
|
||
icon="el-icon-plus"
|
||
circle
|
||
plain
|
||
@click="addingRoles('ibp', '增加IBP')"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between;">
|
||
<div class="Scheduling">
|
||
<p class="title">{{ $t('trainRoom.bigScreen') }}</p>
|
||
<ul>
|
||
<li v-for="(nor, index) in bigScreenList" :key="index" class="selectPerson">
|
||
<span>{{ nor.nickName }}</span>
|
||
<i
|
||
v-if="userId == roomInfo.creatorId"
|
||
class="el-icon-close delPerson"
|
||
@click="handleDelUser(bigScreenList, nor, index)"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
<div v-if="userId == roomInfo.creatorId" class="add-box">
|
||
<el-button icon="el-icon-plus" circle plain @click="addingRoles('bigScreen', '增加大屏')" />
|
||
</div>
|
||
</div>
|
||
<!--<div class="Scheduling">-->
|
||
<!--<p class="title">真实设备-<span>{{hasPlc?'[PLC网关在线]':'[PLC网关离线]'}}</span></p>-->
|
||
<!--<ul>-->
|
||
<!--<li v-for="(nor, index) in stationStandList" :key="index" class="selectPerson">-->
|
||
<!--<span>{{ realDeviceType[nor.deviceType] }}</span>-->
|
||
<!--<div style="float: right; margin-right: 15px;">-->
|
||
<!--<el-select-->
|
||
<!--v-model="nor.deviceCode"-->
|
||
<!--:placeholder="$t('global.choose')"-->
|
||
<!--size="mini"-->
|
||
<!--:disabled="userId != roomInfo.creatorId"-->
|
||
<!--@change="handleChangeDevice(nor, doorList, stationStandList)"-->
|
||
<!-->-->
|
||
<!--<el-option-->
|
||
<!--v-for="item in doorList"-->
|
||
<!--:key="item.code"-->
|
||
<!--:label="item.name"-->
|
||
<!--:value="item.code"-->
|
||
<!--:disabled="item.disabled"-->
|
||
<!--style="margin-left: 10px"-->
|
||
<!--/>-->
|
||
<!--</el-select>-->
|
||
<!--</div>-->
|
||
<!--</li>-->
|
||
<!--</ul>-->
|
||
<!--<div v-if="userId == roomInfo.creatorId" class="add-box">-->
|
||
<!--<el-button icon="el-icon-plus" circle plain @click="addingDevice" />-->
|
||
<!--</div>-->
|
||
<!--</div>-->
|
||
</div>
|
||
</div>
|
||
<div class="start-box">
|
||
<el-button
|
||
v-if="userId == roomInfo.creatorId"
|
||
style="margin-left: 10px"
|
||
type="danger"
|
||
:loading="loading"
|
||
@click="exit"
|
||
>{{ $t('trainRoom.destroyRoom') }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="userId == roomInfo.creatorId"
|
||
style="margin-left: 10px"
|
||
type="success"
|
||
:loading="loading"
|
||
@click="postCode"
|
||
>{{ $t('trainRoom.generatingQRCode') }}
|
||
</el-button>
|
||
<template v-if="!starting">
|
||
<el-button
|
||
v-if="userId == roomInfo.creatorId"
|
||
style="margin-left: 10px"
|
||
type="primary"
|
||
:loading="loading"
|
||
@click="start"
|
||
>
|
||
{{ $t('trainRoom.startSimulation') }}</el-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-button
|
||
type="primary"
|
||
style="margin-left: 10px"
|
||
:loading="loading"
|
||
@click="joinJointTrain"
|
||
>
|
||
{{ $t('trainRoom.enterSimulation') }}</el-button>
|
||
<el-button
|
||
v-if="userId == roomInfo.creatorId"
|
||
style="margin-left: 10px"
|
||
type="warning"
|
||
:loading="loading"
|
||
@click="stop"
|
||
>
|
||
{{ $t('trainRoom.endSimulation') }}</el-button>
|
||
</template>
|
||
<el-button type="" @click="backRoom">{{ $t('global.back') }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 观众席 -->
|
||
<div class="person-box">
|
||
<div class="title">
|
||
<div style="float: left;" />
|
||
<div style="float: right; font-size: 15px;">{{ treeData.length }}/{{ roomInfo.totalNum }}</div>
|
||
</div>
|
||
<el-input v-model="filterText" :placeholder="this.$t('global.enterNameToFilter')" clearable />
|
||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height) +'px' }">
|
||
<el-tree
|
||
ref="trainingTree"
|
||
:data="treeData"
|
||
:filter-node-method="filterNode"
|
||
:lazy="false"
|
||
:props="defaultProps"
|
||
class="tree-height-max"
|
||
@node-contextmenu="showContextMenu"
|
||
>
|
||
<span slot-scope="{ node, data }">
|
||
<span v-if="node.data.inRoom" style="color: green;">{{ data.nickName }}</span>
|
||
<span v-else style="color: #ccc;">{{ data.nickName }}</span>
|
||
</span>
|
||
</el-tree>
|
||
</el-scrollbar>
|
||
</div>
|
||
<add-person ref="addPerson" @handleDispatch="handleDispatch" @handleUserList="handleUserList" />
|
||
<qr-code ref="qrCode" />
|
||
<tree-operate-menu ref="menu" :point="point" :click-user-id="clickUserId" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getJoinTrainCode, deljointTrainRoom, putUserRoles, postRoomDetail, getJointTrainRoomUserList, putJointTrainingExit, startJointTraining, putJointTrainingSimulation, putJointTrainingSimulationEntrance, setRealDevice } from '@/api/chat';
|
||
import { getStationList } from '@/api/runplan';
|
||
import { launchFullscreen } from '@/utils/screen';
|
||
import { DeviceMenu, RealDeviceType } from '@/scripts/ConstDic';
|
||
import { checkLoginLine } from '@/api/login';
|
||
import { getPublishMapInfo, hasDoorStationList } from '@/api/jmap/map';
|
||
import { getPlcGateway } from '@/api/simulation';
|
||
import trainChat from './trainChat';
|
||
import AddPerson from './addPerson';
|
||
import QrCode from '@/components/QrCode';
|
||
import TreeOperateMenu from './operateMenu';
|
||
|
||
export default {
|
||
name: 'TrainRoom',
|
||
components: {
|
||
trainChat,
|
||
AddPerson,
|
||
QrCode,
|
||
TreeOperateMenu
|
||
},
|
||
data() {
|
||
return {
|
||
testData: ['Station_203_0.07533', 'left'],
|
||
userId: '',
|
||
permissionRest: 0,
|
||
roomInfo: {
|
||
creator: '',
|
||
totalNum: '',
|
||
creatorId: '',
|
||
group: '',
|
||
audienceNum: 0,
|
||
permissionNum: 0
|
||
},
|
||
filterText: '',
|
||
isShow: false,
|
||
listName: 'dispatch',
|
||
treeData: [],
|
||
defaultProps: {
|
||
label: 'nickName'
|
||
},
|
||
dispatchList: [],
|
||
equipmentList: [],
|
||
adminList: [],
|
||
driverList: [],
|
||
signalList: [],
|
||
bigScreenList: [],
|
||
stationList: [],
|
||
stationStandList: [],
|
||
ibpList: [],
|
||
point: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
clickUserId: '', // 选择踢出用户id
|
||
timeDemon: null,
|
||
starting: false,
|
||
mapId: '',
|
||
loading: false,
|
||
hasPlc: false,
|
||
doorList: [],
|
||
realDeviceType: RealDeviceType
|
||
};
|
||
},
|
||
computed: {
|
||
height() {
|
||
return this.$store.state.app.height - 95;
|
||
},
|
||
stationListForEquipment() {
|
||
return this.stationList.filter(elem => { return elem.centralized; }).map(item => {
|
||
const elem = { code: item.code, name: item.name, disabled: false };
|
||
this.equipmentList.forEach(nor => {
|
||
if (elem.code == nor.deviceCode) {
|
||
elem.disabled = true;
|
||
}
|
||
});
|
||
return elem;
|
||
});
|
||
},
|
||
stationListForIBP() {
|
||
return this.stationList.map(item => {
|
||
const elem = { value: item.code, label: item.name, children: [{value: 'left', label: this.$t('trainRoom.left')}, {value: 'right', label: this.$t('trainRoom.right')}] };
|
||
return elem;
|
||
});
|
||
}
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.trainingTree.filter(val);
|
||
},
|
||
'$store.state.socket.roleInfo': async function (val) {
|
||
if (val.length) { // 分配角色信息
|
||
await this.addrolesList(val);
|
||
}
|
||
},
|
||
'$store.state.socket.jointRoomInfo': async function (val) {
|
||
if (val.creatorId) { // 房间消息
|
||
await this.handleRoomInfo(val);
|
||
}
|
||
},
|
||
'$store.state.socket.userPermit': async function (val) {
|
||
if (val.id) { // 用户扫码信息
|
||
val.state = '01';
|
||
await this.addPeopleList(val);
|
||
}
|
||
},
|
||
'$store.state.socket.userRoomKickOut': async function (val) {
|
||
if (val.id) { // 用户被踢出信息
|
||
val.state = '03';
|
||
await this.addPeopleList(val);
|
||
}
|
||
},
|
||
'$store.state.socket.userInRoom': async function (val) {
|
||
if (val.id) { // 用户从外部进入房间消息
|
||
val.state = '02';
|
||
await this.addPeopleList(val);
|
||
}
|
||
},
|
||
'$store.state.socket.userOutRoom': async function (val) {
|
||
if (val.id) { // 用户退出房间消息
|
||
val.state = '02';
|
||
await this.addPeopleList(val);
|
||
}
|
||
},
|
||
'$store.state.socket.deviceInfo': async function (val) {
|
||
if (val) { // 分配设备信息
|
||
await this.handlerDeviceList(val);
|
||
}
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
if (this.timeDemon) {
|
||
clearTimeout(this.timeDemon);
|
||
}
|
||
},
|
||
async mounted() {
|
||
this.userId = this.$store.state.user.id;
|
||
this.getRoomInfo(); // 获取房间信息 info
|
||
this.getUserList(); // 房间人员 列表
|
||
// this.checkPlcGateway(); //PLC网关
|
||
this.timeDemon = setInterval(() => {
|
||
checkLoginLine();
|
||
}, 5000 * 60);
|
||
},
|
||
methods: {
|
||
computePermissionRest() {
|
||
this.permissionRest = this.roomInfo.permissionNum > 0
|
||
?this.roomInfo.permissionNum - [
|
||
...this.adminList,
|
||
...this.dispatchList,
|
||
...this.equipmentList,
|
||
...this.driverList,
|
||
...this.signalList,
|
||
...this.ibpList,
|
||
...this.bigScreenList
|
||
].length - 1: 0;
|
||
},
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.name.indexOf(value) !== -1;
|
||
},
|
||
ibpRoleData(nor) {
|
||
return [nor.deviceCode, nor.ibpPart];
|
||
},
|
||
async handleRoomInfo(data) {
|
||
const param = {
|
||
creatorId: data.creatorId,
|
||
group: data.group,
|
||
mapId: data.mapId,
|
||
permissionNum: data.permissionNum,
|
||
roomName: data.roomName,
|
||
state: data.state
|
||
};
|
||
|
||
if (data.state == '03') { // 房间销毁
|
||
this.$router.push({ path: `/trainingPlatform/detail/${this.$route.query.subSystem}`, query: {mapId: this.mapId}});
|
||
} else if (data.state == '01') { // 进入准备中
|
||
this.starting = false;
|
||
} else if (data.state == '02') {
|
||
this.starting = true;
|
||
await putJointTrainingSimulationEntrance(param.group);
|
||
const rest = await getPublishMapInfo(param.mapId);
|
||
const query = { skinCode: rest.data.skinCode, mapId: param.mapId, group: param.group, subSystem: this.$route.query.subSystem };
|
||
this.$router.push({ path: `/jointTraining`, query: query });
|
||
launchFullscreen();
|
||
}
|
||
this.$store.dispatch('socket/setJointRoomInfo'); // 清空房间信息
|
||
},
|
||
// 右键点击观众席
|
||
showContextMenu(e, obj, node, vueElem) {
|
||
e.preventDefault();
|
||
this.point = {
|
||
x: e.clientX,
|
||
y: e.clientY
|
||
};
|
||
if (this.userId == this.roomInfo.creatorId) {
|
||
this.clickUserId = obj.id;
|
||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: DeviceMenu.JointRoom });
|
||
}
|
||
},
|
||
async joinJointTrain() {
|
||
this.loading = true;
|
||
await putJointTrainingSimulationEntrance(this.$route.query.group);
|
||
const rest = await getPublishMapInfo(this.mapId);
|
||
const query = { skinCode: rest.data.skinCode, mapId: this.mapId, group: this.$route.query.group, subSystem: this.$route.query.subSystem };
|
||
this.$router.push({ path: `/jointTraining`, query: query });
|
||
launchFullscreen();
|
||
},
|
||
// 判断观众席在线/不在线
|
||
addPeopleList(obj) {
|
||
const param = {
|
||
id: obj.id,
|
||
inRoom: obj.inRoom,
|
||
inSimulation: obj.inSimulation,
|
||
name: obj.name,
|
||
nickName: obj.nickName,
|
||
userRole: obj.userRole
|
||
};
|
||
if (obj.state == '01') { // 扫码信息
|
||
this.treeData.push(param);
|
||
} else if (obj.state == '02') { // 判断 inRoom 人员 在不在线
|
||
const index = this.treeData.findIndex(nor => nor.id == param.id);
|
||
if (index > -1) {
|
||
this.treeData[index].inRoom = param.inRoom;
|
||
}
|
||
} else if (obj.state == '03') { // 被踢出房间
|
||
const index = this.treeData.findIndex(nor => nor.id == param.id);
|
||
this.treeData.splice(index, 1);
|
||
if (this.userId == param.id) {
|
||
this.$router.push({ path: `/` });
|
||
this.messageInfo(this.$t('tip.beKickedOut'), 'warning');
|
||
} else {
|
||
param.userRole = '';
|
||
param['deviceCode'] = '';
|
||
const arr = [];
|
||
arr.push(param);
|
||
this.addrolesList(arr); // 删除角色信息
|
||
}
|
||
}
|
||
this.computePermissionRest();
|
||
},
|
||
// 分配角色
|
||
addrolesList(list) {
|
||
list.forEach(item => {
|
||
switch (item.userRole) {
|
||
case 'Instructor':
|
||
this.adminList.push(item);
|
||
break;
|
||
case 'Dispatcher':
|
||
this.dispatchList.push(item);
|
||
break;
|
||
case 'Attendant':
|
||
this.equipmentList.forEach((nor, index) => {
|
||
if (nor.id == item.id) {
|
||
this.equipmentList.splice(index, 1);
|
||
}
|
||
});
|
||
this.equipmentList.push(item);
|
||
break;
|
||
case 'Driver':
|
||
this.driverList.push(item);
|
||
break;
|
||
case 'Repair':
|
||
this.signalList.push(item);
|
||
break;
|
||
case 'IBP':
|
||
this.ibpList.forEach((nor, index) => {
|
||
if (nor.id == item.id) {
|
||
this.ibpList.splice(index, 1);
|
||
}
|
||
});
|
||
item.deviceCode = [item.deviceCode, item.ibpPart];
|
||
this.ibpList.push(item);
|
||
break;
|
||
case 'BigScreen':
|
||
this.bigScreenList.push(item);
|
||
break;
|
||
default:
|
||
this.dispatchList.forEach((nor, index) => {
|
||
if (item.id == nor.id) {
|
||
this.dispatchList.splice(index, 1);
|
||
}
|
||
});
|
||
this.equipmentList.forEach((nor, index) => {
|
||
if (item.id == nor.id) {
|
||
this.equipmentList.splice(index, 1);
|
||
}
|
||
});
|
||
this.adminList.forEach((nor, index) => {
|
||
if (item.id == nor.id) {
|
||
this.adminList.splice(index, 1);
|
||
}
|
||
});
|
||
this.driverList.forEach((nor, index) => {
|
||
if (item.id == nor.id) {
|
||
this.driverList.splice(index, 1);
|
||
}
|
||
});
|
||
this.signalList.forEach((nor, index) => {
|
||
if (item.id == nor.id) {
|
||
this.signalList.splice(index, 1);
|
||
}
|
||
});
|
||
this.ibpList.forEach((nor, index) => {
|
||
if (item.id == nor.id) {
|
||
this.ibpList.splice(index, 1);
|
||
}
|
||
});
|
||
this.bigScreenList.forEach((nor, index) => {
|
||
if (item.id == nor.id) {
|
||
this.bigScreenList.splice(index, 1);
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
});
|
||
this.computePermissionRest();
|
||
},
|
||
async getRoomInfo() {
|
||
// 获取房间信息 创建人和权限总数
|
||
const res = await postRoomDetail(this.$route.query.group);
|
||
|
||
this.starting = res.data.state == '02';
|
||
this.mapId = res.data.mapId;
|
||
this.prodId = res.data.mapPrdCode;
|
||
this.roomInfo = {
|
||
creatorId: res.data.creatorId,
|
||
totalNum: Number(res.data.permissionNum) + Number(res.data.audiencePermissionNum),
|
||
creator: res.data.creator.nickName,
|
||
group: res.data.group,
|
||
audienceNum: res.data.audiencePermissionNum,
|
||
permissionNum: res.data.permissionNum
|
||
};
|
||
|
||
// 获取设备集中站
|
||
const resp = await getStationList(res.data.mapId);
|
||
this.stationList = resp.data;
|
||
this.computePermissionRest();
|
||
// 获取屏蔽门列表
|
||
// this.handleDoorList(res.data.mapId, resp.data);
|
||
},
|
||
// 获取观众席list 分配角色 Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号 IBP IBP盘
|
||
async getUserList() {
|
||
this.dispatchList = [];
|
||
this.equipmentList = [];
|
||
this.adminList = [];
|
||
this.driverList = [];
|
||
this.signalList = [];
|
||
this.ibpList = [];
|
||
const res = await getJointTrainRoomUserList(this.$route.query.group);
|
||
res.data.forEach(item => {
|
||
if (item.id == this.userId) {
|
||
item.disabled = true;
|
||
}
|
||
switch (item.userRole) {
|
||
case 'Instructor':
|
||
item.select = true;
|
||
this.adminList.push(item);
|
||
break;
|
||
case 'Dispatcher':
|
||
item.select = true;
|
||
this.dispatchList.push(item);
|
||
break;
|
||
case 'Attendant':
|
||
item.select = true;
|
||
this.equipmentList.push(item);
|
||
break;
|
||
case 'Driver':
|
||
item.select = true;
|
||
this.driverList.push(item);
|
||
break;
|
||
case 'Repair':
|
||
item.select = true;
|
||
this.signalList.push(item);
|
||
break;
|
||
case 'IBP':
|
||
item.select = true;
|
||
item.deviceCode = [item.deviceCode, item.ibpPart];
|
||
this.ibpList.push(item);
|
||
break;
|
||
case 'BigScreen':
|
||
item.select = true;
|
||
this.bigScreenList.push(item);
|
||
break;
|
||
}
|
||
this.treeData.push(item);
|
||
});
|
||
this.computePermissionRest();
|
||
},
|
||
async postCode() {
|
||
this.loading = true;
|
||
const res = await getJoinTrainCode({}, this.$route.query.group);
|
||
if (res.code == '200') {
|
||
const param = {
|
||
url: res.data,
|
||
title: this.$t('trainRoom.distributeTheRoomQRCode')
|
||
};
|
||
if (this.$refs) {
|
||
this.$refs.qrCode.doShow(param);
|
||
}
|
||
}
|
||
this.loading = false;
|
||
},
|
||
async start() {
|
||
let flag = true;
|
||
this.loading = true;
|
||
this.equipmentList.forEach(item => {
|
||
if (!item.deviceCode) {
|
||
flag = false;
|
||
}
|
||
});
|
||
|
||
if (flag) {
|
||
try {
|
||
await startJointTraining(this.$route.query.group);
|
||
this.loading = false;
|
||
} catch (error) {
|
||
this.messageInfo( this.$t('error.startedComprehensiveDrillFailure'), 'error');
|
||
this.loading = false;
|
||
}
|
||
} else {
|
||
this.messageInfo( this.$t('error.stationAttendantStationCannotBeEmpty'), 'error');
|
||
this.loading = false;
|
||
}
|
||
},
|
||
async stop() {
|
||
this.loading = true;
|
||
const res = await putJointTrainingSimulation(this.$route.query.group);
|
||
this.mapId = res.data.mapId;
|
||
if (res.data.state == '01') {
|
||
this.starting = false;
|
||
}
|
||
this.loading = false;
|
||
},
|
||
// 返回
|
||
async backRoom() {
|
||
try {
|
||
this.loading = true;
|
||
await putJointTrainingExit(this.$route.query.group);
|
||
this.loading = false;
|
||
this.$router.push({ path: `/trainingPlatform/detail/${this.$route.query.subSystem}`, query: {mapId: this.mapId}});
|
||
} catch (error) {
|
||
this.messageInfo( this.$t('error.operationFailure'), 'error');
|
||
}
|
||
},
|
||
// 管理员销毁房间
|
||
exit() {
|
||
this.loading = false;
|
||
this.$confirm( this.$t('tip.destroyRoomHint'), this.$t('tip.hint'), {
|
||
confirmButtonText: this.$t('global.confirm'),
|
||
cancelButtonText: this.$t('global.cancel'),
|
||
type: 'warning'
|
||
}).then(async () => {
|
||
try {
|
||
await deljointTrainRoom(this.$route.query.group);
|
||
} catch (error) {
|
||
this.messageInfo(this.$t('error.destroyedRoomFailed'), 'error');
|
||
}
|
||
});
|
||
},
|
||
// 打开弹窗
|
||
addingRoles(name, title) {
|
||
const titleMap = {
|
||
'增加调度人员': this.$t('trainRoom.increaseDispatchers'),
|
||
'增加车站值班员': this.$t('trainRoom.increaseStationAttendant'),
|
||
'增加教员': this.$t('trainRoom.increaseTeacher'),
|
||
'增加通号': this.$t('trainRoom.increaseUniversalAccount'),
|
||
'增加司机': this.$t('trainRoom.driver'),
|
||
'增加大屏': this.$t('trainRoom.increaseBigScreen'),
|
||
'增加IBP': this.$t('trainRoom.increaseIbp')
|
||
};
|
||
title = titleMap[title];
|
||
this.listName = name;
|
||
const treeList = [];
|
||
this.treeData.forEach(item => {
|
||
if (!item.select) {
|
||
delete item.select;
|
||
treeList.push(item);
|
||
}
|
||
});
|
||
this.$refs.addPerson.doShow(title, treeList);
|
||
},
|
||
// Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号
|
||
async handleDispatch(list) {
|
||
const arr = [];
|
||
list.forEach(item => {
|
||
const params = {
|
||
id: item.id,
|
||
nickName: item.nickName,
|
||
userRole: ''
|
||
};
|
||
switch (this.listName) {
|
||
case 'admin': // 教员
|
||
params.userRole = 'Instructor';
|
||
break;
|
||
case 'dispatch': // 调度员
|
||
params.userRole = 'Dispatcher';
|
||
break;
|
||
case 'equipment': // 车站值班员
|
||
params.userRole = 'Attendant';
|
||
break;
|
||
case 'driver': // 司机
|
||
params.userRole = 'Driver';
|
||
break;
|
||
case 'signal': // 通号
|
||
params.userRole = 'Repair';
|
||
break;
|
||
case 'ibp': // IBP
|
||
params.userRole = 'IBP';
|
||
break;
|
||
case 'bigScreen': // 大屏
|
||
params.userRole = 'BigScreen';
|
||
break;
|
||
}
|
||
arr.push(params);
|
||
});
|
||
if (arr.length) {
|
||
try {
|
||
await putUserRoles(arr, this.$route.query.group);
|
||
arr.forEach(item => {
|
||
this.treeData.forEach(nor => {
|
||
if (item.id == nor.id) {
|
||
nor.userRole = item.userRole;
|
||
}
|
||
});
|
||
});
|
||
} catch (error) {
|
||
if (error.code == 500009) {
|
||
this.messageInfo(this.$t('error.exceededTheTotalNumberOfAssignableRoles'), 'error');
|
||
}
|
||
this.treeData.forEach(item => {
|
||
if (item.userRole == '' || item.userRole == 'Audience' || item.userRole == 'IBP') {
|
||
item.select = false;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
handleUserList(list) {
|
||
this.treeData.forEach(item => {
|
||
list.forEach(nor => {
|
||
if (item.id == nor.id) {
|
||
item = nor;
|
||
}
|
||
});
|
||
});
|
||
},
|
||
handleChangeUser(val, role, stationList, list) {
|
||
let deviceCode = '';
|
||
if (role === 'IBP') {
|
||
val.ibpPart = val.deviceCode[1];
|
||
deviceCode = val.deviceCode[0];
|
||
} else {
|
||
val.ibpPart = '';
|
||
deviceCode = val.deviceCode;
|
||
}
|
||
const params = [{
|
||
id: val.id,
|
||
nickName: val.nickName,
|
||
userRole: role,
|
||
deviceCode: deviceCode,
|
||
ibpPart: val.ibpPart
|
||
}];
|
||
putUserRoles(params, this.$route.query.group);
|
||
stationList.forEach(item => {
|
||
item.disabled = false;
|
||
list.forEach(nor => {
|
||
if (item.code == nor.deviceCode[0]) {
|
||
item.disabled = true;
|
||
}
|
||
});
|
||
});
|
||
},
|
||
handleDelUser(list, item, index) {
|
||
list.splice(index, 1);
|
||
this.handleProperty(item);
|
||
},
|
||
handleDelUserForStation(item, index, stationList, list) {
|
||
list.splice(index, 1);
|
||
stationList.forEach(item => {
|
||
item.disabled = false;
|
||
list.forEach(nor => {
|
||
if (item.code == nor.deviceCode) {
|
||
item.disabled = true;
|
||
}
|
||
});
|
||
});
|
||
this.handleProperty(item);
|
||
},
|
||
handleProperty(item, role) {
|
||
const treeIndex = this.treeData.findIndex(nor => nor.id == item.id);
|
||
if (treeIndex > -1) {
|
||
this.treeData[treeIndex]['select'] = false;
|
||
this.treeData[treeIndex].userRole = 'Audience';
|
||
}
|
||
const params = [{
|
||
id: item.id,
|
||
nickName: item.nickName,
|
||
userRole: 'Audience',
|
||
deviceCode: ''
|
||
}];
|
||
putUserRoles(params, this.$route.query.group);
|
||
},
|
||
messageInfo(message, type) {
|
||
this.$message({
|
||
showClose: true,
|
||
message: message,
|
||
type: type
|
||
});
|
||
},
|
||
checkPlcGateway() {
|
||
getPlcGateway(this.$route.query.group).then(resp=>{
|
||
if (resp.data) {
|
||
this.hasPlc = true;
|
||
} else {
|
||
this.hasPlc = false;
|
||
}
|
||
}).catch(() => {
|
||
this.$messageBox('查询PLC设备失败！');
|
||
});
|
||
},
|
||
handleDoorList(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? '上行站台':'下行站台';
|
||
doorList.push({code: it.code, name: item.name+direction});
|
||
}
|
||
});
|
||
});
|
||
this.doorList = doorList;
|
||
}).catch((error) => {
|
||
this.$messageBox('获取屏蔽门列表失败！');
|
||
});
|
||
},
|
||
addingDevice() {
|
||
const roomDeviceVo = {id: '', deviceType: 'ScreenDoor', deviceCode: ''};
|
||
setRealDevice(this.$route.query.group, roomDeviceVo);
|
||
},
|
||
handleChangeDevice(nor, doorList, stationStandList) {
|
||
setRealDevice(this.$route.query.group, nor);
|
||
doorList.forEach(item => {
|
||
item.disabled = false;
|
||
stationStandList.forEach(nor => {
|
||
if (item.code == nor.deviceCode) {
|
||
item.disabled = true;
|
||
}
|
||
});
|
||
});
|
||
},
|
||
handlerDeviceList(data) {
|
||
this.stationStandList = [data];
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/deep/ {
|
||
.Scheduling {
|
||
.el-input__inner {
|
||
height: 30px;
|
||
width: 180px;
|
||
}
|
||
}
|
||
}
|
||
|
||
ul,
|
||
li {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 0px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #c7c7c7;
|
||
}
|
||
|
||
.room-box {
|
||
position: relative;
|
||
height: 100%;
|
||
min-width: 1300px;
|
||
|
||
.content-box {
|
||
width: calc(100% - 320px);
|
||
height: 100%;
|
||
float: left;
|
||
position: relative;
|
||
|
||
.creator {
|
||
padding-left: 50px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.num {
|
||
float: left;
|
||
margin-left: 15px;
|
||
margin-top: 14px;
|
||
}
|
||
}
|
||
|
||
.roomName {
|
||
margin-left: 20px;
|
||
margin: 0;
|
||
font-size: 25px;
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
|
||
.person-box {
|
||
width: 320px;
|
||
height: 100%;
|
||
float: right;
|
||
padding: 5px;
|
||
border: 1px solid #ccc;
|
||
|
||
.title {
|
||
padding-left: 5px;
|
||
font-size: 20px;
|
||
margin: 10px 0;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chat-box {
|
||
float: left;
|
||
margin-left: 20px;
|
||
height: calc(100% - 60px);
|
||
width: 480px;
|
||
}
|
||
|
||
.personnel {
|
||
width: calc(100% - 500px);
|
||
height: calc(100% - 120px);
|
||
float: left;
|
||
|
||
.Scheduling {
|
||
width: calc(50% - 10px);
|
||
float: left;
|
||
height: 240px;
|
||
border: 1px solid #ccc;
|
||
margin-bottom: 20px;
|
||
overflow-y: scroll;
|
||
position: relative;
|
||
|
||
.title {
|
||
padding: 0;
|
||
margin: 0;
|
||
padding: 5px;
|
||
}
|
||
|
||
.add-box {
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 10px;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
.selectPerson {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding-left: 10px;
|
||
margin-bottom: 2px;
|
||
|
||
&:hover {
|
||
background-color: #f1f1f1;
|
||
}
|
||
|
||
.delPerson {
|
||
float: right;
|
||
margin-right: 10px;
|
||
margin-top: 7px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.start-box {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
background: #f1f1f1;
|
||
padding: 20px 0px;
|
||
}
|
||
|
||
@media screen and (max-width: 1325px) {
|
||
.chat-box {
|
||
width: 380px;
|
||
}
|
||
|
||
.personnel {
|
||
width: calc(100% - 400px);
|
||
}
|
||
}
|
||
</style>
|