rt-sim-training-client/src/views/demonstration/deomonTopic/index.vue

<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="show"
    width="600px"
    :before-close="doClose"
    :z-index="2000"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div style="height: 80px; line-height: 80px; font-size: 16px; padding-left: 10px;">{{ roomName }}{{ $t('global.inviteJoinRoom') }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button v-loading="loading" type="primary" @click="handleJoin">{{ $t('global.confirm') }}</el-button>
      <el-button @click="dialogShow = false">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { launchFullscreen } from '@/utils/screen';
import { getPublishMapInfo } from '@/api/jmap/map';
import { getToken } from '@/utils/auth';
import { creatSubscribe, clearSubscribe, roomTopic} from '@/utils/stomp';
// 仿真邀请消息
export default {
    name: 'DeomonList',
    data() {
        return {
            dialogShow: false,
            group: '',
            roomName: '',
            state: '',
            mapId: '',
            lineCode: '',
            loading: false
        };
    },
    computed: {
        show() {
            return this.dialogShow;
        },
        title() {
            return this.$t('global.synthesisTrainingTitle');
        }
    },
    mounted() {
    },
    methods: {
        doShow(data) {
            this.roomName = data.creator.nickname;
            this.group = data.group;
            this.mapId = data.mapId || data.map.id;
            this.lineCode = (data.map || {}).lineCode;
            this.state = data.state;
            this.dialogShow = true;
            this.loading = false;
        },
        doClose() {
            this.dialogShow = false;
        },
        async subscribe() {
            if (!this.$store.state.socket.roomIsSubscribe) {
                this.clearSubscribe();
                const header = { group: this.group || '', 'X-Token': getToken() };
                creatSubscribe(`${roomTopic}\/${this.group}`, header);
                await this.$store.dispatch('socket/setRoomSubscribe', true);
            }
        },
        async clearSubscribe() {
            clearSubscribe(`${roomTopic}\/${this.group}`);
            await this.$store.dispatch('socket/setRoomSubscribe', false);
        },
        async handleJoin() {
            try {
                this.loading = true;
                await getPublishMapInfo(this.mapId);
                launchFullscreen();
                const query = { lineCode: this.lineCode, mapId: this.mapId, group: this.group};
                this.$router.push({path: `/jointTrainingNew`, query: query});
                this.dialogShow = false;
            } catch (e) {
                this.$messageBox(this.$t('tip.enterTrainingRoomFailed'));
                console.error(e);
            } finally {
                this.loading = false;
                this.dialogShow = false;
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ {
        .el-dialog__body {
            padding: 0px 30px !important;
        }

        .el-tree-node.is-current>.el-tree-node__content {
            background-color: #e4e3e3 !important;
        }
    }
</style>