583 lines
20 KiB
Vue
583 lines
20 KiB
Vue
<template>
|
|
<div class="roles">
|
|
<div class="roles__head">
|
|
<div class="roles__head--title">
|
|
<div class="label">人员分配</div>
|
|
<div class="notes">{{ room.permissionRest }} / {{ room.permissionNum - 1 }}</div>
|
|
</div>
|
|
<div class="roles__head--reset">
|
|
<!--<el-button size="mini" round>重置</el-button>-->
|
|
</div>
|
|
</div>
|
|
<div class="roles__container">
|
|
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: rolesHeight+'px', width: '100%'}">
|
|
<div class="roles">
|
|
<e-role
|
|
class="role"
|
|
title-i18n="trainRoom.dispatcher"
|
|
role-type="Dispatcher"
|
|
:room="room"
|
|
:options="dispatcherList"
|
|
@addUser="handleAddUser"
|
|
@changeUser="handleUpdUser"
|
|
@delUser="handleDelUser"
|
|
/>
|
|
<e-role
|
|
class="role"
|
|
title-i18n="trainRoom.stationAttendant"
|
|
role-type="Attendant"
|
|
:room="room"
|
|
:options="attendantList"
|
|
:device-list="stationListForAttendant"
|
|
@addUser="handleAddUser"
|
|
@changeUser="handleUpdUser"
|
|
@delUser="handleDelUser"
|
|
/>
|
|
<e-role
|
|
v-if="drawWay != 'true'"
|
|
class="role"
|
|
title-i18n="trainRoom.teacher"
|
|
role-type="Instructor"
|
|
:room="room"
|
|
:options="instructorList"
|
|
@addUser="handleAddUser"
|
|
@changeUser="handleUpdUser"
|
|
@delUser="handleDelUser"
|
|
/>
|
|
<e-role
|
|
class="role"
|
|
title-i18n="trainRoom.universalAccount"
|
|
role-type="Repair"
|
|
:room="room"
|
|
:options="repairList"
|
|
@addUser="handleAddUser"
|
|
@changeUser="handleUpdUser"
|
|
@delUser="handleDelUser"
|
|
/>
|
|
<e-role
|
|
class="role"
|
|
title-i18n="trainRoom.driver"
|
|
role-type="Driver"
|
|
:room="room"
|
|
:options="driverList"
|
|
@addUser="handleAddUser"
|
|
@changeUser="handleUpdUser"
|
|
@delUser="handleDelUser"
|
|
/>
|
|
<e-role
|
|
v-if="drawWay != 'true'"
|
|
class="role"
|
|
title-i18n="trainRoom.ibp"
|
|
role-type="IBP"
|
|
:room="room"
|
|
:options="ibpList"
|
|
:device-list="stationListForIBP"
|
|
@addUser="handleAddUser"
|
|
@changeUser="handleUpdUser"
|
|
@delUser="handleDelUser"
|
|
/>
|
|
<e-role
|
|
v-if="isGzbProject"
|
|
class="role"
|
|
title-i18n="trainRoom.interlock"
|
|
role-type="CI"
|
|
:room="room"
|
|
:options="ciList"
|
|
@addUser="handleAddUser"
|
|
@changeUser="handleUpdUser"
|
|
@delUser="handleDelUser"
|
|
/>
|
|
<e-device
|
|
v-if="isXtyProject"
|
|
class="role"
|
|
title-i18n="trainRoom.realDevice"
|
|
device-type="StationStand"
|
|
:room="room"
|
|
:options="standList"
|
|
:device-list="doorList"
|
|
:has-plc="hasPlc"
|
|
@addDevice="handleAddDevice"
|
|
@changeDevice="handleUpdDevice"
|
|
@delDevice="handleDelDevice"
|
|
/>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
<div class="roles__footer">
|
|
<el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="danger" :disabled="disabled" @click="handleExit">{{ $t('trainRoom.destroyRoom') }}</el-button>
|
|
<el-button v-if="userId == room.creatorId && !isLocal" style="margin-left: 10px" type="success" :disabled="disabled" @click="handlePostQrcode">{{ $t('trainRoom.generatingQRCode') }}</el-button>
|
|
<el-button v-if="userId == room.creatorId && isLocal" style="margin-left: 10px" type="success" :disabled="disabled" @click="handleGetGroup">{{ $t('trainRoom.getGroupId') }}</el-button>
|
|
<template v-if="!starting">
|
|
<el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="primary" :disabled="disabled" @click="handleStart"> {{ $t('trainRoom.startSimulation') }}</el-button>
|
|
</template>
|
|
<template v-else>
|
|
<el-button type="primary" style="margin-left: 10px" :disabled="disabled" @click="handleJoin"> {{ $t('trainRoom.enterSimulation') }}</el-button>
|
|
<el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="warning" :disabled="disabled" @click="handleStop"> {{ $t('trainRoom.endSimulation') }}</el-button>
|
|
</template>
|
|
<el-button v-if="!projectDevice" type="" :disabled="disabled" @click="handleBack">{{ $t('global.back') }}</el-button>
|
|
</div>
|
|
<add-person ref="addPerson" :audience-list="audienceList" @dispatch="handleDispatchUser" />
|
|
<qr-code ref="qrCode" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import eRole from './e-role';
|
|
import eDevice from './e-device';
|
|
import AddPerson from './add-person';
|
|
import QrCode from '@/components/QrCode';
|
|
import { getJoinTrainCode, startJointTraining, deljointTrainRoom, putJointTrainingExit, putJointTrainingSimulation, putUserRoles, setRealDevice, delRealDevice } from '@/api/chat';
|
|
import { getJoinTrainCodeNew, startJointTrainingNew, deljointTrainRoomNew, putUserRolesNew, putJointTrainingExitNew, putJointTrainingSimulationNew, setRealDeviceNew, delRealDeviceNew } from '@/api/jointTraining';
|
|
import { getPlcGateway } from '@/api/simulation';
|
|
import { getSessionStorage } from '@/utils/auth';
|
|
|
|
export default {
|
|
components : {
|
|
eRole,
|
|
eDevice,
|
|
AddPerson,
|
|
QrCode
|
|
},
|
|
props: {
|
|
room: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
members: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
height: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
stationList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
availableStationList:{
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
standList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
doorList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
disabled: false,
|
|
hasPlc: false
|
|
};
|
|
},
|
|
computed: {
|
|
rolesHeight() {
|
|
return this.height - 100;
|
|
},
|
|
projectDevice() {
|
|
return this.$store.state.user.projectDevice;
|
|
},
|
|
isXtyProject() {
|
|
return getSessionStorage('project').endsWith('xty');
|
|
},
|
|
isGzbProject() {
|
|
return getSessionStorage('project').endsWith('gzb');
|
|
},
|
|
isLocal() {
|
|
return process.env.VUE_APP_PRO === 'local';
|
|
},
|
|
group() {
|
|
return this.$route.query.group;
|
|
},
|
|
drawWay() {
|
|
return this.$route.query.drawWay + '';
|
|
},
|
|
userId() {
|
|
return this.$store.state.user ? this.$store.state.user.id : '';
|
|
},
|
|
starting() {
|
|
return this.room.state == '02';
|
|
},
|
|
stationListForAttendant() {
|
|
if (this.drawWay === 'true') {
|
|
return this.availableStationList;
|
|
} else {
|
|
return this.stationList.filter(elem => { return elem.centralized; }).map(item => {
|
|
const elem = { code: item.code, name: item.name, disabled: false };
|
|
this.attendantList.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;
|
|
});
|
|
},
|
|
dispatcherList() {
|
|
return this.members.filter(elem => { return [elem.userRole.toUpperCase()].includes('DISPATCHER'); });
|
|
},
|
|
attendantList() {
|
|
return this.members.filter(elem => { return [elem.userRole.toUpperCase()].includes('ATTENDANT') || [elem.userRole.toUpperCase()].includes('STATION_SUPERVISOR'); });
|
|
},
|
|
instructorList() {
|
|
return this.members.filter(elem => { return [elem.userRole.toUpperCase()].includes('INSTRUCTOR'); });
|
|
},
|
|
repairList() {
|
|
return this.members.filter(elem => { return [elem.userRole.toUpperCase()].includes('REPAIR') || [elem.userRole.toUpperCase()].includes('MAINTAINER'); });
|
|
},
|
|
driverList() {
|
|
return this.members.filter(elem => { return [elem.userRole.toUpperCase()].includes('DRIVER'); });
|
|
},
|
|
ibpList() {
|
|
return this.members.filter(elem => { return [elem.userRole.toUpperCase()].includes('IBP'); });
|
|
},
|
|
audienceList() {
|
|
return this.members.filter(elem => { return [elem.userRole.toUpperCase()].includes('AUDIENCE'); });
|
|
},
|
|
ciList() {
|
|
return this.members.filter(elem => { return [elem.userRole.toUpperCase()].includes('CI'); });
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.checkPlcGateway();
|
|
},
|
|
methods: {
|
|
async checkPlcGateway() {
|
|
try {
|
|
const resp = await getPlcGateway(this.group);
|
|
this.hasPlc = !!resp.data;
|
|
} catch (e) {
|
|
this.hasPlc = false;
|
|
this.$messageBox(this.$t('error.inquiryPLCDeviceFailed'));
|
|
}
|
|
},
|
|
async handleAddDevice({deviceType}) {
|
|
const roomDeviceVo = {id: '', deviceType: 'ScreenDoor', deviceCode: ''};
|
|
if (this.standList.findIndex(elem => { return elem.deviceType == roomDeviceVo.deviceType; }) > -1) {
|
|
this.$message.info(this.$t('error.theDeviceTypeAlreadyExists'));
|
|
return;
|
|
}
|
|
if (this.drawWay === 'true') {
|
|
await setRealDeviceNew(this.group, roomDeviceVo);
|
|
} else {
|
|
await setRealDevice(this.group, roomDeviceVo);
|
|
}
|
|
},
|
|
async handleUpdDevice({deviceType, device}) {
|
|
try {
|
|
if (this.drawWay === 'true') {
|
|
await setRealDeviceNew(this.group, device);
|
|
} else {
|
|
await setRealDevice(this.group, device);
|
|
}
|
|
} catch (e) {
|
|
this.$messageBox(this.$t('error.connectToRealDeviceFailed'));
|
|
}
|
|
},
|
|
async handleDelDevice({deviceType, device}) {
|
|
try {
|
|
if (this.drawWay === 'true') {
|
|
await delRealDeviceNew(device.id, this.group);
|
|
} else {
|
|
await delRealDevice(device.id, this.group);
|
|
}
|
|
} catch (e) {
|
|
this.$messageBox(this.$t('error.deleteRealDeviceFailed'));
|
|
}
|
|
},
|
|
async handleAddUser({roleType}) {
|
|
this.$refs.addPerson.doShow(roleType);
|
|
},
|
|
async handleDelUser({roleType, user}) {
|
|
const params = [{
|
|
id: user.id,
|
|
nickName: user.nickName,
|
|
userRole: 'Audience',
|
|
deviceCode: ''
|
|
}];
|
|
if (this.drawWay === 'true') {
|
|
params[0].userRole = 'AUDIENCE';
|
|
try {
|
|
await putUserRolesNew(params, this.group);
|
|
} catch (error) {
|
|
this.$message(error.message);
|
|
}
|
|
} else {
|
|
await putUserRoles(params, this.group);
|
|
}
|
|
},
|
|
async handleUpdUser({roleType, user, deviceList}) {
|
|
let deviceCode = '';
|
|
if (roleType === 'IBP') {
|
|
user.ibpPart = user.deviceCode[1];
|
|
deviceCode = user.deviceCode[0];
|
|
} else {
|
|
user.ibpPart = '';
|
|
deviceCode = user.deviceCode;
|
|
}
|
|
|
|
const params = [{
|
|
id: user.id,
|
|
nickName: user.nickName,
|
|
userRole: roleType,
|
|
deviceCode: deviceCode,
|
|
ibpPart: user.ibpPart
|
|
}];
|
|
if (this.drawWay === 'true') {
|
|
params[0].userRole = roleType.toUpperCase();
|
|
if (roleType === 'Attendant') {
|
|
params[0].userRole = 'STATION_SUPERVISOR';
|
|
} else if (roleType === 'Repair') {
|
|
params[0].userRole = 'MAINTAINER';
|
|
}
|
|
try {
|
|
await putUserRolesNew(params, this.group);
|
|
} catch (error) {
|
|
this.$message(error.message);
|
|
}
|
|
|
|
} else {
|
|
await putUserRoles(params, this.group);
|
|
}
|
|
|
|
this.stationList.forEach(item => {
|
|
item.disabled = false;
|
|
deviceList.forEach(nor => {
|
|
if (item.code === nor.deviceCode) {
|
|
item.disabled = true;
|
|
}
|
|
});
|
|
});
|
|
},
|
|
async handleDispatchUser({roleType, userList}) {
|
|
if (userList.length) {
|
|
try {
|
|
let list = [];
|
|
if (this.drawWay === 'true') {
|
|
if (roleType === 'Attendant') {
|
|
list = userList.map(elem => { return { id: elem.id, nickName: elem.nickName, userRole: 'STATION_SUPERVISOR' }; });
|
|
} else if (roleType === 'Repair') {
|
|
list = userList.map(elem => { return { id: elem.id, nickName: elem.nickName, userRole: 'MAINTAINER'}; });
|
|
} else {
|
|
list = userList.map(elem => { return { id: elem.id, nickName: elem.nickName, userRole: roleType.toUpperCase() }; });
|
|
}
|
|
try {
|
|
await putUserRolesNew(list, this.group);
|
|
} catch (error) {
|
|
this.$message(error.message);
|
|
}
|
|
|
|
} else {
|
|
list = userList.map(elem => { return { id: elem.id, nickName: elem.nickName, userRole: roleType }; });
|
|
await putUserRoles(list, this.group);
|
|
}
|
|
list.forEach(item => {
|
|
this.treeData.forEach(nor => {
|
|
if (item.id == nor.id) {
|
|
nor.userRole = item.userRole;
|
|
}
|
|
});
|
|
});
|
|
} catch (error) {
|
|
if (error.code == 500009) {
|
|
this.messageInfo({error:'error', message: this.$t('error.exceededTheTotalNumberOfAssignableRoles')} );
|
|
}
|
|
}
|
|
}
|
|
},
|
|
async handlePostQrcode() {
|
|
this.disabled = true;
|
|
let res = '';
|
|
if (this.drawWay === 'true') {
|
|
res = await getJoinTrainCodeNew({}, this.group);
|
|
} else {
|
|
res = await getJoinTrainCode({}, this.group);
|
|
}
|
|
if (res.code == '200') {
|
|
const param = {
|
|
url: res.data,
|
|
title: this.$t('trainRoom.distributeTheRoomQRCode'),
|
|
group: this.group
|
|
};
|
|
if (this.$refs) {
|
|
this.$refs.qrCode.doShow(param);
|
|
}
|
|
}
|
|
this.disabled = false;
|
|
},
|
|
async handleJoin() {
|
|
try {
|
|
this.disabled = true;
|
|
this.$emit('joinTraining');
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
},
|
|
async handleStart() {
|
|
this.disabled = true;
|
|
if (this.attendantList.findIndex(item => { return !item.deviceCode; }) < 0) {
|
|
try {
|
|
if (this.drawWay === 'true') {
|
|
await startJointTrainingNew(this.group);
|
|
} else {
|
|
await startJointTraining(this.group);
|
|
}
|
|
} catch (error) {
|
|
this.$emit('message', {type:'error', message: this.$t('error.startedComprehensiveDrillFailure')});
|
|
this.disabled = false;
|
|
}
|
|
} else {
|
|
this.$emit('message', {type:'error', message: this.$t('error.stationAttendantStationCannotBeEmpty')});
|
|
this.disabled = false;
|
|
}
|
|
},
|
|
async handleStop() {
|
|
try {
|
|
this.disabled = true;
|
|
let res = '';
|
|
if (this.drawWay === 'true') {
|
|
res = await putJointTrainingSimulationNew(this.group);
|
|
} else {
|
|
res = await putJointTrainingSimulation(this.group);
|
|
}
|
|
this.mapId = res.data.mapId;
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
this.disabled = false;
|
|
}
|
|
},
|
|
async handleExit() {
|
|
this.disabled = true;
|
|
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 {
|
|
if (this.drawWay === 'true') {
|
|
await deljointTrainRoomNew(this.group);
|
|
} else {
|
|
await deljointTrainRoom(this.group);
|
|
}
|
|
} catch (error) {
|
|
this.$emit('message', {type:'error', message: this.$t('error.destroyedRoomFailed')});
|
|
} finally {
|
|
this.disabled = false;
|
|
}
|
|
}).catch(() => {
|
|
this.disabled = false;
|
|
});
|
|
},
|
|
handleGetGroup() {
|
|
this.$messageBox(this.group, this.$t('trainRoom.groupId'), 'success');
|
|
},
|
|
async handleBack() {
|
|
try {
|
|
this.disabled = true;
|
|
if (this.drawWay === 'true') {
|
|
await putJointTrainingExitNew(this.group);
|
|
} else {
|
|
await putJointTrainingExit(this.group);
|
|
}
|
|
this.$emit('clearSubscribe');
|
|
this.$router.go(-1);
|
|
} catch (error) {
|
|
this.disabled = false;
|
|
this.$emit('message', {type:'error', message: this.$t('error.operationFailure')});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.roles {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
|
|
&__head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 30px;
|
|
border-top: 1px solid #ccc;
|
|
box-shadow: 0 3px 3px #ccc;
|
|
background: #F0F0F0;
|
|
|
|
&--title {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 10px 0px;
|
|
|
|
.label {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
border-left: 5px solid #CF2727;
|
|
padding: 0 5px
|
|
}
|
|
|
|
.notes {
|
|
font-size: 12px;
|
|
padding: 0 5px
|
|
}
|
|
}
|
|
|
|
&--reset {
|
|
.el-button {
|
|
background: #CF2727;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__container {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
padding: 5px 10px;
|
|
.roles {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-flow: row wrap;
|
|
flex-grow: 1;
|
|
|
|
.role {
|
|
display: flex;
|
|
flex-basis: 340px;
|
|
margin-top: 20px;
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
height: 60px;
|
|
display: flex;
|
|
padding: 0 30px;
|
|
align-items: center;
|
|
border-top: 1px solid #ccc;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
}
|
|
</style>
|