pref:添加返回倒计时显示

sample-form-client-ui/admin/src/components/Header.vue

 <template>
   <div class="header flex aic jcc main-title-bg-img">
+    <div class="count-down">
+      系统将在 <span>{{ times }}</span> 秒后返回首页
+    </div>
     <slot name="title" class="title">
       <div></div>
     </slot>
@@ -13,10 +16,14 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapGetters(["times"]),
+  },
   created() {},
   methods: {
     handleBack() {
@@ -37,6 +44,16 @@ export default {
   background-size: 100% 100%;
   // background: var(--main-theme-color);
   box-shadow: 0px 2px 6px 6px #ccc;
+  .count-down {
+    position: absolute;
+    left: 40px;
+    // color: var(--main-h1-color);
+    color: #fff;
+    font-size: 24px;
+    // span {
+    //   color: var(--main-theme-color);
+    // }
+  }
   .right-box {
     position: absolute;
     right: 40px;

sample-form-client-ui/admin/src/pages/layouts/Layouts.vue

@@ -5,21 +5,29 @@
 </template>
 
 <script>
+import { mapMutations, mapGetters } from "vuex";
 export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapGetters(["times", "defaultTimes"]),
+  },
   created() {
     this.isTimeOut();
   },
   methods: {
+    ...mapMutations(["SET_times"]),
     // 返回首页
     startTimer() {
-      let that = this;
-      clearInterval(that.timeOut);
-      this.timeOut = setTimeout(function () {
-        that.$router.push({ path: "/" });
-      }, 1000 * 60 * 5);
+      clearInterval(this.timeOut);
+      this.SET_times(this.defaultTimes);
+      this.timeOut = setInterval(() => {
+        if (this.times == 0) {
+          this.$router.push({ path: "/" });
+        }
+        this.SET_times(this.times - 1);
+      }, 1000);
     },
     // 无任何操作返回首页
     isTimeOut() {
@@ -40,7 +48,7 @@ export default {
     document.body.removeEventListener("keyup", this.startTimer);
     document.body.removeEventListener("click", this.startTimer);
     document.body.removeEventListener("touchend", this.startTimer);
-    clearTimeout(this.timeOut);
+    clearInterval(this.timeOut);
   },
 };
 </script>

sample-form-client-ui/admin/src/store/index.js

@@ -12,11 +12,19 @@ export default new Vuex.Store({
     datumList: [], // 首页材料
     matterList: [], // 首页事项
     deviceCode: "", // 设备编码
+    times: 300, // 倒计时时间
+    defaultTimes: 300, // 倒计时时间
   },
   getters: {
     deviceCode(state) {
       return state.deviceCode;
     },
+    times(state) {
+      return state.times;
+    },
+    defaultTimes(state) {
+      return state.defaultTimes;
+    },
   },
   mutations: {
     SET_devicenum(state, devicenum) {
@@ -34,6 +42,9 @@ export default new Vuex.Store({
     SET_deviceCode(state, deviceCode) {
       state.deviceCode = deviceCode;
     },
+    SET_times(state, times) {
+      state.times = times;
+    },
   },
   actions: {},
   modules: {},