101 lines
3.1 KiB
Vue
101 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="rounded-lg border border-gray-200 pb-2 mb-4">
|
|||
|
|
<div class="flex items-center mb-4 p-4">
|
|||
|
|
<div class="w-8 h-8 flex items-center justify-center mr-2">
|
|||
|
|
<img src="@/assets/images/report/zfx.png" alt="圈团风险" class="w-8 h-8 object-contain" />
|
|||
|
|
</div>
|
|||
|
|
<span class="font-bold text-gray-800">圈团风险</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-4">
|
|||
|
|
<!-- 风险概览 -->
|
|||
|
|
<div class="mb-6">
|
|||
|
|
<LTitle title="风险概览" />
|
|||
|
|
<div class="grid grid-cols-2 gap-4 p-4">
|
|||
|
|
<div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
|
|||
|
|
<div class="text-2xl font-bold" :class="getScoreClass(data.riskScore1)">
|
|||
|
|
{{ formatScore(data.riskScore1) }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-sm text-gray-600 mt-1">圈团1浓度分V2</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-blue-50 rounded-lg p-4 text-center border border-[#2B79EE8F]">
|
|||
|
|
<div class="text-2xl font-bold" :class="getRiskLevelClass(data.riskLevel2)">
|
|||
|
|
{{ formatRiskLevel(data.riskLevel2) }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-sm text-gray-600 mt-1">圈团2风险等级V1</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 详细风险 -->
|
|||
|
|
<div class="mb-6">
|
|||
|
|
<LTitle title="详细风险" />
|
|||
|
|
<div class="space-y-2 p-4">
|
|||
|
|
<div class="flex justify-between items-center text-sm">
|
|||
|
|
<span class="text-gray-600">圈团3浓度分V1</span>
|
|||
|
|
<span class="text-[#333333] font-bold" :class="getScoreClass(data.riskScore3)">
|
|||
|
|
{{ formatScore(data.riskScore3) }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 说明 -->
|
|||
|
|
<div class="p-4">
|
|||
|
|
<div class="text-xs text-gray-500">
|
|||
|
|
<div>分数区间为0～100分，分数越高风险越大</div>
|
|||
|
|
<div class="mt-1">风险等级：1=低风险、2=中风险、3=高风险</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import LTitle from '@/components/LTitle.vue'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
data: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const formatScore = (score) => {
|
|||
|
|
if (score === undefined || score === null) return '-'
|
|||
|
|
return score
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formatRiskLevel = (level) => {
|
|||
|
|
if (level === undefined || level === null) return '-'
|
|||
|
|
const levelMap = {
|
|||
|
|
1: '低风险',
|
|||
|
|
2: '中风险',
|
|||
|
|
3: '高风险'
|
|||
|
|
}
|
|||
|
|
return levelMap[level] || level
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getScoreClass = (score) => {
|
|||
|
|
if (score === undefined || score === null) return 'text-gray-400'
|
|||
|
|
if (score >= 80) return 'text-red-600'
|
|||
|
|
if (score >= 60) return 'text-orange-500'
|
|||
|
|
if (score >= 40) return 'text-yellow-500'
|
|||
|
|
return 'text-[#1FBE5D]'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getRiskLevelClass = (level) => {
|
|||
|
|
if (level === undefined || level === null) return 'text-gray-400'
|
|||
|
|
if (level === 3) return 'text-red-600'
|
|||
|
|
if (level === 2) return 'text-orange-500'
|
|||
|
|
return 'text-[#1FBE5D]'
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.card {
|
|||
|
|
background: #ffffff;
|
|||
|
|
}
|
|||
|
|
</style>
|