94 lines
3.1 KiB
Vue
94 lines
3.1 KiB
Vue
<template>
|
||
<div class="">
|
||
<!-- 概览标题 -->
|
||
<div class="p-4">
|
||
<!-- 风险概览总结 -->
|
||
<div class="p-4 rounded-lg" :class="getRiskOverviewClass()">
|
||
<div class="flex items-center">
|
||
<div class="w-12 h-12 mr-3 flex-shrink-0">
|
||
<img :src="getRiskIcon()" alt="风险" class="w-12 h-12 object-contain" />
|
||
</div>
|
||
<div class="text-gray-700">
|
||
{{ totalCases }}
|
||
起涉诉案件中，
|
||
<span v-if="stats.highRiskItems > 0" class="text-orange-600 font-medium">
|
||
{{ stats.highRiskItems }}
|
||
</span>
|
||
<span v-else class="text-green-600 font-medium">0</span>
|
||
起高风险案件
|
||
<span v-if="stats.caseTypes.length > 0" class="ml-1">
|
||
，涉及 {{ stats.caseTypes.length }} 种案件类型
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要风险指标 -->
|
||
<div class="grid grid-cols-2 gap-3 p-4">
|
||
<!-- 风险事项卡片 -->
|
||
<div class="p-4 bg-[#EB3C3C1A] border border-[#EB3C3C4D] rounded-xl text-center">
|
||
<div class="text-2xl font-bold text-[#EB3C3C] mb-1">{{ stats.totalRiskItems || 0 }}项</div>
|
||
<div class="text-sm font-medium text-gray-800 mb-1">风险事项</div>
|
||
<div class="text-xs text-gray-500">
|
||
命中{{ stats.totalRiskItems || 0 }}个规则
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 高风险案件卡片 -->
|
||
<div class="p-4 bg-[#EB3C3C1A] border border-[#EB3C3C4D] rounded-xl text-center">
|
||
<div class="text-2xl font-bold text-[#EB3C3C] mb-1">{{ stats.highRiskItems || 0 }}件</div>
|
||
<div class="text-sm font-medium text-gray-800 mb-1">高风险案件</div>
|
||
<div class="text-xs text-orange-600">
|
||
<span class="mr-3">失信{{ stats.sxbzxrCount || 0 }}</span>
|
||
<span>限高{{ stats.xgbzxrCount || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import LTitle from '@/components/LTitle.vue'
|
||
|
||
const props = defineProps({
|
||
stats: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
totalCases: {
|
||
type: Number,
|
||
required: true,
|
||
},
|
||
})
|
||
|
||
// 获取风险概览样式
|
||
const getRiskOverviewClass = () => {
|
||
// 有高风险案件 - 红色警告
|
||
if (props.stats.highRiskItems > 0) {
|
||
return 'bg-[#F9ECEC] border border-[#F0CACA]'
|
||
}
|
||
// 有案件但无高风险 - 黄色警示
|
||
if (props.totalCases > 0) {
|
||
return 'bg-[#FFF8E1] border border-[#FFE082]'
|
||
}
|
||
// 无案件 - 绿色正常
|
||
return 'bg-[#ECF9EF] border border-[#CAECD3]'
|
||
}
|
||
|
||
// 获取风险图标
|
||
const getRiskIcon = () => {
|
||
// 有高风险案件 - 高风险图标
|
||
if (props.stats.highRiskItems > 0) {
|
||
return new URL('../../../assets/images/report/gfx.png', import.meta.url).href
|
||
}
|
||
// 有案件但无高风险 - 中风险图标
|
||
if (props.totalCases > 0) {
|
||
return new URL('../../../assets/images/report/zfx.png', import.meta.url).href
|
||
}
|
||
// 无案件 - 正常图标
|
||
return new URL('../../../assets/images/report/zq.png', import.meta.url).href
|
||
}
|
||
</script>
|