485 lines
17 KiB
Vue
485 lines
17 KiB
Vue
<template>
|
|
<el-drawer
|
|
title="仿真成员管理"
|
|
:visible.sync="show"
|
|
:direction="direction"
|
|
:before-close="doClose"
|
|
custom-class="drawer_box"
|
|
size="43%"
|
|
>
|
|
<div class="room">
|
|
<div class="room__container">
|
|
<div style="width: 70%;height: calc(100% - 20px);">
|
|
<div style="margin-left: 10px;margin-right: 10px;">
|
|
<el-input v-model="queryMember" placeholder="请输入搜索人员">
|
|
<el-button slot="append" icon="el-icon-search" />
|
|
</el-input>
|
|
<el-button @click="addMember">添加仿真成员</el-button>
|
|
</div>
|
|
<el-tree
|
|
ref="tree"
|
|
:data="treeData"
|
|
:props="defaultProps"
|
|
default-expand-all
|
|
style="margin: 10px;margin-bottom: 0;border: 1px solid #ccc;overflow-y: auto;height: calc(100% - 120px);"
|
|
:filter-node-method="filterNode"
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<span :id="data.id" slot-scope="{ data }" class="custom-tree-node">
|
|
<span>{{ data.labelName }}</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
|
|
v-for="item in simulationUserList"
|
|
:key="item.userId"
|
|
:label="item.nickName"
|
|
:value="item.userId"
|
|
/>
|
|
</el-select>
|
|
</span>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
<e-members
|
|
class="room__container--members"
|
|
:room="room"
|
|
:members="simulationUserList"
|
|
:is-admin="isAdmin"
|
|
style="height: 100%"
|
|
@message="messageInfo"
|
|
/>
|
|
</div>
|
|
<div class="room__footer" />
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import eMembers from './e-members';
|
|
import { EventBus } from '@/scripts/event-bus';
|
|
import { assignUsersPlayRoles } from '@/api/jointSimulation';
|
|
export default {
|
|
name: 'MembersManage',
|
|
components: {
|
|
eMembers
|
|
},
|
|
props: {
|
|
isAdmin: {
|
|
type: Boolean,
|
|
default() {
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
direction: 'ltr',
|
|
queryMember: '',
|
|
room: {
|
|
totalNum: 0,
|
|
group: '',
|
|
mapId: '',
|
|
creatorId: '',
|
|
creator: {
|
|
nickName: ''
|
|
},
|
|
permissionRest: 0,
|
|
permissionNum: 0,
|
|
state: ''
|
|
},
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'labelName'
|
|
},
|
|
simulationUserList: [],
|
|
stationList: [],
|
|
availableStationList:[],
|
|
activeTrains: [],
|
|
standList: [],
|
|
doorList: [],
|
|
memberData: {},
|
|
treeData: [{
|
|
labelName: '行调',
|
|
children: []
|
|
}, {
|
|
labelName: '车站值班员',
|
|
children: []
|
|
}, {
|
|
labelName: '司机',
|
|
children: []
|
|
}, {
|
|
labelName: '通号',
|
|
children: []
|
|
}, {
|
|
labelName: '车辆段',
|
|
children: []
|
|
}, {
|
|
labelName: 'CTC操作员',
|
|
children: []
|
|
}, {
|
|
labelName: '车站助理',
|
|
children: []
|
|
},
|
|
{
|
|
labelName: '车站站长',
|
|
children: []
|
|
},
|
|
{
|
|
labelName: '车站信号员',
|
|
children: []
|
|
},
|
|
{
|
|
labelName: '车站客运员',
|
|
children: []
|
|
},
|
|
{
|
|
labelName: '车站扳道员',
|
|
children: []
|
|
},
|
|
{
|
|
labelName: '车站引导员',
|
|
children: []
|
|
},
|
|
{
|
|
labelName: '车站工务工',
|
|
children: []
|
|
},
|
|
{
|
|
labelName: '设备管理员',
|
|
children: []
|
|
}
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
height() {
|
|
return this.$store.state.app.height - 130;
|
|
},
|
|
group() {
|
|
return this.$route.query.group;
|
|
},
|
|
userId() {
|
|
return this.$store.state.user ? this.$store.state.user.id : '';
|
|
},
|
|
username() {
|
|
return this.$store.state.user.nickname;
|
|
}
|
|
},
|
|
watch: {
|
|
queryMember(val) {
|
|
this.$refs.tree.filter(val);
|
|
},
|
|
'$store.state.training.simulationUserList': function(val) {
|
|
this.simulationUserList = val;
|
|
},
|
|
'$store.state.training.memberList': function (val) {
|
|
if (val && val.length) {
|
|
this.memberData = this.$store.state.training.memberData;
|
|
const dispatcherList = [];
|
|
const electricDispatcherList = [];
|
|
const depotDispatcherList = [];
|
|
const stationSupervisorList = [];
|
|
const driverList = [];
|
|
const maintainerList = [];
|
|
const ctcOperatorList = [];
|
|
const stationAssistantList = [];
|
|
const stationMasterList = [];
|
|
const stationSignalerList = [];
|
|
const stationPassengerList = [];
|
|
const stationSwitchManList = [];
|
|
const stationFacilitatorList = [];
|
|
const stationWorkerList = [];
|
|
const deviceManagerList = [];
|
|
const trainMasterList = [];
|
|
val.forEach(item => {
|
|
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
|
|
switch (item.type) {
|
|
case 'DISPATCHER':
|
|
this.memberData[item.id].labelName = '行调' + (item.name || '');
|
|
dispatcherList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'ELECTRIC_DISPATCHER':
|
|
this.memberData[item.id].labelName = '电力调度' + (item.name || '');
|
|
electricDispatcherList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'DEPOT_DISPATCHER':
|
|
this.memberData[item.id].labelName = '车辆段信号楼' + (item.name || '');
|
|
depotDispatcherList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'STATION_SUPERVISOR':
|
|
this.memberData[item.id].labelName = '值班员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
stationSupervisorList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'DRIVER':
|
|
this.memberData[item.id].labelName = '司机-列车' + item.deviceCode;
|
|
driverList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'MAINTAINER':
|
|
this.memberData[item.id].labelName = '通号' + (item.name || '');
|
|
maintainerList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'RAIL_CTC':
|
|
this.memberData[item.id].labelName = 'CTC操作员' + device.name;
|
|
ctcOperatorList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'STATION_ASSISTANT':
|
|
this.memberData[item.id].labelName = '车站助理-' + device.name + (item.name ? `-${item.name }` : '');
|
|
stationAssistantList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'STATION_MASTER':
|
|
this.memberData[item.id].labelName = '车站站长-' + device.name + (item.name ? `-${item.name }` : '');
|
|
stationMasterList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'STATION_SIGNALER':
|
|
this.memberData[item.id].labelName = '车站信号员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
stationSignalerList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'STATION_PASSENGER':
|
|
this.memberData[item.id].labelName = '车站客运员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
stationPassengerList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'STATION_SWITCH_MAN':
|
|
this.memberData[item.id].labelName = '车站扳道员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
stationSwitchManList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'STATION_FACILITATOR':
|
|
this.memberData[item.id].labelName = '车站引导员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
stationFacilitatorList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'STATION_WORKER':
|
|
this.memberData[item.id].labelName = '车站工务工-' + device.name + (item.name ? `-${item.name }` : '');
|
|
stationWorkerList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'DEVICE_MANAGER':
|
|
this.memberData[item.id].labelName = '设备管理员-' + device.name + (item.name ? `-${item.name }` : '');
|
|
deviceManagerList.push(this.memberData[item.id]);
|
|
break;
|
|
case 'TRAIN_MASTER':
|
|
// device.name;
|
|
this.memberData[item.id].labelName = '车务段段长-' + (item.name ? `-${item.name }` : '');
|
|
trainMasterList.push(this.memberData[item.id]);
|
|
break;
|
|
// DEVICE_MANAGER:'设备管理员' deviceManager
|
|
}
|
|
});
|
|
this.treeData = [{
|
|
labelName: '行调',
|
|
id: 'dispatcher',
|
|
children: dispatcherList
|
|
}, {
|
|
labelName: '车站值班员',
|
|
id: 'stationSupervisor',
|
|
children: stationSupervisorList
|
|
}, {
|
|
labelName: '司机',
|
|
id: 'driver',
|
|
children: driverList
|
|
}, {
|
|
labelName: '通号',
|
|
id: 'maintainer',
|
|
children: maintainerList
|
|
}, {
|
|
labelName: '车辆段信号楼',
|
|
id: 'depotDispatcher',
|
|
children: depotDispatcherList
|
|
}, {
|
|
labelName: '电力调度',
|
|
id: 'electricDispatcher',
|
|
children: electricDispatcherList
|
|
}, {
|
|
labelName: 'CTC操作员',
|
|
id: 'ctcOperator',
|
|
children: ctcOperatorList
|
|
}, {
|
|
labelName: '车站助理',
|
|
id: 'stationAssistant',
|
|
children: stationAssistantList
|
|
},
|
|
{
|
|
labelName: '车站站长',
|
|
id: 'stationMaster',
|
|
children: stationMasterList
|
|
},
|
|
{
|
|
labelName: '车站信号员',
|
|
id: 'stationSignaler',
|
|
children: stationSignalerList
|
|
},
|
|
{
|
|
labelName: '车站客运员',
|
|
id: 'stationPassenger',
|
|
children: stationPassengerList
|
|
},
|
|
{
|
|
labelName: '车站扳道员',
|
|
id: 'stationSwitchMan',
|
|
children: stationSwitchManList
|
|
},
|
|
{
|
|
labelName: '车站引导员',
|
|
id: 'stationFacilitator',
|
|
children: stationFacilitatorList
|
|
},
|
|
{
|
|
labelName: '车站工务工',
|
|
id: 'stationWorker',
|
|
children: stationWorkerList
|
|
},
|
|
{
|
|
labelName: '设备管理员',
|
|
id: 'deviceManager',
|
|
children: deviceManagerList
|
|
},
|
|
{
|
|
labelName: '车务段段长 ',
|
|
id: 'trainMaster',
|
|
children: trainMasterList
|
|
}
|
|
];
|
|
EventBus.$emit('trainTicketMember', [...stationSupervisorList, ...stationAssistantList]);
|
|
this.$nextTick(() => {
|
|
if (this.$refs.tree) {
|
|
this.$refs.tree.filter(this.queryMember);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
'$store.state.map.activeTrainListChange': function () {
|
|
this.activeTrains = [];
|
|
const activeTrainList = this.$store.state.map.activeTrainList;
|
|
if (activeTrainList && activeTrainList.length) {
|
|
activeTrainList.forEach(groupNumber => {
|
|
this.activeTrains.push(groupNumber);
|
|
});
|
|
}
|
|
this.$refs.tree && this.$refs.tree.filter(this.queryMember);
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
doShow() {
|
|
this.show = true;
|
|
this.memberData = this.$store.state.training.memberData;
|
|
this.simulationUserList = this.$store.state.training.simulationUserList;
|
|
this.$nextTick(() => {
|
|
if (this.$refs.tree) {
|
|
this.$refs.tree.filter(this.queryMember);
|
|
}
|
|
});
|
|
},
|
|
doClose() {
|
|
this.show = false;
|
|
},
|
|
messageInfo(info) {
|
|
this.$message({ showClose: true, ...info });
|
|
},
|
|
jumpInSimulation() {
|
|
},
|
|
clearSubscribe() {
|
|
},
|
|
handleNodeClick() {
|
|
},
|
|
nodeMemberChange(val, nodeData) {
|
|
let user = '';
|
|
this.simulationUserList.forEach(item => {
|
|
if (val && item.userId === val) {
|
|
user = item;
|
|
} else if (!val && item.memberId === nodeData.id) {
|
|
user = item;
|
|
}
|
|
});
|
|
const data = [{userId: user.userId, memberId:val ? nodeData.id : ''}];
|
|
const self = this;
|
|
assignUsersPlayRoles(data, this.$route.query.group).then(resp => {
|
|
this.$message.success('调整角色成员成功！');
|
|
}).catch(() => {
|
|
self.memberData[nodeData.id].userId = '';
|
|
this.$message.error('调整角色成员失败！');
|
|
});
|
|
},
|
|
addMember() {
|
|
this.$emit('addSimulationMember');
|
|
},
|
|
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;
|
|
}
|
|
let driverNoShow = true;
|
|
if (data.type && data.type === 'DRIVER' && !this.activeTrains.includes(data.deviceCode)) {
|
|
driverNoShow = false;
|
|
}
|
|
return (data.labelName.indexOf(value) !== -1 || flag) && driverNoShow;
|
|
}
|
|
// handlerMemberOnOff(data) {
|
|
// this.$store.dispatch('training/updateMemberAndUser', { simulationUserList: data, userId: this.userId });
|
|
// }
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.drawer_box{
|
|
width: 800px;
|
|
}
|
|
.custom-tree-node {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
padding-right: 8px;
|
|
margin: 2px;
|
|
}
|
|
.room {
|
|
width: 100%;
|
|
height: 100%;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
box-sizing: border-box;
|
|
background: #f0f0f0;
|
|
|
|
&__container {
|
|
height: 100%;
|
|
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;
|
|
}
|
|
}
|
|
/deep/ {
|
|
.el-input--mini .el-input__inner {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
}
|
|
.el-input-group {
|
|
width: calc(100% - 146px);
|
|
}
|
|
.el-dialog__body {
|
|
padding: 6px 20px;
|
|
}
|
|
.el-drawer__body{
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
</style>
|