MTP2.0_WEB/src/App.vue

<template>
  <div class="app-container dark-theme " @contextmenu.prevent>
    <!-- 中文配置 -->
    <a-config-provider :locale="zhCN">
      <a-spin :tip="tip" :spinning="spinning" size="large">
        <router-view />
      </a-spin>
    </a-config-provider>
  </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';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { initTheme } from '@/common/config/theme';
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() {
    initTheme();
    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('marketStatusChangeNtf', ({ Status }: { Status: number }) => {
      if (Status === 1) {
        logoutAction();
        Modal.info({
          title: '系统提示:',
          content: '系统结算，请重新登录',
          okType: 'primary',
          okText: '确定'
        })
      }
    })

    // 登录成功
    // 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(() => {
      Modal.info({
        title: '系统提示:',
        content: '请重新登录',
        okType: 'primary',
        okText: '确定',
        keyboard: false,
        onOk() {
          Router.replace('/login');
        },
      });
    });

    return {
      tip,
      spinning,
      zhCN,
    };
  },
});
</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: @m-black24;
    background-color: @m-white5;
    display: flex;
    justify-content: center;
    overflow-y: hidden;
    img {
        cursor: pointer;
    }
}

#nav {
    padding: 30px;
    a {
        font-weight: bold;
        color: @m-black24;
        &.router-link-exact-active {
            color: @m-green5;
        }
    }
}
</style>