70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="card rounded-lg border border-gray-200 pb-2 mb-2">
|
|||
|
|
<div class="px-4 pt-4 pb-4">
|
|||
|
|
<LTitle title="风险汇总" />
|
|||
|
|
<div class="space-y-0 mt-3 rounded-lg overflow-hidden">
|
|||
|
|
<div v-for="(risk, index) in riskSummary" :key="risk.label"
|
|||
|
|
:class="['flex justify-between items-center text-lg py-4 px-4', index % 2 === 0 ? 'bg-primary-50' : 'bg-white']">
|
|||
|
|
<span class="text-gray-600">{{ risk.label }}</span>
|
|||
|
|
<span class="font-semibold text-xl" :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 LTitle from '@/components/LTitle.vue'
|
|||
|
|
import Remark from '@/components/Remark.vue'
|
|||
|
|
import { getRiskSummary, generateRiskRemark } from '../utils/dataParser'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
data: {
|
|||
|
|
type: Object,
|
|||
|
|
required: true,
|
|||
|
|
default: () => ({}),
|
|||
|
|
},
|
|||
|
|
// 维度：id（身份证） / cell（手机号）
|
|||
|
|
dimension: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'id',
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 风险汇总
|
|||
|
|
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>
|
|||
|
|
.card {
|
|||
|
|
background: #ffffff;
|
|||
|
|
}
|
|||
|
|
</style>
|