倒计时刷新

src/views/business/exposure/list/realTime/index.vue

@@ -2,17 +2,14 @@
   <!-- 实时敞口-->
   <mtp-table-scroll>
     <template #header>
-      <div class="real-time-header" v-if="isPingAnOem()">
-        <span class="dialogSpan">每隔</span>
-        <a-select class="typeSelect real-time-select" style="width: 100px" v-model:value="timer" @change="timerChange" placeholder="请选择间隔时间">
-          <a-select-option :value="item.id" v-for="item in diffTimes" :key="item.id">
-            {{ item.name }}
-          </a-select-option>
-        </a-select>
-        <span class="dialogSpan">刷新一次，倒计时 </span> <span class="red">{{ num }}</span>
-        <a-button type="button" class="operBtn ant-btn" @click="setTimerAction">{{ isStart ? '停止监控' : '开始监控' }}</a-button>
-      </div>
-      <filterCustomTable @search="updateColumn" @update="queryTableAction" v-else> </filterCustomTable>
+      <filterCustomTable @search="updateColumn" @update="queryTableAction">
+        <div class="real-time-header">
+          <span class="dialogSpan">每隔</span>
+          <a-input-number class="commonInput real-time-select" :min="10" :max="60" :disabled="isStart" v-model:value="second"></a-input-number>
+          <span class="dialogSpan">秒刷新一次，倒计时 </span> <span class="red">{{ counter }}</span>
+          <a-button type="button" class="operBtn ant-btn" @click="setTimerAction">{{ isStart ? '停止监控' : '开始监控' }}</a-button>
+        </div>
+      </filterCustomTable>
     </template>
     <template #default="{ scroll }">
       <a-table :columns="columns" class="srcollYTable" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList" :scroll="scroll">
@@ -75,19 +72,14 @@ export default defineComponent({
     filterCustomTable,
   },
   setup() {
-    const diffTimes = [
-      { id: 1, name: '3秒' },
-      { id: 2, name: '5秒' },
-      { id: 3, name: '10秒' },
-    ];
     const userId = ref(0);
-    const timer = ref(1);
-    const num = ref(3);
+    const timer = ref(0);
+    const second = ref(10); // 倒计时秒数
+    const counter = ref(0); // 倒计时计数器
     const isStart = ref(false);
-    // 表格列表数据
-    const { loading, tableList, queryTable } = queryTableList<ErmcpRealExposureModel>(true, 2);
-    // 控制明细显示/隐藏
-    const visible = ref(true);
+    const visible = ref(true); // 控制明细显示/隐藏
+    const { loading, tableList, queryTable } = queryTableList<ErmcpRealExposureModel>(true, 2); // 表格列表数据
+
     // 获取列表数据
     const queryTableAction = (userid = 0) => {
       userId.value = userid;
@@ -99,62 +91,43 @@ export default defineComponent({
         }
       })
     }
+
     const param: ComposeTableDetailParam = {
       queryFn: queryTableAction, // 查询表格数据
       // tableName: 'table_pcweb_exposure', // 表头key
       menuType: EnumRouterName.exposure_realtime, // 当前tab页对应的code
     };
+
     if (!isPingAnOem()) {
       param.tableName = 'table_pcweb_exposure';
     }
-    // 切换间隔时间
-    function timerChange() {
-      timerUtil.clearInterval('realTime');
-      timerUtil.clearInterval('countdown');
-      isStart.value = false;
-      num.value = +diffTimes.find((e) => e.id === timer.value)!.name.replace('秒', '');
-    }
-    function setTimer() {
-      timerUtil.clearInterval('realTime');
+
+    const setTimerAction = () => {
+      clearInterval(timer.value)
+      isStart.value = !isStart.value;
+      counter.value = 0;
+
       if (isStart.value) {
-        timerUtil.setInterval(
-          () => {
-            queryTableAction();
-          },
-          timer.value * 1000,
-          'realTime'
-        );
+        counter.value = second.value;
+        countdown();
       }
     }
-    watch(num, () => {
-      if (num.value === 0) {
-        timerUtil.clearInterval('countdown');
-        num.value = 0;
-      }
-    });
+
+    const countdown = () => {
+      timer.value = window.setInterval(() => {
+        if (counter.value) {
+          counter.value--;
+        } else {
+          counter.value = second.value;
+          queryTableAction();
+        }
+      }, 1000);
+    }
+
     onUnmounted(() => {
-      timerUtil.clearInterval('realTime');
-      timerUtil.clearInterval('countdown');
+      clearInterval(timer.value)
     });
-    const setTimerOut = () => {
-      timerUtil.setInterval(
-        () => {
-          num.value = num.value - 1;
-        },
-        1000,
-        'countdown'
-      );
-    };
-    function setTimerAction() {
-      isStart.value = !isStart.value;
-      if (isStart.value) {
-        setTimerOut();
-        setTimer();
-      } else {
-        timerUtil.clearInterval('realTime');
-        timerUtil.clearInterval('countdown');
-      }
-    }
+
     const {
       columns,
       updateColumn, //  表头数据
@@ -216,7 +189,7 @@ export default defineComponent({
     }
     watch(selectedRow, () => changeTab(tabIndex.value))
 
-    return { loading, tableList, visible, columns, queryTableAction, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType, diffTimes, timer, timerChange, isStart, setTimerAction, isPingAnOem, num };
+    return { loading, tableList, visible, columns, queryTableAction, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType, second, counter, isStart, setTimerAction, isPingAnOem };
   },
 });
 </script>
@@ -238,11 +211,14 @@ export default defineComponent({
     }
 }
 .real-time-header {
-    padding: 5px 0 5px 5px;
-    text-align: left;
+    margin-left: auto;
 }
 .real-time-select {
     margin-left: 5px;
     margin-right: 5px;
+
+    .ant-input-number-input {
+        text-align: center;
+    }
 }
 </style>