team/report_viewer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
18278715334
2025-12-18 15:39:43 +08:00
parent d576d8e734
commit 0190e21287
48 changed files with 41428 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/ui/JRZQ7F1A/components/ApplyReportSection.vue
View File

@@ -6,7 +6,7 @@
</div>
<span class="font-bold text-gray-800">申请行为详情</span>
</div>
<span class="text-sm text-gray-500 mb-2 mx-4">0-1之间指数越大用户逾期可能性越高</span>
<div class="p-4">
<!-- 核心指标 -->
<div class="grid grid-cols-2 gap-4 mb-6">
@@ -29,7 +29,7 @@
<!-- 申请命中情况 -->
<LTitle title="申请命中情况" />
<div class="grid grid-cols-2 gap-4 mb-6 mt-3">
<div class="grid grid-cols-1 gap-4 mb-6 mt-3">
<div class="bg-gray-50 rounded-lg p-3">
<div class="text-sm text-gray-600 mb-1">申请命中机构数</div>
<div class="text-lg font-bold text-gray-800">{{ getValue(data.A22160003, '0') }} 家</div>
@@ -59,17 +59,17 @@
</div>
<div class="grid grid-cols-3 gap-3">
<div class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE8F]">
<div class="text-xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160008, '0') }}</div>
<div class="text-xs text-gray-600">近1个月查询笔数</div>
<div class="bg-blue-50 rounded-lg px-3 py-6 text-center border border-[#2B79EE8F]">
<div class="text-3xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160008, '0') }}</div>
<div class="text-sm text-gray-600">近1个月查询笔数</div>
</div>
<div class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE8F]">
<div class="text-xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160009, '0') }}</div>
<div class="text-xs text-gray-600">近3个月查询笔数</div>
<div class="bg-blue-50 rounded-lg px-3 py-6 text-center border border-[#2B79EE8F]">
<div class="text-3xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160009, '0') }}</div>
<div class="text-sm text-gray-600">近3个月查询笔数</div>
</div>
<div class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE8F]">
<div class="text-xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160010, '0') }}</div>
<div class="text-xs text-gray-600">近6个月查询笔数</div>
<div class="bg-blue-50 rounded-lg px-3 py-6 text-center border border-[#2B79EE8F]">
<div class="text-3xl font-bold text-[#2B79EE] mb-1">{{ getValue(data.A22160010, '0') }}</div>
<div class="text-sm text-gray-600">近6个月查询笔数</div>
</div>
</div>
@@ -197,7 +197,7 @@ const applyScoreGaugeOption = computed(() => {
axisLabel: {
show: true,
distance: -18,
fontSize: 10,
fontSize: 12,
color: '#666',
formatter: function(value) {
if (value === 0) return '0'
@@ -318,7 +318,7 @@ const applyConfidenceGaugeOption = computed(() => {
axisLabel: {
show: true,
distance: -15,
fontSize: 11,
fontSize: 12,
color: '#666',
formatter: function(value) {
// 将百分比映射回置信度值
@@ -413,7 +413,7 @@ const queryTrendChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 12,
color: '#6b7280',
formatter: '{value} 次'
},
@@ -441,7 +441,7 @@ const queryTrendChartOption = computed(() => {
label: {
show: true,
position: 'top',
fontSize: 11,
fontSize: 12,
color: '#333'
}
}

34
src/ui/JRZQ7F1A/components/BehaviorReportSection.vue
View File

@@ -237,17 +237,17 @@
<div class="text-sm font-medium text-gray-700 mb-3">M0+逾期</div>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-xs text-gray-600">近6个月</span>
<span class="text-sm text-gray-600">近6个月</span>
<span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170025, '0') }}
笔</span>
</div>
<div class="flex justify-between">
<span class="text-xs text-gray-600">近12个月</span>
<span class="text-sm text-gray-600">近12个月</span>
<span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170026, '0') }}
笔</span>
</div>
<div class="flex justify-between">
<span class="text-xs text-gray-600">近24个月</span>
<span class="text-sm text-gray-600">近24个月</span>
<span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170027, '0') }}
笔</span>
</div>
@@ -259,17 +259,17 @@
<div class="text-sm font-medium text-gray-700 mb-3">M1+逾期</div>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-xs text-gray-600">近6个月</span>
<span class="text-sm text-gray-600">近6个月</span>
<span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170028, '0') }}
笔</span>
</div>
<div class="flex justify-between">
<span class="text-xs text-gray-600">近12个月</span>
<span class="text-sm text-gray-600">近12个月</span>
<span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170029, '0') }}
笔</span>
</div>
<div class="flex justify-between">
<span class="text-xs text-gray-600">近24个月</span>
<span class="text-sm text-gray-600">近24个月</span>
<span class="text-sm font-bold text-[#EB3C3C]">{{ getValue(data.B22170030, '0') }}
笔</span>
</div>
@@ -516,7 +516,7 @@ const behaviorScoreGaugeOption = computed(() => {
axisLabel: {
show: true,
distance: -18,
fontSize: 10,
fontSize: 12,
color: '#666',
formatter: function (value) {
if (value === 0) return '0'
@@ -637,7 +637,7 @@ const behaviorConfidenceGaugeOption = computed(() => {
axisLabel: {
show: true,
distance: -15,
fontSize: 11,
fontSize: 12,
color: '#666',
formatter: function (value) {
// 将百分比映射回置信度值
@@ -722,7 +722,7 @@ const loanTrendChartOption = computed(() => {
type: 'category',
data: periods,
axisLabel: {
fontSize: 11,
fontSize: 12,
color: '#6b7280',
rotate: 15
},
@@ -735,7 +735,7 @@ const loanTrendChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 12,
color: '#6b7280',
formatter: '{value} 笔'
},
@@ -763,7 +763,7 @@ const loanTrendChartOption = computed(() => {
label: {
show: true,
position: 'top',
fontSize: 11,
fontSize: 12,
color: '#333'
}
}
@@ -829,7 +829,7 @@ const overdueComparisonChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 12,
color: '#6b7280',
formatter: '{value} 笔'
},
@@ -857,7 +857,7 @@ const overdueComparisonChartOption = computed(() => {
label: {
show: true,
position: 'top',
fontSize: 11,
fontSize: 12,
color: '#333'
}
},
@@ -878,7 +878,7 @@ const overdueComparisonChartOption = computed(() => {
label: {
show: true,
position: 'top',
fontSize: 11,
fontSize: 12,
color: '#333'
}
}
@@ -921,7 +921,7 @@ const amountDistributionChartOption = computed(() => {
type: 'category',
data: categories,
axisLabel: {
fontSize: 11,
fontSize: 12,
color: '#6b7280'
},
axisLine: {
@@ -933,7 +933,7 @@ const amountDistributionChartOption = computed(() => {
yAxis: {
type: 'value',
axisLabel: {
fontSize: 11,
fontSize: 12,
color: '#6b7280',
formatter: '{value} 笔'
},
@@ -961,7 +961,7 @@ const amountDistributionChartOption = computed(() => {
label: {
show: true,
position: 'top',
fontSize: 11,
fontSize: 12,
color: '#333'
}
}

456
src/ui/JRZQ7F1A/components/BigDataReportSection.vue Normal file
View File

@@ -0,0 +1,456 @@
<template>
<div class="big-data-report-section bg-white rounded-lg border border-gray-200">
<div class="flex items-center p-4">
<div class="w-8 h-8 flex items-center justify-center mr-2">
<img src="@/assets/images/report/gl.png" alt="大数据详情" class="w-8 h-8 object-contain" />
</div>
<span class="font-bold text-gray-800">大数据详情</span>
</div>
<div class="p-4">
<!-- 网络贷款类信用 -->
<LTitle title="网络贷款类信用" />
<div class="mt-3 mb-6">
<div class="space-y-4 mb-4">
<!-- 网贷授信额度 -->
<div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4 text-center">
<div class="text-xl font-bold text-[#2B79EE] mb-1">
{{ formatCreditAmount(data.C22180001) }}
</div>
<div class="text-sm font-medium text-gray-700 mb-1">网贷授信额度</div>
</div>
<!-- 网贷额度置信度 -->
<div class="rounded-lg border border-[#2B79EE8F] bg-[#2B79EE1A] p-4">
<div class="text-sm font-medium text-gray-700 mb-2 text-center">网贷额度置信度</div>
<div class="h-40">
<v-chart class="chart-container" :option="p2pConfidenceGaugeOption" autoresize />
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 space-y-3">
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">网络贷款类机构数</span>
<span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180003, '0') }} 家</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">网络贷款类产品数</span>
<span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180004, '0') }} 个</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">网络贷款机构最大授信额度</span>
<span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180005) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">网络贷款机构平均授信额度</span>
<span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180006) }}</span>
</div>
</div>
<!-- 授信额度对比图 -->
<div class="mb-6">
<LTitle title="授信额度对比" />
<div class="h-64 mt-3">
<v-chart class="chart-container" :option="creditAmountChartOption" autoresize />
</div>
</div>
</div>
<!-- 消金贷款类信用 -->
<LTitle title="消金贷款类信用" />
<div class="mt-3 mb-6">
<div class="space-y-4 mb-4">
<!-- 消金建议授信额度 -->
<div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-4 text-center">
<div class="text-xl font-bold text-[#1FBE5D] mb-1">
{{ formatCreditAmount(data.C22180011) }}
</div>
<div class="text-sm font-medium text-gray-700 mb-1">消金建议授信额度</div>
</div>
<!-- 消金额度置信度 -->
<div class="rounded-lg border border-[#1FBE5D8F] bg-[#1FBE5D1A] p-4">
<div class="text-sm font-medium text-gray-700 mb-2 text-center">消金额度置信度</div>
<div class="h-40">
<v-chart class="chart-container" :option="consumerConfidenceGaugeOption" autoresize />
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 space-y-3">
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">消金贷款类机构数</span>
<span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180007, '0') }} 家</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">消金贷款类产品数</span>
<span class="text-lg font-bold text-gray-800">{{ getValue(data.C22180008, '0') }} 个</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">消金贷款类机构最大授信额度</span>
<span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180009) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">消金贷款类机构平均授信额度</span>
<span class="text-lg font-bold text-gray-800">{{ formatCreditAmount(data.C22180010) }}</span>
</div>
</div>
</div>
</div>
<!-- 温馨提示 -->
<Remark
content="大数据详情展示申请人在网络贷款和消金贷款领域的授信情况，包括授信额度、机构数、产品数等指标。授信额度反映了金融机构对申请人信用状况的评估，额度越高通常表示信用状况越好。建议关注授信额度置信度，置信度越高表示评估结果越可靠。同时需要结合申请人的实际借贷行为和还款记录进行综合评估。" />
</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, GaugeChart } from 'echarts/charts'
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
} from 'echarts/components'
import { formatCreditAmount, formatConfidence, getValue } from '../utils/formatUtils'
// 注册ECharts组件
use([
CanvasRenderer,
BarChart,
GaugeChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
])
const props = defineProps({
data: {
type: Object,
default: () => ({})
}
})
// 网贷额度置信度仪表盘配置（50-100）
const p2pConfidenceGaugeOption = computed(() => {
const confidence = parseInt(getValue(props.data.C22180002, '0')) || 0
const percentage = confidence >= 50 ? ((confidence - 50) / 50) * 100 : 0
// 根据置信度确定颜色
let color = '#2B79EE' // 蓝色 - 高置信度
if (confidence < 60) {
color = '#faad14' // 黄色 - 中等置信度
} else if (confidence < 70) {
color = '#fa8c16' // 橙色 - 较低置信度
}
return {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
radius: '90%',
center: ['50%', '75%'],
itemStyle: {
color: color,
shadowBlur: 6,
shadowColor: color,
},
progress: {
show: true,
width: 18,
roundCap: true,
},
axisLine: {
roundCap: true,
lineStyle: {
width: 18,
color: [
[percentage / 100, color],
[1, '#e5e7eb']
]
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 24,
fontWeight: 'bold',
color: color,
offsetCenter: [0, '-5%'],
formatter: '{value}%',
rich: {
value: {
fontSize: 24,
fontWeight: 'bold',
color: color,
lineHeight: 28
}
}
},
data: [
{
value: percentage
}
],
title: {
fontSize: 14,
color: '#666',
offsetCenter: [0, '25%'],
formatter: () => `${confidence}%`
}
}
]
}
})
// 消金额度置信度仪表盘配置（50-100）
const consumerConfidenceGaugeOption = computed(() => {
const confidence = parseInt(getValue(props.data.C22180012, '0')) || 0
const percentage = confidence >= 50 ? ((confidence - 50) / 50) * 100 : 0
// 根据置信度确定颜色
let color = '#1FBE5D' // 绿色 - 高置信度
if (confidence < 60) {
color = '#faad14' // 黄色 - 中等置信度
} else if (confidence < 70) {
color = '#fa8c16' // 橙色 - 较低置信度
}
return {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
radius: '90%',
center: ['50%', '75%'],
itemStyle: {
color: color,
shadowBlur: 6,
shadowColor: color,
},
progress: {
show: true,
width: 18,
roundCap: true,
},
axisLine: {
roundCap: true,
lineStyle: {
width: 18,
color: [
[percentage / 100, color],
[1, '#e5e7eb']
]
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 24,
fontWeight: 'bold',
color: color,
offsetCenter: [0, '-5%'],
formatter: '{value}%',
rich: {
value: {
fontSize: 24,
fontWeight: 'bold',
color: color,
lineHeight: 28
}
}
},
data: [
{
value: percentage
}
],
title: {
fontSize: 14,
color: '#666',
offsetCenter: [0, '25%'],
formatter: () => `${confidence}%`
}
}
]
}
})
// 授信额度对比图配置
const creditAmountChartOption = computed(() => {
const categories = ['网贷', '消金']
const maxData = [
parseInt(getValue(props.data.C22180005, '0')) || 0,
parseInt(getValue(props.data.C22180009, '0')) || 0
]
const avgData = [
parseInt(getValue(props.data.C22180006, '0')) || 0,
parseInt(getValue(props.data.C22180010, '0')) || 0
]
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
let result = params[0].name + '<br/>'
params.forEach(item => {
const value = item.value >= 10000
? `${(item.value / 10000).toFixed(2)}万元`
: `${item.value}元`
result += `${item.seriesName}: ${value}<br/>`
})
return result
}
},
legend: {
data: ['最大授信额度', '平均授信额度'],
top: '5%',
textStyle: {
fontSize: 12
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '20%',
containLabel: true
},
xAxis: {
type: 'category',
data: categories,
axisLabel: {
fontSize: 12,
color: '#6b7280'
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: 12,
color: '#6b7280',
formatter: function (value) {
if (value >= 10000) {
return `${(value / 10000).toFixed(1)}万`
}
return value
}
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
},
series: [
{
name: '最大授信额度',
type: 'bar',
data: maxData,
barWidth: '30%',
itemStyle: {
color: '#2B79EE',
borderRadius: [4, 4, 0, 0]
},
emphasis: {
itemStyle: {
color: '#1e5bb8'
}
},
label: {
show: true,
position: 'top',
fontSize: 12,
color: '#333',
formatter: function (params) {
const value = params.value
return value >= 10000
? `${(value / 10000).toFixed(1)}万`
: value
}
}
},
{
name: '平均授信额度',
type: 'bar',
data: avgData,
barWidth: '30%',
itemStyle: {
color: '#1FBE5D',
borderRadius: [4, 4, 0, 0]
},
emphasis: {
itemStyle: {
color: '#179e4d'
}
},
label: {
show: true,
position: 'top',
fontSize: 12,
color: '#333',
formatter: function (params) {
const value = params.value
return value >= 10000
? `${(value / 10000).toFixed(1)}万`
: value
}
}
}
]
}
})
</script>
<style scoped>
.chart-container {
width: 100%;
height: 100%;
}
</style>