MTP2.0_WEB/src/App.vue

<template>
  <div class="app-container"
       @contextmenu.prevent>
    <a-spin :tip="tip"
            :spinning="spinning"
            size="large">
      <router-view />
    </a-spin>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect, provide } from 'vue';
import { globalDataRefresh } from '@/services/bus/index';
import { notice } from '@/services/bus/system';
import eventBus from '@/utils/eventBus/index';
import TimerUtils from '@/utils/timer/timerUtil';
import Router from '@/router';
import APP from '@/services';
import { Modal } from 'ant-design-vue';
import { setLoadComplete } from '@/common/methods';
import { isLogin, logout } from '@/services/bus/login';
let lastTime = new Date().getTime();

function logoutAction() {
    logout();
    APP.closeServer();
    Router.replace('/login');
}

// 设置太久没有操作界面，自动退出界面功能
function setOvertime() {
    window.addEventListener('mousemove', () => {
        lastTime = new Date().getTime(); //更新当前时间
    });
    const mimut = 30;
    const timeOut = mimut * 60 * 1000; //设置超时时间: 5分钟
    TimerUtils.setInterval(
        () => {
            const currentTime = new Date().getTime();
            if (currentTime - lastTime > timeOut) {
                //判断是否超时
                if (isLogin()) {
                    Modal.info({
                        title: '系统提示:',
                        content: `您已超过${mimut}分钟没有进行任何操作，已自动退出登录！`,
                        okType: 'primary',
                        okText: '确定',
                        keyboard: false,
                    });
                    logoutAction();
                }
            }
        },
        timeOut,
        'overtimeInterval'
    );
}

export default defineComponent({
    name: 'app',
    components: {},
    setup() {
        let spinning = ref<boolean>(false);
        const tip = ref<string>('');

        // 登出状态展示
        eventBus.$onOnly('logout', () => {
            tip.value = '跳转中...';
            spinning.value = true;
            TimerUtils.setTimeout(
                () => {
                    spinning.value = false;
                    logoutAction();
                },
                1000,
                'logoutTimer'
            );
        });
        // 登录成功
        // eventBus.$onOnly('loginSuccess', setOvertime);
        // 监听路由的变化
        watchEffect(() => Router.currentRoute && provide('current-route', Router.currentRoute));

        // 监听刷新事件
        window.addEventListener(
            'load',
            () => {
                tip.value = '数据初始化...';
                lastTime = new Date().getTime(); //更新当前时间
                spinning.value = true;
                // 注册全局loadComplete事件 保证loadComplete变量及时更新
                setLoadComplete(false);
                globalDataRefresh()
                    .then((res) => {
                        setLoadComplete(true);
                        eventBus.$emit('loadComplete');
                        spinning.value = false;
                    })
                    .catch((err) => {
                        console.error(err);
                        spinning.value = false;
                    });
            },
            true
        );

        // setOvertime();
        // 订阅交易通知
        notice((msg: string) => {
            Modal.info({
                title: '系统提示:',
                content: `${msg},请重新登录。`,
                okType: 'primary',
                okText: '确定',
                keyboard: false,
                onOk() {
                    Router.replace('/login');
                },
            });
        });

        return {
            tip,
            spinning,
        };
    },
});
</script>

<style lang="less">
.app-container {
    width: 100%;
    height: auto;
    min-height: 100%;
}
#app {
    width: 100%;
    height: auto;
    min-height: 100%;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    background-color: #fffefe;
    display: flex;
    justify-content: center;
    overflow-y: hidden;
    img {
        cursor: pointer;
    }
}

#nav {
    padding: 30px;
    a {
        font-weight: bold;
        color: #2c3e50;
        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>