|
|
@@ -1,6 +1,15 @@
|
|
|
<template>
|
|
|
<!-- 套期交易-敞口监控 -->
|
|
|
<mtp-table-scroll>
|
|
|
+ <template #header>
|
|
|
+ <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 class="operBtn ant-btn" @click="setTimerAction">{{ isStart ? '停止监控' : '开始监控' }}</a-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<template #default="{ scroll }">
|
|
|
<a-table :columns="columns" class="srcollYTable" :pagination="false" :rowClassName="rowClassName"
|
|
|
:expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record, index) => index"
|
|
|
@@ -13,6 +22,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
import { queryTableList, MtpTableButton, defineComponent, handleComposeTable } from '@/common/export/commonTable'
|
|
|
import { Ermcp2AreaExposureReq, Ermcp2AreaExposureRsp } from '@/services/go/ermcp/hedgedItem/interface'
|
|
|
import { queryErmcp2AreaExposure } from '@/services/go/ermcp/hedgedItem'
|
|
|
@@ -28,15 +38,47 @@ export default defineComponent({
|
|
|
},
|
|
|
setup() {
|
|
|
const { loading, tableList, queryTable } = queryTableList<Ermcp2AreaExposureRsp>(true, 2); // 表格列表数据
|
|
|
+ const timer = ref(0);
|
|
|
+ const second = ref(10); // 倒计时秒数
|
|
|
+ const counter = ref(0); // 倒计时计数器
|
|
|
+ const isStart = ref(false);
|
|
|
+
|
|
|
+ const setTimerAction = () => {
|
|
|
+ clearInterval(timer.value)
|
|
|
+ isStart.value = !isStart.value;
|
|
|
+ counter.value = 0;
|
|
|
+
|
|
|
+ if (isStart.value) {
|
|
|
+ counter.value = second.value;
|
|
|
+ countdown();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const countdown = () => {
|
|
|
+ timer.value = window.setInterval(() => {
|
|
|
+ if (counter.value) {
|
|
|
+ counter.value--;
|
|
|
+ } else {
|
|
|
+ counter.value = second.value;
|
|
|
+ queryFn();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
|
|
|
const queryFn = () => {
|
|
|
const param: Ermcp2AreaExposureReq = {
|
|
|
userid: getUserId()
|
|
|
}
|
|
|
queryTable(queryErmcp2AreaExposure, param).then((res) => {
|
|
|
- if (res.length) {
|
|
|
- composeTable.selectedRow.value = res[0];
|
|
|
- }
|
|
|
+ const selectedRow = composeTable.selectedRow.value;
|
|
|
+ composeTable.selectedRow.value = undefined;
|
|
|
+
|
|
|
+ window.setTimeout(() => {
|
|
|
+ composeTable.selectedRow.value = selectedRow;
|
|
|
+ if (!selectedRow && res.length) {
|
|
|
+ composeTable.selectedRow.value = res[0];
|
|
|
+ }
|
|
|
+ }, 0)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -50,7 +92,27 @@ export default defineComponent({
|
|
|
...composeTable,
|
|
|
loading,
|
|
|
tableList,
|
|
|
+ second,
|
|
|
+ counter,
|
|
|
+ isStart,
|
|
|
+ setTimerAction,
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.real-time-header {
|
|
|
+ margin-left: auto;
|
|
|
+ padding: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.real-time-select {
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+
|
|
|
+ .ant-input-number-input {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|