update

src/utils/timer/timerUtil.ts

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

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

@@ -2,7 +2,28 @@
   <!-- 实时敞口-->
   <div class="exposure-real-time table-height"
        :loading="loading">
-    <filterCustomTable @search="updateColumn">
+
+    <div class="real-time-header"
+         v-if="isPingAnOem()">
+      <span class="dialogSpan">每隔</span>
+      <a-select class="typeSelect"
+                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">3</span>
+      <a-button type="button"
+                class="operBtn ant-btn"
+                @click="setTimerAction">{{isStart ? '停止监控' : '开始监控'}}</a-button>
+    </div>
+    <filterCustomTable @search="updateColumn"
+                       v-else>
     </filterCustomTable>
     <a-table :columns="columns"
              class="topOrderTable"
@@ -78,7 +99,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watchEffect } from 'vue';
+import { defineComponent, 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';
@@ -93,6 +114,8 @@ import { formatValue } from '@/common/methods';
 import { formatNumber } from '@/common/methods/format';
 import { getBizTypeName, getContractTypeName, getLogType } from '@/common/constants/enumsName';
 import { getPlanContractType } from '@/views/business/plan/setup';
+import timerUtil from '@/utils/timer/timerUtil';
+import { isPingAnOem } from '@/common/config/projectName';
 
 export default defineComponent({
     name: EnumRouterName.exposure_realtime,
@@ -101,6 +124,13 @@ export default defineComponent({
         filterCustomTable,
     },
     setup() {
+        const diffTimes = [
+            { id: 1, name: '3秒' },
+            { id: 2, name: '5秒' },
+            { id: 3, name: '10秒' },
+        ];
+        const timer = ref<number>(1);
+        const isStart = ref<boolean>(false);
         // 表格列表数据
         const { loading, tableList, queryTable } = queryTableList<ErmcpRealExposureModel>(true, 2);
         // 获取列表数据
@@ -111,6 +141,26 @@ export default defineComponent({
             tableFilterKey: ['MiddleGoodsName'], // 表格过滤字段
             menuType: EnumRouterName.exposure_realtime, // 当前tab页对应的code
         };
+        // 切换间隔时间
+        function timerChange() {
+            setTimer();
+        }
+        function setTimer() {
+            timerUtil.clearInterval('realTime');
+            if (isStart.value) {
+                timerUtil.setInterval(
+                    () => {
+                        queryTableAction();
+                    },
+                    timer.value * 1000,
+                    'realTime'
+                );
+            }
+        }
+        function setTimerAction() {
+            isStart.value = !isStart.value;
+            setTimer();
+        }
         const {
             visible,
             closeDrawer, // 控制 drawer 组件是否显示
@@ -159,7 +209,7 @@ export default defineComponent({
             }
         });
 
-        return { loading, tableList, visible, closeDrawer, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType };
+        return { loading, tableList, visible, closeDrawer, columns, updateColumn, columnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, changeTab, formatNumber, getBizTypeName, getPlanContractType, getLogType, diffTimes, timer, timerChange, isStart, setTimerAction, isPingAnOem };
     },
 });
 </script>
@@ -180,4 +230,8 @@ export default defineComponent({
         }
     }
 }
+.real-time-header {
+    padding: 5px 0 5px 5px;
+    text-align: left;
+}
 </style>;