tydata-webview-v2/src/ui/CDWBG8B4D/components/LeasingRiskSection.vue

<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>
        </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>
        </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">{{ 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>
              </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>
        </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>
              
              <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>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 温馨提示 -->
  <LRemark content="租赁风险评估基于申请人在3C机构和3C平台的申请行为进行综合分析。数据包括不同时间段的申请次数统计，其中夜间（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'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})

// 从data中解构出需要的字段
const { leasingRiskAssessment = {} } = props.data

// 获取风险标识文本
const getRiskFlagText = (flag) => {
  if (flag === 1) return '高风险'
  if (flag === 2) return '低风险'
  return '未查得'
}

// 获取风险标识样式
const getRiskFlagClass = (flag) => {
  if (flag === 1) return 'text-red-600'
  if (flag === 2) return 'text-green-600'
  return 'text-gray-600'
}
</script>

<style lang="scss" scoped>
.leasing-risk-section {
  @apply space-y-4;
}

.leasing-overview {
  @apply transition-all duration-300 hover:shadow-md;
}

.institution-application-stats {
  @apply transition-all duration-300 hover:shadow-md;
}

.platform-application-stats {
  @apply transition-all duration-300 hover:shadow-md;
}

.time-period-item {
  @apply transition-all duration-300 hover:shadow-sm;
}
</style>