fix: 信用卡待还，网贷待还，看本月及下个月的数据。
This commit is contained in:
tianyongbao
@@ -1,144 +1,144 @@
|
||||
<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="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="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="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="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.unclearedDetailCount }}</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.unclearedDetailCount }}</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.unClearedDetail }}</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.dueDetail }}</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.repaidDetail }}</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">{{ historyObj.leftDetail }}</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.unClearedDetail }}</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.tableHistoryDetailList" 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.dueDetail }}</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.repaidDetail }}</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">{{ historyObj.leftDetail }}</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.tableHistoryDetailList" 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>
|
||||
</template>
|
||||
|
||||
@@ -210,7 +210,7 @@ const { queryParams, queryCreditCardParams, rules } = toRefs(data)
|
||||
const today = new Date()
|
||||
const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
|
||||
// 当前月份的结束日期
|
||||
const endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
|
||||
const endDate = new Date(today.getFullYear(), today.getMonth() + 2, 0)
|
||||
const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')}`
|
||||
queryParams.value.time = [start, end]
|
||||
/** 查询信用卡卡管理列表 */
|
||||
@@ -229,8 +229,7 @@ const handleTimeChange = (type) => {
|
||||
const endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
|
||||
const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')}`
|
||||
queryParams.value.time = [start, end]
|
||||
} else
|
||||
if (type === 2) {
|
||||
} else if (type === 2) {
|
||||
const today = new Date()
|
||||
const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
|
||||
const end = dayjs(start).add(35, 'months')
|
||||
|
||||
@@ -1,144 +1,144 @@
|
||||
<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="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="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="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="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.unclearedDetailCount }}</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.unclearedDetailCount }}</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.unClearedDetail }}</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.dueDetail }}</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.repaidDetail }}</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">{{ historyObj.leftDetail }}</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.unClearedDetail }}</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.tableHistoryDetailList" 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.dueDetail }}</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.repaidDetail }}</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">{{ historyObj.leftDetail }}</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.tableHistoryDetailList" 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>
|
||||
</template>
|
||||
|
||||
@@ -211,7 +211,7 @@ const { queryParams, queryCreditCardParams, rules } = toRefs(data)
|
||||
const today = new Date()
|
||||
const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
|
||||
// 当前月份的结束日期
|
||||
const endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
|
||||
const endDate = new Date(today.getFullYear(), today.getMonth() + 2, 0)
|
||||
const end = `${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().padStart(2, '0')}-${endDate.getDate().toString().padStart(2, '0')}`
|
||||
queryParams.value.time = [start, end]
|
||||
/** 查询信用卡卡管理列表 */
|
||||
|
||||
Reference in New Issue
Block a user