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

add JRZQ6F2A

Browse Source
This commit is contained in:
liangzai
2025-12-16 17:34:28 +08:00
parent d576d8e734
commit 391d34cc10
12 changed files with 1062 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
View File

@@ -1,16 +1,23 @@
<template> <template>
<div class="card application-count-section"> <div class="card application-count-section">
<div class="rounded-lg border border-gray-200 pb-2 mb-4"> <div class="rounded-lg border border-gray-200 pb-2 mb-4">
<div class="flex items-center mb-4 p-4"> <div class="mt-4">
<span class="font-bold text-gray-800 text-lg">申请次数 {{ totalCount }}次</span> <!-- 申请次数时间分布图表 -->
</div> <div class="mb-6">
<LTitle title="申请次数时间分布" />
<!-- 柱状图 -->
<div class="px-4 mb-4">
<div class="h-64"> <div class="h-64">
<v-chart class="chart-container" :option="chartOption" autoresize /> <v-chart class="chart-container" :option="chartOption" autoresize />
</div> </div>
</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>
</div> </div>
</template> </template>
@@ -27,7 +34,8 @@ import {
LegendComponent, LegendComponent,
GridComponent GridComponent
} from 'echarts/components' } from 'echarts/components'
import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser' import LTitle from '@/components/LTitle.vue'
import { getApplicationCounts, getSpecialPeriodCounts, PERIOD_MAP } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
use([ use([
@@ -47,17 +55,11 @@ const props = defineProps({
} }
}) })
// 计算总申请次数（12个月）
const totalCount = computed(() => {
const counts = getApplicationCounts(props.data, 'm12')
return counts.total
})
// 图表配置
const chartOption = computed(() => {
const periodKeys = ['d7', 'd15', 'm1', 'm3', 'm6', 'm12'] const periodKeys = ['d7', 'd15', 'm1', 'm3', 'm6', 'm12']
const labels = periodKeys.map(key => PERIOD_MAP[key].label) const labels = periodKeys.map(key => PERIOD_MAP[key].label)
// 总申请次数图表配置
const chartOption = computed(() => {
const data = periodKeys.map(key => { const data = periodKeys.map(key => {
const counts = getApplicationCounts(props.data, key) const counts = getApplicationCounts(props.data, key)
return counts.total return counts.total
@@ -69,31 +71,46 @@ const chartOption = computed(() => {
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, },
formatter: (params) => { formatter: function (params) {
const param = params[0] let result = params[0].name + '<br/>'
return `${param.name}<br/>${param.seriesName}: ${param.value}次` params.forEach(item => {
result += `${item.seriesName}: ${item.value} 次<br/>`
})
return result
} }
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: 0,
top: 20,
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: labels, data: labels,
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 10,
color: '#666' color: '#6b7280',
rotate: 45
},
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
} }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 11,
color: '#666', color: '#6b7280',
formatter: '{value} 次' formatter: '{value} 次'
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
} }
}, },
series: [ series: [
@@ -101,15 +118,109 @@ const chartOption = computed(() => {
name: '申请次数', name: '申请次数',
type: 'bar', type: 'bar',
data: data, data: data,
barWidth: '25%',
barMinHeight: 3,
itemStyle: { itemStyle: {
color: '#4A90E2' color: '#2B79EE',
borderRadius: [4, 4, 0, 0]
}, },
label: { emphasis: {
show: true, itemStyle: {
position: 'top', color: '#1e5bb8'
formatter: '{c}次', }
fontSize: 12, }
color: '#333' }
]
}
})
// 特殊时段（周末 / 夜间）图表配置
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]
} }
} }
] ]
@@ -117,9 +228,13 @@ const chartOption = computed(() => {
}) })
</script> </script>
<style scoped> <style lang="scss" scoped>
.card { .card {
background: #ffffff; background: #ffffff;
} }
</style>
.chart-container {
width: 100%;
height: 100%;
}
</style>

67
src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
View File

