新增两组件
This commit is contained in:
@@ -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
|
||||
})
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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>
|
||||
@@ -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 (
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user