rt-sim-training-client/src/App.vue

<template>
  <div id="app">
    <router-view />
    <deomon-topic ref="deomonTopic" />
    <img v-show="loading" :src="loadingImg" class="AppAll">
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { getSessionStorage } from '@/utils/auth';
import { loginInfo, ProjectIcon } from '@/scripts/ProjectConfig';
import DeomonTopic from '@/views/demonstration/deomonTopic';
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
import LoadingImg from '@/assets/loading.gif';
import { openIndexedDB } from '@/utils/indexedDb';

export default {
    name: 'App',
    components: {
        DeomonTopic
    },
    mixins: [
        WindowResizeHandler
    ],
    data() {
        return {
            loadingImg: LoadingImg,
            loading: false
        };
    },
    watch: {
        '$store.state.socket.simulationInvite': function (val) {
            if (val.creator) {
                this.subscribeMessage(val);
            }
        },
        '$store.state.socket.roomInvite': function (val) {
            if (val.creator) {
                this.subscribeMessage(val);
            }
        },
        '$store.state.socket.beLogoutCount': async function(val) {
            this.$store.dispatch('disconnect').then(()=>{
                this.$alert(this.$t('tip.logoutTips'), this.$t('tip.hint'), {
                    confirmButtonText: this.$t('tip.confirm'),
                    callback: action => {
                        this.$store.dispatch('exit').then(resp => {
                            this.$router.push({path: loginInfo[getSessionStorage('project')].loginPath});
                        });
                    }
                });
            });
        },
        '$store.state.app.transitionAnimationsCount': function(val) {
            this.loading = true;
        },
        '$store.state.app.animationsCloseCount': function(val) {
            this.loading = false;
        }
    },
    created() {
        const project = getSessionStorage('project');
        if (project) {
            document.querySelector("link[rel*='icon']").href = loginInfo[project].linkIcon || ProjectIcon[project];
        }
    },
    mounted() {
        this.prohibitSystemContextMenu();

        window.addEventListener('beforeunload', async e => {
            if (!this.$route.query.noPreLogout) {
                await this.$store.dispatch('preLogout');
            }
        });
        this.$nextTick(() => {
            this.subscribe();
            openIndexedDB();
        });
    },
    methods: {
        resizeHandler() {
            this.$store.dispatch('app/resize', { width: this._clientWidth, height: this._clientHeight });
        },
        prohibitSystemContextMenu() {
            window.document.oncontextmenu = function () {
                return false;
            };
        },
        subscribeMessage(res) {
            if (this.$refs.deomonTopic && !window.location.href.includes('trainroom')) {
                if (!(getSessionStorage('project').includes('design'))) {
                    this.$refs.deomonTopic.doShow(res);
                }
                this.$store.dispatch('socket/setSimulationInvite');
                this.$store.dispatch('socket/setRoomInvite');
            }
        },
        subscribe() {
            const token = getToken();
            const path = window.location.pathname;
            if (token && this.$route.path != '/404' && !path.endsWith('login')) {
                const header = { group: '', 'X-Token': token };
                this.$store.dispatch('subscribe', {header, type: getSessionStorage('project')});
            }
        }
    }
};

</script>
<style lang="scss" scoped>
.AppAll{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2003}
</style>