change
This commit is contained in:
125
src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
Normal file
125
src/ui/JRZQ6F2A/components/ApplicationCountSection.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="card application-count-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 text-lg">申请次数 {{ totalCount }}次</span>
|
||||
</div>
|
||||
|
||||
<!-- 柱状图 -->
|
||||
<div class="px-4 mb-4">
|
||||
<div class="h-64">
|
||||
<v-chart class="chart-container" :option="chartOption" autoresize />
|
||||
</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 { getApplicationCounts, PERIOD_MAP } from '../utils/dataParser'
|
||||
|
||||
// 注册ECharts组件
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GridComponent
|
||||
])
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
// 计算总申请次数（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 labels = periodKeys.map(key => PERIOD_MAP[key].label)
|
||||
|
||||
const data = periodKeys.map(key => {
|
||||
const counts = getApplicationCounts(props.data, key)
|
||||
return counts.total
|
||||
})
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: (params) => {
|
||||
const param = params[0]
|
||||
return `${param.name}<br/>${param.seriesName}: ${param.value}次`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: labels,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
formatter: '{value}次'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '申请次数',
|
||||
type: 'bar',
|
||||
data: data,
|
||||
itemStyle: {
|
||||
color: '#4A90E2'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}次',
|
||||
fontSize: 12,
|
||||
color: '#333'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
64
src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
Normal file
64
src/ui/JRZQ6F2A/components/ApplicationTotalSection.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<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 text-lg">申请总次数 (银行+非银) {{ totalCount }}次</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<div class="px-4 mb-4">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from '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 scoped>
|
||||
.card {
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
158
src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
Normal file
158
src/ui/JRZQ6F2A/components/BankInstitutionSection.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="bank-institution-section mb-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="font-bold text-gray-800">银行机构 {{ bankTotal }}次</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- 饼图 -->
|
||||
<div class="h-64">
|
||||
<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 py-1 border-b border-gray-100"
|
||||
>
|
||||
<span class="text-gray-600">{{ item.label }}</span>
|
||||
<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 { 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 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)
|
||||
})
|
||||
|
||||
// 详细列表
|
||||
const detailList = computed(() => {
|
||||
const details = bankDetails.value
|
||||
const labels = FIELD_LABELS.bank
|
||||
|
||||
return Object.entries(details)
|
||||
.filter(([key, value]) => value > 0)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
label: labels[key] || key,
|
||||
value
|
||||
}))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
})
|
||||
|
||||
// 饼图配置
|
||||
const pieChartOption = computed(() => {
|
||||
const list = detailList.value
|
||||
|
||||
if (list.length === 0) {
|
||||
return {
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}次 ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
top: 'middle',
|
||||
textStyle: {
|
||||
fontSize: 11
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '申请次数',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['60%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}\n{c}次'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
data: list.map(item => ({
|
||||
value: item.value,
|
||||
name: item.label
|
||||
}))
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bank-institution-section {
|
||||
background: #f9fafb;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
158
src/ui/JRZQ6F2A/components/BankOrgSection.vue
Normal file
158
src/ui/JRZQ6F2A/components/BankOrgSection.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="bank-org-section mb-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="font-bold text-gray-800">银行机构 {{ bankTotal }}家</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- 饼图 -->
|
||||
<div class="h-64">
|
||||
<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 py-1 border-b border-gray-100"
|
||||
>
|
||||
<span class="text-gray-600">{{ item.label }}</span>
|
||||
<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 { 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 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)
|
||||
})
|
||||
|
||||
// 详细列表
|
||||
const detailList = computed(() => {
|
||||
const orgs = bankOrgs.value
|
||||
const labels = FIELD_LABELS.bank
|
||||
|
||||
return Object.entries(orgs)
|
||||
.filter(([key, value]) => value > 0)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
label: labels[key] || key,
|
||||
value
|
||||
}))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
})
|
||||
|
||||
// 饼图配置
|
||||
const pieChartOption = computed(() => {
|
||||
const list = detailList.value
|
||||
|
||||
if (list.length === 0) {
|
||||
return {
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}家 ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
top: 'middle',
|
||||
textStyle: {
|
||||
fontSize: 11
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '机构数',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['60%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}\n{c}家'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
data: list.map(item => ({
|
||||
value: item.value,
|
||||
name: item.label
|
||||
}))
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bank-org-section {
|
||||
background: #f9fafb;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
67
src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
Normal file
67
src/ui/JRZQ6F2A/components/InstitutionTotalSection.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="card institution-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 text-lg">申请机构总数 (银行+非银) {{ totalCount }}家</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab切换 -->
|
||||
<div class="px-4 mb-4">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from '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 scoped>
|
||||
.card {
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
158
src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
Normal file
158
src/ui/JRZQ6F2A/components/NBankInstitutionSection.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="nbank-institution-section mb-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="font-bold text-gray-800">非银机构 {{ nbankTotal }}次</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- 饼图 -->
|
||||
<div class="h-64">
|
||||
<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 py-1 border-b border-gray-100"
|
||||
>
|
||||
<span class="text-gray-600">{{ item.label }}</span>
|
||||
<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 { 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 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)
|
||||
})
|
||||
|
||||
// 详细列表
|
||||
const detailList = computed(() => {
|
||||
const details = nbankDetails.value
|
||||
const labels = FIELD_LABELS.nbank
|
||||
|
||||
return Object.entries(details)
|
||||
.filter(([key, value]) => value > 0)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
label: labels[key] || key,
|
||||
value
|
||||
}))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
})
|
||||
|
||||
// 饼图配置
|
||||
const pieChartOption = computed(() => {
|
||||
const list = detailList.value
|
||||
|
||||
if (list.length === 0) {
|
||||
return {
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}次 ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
top: 'middle',
|
||||
textStyle: {
|
||||
fontSize: 11
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '申请次数',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['60%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}\n{c}次'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
data: list.map(item => ({
|
||||
value: item.value,
|
||||
name: item.label
|
||||
}))
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nbank-institution-section {
|
||||
background: #f9fafb;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
158
src/ui/JRZQ6F2A/components/NBankOrgSection.vue
Normal file
158
src/ui/JRZQ6F2A/components/NBankOrgSection.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="nbank-org-section mb-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<span class="font-bold text-gray-800">非银机构 {{ nbankTotal }}家</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- 饼图 -->
|
||||
<div class="h-64">
|
||||
<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 py-1 border-b border-gray-100"
|
||||
>
|
||||
<span class="text-gray-600">{{ item.label }}</span>
|
||||
<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 { 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 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)
|
||||
})
|
||||
|
||||
// 详细列表
|
||||
const detailList = computed(() => {
|
||||
const orgs = nbankOrgs.value
|
||||
const labels = FIELD_LABELS.nbank
|
||||
|
||||
return Object.entries(orgs)
|
||||
.filter(([key, value]) => value > 0)
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
label: labels[key] || key,
|
||||
value
|
||||
}))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
})
|
||||
|
||||
// 饼图配置
|
||||
const pieChartOption = computed(() => {
|
||||
const list = detailList.value
|
||||
|
||||
if (list.length === 0) {
|
||||
return {
|
||||
title: {
|
||||
text: '暂无数据',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}家 ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
top: 'middle',
|
||||
textStyle: {
|
||||
fontSize: 11
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '机构数',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['60%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}\n{c}家'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
data: list.map(item => ({
|
||||
value: item.value,
|
||||
name: item.label
|
||||
}))
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nbank-org-section {
|
||||
background: #f9fafb;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
118
src/ui/JRZQ6F2A/index.vue
Normal file
118
src/ui/JRZQ6F2A/index.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="card shadow-sm rounded-xl overflow-hidden flex flex-col gap-4">
|
||||
<!-- 申请次数 -->
|
||||
<ApplicationCountSection :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'
|
||||
|
||||
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>
|
||||
|
||||
|
||||
209
src/ui/JRZQ6F2A/utils/dataParser.js
Normal file
209
src/ui/JRZQ6F2A/utils/dataParser.js
Normal file
@@ -0,0 +1,209 @@
|
||||
/**
|
||||
* 数据解析工具函数
|
||||
* 用于解析借贷意向验证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 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