@@ -2,11 +2,13 @@
<div class="card application-total-section"> <div class="card application-total-section">
<div class="rounded-lg border border-gray-200 pb-2 mb-4"> <div class="rounded-lg border border-gray-200 pb-2 mb-4">
<div class="flex items-center mb-4 p-4"> <div class="flex items-center mb-4 p-4">
<span class="font-bold text-gray-800 text-lg">申请总次数 (银行+非银) {{ totalCount }}次</span> <span class="font-bold text-gray-800">申请总次数 (银行+非银) {{ totalCount }}次</span>
</div> </div>
<div class="mt-4">
<!-- Tab切换 --> <!-- Tab切换 -->
<div class="px-4 mb-4"> <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-tabs v-model:active="activeTab" color="var(--color-primary)">
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label"> <van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="p-4"> <div class="p-4">
@@ -21,10 +23,13 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import LTitle from '@/components/LTitle.vue'
import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser' import { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
import BankInstitutionSection from './BankInstitutionSection.vue' import BankInstitutionSection from './BankInstitutionSection.vue'
import NBankInstitutionSection from './NBankInstitutionSection.vue' import NBankInstitutionSection from './NBankInstitutionSection.vue'
@@ -55,10 +60,60 @@ const totalCount = computed(() => {
}) })
</script> </script>
<style scoped> <style lang="scss" scoped>
.card { .card {
background: #ffffff; 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> </style>

94
src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
View File

@@ -1,23 +1,19 @@
<template> <template>
<div class="bank-institution-section mb-6"> <div class="mb-6">
<div class="flex items-center mb-4"> <LTitle title="银行机构申请分布" />
<span class="font-bold text-gray-800">银行机构 {{ bankTotal }}次</span> <div class="mt-4">
</div> <!-- 饼图：宽度占满 -->
<div class="h-64 mb-4">
<div class="grid grid-cols-2 gap-4">
<!-- 饼图 -->
<div class="h-64">
<v-chart class="chart-container" :option="pieChartOption" autoresize /> <v-chart class="chart-container" :option="pieChartOption" autoresize />
</div> </div>
<!-- 详细列表 --> <!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
<div class="space-y-2"> <div class="space-y-2">
<div <div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
v-for="(item, index) in detailList" <div class="flex items-center">
:key="index" <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
>
<span class="text-gray-600">{{ item.label }}</span> <span class="text-gray-600">{{ item.label }}</span>
</div>
<span class="text-[#333333] font-bold">{{ item.value }}次</span> <span class="text-[#333333] font-bold">{{ item.value }}次</span>
</div> </div>
</div> </div>
@@ -36,6 +32,7 @@ import {
TooltipComponent, TooltipComponent,
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { getBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser' import { getBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
@@ -59,6 +56,18 @@ const props = defineProps({
} }
}) })
// 颜色映射表（与图表保持一致）
const COLORS = [
'#2B79EE',
'#61D2F4',
'#34D399',
'#FBBF24',
'#F97316',
'#EF4444',
'#A855F7',
'#6B7280',
]
// 获取银行机构申请详情 // 获取银行机构申请详情
const bankDetails = computed(() => getBankApplicationDetails(props.data, props.period)) const bankDetails = computed(() => getBankApplicationDetails(props.data, props.period))
@@ -68,26 +77,25 @@ const bankTotal = computed(() => {
return Object.values(details).reduce((sum, val) => sum + (val || 0), 0) return Object.values(details).reduce((sum, val) => sum + (val || 0), 0)
}) })
// 详细列表 // 详细列表（包含所有项，包含 0 次）
const detailList = computed(() => { const detailList = computed(() => {
const details = bankDetails.value const details = bankDetails.value
const labels = FIELD_LABELS.bank const labels = FIELD_LABELS.bank
return Object.entries(details) return Object.entries(details)
.filter(([key, value]) => value > 0) .map(([key, value], index) => ({
.map(([key, value]) => ({
key, key,
label: labels[key] || key, label: labels[key] || key,
value value: value || 0,
color: COLORS[index % COLORS.length],
})) }))
.sort((a, b) => b.value - a.value)
}) })
// 饼图配置 // 饼图配置
const pieChartOption = computed(() => { const pieChartOption = computed(() => {
const list = detailList.value const list = detailList.value
if (list.length === 0) { if (!list || list.length === 0) {
return { return {
title: { title: {
text: '暂无数据', text: '暂无数据',
@@ -106,20 +114,23 @@ const pieChartOption = computed(() => {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c}次 ({d}%)' formatter: '{b}: {c}次 ({d}%)'
}, },
legend: { graphic: {
orient: 'vertical', type: 'text',
left: 'left', left: 'center',
top: 'middle', top: 'center',
textStyle: { style: {
fontSize: 11 text: '银行机构',
} fill: '#111827',
fontSize: 14,
fontWeight: 'bold',
},
}, },
series: [ series: [
{ {
name: '申请次数', name: '申请次数',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
center: ['60%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 4, borderRadius: 4,
@@ -127,19 +138,27 @@ const pieChartOption = computed(() => {
borderWidth: 2 borderWidth: 2
}, },
label: { label: {
show: true, show: false
formatter: '{b}\n{c}次'
}, },
emphasis: { emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 14,
fontWeight: 'bold' fontWeight: 'bold',
color: '#333'
} }
}, },
data: list.map(item => ({ data: list.map(item => ({
value: item.value, value: item.value,
name: item.label name: item.label,
itemStyle: {
color: item.color
}
})) }))
} }
] ]
@@ -147,12 +166,9 @@ const pieChartOption = computed(() => {
}) })
</script> </script>
<style scoped> <style lang="scss" scoped>
.bank-institution-section { .chart-container {
background: #f9fafb; width: 100%;
padding: 16px; height: 100%;
border-radius: 8px;
} }
</style> </style>

94
src/ui/JRZQ6F2A/components/BankOrgSection.vue
View File

@@ -1,23 +1,19 @@
<template> <template>
<div class="bank-org-section mb-6"> <div class="mb-6">
<div class="flex items-center mb-4"> <LTitle title="银行机构申请机构数分布" />
<span class="font-bold text-gray-800">银行机构 {{ bankTotal }}家</span> <div class="mt-4">
</div> <!-- 饼图：宽度占满 -->
<div class="h-64 mb-4">
<div class="grid grid-cols-2 gap-4">
<!-- 饼图 -->
<div class="h-64">
<v-chart class="chart-container" :option="pieChartOption" autoresize /> <v-chart class="chart-container" :option="pieChartOption" autoresize />
</div> </div>
<!-- 详细列表 --> <!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
<div class="space-y-2"> <div class="space-y-2">
<div <div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
v-for="(item, index) in detailList" <div class="flex items-center">
:key="index" <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
>
<span class="text-gray-600">{{ item.label }}</span> <span class="text-gray-600">{{ item.label }}</span>
</div>
<span class="text-[#333333] font-bold">{{ item.value }}家</span> <span class="text-[#333333] font-bold">{{ item.value }}家</span>
</div> </div>
</div> </div>
@@ -36,6 +32,7 @@ import {
TooltipComponent, TooltipComponent,
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { getBankOrgDetails, FIELD_LABELS } from '../utils/dataParser' import { getBankOrgDetails, FIELD_LABELS } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
@@ -59,6 +56,18 @@ const props = defineProps({
} }
}) })
// 颜色映射表（与图表保持一致）
const COLORS = [
'#2B79EE',
'#61D2F4',
'#34D399',
'#FBBF24',
'#F97316',
'#EF4444',
'#A855F7',
'#6B7280',
]
// 获取银行机构数详情 // 获取银行机构数详情
const bankOrgs = computed(() => getBankOrgDetails(props.data, props.period)) const bankOrgs = computed(() => getBankOrgDetails(props.data, props.period))
@@ -68,26 +77,25 @@ const bankTotal = computed(() => {
return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0) return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
}) })
// 详细列表 // 详细列表（包含所有项，包含 0 家）
const detailList = computed(() => { const detailList = computed(() => {
const orgs = bankOrgs.value const orgs = bankOrgs.value
const labels = FIELD_LABELS.bank const labels = FIELD_LABELS.bank
return Object.entries(orgs) return Object.entries(orgs)
.filter(([key, value]) => value > 0) .map(([key, value], index) => ({
.map(([key, value]) => ({
key, key,
label: labels[key] || key, label: labels[key] || key,
value value: value || 0,
color: COLORS[index % COLORS.length],
})) }))
.sort((a, b) => b.value - a.value)
}) })
// 饼图配置 // 饼图配置
const pieChartOption = computed(() => { const pieChartOption = computed(() => {
const list = detailList.value const list = detailList.value
if (list.length === 0) { if (!list || list.length === 0) {
return { return {
title: { title: {
text: '暂无数据', text: '暂无数据',
@@ -106,20 +114,23 @@ const pieChartOption = computed(() => {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c}家 ({d}%)' formatter: '{b}: {c}家 ({d}%)'
}, },
legend: { graphic: {
orient: 'vertical', type: 'text',
left: 'left', left: 'center',
top: 'middle', top: 'center',
textStyle: { style: {
fontSize: 11 text: '银行机构',
} fill: '#111827',
fontSize: 14,
fontWeight: 'bold',
},
}, },
series: [ series: [
{ {
name: '机构数', name: '机构数',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
center: ['60%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 4, borderRadius: 4,
@@ -127,19 +138,27 @@ const pieChartOption = computed(() => {
borderWidth: 2 borderWidth: 2
}, },
label: { label: {
show: true, show: false
formatter: '{b}\n{c}家'
}, },
emphasis: { emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 14,
fontWeight: 'bold' fontWeight: 'bold',
color: '#333'
} }
}, },
data: list.map(item => ({ data: list.map(item => ({
value: item.value, value: item.value,
name: item.label name: item.label,
itemStyle: {
color: item.color
}
})) }))
} }
] ]
@@ -147,12 +166,9 @@ const pieChartOption = computed(() => {
}) })
</script> </script>
<style scoped> <style lang="scss" scoped>
.bank-org-section { .chart-container {
background: #f9fafb; width: 100%;
padding: 16px; height: 100%;
border-radius: 8px;
} }
</style> </style>

68
src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
View File

@@ -1,12 +1,11 @@
<template> <template>
<div class="card institution-total-section"> <div class="card institution-total-section">
<div class="rounded-lg border border-gray-200 pb-2 mb-4"> <div class="rounded-lg border border-gray-200 pb-2 mb-4">
<div class="flex items-center mb-4 p-4"> <div class="mt-4">
<span class="font-bold text-gray-800 text-lg">申请机构总数 (银行+非银) {{ totalCount }}家</span>
</div>
<!-- Tab切换 --> <!-- Tab切换 -->
<div class="px-4 mb-4"> <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-tabs v-model:active="activeTab" color="var(--color-primary)">
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label"> <van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="p-4"> <div class="p-4">
@@ -21,10 +20,13 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import LTitle from '@/components/LTitle.vue'
import { getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser' import { getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
import BankOrgSection from './BankOrgSection.vue' import BankOrgSection from './BankOrgSection.vue'
import NBankOrgSection from './NBankOrgSection.vue' import NBankOrgSection from './NBankOrgSection.vue'
@@ -58,10 +60,60 @@ const totalCount = computed(() => {
}) })
</script> </script>
<style scoped> <style lang="scss" scoped>
.card { .card {
background: #ffffff; 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> </style>

94
src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
View File

@@ -1,23 +1,19 @@
<template> <template>
<div class="nbank-institution-section mb-6"> <div class="mb-6">
<div class="flex items-center mb-4"> <LTitle title="非银机构申请分布" />
<span class="font-bold text-gray-800">非银机构 {{ nbankTotal }}次</span> <div class="mt-4">
</div> <!-- 饼图：宽度占满 -->
<div class="h-64 mb-4">
<div class="grid grid-cols-2 gap-4">
<!-- 饼图 -->
<div class="h-64">
<v-chart class="chart-container" :option="pieChartOption" autoresize /> <v-chart class="chart-container" :option="pieChartOption" autoresize />
</div> </div>
<!-- 详细列表 --> <!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
<div class="space-y-2"> <div class="space-y-2">
<div <div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
v-for="(item, index) in detailList" <div class="flex items-center">
:key="index" <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
>
<span class="text-gray-600">{{ item.label }}</span> <span class="text-gray-600">{{ item.label }}</span>
</div>
<span class="text-[#333333] font-bold">{{ item.value }}次</span> <span class="text-[#333333] font-bold">{{ item.value }}次</span>
</div> </div>
</div> </div>
@@ -36,6 +32,7 @@ import {
TooltipComponent, TooltipComponent,
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { getNBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser' import { getNBankApplicationDetails, FIELD_LABELS } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
@@ -59,6 +56,18 @@ const props = defineProps({
} }
}) })
// 颜色映射表（与图表保持一致）
const COLORS = [
'#2B79EE',
'#61D2F4',
'#34D399',
'#FBBF24',
'#F97316',
'#EF4444',
'#A855F7',
'#6B7280',
]
// 获取非银机构申请详情 // 获取非银机构申请详情
const nbankDetails = computed(() => getNBankApplicationDetails(props.data, props.period)) const nbankDetails = computed(() => getNBankApplicationDetails(props.data, props.period))
@@ -68,26 +77,25 @@ const nbankTotal = computed(() => {
return Object.values(details).reduce((sum, val) => sum + (val || 0), 0) return Object.values(details).reduce((sum, val) => sum + (val || 0), 0)
}) })
// 详细列表 // 详细列表（包含所有项，包含 0 次）
const detailList = computed(() => { const detailList = computed(() => {
const details = nbankDetails.value const details = nbankDetails.value
const labels = FIELD_LABELS.nbank const labels = FIELD_LABELS.nbank
return Object.entries(details) return Object.entries(details)
.filter(([key, value]) => value > 0) .map(([key, value], index) => ({
.map(([key, value]) => ({
key, key,
label: labels[key] || key, label: labels[key] || key,
value value: value || 0,
color: COLORS[index % COLORS.length],
})) }))
.sort((a, b) => b.value - a.value)
}) })
// 饼图配置 // 饼图配置
const pieChartOption = computed(() => { const pieChartOption = computed(() => {
const list = detailList.value const list = detailList.value
if (list.length === 0) { if (!list || list.length === 0) {
return { return {
title: { title: {
text: '暂无数据', text: '暂无数据',
@@ -106,20 +114,23 @@ const pieChartOption = computed(() => {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c}次 ({d}%)' formatter: '{b}: {c}次 ({d}%)'
}, },
legend: { graphic: {
orient: 'vertical', type: 'text',
left: 'left', left: 'center',
top: 'middle', top: 'center',
textStyle: { style: {
fontSize: 11 text: '非银机构',
} fill: '#111827',
fontSize: 14,
fontWeight: 'bold',
},
}, },
series: [ series: [
{ {
name: '申请次数', name: '申请次数',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
center: ['60%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 4, borderRadius: 4,
@@ -127,19 +138,27 @@ const pieChartOption = computed(() => {
borderWidth: 2 borderWidth: 2
}, },
label: { label: {
show: true, show: false
formatter: '{b}\n{c}次'
}, },
emphasis: { emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 14,
fontWeight: 'bold' fontWeight: 'bold',
color: '#333'
} }
}, },
data: list.map(item => ({ data: list.map(item => ({
value: item.value, value: item.value,
name: item.label name: item.label,
itemStyle: {
color: item.color
}
})) }))
} }
] ]
@@ -147,12 +166,9 @@ const pieChartOption = computed(() => {
}) })
</script> </script>
<style scoped> <style lang="scss" scoped>
.nbank-institution-section { .chart-container {
background: #f9fafb; width: 100%;
padding: 16px; height: 100%;
border-radius: 8px;
} }
</style> </style>

94
src/ui/JRZQ6F2A/components/NBankOrgSection.vue
View File

@@ -1,23 +1,19 @@
<template> <template>
<div class="nbank-org-section mb-6"> <div class="mb-6">
<div class="flex items-center mb-4"> <LTitle title="非银机构申请机构数分布" />
<span class="font-bold text-gray-800">非银机构 {{ nbankTotal }}家</span> <div class="mt-4">
</div> <!-- 饼图：宽度占满 -->
<div class="h-64 mb-4">
<div class="grid grid-cols-2 gap-4">
<!-- 饼图 -->
<div class="h-64">
<v-chart class="chart-container" :option="pieChartOption" autoresize /> <v-chart class="chart-container" :option="pieChartOption" autoresize />
</div> </div>
<!-- 详细列表 --> <!-- 详细列表：在图表下方，展示所有项并带颜色标识 -->
<div class="space-y-2"> <div class="space-y-2">
<div <div v-for="(item, index) in detailList" :key="index" class="flex justify-between items-center text-sm">
v-for="(item, index) in detailList" <div class="flex items-center">
:key="index" <span class="w-2 h-2 rounded-full mr-2" :style="{ backgroundColor: item.color }" />
class="flex justify-between items-center text-sm py-1 border-b border-gray-100"
>
<span class="text-gray-600">{{ item.label }}</span> <span class="text-gray-600">{{ item.label }}</span>
</div>
<span class="text-[#333333] font-bold">{{ item.value }}家</span> <span class="text-[#333333] font-bold">{{ item.value }}家</span>
</div> </div>
</div> </div>
@@ -36,6 +32,7 @@ import {
TooltipComponent, TooltipComponent,
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import LTitle from '@/components/LTitle.vue'
import { getNBankOrgDetails, FIELD_LABELS } from '../utils/dataParser' import { getNBankOrgDetails, FIELD_LABELS } from '../utils/dataParser'
// 注册ECharts组件 // 注册ECharts组件
@@ -59,6 +56,18 @@ const props = defineProps({
} }
}) })
// 颜色映射表（与图表保持一致）
const COLORS = [
'#2B79EE',
'#61D2F4',
'#34D399',
'#FBBF24',
'#F97316',
'#EF4444',
'#A855F7',
'#6B7280',
]
// 获取非银机构数详情 // 获取非银机构数详情
const nbankOrgs = computed(() => getNBankOrgDetails(props.data, props.period)) const nbankOrgs = computed(() => getNBankOrgDetails(props.data, props.period))
@@ -68,26 +77,25 @@ const nbankTotal = computed(() => {
return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0) return Object.values(orgs).reduce((sum, val) => sum + (val || 0), 0)
}) })
// 详细列表 // 详细列表（包含所有项，包含 0 家）
const detailList = computed(() => { const detailList = computed(() => {
const orgs = nbankOrgs.value const orgs = nbankOrgs.value
const labels = FIELD_LABELS.nbank const labels = FIELD_LABELS.nbank
return Object.entries(orgs) return Object.entries(orgs)
.filter(([key, value]) => value > 0) .map(([key, value], index) => ({
.map(([key, value]) => ({
key, key,
label: labels[key] || key, label: labels[key] || key,
value value: value || 0,
color: COLORS[index % COLORS.length],
})) }))
.sort((a, b) => b.value - a.value)
}) })
// 饼图配置 // 饼图配置
const pieChartOption = computed(() => { const pieChartOption = computed(() => {
const list = detailList.value const list = detailList.value
if (list.length === 0) { if (!list || list.length === 0) {
return { return {
title: { title: {
text: '暂无数据', text: '暂无数据',
@@ -106,20 +114,23 @@ const pieChartOption = computed(() => {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c}家 ({d}%)' formatter: '{b}: {c}家 ({d}%)'
}, },
legend: { graphic: {
orient: 'vertical', type: 'text',
left: 'left', left: 'center',
top: 'middle', top: 'center',
textStyle: { style: {
fontSize: 11 text: '非银机构',
} fill: '#111827',
fontSize: 14,
fontWeight: 'bold',
},
}, },
series: [ series: [
{ {
name: '机构数', name: '机构数',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
center: ['60%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 4, borderRadius: 4,
@@ -127,19 +138,27 @@ const pieChartOption = computed(() => {
borderWidth: 2 borderWidth: 2
}, },
label: { label: {
show: true, show: false
formatter: '{b}\n{c}家'
}, },
emphasis: { emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: { label: {
show: true, show: true,
fontSize: 14, fontSize: 14,
fontWeight: 'bold' fontWeight: 'bold',
color: '#333'
} }
}, },
data: list.map(item => ({ data: list.map(item => ({
value: item.value, value: item.value,
name: item.label name: item.label,
itemStyle: {
color: item.color
}
})) }))
} }
] ]
@@ -147,12 +166,9 @@ const pieChartOption = computed(() => {
}) })
</script> </script>
<style scoped> <style lang="scss" scoped>
.nbank-org-section { .chart-container {
background: #f9fafb; width: 100%;
padding: 16px; height: 100%;
border-radius: 8px;
} }
</style> </style>

184
src/ui/JRZQ6F2A/components/ProductTypeDistributionSection.vue Normal file
View 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
}

79
src/ui/JRZQ6F2A/components/RecentIntensiveApplicationSection.vue Normal file
View File

@@ -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>

72
src/ui/JRZQ6F2A/components/SummaryApplyStats.vue Normal file
View File

@@ -0,0 +1,72 @@
<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>

16
src/ui/JRZQ6F2A/index.vue
View File

@@ -1,8 +1,17 @@
<template> <template>
<div class="card shadow-sm rounded-xl overflow-hidden flex flex-col gap-4"> <div class="flex flex-col gap-4">
<!-- 统计概览小模块 -->
<SummaryApplyStats :data="variableValue" />
<!-- 申请次数 --> <!-- 申请次数 -->
<ApplicationCountSection :data="variableValue" /> <ApplicationCountSection :data="variableValue" />
<!-- 产品类型申请分布 -->
<ProductTypeDistributionSection :data="variableValue" />
<!-- 近期集中申请提示 -->
<RecentIntensiveApplicationSection :data="variableValue" />
<!-- 申请总次数 (银行+非银) --> <!-- 申请总次数 (银行+非银) -->
<ApplicationTotalSection :data="variableValue" /> <ApplicationTotalSection :data="variableValue" />
@@ -18,6 +27,9 @@ import { extractVariableValue } from './utils/dataParser'
import ApplicationCountSection from './components/ApplicationCountSection.vue' import ApplicationCountSection from './components/ApplicationCountSection.vue'
import ApplicationTotalSection from './components/ApplicationTotalSection.vue' import ApplicationTotalSection from './components/ApplicationTotalSection.vue'
import InstitutionTotalSection from './components/InstitutionTotalSection.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({ const props = defineProps({
data: { data: {
@@ -114,5 +126,3 @@ defineExpose({
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
} }
</style> </style>

176
src/ui/JRZQ6F2A/utils/dataParser.js
View File

@@ -7,14 +7,19 @@
* 获取字段值，处理空值 * 获取字段值，处理空值
*/ */
export function getValue(value) { export function getValue(value) {
if (value === undefined || value === null || value === '' || value === '空') { if (
return 0 value === undefined ||
value === null ||
value === "" ||
value === "空"
) {
return 0;
} }
// 如果是字符串数字，转换为数字 // 如果是字符串数字，转换为数字
if (typeof value === 'string' && /^\d+(\.\d+)?$/.test(value)) { if (typeof value === "string" && /^\d+(\.\d+)?$/.test(value)) {
return parseFloat(value) return parseFloat(value);
} }
return value return value;
} }
/** /**
@@ -22,12 +27,14 @@ export function getValue(value) {
*/ */
export function extractVariableValue(data) { export function extractVariableValue(data) {
try { try {
return data?.risk_screen_v2?.variables?.find( return (
v => v.variableName === 'bairong_applyloan_extend' data?.risk_screen_v2?.variables?.find(
(v) => v.variableName === "bairong_applyloan_extend"
)?.variableValue || {} )?.variableValue || {}
);
} catch (error) { } catch (error) {
console.error('提取数据失败:', error) console.error("提取数据失败:", error);
return {} return {};
} }
} }
@@ -35,59 +42,81 @@ export function extractVariableValue(data) {
* 时间段映射 * 时间段映射
*/ */
export const PERIOD_MAP = { export const PERIOD_MAP = {
d7: { label: '7天', prefix: 'als_d7' }, d7: { label: "7天", prefix: "als_d7" },
d15: { label: '15天', prefix: 'als_d15' }, d15: { label: "15天", prefix: "als_d15" },
m1: { label: '1个月', prefix: 'als_m1' }, m1: { label: "1个月", prefix: "als_m1" },
m3: { label: '3个月', prefix: 'als_m3' }, m3: { label: "3个月", prefix: "als_m3" },
m6: { label: '6个月', prefix: 'als_m6' }, m6: { label: "6个月", prefix: "als_m6" },
m12: { label: '12个月', prefix: 'als_m12' } m12: { label: "12个月", prefix: "als_m12" },
} };
/** /**
* 获取申请次数（按时间段） * 获取申请次数（按时间段）
*/ */
export function getApplicationCounts(variableValue, period) { export function getApplicationCounts(variableValue, period) {
const { prefix } = PERIOD_MAP[period] const { prefix } = PERIOD_MAP[period];
// 计算总申请次数（所有类型的申请次数之和） // 计算总申请次数（所有类型的申请次数之和）
const types = [ const types = [
'id_pdl_allnum', // 线上小额现金贷 "id_pdl_allnum", // 线上小额现金贷
'id_caon_allnum', // 线上现金分期 "id_caon_allnum", // 线上现金分期
'id_rel_allnum', // 信用卡（类信用卡） "id_rel_allnum", // 信用卡（类信用卡）
'id_caoff_allnum', // 线下现金分期 "id_caoff_allnum", // 线下现金分期
'id_cooff_allnum', // 线下消费分期 "id_cooff_allnum", // 线下消费分期
'id_af_allnum', // 汽车金融 "id_af_allnum", // 汽车金融
'id_coon_allnum', // 线上消费分期 "id_coon_allnum", // 线上消费分期
'id_oth_allnum' // 其他 "id_oth_allnum", // 其他
] ];
let total = 0 let total = 0;
types.forEach(type => { types.forEach((type) => {
const value = getValue(variableValue[`${prefix}_${type}`]) const value = getValue(variableValue[`${prefix}_${type}`]);
total += value total += value;
}) });
// 银行机构申请次数 // 银行机构申请次数
const bankTotal = getValue(variableValue[`${prefix}_id_bank_allnum`]) || 0 const bankTotal = getValue(variableValue[`${prefix}_id_bank_allnum`]) || 0;
// 非银机构申请次数 // 非银机构申请次数
const nbankTotal = getValue(variableValue[`${prefix}_id_nbank_allnum`]) || 0 const nbankTotal =
getValue(variableValue[`${prefix}_id_nbank_allnum`]) || 0;
// 如果计算出的total为0，则使用银行+非银的总和 // 如果计算出的total为0，则使用银行+非银的总和
const finalTotal = total > 0 ? total : (bankTotal + nbankTotal) const finalTotal = total > 0 ? total : bankTotal + nbankTotal;
return { return {
total: finalTotal, total: finalTotal,
bank: bankTotal, bank: bankTotal,
nbank: nbankTotal 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) { export function getBankApplicationDetails(variableValue, period) {
const { prefix } = PERIOD_MAP[period] const { prefix } = PERIOD_MAP[period];
return { return {
pdl: getValue(variableValue[`${prefix}_id_pdl_allnum`]), // 线上小额现金贷 pdl: getValue(variableValue[`${prefix}_id_pdl_allnum`]), // 线上小额现金贷
@@ -100,15 +129,15 @@ export function getBankApplicationDetails(variableValue, period) {
oth: getValue(variableValue[`${prefix}_id_oth_allnum`]), // 其他 oth: getValue(variableValue[`${prefix}_id_oth_allnum`]), // 其他
bank: getValue(variableValue[`${prefix}_id_bank_allnum`]), // 银行机构申请 bank: getValue(variableValue[`${prefix}_id_bank_allnum`]), // 银行机构申请
tra: getValue(variableValue[`${prefix}_id_bank_tra_allnum`]), // 传统银行申请 tra: getValue(variableValue[`${prefix}_id_bank_tra_allnum`]), // 传统银行申请
ret: getValue(variableValue[`${prefix}_id_bank_ret_allnum`]) // 网络零售银行申请 ret: getValue(variableValue[`${prefix}_id_bank_ret_allnum`]), // 网络零售银行申请
} };
} }
/** /**
* 获取非银机构申请次数详情 * 获取非银机构申请次数详情
*/ */
export function getNBankApplicationDetails(variableValue, period) { export function getNBankApplicationDetails(variableValue, period) {
const { prefix } = PERIOD_MAP[period] const { prefix } = PERIOD_MAP[period];
return { return {
nbank: getValue(variableValue[`${prefix}_id_nbank_allnum`]), // 非银机构 nbank: getValue(variableValue[`${prefix}_id_nbank_allnum`]), // 非银机构
@@ -123,15 +152,15 @@ export function getNBankApplicationDetails(variableValue, period) {
sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_allnum`]), // 持牌小贷机构 sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_allnum`]), // 持牌小贷机构
cons: getValue(variableValue[`${prefix}_id_nbank_cons_allnum`]), // 持牌消费金融机构 cons: getValue(variableValue[`${prefix}_id_nbank_cons_allnum`]), // 持牌消费金融机构
finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_allnum`]), // 持牌融资租赁机构 finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_allnum`]), // 持牌融资租赁机构
else: getValue(variableValue[`${prefix}_id_nbank_else_allnum`]) // 其他申请 else: getValue(variableValue[`${prefix}_id_nbank_else_allnum`]), // 其他申请
} };
} }
/** /**
* 获取银行机构申请机构数详情 * 获取银行机构申请机构数详情
*/ */
export function getBankOrgDetails(variableValue, period) { export function getBankOrgDetails(variableValue, period) {
const { prefix } = PERIOD_MAP[period] const { prefix } = PERIOD_MAP[period];
return { return {
pdl: getValue(variableValue[`${prefix}_id_pdl_orgnum`]), pdl: getValue(variableValue[`${prefix}_id_pdl_orgnum`]),
@@ -144,15 +173,15 @@ export function getBankOrgDetails(variableValue, period) {
oth: getValue(variableValue[`${prefix}_id_oth_orgnum`]), oth: getValue(variableValue[`${prefix}_id_oth_orgnum`]),
bank: getValue(variableValue[`${prefix}_id_bank_orgnum`]), bank: getValue(variableValue[`${prefix}_id_bank_orgnum`]),
tra: getValue(variableValue[`${prefix}_id_bank_tra_orgnum`]), tra: getValue(variableValue[`${prefix}_id_bank_tra_orgnum`]),
ret: getValue(variableValue[`${prefix}_id_bank_ret_orgnum`]) ret: getValue(variableValue[`${prefix}_id_bank_ret_orgnum`]),
} };
} }
/** /**
* 获取非银机构申请机构数详情 * 获取非银机构申请机构数详情
*/ */
export function getNBankOrgDetails(variableValue, period) { export function getNBankOrgDetails(variableValue, period) {
const { prefix } = PERIOD_MAP[period] const { prefix } = PERIOD_MAP[period];
return { return {
nbank: getValue(variableValue[`${prefix}_id_nbank_orgnum`]), nbank: getValue(variableValue[`${prefix}_id_nbank_orgnum`]),
@@ -167,8 +196,8 @@ export function getNBankOrgDetails(variableValue, period) {
sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_orgnum`]), sloan: getValue(variableValue[`${prefix}_id_nbank_sloan_orgnum`]),
cons: getValue(variableValue[`${prefix}_id_nbank_cons_orgnum`]), cons: getValue(variableValue[`${prefix}_id_nbank_cons_orgnum`]),
finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_orgnum`]), finlea: getValue(variableValue[`${prefix}_id_nbank_finlea_orgnum`]),
else: getValue(variableValue[`${prefix}_id_nbank_else_orgnum`]) else: getValue(variableValue[`${prefix}_id_nbank_else_orgnum`]),
} };
} }
/** /**
@@ -177,33 +206,32 @@ export function getNBankOrgDetails(variableValue, period) {
export const FIELD_LABELS = { export const FIELD_LABELS = {
// 银行机构申请类型 // 银行机构申请类型
bank: { bank: {
pdl: '申请线上小额现金贷', pdl: "申请线上小额现金贷",
caon: '申请线上现金分期', caon: "申请线上现金分期",
rel: '申请信用卡（类信用卡）', rel: "申请信用卡（类信用卡）",
caoff: '申请线下现金分期', caoff: "申请线下现金分期",
cooff: '申请线下消费分期', cooff: "申请线下消费分期",
af: '申请汽车金融', af: "申请汽车金融",
coon: '申请线上消费分期', coon: "申请线上消费分期",
oth: '申请其他', oth: "申请其他",
bank: '银行机构申请', bank: "银行机构申请",
tra: '银行机构-传统银行申请', tra: "银行机构-传统银行申请",
ret: '银行机构-网络零售银行申请' ret: "银行机构-网络零售银行申请",
}, },
// 非银机构申请类型 // 非银机构申请类型
nbank: { nbank: {
nbank: '非银机构', nbank: "非银机构",
p2p: '改制机构', p2p: "改制机构",
mc: '小贷机构', mc: "小贷机构",
ca: '现金类分期机构', ca: "现金类分期机构",
cf: '消费类分期机构', cf: "消费类分期机构",
com: '代偿类分期机构', com: "代偿类分期机构",
oth: '其他申请', oth: "其他申请",
nsloan: '持牌网络小贷机构', nsloan: "持牌网络小贷机构",
autofin: '汽车金融', autofin: "汽车金融",
sloan: '持牌小贷机构', sloan: "持牌小贷机构",
cons: '持牌消费金融机构', cons: "持牌消费金融机构",
finlea: '持牌融资租赁机构', finlea: "持牌融资租赁机构",
else: '其他申请' else: "其他申请",
} },
} };