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

<template>
  <div id="app">
    <router-view />
    <deomon-topic ref="deomonTopic" />
    <deomon-list ref="deomonList" @enterQcode="qcodeEntry" />
    <qcode ref="qcode" />
    <img v-show="loading" :src="loadingImg" class="AppAll">
    <div
      v-if="!$store.state.user.baseUrl"
      v-loading="!$store.state.user.baseUrl"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(0, 0, 0, 0)"
      element-loading-spinner="el-icon-loading"
      style="width: 100%;height: 100%;"
    >
      <img :src="appLoading" class="centerImg">
    </div>
  </div>
</template>

<script>
import { getToken, getUserIdKey } 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 AppLoading from '@/assets/appLoading.png';
import { openIndexedDB } from '@/utils/indexedDb';
import DeomonList from '@/views/demonstration/deomonList/index';
import Qcode from '@/layout/components/Qcode.vue';

export default {
    name: 'App',
    components: {
        DeomonTopic,
        DeomonList,
        Qcode
    },
    mixins: [
        WindowResizeHandler
    ],
    data() {
        return {
            loadingImg: LoadingImg,
            appLoading: AppLoading,
            loading: false
        };
    },
    watch: {
        '$store.state.socket.simulationInvite': function (val) {
            if (val.creator) {
                this.subscribeMessage(val);
            }
        },
        '$store.state.socket.beLogoutCount': async function(val) {
            if (this.$store.state.socket.loggedOutMsg.token === getToken()) {
                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;
        },
        '$route': function(val) {
            if (val.path == '/simulation/multiplayerSimulation') {
                this.quickEntry();
            }
        }
    },
    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');
            }
        });
        window.addEventListener('storage', e => {
            if (this.$route.path.includes('trainingDesign') || this.$route.path.includes('trainingPreview')) {
                if (e.key == getUserIdKey('nextNew')) {
                    const operate = JSON.parse(e.newValue);
                    this.$store.dispatch('training/nextNew', operate);
                }
            }

        });
        this.$nextTick(() => {
            openIndexedDB();
        });
    },
    beforeDestroy() {
        this.$store.dispatch('subscribe_un', {});
    },
    methods: {
        quickEntry() {
            this.$refs.deomonList.doShow();
        },
        qcodeEntry() {
            this.$refs.qcode.doShow();
        },
        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');
            }
        }
    }
};

</script>
<style lang="scss" scoped>
.AppAll{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2003}
	.centerImg {
		position: absolute;
		left:50%;
		top: 50%;
		width: 480px;
		height: 456px;
		margin-left: -240px;
		margin-top: -228px;
	}
</style>