212 lines
7.5 KiB
Vue
212 lines
7.5 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="ratioChartOption" autoresize />
|
||
</div>
|
||
|
||
<div class="px-4 pb-4 space-y-4">
|
||
<!-- 基础信息 -->
|
||
<div>
|
||
<LTitle title="基础信息" />
|
||
<div class="mt-4 border border-gray-200 rounded-lg overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="bg-[#5d7eeb] text-white">
|
||
<div class="grid grid-cols-2 text-base">
|
||
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">
|
||
指标</div>
|
||
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">数值</div>
|
||
</div>
|
||
</div>
|
||
<!-- 数据行 -->
|
||
<div class="bg-white">
|
||
<div v-for="(row, idx) in basicInfoRows" :key="row.label"
|
||
:class="['grid grid-cols-2 text-base', idx < basicInfoRows.length - 1 ? 'border-b border-gray-200' : '']">
|
||
<div
|
||
class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
|
||
{{ row.label }}</div>
|
||
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
|
||
{{ row.value }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 近期查贷比（查验次数 / 借款次数） -->
|
||
<div>
|
||
<div class="mb-4 border border-gray-200 rounded-lg overflow-hidden">
|
||
<!-- 表头 -->
|
||
<div class="bg-[#5d7eeb] text-white">
|
||
<div class="grid grid-cols-2 text-base">
|
||
<div class="py-3 px-4 text-left font-semibold border-r border-white whitespace-nowrap">
|
||
指标</div>
|
||
<div class="py-3 px-4 text-center font-semibold whitespace-nowrap">数值</div>
|
||
</div>
|
||
</div>
|
||
<!-- 数据行 -->
|
||
<div class="bg-white">
|
||
<div v-for="(row, idx) in ratioRows" :key="row.label"
|
||
:class="['grid grid-cols-2 text-base', idx < ratioRows.length - 1 ? 'border-b border-gray-200' : '']">
|
||
<div
|
||
class="py-3 px-4 font-medium text-gray-800 border-r border-gray-200 whitespace-nowrap">
|
||
{{ row.label }}</div>
|
||
<div class="py-3 px-4 text-center text-[#333333] font-semibold whitespace-nowrap">
|
||
{{ formatRatio(row.value) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基础信息与查贷比解读 -->
|
||
<Remark :content="basicInfoRemark" title="报告解读" :default-expanded="true" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import LTitle from '@/components/LTitle.vue'
|
||
import Remark from '@/components/Remark.vue'
|
||
import VChart from 'vue-echarts'
|
||
import { use } from 'echarts/core'
|
||
import { CanvasRenderer } from 'echarts/renderers'
|
||
import { BarChart } from 'echarts/charts'
|
||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
||
import { normalizeValue, getBasicInfoRemark } from '../utils/dataParser'
|
||
|
||
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
|
||
const data = computed(() => props.data || {})
|
||
|
||
const flagText = computed(() => {
|
||
const v = data.value.flag
|
||
if (v === 1 || v === '1') return '查得'
|
||
if (v === 0 || v === '0') return '查无'
|
||
return '-'
|
||
})
|
||
|
||
const flagDbText = computed(() => {
|
||
const v = data.value.flagdb
|
||
if (v === 1 || v === '1') return '库有'
|
||
if (v === 0 || v === '0') return '库无'
|
||
return '-'
|
||
})
|
||
|
||
// 基础信息数据行
|
||
const basicInfoRows = computed(() => {
|
||
const v = data.value
|
||
return [
|
||
{ label: '查得标识', value: flagText.value },
|
||
{ label: '库有标识', value: flagDbText.value },
|
||
{ label: '历史银行卡数', value: normalizeValue(v.ppcm_history_cardnum) },
|
||
{ label: '当前活跃银行卡数', value: normalizeValue(v.ppcm_recent_cardnum) },
|
||
{ label: '历史手机号数', value: normalizeValue(v.ppcm_history_cellnum) },
|
||
{ label: '当前活跃手机号数', value: normalizeValue(v.ppcm_recent_cellnum) }
|
||
]
|
||
})
|
||
|
||
const ratioRows = computed(() => {
|
||
const v = data.value
|
||
return [
|
||
{ label: '近1个月查贷比', value: normalizeValue(v.ppcm_m1_qy_rep_ratio) },
|
||
{ label: '近3个月查贷比', value: normalizeValue(v.ppcm_m3_qy_rep_ratio) },
|
||
{ label: '近6个月查贷比', value: normalizeValue(v.ppcm_m6_qy_rep_ratio) },
|
||
{ label: '近1年查贷比', value: normalizeValue(v.ppcm_m12_qy_rep_ratio) }
|
||
]
|
||
})
|
||
|
||
const formatRatio = (v) => {
|
||
if (!v) return '-'
|
||
return v.toFixed ? v.toFixed(2) : v
|
||
}
|
||
// 查贷比柱状图配置
|
||
const ratioChartOption = computed(() => {
|
||
const labels = ratioRows.value.map(r => r.label)
|
||
const values = ratioRows.value.map(r => r.value || 0)
|
||
|
||
return {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' },
|
||
formatter(params) {
|
||
const p = params[0]
|
||
if (!p) return ''
|
||
return `${p.name}<br/>查贷比：${formatRatio(p.value)}`
|
||
}
|
||
},
|
||
grid: {
|
||
left: '6%',
|
||
right: '6%',
|
||
top: 20,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: labels,
|
||
axisLabel: {
|
||
fontSize: 16,
|
||
color: '#6b7280'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#e5e7eb'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
fontSize: 16,
|
||
color: '#6b7280'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#f3f4f6'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '查贷比',
|
||
type: 'bar',
|
||
data: values,
|
||
barWidth: '35%',
|
||
barMinHeight: 3,
|
||
itemStyle: {
|
||
color: '#2B79EE',
|
||
borderRadius: [4, 4, 0, 0]
|
||
}
|
||
}
|
||
]
|
||
}
|
||
})
|
||
|
||
// 基础信息与查贷比解读
|
||
const basicInfoRemark = computed(() => getBasicInfoRemark(data.value))
|
||
</script>
|
||
|
||
<style scoped>
|
||
.card {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|