|
|
@@ -0,0 +1,135 @@
|
|
|
+<!-- 市场运行管理-监控管理-持仓监控 -->
|
|
|
+<template>
|
|
|
+ <app-view>
|
|
|
+ <template #header>
|
|
|
+ <app-filter :option="filterOption" :loading="loading">
|
|
|
+ <!-- 商品 -->
|
|
|
+ <template #goodsid="{ item }">
|
|
|
+ <el-form-item :label="item.label" prop="goodsid">
|
|
|
+ <app-select-goods2 v-model="item.value"
|
|
|
+ :params="{ trademodels: '40,41,48,51', goodsStatusIds: '3' }" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <!-- 交易商 -->
|
|
|
+ <template #accountid="{ item }">
|
|
|
+ <el-form-item :label="item.label">
|
|
|
+ <app-select-account2 v-model="item.value" :params="{ usertype: 5 }" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <!-- 下次刷新 -->
|
|
|
+ <template #refTimeInput="{ item }">
|
|
|
+ <el-form-item :label="item.label">
|
|
|
+ <el-input-number v-model="item.value" :min="10" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="countDown.stop" v-if="countDown.status.value">
|
|
|
+ 停止监控({{ countDown.time }})
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="startCountDown" :disabled="loading" v-else>
|
|
|
+ 开始监控
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </app-filter>
|
|
|
+ </template>
|
|
|
+ <app-table :data="dataList" :columns="tableColumns">
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template #operate="{ row }">
|
|
|
+ <app-operation size="small" :data-list="getActionButtons()"
|
|
|
+ @click="(code: string) => openComponent(code, row)" circle />
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <app-pagination :total="total" v-model:page-size="pageSize" v-model:page-index="pageIndex"
|
|
|
+ @change="onSearch" />
|
|
|
+ </template>
|
|
|
+ </app-table>
|
|
|
+ <component :is="componentMap.get(componentId)" v-bind="{ record }" @closed="closeComponent"
|
|
|
+ v-if="componentId" />
|
|
|
+ </app-view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { onUnmounted, PropType } from 'vue'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import { formatDate } from '@/filters'
|
|
|
+import { useCountDown } from '@/hooks/countdown'
|
|
|
+import { useOperation } from '@/hooks/operation'
|
|
|
+import { useEnum } from '@/hooks/enum'
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
+import { useDataFilter } from '@/hooks/datatable-v2'
|
|
|
+import { positionForBuyOrSell } from '@/services/api/market'
|
|
|
+import AppTable from '@pc/components/base/table/index.vue'
|
|
|
+import AppPagination from '@pc/components/base/pagination/index.vue'
|
|
|
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
|
|
|
+import AppOperation from '@pc/components/base/operation/index.vue'
|
|
|
+import AppSelectGoods2 from '@pc/components/modules/select-goods2/index.vue'
|
|
|
+import AppSelectAccount2 from '@pc/components/modules/select-account2/index.vue'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ params: {
|
|
|
+ type: Object as PropType<Partial<Model.PositionForBuyOrSellReq>>
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const buyOrSellEnum = useEnum('buyOrSell') // 方向
|
|
|
+
|
|
|
+const countDown = useCountDown()
|
|
|
+
|
|
|
+const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.PositionForBuyOrSellRsp>()
|
|
|
+
|
|
|
+const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(positionForBuyOrSell, {
|
|
|
+ params: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ ...props.params
|
|
|
+ },
|
|
|
+ onError: (err) => {
|
|
|
+ ElMessage.error(err)
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ startCountDown()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const tableColumns: Model.TableColumn[] = [
|
|
|
+ { field: 'tradeid', label: '单号' },
|
|
|
+ { field: 'tradedate1', label: '交易日' },
|
|
|
+ { field: 'accountid', label: '资金账户/账号/名称', width: 200 },
|
|
|
+ { field: 'marketname', label: '市场' },
|
|
|
+ { field: 'goodscode', label: '商品' },
|
|
|
+ { field: 'buyorsell', label: '方向', formatValue: (val) => buyOrSellEnum.getEnumTypeName(val) },
|
|
|
+ { field: 'holderqty', label: '持仓数量' },
|
|
|
+ { field: 'holderprice', label: '持仓价格' },
|
|
|
+ { field: 'holderamount', label: '持仓金额' },
|
|
|
+ { field: 'actuallYplS', label: '浮动损益' },
|
|
|
+ { field: 'tradetime', label: '交易时间', formatValue: (val) => formatDate(val) }
|
|
|
+]
|
|
|
+
|
|
|
+const { filterOption, getQueryParams } = useDataFilter<Model.PositionForBuyOrSellReq>({
|
|
|
+ filters: [
|
|
|
+ { label: '商品', field: 'goodsid' },
|
|
|
+ { label: '交易商', field: 'accountid' },
|
|
|
+ { label: '下次刷新', field: 'refTimeInput', value: 10 },
|
|
|
+ { label: '排除交易商', field: 'excludeaccountids', placeholder: '请输入完整资金账户,多个逗号分隔', width: 260 },
|
|
|
+ { label: '指定交易商', field: 'includeaccountids', placeholder: '请输入完整资金账户,多个逗号分隔', width: 260 }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+const onSearch = () => {
|
|
|
+ countDown.stop()
|
|
|
+ const qs = getQueryParams()
|
|
|
+ run(qs)
|
|
|
+}
|
|
|
+
|
|
|
+const startCountDown = () => {
|
|
|
+ const { refTimeInput } = getQueryParams()
|
|
|
+ countDown.start(() => {
|
|
|
+ const qs = getQueryParams()
|
|
|
+ run(qs)
|
|
|
+ }, refTimeInput)
|
|
|
+}
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ countDown.stop()
|
|
|
+})
|
|
|
+</script>
|