rt-sim-training-client/src/views/trainRoom/index.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 }}
      </div>
    </div>
    <div class="room__container">
      <e-members class="room__container--members" :user-id="userId" :room="room" :members="members" :height="height" />
      <e-roles class="room__container--roles" :user-id="userId" :room="room" :members="members" :height="height" />
      <e-chat class="room__container--chat" :user-id="userId" :room="room" :members="members" :height="height" />
    </div>
    <div class="room__footer" />
  </div>
</template>

<script>
import eMembers from './e-members';
import eChat from './e-chat';
import eRoles from './e-roles';
import { postRoomDetail } from '@/api/chat';
import { getStationList } from '@/api/runplan';

export default {
    components: {
        eMembers,
        eChat,
        eRoles
    },
    data() {
        return {
            room: {
                totalNum: 12,
                group: '',
                mapId: '',
                creatorId: 1,
                creator: 'Ival',
                permissionRest: 1,
                permissionNum: 20
            },
            members: [
                {
                    nickName: 'Ival',
                    inRoom: true,
                    role: 'Instructor'
                },
                {
                    nickName: 'Dispatcher',
                    inRoom: true,
                    role: 'Dispatcher'
                },
                {
                    nickName: 'Instructor',
                    inRoom: true,
                    role: 'Instructor'
                },
                {
                    nickName: 'Attendant',
                    inRoom: true,
                    role: 'Attendant'
                },
                {
                    nickName: 'Repair',
                    inRoom: true,
                    role: 'Repair'
                },
                {
                    nickName: 'Driver',
                    inRoom: true,
                    role: 'Driver'
                },
                {
                    nickName: 'IBP',
                    inRoom: true,
                    role: 'IBP'
                },
                {
                    nickName: 'Audience1',
                    inRoom: true,
                    role: 'Audience'
                },
                {
                    nickName: 'Audience2',
                    inRoom: true,
                    role: 'Audience'
                },
                {
                    nickName: 'Audience3',
                    inRoom: true,
                    role: 'Audience'
                }
            ],
            stationList: []
        };
    },
    computed: {
        height() {
            return this.$store.state.app.height - 100;
        },
        userId() {
            if (this.$store.state.user) {
                return this.$store.state.user.id;
            }
            return '';
        }
    },
    async mounted() {
        await this.handleGetRoomInfo();
    },
    methods: {
        async handleGetRoomInfo() {
            // 获取房间信息 创建人和权限总数
            const res = await postRoomDetail(this.$route.query.group);
            this.starting = res.data.state == '02';

            this.room = {
                mapId: res.data.mapId,
                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,
                permissionRest: 10
            };

            // 获取设备集中站
            const resp = await getStationList(res.data.mapId);
            this.stationList = resp.data;
        }
    }
};
</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>