816 lines
24 KiB
Vue
816 lines
24 KiB
Vue
<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="请选择贷款机构" @change="handleCreditChange" 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">
|
||
<div class="summary-con">
|
||
<div class="center-con">
|
||
<div class="icon-box">
|
||
<el-icon :size="40" color="#409EFF"><List /></el-icon>
|
||
</div>
|
||
<div class="item-wrap">
|
||
<div class="title">未结清贷款笔数</div>
|
||
<div class="num">{{ historyObj.unclearedDetailCount }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-con">
|
||
<div class="icon-box">
|
||
<el-icon :size="40" color="#67C23A"><WalletFilled /></el-icon>
|
||
</div>
|
||
<div class="item-wrap">
|
||
<div class="title">未结清（本息）</div>
|
||
<div class="num">{{ historyObj.unClearedDetail }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-con">
|
||
<div class="icon-box">
|
||
<el-icon :size="40" color="#E6A23C"><Money /></el-icon>
|
||
</div>
|
||
<div class="item-wrap">
|
||
<div class="title">未结清本金</div>
|
||
<div class="num">{{ historyObj.unClearedPrincipal }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-con">
|
||
<div class="icon-box">
|
||
<el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
|
||
</div>
|
||
<div class="item-wrap">
|
||
<div class="title">未结清利息</div>
|
||
<div class="num">{{ historyObj.unClearedInterest }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-con">
|
||
<div class="icon-box">
|
||
<el-icon :size="40" color="#909399"><DocumentCopy /></el-icon>
|
||
</div>
|
||
<div class="item-wrap">
|
||
<div class="title">当期应还本息</div>
|
||
<div class="num">{{ historyObj.dueDetail }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-con">
|
||
<div class="icon-box">
|
||
<el-icon :size="40" color="#67C23A"><CircleCheck /></el-icon>
|
||
</div>
|
||
<div class="item-wrap">
|
||
<div class="title">当期已还本息</div>
|
||
<div class="num">{{ historyObj.repaidDetail }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-con">
|
||
<div class="icon-box">
|
||
<el-icon :size="40" color="#E6A23C"><Clock /></el-icon>
|
||
</div>
|
||
<div class="item-wrap">
|
||
<div class="title">当期待还本息</div>
|
||
<div class="num">{{ historyObj.leftDetail }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-con">
|
||
<div class="icon-box">
|
||
<el-icon :size="40" color="#F56C6C"><Histogram /></el-icon>
|
||
</div>
|
||
<div class="item-wrap">
|
||
<div class="title">当期利息</div>
|
||
<div class="num">{{ historyObj.dueInterest }}</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"></div>
|
||
<div v-show="radioVal === '折线图'" class="chart" id="chartLine"></div>
|
||
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="reversedTableData">
|
||
<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" width="200" />
|
||
<el-table-column label="待还款金额" align="center" prop="value" />
|
||
<el-table-column prop="detail" label="待还款明细" width="900" v-if="queryParams.type === 1">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.detailList && scope.row.detailList.length > 0">
|
||
<div
|
||
v-for="(group, groupIndex) in groupByRepaymentAccount(scope.row.detailList)"
|
||
:key="groupIndex"
|
||
style="padding: 6px 8px; margin-bottom: 4px; background: #f5f7fa; border-radius: 4px"
|
||
>
|
||
<!-- 该账户下的所有明细 -->
|
||
<div
|
||
v-for="(item, itemIndex) in group.items"
|
||
:key="itemIndex"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
padding: '4px 0',
|
||
borderBottom: itemIndex < group.items.length - 1 ? '1px dashed #dcdfe6' : 'none'
|
||
}"
|
||
>
|
||
<span style="flex: 1"
|
||
>{{ item.bankCardLendName }}(本金:{{ item.principal }}元,利息:{{ item.interest }}元,合计:{{ item.currentAmount }}元)</span
|
||
>
|
||
<el-button size="small" type="primary" icon="Coin" @click="handleRepayment(item)">还款</el-button>
|
||
</div>
|
||
<!-- 还款账户信息（同一账户只显示一次，放在明细后面） -->
|
||
<div
|
||
v-if="group.repaymentAccountName"
|
||
style="margin-top: 4px; padding-top: 4px; color: #409eff; font-weight: 500; border-top: 1px solid #e4e7ed"
|
||
>
|
||
还款账户:{{ group.repaymentAccountName }}(余额:{{ group.repaymentAccountBalance }}元)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span v-else v-html="formatMultiLineData(scope.row.detail)"></span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 还款对话框 -->
|
||
<el-dialog title="贷款还款" v-model="repaymentOpen" width="500px" append-to-body>
|
||
<el-form ref="repaymentFormRef" :model="repaymentForm" :rules="repaymentRules" label-width="120px">
|
||
<el-form-item label="贷款机构">
|
||
<el-input v-model="repaymentForm.bankCardLendName" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="还款日期" prop="repaymentDate">
|
||
<el-date-picker
|
||
clearable
|
||
v-model="repaymentForm.repaymentDate"
|
||
type="date"
|
||
value-format="YYYY-MM-DD"
|
||
placeholder="请选择还款日期"
|
||
style="width: 100%"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="应还本金" prop="principal">
|
||
<el-input v-model="repaymentForm.principal" type="number" @input="calculateTotalAmount" placeholder="请输入应还本金" />
|
||
</el-form-item>
|
||
<el-form-item label="应还利息" prop="interest">
|
||
<el-input v-model="repaymentForm.interest" type="number" @input="calculateTotalAmount" placeholder="请输入应还利息" />
|
||
</el-form-item>
|
||
<el-form-item label="合计金额">
|
||
<el-input v-model="repaymentForm.currentAmount" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="还款状态" prop="postingState">
|
||
<el-select v-model="repaymentForm.postingState" placeholder="请选择还款状态" style="width: 100%">
|
||
<el-option label="已还款" value="1"></el-option>
|
||
<el-option label="未还款" value="0"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="repaymentForm.remark" type="textarea" placeholder="请输入备注" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="submitRepayment">确 定</el-button>
|
||
<el-button @click="repaymentOpen = false">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="CreditAnalysis">
|
||
import dayjs from 'dayjs'
|
||
import * as echarts from 'echarts'
|
||
import { ElMessage } from 'element-plus'
|
||
import { List, WalletFilled, Money, Coin, DocumentCopy, CircleCheck, Clock, TrendCharts, Histogram } from '@element-plus/icons-vue'
|
||
import yearPicker from '@/components/YearPicker/index.vue'
|
||
import { getInstallmentHistoryAnalysis } from '@/api/invest/statisticAnalysis'
|
||
import { listBankcardLend } from '@/api/invest/bankcardlend'
|
||
const { proxy } = getCurrentInstance()
|
||
const dateValue = ref({ startYear: 2000, endYear: new Date().getFullYear() + 5 })
|
||
const showYearValue = ref({ startShowYear: '', endShowYear: '' })
|
||
const updateStatisticYear = (startYear, endYear) => {
|
||
queryParams.value.time = [new Date(startYear, 0, 1), new Date(endYear, 0, 1)]
|
||
|
||
if (endYear - startYear > 10) {
|
||
ElMessage.warning('时间跨度不能大于10年，默认选择开始日期的10年')
|
||
queryParams.value.time = [new Date(startYear, 0, 1), new Date(startYear + 10, 0, 1)]
|
||
}
|
||
}
|
||
|
||
const dates = [
|
||
{ value: 1, label: '日' },
|
||
{ value: 2, label: '月' },
|
||
{ value: 3, label: '年' }
|
||
]
|
||
|
||
const loading = ref(true)
|
||
const total = ref(0)
|
||
const radioVal = ref('柱状图')
|
||
const repaymentOpen = ref(false)
|
||
|
||
const creditCardList = ref([])
|
||
const dateValidate = (rules, value, callback) => {
|
||
const dateType = rules.dateType || 'days'
|
||
const num = rules.num || 31
|
||
const dateString = rules.dateString || '天'
|
||
const message = rules.message || `时间跨度不能超过${num}${dateString}`
|
||
|
||
if (value && value.length === 2) {
|
||
const start = value[0]
|
||
const end = value[1]
|
||
if (dayjs(end).diff(dayjs(start), dateType) > num) {
|
||
queryParams.value.time = [start, dayjs(start).add(35, 'months')]
|
||
ElMessage.warning(message)
|
||
}
|
||
}
|
||
}
|
||
|
||
const data = reactive({
|
||
queryParams: {
|
||
type: 1,
|
||
time: null,
|
||
dataType: '3',
|
||
id: null,
|
||
state: null
|
||
},
|
||
queryCreditCardParams: {
|
||
pageNum: 1,
|
||
type: '3',
|
||
status: '1',
|
||
lendType: '1',
|
||
pageSize: 1000
|
||
},
|
||
rules: {
|
||
time: [{ validator: dateValidate, dateType: 'months', num: 35, dateRange: '月', message: '时间跨度不能大于36个月，默认选择开始日期的36个月' }]
|
||
},
|
||
repaymentForm: {
|
||
id: null,
|
||
bankCardLendName: '',
|
||
repaymentDate: '',
|
||
principal: 0,
|
||
interest: 0,
|
||
currentAmount: 0,
|
||
postingState: '1',
|
||
remark: ''
|
||
},
|
||
repaymentRules: {
|
||
repaymentDate: [{ required: true, message: '还款日期不能为空', trigger: 'blur' }],
|
||
principal: [{ required: true, message: '应还本金不能为空', trigger: 'blur' }],
|
||
interest: [{ required: true, message: '应还利息不能为空', trigger: 'blur' }],
|
||
postingState: [{ required: true, message: '还款状态不能为空', trigger: 'change' }]
|
||
}
|
||
})
|
||
|
||
const { queryParams, queryCreditCardParams, rules, repaymentForm, repaymentRules } = toRefs(data)
|
||
const handleCreditChange = (id) => {
|
||
queryParams.value.id = id
|
||
getList()
|
||
}
|
||
|
||
const today = new Date()
|
||
const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
|
||
// 当前月份的结束日期
|
||
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]
|
||
/** 查询信用卡卡管理列表 */
|
||
function getCreditCardList() {
|
||
listBankcardLend(queryCreditCardParams.value).then((response) => {
|
||
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 === 1) {
|
||
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 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) {
|
||
const today = new Date()
|
||
const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
|
||
const end = dayjs(start).add(35, 'months')
|
||
queryParams.value.time = [start, end]
|
||
} else if (type === 3) {
|
||
const today = new Date()
|
||
const startYear = today.getFullYear()
|
||
queryParams.value.time = [new Date(startYear, 0, 1), new Date(startYear + 10, 0, 1)]
|
||
showYearValue.value = { startShowYear: startYear, endShowYear: startYear + 10 }
|
||
}
|
||
getList()
|
||
}
|
||
|
||
const firstChooseDate = ref('')
|
||
const calendarChange = (val) => {
|
||
firstChooseDate.value = val[0].getTime()
|
||
if (val[1]) firstChooseDate.value = ''
|
||
}
|
||
|
||
const historyObj = ref({
|
||
unclearedDetailCount: '',
|
||
unClearedDetail: '',
|
||
dueDetail: '',
|
||
repaidDetail: '',
|
||
leftDetail: '',
|
||
historyDetailList: [],
|
||
tableHistoryDetailList: []
|
||
})
|
||
|
||
const chartData = ref({
|
||
name: [],
|
||
value1: []
|
||
})
|
||
|
||
// 计算属性：倒序后的表格数据
|
||
const reversedTableData = computed(() => {
|
||
if (historyObj.value.tableHistoryDetailList && historyObj.value.tableHistoryDetailList.length > 0) {
|
||
return [...historyObj.value.tableHistoryDetailList].reverse()
|
||
}
|
||
return []
|
||
})
|
||
|
||
// 按还款账户分组处理明细数据
|
||
const groupByRepaymentAccount = (detailList) => {
|
||
if (!detailList || detailList.length === 0) return []
|
||
|
||
const groups = {}
|
||
detailList.forEach((item) => {
|
||
const key = item.repaymentAccountName || '未指定账户'
|
||
if (!groups[key]) {
|
||
groups[key] = {
|
||
repaymentAccountName: item.repaymentAccountName,
|
||
repaymentAccountBalance: item.repaymentAccountBalance,
|
||
items: []
|
||
}
|
||
}
|
||
groups[key].items.push(item)
|
||
})
|
||
|
||
return Object.values(groups)
|
||
}
|
||
|
||
function getList() {
|
||
loading.value = true
|
||
chartData.value = { name: [], value1: [] }
|
||
const { type, time, dataType, id } = queryParams.value
|
||
let formatValue = 'YYYY-MM-DD'
|
||
if (type === 1) {
|
||
formatValue = 'YYYY-MM-DD'
|
||
} else if (type === 2) {
|
||
formatValue = 'YYYY-MM'
|
||
} else {
|
||
formatValue = 'YYYY'
|
||
}
|
||
const params = {
|
||
type,
|
||
startTime: time && time.length > 0 ? dayjs(time[0]).format(formatValue) : '',
|
||
endTime: time && time.length > 0 ? dayjs(time[1]).format(formatValue) : '',
|
||
id,
|
||
dataType
|
||
}
|
||
getInstallmentHistoryAnalysis(params).then((response) => {
|
||
loading.value = false
|
||
historyObj.value = { ...response.data }
|
||
historyObj.value.historyDetailList.map((item) => {
|
||
return {
|
||
name: item.time,
|
||
value: item.value
|
||
}
|
||
})
|
||
response.data.historyDetailList.map((item) => {
|
||
chartData.value.name.push(item.time)
|
||
chartData.value.value1.push(item.value)
|
||
})
|
||
handleRadioChange(currentType.value)
|
||
})
|
||
}
|
||
|
||
function handleQuery() {
|
||
getList()
|
||
}
|
||
|
||
function resetQuery() {
|
||
proxy.resetForm('queryRef')
|
||
queryParams.value.id = null
|
||
queryParams.value.dataType = '3'
|
||
total.value = 0
|
||
handleQuery()
|
||
}
|
||
|
||
const drawBar = (data) => {
|
||
if (document.getElementById('chartBar') === null) {
|
||
return
|
||
}
|
||
echarts.dispose(document.getElementById('chartBar'))
|
||
const myChart = echarts.init(document.getElementById('chartBar'))
|
||
|
||
const option = {
|
||
legend: {
|
||
// 图示例样式
|
||
show: true,
|
||
top: 50,
|
||
right: 50,
|
||
itemGap: 20
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
formatter: function (params) {
|
||
return params[0].name + '<br>' + '贷款待还金额：' + params[0].value + '元'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: data.name,
|
||
axisTick: {
|
||
alignWithLabel: true // 刻度线是否与标签对齐，默认false
|
||
},
|
||
// 设置 X 轴线条粗细
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 1, // 根据需求调整数值大小，单位是像素
|
||
color: '#999'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false // 默认为true，如果要隐藏，则改为 false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#999'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
data: data.value1,
|
||
type: 'bar',
|
||
barWidth: 20, // 根据需求调整数值大小，单位是像素
|
||
itemStyle: {
|
||
color: '#2283cf'
|
||
}
|
||
}
|
||
],
|
||
// 添加点击事件的处理函数
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: '#2283cf',
|
||
barWidth: 20 // 根据需求调整数值大小，单位是像素
|
||
},
|
||
barWidth: 24 // 根据需求调整数值大小，单位是像素
|
||
}
|
||
}
|
||
|
||
myChart.setOption(option)
|
||
}
|
||
|
||
const drawLine = (data) => {
|
||
if (document.getElementById('chartLine') === null) {
|
||
return
|
||
}
|
||
echarts.dispose(document.getElementById('chartLine'))
|
||
const myChart = echarts.init(document.getElementById('chartLine'))
|
||
|
||
const option = {
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
formatter: function (params) {
|
||
return params[0].name + '<br>' + '贷款待还金额' + params[0].value + '元'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.name,
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: data.value1,
|
||
type: 'line',
|
||
lineStyle: {
|
||
color: '#4181c9'
|
||
},
|
||
itemStyle: {
|
||
color: '#4181c9'
|
||
},
|
||
smooth: true,
|
||
symbol: 'emptyCircle',
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(65,129,201, 0.70)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(65,129,201, 0.10)'
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: 'rgba(65,129,201, 0.10)',
|
||
shadowBlur: 10
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
myChart.setOption(option)
|
||
}
|
||
|
||
const currentType = ref('柱状图')
|
||
const handleRadioChange = (type) => {
|
||
currentType.value = type
|
||
switch (type) {
|
||
case '柱状图':
|
||
drawBar(chartData.value)
|
||
break
|
||
case '折线图':
|
||
drawLine(chartData.value)
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
}
|
||
|
||
/** 还款按钮操作 */
|
||
function handleRepayment(item) {
|
||
repaymentForm.value = {
|
||
id: item.id,
|
||
bankCardLendName: item.bankCardLendName,
|
||
repaymentDate: dayjs(new Date().getTime()).format('YYYY-MM-DD'),
|
||
principal: item.principal,
|
||
interest: item.interest,
|
||
currentAmount: item.currentAmount,
|
||
postingState: '1',
|
||
remark: ''
|
||
}
|
||
repaymentOpen.value = true
|
||
}
|
||
|
||
/** 计算合计金额 */
|
||
function calculateTotalAmount() {
|
||
const principal = parseFloat(repaymentForm.value.principal) || 0
|
||
const interest = parseFloat(repaymentForm.value.interest) || 0
|
||
repaymentForm.value.currentAmount = (principal + interest).toFixed(2)
|
||
}
|
||
|
||
/** 提交还款 */
|
||
function submitRepayment() {
|
||
proxy.$refs.repaymentFormRef.validate((valid) => {
|
||
if (valid) {
|
||
proxy.$modal
|
||
.confirm('是否确认已还款？')
|
||
.then(function () {
|
||
// TODO: 这里需要调用后端接口更新还款状态
|
||
// 示例: return updateInstallmentDetail(repaymentForm.value)
|
||
proxy.$modal.msgSuccess('还款成功')
|
||
repaymentOpen.value = false
|
||
getList() // 刷新列表
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
})
|
||
}
|
||
|
||
getCreditCardList()
|
||
getList()
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main-con {
|
||
height: calc(100vh - 200px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.summary-con {
|
||
gap: 0.14rem !important;
|
||
justify-content: flex-start !important;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 0.08rem !important;
|
||
flex-shrink: 0;
|
||
|
||
.center-con {
|
||
flex: 1 1 calc(25% - 0.105rem);
|
||
min-width: 2.6rem;
|
||
max-width: calc(25% - 0.105rem);
|
||
list-style: none !important;
|
||
|
||
&::before,
|
||
&::after {
|
||
display: none !important;
|
||
content: none !important;
|
||
}
|
||
}
|
||
|
||
.item-wrap {
|
||
list-style: none !important;
|
||
|
||
&::before,
|
||
&::after {
|
||
display: none !important;
|
||
content: none !important;
|
||
}
|
||
|
||
.num,
|
||
.title {
|
||
&::before,
|
||
&::after {
|
||
display: none !important;
|
||
content: none !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon-box {
|
||
&::before,
|
||
&::after {
|
||
display: none !important;
|
||
content: none !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-con {
|
||
margin-top: 0 !important;
|
||
padding-top: 0.08rem !important;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.content-con {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
|
||
.chart {
|
||
flex: 1;
|
||
min-height: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.el-table {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
// 响应式优化
|
||
@media (max-width: 1600px) {
|
||
.summary-con {
|
||
.center-con {
|
||
flex: 1 1 calc(33.333% - 0.093rem);
|
||
max-width: calc(33.333% - 0.093rem);
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.summary-con {
|
||
.center-con {
|
||
flex: 1 1 calc(50% - 0.07rem);
|
||
max-width: calc(50% - 0.07rem);
|
||
min-width: 2.4rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.summary-con {
|
||
.center-con {
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|