132 lines
4.1 KiB
Vue
132 lines
4.1 KiB
Vue
<template>
|
|
<div id="app">
|
|
<router-view />
|
|
<deomon-topic ref="deomonTopic" />
|
|
<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 } 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';
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
DeomonTopic
|
|
},
|
|
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.roomInvite': 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;
|
|
}
|
|
},
|
|
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(() => {
|
|
openIndexedDB();
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
this.$store.dispatch('subscribe_un', {});
|
|
},
|
|
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');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
</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>
|