|
|
@@ -1,47 +1,154 @@
|
|
|
<template>
|
|
|
- <div style="border-top: 1px solid #fbfbfb;">
|
|
|
- <DropdownMenu :close-on-click-outside="false">
|
|
|
- <DropdownItem title="日报表" v-model="reportTypeValue" :options="reportType" />
|
|
|
- <DropdownItem ref="dropdownItemRef" title="2023-10-1" @open="showPicker = true" />
|
|
|
- </DropdownMenu>
|
|
|
+ <app-view>
|
|
|
+ <template #header>
|
|
|
+ <DropdownMenu :close-on-click-outside="false">
|
|
|
+ <DropdownItem v-model="reportTypeValue" :options="reportType" @change="onChange" />
|
|
|
+ <DropdownItem ref="dropdownItemRef" :title="currentDate.length ? currentDate.join('-') : '结算日期'"
|
|
|
+ @open="showPicker = true" />
|
|
|
+ </DropdownMenu>
|
|
|
+ </template>
|
|
|
<CellGroup title="账户信息">
|
|
|
- <Cell title="账号" value="250000000006" />
|
|
|
- <Cell title="名称" value="交易商01" />
|
|
|
+ <Cell title="账号" :value="currentAccount.accountid" />
|
|
|
+ <Cell title="名称" :value="userInfo.customername" />
|
|
|
<Cell title="币种" value="RMB" />
|
|
|
- <Cell title="结算日期" value="2023-10-02" />
|
|
|
+ <Cell title="结算日期" :value="tradeDate" />
|
|
|
</CellGroup>
|
|
|
<CellGroup title="资金信息">
|
|
|
- <Cell title="期初余额" value="611950.93" />
|
|
|
- <Cell title="银行入金" value="0.00" />
|
|
|
- <Cell title="平仓损益" value="0.00" />
|
|
|
- <Cell title="银行出金" value="0.00" />
|
|
|
- <Cell title="结算损益" value="0.00" />
|
|
|
+ <Cell title="期初余额" :value="handleAmount(taaccount?.balance)" />
|
|
|
+ <Cell title="银行入金" :value="handleAmount(taaccount?.inamount)" />
|
|
|
+ <Cell title="银行出金" :value="handleAmount(taaccount?.outamount)" />
|
|
|
+ <Cell title="平仓损益" :value="handleAmount(taaccount?.closepl)" />
|
|
|
+ <Cell title="结算损益" :value="handleAmount(taaccount?.reckonpl)" />
|
|
|
+ <Cell title="服务费" :value="handleAmount(taaccount?.paycharge)" />
|
|
|
+ <Cell title="期末余额" :value="handleAmount(taaccount?.currentbalance)" />
|
|
|
+ <Cell title="占用资金" :value="handleAmount(taaccount?.oriusedmargin)" />
|
|
|
+ <Cell title="可用资金" :value="handleAmount(taaccount?.avaiablemoney)" />
|
|
|
+ <Cell title="冻结资金" :value="handleAmount(taaccount?.orioutamountfreeze)" />
|
|
|
+ <Cell title="可出资金" :value="handleAmount(taaccount?.avaiableoutmoney)" />
|
|
|
</CellGroup>
|
|
|
- <Popup position="bottom" v-model:show="showPicker" @click-overlay="dropdownItemRef.toggle()">
|
|
|
- <DatePicker @confirm="onPickerConfirm" @cancel="onPickerCancel" />
|
|
|
+ <CellGroup title="报表明细">
|
|
|
+ <Cell title="出入金明细" is-link @click="openComponent('bank')" />
|
|
|
+ <Cell title="持仓汇总" is-link @click="openComponent('position')" />
|
|
|
+ <Cell title="分时成交" is-link @click="openComponent('trade')" />
|
|
|
+ </CellGroup>
|
|
|
+ <Popup position="bottom" v-model:show="showPicker" round @click-overlay="dropdownItemRef.toggle()">
|
|
|
+ <DatePicker v-model="currentDate" :max-date="new Date()" :columns-type="columnsType" @confirm="onPickerConfirm"
|
|
|
+ @cancel="onPickerCancel" />
|
|
|
</Popup>
|
|
|
- </div>
|
|
|
-</template>title
|
|
|
+ <component ref="componentRef" :is="componentMap.get(componentId)" @closed="closeComponent" v-if="componentId" />
|
|
|
+ </app-view>
|
|
|
+</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef } from 'vue'
|
|
|
-import { DropdownMenu, DropdownItem, DatePicker, Popup, CellGroup, Cell } from 'vant'
|
|
|
+import { shallowRef, computed, onMounted, defineAsyncComponent } from 'vue'
|
|
|
+import { DropdownMenu, DropdownItem, DatePicker, Popup, CellGroup, Cell, DatePickerColumnType } from 'vant'
|
|
|
+import { formatDecimal, handleNoneValue } from '@/filters'
|
|
|
+import { useComponent } from '@/hooks/component'
|
|
|
+import { queryMarketRun } from '@/services/api/market'
|
|
|
+import { queryReportMonthTaaccount, queryReportReckonDayTaaccount } from '@/services/api/report'
|
|
|
+import { useAccountStore, useUserStore } from '@/stores'
|
|
|
+import moment from 'moment'
|
|
|
+
|
|
|
+const componentMap = new Map<string, unknown>([
|
|
|
+ ['bank', defineAsyncComponent(() => import('./bank/index.vue'))],
|
|
|
+ ['position', defineAsyncComponent(() => import('./position/index.vue'))],
|
|
|
+ ['trade', defineAsyncComponent(() => import('./trade/index.vue'))],
|
|
|
+])
|
|
|
|
|
|
+const { currentAccount } = useAccountStore()
|
|
|
+const { userInfo } = useUserStore()
|
|
|
const dropdownItemRef = shallowRef()
|
|
|
-const reportTypeValue = shallowRef(1)
|
|
|
+const reportTypeValue = shallowRef(1) // 报表类型
|
|
|
const showPicker = shallowRef(false)
|
|
|
+const marketInfo = shallowRef<Model.MarketRunRsp>()
|
|
|
+const currentDate = shallowRef<string[]>([])
|
|
|
+const taaccount = shallowRef<Model.ReportMonthTaaccountRsp | Model.ReportReckonDayTaaccountRsp>()
|
|
|
+
|
|
|
+const { componentRef, componentId, closeComponent, openComponent } = useComponent()
|
|
|
|
|
|
const reportType = [
|
|
|
{ text: '日报表', value: 1 },
|
|
|
{ text: '月报表', value: 2 }
|
|
|
]
|
|
|
|
|
|
+const pickerFormat = computed(() => reportTypeValue.value === 1 ? 'YYYY-MM-DD' : 'YYYY-MM')
|
|
|
+
|
|
|
+const columnsType = computed<DatePickerColumnType[]>(() => {
|
|
|
+ if (reportTypeValue.value === 1) {
|
|
|
+ return ['year', 'month', 'day']
|
|
|
+ }
|
|
|
+ return ['year', 'month']
|
|
|
+})
|
|
|
+
|
|
|
+// 结算日期
|
|
|
+const tradeDate = computed(() => {
|
|
|
+ if (taaccount.value) {
|
|
|
+ if ('reckondate' in taaccount.value) {
|
|
|
+ return moment(taaccount.value.reckondate).format(pickerFormat.value)
|
|
|
+ }
|
|
|
+ if ('cycletime' in taaccount.value) {
|
|
|
+ return moment(taaccount.value.cycletime).format(pickerFormat.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return '--'
|
|
|
+})
|
|
|
+
|
|
|
+// 处理金额显示
|
|
|
+const handleAmount = (value?: number) => {
|
|
|
+ if (value !== undefined) {
|
|
|
+ return formatDecimal(value)
|
|
|
+ }
|
|
|
+ return handleNoneValue()
|
|
|
+}
|
|
|
+
|
|
|
+// 查询市场上个交易日
|
|
|
+const getMarketRun = queryMarketRun().then((res) => {
|
|
|
+ marketInfo.value = res.data.find((e) => e.marketid === 0)
|
|
|
+ const dateString = marketInfo.value?.pretradedate ?? new Date().toISOString()
|
|
|
+ currentDate.value = moment(dateString).format(pickerFormat.value).split('-')
|
|
|
+})
|
|
|
+
|
|
|
+const requestData = () => {
|
|
|
+ getMarketRun.finally(() => {
|
|
|
+ if (reportTypeValue.value === 2) {
|
|
|
+ /// 表 - 交易商结算单 - 资金信息(月)
|
|
|
+ queryReportMonthTaaccount({
|
|
|
+ data: {
|
|
|
+ cycletime: currentDate.value.join(''),
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ taaccount.value = res.data[0]
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ /// 报表 - 交易商结算单 - 资金信息(日)
|
|
|
+ queryReportReckonDayTaaccount({
|
|
|
+ data: {
|
|
|
+ reckondate: currentDate.value.join(''),
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ taaccount.value = res.data[0]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 切换报表类型
|
|
|
+const onChange = () => {
|
|
|
+ const dateString = marketInfo.value?.pretradedate ?? new Date().toISOString()
|
|
|
+ currentDate.value = moment(dateString).format(pickerFormat.value).split('-')
|
|
|
+ requestData()
|
|
|
+}
|
|
|
+
|
|
|
const onPickerCancel = () => {
|
|
|
showPicker.value = false
|
|
|
dropdownItemRef.value?.toggle()
|
|
|
}
|
|
|
|
|
|
-const onPickerConfirm = () => {
|
|
|
+const onPickerConfirm = ({ selectedValues }: { selectedValues: string[] }) => {
|
|
|
+ currentDate.value = selectedValues
|
|
|
+ requestData()
|
|
|
onPickerCancel()
|
|
|
}
|
|
|
+
|
|
|
+onMounted(() => requestData())
|
|
|
</script>
|