新增:JRZQ6F2A借贷申请组件
This commit is contained in:
@@ -552,7 +552,12 @@ const featureMap = {
|
|||||||
component: defineAsyncComponent(() => import("@/ui/YYSY7D3E/index.vue")),
|
component: defineAsyncComponent(() => import("@/ui/YYSY7D3E/index.vue")),
|
||||||
remark: '手机携号转网查询用于检测用户手机号码是否发生过携号转网操作,以及转网前后的运营商信息。携号转网可能影响用户身份验证和信用评估。'
|
remark: '手机携号转网查询用于检测用户手机号码是否发生过携号转网操作,以及转网前后的运营商信息。携号转网可能影响用户身份验证和信用评估。'
|
||||||
},
|
},
|
||||||
|
// 借贷意向A
|
||||||
|
JRZQ6F2A: {
|
||||||
|
name: "借贷申请",
|
||||||
|
component: defineAsyncComponent(() => import("@/ui/JRZQ6F2A/index.vue")),
|
||||||
|
remark: '借贷申请提供全面的借贷申请行为分析,包括申请次数、申请总次数(银行+非银)和申请机构总数(银行+非银)等多维度数据。通过不同时间段的统计分析,全面展示申请人的借贷申请行为。'
|
||||||
|
},
|
||||||
// 手机在网时长
|
// 手机在网时长
|
||||||
YYSY8B1C: {
|
YYSY8B1C: {
|
||||||
name: "手机在网时长",
|
name: "手机在网时长",
|
||||||
@@ -641,6 +646,7 @@ const featureRiskLevels = {
|
|||||||
'JRZQ0A03': 7, // 借贷申请记录
|
'JRZQ0A03': 7, // 借贷申请记录
|
||||||
'JRZQ8203': 7, // 借贷行为记录
|
'JRZQ8203': 7, // 借贷行为记录
|
||||||
'JRZQ4B6C': 7, // 信贷表现
|
'JRZQ4B6C': 7, // 信贷表现
|
||||||
|
'JRZQ6F2A': 7, // 借贷申请
|
||||||
'BehaviorRiskScan': 7, // 风险行为扫描
|
'BehaviorRiskScan': 7, // 风险行为扫描
|
||||||
'IVYZ8I9J': 7, // 网络社交异常
|
'IVYZ8I9J': 7, // 网络社交异常
|
||||||
'JRZQ8A2D': 9, // 特殊名单验证
|
'JRZQ8A2D': 9, // 特殊名单验证
|
||||||
|
|||||||
240
src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
Normal file
240
src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
Normal file
@@ -0,0 +1,240 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card application-count-section">
|
||||||
|
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||||||
|
<div class="mt-4">
|
||||||
|
<!-- 申请次数时间分布图表 -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<LTitle title="申请次数时间分布" />
|
||||||
|
<div class="h-64">
|
||||||
|
<v-chart class="chart-container" :option="chartOption" autoresize />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 特殊时段申请次数(周末/夜间),去掉 Tab,直接展示一张柱状图 -->
|
||||||
|
<div class="mb-2">
|
||||||
|
<LTitle title="特殊时段申请次数(周末 / 夜间)" />
|
||||||
|
<div class="h-64">
|
||||||
|
<v-chart class="chart-container" :option="specialChartOption" autoresize />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { BarChart } from 'echarts/charts'
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
GridComponent
|
||||||
|
} from 'echarts/components'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getApplicationCounts, getSpecialPeriodCounts, PERIOD_MAP } from '../utils/dataParser'
|
||||||
|
|
||||||
|
// 注册ECharts组件
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
BarChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
GridComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const periodKeys = ['d7', 'd15', 'm1', 'm3', 'm6', 'm12']
|
||||||
|
const labels = periodKeys.map(key => PERIOD_MAP[key].label)
|
||||||
|
|
||||||
|
// 总申请次数图表配置
|
||||||
|
const chartOption = computed(() => {
|
||||||
|
const data = periodKeys.map(key => {
|
||||||
|
const counts = getApplicationCounts(props.data, key)
|
||||||
|
return counts.total
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
let result = params[0].name + '<br/>'
|
||||||
|
params.forEach(item => {
|
||||||
|
result += `${item.seriesName}: ${item.value} 次<br/>`
|
||||||
|
})
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: 0,
|
||||||
|
top: 20,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: labels,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 10,
|
||||||
|
color: '#6b7280',
|
||||||
|
rotate: 45
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#e5e7eb'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 11,
|
||||||
|
color: '#6b7280',
|
||||||
|
formatter: '{value} 次'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f3f4f6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '申请次数',
|
||||||
|
type: 'bar',
|
||||||
|
data: data,
|
||||||
|
barWidth: '25%',
|
||||||
|
barMinHeight: 3,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2B79EE',
|
||||||
|
borderRadius: [4, 4, 0, 0]
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: '#1e5bb8'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 特殊时段(周末 / 夜间)图表配置
|
||||||
|
const specialChartOption = computed(() => {
|
||||||
|
const weekendData = periodKeys.map(key => {
|
||||||
|
const s = getSpecialPeriodCounts(props.data, key)
|
||||||
|
return s.weekend || 0
|
||||||
|
})
|
||||||
|
const nightData = periodKeys.map(key => {
|
||||||
|
const s = getSpecialPeriodCounts(props.data, key)
|
||||||
|
return s.night || 0
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
let result = params[0].name + '<br/>'
|
||||||
|
params.forEach(item => {
|
||||||
|
result += `${item.seriesName}: ${item.value} 次<br/>`
|
||||||
|
})
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['周末申请次数', '夜间申请次数'],
|
||||||
|
top: '5%',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: 0,
|
||||||
|
top: 30,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: labels,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 10,
|
||||||
|
color: '#6b7280',
|
||||||
|
rotate: 45
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#e5e7eb'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 11,
|
||||||
|
color: '#6b7280',
|
||||||
|
formatter: '{value} 次'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f3f4f6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '周末申请次数',
|
||||||
|
type: 'bar',
|
||||||
|
data: weekendData,
|
||||||
|
barWidth: '25%',
|
||||||
|
barMinHeight: 3,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#2B79EE',
|
||||||
|
borderRadius: [4, 4, 0, 0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '夜间申请次数',
|
||||||
|
type: 'bar',
|
||||||
|
data: nightData,
|
||||||
|
barWidth: '25%',
|
||||||
|
barMinHeight: 3,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#F97316',
|
||||||
|
borderRadius: [4, 4, 0, 0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
119
src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
Normal file
119
src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card application-total-section">
|
||||||
|
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||||||
|
<div class="flex items-center mb-4 p-4">
|
||||||
|
<span class="font-bold text-gray-800">申请总次数 (银行+非银) {{ totalCount }}次</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<!-- Tab切换 -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<LTitle title="申请总次数详情" />
|
||||||
|
<div class="bg-white px-4 py-2">
|
||||||
|
<van-tabs v-model:active="activeTab" color="var(--color-primary)">
|
||||||
|
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
|
||||||
|
<div class="p-4">
|
||||||
|
<!-- 银行机构 -->
|
||||||
|
<BankInstitutionSection :data="data" :period="period.key" />
|
||||||
|
|
||||||
|
<!-- 非银机构 -->
|
||||||
|
<NBankInstitutionSection :data="data" :period="period.key" />
|
||||||
|
</div>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
|
||||||
|
import BankInstitutionSection from './BankInstitutionSection.vue'
|
||||||
|
import NBankInstitutionSection from './NBankInstitutionSection.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const activeTab = ref(5) // 默认显示12个月
|
||||||
|
|
||||||
|
const periods = [
|
||||||
|
{ key: 'd7', label: '7天' },
|
||||||
|
{ key: 'd15', label: '15天' },
|
||||||
|
{ key: 'm1', label: '1个月' },
|
||||||
|
{ key: 'm3', label: '3个月' },
|
||||||
|
{ key: 'm6', label: '6个月' },
|
||||||
|
{ key: 'm12', label: '12个月' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 计算总申请次数(12个月)
|
||||||
|
const totalCount = computed(() => {
|
||||||
|
const counts = getApplicationCounts(props.data, 'm12')
|
||||||
|
return counts.total
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-total-section :deep(.van-tabs) {
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-total-section :deep(.van-tabs__wrap) {
|
||||||
|
height: 32px !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-bottom: 1px solid #DDDDDD !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-total-section :deep(.van-tabs__nav) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
gap: 0 !important;
|
||||||
|
height: 32px !important;
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-total-section :deep(.van-tabs__nav--card) {
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-total-section :deep(.van-tab) {
|
||||||
|
color: #999999 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
border-right: unset !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-radius: unset !important;
|
||||||
|
max-width: 80px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-total-section :deep(.van-tab--card) {
|
||||||
|
color: #999999 !important;
|
||||||
|
border-right: unset !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-radius: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-total-section :deep(.van-tab--active) {
|
||||||
|
color: var(--van-theme-primary) !important;
|
||||||
|
background-color: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-total-section :deep(.van-tabs__line) {
|
||||||
|
height: 4px !important;
|
||||||
|
border-radius: 1px !important;
|
||||||
|
background-color: var(--van-theme-primary) !important;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
174
src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
Normal file
174
src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-6">
|
||||||
|
<LTitle title="银行机构申请分布" />
|
||||||
|
<div class="mt-4">
|
||||||
|
<!-- 饼图:宽度占满 -->
|
||||||
|
<div class="h-64 mb-4">
|
||||||
|
<v-chart class="chart-container" :option="pieChartOption" autoresize />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 详细列表:在图表下方,展示所有项并带颜色标识 -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
|
||||||
|
<span class="text-gray-600">{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[#333333] font-bold">{{ item.value }}次</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { PieChart } from 'echarts/charts'
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent
|
||||||
|
} from 'echarts/components'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
|
||||||
|
|
||||||
|
// 注册ECharts组件
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
PieChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 颜色映射表(与图表保持一致)
|
||||||
|
const COLORS = [
|
||||||
|
'#2B79EE',
|
||||||
|
'#61D2F4',
|
||||||
|
'#34D399',
|
||||||
|
'#FBBF24',
|
||||||
|
'#F97316',
|
||||||
|
'#EF4444',
|
||||||
|
'#A855F7',
|
||||||
|
'#6B7280',
|
||||||
|
]
|
||||||
|
|
||||||
|
// 获取银行机构申请详情
|
||||||
|
const bankDetails = computed(() => getBankApplicationDetails(props.data, props.period))
|
||||||
|
|
||||||
|
// 计算银行机构总次数
|
||||||
|
const bankTotal = computed(() => {
|
||||||
|
const details = bankDetails.value
|
||||||
|
return Object.values(details).reduce((sum, val) => sum + (val || 0), 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 详细列表(包含所有项,包含 0 次)
|
||||||
|
const detailList = computed(() => {
|
||||||
|
const details = bankDetails.value
|
||||||
|
const labels = FIELD_LABELS.bank
|
||||||
|
|
||||||
|
return Object.entries(details)
|
||||||
|
.map(([key, value], index) => ({
|
||||||
|
key,
|
||||||
|
label: labels[key] || key,
|
||||||
|
value: value || 0,
|
||||||
|
color: COLORS[index % COLORS.length],
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 饼图配置
|
||||||
|
const pieChartOption = computed(() => {
|
||||||
|
const list = detailList.value
|
||||||
|
|
||||||
|
if (!list || list.length === 0) {
|
||||||
|
return {
|
||||||
|
title: {
|
||||||
|
text: '暂无数据',
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#999',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}: {c}次 ({d}%)'
|
||||||
|
},
|
||||||
|
graphic: {
|
||||||
|
type: 'text',
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
style: {
|
||||||
|
text: '银行机构',
|
||||||
|
fill: '#111827',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '申请次数',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#333'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: list.map(item => ({
|
||||||
|
value: item.value,
|
||||||
|
name: item.label,
|
||||||
|
itemStyle: {
|
||||||
|
color: item.color
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
174
src/ui/JRZQ6F2A/components/BankOrgSection.vue
Normal file
174
src/ui/JRZQ6F2A/components/BankOrgSection.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-6">
|
||||||
|
<LTitle title="银行机构申请机构数分布" />
|
||||||
|
<div class="mt-4">
|
||||||
|
<!-- 饼图:宽度占满 -->
|
||||||
|
<div class="h-64 mb-4">
|
||||||
|
<v-chart class="chart-container" :option="pieChartOption" autoresize />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 详细列表:在图表下方,展示所有项并带颜色标识 -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
|
||||||
|
<span class="text-gray-600">{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[#333333] font-bold">{{ item.value }}家</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { PieChart } from 'echarts/charts'
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent
|
||||||
|
} from 'echarts/components'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getBankOrgDetails, FIELD_LABELS } from '../utils/dataParser'
|
||||||
|
|
||||||
|
// 注册ECharts组件
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
PieChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 颜色映射表(与图表保持一致)
|
||||||
|
const COLORS = [
|
||||||
|
'#2B79EE',
|
||||||
|
'#61D2F4',
|
||||||
|
'#34D399',
|
||||||
|
'#FBBF24',
|
||||||
|
'#F97316',
|
||||||
|
'#EF4444',
|
||||||
|
'#A855F7',
|
||||||
|
'#6B7280',
|
||||||
|
]
|
||||||
|
|
||||||
|
// 获取银行机构数详情
|
||||||
|
const bankOrgs = computed(() => getBankOrgDetails(props.data, props.period))
|
||||||
|
|
||||||
|
// 计算银行机构总数
|
||||||
|
const bankTotal = computed(() => {
|
||||||
|
const orgs = bankOrgs.value
|
||||||
|
return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 详细列表(包含所有项,包含 0 家)
|
||||||
|
const detailList = computed(() => {
|
||||||
|
const orgs = bankOrgs.value
|
||||||
|
const labels = FIELD_LABELS.bank
|
||||||
|
|
||||||
|
return Object.entries(orgs)
|
||||||
|
.map(([key, value], index) => ({
|
||||||
|
key,
|
||||||
|
label: labels[key] || key,
|
||||||
|
value: value || 0,
|
||||||
|
color: COLORS[index % COLORS.length],
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 饼图配置
|
||||||
|
const pieChartOption = computed(() => {
|
||||||
|
const list = detailList.value
|
||||||
|
|
||||||
|
if (!list || list.length === 0) {
|
||||||
|
return {
|
||||||
|
title: {
|
||||||
|
text: '暂无数据',
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#999',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}: {c}家 ({d}%)'
|
||||||
|
},
|
||||||
|
graphic: {
|
||||||
|
type: 'text',
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
style: {
|
||||||
|
text: '银行机构',
|
||||||
|
fill: '#111827',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '机构数',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#333'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: list.map(item => ({
|
||||||
|
value: item.value,
|
||||||
|
name: item.label,
|
||||||
|
itemStyle: {
|
||||||
|
color: item.color
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
119
src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
Normal file
119
src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card institution-total-section">
|
||||||
|
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||||||
|
<div class="mt-4">
|
||||||
|
<!-- Tab切换 -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<LTitle title="申请机构总数详情" />
|
||||||
|
<div class="bg-white px-4 py-2">
|
||||||
|
<van-tabs v-model:active="activeTab" color="var(--color-primary)">
|
||||||
|
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
|
||||||
|
<div class="p-4">
|
||||||
|
<!-- 银行机构 -->
|
||||||
|
<BankOrgSection :data="data" :period="period.key" />
|
||||||
|
|
||||||
|
<!-- 非银机构 -->
|
||||||
|
<NBankOrgSection :data="data" :period="period.key" />
|
||||||
|
</div>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
|
||||||
|
import BankOrgSection from './BankOrgSection.vue'
|
||||||
|
import NBankOrgSection from './NBankOrgSection.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const activeTab = ref(5) // 默认显示12个月
|
||||||
|
|
||||||
|
const periods = [
|
||||||
|
{ key: 'd7', label: '7天' },
|
||||||
|
{ key: 'd15', label: '15天' },
|
||||||
|
{ key: 'm1', label: '1个月' },
|
||||||
|
{ key: 'm3', label: '3个月' },
|
||||||
|
{ key: 'm6', label: '6个月' },
|
||||||
|
{ key: 'm12', label: '12个月' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 计算总机构数(12个月)
|
||||||
|
const totalCount = computed(() => {
|
||||||
|
const bankOrgs = getBankOrgDetails(props.data, 'm12')
|
||||||
|
const nbankOrgs = getNBankOrgDetails(props.data, 'm12')
|
||||||
|
const bankTotal = Object.values(bankOrgs).reduce((sum, val) => sum + (val || 0), 0)
|
||||||
|
const nbankTotal = Object.values(nbankOrgs).reduce((sum, val) => sum + (val || 0), 0)
|
||||||
|
return bankTotal + nbankTotal
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.institution-total-section :deep(.van-tabs) {
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.institution-total-section :deep(.van-tabs__wrap) {
|
||||||
|
height: 32px !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-bottom: 1px solid #DDDDDD !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.institution-total-section :deep(.van-tabs__nav) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
gap: 0 !important;
|
||||||
|
height: 32px !important;
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.institution-total-section :deep(.van-tabs__nav--card) {
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.institution-total-section :deep(.van-tab) {
|
||||||
|
color: #999999 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
border-right: unset !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-radius: unset !important;
|
||||||
|
max-width: 80px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.institution-total-section :deep(.van-tab--card) {
|
||||||
|
color: #999999 !important;
|
||||||
|
border-right: unset !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-radius: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.institution-total-section :deep(.van-tab--active) {
|
||||||
|
color: var(--van-theme-primary) !important;
|
||||||
|
background-color: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.institution-total-section :deep(.van-tabs__line) {
|
||||||
|
height: 4px !important;
|
||||||
|
border-radius: 1px !important;
|
||||||
|
background-color: var(--van-theme-primary) !important;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
174
src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
Normal file
174
src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-6">
|
||||||
|
<LTitle title="非银机构申请分布" />
|
||||||
|
<div class="mt-4">
|
||||||
|
<!-- 饼图:宽度占满 -->
|
||||||
|
<div class="h-64 mb-4">
|
||||||
|
<v-chart class="chart-container" :option="pieChartOption" autoresize />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 详细列表:在图表下方,展示所有项并带颜色标识 -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
|
||||||
|
<span class="text-gray-600">{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[#333333] font-bold">{{ item.value }}次</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { PieChart } from 'echarts/charts'
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent
|
||||||
|
} from 'echarts/components'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getNBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
|
||||||
|
|
||||||
|
// 注册ECharts组件
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
PieChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 颜色映射表(与图表保持一致)
|
||||||
|
const COLORS = [
|
||||||
|
'#2B79EE',
|
||||||
|
'#61D2F4',
|
||||||
|
'#34D399',
|
||||||
|
'#FBBF24',
|
||||||
|
'#F97316',
|
||||||
|
'#EF4444',
|
||||||
|
'#A855F7',
|
||||||
|
'#6B7280',
|
||||||
|
]
|
||||||
|
|
||||||
|
// 获取非银机构申请详情
|
||||||
|
const nbankDetails = computed(() => getNBankApplicationDetails(props.data, props.period))
|
||||||
|
|
||||||
|
// 计算非银机构总次数
|
||||||
|
const nbankTotal = computed(() => {
|
||||||
|
const details = nbankDetails.value
|
||||||
|
return Object.values(details).reduce((sum, val) => sum + (val || 0), 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 详细列表(包含所有项,包含 0 次)
|
||||||
|
const detailList = computed(() => {
|
||||||
|
const details = nbankDetails.value
|
||||||
|
const labels = FIELD_LABELS.nbank
|
||||||
|
|
||||||
|
return Object.entries(details)
|
||||||
|
.map(([key, value], index) => ({
|
||||||
|
key,
|
||||||
|
label: labels[key] || key,
|
||||||
|
value: value || 0,
|
||||||
|
color: COLORS[index % COLORS.length],
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 饼图配置
|
||||||
|
const pieChartOption = computed(() => {
|
||||||
|
const list = detailList.value
|
||||||
|
|
||||||
|
if (!list || list.length === 0) {
|
||||||
|
return {
|
||||||
|
title: {
|
||||||
|
text: '暂无数据',
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#999',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}: {c}次 ({d}%)'
|
||||||
|
},
|
||||||
|
graphic: {
|
||||||
|
type: 'text',
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
style: {
|
||||||
|
text: '非银机构',
|
||||||
|
fill: '#111827',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '申请次数',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#333'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: list.map(item => ({
|
||||||
|
value: item.value,
|
||||||
|
name: item.label,
|
||||||
|
itemStyle: {
|
||||||
|
color: item.color
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
174
src/ui/JRZQ6F2A/components/NBankOrgSection.vue
Normal file
174
src/ui/JRZQ6F2A/components/NBankOrgSection.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mb-6">
|
||||||
|
<LTitle title="非银机构申请机构数分布" />
|
||||||
|
<div class="mt-4">
|
||||||
|
<!-- 饼图:宽度占满 -->
|
||||||
|
<div class="h-64 mb-4">
|
||||||
|
<v-chart class="chart-container" :option="pieChartOption" autoresize />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 详细列表:在图表下方,展示所有项并带颜色标识 -->
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
|
||||||
|
<span class="text-gray-600">{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[#333333] font-bold">{{ item.value }}家</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { PieChart } from 'echarts/charts'
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent
|
||||||
|
} from 'echarts/components'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getNBankOrgDetails, FIELD_LABELS } from '../utils/dataParser'
|
||||||
|
|
||||||
|
// 注册ECharts组件
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
PieChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 颜色映射表(与图表保持一致)
|
||||||
|
const COLORS = [
|
||||||
|
'#2B79EE',
|
||||||
|
'#61D2F4',
|
||||||
|
'#34D399',
|
||||||
|
'#FBBF24',
|
||||||
|
'#F97316',
|
||||||
|
'#EF4444',
|
||||||
|
'#A855F7',
|
||||||
|
'#6B7280',
|
||||||
|
]
|
||||||
|
|
||||||
|
// 获取非银机构数详情
|
||||||
|
const nbankOrgs = computed(() => getNBankOrgDetails(props.data, props.period))
|
||||||
|
|
||||||
|
// 计算非银机构总数
|
||||||
|
const nbankTotal = computed(() => {
|
||||||
|
const orgs = nbankOrgs.value
|
||||||
|
return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 详细列表(包含所有项,包含 0 家)
|
||||||
|
const detailList = computed(() => {
|
||||||
|
const orgs = nbankOrgs.value
|
||||||
|
const labels = FIELD_LABELS.nbank
|
||||||
|
|
||||||
|
return Object.entries(orgs)
|
||||||
|
.map(([key, value], index) => ({
|
||||||
|
key,
|
||||||
|
label: labels[key] || key,
|
||||||
|
value: value || 0,
|
||||||
|
color: COLORS[index % COLORS.length],
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 饼图配置
|
||||||
|
const pieChartOption = computed(() => {
|
||||||
|
const list = detailList.value
|
||||||
|
|
||||||
|
if (!list || list.length === 0) {
|
||||||
|
return {
|
||||||
|
title: {
|
||||||
|
text: '暂无数据',
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#999',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}: {c}家 ({d}%)'
|
||||||
|
},
|
||||||
|
graphic: {
|
||||||
|
type: 'text',
|
||||||
|
left: 'center',
|
||||||
|
top: 'center',
|
||||||
|
style: {
|
||||||
|
text: '非银机构',
|
||||||
|
fill: '#111827',
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '机构数',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#333'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: list.map(item => ({
|
||||||
|
value: item.value,
|
||||||
|
name: item.label,
|
||||||
|
itemStyle: {
|
||||||
|
color: item.color
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
184
src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue
Normal file
184
src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
||||||
|
<div class="mt-4">
|
||||||
|
<LTitle title="产品类型申请分布(近12个月)" />
|
||||||
|
<div class="h-64 mb-4">
|
||||||
|
<v-chart class="chart-container" :option="chartOption" autoresize />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 详细列表:与图表颜色一致,包含 0 次的类型 -->
|
||||||
|
<div class="space-y-2 px-4 pb-4">
|
||||||
|
<div v-for="item in detailList" :key="item.key" class="flex items-center justify-between text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
|
||||||
|
<span class="text-gray-600">{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-[#111827] font-bold">
|
||||||
|
{{ item.value }} 次
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import VChart from 'vue-echarts'
|
||||||
|
import { use } from 'echarts/core'
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers'
|
||||||
|
import { BarChart } from 'echarts/charts'
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
GridComponent
|
||||||
|
} from 'echarts/components'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getValue, FIELD_LABELS } from '../utils/dataParser'
|
||||||
|
|
||||||
|
// 注册 ECharts 组件
|
||||||
|
use([
|
||||||
|
CanvasRenderer,
|
||||||
|
BarChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
GridComponent
|
||||||
|
])
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 近12个月的前缀
|
||||||
|
const PREFIX = 'als_m12'
|
||||||
|
|
||||||
|
// 关注的产品类型 key(字段中的 id_xxx_allnum)
|
||||||
|
const TYPE_KEYS = ['pdl', 'caon', 'rel', 'caoff', 'cooff', 'af', 'coon', 'oth']
|
||||||
|
|
||||||
|
// 颜色映射,与其他组件保持风格一致
|
||||||
|
const COLORS = [
|
||||||
|
'#2B79EE',
|
||||||
|
'#60A5FA',
|
||||||
|
'#34D399',
|
||||||
|
'#FBBF24',
|
||||||
|
'#F97316',
|
||||||
|
'#EF4444',
|
||||||
|
'#A855F7',
|
||||||
|
'#6B7280'
|
||||||
|
]
|
||||||
|
|
||||||
|
// 详细列表(每个产品类型的次数和颜色)
|
||||||
|
const detailList = computed(() => {
|
||||||
|
const v = props.data || {}
|
||||||
|
const labels = FIELD_LABELS.bank || {}
|
||||||
|
|
||||||
|
return TYPE_KEYS.map((key, index) => {
|
||||||
|
const field = `${PREFIX}_id_${key}_allnum`
|
||||||
|
const value = getValue(v[field]) || 0
|
||||||
|
|
||||||
|
return {
|
||||||
|
key,
|
||||||
|
label: labels[key] || key,
|
||||||
|
value,
|
||||||
|
color: COLORS[index % COLORS.length]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 产品类型分布柱状图
|
||||||
|
const chartOption = computed(() => {
|
||||||
|
const list = detailList.value
|
||||||
|
|
||||||
|
const categories = list.map(item => item.label)
|
||||||
|
const values = list.map(item => item.value)
|
||||||
|
const colors = list.map(item => item.color)
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
formatter: params => {
|
||||||
|
const p = params[0]
|
||||||
|
return `${p.name}<br/>申请次数:${p.value} 次`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
top: 20,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: categories,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 10,
|
||||||
|
color: '#6b7280',
|
||||||
|
rotate: 30
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#e5e7eb'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 11,
|
||||||
|
color: '#6b7280',
|
||||||
|
formatter: '{value} 次'
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f3f4f6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '申请次数',
|
||||||
|
type: 'bar',
|
||||||
|
data: values,
|
||||||
|
barWidth: '35%',
|
||||||
|
barMinHeight: 3,
|
||||||
|
itemStyle: {
|
||||||
|
color: params => colors[params.dataIndex],
|
||||||
|
borderRadius: [4, 4, 0, 0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{
|
||||||
|
"cells": [],
|
||||||
|
"metadata": {
|
||||||
|
"language_info": {
|
||||||
|
"name": "python"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nbformat": 4,
|
||||||
|
"nbformat_minor": 2
|
||||||
|
}
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="rounded-lg border border-gray-200 p-4 space-y-3">
|
||||||
|
<LTitle title="近期集中申请提示" />
|
||||||
|
|
||||||
|
<div v-if="hasAnyData" class="space-y-2 text-sm text-gray-700">
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span>最近在银行连续申请次数</span>
|
||||||
|
<span class="font-bold text-[#111827]">{{ bankCons }} 次</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span>最近在银行连续申请天数</span>
|
||||||
|
<span class="font-bold text-[#111827]">{{ bankDays }} 天</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span>最近在非银连续申请次数</span>
|
||||||
|
<span class="font-bold text-[#111827]">{{ nbankCons }} 次</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span>最近在非银连续申请天数</span>
|
||||||
|
<span class="font-bold text-[#111827]">{{ nbankDays }} 天</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span>距最近一次在银行机构申请</span>
|
||||||
|
<span class="font-bold text-[#111827]">{{ bankGap }} 天</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span>距最近一次在非银机构申请</span>
|
||||||
|
<span class="font-bold text-[#111827]">{{ nbankGap }} 天</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="text-sm text-gray-400">
|
||||||
|
暂未查询到明显的近期集中申请行为。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import LTitle from '@/components/LTitle.vue'
|
||||||
|
import { getValue } from '../utils/dataParser'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const bankCons = computed(() => getValue(props.data?.als_lst_id_bank_consnum))
|
||||||
|
const bankDays = computed(() => getValue(props.data?.als_lst_id_bank_csinteday))
|
||||||
|
const nbankCons = computed(() => getValue(props.data?.als_lst_id_nbank_consnum))
|
||||||
|
const nbankDays = computed(() => getValue(props.data?.als_lst_id_nbank_csinteday))
|
||||||
|
|
||||||
|
const bankGap = computed(() => getValue(props.data?.als_lst_id_bank_inteday))
|
||||||
|
const nbankGap = computed(() => getValue(props.data?.als_lst_id_nbank_inteday))
|
||||||
|
|
||||||
|
const hasAnyData = computed(() => {
|
||||||
|
return (
|
||||||
|
(bankCons.value || 0) > 0 ||
|
||||||
|
(bankDays.value || 0) > 0 ||
|
||||||
|
(nbankCons.value || 0) > 0 ||
|
||||||
|
(nbankDays.value || 0) > 0 ||
|
||||||
|
(bankGap.value || 0) > 0 ||
|
||||||
|
(nbankGap.value || 0) > 0
|
||||||
|
)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
67
src/ui/JRZQ6F2A/components/SummaryApplyStats.vue
Normal file
67
src/ui/JRZQ6F2A/components/SummaryApplyStats.vue
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card rounded-lg border border-gray-200 pb-2 mb-2">
|
||||||
|
<div class="flex items-center mb-4 p-4">
|
||||||
|
<span class="font-bold text-gray-800">借贷申请统计概览</span>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 px-4 pb-4">
|
||||||
|
<div v-for="item in items" :key="item.label"
|
||||||
|
class="bg-blue-50 rounded-lg p-3 text-center border border-[#2B79EE1A]">
|
||||||
|
<div class="text-xl font-bold text-[#111827]">
|
||||||
|
{{ item.value }}
|
||||||
|
<span class="text-xs text-gray-500 ml-1">{{ item.unit }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-gray-600 mt-1">
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { getApplicationCounts, getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const items = computed(() => {
|
||||||
|
const v = props.data || {}
|
||||||
|
|
||||||
|
// 近12个月申请次数(总/银行/非银)
|
||||||
|
const m12 = getApplicationCounts(v, 'm12')
|
||||||
|
|
||||||
|
// 近12个月申请机构总数(银行+非银)
|
||||||
|
const bankOrgs = getBankOrgDetails(v, 'm12')
|
||||||
|
const nbankOrgs = getNBankOrgDetails(v, 'm12')
|
||||||
|
const bankOrgTotal = Object.values(bankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
|
||||||
|
const nbankOrgTotal = Object.values(nbankOrgs || {}).reduce((sum, val) => sum + (val || 0), 0)
|
||||||
|
const orgTotal = bankOrgTotal + nbankOrgTotal
|
||||||
|
|
||||||
|
// 近12个月周末 / 夜间申请次数(银行+非银)
|
||||||
|
const weekendTotal =
|
||||||
|
Number(v.als_m12_id_bank_week_allnum || 0) + Number(v.als_m12_id_nbank_week_allnum || 0)
|
||||||
|
const nightTotal =
|
||||||
|
Number(v.als_m12_id_bank_night_allnum || 0) + Number(v.als_m12_id_nbank_night_allnum || 0)
|
||||||
|
|
||||||
|
return [
|
||||||
|
{ label: '总申请次数', value: m12.total || 0, unit: '次' },
|
||||||
|
{ label: '总申请机构数', value: orgTotal || 0, unit: '家' },
|
||||||
|
{ label: '银行申请次数', value: m12.bank || 0, unit: '次' },
|
||||||
|
{ label: '非银申请次数', value: m12.nbank || 0, unit: '次' },
|
||||||
|
{ label: '夜间申请次数', value: nightTotal || 0, unit: '次' },
|
||||||
|
{ label: '周末申请次数', value: weekendTotal || 0, unit: '次' },
|
||||||
|
]
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
128
src/ui/JRZQ6F2A/index.vue
Normal file
128
src/ui/JRZQ6F2A/index.vue
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<!-- 统计概览小模块 -->
|
||||||
|
<SummaryApplyStats :data="variableValue" />
|
||||||
|
|
||||||
|
<!-- 申请次数 -->
|
||||||
|
<ApplicationCountSection :data="variableValue" />
|
||||||
|
|
||||||
|
<!-- 产品类型申请分布 -->
|
||||||
|
<ProductTypeDistributionSection :data="variableValue" />
|
||||||
|
|
||||||
|
<!-- 近期集中申请提示 -->
|
||||||
|
<RecentIntensiveApplicationSection :data="variableValue" />
|
||||||
|
|
||||||
|
<!-- 申请总次数 (银行+非银) -->
|
||||||
|
<ApplicationTotalSection :data="variableValue" />
|
||||||
|
|
||||||
|
<!-- 申请机构总数 (银行+非银) -->
|
||||||
|
<InstitutionTotalSection :data="variableValue" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useRiskNotifier } from '@/composables/useRiskNotifier'
|
||||||
|
import { extractVariableValue } from './utils/dataParser'
|
||||||
|
import ApplicationCountSection from './components/ApplicationCountSection.vue'
|
||||||
|
import ApplicationTotalSection from './components/ApplicationTotalSection.vue'
|
||||||
|
import InstitutionTotalSection from './components/InstitutionTotalSection.vue'
|
||||||
|
import SummaryApplyStats from './components/SummaryApplyStats.vue'
|
||||||
|
import ProductTypeDistributionSection from './components/ProductTypeDistributionSection.vue'
|
||||||
|
import RecentIntensiveApplicationSection from './components/RecentIntensiveApplicationSection.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
apiId: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
notifyRiskStatus: {
|
||||||
|
type: Function,
|
||||||
|
default: () => { },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取数据
|
||||||
|
const rawData = computed(() => props.data?.data || props.data || {})
|
||||||
|
|
||||||
|
// 提取 variableValue
|
||||||
|
const variableValue = computed(() => extractVariableValue(rawData.value))
|
||||||
|
|
||||||
|
// 计算风险评分(0-100分,分数越高越安全)
|
||||||
|
const riskScore = computed(() => {
|
||||||
|
const data = variableValue.value
|
||||||
|
|
||||||
|
if (!data || Object.keys(data).length === 0) {
|
||||||
|
return 100 // 无数据视为最安全
|
||||||
|
}
|
||||||
|
|
||||||
|
let score = 100 // 初始满分
|
||||||
|
|
||||||
|
// 近7天申请次数评估
|
||||||
|
const d7Total = parseInt(data.als_d7_id_bank_allnum || 0) + parseInt(data.als_d7_id_nbank_allnum || 0)
|
||||||
|
if (d7Total > 5) {
|
||||||
|
score -= 20 // 近7天申请过多
|
||||||
|
} else if (d7Total > 3) {
|
||||||
|
score -= 10
|
||||||
|
}
|
||||||
|
|
||||||
|
// 近15天申请次数评估
|
||||||
|
const d15Total = parseInt(data.als_d15_id_bank_allnum || 0) + parseInt(data.als_d15_id_nbank_allnum || 0)
|
||||||
|
if (d15Total > 10) {
|
||||||
|
score -= 15
|
||||||
|
} else if (d15Total > 5) {
|
||||||
|
score -= 8
|
||||||
|
}
|
||||||
|
|
||||||
|
// 近1个月申请次数评估
|
||||||
|
const m1Total = parseInt(data.als_m1_id_bank_allnum || 0) + parseInt(data.als_m1_id_nbank_allnum || 0)
|
||||||
|
if (m1Total > 15) {
|
||||||
|
score -= 20
|
||||||
|
} else if (m1Total > 8) {
|
||||||
|
score -= 10
|
||||||
|
}
|
||||||
|
|
||||||
|
// 近3个月申请次数评估
|
||||||
|
const m3Total = parseInt(data.als_m3_id_bank_allnum || 0) + parseInt(data.als_m3_id_nbank_allnum || 0)
|
||||||
|
if (m3Total > 20) {
|
||||||
|
score -= 15
|
||||||
|
} else if (m3Total > 10) {
|
||||||
|
score -= 8
|
||||||
|
}
|
||||||
|
|
||||||
|
// 近6个月申请次数评估
|
||||||
|
const m6Total = parseInt(data.als_m6_id_bank_allnum || 0) + parseInt(data.als_m6_id_nbank_allnum || 0)
|
||||||
|
if (m6Total > 30) {
|
||||||
|
score -= 10
|
||||||
|
} else if (m6Total > 15) {
|
||||||
|
score -= 5
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保分数在10-100范围内
|
||||||
|
return Math.max(10, Math.min(100, score))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 使用 composable 通知父组件风险评分
|
||||||
|
useRiskNotifier(props, riskScore)
|
||||||
|
|
||||||
|
// 暴露给父组件
|
||||||
|
defineExpose({
|
||||||
|
riskScore
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
237
src/ui/JRZQ6F2A/utils/dataParser.js
Normal file
237
src/ui/JRZQ6F2A/utils/dataParser.js
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
/**
|
||||||
|
* 数据解析工具函数
|
||||||
|
* 用于解析借贷申请验证A的返回数据
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取字段值,处理空值
|
||||||
|
*/
|
||||||
|
export function getValue(value) {
|
||||||
|
if (
|
||||||
|
value === undefined ||
|
||||||
|
value === null ||
|
||||||
|
value === "" ||
|
||||||
|
value === "空"
|
||||||
|
) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
// 如果是字符串数字,转换为数字
|
||||||
|
if (typeof value === "string" && /^\d+(\.\d+)?$/.test(value)) {
|
||||||
|
return parseFloat(value);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 从原始数据中提取 variableValue
|
||||||
|
*/
|
||||||
|
export function extractVariableValue(data) {
|
||||||
|
try {
|
||||||
|
return (
|
||||||
|
data?.risk_screen_v2?.variables?.find(
|
||||||
|
(v) => v.variableName === "bairong_applyloan_extend"
|
||||||
|
)?.variableValue || {}
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("提取数据失败:", error);
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 时间段映射
|
||||||
|
*/
|
||||||
|
export const PERIOD_MAP = {
|
||||||
|
d7: { label: "7天", prefix: "als_d7" },
|
||||||
|
d15: { label: "15天", prefix: "als_d15" },
|
||||||
|
m1: { label: "1个月", prefix: "als_m1" },
|
||||||
|
m3: { label: "3个月", prefix: "als_m3" },
|
||||||
|
m6: { label: "6个月", prefix: "als_m6" },
|
||||||
|
m12: { label: "12个月", prefix: "als_m12" },
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取申请次数(按时间段)
|
||||||
|
*/
|
||||||
|
export function getApplicationCounts(variableValue, period) {
|
||||||
|
const { prefix } = PERIOD_MAP[period];
|
||||||
|
|
||||||
|
// 计算总申请次数(所有类型的申请次数之和)
|
||||||
|
const types = [
|
||||||
|
"id_pdl_allnum", // 线上小额现金贷
|
||||||
|
"id_caon_allnum", // 线上现金分期
|
||||||
|
"id_rel_allnum", // 信用卡(类信用卡)
|
||||||
|
"id_caoff_allnum", // 线下现金分期
|
||||||
|
"id_cooff_allnum", // 线下消费分期
|
||||||
|
"id_af_allnum", // 汽车金融
|
||||||
|
"id_coon_allnum", // 线上消费分期
|
||||||
|
"id_oth_allnum", // 其他
|
||||||
|
];
|
||||||
|
|
||||||
|
let total = 0;
|
||||||
|
types.forEach((type) => {
|
||||||
|
const value = getValue(variableValue[`${prefix}_${type}`]);
|
||||||
|
total += value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 银行机构申请次数
|
||||||
|
const bankTotal = getValue(variableValue[`${prefix}_id_bank_allnum`]) || 0;
|
||||||
|
|
||||||
|
// 非银机构申请次数
|
||||||
|
const nbankTotal =
|
||||||
|
getValue(variableValue[`${prefix}_id_nbank_allnum`]) || 0;
|
||||||
|
|
||||||
|
// 如果计算出的total为0,则使用银行+非银的总和
|
||||||
|
const finalTotal = total > 0 ? total : bankTotal + nbankTotal;
|
||||||
|
|
||||||
|
return {
|
||||||
|
total: finalTotal,
|
||||||
|
bank: bankTotal,
|
||||||
|
nbank: nbankTotal,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取特殊时段(周末/夜间)申请次数(按时间段,银行+非银)
|
||||||
|
*/
|
||||||
|
export function getSpecialPeriodCounts(variableValue, period) {
|
||||||
|
const { prefix } = PERIOD_MAP[period];
|
||||||
|
|
||||||
|
const weekendBank =
|
||||||
|
getValue(variableValue[`${prefix}_id_bank_week_allnum`]) || 0;
|
||||||
|
const weekendNbank =
|
||||||
|
getValue(variableValue[`${prefix}_id_nbank_week_allnum`]) || 0;
|
||||||
|
const nightBank =
|
||||||
|
getValue(variableValue[`${prefix}_id_bank_night_allnum`]) || 0;
|
||||||
|
const nightNbank =
|
||||||
|
getValue(variableValue[`${prefix}_id_nbank_night_allnum`]) || 0;
|
||||||
|
|
||||||
|
return {
|
||||||
|
weekend: weekendBank + weekendNbank,
|
||||||
|
night: nightBank + nightNbank,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取银行机构申请次数详情
|
||||||
|
*/
|
||||||
|
export function getBankApplicationDetails(variableValue, period) {
|
||||||
|
const { prefix } = PERIOD_MAP[period];
|
||||||
|
|
||||||
|
return {
|
||||||
|
pdl: getValue(variableValue[`${prefix}_id_pdl_allnum`]), // 线上小额现金贷
|
||||||
|
caon: getValue(variableValue[`${prefix}_id_caon_allnum`]), // 线上现金分期
|
||||||
|
rel: getValue(variableValue[`${prefix}_id_rel_allnum`]), // 信用卡(类信用卡)
|
||||||
|
caoff: getValue(variableValue[`${prefix}_id_caoff_allnum`]), // 线下现金分期
|
||||||
|
cooff: getValue(variableValue[`${prefix}_id_cooff_allnum`]), // 线下消费分期
|
||||||
|
af: getValue(variableValue[`${prefix}_id_af_allnum`]), // 汽车金融
|
||||||
|
coon: getValue(variableValue[`${prefix}_id_coon_allnum`]), // 线上消费分期
|
||||||
|
oth: getValue(variableValue[`${prefix}_id_oth_allnum`]), // 其他
|
||||||
|
bank: getValue(variableValue[`${prefix}_id_bank_allnum`]), // 银行机构申请
|
||||||
|
tra: getValue(variableValue[`${prefix}_id_bank_tra_allnum`]), // 传统银行申请
|
||||||
|
ret: getValue(variableValue[`${prefix}_id_bank_ret_allnum`]), // 网络零售银行申请
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取非银机构申请次数详情
|
||||||
|
*/
|
||||||
|
export function getNBankApplicationDetails(variableValue, period) {
|
||||||
|
const { prefix } = PERIOD_MAP[period];
|
||||||
|
|
||||||
|
return {
|
||||||
|
nbank: getValue(variableValue[`${prefix}_id_nbank_allnum`]), // 非银机构
|
||||||
|
p2p: getValue(variableValue[`${prefix}_id_nbank_p2p_allnum`]), // 改制机构
|
||||||
|
mc: getValue(variableValue[`${prefix}_id_nbank_mc_allnum`]), // 小贷机构
|
||||||
|
ca: getValue(variableValue[`${prefix}_id_nbank_ca_allnum`]), // 现金类分期机构
|
||||||
|
cf: getValue(variableValue[`${prefix}_id_nbank_cf_allnum`]), // 消费类分期机构
|
||||||
|
com: getValue(variableValue[`${prefix}_id_nbank_com_allnum`]), // 代偿类分期机构
|
||||||
|
oth: getValue(variableValue[`${prefix}_id_nbank_oth_allnum`]), // 其他申请
|
||||||
|
nsloan: getValue(variableValue[`${prefix}_id_nbank_nsloan_allnum`]), // 持牌网络小贷机构
|
||||||
|
autofin: getValue(variableValue[`${prefix}_id_nbank_autofin_allnum`]), // 持牌汽车金融机构
|
||||||
|
sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_allnum`]), // 持牌小贷机构
|
||||||
|
cons: getValue(variableValue[`${prefix}_id_nbank_cons_allnum`]), // 持牌消费金融机构
|
||||||
|
finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_allnum`]), // 持牌融资租赁机构
|
||||||
|
else: getValue(variableValue[`${prefix}_id_nbank_else_allnum`]), // 其他申请
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取银行机构申请机构数详情
|
||||||
|
*/
|
||||||
|
export function getBankOrgDetails(variableValue, period) {
|
||||||
|
const { prefix } = PERIOD_MAP[period];
|
||||||
|
|
||||||
|
return {
|
||||||
|
pdl: getValue(variableValue[`${prefix}_id_pdl_orgnum`]),
|
||||||
|
caon: getValue(variableValue[`${prefix}_id_caon_orgnum`]),
|
||||||
|
rel: getValue(variableValue[`${prefix}_id_rel_orgnum`]),
|
||||||
|
caoff: getValue(variableValue[`${prefix}_id_caoff_orgnum`]),
|
||||||
|
cooff: getValue(variableValue[`${prefix}_id_cooff_orgnum`]),
|
||||||
|
af: getValue(variableValue[`${prefix}_id_af_orgnum`]),
|
||||||
|
coon: getValue(variableValue[`${prefix}_id_coon_orgnum`]),
|
||||||
|
oth: getValue(variableValue[`${prefix}_id_oth_orgnum`]),
|
||||||
|
bank: getValue(variableValue[`${prefix}_id_bank_orgnum`]),
|
||||||
|
tra: getValue(variableValue[`${prefix}_id_bank_tra_orgnum`]),
|
||||||
|
ret: getValue(variableValue[`${prefix}_id_bank_ret_orgnum`]),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取非银机构申请机构数详情
|
||||||
|
*/
|
||||||
|
export function getNBankOrgDetails(variableValue, period) {
|
||||||
|
const { prefix } = PERIOD_MAP[period];
|
||||||
|
|
||||||
|
return {
|
||||||
|
nbank: getValue(variableValue[`${prefix}_id_nbank_orgnum`]),
|
||||||
|
p2p: getValue(variableValue[`${prefix}_id_nbank_p2p_orgnum`]),
|
||||||
|
mc: getValue(variableValue[`${prefix}_id_nbank_mc_orgnum`]),
|
||||||
|
ca: getValue(variableValue[`${prefix}_id_nbank_ca_orgnum`]),
|
||||||
|
cf: getValue(variableValue[`${prefix}_id_nbank_cf_orgnum`]),
|
||||||
|
com: getValue(variableValue[`${prefix}_id_nbank_com_orgnum`]),
|
||||||
|
oth: getValue(variableValue[`${prefix}_id_nbank_oth_orgnum`]),
|
||||||
|
nsloan: getValue(variableValue[`${prefix}_id_nbank_nsloan_orgnum`]),
|
||||||
|
autofin: getValue(variableValue[`${prefix}_id_nbank_autofin_orgnum`]),
|
||||||
|
sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_orgnum`]),
|
||||||
|
cons: getValue(variableValue[`${prefix}_id_nbank_cons_orgnum`]),
|
||||||
|
finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_orgnum`]),
|
||||||
|
else: getValue(variableValue[`${prefix}_id_nbank_else_orgnum`]),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 字段名称映射
|
||||||
|
*/
|
||||||
|
export const FIELD_LABELS = {
|
||||||
|
// 银行机构申请类型
|
||||||
|
bank: {
|
||||||
|
pdl: "申请线上小额现金贷",
|
||||||
|
caon: "申请线上现金分期",
|
||||||
|
rel: "申请信用卡(类信用卡)",
|
||||||
|
caoff: "申请线下现金分期",
|
||||||
|
cooff: "申请线下消费分期",
|
||||||
|
af: "申请汽车金融",
|
||||||
|
coon: "申请线上消费分期",
|
||||||
|
oth: "申请其他",
|
||||||
|
bank: "银行机构申请",
|
||||||
|
tra: "银行机构-传统银行申请",
|
||||||
|
ret: "银行机构-网络零售银行申请",
|
||||||
|
},
|
||||||
|
// 非银机构申请类型
|
||||||
|
nbank: {
|
||||||
|
nbank: "非银机构",
|
||||||
|
p2p: "改制机构",
|
||||||
|
mc: "小贷机构",
|
||||||
|
ca: "现金类分期机构",
|
||||||
|
cf: "消费类分期机构",
|
||||||
|
com: "代偿类分期机构",
|
||||||
|
oth: "其他申请",
|
||||||
|
nsloan: "持牌网络小贷机构",
|
||||||
|
autofin: "汽车金融",
|
||||||
|
sloan: "持牌小贷机构",
|
||||||
|
cons: "持牌消费金融机构",
|
||||||
|
finlea: "持牌融资租赁机构",
|
||||||
|
else: "其他申请",
|
||||||
|
},
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user