rt-sim-training-client/src/views/trainRoom/e-roles.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" :user-id="userId" :room="room" :options="dispatcherList" title-i18n="trainRoom.dispatcher" role-type="Dispatcher" @addUser="handleAddUser" />
          <e-role class="role" :user-id="userId" :room="room" :options="attendantList" title-i18n="trainRoom.stationAttendant" role-type="Attendant" @addUser="handleAddUser" />
          <e-role class="role" :user-id="userId" :room="room" :options="instructorList" title-i18n="trainRoom.teacher" role-type="Instructor" @addUser="handleAddUser" />
          <e-role class="role" :user-id="userId" :room="room" :options="repairList" title-i18n="trainRoom.universalAccount" role-type="Repair" @addUser="handleAddUser" />
          <e-role class="role" :user-id="userId" :room="room" :options="driverList" title-i18n="trainRoom.driver" role-type="Driver" @addUser="handleAddUser" />
          <e-role class="role" :user-id="userId" :room="room" :options="ibpList" title-i18n="trainRoom.ibp" role-type="IBP" @addUser="handleAddUser" />
          <e-device class="role" :user-id="userId" :room="room" :options="realDeviceList" title-i18n="trainRoom.realDevice" :has-plc="hasPlc" @addDevice="handleDeviceUser" />
        </div>
      </el-scrollbar>
    </div>
    <div class="roles__footer">
      <el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="danger" :loading="loading" @click="handleExit">{{ $t('trainRoom.destroyRoom') }}</el-button>
      <el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="success" :loading="loading" @click="handlePostQrcode">{{ $t('trainRoom.generatingQRCode') }}</el-button>
      <template v-if="!starting">
        <el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="primary" :loading="loading" @click="handleStart"> {{ $t('trainRoom.startSimulation') }}</el-button>
      </template>
      <template v-else>
        <el-button type="primary" style="margin-left: 10px" :loading="loading" @click="handleJoinTraining"> {{ $t('trainRoom.enterSimulation') }}</el-button>
        <el-button v-if="userId == room.creatorId" style="margin-left: 10px" type="warning" :loading="loading" @click="handleStop"> {{ $t('trainRoom.endSimulation') }}</el-button>
      </template>
      <el-button type="" @click="handleBack">{{ $t('global.back') }}</el-button>
    </div>
    <add-person ref="addPerson" :audience-list="audienceList" @dispatch="handleDispatch" />
  </div>
</template>

<script>
import eRole from './e-role';
import eDevice from './e-device';
import AddPerson from './add-person';

export default {
    components : {
        eRole,
        eDevice,
        AddPerson
    },
    props: {
        userId: {
            type: String,
            default: ''
        },
        room: {
            type: Object,
            required: true
        },
        members: {
            type: Array,
            required: true
        },
        height: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            loading: false,
            starting: false,
            hasPlc: false
            // dispatcherList: [],
            // attendantList: [],
            // instructorList: [],
            // repairList: [],
            // driverList: [],
            // ibpList: [],
            // audienceList: [],
            // realDeviceList: []
        };
    },
    computed: {
        rolesHeight() {
            return this.height - 100;
        },
        dispatcherList() {
            return this.members.filter(elem => { return elem.role.includes('Dispatcher'); });
        },
        attendantList() {
            return this.members.filter(elem => { return elem.role.includes('Attendant'); });
        },
        instructorList() {
            return this.members.filter(elem => { return elem.role.includes('Instructor'); });
        },
        repairList() {
            return this.members.filter(elem => { return elem.role.includes('Repair'); });
        },
        driverList() {
            return this.members.filter(elem => { return elem.role.includes('Drive'); });
        },
        ibpList() {
            return this.members.filter(elem => { return elem.role.includes('IBP'); });
        },
        audienceList() {
            return this.members.filter(elem => { return elem.role.includes('Audience'); });
        },
        realDeviceList() {
            return [];
        }
    },
    mounted() {
    },
    methods: {
        async handlePostQrcode() {

        },
        async handleJoinTraining() {

        },
        async handleDeviceUser(params) {

        },
        async handleAddUser(roleType) {
            this.$refs.addPerson.doShow(roleType);
        },
        async handleDispatch() {

        },
        async handleStart() {

        },
        async handleStop() {

        },
        async handleExit() {

        },
        async handleBack() {
            try {
                this.loading = true;
                // 调用仿真退出接口
                this.loading = false;
                if (this.$route.query.subSystem) {
                    this.$router.push({ path: `/trainingPlatform/detail/${this.$route.query.subSystem}`, query: {mapId: this.room.mapId}});
                } else {
                    this.$router.go(-1);
                }
            } catch (error) {
                this.messageInfo( this.$t('error.operationFailure'), 'error');
            }
        }
    }
};
</script>

<style scoped lang="scss">
	.roles {
		display: flex;
		flex-direction: column;
		background: #fff;

		&__head {
			height: 60px;
			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;

				.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: space-around;
				flex-flow: row wrap;
				flex-grow: 1;

				.role {
					display: flex;
					flex-basis: 340px;
					margin-top: 20px;
				}
			}
		}

		&__footer {
			height: 60px;
			display: flex;
			padding: 0 30px;
			align-items: center;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}
	}
</style>