323 lines
12 KiB
Vue
323 lines
12 KiB
Vue
<template>
|
|
<div class="card rounded-lg border border-gray-200 mb-2">
|
|
<div class="mt-4">
|
|
<LTitle title="借款与逾期概览" />
|
|
|
|
<!-- 借款次数汇总图 -->
|
|
<div class="h-64 px-2 mb-4">
|
|
<v-chart class="chart-container" :option="loanChartOption" autoresize />
|
|
</div>
|
|
|
|
<!-- 逾期次数汇总图 -->
|
|
<div class="h-64 px-2 mb-4">
|
|
<v-chart class="chart-container" :option="overdueChartOption" autoresize />
|
|
</div>
|
|
|
|
<div class="mb-4 mt-4 space-y-4">
|
|
<!-- 借款次数 / 机构数 -->
|
|
<div>
|
|
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
|
|
<!-- 表头 -->
|
|
<div class="bg-[#5d7eeb] text-white">
|
|
<div class="grid grid-cols-6 text-sm">
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
|
|
</div>
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">银行
|
|
</div>
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">消费金融
|
|
</div>
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">其他机构
|
|
</div>
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">总次数
|
|
</div>
|
|
<div class="py-3 text-center font-semibold whitespace-nowrap">机构数</div>
|
|
</div>
|
|
</div>
|
|
<!-- 数据行 -->
|
|
<div class="bg-white">
|
|
<div v-for="(row, idx) in loanRows" :key="row.key"
|
|
:class="['grid grid-cols-6 text-sm', idx < loanRows.length - 1 ? 'border-b border-gray-200' : '']">
|
|
<div
|
|
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.label }}</div>
|
|
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.bank }}</div>
|
|
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.fin }}</div>
|
|
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.other }}</div>
|
|
<div
|
|
class="py-3 text-center text-[#333333] font-semibold border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.total }}</div>
|
|
<div class="py-3 text-center text-[#333333] whitespace-nowrap">{{ row.orgTotal }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 借款等级 -->
|
|
<div>
|
|
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
|
|
<!-- 表头 -->
|
|
<div class="bg-[#5d7eeb] text-white">
|
|
<div class="grid grid-cols-2 text-sm">
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
|
|
</div>
|
|
<div class="py-3 text-center font-semibold whitespace-nowrap">综合借款等级</div>
|
|
</div>
|
|
</div>
|
|
<!-- 数据行 -->
|
|
<div class="bg-white">
|
|
<div v-for="(row, idx) in loanAmtRows" :key="row.key"
|
|
:class="['grid grid-cols-2 text-sm', idx < loanAmtRows.length - 1 ? 'border-b border-gray-200' : '']">
|
|
<div
|
|
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.label }}</div>
|
|
<div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{ row.amt
|
|
}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 逾期次数与等级 -->
|
|
<div>
|
|
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden mx-4">
|
|
<!-- 表头 -->
|
|
<div class="bg-[#5d7eeb] text-white">
|
|
<div class="grid grid-cols-4 text-sm">
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">周期
|
|
</div>
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">逾期次数
|
|
</div>
|
|
<div class="py-3 text-center font-semibold border-r border-white whitespace-nowrap">
|
|
逾期机构数</div>
|
|
<div class="py-3 text-center font-semibold whitespace-nowrap">逾期等级</div>
|
|
</div>
|
|
</div>
|
|
<!-- 数据行 -->
|
|
<div class="bg-white">
|
|
<div v-for="(row, idx) in overdueRows" :key="row.key"
|
|
:class="['grid grid-cols-4 text-sm', idx < overdueRows.length - 1 ? 'border-b border-gray-200' : '']">
|
|
<div
|
|
class="py-3 text-center font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.label }}</div>
|
|
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.num }}</div>
|
|
<div class="py-3 text-center text-[#333333] border-r border-gray-200 whitespace-nowrap">
|
|
{{ row.org }}</div>
|
|
<div class="py-3 text-center text-[#333333] font-semibold whitespace-nowrap">{{
|
|
row.level }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import LTitle from '@/components/LTitle.vue'
|
|
import VChart from 'vue-echarts'
|
|
import { use } from 'echarts/core'
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
import { BarChart } from 'echarts/charts'
|
|
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
|
|
import { PERIODS, normalizeValue } from '../utils/dataParser'
|
|
|
|
use([CanvasRenderer, BarChart, GridComponent, LegendComponent, TooltipComponent])
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
// 借款次数与机构数
|
|
const loanRows = computed(() => {
|
|
const v = props.data || {}
|
|
return PERIODS.map(p => {
|
|
const prefix = `ppcm_${p.key}`
|
|
return {
|
|
key: p.key,
|
|
label: p.label,
|
|
bank: normalizeValue(v[`${prefix}_bank_loannum`]),
|
|
fin: normalizeValue(v[`${prefix}_nbank_fin_loannum`]),
|
|
other: normalizeValue(v[`${prefix}_nbank_other_loannum`]),
|
|
total: normalizeValue(v[`${prefix}_loannum`]),
|
|
orgTotal: normalizeValue(v[`${prefix}_loanorg`])
|
|
}
|
|
})
|
|
})
|
|
|
|
// 借款等级 ppcm_{period}_loanamt
|
|
const loanAmtRows = computed(() => {
|
|
const v = props.data || {}
|
|
return PERIODS.map(p => {
|
|
const prefix = `ppcm_${p.key}`
|
|
return {
|
|
key: p.key,
|
|
label: p.label,
|
|
amt: normalizeValue(v[`${prefix}_loanamt`])
|
|
}
|
|
})
|
|
})
|
|
|
|
// 逾期次数 / 机构数 / 等级
|
|
const overdueRows = computed(() => {
|
|
const v = props.data || {}
|
|
const periodKeys = ['d7', 'm1', 'm3', 'm6', 'm12', 'm24']
|
|
const labelMap = {
|
|
d7: '近7天',
|
|
m1: '近1个月',
|
|
m3: '近3个月',
|
|
m6: '近6个月',
|
|
m12: '近1年',
|
|
m24: '近2年'
|
|
}
|
|
return periodKeys.map(key => {
|
|
const prefix = `ppcm_${key}`
|
|
return {
|
|
key,
|
|
label: labelMap[key],
|
|
num: normalizeValue(v[`${prefix}_overnum`]),
|
|
org: normalizeValue(v[`${prefix}_overorg`]),
|
|
level: normalizeValue(v[`${prefix}_overamt`])
|
|
}
|
|
})
|
|
})
|
|
|
|
// 借款次数汇总柱状图（总借款次数）
|
|
const loanChartOption = computed(() => {
|
|
const labels = PERIODS.map(p => p.label)
|
|
const totals = loanRows.value.map(r => r.total)
|
|
|
|
return {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' }
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: 20,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: labels,
|
|
axisLabel: {
|
|
fontSize: 12,
|
|
color: '#6b7280'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#e5e7eb'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
fontSize: 12,
|
|
color: '#6b7280',
|
|
formatter: '{value} 次'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#f3f4f6'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '总借款次数',
|
|
type: 'bar',
|
|
data: totals,
|
|
barWidth: '35%',
|
|
barMinHeight: 3,
|
|
itemStyle: {
|
|
color: '#60A5FA',
|
|
borderRadius: [4, 4, 0, 0]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
})
|
|
|
|
// 逾期次数汇总柱状图
|
|
const overdueChartOption = computed(() => {
|
|
const labels = overdueRows.value.map(r => r.label)
|
|
const nums = overdueRows.value.map(r => r.num)
|
|
|
|
return {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' }
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: 20,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: labels,
|
|
axisLabel: {
|
|
fontSize: 12,
|
|
color: '#6b7280'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#e5e7eb'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
fontSize: 12,
|
|
color: '#6b7280',
|
|
formatter: '{value} 次'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#f3f4f6'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '逾期次数',
|
|
type: 'bar',
|
|
data: nums,
|
|
barWidth: '35%',
|
|
barMinHeight: 3,
|
|
itemStyle: {
|
|
color: '#F97316',
|
|
borderRadius: [4, 4, 0, 0]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|