GCLS_Page_TC/src/App.vue

<template>
  <div id="app" :dir="dir">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
    <div class="userAgentTips" v-if="userAgentTipShow">
      <img src="./assets/userAgentWarning.png" width="32px" />
      <span
        >当前浏览器可能与网站不兼容！建议使用 chrome 浏览器获得最佳使用体验。
      </span>
      <img
        src="./assets/userAgentClose.png"
        width="16px"
        @click="handleClickUserAgent"
      />
    </div>
  </div>
</template>
<script>
import { removeSession } from "@/utils/role";
import { removeToken } from "@/utils/auth";
import Cookies from "js-cookie";
import { getConfig } from "@/utils/auth";
export default {
  name: "App",
  data() {
    return {
      dir: "ltr",
      userAgentTipShow: false,
      timeOut: null
    };
  },
  created() {
    let lang_type = localStorage.getItem("language_type");
    if (lang_type == "AR") {
      this.dir = "rtl";
    }
    if (
      localStorage.getItem("useragent_root_type") &&
      localStorage.getItem("useragent_root_type") !== "true" &&
      !localStorage.getItem("useragent_root_close")
    ) {
      this.userAgentTipShow = true;
    } else {
      this.handleUserAgentRoot();
    }
    window.addEventListener(
        'click',()=>{
            sessionStorage.setItem('lastClickTime',new Date().getTime())
        }
    )
    window.addEventListener(
        'mousewheel',()=>{
            sessionStorage.setItem('lastClickTime',new Date().getTime())
        }
    )
    window.addEventListener(
        'mousemove',()=>{
            sessionStorage.setItem('lastClickTime',new Date().getTime())
        }
    )
  },
  methods: {
    // 判断是否为chrome浏览器
    handleUserAgentRoot() {
      if (
        !sessionStorage.getItem("useragent_root_close") &&
        navigator.userAgent.indexOf("Chrome") == -1
      ) {
        this.userAgentTipShow = true;
      }
    },
    handleClickUserAgent() {
      sessionStorage.setItem("useragent_root_close", true);
      this.userAgentTipShow = false;
    },
    // 是否超时
    isTimeOut(){
        clearInterval(this.timeOut)
        let dataConfig = JSON.parse(getConfig());
        if(dataConfig.user_connection_timeout_duration){
            this.timeOut = setInterval(()=>{
                let lastClickTime = sessionStorage.getItem('lastClickTime')*1
                let nowTime = new Date().getTime()
                if(nowTime - lastClickTime > 1000 * dataConfig.user_connection_timeout_duration){
                    clearInterval(this.timeOut)
                    removeSession("SysList");
                    removeToken();
                    Cookies.remove("JSESSIONID");
                    this.userShow = false;
                    this.userMessage = null;
                    sessionStorage.removeItem("useragent_root_close");
                    window.location.href = dataConfig.sys_home_url
                }
            })
        }
      }
  },
  mounted(){
    sessionStorage.setItem('lastClickTime',new Date().getTime())
    this.isTimeOut()
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  min-width: 1200px;
}
</style>
<style lang="scss" scoped>
.userAgentTips {
  position: fixed;
  top: 62px;
  left: 50%;
  // width: 624px;
  margin-left: -312px;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 16px 12px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  line-height: 24px;
  :nth-child(1) {
    margin-right: 8px;
  }
  :nth-child(3) {
    cursor: pointer;
  }
}
</style>