team/tydata-webview-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

version temp2

Browse Source
This commit is contained in:
liangzai
2025-10-24 17:08:42 +08:00
parent c1dd5551f0
commit 1a919d57ba
193 changed files with 15044 additions and 15687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

852
src/ui/CDWBG8B4D/components/LeasingRiskSection.vue
View File

@@ -1,459 +1,335 @@
<template>
<div class="leasing-risk-section card">
<LTitle title="租赁风险评估" class="mb-4" />
<!-- 评估概览 -->
<div class="leasing-overview mb-4">
<div class="bg-white rounded-lg border border-gray-200 p-4">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center">
<div class="w-8 h-8 bg-teal-500 rounded-full flex items-center justify-center mr-2">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
</div>
<span class="font-bold text-gray-800">租赁风险评估概览</span>
</div>
<div class="text-right">
<div class="text-lg font-bold" :class="getRiskFlagClass(leasingRiskAssessment.riskFlag)">
{{ getRiskFlagText(leasingRiskAssessment.riskFlag) }}
</div>
<div class="text-xs text-gray-500">风险等级</div>
<div class="p-2 relative">
<div class="flex items-center justify-between mb-3 border border-[#DDDDDD] rounded-lg p-4 bg-[#F9F9F9]">
<div class="flex items-center">
<div class="w-10 h-10 flex items-center justify-center mr-2">
<img src="@/assets/images/report/jd.png" alt="租赁风险评估概览" class="w-10 h-10 object-contain" />
</div>
<span class="font-bold text-gray-800">租赁风险评估概览</span>
</div>
<div class="font-bold" :class="getRiskFlagTagClass(leasingRiskAssessment.riskFlag)">
{{ getRiskFlagText(leasingRiskAssessment.riskFlag) }}
</div>
</div>
</div>
<!-- 3C机构申请统计 -->
<div class="institution-application-stats mb-4">
<div class="bg-white rounded-lg border border-gray-200 p-4">
<div class="flex items-center mb-3">
<div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mr-2">
<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
</div>
<span class="font-bold text-gray-800">3C机构申请统计</span>
<!-- 3C机构申请统计 -->
<div class="border border-[#DDDDDD] mb-4 rounded-lg">
<div class="flex items-center p-4">
<LTitle title="3C机构申请统计" />
</div>
<div class="space-y-3">
<!-- 近3天 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近3天申请统计</span>
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">
3天
</span>
<div class="space-y-4 py-2">
<div class="performance-item">
<div class="text-[#333333] pl-4 font-bold">近期申请数</div>
<div class="loan-evaluation-wrap">
<!-- 标签页 -->
<div class="mb-3">
<van-tabs v-model:active="activeInstitutionPeriod" line-width="20" line-height="2" color="#a22525"
class="loan-evaluation-tabs">
<van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
</van-tabs>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ formatApplicationInterval(leasingRiskAssessment.threeCInstitutionApplicationCountLast3Days) }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ formatApplicationInterval(leasingRiskAssessment.threeCInstitutionApplicationCountLast3DaysWeekend) }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ formatApplicationInterval(leasingRiskAssessment.threeCInstitutionApplicationCountLast3DaysNight) }}</span>
</div>
</div>
</div>
</div>
<!-- 近7天 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近7天申请统计</span>
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
7天
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast7Days }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast7DaysWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast7DaysNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近14天 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近14天申请统计</span>
<span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-medium">
14天
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast14Days }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast14DaysWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast14DaysNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近1个月 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近1个月申请统计</span>
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium">
1个月
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLastMonth }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLastMonthWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLastMonthNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近3个月 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近3个月申请统计</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-medium">
3个月
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast3Months }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast3MonthsWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast3MonthsNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近6个月 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近6个月申请统计</span>
<span class="px-2 py-1 bg-pink-100 text-pink-700 rounded-full text-xs font-medium">
6个月
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast6Months }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast6MonthsWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast6MonthsNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近12个月 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近12个月申请统计</span>
<span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium">
12个月
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast12Months }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast12MonthsWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCInstitutionApplicationCountLast12MonthsNight }}</span>
<!-- 内容显示 -->
<div class="loan-evaluation-content">
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">总申请数：</span>
<span class="text-lg font-bold text-gray-800">{{ institutionTotalValue }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">周末申请数：</span>
<span class="text-lg font-bold text-gray-800">{{ institutionWeekendValue }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">夜间申请数：</span>
<span class="text-lg font-bold text-gray-800">{{ institutionNightValue }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3C平台申请统计 -->
<div class="platform-application-stats">
<div class="bg-white rounded-lg border border-gray-200 p-4">
<div class="flex items-center mb-3">
<div class="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center mr-2">
<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<span class="font-bold text-gray-800">3C平台申请统计</span>
<!-- 3C平台申请统计 -->
<div class="border border-[#DDDDDD] mb-4 rounded-lg">
<div class="flex items-center p-4">
<LTitle title="3C平台申请统计" />
</div>
<div class="space-y-3">
<!-- 近3天 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近3天申请统计</span>
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">
3天
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast3Days }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast3DaysWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast3DaysNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近7天 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近7天申请统计</span>
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
7天
</span>
<div class="space-y-4 py-2">
<div class="performance-item">
<div class="text-[#333333] pl-4 font-bold">近期申请数</div>
<div class="loan-evaluation-wrap">
<!-- 标签页 -->
<div class="mb-3">
<van-tabs v-model:active="activePlatformPeriod" line-width="20" line-height="2" color="#a22525"
class="loan-evaluation-tabs">
<van-tab v-for="period in timePeriods" :key="period.key" :name="period.key" :title="period.label" />
</van-tabs>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast7Days }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast7DaysWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast7DaysNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近14天 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近14天申请统计</span>
<span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs font-medium">
14天
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast14Days }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast14DaysWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast14DaysNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近1个月 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近1个月申请统计</span>
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-medium">
1个月
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLastMonth }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLastMonthWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLastMonthNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近3个月 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近3个月申请统计</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-medium">
3个月
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast3Months }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast3MonthsWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast3MonthsNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近6个月 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近6个月申请统计</span>
<span class="px-2 py-1 bg-pink-100 text-pink-700 rounded-full text-xs font-medium">
6个月
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast6Months }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast6MonthsWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast6MonthsNight }}</span>
</div>
</div>
</div>
</div>
<!-- 近12个月 -->
<div class="time-period-item">
<div class="p-3 bg-gray-50 rounded-lg">
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-800">近12个月申请统计</span>
<span class="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium">
12个月
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs text-gray-600">
<div class="flex justify-between">
<span>总申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast12Months }}</span>
</div>
<div class="flex justify-between">
<span>周末申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast12MonthsWeekend }}</span>
</div>
<div class="flex justify-between">
<span>夜间申请次数：</span>
<span class="font-medium">{{ leasingRiskAssessment.threeCPlatformApplicationCountLast12MonthsNight }}</span>
<!-- 内容显示 -->
<div class="loan-evaluation-content">
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">总申请数：</span>
<span class="text-lg font-bold text-gray-800">{{ platformTotalValue }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">周末申请数：</span>
<span class="text-lg font-bold text-gray-800">{{ platformWeekendValue }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">夜间申请数：</span>
<span class="text-lg font-bold text-gray-800">{{ platformNightValue }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 温馨提示 -->
<LRemark content="租赁风险评估基于申请人在3C机构和3C平台的申请行为进行综合分析。数据包括不同时间段的申请次数统计，其中夜间（22:00-6:00）和周末申请可能存在较高风险。建议重点关注近期申请频率异常的情况，特别是短期内多次申请可能暗示资金紧张或其他风险因素。数据更新可能存在1-2天延迟。" />
<LRemark
content="租赁风险评估基于申请人在3C机构和3C平台的申请行为进行综合分析。数据格式为'X/Y'，其中X表示身份证匹配到的数据，Y表示手机号匹配到的数据。统计包括不同时间段的总申请、周末申请（可能存在较高风险）和夜间申请（22:00-6:00，风险较高）。建议重点关注近期申请频率异常的情况，特别是短期内多次申请可能暗示资金紧张或其他风险因素。数据更新可能存在1-2天延迟。" />
</template>
<script setup>
import LTitle from '@/components/LTitle.vue'
import LRemark from '@/components/LRemark.vue'
import { formatApplicationInterval } from '@/ui/CDWBG8B4D/utils/intervalFormatter.js'
import { ref, computed } from 'vue'
import { useRiskNotifier } from '@/composables/useRiskNotifier'
const props = defineProps({
data: {
type: Object,
required: true,
},
apiId: {
type: String,
default: '',
},
index: {
type: Number,
default: 0,
},
notifyRiskStatus: {
type: Function,
default: () => { },
},
})
// 从data中解构出需要的字段
const { leasingRiskAssessment = {} } = props.data
// 标签页状态管理
const activeInstitutionPeriod = ref('last3Day')
const activePlatformPeriod = ref('last3Day')
// 时间段配置
const timePeriods = [
{ key: 'last3Day', label: '近3天' },
{ key: 'last7Day', label: '近7天' },
{ key: 'last14Day', label: '近14天' },
{ key: 'last1Month', label: '近1个月' },
{ key: 'last3Month', label: '近3个月' },
{ key: 'last6Month', label: '近6个月' },
{ key: 'last12Month', label: '近12个月' }
]
// 机构申请统计数值 - 使用 computed 实现响应式
const institutionTotalValue = computed(() => {
const period = activeInstitutionPeriod.value
let value = '0/0'
switch (period) {
case 'last3Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast3Days || '0/0'
break
case 'last7Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast7Days || '0/0'
break
case 'last14Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast14Days || '0/0'
break
case 'last1Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLastMonth || '0/0'
break
case 'last3Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast3Months || '0/0'
break
case 'last6Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast6Months || '0/0'
break
case 'last12Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast12Months || '0/0'
break
}
return value
})
const institutionWeekendValue = computed(() => {
const period = activeInstitutionPeriod.value
let value = '0/0'
switch (period) {
case 'last3Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast3DaysWeekend || '0/0'
break
case 'last7Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast7DaysWeekend || '0/0'
break
case 'last14Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast14DaysWeekend || '0/0'
break
case 'last1Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLastMonthWeekend || '0/0'
break
case 'last3Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast3MonthsWeekend || '0/0'
break
case 'last6Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast6MonthsWeekend || '0/0'
break
case 'last12Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast12MonthsWeekend || '0/0'
break
}
return value
})
const institutionNightValue = computed(() => {
const period = activeInstitutionPeriod.value
let value = '0/0'
switch (period) {
case 'last3Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast3DaysNight || '0/0'
break
case 'last7Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast7DaysNight || '0/0'
break
case 'last14Day':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast14DaysNight || '0/0'
break
case 'last1Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLastMonthNight || '0/0'
break
case 'last3Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast3MonthsNight || '0/0'
break
case 'last6Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast6MonthsNight || '0/0'
break
case 'last12Month':
value = leasingRiskAssessment.threeCInstitutionApplicationCountLast12MonthsNight || '0/0'
break
}
return value
})
// 平台申请统计数值 - 使用 computed 实现响应式
const platformTotalValue = computed(() => {
const period = activePlatformPeriod.value
let value = '0/0'
switch (period) {
case 'last3Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast3Days || '0/0'
break
case 'last7Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast7Days || '0/0'
break
case 'last14Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast14Days || '0/0'
break
case 'last1Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLastMonth || '0/0'
break
case 'last3Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast3Months || '0/0'
break
case 'last6Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast6Months || '0/0'
break
case 'last12Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast12Months || '0/0'
break
}
return value
})
const platformWeekendValue = computed(() => {
const period = activePlatformPeriod.value
let value = '0/0'
switch (period) {
case 'last3Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast3DaysWeekend || '0/0'
break
case 'last7Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast7DaysWeekend || '0/0'
break
case 'last14Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast14DaysWeekend || '0/0'
break
case 'last1Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLastMonthWeekend || '0/0'
break
case 'last3Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast3MonthsWeekend || '0/0'
break
case 'last6Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast6MonthsWeekend || '0/0'
break
case 'last12Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast12MonthsWeekend || '0/0'
break
}
return value
})
const platformNightValue = computed(() => {
const period = activePlatformPeriod.value
let value = '0/0'
switch (period) {
case 'last3Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast3DaysNight || '0/0'
break
case 'last7Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast7DaysNight || '0/0'
break
case 'last14Day':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast14DaysNight || '0/0'
break
case 'last1Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLastMonthNight || '0/0'
break
case 'last3Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast3MonthsNight || '0/0'
break
case 'last6Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast6MonthsNight || '0/0'
break
case 'last12Month':
value = leasingRiskAssessment.threeCPlatformApplicationCountLast12MonthsNight || '0/0'
break
}
return value
})
// 获取风险标识文本
const getRiskFlagText = (flag) => {
if (flag === 1) return '高风险'
@@ -461,12 +337,109 @@ const getRiskFlagText = (flag) => {
return '未查得'
}
// 获取风险标识样式
const getRiskFlagClass = (flag) => {
if (flag === 1) return 'text-red-600'
if (flag === 2) return 'text-green-600'
return 'text-gray-600'
// 获取风险标识标签颜色
const getRiskFlagTagClass = (flag) => {
if (flag === 1) return 'text-[#EB3C3C]'
if (flag === 2) return 'text-[#4CAF50]'
return 'text-gray-500'
}
// 计算风险评分（0-100分，分数越高越安全）
const riskScore = computed(() => {
const assessment = leasingRiskAssessment.value || {};
// 没有数据 -> 无风险 -> 100分
if (Object.keys(assessment).length === 0) {
return 100;
}
// 风险标识为高风险 -> 高风险 -> 30分
if (assessment.riskFlag === 1) {
return 30;
}
// 风险标识为低风险 -> 低风险 -> 90分
if (assessment.riskFlag === 2) {
return 90;
}
// 根据租赁申请行为计算风险分数
let riskPoints = 0;
// 3C机构申请统计 - 近3天
const institutionLast3Days = assessment.threeCInstitutionApplicationCountLast3Days || '0/0';
const [idCardCount1, phoneCount1] = institutionLast3Days.split('/').map(v => parseInt(v) || 0);
const count1 = Math.max(idCardCount1, phoneCount1);
// 3C机构周末申请 - 近3天
const institutionWeekendLast3Days = assessment.threeCInstitutionApplicationCountLast3DaysWeekend || '0/0';
const [idCardCount2, phoneCount2] = institutionWeekendLast3Days.split('/').map(v => parseInt(v) || 0);
const weekendCount1 = Math.max(idCardCount2, phoneCount2);
// 3C机构夜间申请 - 近3天
const institutionNightLast3Days = assessment.threeCInstitutionApplicationCountLast3DaysNight || '0/0';
const [idCardCount3, phoneCount3] = institutionNightLast3Days.split('/').map(v => parseInt(v) || 0);
const nightCount1 = Math.max(idCardCount3, phoneCount3);
// 3C平台申请统计 - 近3天
const platformLast3Days = assessment.threeCPlatformApplicationCountLast3Days || '0/0';
const [idCardCount4, phoneCount4] = platformLast3Days.split('/').map(v => parseInt(v) || 0);
const count2 = Math.max(idCardCount4, phoneCount4);
// 3C平台周末申请 - 近3天
const platformWeekendLast3Days = assessment.threeCPlatformApplicationCountLast3DaysWeekend || '0/0';
const [idCardCount5, phoneCount5] = platformWeekendLast3Days.split('/').map(v => parseInt(v) || 0);
const weekendCount2 = Math.max(idCardCount5, phoneCount5);
// 3C平台夜间申请 - 近3天
const platformNightLast3Days = assessment.threeCPlatformApplicationCountLast3DaysNight || '0/0';
const [idCardCount6, phoneCount6] = platformNightLast3Days.split('/').map(v => parseInt(v) || 0);
const nightCount2 = Math.max(idCardCount6, phoneCount6);
// 计算风险点数
// 总申请数 >= 5 -> 高风险
if (count1 >= 5 || count2 >= 5) {
riskPoints += 3;
} else if (count1 >= 3 || count2 >= 3) {
riskPoints += 2;
} else if (count1 > 0 || count2 > 0) {
riskPoints += 1;
}
// 周末申请 >= 3 -> 高风险
if (weekendCount1 >= 3 || weekendCount2 >= 3) {
riskPoints += 3;
} else if (weekendCount1 > 0 || weekendCount2 > 0) {
riskPoints += 2;
}
// 夜间申请 >= 3 -> 高风险
if (nightCount1 >= 3 || nightCount2 >= 3) {
riskPoints += 3;
} else if (nightCount1 > 0 || nightCount2 > 0) {
riskPoints += 2;
}
// 计算最终分数（风险点数越多，分数越低）
if (riskPoints === 0) {
return 100;
} else if (riskPoints <= 2) {
return 80;
} else if (riskPoints <= 4) {
return 60;
} else if (riskPoints <= 6) {
return 40;
} else {
return 30;
}
});
// 使用 composable 通知父组件风险评分
useRiskNotifier(props, riskScore);
// 暴露给父组件
defineExpose({
riskScore
});
</script>
<style lang="scss" scoped>
@@ -474,19 +447,46 @@ const getRiskFlagClass = (flag) => {
@apply space-y-4;
}
.leasing-overview {
@apply transition-all duration-300 hover:shadow-md;
.loan-evaluation-tabs {}
.loan-evaluation-tabs :deep(.van-tabs__wrap) {
height: 32px !important;
background-color: transparent !important;
padding: 0 !important;
border-bottom: 1px solid #DDDDDD !important;
}
.institution-application-stats {
@apply transition-all duration-300 hover:shadow-md;
.loan-evaluation-tabs :deep(.van-tabs__nav) {
background-color: transparent !important;
gap: 0;
height: 32px !important;
}
.platform-application-stats {
@apply transition-all duration-300 hover:shadow-md;
.loan-evaluation-tabs :deep(.van-tab) {
color: #999999 !important;
font-size: 14px !important;
font-weight: 400 !important;
}
.time-period-item {
@apply transition-all duration-300 hover:shadow-sm;
.loan-evaluation-tabs :deep(.van-tab--active) {
color: var(--van-theme-primary) !important;
background-color: unset !important;
}
.loan-evaluation-tabs :deep(.van-tabs__line) {
height: 2px !important;
border-radius: 1px !important;
}
/* 内容区域样式 */
.loan-evaluation-wrap {
@apply mx-4 my-1;
border: 1px solid #DDDDDD;
background-color: #F9F9F9;
border-radius: 8px;
}
.loan-evaluation-content {
padding: 8px 16px;
}
</style>