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>
|