#348

src/utils/timer/timerUtil.ts

@@ -9,6 +9,7 @@ export interface IntervalTimerNames {
     spotTrade: string; // 仓单报价列表
     buyAndSellMartet: string; // 买卖大厅
     realTime: string; // 实时敞口监控
+    countdown: string; // 倒计时
 }
 export interface TimeoutTimerNames {
     logoutTimer: string; //登出1s延时器

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

@@ -17,7 +17,7 @@
           {{item.name}}
         </a-select-option>
       </a-select>
-      <span class="dialogSpan">刷新一次，倒计时 </span> <span class="red">3</span>
+      <span class="dialogSpan">刷新一次，倒计时 </span> <span class="red">{{num}}</span>
       <a-button type="button"
                 class="operBtn ant-btn"
                 @click="setTimerAction">{{isStart ? '停止监控' : '开始监控'}}</a-button>
@@ -37,45 +37,6 @@
                 #index="{ index }">
         <span>{{ index + 1 }}</span>
       </template>
-      <!-- <template #DiffSpotQty="{ record }">
-        <span>{{ record.DiffSpotQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template> -->
-      <!-- <template #DiffHedgeQty="{ record }">
-        <span>{{ record.DiffHedgeQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #TotalFutureQty="{ record }">
-        <span>{{ record.TotalFutureQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #DiffFutuQty="{ record }">
-        <span>{{ record.DiffFutuQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #DiffExposoureQty="{ record }">
-        <span>{{ record.DiffExposoureQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #DiffQty="{ record }">
-        <span>{{ record.DiffQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #hedgeqty="{ record }">
-        <span>{{ record.hedgeqty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #arbitrageqty="{ record }">
-        <span>{{ record.arbitrageqty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #DiffArbitrageQty="{ record }">
-        <span>{{ record.DiffArbitrageQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #needarbitrageqty="{ record }">
-        <span>{{ record.needarbitrageqty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #TotalNeedHedgeQty="{ record }">
-        <span>{{ record.TotalNeedHedgeQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #DiffSpotHedgeQty="{ record }">
-        <span>{{ record.diffSpotHedgeQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template>
-      <template #OriTotalSpotQty="{ record }">
-        <span>{{ record.oriTotalSpotQty.toFixed(2) + " " + record.ENUMDICNAME }}</span>
-      </template> -->
     </a-table>
     <!-- 明细 -->
     <Description v-if="visible"
@@ -107,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watchEffect } from 'vue';
+import { defineComponent, onUnmounted, ref, watchEffect } from 'vue';
 import filterCustomTable from '../../components/filterTable/index.vue';
 import { QueryActualExposure, QueryActualExposureDetail, QueryAutualExposurePosition } from '@/services/go/ermcp/exposure/index';
 import { ErmcpRealExposureModel } from '@/services/go/ermcp/exposure/interface';
@@ -139,6 +100,7 @@ export default defineComponent({
             { id: 3, name: '10秒' },
         ];
         const timer = ref<number>(1);
+        const num = ref<number>(3);
         const isStart = ref<boolean>(false);
         // 表格列表数据
         const { loading, tableList, queryTable } = queryTableList<ErmcpRealExposureModel>(true, 2);
@@ -155,7 +117,10 @@ export default defineComponent({
         }
         // 切换间隔时间
         function timerChange() {
-            setTimer();
+            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');
@@ -169,9 +134,34 @@ export default defineComponent({
                 );
             }
         }
+        watchEffect(() => {
+            if (num.value === 0) {
+                timerUtil.clearInterval('countdown');
+                num.value = 0;
+            }
+        });
+        onUnmounted(() => {
+            timerUtil.clearInterval('realTime');
+            timerUtil.clearInterval('countdown');
+        });
+        const setTimerOut = () => {
+            timerUtil.setInterval(
+                () => {
+                    num.value = num.value - 1;
+                },
+                1000,
+                'countdown'
+            );
+        };
         function setTimerAction() {
             isStart.value = !isStart.value;
-            setTimer();
+            if (isStart.value) {
+                setTimerOut();
+                setTimer();
+            } else {
+                timerUtil.clearInterval('realTime');
+                timerUtil.clearInterval('countdown');
+            }
         }
         const {
             visible,
@@ -232,7 +222,7 @@ export default defineComponent({
             }
         });
 
-        return { loading, tableList, visible, closeDrawer, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType, diffTimes, timer, timerChange, isStart, setTimerAction, isPingAnOem };
+        return { loading, tableList, visible, closeDrawer, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType, diffTimes, timer, timerChange, isStart, setTimerAction, isPingAnOem, num };
     },
 });
 </script>