|
|
@@ -1,48 +1,48 @@
|
|
|
<template>
|
|
|
- <!-- 实时敞口-->
|
|
|
- <div class="exposure-real-time table-height" :loading="loading">
|
|
|
- <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" v-else> </filterCustomTable>
|
|
|
- <a-table :columns="columns" class="srcollYTable" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
|
|
|
- <template v-if="isPingAnOem()" #index="{ index }">
|
|
|
- <span>{{ index + 1 }}</span>
|
|
|
- </template>
|
|
|
- <template #MiddleGoodsName="{ record }">
|
|
|
- <span>{{ `${record.MiddleGoodsName}/${record.MiddleGoodsCode}` }}</span>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- <!-- 明细 -->
|
|
|
- <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
|
|
|
- <a-table :columns="columnsDetail" class="topTable" :pagination="false" rowKey="key" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
|
|
|
- <!-- 套保品种/代码 -->
|
|
|
- <template #middlegoodsname="{ record }" v-if="!isPingAnOem()">
|
|
|
- <span>{{ record.middlegoodsname + '/' + record.middlegoodscode }}</span>
|
|
|
- </template>
|
|
|
- <template #convertfactor="{record}">
|
|
|
- <span>{{record.convertratio}}</span>
|
|
|
- </template>
|
|
|
- <template #goodsname="{ record }" v-if="!isPingAnOem()">
|
|
|
- <span>{{ record.goodsname + '/' + record.goodscode }}</span>
|
|
|
- </template>
|
|
|
- <template v-if="isPingAnOem()" #index="{ index }">
|
|
|
- <span>{{ index + 1 }}</span>
|
|
|
- </template>
|
|
|
- <!-- 类型 -->
|
|
|
- <template #contracttype="{ record }">
|
|
|
- <span>{{ getPlanContractType(record.contracttype) }}</span>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </Description>
|
|
|
+ <!-- 实时敞口-->
|
|
|
+ <div class="exposure-real-time table-height" :loading="loading">
|
|
|
+ <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" v-else> </filterCustomTable>
|
|
|
+ <a-table :columns="columns" class="srcollYTable" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="key" :data-source="tableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
|
|
|
+ <template v-if="isPingAnOem()" #index="{ index }">
|
|
|
+ <span>{{ index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ <template #MiddleGoodsName="{ record }">
|
|
|
+ <span>{{ `${record.MiddleGoodsName}/${record.MiddleGoodsCode}` }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 明细 -->
|
|
|
+ <Description v-if="visible" @close="closeDrawer" @changeTab="changeTab" :tabList="tabList">
|
|
|
+ <a-table :columns="columnsDetail" class="topTable" :pagination="false" rowKey="key" :data-source="detailTableList" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }">
|
|
|
+ <!-- 套保品种/代码 -->
|
|
|
+ <template #middlegoodsname="{ record }" v-if="!isPingAnOem()">
|
|
|
+ <span>{{ record.middlegoodsname + '/' + record.middlegoodscode }}</span>
|
|
|
+ </template>
|
|
|
+ <template #convertfactor="{record}">
|
|
|
+ <span>{{record.convertratio}}</span>
|
|
|
+ </template>
|
|
|
+ <template #goodsname="{ record }" v-if="!isPingAnOem()">
|
|
|
+ <span>{{ record.goodsname + '/' + record.goodscode }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-if="isPingAnOem()" #index="{ index }">
|
|
|
+ <span>{{ index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 类型 -->
|
|
|
+ <template #contracttype="{ record }">
|
|
|
+ <span>{{ getPlanContractType(record.contracttype) }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </Description>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -67,146 +67,147 @@ import { pingan_realTime_columns } from './setup';
|
|
|
import { getTableButton } from '@/common/setup/table/button';
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: EnumRouterName.exposure_realtime,
|
|
|
- components: {
|
|
|
- Description,
|
|
|
- filterCustomTable,
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const diffTimes = [
|
|
|
- { id: 1, name: '3秒' },
|
|
|
- { id: 2, name: '5秒' },
|
|
|
- { 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);
|
|
|
- // 获取列表数据
|
|
|
- const queryTableAction = () => queryTable(QueryActualExposure);
|
|
|
- const param: ComposeTableDetailParam = {
|
|
|
- queryFn: queryTableAction, // 查询表格数据
|
|
|
- // tableName: 'table_pcweb_exposure', // 表头key
|
|
|
- tableFilterKey: ['MiddleGoodsName'], // 表格过滤字段
|
|
|
- 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');
|
|
|
- if (isStart.value) {
|
|
|
- timerUtil.setInterval(
|
|
|
- () => {
|
|
|
- queryTableAction();
|
|
|
- },
|
|
|
- timer.value * 1000,
|
|
|
- 'realTime'
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- 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;
|
|
|
- if (isStart.value) {
|
|
|
- setTimerOut();
|
|
|
- setTimer();
|
|
|
- } else {
|
|
|
- timerUtil.clearInterval('realTime');
|
|
|
- timerUtil.clearInterval('countdown');
|
|
|
- }
|
|
|
- }
|
|
|
- const {
|
|
|
- visible,
|
|
|
- closeDrawer, // 控制 drawer 组件是否显示
|
|
|
- columns,
|
|
|
- updateColumn, // 表头数据
|
|
|
- columnsDetail,
|
|
|
- registerColumnDetail,
|
|
|
- detailTableList, // 明细表头数据
|
|
|
- expandedRowKeys,
|
|
|
- selectedRow,
|
|
|
- Rowclick, // 表格事件
|
|
|
- } = handleComposeTable_detail<ErmcpRealExposureModel>(param);
|
|
|
+ name: EnumRouterName.exposure_realtime,
|
|
|
+ components: {
|
|
|
+ Description,
|
|
|
+ filterCustomTable,
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const diffTimes = [
|
|
|
+ { id: 1, name: '3秒' },
|
|
|
+ { id: 2, name: '5秒' },
|
|
|
+ { 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);
|
|
|
+ // 获取列表数据
|
|
|
+ const queryTableAction = () => queryTable(QueryActualExposure);
|
|
|
+ const param: ComposeTableDetailParam = {
|
|
|
+ queryFn: queryTableAction, // 查询表格数据
|
|
|
+ // tableName: 'table_pcweb_exposure', // 表头key
|
|
|
+ tableFilterKey: ['MiddleGoodsName'], // 表格过滤字段
|
|
|
+ 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');
|
|
|
+ if (isStart.value) {
|
|
|
+ timerUtil.setInterval(
|
|
|
+ () => {
|
|
|
+ queryTableAction();
|
|
|
+ },
|
|
|
+ timer.value * 1000,
|
|
|
+ 'realTime'
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ if (isStart.value) {
|
|
|
+ setTimerOut();
|
|
|
+ setTimer();
|
|
|
+ } else {
|
|
|
+ timerUtil.clearInterval('realTime');
|
|
|
+ timerUtil.clearInterval('countdown');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const {
|
|
|
+ visible,
|
|
|
+ closeDrawer, // 控制 drawer 组件是否显示
|
|
|
+ columns,
|
|
|
+ updateColumn, // 表头数据
|
|
|
+ columnsDetail,
|
|
|
+ registerColumnDetail,
|
|
|
+ detailTableList, // 明细表头数据
|
|
|
+ expandedRowKeys,
|
|
|
+ selectedRow,
|
|
|
+ Rowclick, // 表格事件
|
|
|
+ } = handleComposeTable_detail<ErmcpRealExposureModel>(param);
|
|
|
|
|
|
- // 底部明细标签
|
|
|
- const tabList = getTableButton(['exposure_realtime_spot_details', 'exposure_realtime_futures_details', 'exposure_realtime_params_details']);
|
|
|
+ // 底部明细标签
|
|
|
+ const tabList = getTableButton(['exposure_realtime_spot_details', 'exposure_realtime_futures_details', 'exposure_realtime_params_details']);
|
|
|
|
|
|
- const { listColumns, spotColumns } = pingan_realTime_columns();
|
|
|
- initData(() => {
|
|
|
- if (isPingAnOem()) {
|
|
|
- columns.value = listColumns;
|
|
|
- }
|
|
|
- });
|
|
|
+ const { listColumns, spotColumns } = pingan_realTime_columns();
|
|
|
+ initData(() => {
|
|
|
+ if (isPingAnOem()) {
|
|
|
+ columns.value = listColumns;
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- // 切换明细
|
|
|
- function changeTab(index: number, current: TabList) {
|
|
|
- const { code, lable } = current;
|
|
|
- let fn = null;
|
|
|
- if (code === 'exposure_realtime_spot_details') {
|
|
|
- // 现货明细信息
|
|
|
- if (isPingAnOem()) {
|
|
|
- columnsDetail.value = spotColumns;
|
|
|
- } else {
|
|
|
- // 注册表头
|
|
|
- registerColumnDetail('table_pcweb_exposure_detail', []);
|
|
|
- }
|
|
|
+ // 切换明细
|
|
|
+ function changeTab(index: number, current: TabList) {
|
|
|
+ detailTableList.value = [];
|
|
|
+ const { code, lable } = current;
|
|
|
+ let fn = null;
|
|
|
+ if (code === 'exposure_realtime_spot_details') {
|
|
|
+ // 现货明细信息
|
|
|
+ if (isPingAnOem()) {
|
|
|
+ columnsDetail.value = spotColumns;
|
|
|
+ } else {
|
|
|
+ // 注册表头
|
|
|
+ registerColumnDetail('table_pcweb_exposure_detail', []);
|
|
|
+ }
|
|
|
|
|
|
- fn = QueryActualExposureDetail;
|
|
|
+ fn = QueryActualExposureDetail;
|
|
|
|
|
|
- queryResultLoadingAndInfo(fn, loading, { middlegoodsid: selectedRow.value?.MiddleGoodsID }).then((res) => {
|
|
|
- detailTableList.value = res;
|
|
|
- });
|
|
|
- } else if (code === 'exposure_realtime_futures_details') {
|
|
|
- // 期货明细
|
|
|
- // 注册表头
|
|
|
- registerColumnDetail('table_pcweb_exposure_futures_detail', []);
|
|
|
+ queryResultLoadingAndInfo(fn, loading, { middlegoodsid: selectedRow.value?.MiddleGoodsID }).then((res) => {
|
|
|
+ detailTableList.value = res;
|
|
|
+ });
|
|
|
+ } else if (code === 'exposure_realtime_futures_details') {
|
|
|
+ // 期货明细
|
|
|
+ // 注册表头
|
|
|
+ registerColumnDetail('table_pcweb_exposure_futures_detail', []);
|
|
|
|
|
|
- fn = QueryAutualExposurePosition;
|
|
|
- queryResultLoadingAndInfo(fn, loading, { middleGoodsId: selectedRow.value?.MiddleGoodsID }).then((res) => {
|
|
|
- detailTableList.value = res;
|
|
|
- });
|
|
|
- } else {
|
|
|
- console.error(`${lable}没有配置对应的code: ${code},`);
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- watchEffect(() => {
|
|
|
- if (visible.value) {
|
|
|
- if (tabList.length) {
|
|
|
- changeTab(0, tabList[0]);
|
|
|
- }
|
|
|
- }
|
|
|
+ fn = QueryAutualExposurePosition;
|
|
|
+ queryResultLoadingAndInfo(fn, loading, { middleGoodsId: selectedRow.value?.MiddleGoodsID }).then((res) => {
|
|
|
+ detailTableList.value = res;
|
|
|
});
|
|
|
+ } else {
|
|
|
+ console.error(`${lable}没有配置对应的code: ${code},`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ watchEffect(() => {
|
|
|
+ if (visible.value) {
|
|
|
+ if (tabList.length) {
|
|
|
+ changeTab(0, tabList[0]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- 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 };
|
|
|
- },
|
|
|
+ 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>
|
|
|
|