qdintc/intc-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 统计分析自测问题修复。

Browse Source
This commit is contained in:
tianyongbao
2024-05-11 17:09:58 +08:00
parent bfc19b03cf
commit 5be2cc4f3f
12 changed files with 1155 additions and 1042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
src/views/invest/creditAnalysis/index.vue
View File

@@ -1,124 +1,129 @@
<template>
<div class="app-container">
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="信用卡" prop="id">
<el-select v-model="queryParams.id" placeholder="请选择信用卡" clearable>
<el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="信用卡" prop="id">
<el-select v-model="queryParams.id" placeholder="请选择信用卡" clearable>
<el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="left-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
</div>
<div class="item-wrap">
<div class="num">{{ creditObj.creditBillRate }}%</div>
<div class="title">使用率</div>
</div>
<div class="item-wrap">
<div>
<span class="num">{{ creditObj.creditLimit }}</span> <span class="unit"></span>
</div>
<div class="title">总额度</div>
</div>
<div class="line"></div>
<div class="item-wrap">
<div>
<span class="num">{{ creditObj.creditBalance }}</span> <span class="unit"></span>
</div>
<div class="title">已用额度</div>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="left-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
</div>
<div class="item-wrap">
<div class="num">{{ creditObj.creditBillRate }}%</div>
<div class="title">使用率</div>
</div>
<div class="item-wrap">
<div>
<span class="num">{{ creditObj.creditLimit }}</span> <span class="unit"></span>
</div>
<div class="title">总额度</div>
</div>
<div class="line"></div>
<div class="item-wrap">
<div>
<span class="num">{{ creditObj.creditBalance }}</span> <span class="unit"></span>
</div>
<div class="title">已用额度</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">可用额度</div>
<div>
<span class="num">{{ creditObj.creditAvailableLimit }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">信用卡总数</div>
<div>
<span class="num">{{ creditObj.creditCardCount }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">月平均账单金额</div>
<div>
<span class="num">{{ creditObj.averageCreditBill }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">累计账单金额</div>
<div>
<span class="num">{{ creditObj.actualCreditBill }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="title-con">
<div class="title">账单统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
<div class="item-wrap">
<div class="title">可用额度</div>
<div>
<span class="num">{{ creditObj.creditAvailableLimit }}</span> <span class="unit"></span>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="creditObj.tableCreditBillList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="统计日期" align="center" prop="time" />
<el-table-column label="账单金额" align="center" prop="value" />
</el-table>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">信用卡总数</div>
<div>
<span class="num">{{ creditObj.creditCardCount }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">月平均账单金额</div>
<div>
<span class="num">{{ creditObj.averageCreditBill }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">累计账单金额</div>
<div>
<span class="num">{{ creditObj.actualCreditBill }}</span> <span class="unit"></span>
</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">账单统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="creditObj.tableCreditBillList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="统计日期" align="center" prop="time" />
<el-table-column label="账单金额" align="center" prop="value" />
<el-table-column prop="detail" label="账单明细" width="700" v-if="queryParams.type === 2">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
@@ -131,9 +136,7 @@ import { getCreditAnalysis } from '@/api/invest/statisticAnalysis'
import { listBankcardLend } from '@/api/invest/bankcardlend'
const { proxy } = getCurrentInstance()
const dates = [
{ value: 2, label: '月' }
]
const dates = [{ value: 2, label: '月' }]
const loading = ref(true)
const total = ref(0)
@@ -173,7 +176,7 @@ const data = reactive({
const { queryParams, queryCreditCardParams, rules } = toRefs(data)
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth())).slice(-2)
const end = today.getFullYear() + '-' + ('0' + today.getMonth()).slice(-2)
const start = dayjs(end).add(-11, 'months')
queryParams.value.time = [start, end]
/** 查询信用卡卡管理列表 */
@@ -183,6 +186,11 @@ function getCreditCardList() {
})
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const disabledDateFun = (time) => {
const arr = [0, 30, 365, 365 * 5]
const days = arr[queryParams.value.type]

11
src/views/invest/creditCardDealAnalysis/index.vue
View File

@@ -200,6 +200,11 @@
</el-table-column>
<el-table-column label="交易日期" align="center" prop="time" />
<el-table-column label="交易金额" align="center" prop="value" />
<el-table-column prop="detail" label="交易明细" width="700" v-if="queryParams.type === 1">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
@@ -317,7 +322,11 @@ const calendarChange = (val) => {
firstChooseDate.value = val[0].getTime()
if (val[1]) firstChooseDate.value = ''
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const account = ref({
amount: '',
income: '',

10
src/views/invest/creditInstallmentAnalysis/index.vue
View File

@@ -136,6 +136,11 @@
</el-table-column>
<el-table-column label="还款日期" align="center" prop="time" />
<el-table-column label="待还款金额" align="center" prop="value" />
<el-table-column prop="detail" label="待还款明细" width="700" v-if="queryParams.type === 1">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
@@ -220,6 +225,11 @@ function getCreditCardList() {
})
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const handleTimeChange = (type) => {
queryParams.value.time = null
if (type === 1) {

250
src/views/invest/creditInstallmentSettledAnalysis/index.vue
View File

@@ -1,131 +1,135 @@
<template>
<div class="app-container">
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="信用卡" prop="bankCardLendId">
<el-select v-model="queryParams.id" placeholder="信用卡" clearable>
<el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="20"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="信用卡" prop="bankCardLendId">
<el-select v-model="queryParams.id" placeholder="信用卡" clearable>
<el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="20"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清分期笔数</div>
<div>
<span class="num">{{ historyObj.clearedCount }}</span> <span class="unit">笔</span>
</div>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清分期笔数</div>
<div>
<span class="num">{{ historyObj.clearedCount }}</span> <span class="unit">笔</span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清分期（本息）</div>
<div>
<span class="num">{{ historyObj.clearedTotal }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清分期（本金）</div>
<div>
<span class="num">{{ historyObj.clearedPrincipal}}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清总利息</div>
<div>
<span class="num">{{ historyObj.totalInterest }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="title-con">
<div class="title">已结清信用卡分期统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
<div class="item-wrap">
<div class="title">已结清分期（本息）</div>
<div>
<span class="num">{{ historyObj.clearedTotal }}</span> <span class="unit"></span>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="分期日期" align="center" prop="time" />
<el-table-column label="分期金额（本息）" align="center" prop="value" />
</el-table>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清分期（本金）</div>
<div>
<span class="num">{{ historyObj.clearedPrincipal }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清总利息</div>
<div>
<span class="num">{{ historyObj.totalInterest }}</span> <span class="unit"></span>
</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">已结清信用卡分期统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="分期日期" align="center" prop="time" />
<el-table-column label="分期金额（本息）" align="center" prop="value" />
<el-table-column prop="detail" label="分期金额明细" width="700" v-if="queryParams.type === 2">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
@@ -203,7 +207,11 @@ function getCreditCardList() {
creditCardList.value = response.rows
})
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const handleTimeChange = (type) => {
queryParams.value.time = null
if (type === 2) {

386
src/views/invest/creditRecordAnalysis/index.vue
View File

@@ -1,196 +1,206 @@
<template>
<div class="app-container">
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="5"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="5"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 1.45rem)">
<div class="summary-con" style="height: 115px">
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近1月硬查询</div>
<div>
<span class="num">{{ creditRecord.lastOneMonths }}</span> <span class="unit">次</span>
</div>
</div>
</div>
<div class="main-con" style="height: calc(100% - 1.45rem)">
<div class="summary-con" style="height: 115px" >
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近1月硬查询</div>
<div>
<span class="num">{{ creditRecord.lastOneMonths }}</span> <span class="unit">次</span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近2月硬查询</div>
<div>
<span class="num">{{ creditRecord.lastTwoMonths }}</span> <span class="unit">次</span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近3月硬查询</div>
<div>
<span class="num">{{ creditRecord.lastThreeMonths }}</span> <span class="unit">次</span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近6月硬查询</div>
<div>
<span class="num">{{ creditRecord.lastSixMonths }}</span>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近1年硬查询</div>
<div>
<span class="num">{{ creditRecord.lastOneYears }}</span>次
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="summary-con" style="height: 110px;">
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近2年硬查询</div>
<div>
<span class="num">{{ creditRecord.lastTwoYears }}</span>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近6月个人查询</div>
<div>
<span class="num">{{ creditRecord.lastSixMonthPersonalCount }}</span>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">个人查询总数</div>
<div>
<span class="num">{{ creditRecord.totalPersonalCount }}</span>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近2年贷后管理</div>
<div>
<span class="num">{{ creditRecord.lastTwoYearsAfterLoan }}</span>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">贷后管理总数</div>
<div>
<span class="num">{{ creditRecord.totalAfterLoan }}</span>次
</div>
</div>
</div>
</div>
<div class="title-con" style="margin-top: 18px">
<div class="title">征信查询统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
<div class="item-wrap">
<div class="title">近2月硬查询</div>
<div>
<span class="num">{{ creditRecord.lastTwoMonths }}</span> <span class="unit">次</span>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px);margin-top: -10px;"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px);margin-top: -10px;"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="creditRecord.tableCreditRecordsList" height="calc(100% - 245px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="查询日期" align="center" prop="time" />
<el-table-column label="查询次数" align="center" prop="value" />
</el-table>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近3月硬查询</div>
<div>
<span class="num">{{ creditRecord.lastThreeMonths }}</span> <span class="unit">次</span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近6月硬查询</div>
<div>
<span class="num">{{ creditRecord.lastSixMonths }}</span
>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近1年硬查询</div>
<div>
<span class="num">{{ creditRecord.lastOneYears }}</span
>次
</div>
</div>
</div>
</div>
<div class="summary-con" style="height: 110px">
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近2年硬查询</div>
<div>
<span class="num">{{ creditRecord.lastTwoYears }}</span
>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近6月个人查询</div>
<div>
<span class="num">{{ creditRecord.lastSixMonthPersonalCount }}</span
>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">个人查询总数</div>
<div>
<span class="num">{{ creditRecord.totalPersonalCount }}</span
>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">近2年贷后管理</div>
<div>
<span class="num">{{ creditRecord.lastTwoYearsAfterLoan }}</span
>次
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">贷后管理总数</div>
<div>
<span class="num">{{ creditRecord.totalAfterLoan }}</span
>次
</div>
</div>
</div>
</div>
<div class="title-con" style="margin-top: 18px">
<div class="title">征信查询统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="creditRecord.tableCreditRecordsList" height="calc(100% - 245px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="查询日期" align="center" prop="time" />
<el-table-column label="查询次数" align="center" prop="value" />
<el-table-column prop="detail" label="查询明细" width="700" v-if="queryParams.type === 1">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
@@ -273,7 +283,11 @@ const handleTimeChange = (type) => {
}
getList()
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const disabledDateFun = (time) => {
const arr = [0, 30, 365, 365 * 5]
const days = arr[queryParams.value.type]

11
src/views/invest/debitDealAnalysis/index.vue
View File

@@ -200,6 +200,11 @@
</el-table-column>
<el-table-column label="交易日期" align="center" prop="time" />
<el-table-column label="交易金额" align="center" prop="value" />
<el-table-column prop="detail" label="交易明细" width="700" v-if="queryParams.type === 1">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
@@ -295,7 +300,11 @@ const handleTimeChange = (type) => {
}
getList()
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const disabledDateFun = (time) => {
const arr = [0, 30, 365, 365 * 5]
const days = arr[queryParams.value.type]

255
src/views/invest/futuresAnalysis/index.vue
View File

@@ -1,132 +1,136 @@
<template>
<div class="app-container">
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="期货账户" prop="futureStocksId">
<el-select v-model="queryParams.id" placeholder="请选择期货账户" clearable>
<el-option v-for="futureStocks in futureStocksList" :key="futureStocks.id" :label="futureStocks.nameCode" :value="futureStocks.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="10"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="期货账户" prop="futureStocksId">
<el-select v-model="queryParams.id" placeholder="请选择期货账户" clearable>
<el-option v-for="futureStocks in futureStocksList" :key="futureStocks.id" :label="futureStocks.nameCode" :value="futureStocks.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="10"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">平均收益</div>
<div>
<span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大收益</div>
<div>
<span class="num">{{ futuresStock.maxRevenue }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大亏损</div>
<div>
<span class="num">{{ futuresStock.maxLoss }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="title-con">
<div class="title">收益统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
<div class="item-wrap">
<div class="title">平均收益</div>
<div>
<span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="统计日期" align="center" prop="time" />
<el-table-column label="收益" align="center" prop="value" />
</el-table>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大收益</div>
<div>
<span class="num">{{ futuresStock.maxRevenue }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大亏损</div>
<div>
<span class="num">{{ futuresStock.maxLoss }}</span> <span class="unit"></span>
</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">收益统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="统计日期" align="center" prop="time" />
<el-table-column label="收益" align="center" prop="value" />
<el-table-column prop="detail" label="收益明细" width="700" v-if="queryParams.type === 2">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
@@ -194,7 +198,7 @@ const data = reactive({
const { queryParams, queryFutureStocksListParams, rules } = toRefs(data)
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth())).slice(-2)
const end = today.getFullYear() + '-' + ('0' + today.getMonth()).slice(-2)
const start = dayjs(end).add(-59, 'months')
queryParams.value.time = [start, end]
/** 查询期货股票卡管理列表 */
@@ -204,11 +208,16 @@ function getFutureStocksList() {
})
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const handleTimeChange = (type) => {
queryParams.value.time = null
if (type === 2) {
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth())).slice(-2)
const end = today.getFullYear() + '-' + ('0' + today.getMonth()).slice(-2)
const start = dayjs(end).add(-59, 'months')
queryParams.value.time = [start, end]
} else if (type === 3) {

266
src/views/invest/investAnalysis/index.vue
View File

@@ -1,92 +1,91 @@
<template>
<div class="app-container">
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="10"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="10"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">期货累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateFutures }}</span> <span class="unit"></span>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">期货累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateFutures }}</span> <span class="unit"></span>
</div>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">股票累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateStocks }}</span> <span class="unit"></span>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">股票累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateStocks }}</span> <span class="unit"></span>
</div>
</div>
</div>
<!-- <div class="center-con">
</div>
</div>
<!-- <div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
@@ -97,53 +96,58 @@
</div>
</div>
</div> -->
<div class="center-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大收益</div>
<div>
<span class="num">{{ futuresStock.maxRevenue }}</span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大亏损</div>
<div>
<span class="num">{{ futuresStock.maxLoss }}</span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
</div>
<div class="title-con">
<div class="title">收益统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
<div class="item-wrap">
<div class="title">最大收益</div>
<div>
<span class="num">{{ futuresStock.maxRevenue }}</span>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="统计日期" align="center" prop="time" />
<el-table-column label="收益" align="center" prop="value" />
</el-table>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大亏损</div>
<div>
<span class="num">{{ futuresStock.maxLoss }}</span>
</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">收益统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="统计日期" align="center" prop="time" />
<el-table-column label="收益" align="center" prop="value" />
<el-table-column prop="detail" label="收益明细" width="700" v-if="queryParams.type === 2">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
@@ -203,14 +207,14 @@ const data = reactive({
const { queryParams, rules } = toRefs(data)
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth())).slice(-2)
const end = today.getFullYear() + '-' + ('0' + today.getMonth()).slice(-2)
const start = dayjs(end).add(-59, 'months')
queryParams.value.time = [start, end]
const handleTimeChange = (type) => {
queryParams.value.time = null
if (type === 2) {
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth())).slice(-2)
const end = today.getFullYear() + '-' + ('0' + today.getMonth()).slice(-2)
const start = dayjs(end).add(-59, 'months')
queryParams.value.time = [start, end]
} else if (type === 3) {
@@ -221,7 +225,11 @@ const handleTimeChange = (type) => {
}
getList()
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const disabledDateFun = (time) => {
const arr = [0, 30, 365, 365 * 5]
const days = arr[queryParams.value.type]

11
src/views/invest/onlineLendAnalysis/index.vue
View File

@@ -136,6 +136,11 @@
</el-table-column>
<el-table-column label="还款日期" align="center" prop="time" />
<el-table-column label="待还款金额" align="center" prop="value" />
<el-table-column prop="detail" label="待还款明细" width="700" v-if="queryParams.type === 1">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
@@ -221,6 +226,12 @@ function getCreditCardList() {
})
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const handleTimeChange = (type) => {
queryParams.value.time = null
if (type === 1) {

250
src/views/invest/onlineLendSettledAnalysis/index.vue
View File

@@ -1,131 +1,135 @@
<template>
<div class="app-container">
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="网贷机构" prop="bankCardLendId">
<el-select v-model="queryParams.id" placeholder="请选择网贷机构" clearable>
<el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="20"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="网贷机构" prop="bankCardLendId">
<el-select v-model="queryParams.id" placeholder="请选择网贷机构" clearable>
<el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="20"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清网贷笔数</div>
<div>
<span class="num">{{ historyObj.clearedCount }}</span> <span class="unit">笔</span>
</div>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清网贷笔数</div>
<div>
<span class="num">{{ historyObj.clearedCount }}</span> <span class="unit">笔</span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清网贷（本息）</div>
<div>
<span class="num">{{ historyObj.clearedTotal }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清网贷（本金）</div>
<div>
<span class="num">{{ historyObj.clearedPrincipal}}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清总利息</div>
<div>
<span class="num">{{ historyObj.totalInterest }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="title-con">
<div class="title">已结清网贷统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
<div class="item-wrap">
<div class="title">已结清网贷（本息）</div>
<div>
<span class="num">{{ historyObj.clearedTotal }}</span> <span class="unit"></span>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="借款日期" align="center" prop="time" />
<el-table-column label="借款金额（本息）" align="center" prop="value" />
</el-table>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清网贷（本金）</div>
<div>
<span class="num">{{ historyObj.clearedPrincipal }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">已结清总利息</div>
<div>
<span class="num">{{ historyObj.totalInterest }}</span> <span class="unit"></span>
</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">已结清网贷统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="借款日期" align="center" prop="time" />
<el-table-column label="借款金额（本息）" align="center" prop="value" />
<el-table-column prop="detail" label="借款金额明细" width="700" v-if="queryParams.type === 2">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
@@ -220,7 +224,11 @@ const handleTimeChange = (type) => {
}
getList()
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const firstChooseDate = ref('')
const calendarChange = (val) => {
firstChooseDate.value = val[0].getTime()

250
src/views/invest/posAnalysis/index.vue
View File

@@ -1,131 +1,135 @@
<template>
<div class="app-container">
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="POS机" style="width: 500px;" prop="id">
<el-select v-model="queryParams.id" placeholder="请选择POS机" clearable>
<el-option v-for="pos in posMachineList" :key="pos.id" :label="pos.nameMerchantName" :value="pos.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="5"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="POS机" style="width: 500px" prop="id">
<el-select v-model="queryParams.id" placeholder="请选择POS机" clearable>
<el-option v-for="pos in posMachineList" :key="pos.id" :label="pos.nameMerchantName" :value="pos.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="5"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 1.45rem)">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">刷卡金额</div>
<div>
<span class="num">{{ pos.amount }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="main-con" style="height: calc(100% - 1.45rem)">
<div class="summary-con" >
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">刷卡金额</div>
<div>
<span class="num">{{ pos.amount }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">刷卡手续费</div>
<div>
<span class="num">{{ pos.commission }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">入账金额</div>
<div>
<span class="num">{{ pos.actualAmount }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">刷卡次数</div>
<div>
<span class="num">{{ pos.count }}</span> <span class="unit">次</span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="title-con" >
<div class="title">POS机刷卡统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
<div class="item-wrap">
<div class="title">刷卡手续费</div>
<div>
<span class="num">{{ pos.commission }}</span> <span class="unit"></span>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px);"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px);"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="pos.tablePosList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="刷卡日期" align="center" prop="time" />
<el-table-column label="刷卡金额" align="center" prop="value" />
</el-table>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">入账金额</div>
<div>
<span class="num">{{ pos.actualAmount }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">刷卡次数</div>
<div>
<span class="num">{{ pos.count }}</span> <span class="unit">次</span>
</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">POS机刷卡统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="pos.tablePosList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="刷卡日期" align="center" prop="time" />
<el-table-column label="刷卡金额" align="center" prop="value" />
<el-table-column prop="detail" label="刷卡明细" v-if="queryParams.type === 1">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
@@ -255,6 +259,12 @@ function getPosMachineList() {
})
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
function getList() {
loading.value = true
chartData.value = { name: [], value1: [] }

255
src/views/invest/stocksAnalysis/index.vue
View File

@@ -1,132 +1,136 @@
<template>
<div class="app-container">
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="股票账户" prop="futureStocksId">
<el-select v-model="queryParams.id" placeholder="请选择股票账户" clearable>
<el-option v-for="futureStocks in futureStocksList" :key="futureStocks.id" :label="futureStocks.nameCode" :value="futureStocks.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="10"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
<div class="search-con">
<div class="title">查询条件</div>
<el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
<el-form-item label="股票账户" prop="futureStocksId">
<el-select v-model="queryParams.id" placeholder="请选择股票账户" clearable>
<el-option v-for="futureStocks in futureStocksList" :key="futureStocks.id" :label="futureStocks.nameCode" :value="futureStocks.id" />
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
<el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 1">
<el-date-picker
v-model="queryParams.time"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 2">
<el-date-picker
v-model="queryParams.time"
type="monthrange"
range-separator="~"
format="YYYY-MM"
start-placeholder="开始时间"
end-placeholder="结束时间"
:disabled-date="disabledDateFun"
@calendar-change="calendarChange"
/>
</el-form-item>
<el-form-item label="" prop="time" v-if="queryParams.type === 3">
<yearPicker
v-model="queryParams.time"
ref="statisticPicker"
labelText="选择年份"
:initYear="dateValue"
:showYear="showYearValue"
:maxLength="10"
sp="~"
@updateTimeRange="updateStatisticYear"
/>
</el-form-item>
</el-form>
<div class="search-btn-con">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="main-con" style="height: calc(100% - 2.05rem)">
<div class="summary-con">
<div class="right-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">累计收益</div>
<div>
<span class="num">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">平均收益</div>
<div>
<span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大收益</div>
<div>
<span class="num">{{ futuresStock.maxRevenue }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大亏损</div>
<div>
<span class="num">{{ futuresStock.maxLoss }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="title-con">
<div class="title">收益统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
<div class="item-wrap">
<div class="title">平均收益</div>
<div>
<span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="统计日期" align="center" prop="time" />
<el-table-column label="收益" align="center" prop="value" />
</el-table>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/chart-pie.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大收益</div>
<div>
<span class="num">{{ futuresStock.maxRevenue }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="center-con">
<div class="img">
<img src="@/assets/images/accumulate.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">最大亏损</div>
<div>
<span class="num">{{ futuresStock.maxLoss }}</span> <span class="unit"></span>
</div>
</div>
</div>
</div>
<div class="title-con">
<div class="title">收益统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
<el-radio-button label="柱状图" />
<el-radio-button label="折线图" />
<el-radio-button label="表格" />
</el-radio-group>
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="统计日期" align="center" prop="time" />
<el-table-column label="收益" align="center" prop="value" />
<el-table-column prop="detail" label="收益明细" width="700" v-if="queryParams.type === 2">
<template #default="scope">
<span v-html="formatMultiLineData(scope.row.detail)"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
@@ -195,7 +199,7 @@ const data = reactive({
const { queryParams, queryFutureStocksListParams, rules } = toRefs(data)
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth())).slice(-2)
const end = today.getFullYear() + '-' + ('0' + today.getMonth()).slice(-2)
const start = dayjs(end).add(-59, 'months')
queryParams.value.time = [start, end]
/** 查询期货股票卡管理列表 */
@@ -205,11 +209,16 @@ function getFutureStocksList() {
})
}
function formatMultiLineData(data) {
if (data != null) {
return data.replace(/<br\/>/g, '<br/>')
}
}
const handleTimeChange = (type) => {
queryParams.value.time = null
if (type === 2) {
const today = new Date()
const end = today.getFullYear() + '-' + ('0' + (today.getMonth())).slice(-2)
const end = today.getFullYear() + '-' + ('0' + today.getMonth()).slice(-2)
const start = dayjs(end).add(-59, 'months')
queryParams.value.time = [start, end]
} else if (type === 3) {