f

src/ui/FLXGK5D2/components/StatisticsOverview.vue

@@ -0,0 +1,93 @@
+<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>