Foshan4A4.0/src/App.vue

<!--
 * @Author: your name
 * @Date: 2021-10-14 17:17:53
 * @LastEditTime: 2022-01-06 12:03:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Foshan4A\src\App.vue
-->
<template>
  <div id="app">
    <!--全局休眠弹框-->
    <Dialog :flag="false" customClass="dormancyDialog" width="496px">
      <div class="dormancy">
        <div class="title">系统休眠，请输入密码解锁</div>
        <div class="content">
          <el-form ref="form" :rules="rules" :model="form">
            <el-form-item prop="pwd">
              <el-input show-password placeholder="请输入密码" v-model="form.pwd"></el-input>
            </el-form-item>
            <el-form-item>
              <button class="button-public-shadow onSubmit" @click="onSubmit('form')">
                确定
              </button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </Dialog>
    <!--路由出口-->
    <router-view />
  </div>
</template>

<script>
import Dialog from "@/layout/components/Dialog/index.vue";
import { mapGetters } from "vuex";
import { SsoLogin } from "@/api/apiHome";
export default {
  name: "App",
  components: {
    Dialog,
  },
  data () {
    return {
      arr: [], //鼠标移动screenX值数组
      arrLen: [], //一段时间后上报的screenX值数组
      timer: null, //定时器
      time: null, //定时器时间 1=1S
      desc: null, //固定的定时器时间/和time保持一致
      form: {
        //表单数据
        pwd: "",
      },
      rules: {
        //表单验证
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapGetters(["dialog", "token", "name", "systemSet"]),
  },
  watch: {
    "$store.state.user.token": {
      handler (val) {
        if (val) {
          this.handleInit();
        } else {
          this.clearAll();
        }
      },
      deep: true,
    },
    $route: {
      handler () {
        this.$store.dispatch("auth/changeAuthMsg", []);
        this.$store.dispatch("auth/changeAuthArrs", []);
        this.$store.dispatch("auth/changeAuthList", []);
        this.$store.dispatch("auth/changeAuthId", null);
      },
      deep: true,
    },
  },
  mounted () {
    this.beforeUnload();
  },
  beforeDestroy () {
    //结束定时器和释放timer
    this.clearAll();
  },
  methods: {
    // 初始化
    handleInit () {
      this.handleMove();
      if (!this.dialog) {
        this.handleTimer();
      }
    },
    /**
     * @description: 清除页面定时器和监听
     * @param {*}
     * @return {*}
     */
    clearAll () {
      clearInterval(this.timer);
      this.timer = null;
      this.time = null;
      this.desc = null;
      this.arr = [];
      this.arrLen = [];
      this.handleRmove();
      sessionStorage.setItem("token", "");
    },
    // 页面刷新 重新启用方法
    beforeUnload () {
      window.addEventListener("beforeunload", () => {
        if (this.token) {
          sessionStorage.setItem("token", this.token);
        }
      });
      let oldViews = sessionStorage.getItem("token") || "";
      if (oldViews) {
        this.handleInit();
      }
    },
    /**
     * @description: 定时器方法
     * @param {*}
     * @return {*}
     */
    handleTimer () {
      const obj =
        typeof this.systemSet === "string"
          ? JSON.parse(this.systemSet)
          : this.systemSet;
      const { LockMins } = obj;
      this.time = LockMins * 60;
      this.desc = LockMins * 60;
      this.timer = setInterval(() => {
        this.time--;
        if (this.time === 0) {
          const result = this.arrLen;
          const rut = this.arr;
          result.push(rut.length);
          if (result.length >= 2) {
            if (result[result.length - 2] === result[result.length - 1]) {
              // 相同时 结束倒计时
              this.$store.dispatch("app/toggleDialog", true);
              this.clearAll();
            } else {
              this.time = this.desc;
            }
          } else {
            this.time = this.desc;
          }
        }
      }, 1000);
    },
    /**
     * @description: 监听鼠标移动方法/防抖
     * @param {*}
     * @return {*}
     */
    handleMove () {
      window.addEventListener(
        "mousemove",
        _.debounce(this.handleDebounce, 100)
      );
    },
    /**
     * @description: 移除鼠标移动监听
     * @param {*}
     * @return {*}
     */
    handleRmove () {
      window.removeEventListener("mousemove", () => {
        this.arr = [];
      });
    },
    /**
     * @description: 防抖方法
     * @param {*} e
     * @return {*}
     */
    handleDebounce (e) {
      const screenX = e.screenX;
      this.arr.push(screenX);
    },
    /**
     * @description: 提交
     * @param {*}
     * @return {*}
     */
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ssoLogin();
        } else {
          return false;
        }
      });
    },
    //锁屏验证
    async ssoLogin () {
      const res = await SsoLogin({
        LoginName: this.name,
        LoginPwd: this.form.pwd,
      });
      if (res.code === 0) {
        this.$store.dispatch("app/toggleDialog", false);
        this.arr = [];
        this.arrLen = [];
        this.time = this.desc;
        this.form.pwd = "";
        this.handleTimer();
      } else {
        this.$message.error(res.message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .dormancyDialog {
  .el-input__inner {
    height: 48px;
    line-height: 48px;
    background: #f5f7fa;
    border: 1px solid #ebeef5;
    border-radius: 6px;
  }
  .onSubmit {
    margin-top: 10px;
  }
}
</style>