新增两组件

This commit is contained in:
2025-12-18 15:36:43 +08:00
parent 391d34cc10
commit e6ae3c4a28
28 changed files with 3425 additions and 154 deletions

View File

@@ -52,6 +52,11 @@ const props = defineProps({
type: Object,
required: true,
default: () => ({})
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
}
})
@@ -61,7 +66,7 @@ const labels = periodKeys.map(key => PERIOD_MAP[key].label)
// 总申请次数图表配置
const chartOption = computed(() => {
const data = periodKeys.map(key => {
const counts = getApplicationCounts(props.data, key)
const counts = getApplicationCounts(props.data, key, props.dimension)
return counts.total
})
@@ -137,11 +142,11 @@ const chartOption = computed(() => {
// 特殊时段(周末 / 夜间)图表配置
const specialChartOption = computed(() => {
const weekendData = periodKeys.map(key => {
const s = getSpecialPeriodCounts(props.data, key)
const s = getSpecialPeriodCounts(props.data, key, props.dimension)
return s.weekend || 0
})
const nightData = periodKeys.map(key => {
const s = getSpecialPeriodCounts(props.data, key)
const s = getSpecialPeriodCounts(props.data, key, props.dimension)
return s.night || 0
})

View File

@@ -1,9 +1,6 @@
<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">
@@ -13,10 +10,9 @@
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="p-4">
<!-- 银行机构 -->
<BankInstitutionSection :data="data" :period="period.key" />
<BankInstitutionSection :data="data" :period="period.key" :dimension="dimension" />
<!-- 非银机构 -->
<NBankInstitutionSection :data="data" :period="period.key" />
<NBankInstitutionSection :data="data" :period="period.key" :dimension="dimension" />
</div>
</van-tab>
</van-tabs>
@@ -28,9 +24,8 @@
</template>
<script setup>
import { computed, ref } from 'vue'
import { 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'
@@ -39,6 +34,11 @@ const props = defineProps({
type: Object,
required: true,
default: () => ({})
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
}
})
@@ -52,12 +52,6 @@ const periods = [
{ 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>

View File

@@ -53,6 +53,11 @@ const props = defineProps({
period: {
type: String,
required: true
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
}
})
@@ -69,7 +74,9 @@ const COLORS = [
]
// 获取银行机构申请详情
const bankDetails = computed(() => getBankApplicationDetails(props.data, props.period))
const bankDetails = computed(() =>
getBankApplicationDetails(props.data, props.period, props.dimension)
)
// 计算银行机构总次数
const bankTotal = computed(() => {

View File

@@ -53,6 +53,11 @@ const props = defineProps({
period: {
type: String,
required: true
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
}
})
@@ -69,7 +74,9 @@ const COLORS = [
]
// 获取银行机构数详情
const bankOrgs = computed(() => getBankOrgDetails(props.data, props.period))
const bankOrgs = computed(() =>
getBankOrgDetails(props.data, props.period, props.dimension)
)
// 计算银行机构总数
const bankTotal = computed(() => {

View File

@@ -10,10 +10,10 @@
<van-tab v-for="(period, index) in periods" :key="period.key" :title="period.label">
<div class="p-4">
<!-- 银行机构 -->
<BankOrgSection :data="data" :period="period.key" />
<BankOrgSection :data="data" :period="period.key" :dimension="dimension" />
<!-- 非银机构 -->
<NBankOrgSection :data="data" :period="period.key" />
<NBankOrgSection :data="data" :period="period.key" :dimension="dimension" />
</div>
</van-tab>
</van-tabs>
@@ -25,9 +25,8 @@
</template>
<script setup>
import { computed, ref } from 'vue'
import { 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'
@@ -36,6 +35,11 @@ const props = defineProps({
type: Object,
required: true,
default: () => ({})
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
}
})
@@ -49,15 +53,6 @@ const periods = [
{ 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>

View File

@@ -53,6 +53,11 @@ const props = defineProps({
period: {
type: String,
required: true
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
}
})
@@ -69,7 +74,9 @@ const COLORS = [
]
// 获取非银机构申请详情
const nbankDetails = computed(() => getNBankApplicationDetails(props.data, props.period))
const nbankDetails = computed(() =>
getNBankApplicationDetails(props.data, props.period, props.dimension)
)
// 计算非银机构总次数
const nbankTotal = computed(() => {

View File

@@ -53,6 +53,11 @@ const props = defineProps({
period: {
type: String,
required: true
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
}
})
@@ -69,7 +74,9 @@ const COLORS = [
]
// 获取非银机构数详情
const nbankOrgs = computed(() => getNBankOrgDetails(props.data, props.period))
const nbankOrgs = computed(() =>
getNBankOrgDetails(props.data, props.period, props.dimension)
)
// 计算非银机构总数
const nbankTotal = computed(() => {

View File

@@ -52,6 +52,11 @@ const props = defineProps({
type: Object,
required: true,
default: () => ({})
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id'
}
})
@@ -79,7 +84,8 @@ const detailList = computed(() => {
const labels = FIELD_LABELS.bank || {}
return TYPE_KEYS.map((key, index) => {
const field = `${PREFIX}_id_${key}_allnum`
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
const field = `${PREFIX}_${dimKey}_${key}_allnum`
const value = getValue(v[field]) || 0
return {
@@ -170,15 +176,4 @@ const chartOption = computed(() => {
width: 100%;
height: 100%;
}
</style>
{
"cells": [],
"metadata": {
"language_info": {
"name": "python"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
</style>

View File

@@ -48,15 +48,38 @@ const props = defineProps({
required: true,
default: () => ({}),
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id',
},
})
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 bankCons = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_bank_consnum`])
})
const bankDays = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_bank_csinteday`])
})
const nbankCons = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_nbank_consnum`])
})
const nbankDays = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_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 bankGap = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_bank_inteday`])
})
const nbankGap = computed(() => {
const dimKey = props.dimension === 'cell' ? 'cell' : 'id'
return getValue(props.data?.[`als_lst_${dimKey}_nbank_inteday`])
})
const hasAnyData = computed(() => {
return (

View File

@@ -1,29 +1,56 @@
<template>
<div class="card rounded-lg border border-gray-200 pb-2 mb-2">
<div class="flex items-center mb-4 p-4">
<div class="flex items-center justify-between mb-4 px-4 pt-4">
<span class="font-bold text-gray-800">借贷意向统计概览</span>
<!-- 维度切换按钮组 -->
<div class="inline-flex rounded-full overflow-hidden text-sm">
<button class="px-4 py-1 border border-[#2B79EE] rounded-l-full"
:class="dimension === 'id' ? 'bg-[#2B79EE] text-white' : 'bg-white text-[#2B79EE]'"
@click="$emit('update:dimension', 'id')">
身份证匹配
</button>
<button class="px-4 py-1 border border-[#2B79EE] border-l-0 rounded-r-full"
:class="dimension === 'cell' ? 'bg-[#2B79EE] text-white' : 'bg-white text-[#2B79EE]'"
@click="$emit('update:dimension', 'cell')">
手机号匹配
</button>
</div>
</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 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>
<span class="text-sm text-gray-500 ml-1">{{ item.unit }}</span>
</div>
<div class="text-xs text-gray-600 mt-1">
<div class="text-sm text-gray-600 mt-1">
{{ item.label }}
</div>
</div>
</div>
<!-- 风险汇总 -->
<div class="px-4 pb-4 mt-4">
<LTitle title="风险汇总" />
<div class="space-y-2 mt-3">
<div v-for="risk in riskSummary" :key="risk.label" class="flex justify-between items-center text-sm">
<span class="text-gray-600">{{ risk.label }}</span>
<span class="font-semibold" :class="getRiskClass(risk.value)">{{ risk.value }}</span>
</div>
</div>
</div>
<!-- 风险汇总解读 -->
<Remark :content="riskRemark" title="风险解读" :default-expanded="true" />
</div>
</template>
<script setup>
import { computed } from 'vue'
import { getApplicationCounts, getBankOrgDetails, getNBankOrgDetails } from '../utils/dataParser'
import LTitle from '@/components/LTitle.vue'
import Remark from '@/components/Remark.vue'
import { getApplicationCounts, getBankOrgDetails, getNBankOrgDetails, getRiskSummary, generateRiskRemark } from '../utils/dataParser'
const props = defineProps({
data: {
@@ -31,26 +58,34 @@ const props = defineProps({
required: true,
default: () => ({}),
},
// 维度id身份证 / cell手机号
dimension: {
type: String,
default: 'id',
},
})
const items = computed(() => {
const v = props.data || {}
// 近12个月申请次数总/银行/非银)
const m12 = getApplicationCounts(v, 'm12')
const m12 = getApplicationCounts(v, 'm12', props.dimension)
// 近12个月申请机构总数银行+非银)
const bankOrgs = getBankOrgDetails(v, 'm12')
const nbankOrgs = getNBankOrgDetails(v, 'm12')
const bankOrgs = getBankOrgDetails(v, 'm12', props.dimension)
const nbankOrgs = getNBankOrgDetails(v, 'm12', props.dimension)
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 dimKey = props.dimension === 'cell' ? 'cell' : 'id'
const weekendTotal =
Number(v.als_m12_id_bank_week_allnum || 0) + Number(v.als_m12_id_nbank_week_allnum || 0)
Number(v[`als_m12_${dimKey}_bank_week_allnum`] || 0) +
Number(v[`als_m12_${dimKey}_nbank_week_allnum`] || 0)
const nightTotal =
Number(v.als_m12_id_bank_night_allnum || 0) + Number(v.als_m12_id_nbank_night_allnum || 0)
Number(v[`als_m12_${dimKey}_bank_night_allnum`] || 0) +
Number(v[`als_m12_${dimKey}_nbank_night_allnum`] || 0)
return [
{ label: '总申请次数', value: m12.total || 0, unit: '次' },
@@ -61,6 +96,32 @@ const items = computed(() => {
{ label: '周末申请次数', value: weekendTotal || 0, unit: '次' },
]
})
// 风险汇总
const riskSummary = computed(() => {
return getRiskSummary(props.data || {}, props.dimension)
})
// 风险汇总解读文本
const riskRemark = computed(() => {
return generateRiskRemark(riskSummary.value)
})
// 根据风险等级返回对应的样式类
const getRiskClass = (level) => {
switch (level) {
case '无风险':
return 'text-green-600'
case '低风险':
return 'text-blue-600'
case '中风险':
return 'text-amber-600'
case '高风险':
return 'text-red-600'
default:
return 'text-gray-600'
}
}
</script>
<style scoped>
@@ -68,5 +129,3 @@ const items = computed(() => {
background: #ffffff;
}
</style>