From b1b301306ef3d77f1853f162261e3e441076c27e Mon Sep 17 00:00:00 2001
From: Mrx <18278715334@163.com>
Date: Tue, 24 Feb 2026 11:10:28 +0800
Subject: [PATCH] f

---
 public/example.json | 147 ++++-----
 src/ui/IVYZ0S0D.vue | 774 +++++++++++++++++++++++++++++++-------------
 2 files changed, 626 insertions(+), 295 deletions(-)

diff --git a/public/example.json b/public/example.json
index d8bfc34..7950829 100644
--- a/public/example.json
+++ b/public/example.json
@@ -10282,88 +10282,89 @@
         "data": {
             "apiID": "IVYZ0S0D",
             "data": {
-                "basic_info" : {
-                  "risk_flag" : 1
+                "basic_info": {
+                    "risk_flag": 2
                 },
-                "dishonesty" : {
-                  "dishonesty" : 1
+                "dishonesty": {
+                    "dishonesty": 2
                 },
-                "high_consumption" : {
-                  "high_consumption" : 1
+                "high_consumption": {
+                    "high_consumption": 2
                 },
-                "labor_disputes" : {
-                  "labor_contract" : 1,
-                  "labor_disputes" : 1,
-                  "labor_disputes_3y" : 1,
-                  "labor_disputes_5y" : 1,
-                  "labor_relation" : 1,
-                  "labor_relation_3y" : 1,
-                  "labor_relation_5y" : 1,
-                  "wage_claim" : 1,
-                  "wage_claim_3y" : 1,
-                  "wage_claim_5y" : 1,
-                  "compensation" : 1,
-                  "compensation_3y" : 1,
-                  "compensation_5y" : 1,
-                  "collective_contract" : 1,
-                  "collective_contract_3y" : 1,
-                  "collective_contract_5y" : 1,
-                  "dispatch_contract" : 1,
-                  "dispatch_contract_3y" : 1,
-                  "dispatch_contract_5y" : 1,
-                  "part_time" : 1,
-                  "part_time_3y" : 1,
-                  "part_time_5y" : 1,
-                  "non_compete" : 1,
-                  "non_compete_3y" : 1,
-                  "non_compete_5y" : 1
+                "labor_disputes": {
+                    "labor_contract": 2,
+                    "labor_disputes": 2,
+                    "labor_disputes_3y": 2,
+                    "labor_disputes_5y": 2,
+                    "labor_relation": 2,
+                    "labor_relation_3y": 2,
+                    "labor_relation_5y": 2,
+                    "wage_claim": 2,
+                    "wage_claim_3y": 2,
+                    "wage_claim_5y": 2,
+                    "compensation": 2,
+                    "compensation_3y": 2,
+                    "compensation_5y": 2,
+                    "collective_contract": 2,
+                    "collective_contract_3y": 2,
+                    "collective_contract_5y": 2,
+                    "dispatch_contract": 2,
+                    "dispatch_contract_3y": 2,
+                    "dispatch_contract_5y": 2,
+                    "part_time": 2,
+                    "part_time_3y": 2,
+                    "part_time_5y": 2,
+                    "non_compete": 2,
+                    "non_compete_3y": 2,
+                    "non_compete_5y": 2
                 },
-                "social_insurance" : {
-                  "social_insurance" : 1,
-                  "pension" : 1,
-                  "pension_3y" : 1,
-                  "pension_5y" : 1,
-                  "injury_insurance" :2,
-                  "injury_insurance_3y" : 1,
-                  "injury_insurance_5y" : 2,
-                  "medical_insurance" : 1,
-                  "medical_insurance_3y" : 1,
-                  "medical_insurance_5y" : 1,
-                  "maternity_insurance" : 1,
-                  "maternity_insurance_3y" : 1,
-                  "maternity_insurance_5y" : 1,
-                  "commercial_insurance" : 1,
-                  "commercial_insurance_3y" : 1,
-                  "commercial_insurance_5y" : 1
+                "social_insurance": {
+                    "social_insurance": 2,
+                    "pension": 2,
+                    "pension_3y": 2,
+                    "pension_5y": 2,
+                    "injury_insurance": 2,
+                    "injury_insurance_3y": 2,
+                    "injury_insurance_5y": 2,
+                    "medical_insurance": 2,
+                    "medical_insurance_3y": 2,
+                    "medical_insurance_5y": 2,
+                    "maternity_insurance": 2,
+                    "maternity_insurance_3y": 2,
+                    "maternity_insurance_5y": 2,
+                    "commercial_insurance": 2,
+                    "commercial_insurance_3y": 2,
+                    "commercial_insurance_5y": 2
                 },
-                "welfare_disputes" : {
-                  "welfare" : 1
+                "welfare_disputes": {
+                    "welfare": 2
                 },
-                "personnel_disputes" : {
-                  "personnel_dispute" : 2,
-                  "resignation_dispute" : 1,
-                  "resignation_dispute_3y" : 1,
-                  "resignation_dispute_5y" : 1,
-                  "dismissal_dispute" : 1,
-                  "dismissal_dispute_3y" : 1,
-                  "dismissal_dispute_5y" : 1,
-                  "employment_contract" : 1,
-                  "employment_contract_3y" : 1,
-                  "employment_contract_5y" : 1
+                "personnel_disputes": {
+                    "personnel_dispute": 2,
+                    "resignation_dispute": 2,
+                    "resignation_dispute_3y": 2,
+                    "resignation_dispute_5y": 2,
+                    "dismissal_dispute": 2,
+                    "dismissal_dispute_3y": 2,
+                    "dismissal_dispute_5y": 2,
+                    "employment_contract": 2,
+                    "employment_contract_3y": 2,
+                    "employment_contract_5y": 2
                 },
-                "arbitration" : {
-                  "arbitration_confirmation" : 2,
-                  "arbitration_confirmation_3y" : 2,
-                  "arbitration_confirmation_5y" : 1,
-                  "arbitration_revocation" : 1,
-                  "arbitration_revocation_3y" : 1,
-                  "arbitration_revocation_5y" : 1
+                "arbitration": {
+                    "arbitration_confirmation": 2,
+                    "arbitration_confirmation_3y": 2,
+                    "arbitration_confirmation_5y": 2,
+                    "arbitration_revocation": 2,
+                    "arbitration_revocation_3y": 2,
+                    "arbitration_revocation_5y": 2
                 },
-                "notice_letter" : {
-                  "notice_letter" : 1,
-                  "notice_letter_period" : "0"
+                "notice_letter": {
+                    "notice_letter": 2,
+                    "notice_letter_period": "2"
                 }
-              }
+            }
+           
         }
     }
 
diff --git a/src/ui/IVYZ0S0D.vue b/src/ui/IVYZ0S0D.vue
index 58d112d..5ac5e3f 100644
--- a/src/ui/IVYZ0S0D.vue
+++ b/src/ui/IVYZ0S0D.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 // 接收父组件传入的 props
 const props = defineProps({
@@ -7,6 +7,9 @@ const props = defineProps({
     params: Object,
 });
 
+// 当前激活的标签页
+const activeTab = ref('summary');
+
 // 定义组件名称，用于在控制台输出调试信息
 const componentName = 'IVYZ0S0D';
 
@@ -60,71 +63,56 @@ const getBorderColor = (value: number) => {
     return '#ccc'; // 默认灰色边框
 };
 
-// 判断是否应该隐藏该条目（如果是带时间范围的"未命中"）
-const shouldHideItem = (itemText: string) => {
-    // 检查是否包含时间范围关键词并且结果是"未命中"
-    const timeRangeKeywords = ['近2年', '近3年', '近4年', '近5年', '2-4年', '5年以上'];
-    const isTimeRangeItem = timeRangeKeywords.some(keyword => itemText.includes(keyword));
-    const isNoRisk = itemText.includes('未命中');
-    
-    // 如果是时间范围项目且结果是"未命中"，则隐藏
-    return isTimeRangeItem && isNoRisk;
-};
+// 检查是否至少有一个数据类别有内容
+const hasAnyData = computed(() => {
+    return Object.keys(reportData).length > 0;
+});
 
-// 获取风险类型数组 - 所有模块都显示
-const riskTypes = computed(() => {
-    const risks: {title: string, value: number, details: string | string[], bgColor: string, borderColor: string}[] = [];
+// 汇总数据 - 只包含基础字段，不包含时间相关字段
+const summaryData = computed(() => {
+    const risks: {title: string, value: number, details: string | string[], bgColor: string, borderColor: string, fieldName: string}[] = [];
 
-    // 总体风险
+    // 该人员是否有风险
     if (reportData.risk_flag !== undefined) {
         risks.push({
-            title: '总体风险',
+            title: '该人员是否有风险',
             value: reportData.risk_flag,
             details: getStatusText(reportData.risk_flag),
             bgColor: getBackgroundColor(reportData.risk_flag),
-            borderColor: getBorderColor(reportData.risk_flag)
+            borderColor: getBorderColor(reportData.risk_flag),
+            fieldName: 'basic_info'
         });
     }
 
-    // 失信风险
+    // 失信/限高风险
     if (reportData.dishonesty && reportData.dishonesty.dishonesty !== undefined) {
         risks.push({
-            title: '失信风险',
+            title: '失信人员风险',
             value: reportData.dishonesty.dishonesty,
             details: getStatusText(reportData.dishonesty.dishonesty),
             bgColor: getBackgroundColor(reportData.dishonesty.dishonesty),
-            borderColor: getBorderColor(reportData.dishonesty.dishonesty)
+            borderColor: getBorderColor(reportData.dishonesty.dishonesty),
+            fieldName: 'dishonesty'
         });
     }
 
-    // 高消费限制风险
+    // high_consumption
     if (reportData.high_consumption && reportData.high_consumption.high_consumption !== undefined) {
         risks.push({
-            title: '高消费限制风险',
+            title: '限制高消费人员风险',
             value: reportData.high_consumption.high_consumption,
             details: getStatusText(reportData.high_consumption.high_consumption),
             bgColor: getBackgroundColor(reportData.high_consumption.high_consumption),
-            borderColor: getBorderColor(reportData.high_consumption.high_consumption)
+            borderColor: getBorderColor(reportData.high_consumption.high_consumption),
+            fieldName: 'high_consumption'
         });
     }
 
-    // 劳动争议风险
+    // 是否包含劳动争议 - 只显示基本的劳动争议状态，不显示时间相关
     if (reportData.labor_disputes) {
         let details: string[] = [];
         if (reportData.labor_disputes.labor_disputes !== undefined) {
-            details.push(`当前: ${getStatusText(reportData.labor_disputes.labor_disputes)}`);
-        }
-        if (reportData.labor_disputes.labor_disputes_3y !== undefined) {
-            const detail = `近3年: ${getStatusText(reportData.labor_disputes.labor_disputes_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.labor_disputes.labor_disputes_5y !== undefined) {
-            const detail = `近5年: ${getStatusText(reportData.labor_disputes.labor_disputes_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
+            details.push(`劳动争议: ${getStatusText(reportData.labor_disputes.labor_disputes)}`);
         }
         if (reportData.labor_disputes.labor_contract !== undefined) {
             details.push(`劳动合同: ${getStatusText(reportData.labor_disputes.labor_contract)}`);
@@ -132,31 +120,32 @@ const riskTypes = computed(() => {
         if (reportData.labor_disputes.labor_relation !== undefined) {
             details.push(`劳动关系: ${getStatusText(reportData.labor_disputes.labor_relation)}`);
         }
-        if (reportData.labor_disputes.labor_relation_3y !== undefined) {
-            const detail = `近3年劳动关系: ${getStatusText(reportData.labor_disputes.labor_relation_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.labor_disputes.labor_relation_5y !== undefined) {
-            const detail = `近5年劳动关系: ${getStatusText(reportData.labor_disputes.labor_relation_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         
         if (details.length > 0) {
             risks.push({
-                title: '劳动争议风险',
-                value: Math.max(...Object.values(reportData.labor_disputes).filter(v => typeof v === 'number')),
+                title: '是否包含劳动争议',
+                value: Math.max(
+                    reportData.labor_disputes.labor_disputes || 0,
+                    reportData.labor_disputes.labor_contract || 0,
+                    reportData.labor_disputes.labor_relation || 0
+                ),
                 details: details,
-                bgColor: getBackgroundColor(Math.max(...Object.values(reportData.labor_disputes).filter(v => typeof v === 'number'))),
-                borderColor: getBorderColor(Math.max(...Object.values(reportData.labor_disputes).filter(v => typeof v === 'number')))
+                bgColor: getBackgroundColor(Math.max(
+                    reportData.labor_disputes.labor_disputes || 0,
+                    reportData.labor_disputes.labor_contract || 0,
+                    reportData.labor_disputes.labor_relation || 0
+                )),
+                borderColor: getBorderColor(Math.max(
+                    reportData.labor_disputes.labor_disputes || 0,
+                    reportData.labor_disputes.labor_contract || 0,
+                    reportData.labor_disputes.labor_relation || 0
+                )),
+                fieldName: 'labor_disputes'
             });
         }
     }
 
-    // 社会保险纠纷风险
+    // social_insurance - 只显示基本的社保相关状态，不显示时间相关
     if (reportData.social_insurance) {
         let details: string[] = [];
         if (reportData.social_insurance.social_insurance !== undefined) {
@@ -165,102 +154,65 @@ const riskTypes = computed(() => {
         if (reportData.social_insurance.pension !== undefined) {
             details.push(`养老纠纷: ${getStatusText(reportData.social_insurance.pension)}`);
         }
-        if (reportData.social_insurance.pension_3y !== undefined) {
-            const detail = `近3年养老: ${getStatusText(reportData.social_insurance.pension_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.social_insurance.pension_5y !== undefined) {
-            const detail = `近5年养老: ${getStatusText(reportData.social_insurance.pension_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         if (reportData.social_insurance.injury_insurance !== undefined) {
             details.push(`工伤纠纷: ${getStatusText(reportData.social_insurance.injury_insurance)}`);
         }
-        if (reportData.social_insurance.injury_insurance_3y !== undefined) {
-            const detail = `近3年工伤: ${getStatusText(reportData.social_insurance.injury_insurance_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.social_insurance.injury_insurance_5y !== undefined) {
-            const detail = `近5年工伤: ${getStatusText(reportData.social_insurance.injury_insurance_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         if (reportData.social_insurance.unemployment_insurance !== undefined) {
             details.push(`失业纠纷: ${getStatusText(reportData.social_insurance.unemployment_insurance)}`);
         }
-        if (reportData.social_insurance.unemployment_insurance_3y !== undefined) {
-            const detail = `近3年失业: ${getStatusText(reportData.social_insurance.unemployment_insurance_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.social_insurance.unemployment_insurance_5y !== undefined) {
-            const detail = `近5年失业: ${getStatusText(reportData.social_insurance.unemployment_insurance_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         if (reportData.social_insurance.medical_insurance !== undefined) {
             details.push(`医疗纠纷: ${getStatusText(reportData.social_insurance.medical_insurance)}`);
         }
-        if (reportData.social_insurance.medical_insurance_3y !== undefined) {
-            const detail = `近3年医疗: ${getStatusText(reportData.social_insurance.medical_insurance_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.social_insurance.medical_insurance_5y !== undefined) {
-            const detail = `近5年医疗: ${getStatusText(reportData.social_insurance.medical_insurance_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         if (reportData.social_insurance.maternity_insurance !== undefined) {
             details.push(`生育纠纷: ${getStatusText(reportData.social_insurance.maternity_insurance)}`);
         }
-        if (reportData.social_insurance.maternity_insurance_3y !== undefined) {
-            const detail = `近3年生育: ${getStatusText(reportData.social_insurance.maternity_insurance_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.social_insurance.maternity_insurance_5y !== undefined) {
-            const detail = `近5年生育: ${getStatusText(reportData.social_insurance.maternity_insurance_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         
         if (details.length > 0) {
             risks.push({
                 title: '社会保险纠纷风险',
-                value: Math.max(...Object.values(reportData.social_insurance).filter(v => typeof v === 'number')),
+                value: Math.max(
+                    reportData.social_insurance.social_insurance || 0,
+                    reportData.social_insurance.pension || 0,
+                    reportData.social_insurance.injury_insurance || 0,
+                    reportData.social_insurance.unemployment_insurance || 0,
+                    reportData.social_insurance.medical_insurance || 0,
+                    reportData.social_insurance.maternity_insurance || 0
+                ),
                 details: details,
-                bgColor: getBackgroundColor(Math.max(...Object.values(reportData.social_insurance).filter(v => typeof v === 'number'))),
-                borderColor: getBorderColor(Math.max(...Object.values(reportData.social_insurance).filter(v => typeof v === 'number')))
+                bgColor: getBackgroundColor(Math.max(
+                    reportData.social_insurance.social_insurance || 0,
+                    reportData.social_insurance.pension || 0,
+                    reportData.social_insurance.injury_insurance || 0,
+                    reportData.social_insurance.unemployment_insurance || 0,
+                    reportData.social_insurance.medical_insurance || 0,
+                    reportData.social_insurance.maternity_insurance || 0
+                )),
+                borderColor: getBorderColor(Math.max(
+                    reportData.social_insurance.social_insurance || 0,
+                    reportData.social_insurance.pension || 0,
+                    reportData.social_insurance.injury_insurance || 0,
+                    reportData.social_insurance.unemployment_insurance || 0,
+                    reportData.social_insurance.medical_insurance || 0,
+                    reportData.social_insurance.maternity_insurance || 0
+                )),
+                fieldName: 'social_insurance'
             });
         }
     }
 
-    // 福利待遇纠纷
+    // welfare_disputes
     if (reportData.welfare_disputes && reportData.welfare_disputes.welfare !== undefined) {
         risks.push({
             title: '福利待遇纠纷',
             value: reportData.welfare_disputes.welfare,
             details: getStatusText(reportData.welfare_disputes.welfare),
             bgColor: getBackgroundColor(reportData.welfare_disputes.welfare),
-            borderColor: getBorderColor(reportData.welfare_disputes.welfare)
+            borderColor: getBorderColor(reportData.welfare_disputes.welfare),
+            fieldName: 'welfare_disputes'
         });
     }
 
-    // 人事争议类纠纷
+    // 人事争议 - 只显示基本的人事争议状态，不显示时间相关
     if (reportData.personnel_disputes) {
         let details: string[] = [];
         if (reportData.personnel_disputes.personnel_dispute !== undefined) {
@@ -269,86 +221,61 @@ const riskTypes = computed(() => {
         if (reportData.personnel_disputes.resignation_dispute !== undefined) {
             details.push(`辞职争议: ${getStatusText(reportData.personnel_disputes.resignation_dispute)}`);
         }
-        if (reportData.personnel_disputes.resignation_dispute_3y !== undefined) {
-            const detail = `近3年辞职: ${getStatusText(reportData.personnel_disputes.resignation_dispute_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.personnel_disputes.resignation_dispute_5y !== undefined) {
-            const detail = `近5年辞职: ${getStatusText(reportData.personnel_disputes.resignation_dispute_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         if (reportData.personnel_disputes.dismissal_dispute !== undefined) {
             details.push(`辞退争议: ${getStatusText(reportData.personnel_disputes.dismissal_dispute)}`);
         }
-        if (reportData.personnel_disputes.dismissal_dispute_3y !== undefined) {
-            const detail = `近3年辞退: ${getStatusText(reportData.personnel_disputes.dismissal_dispute_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.personnel_disputes.dismissal_dispute_5y !== undefined) {
-            const detail = `近5年辞退: ${getStatusText(reportData.personnel_disputes.dismissal_dispute_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         
         if (details.length > 0) {
             risks.push({
-                title: '人事争议类纠纷',
-                value: Math.max(...Object.values(reportData.personnel_disputes).filter(v => typeof v === 'number')),
+                title: '人事争议',
+                value: Math.max(
+                    reportData.personnel_disputes.personnel_dispute || 0,
+                    reportData.personnel_disputes.resignation_dispute || 0,
+                    reportData.personnel_disputes.dismissal_dispute || 0
+                ),
                 details: details,
-                bgColor: getBackgroundColor(Math.max(...Object.values(reportData.personnel_disputes).filter(v => typeof v === 'number'))),
-                borderColor: getBorderColor(Math.max(...Object.values(reportData.personnel_disputes).filter(v => typeof v === 'number')))
+                bgColor: getBackgroundColor(Math.max(
+                    reportData.personnel_disputes.personnel_dispute || 0,
+                    reportData.personnel_disputes.resignation_dispute || 0,
+                    reportData.personnel_disputes.dismissal_dispute || 0
+                )),
+                borderColor: getBorderColor(Math.max(
+                    reportData.personnel_disputes.personnel_dispute || 0,
+                    reportData.personnel_disputes.resignation_dispute || 0,
+                    reportData.personnel_disputes.dismissal_dispute || 0
+                )),
+                fieldName: 'personnel_disputes'
             });
         }
     }
 
-    // 仲裁相关案件
+    // 仲裁流程相关 - 只显示基本的仲裁状态，不显示时间相关
     if (reportData.arbitration) {
         let details: string[] = [];
         if (reportData.arbitration.arbitration_confirmation !== undefined) {
             details.push(`仲裁确认: ${getStatusText(reportData.arbitration.arbitration_confirmation)}`);
         }
-        if (reportData.arbitration.arbitration_confirmation_3y !== undefined) {
-            const detail = `近3年仲裁确认: ${getStatusText(reportData.arbitration.arbitration_confirmation_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.arbitration.arbitration_confirmation_5y !== undefined) {
-            const detail = `近5年仲裁确认: ${getStatusText(reportData.arbitration.arbitration_confirmation_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         if (reportData.arbitration.arbitration_revocation !== undefined) {
             details.push(`仲裁撤销: ${getStatusText(reportData.arbitration.arbitration_revocation)}`);
         }
-        if (reportData.arbitration.arbitration_revocation_3y !== undefined) {
-            const detail = `近3年仲裁撤销: ${getStatusText(reportData.arbitration.arbitration_revocation_3y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
-        if (reportData.arbitration.arbitration_revocation_5y !== undefined) {
-            const detail = `近5年仲裁撤销: ${getStatusText(reportData.arbitration.arbitration_revocation_5y)}`;
-            if (!shouldHideItem(detail)) {
-                details.push(detail);
-            }
-        }
         
         if (details.length > 0) {
             risks.push({
-                title: '仲裁相关案件',
-                value: Math.max(...Object.values(reportData.arbitration).filter(v => typeof v === 'number')),
+                title: '仲裁流程相关',
+                value: Math.max(
+                    reportData.arbitration.arbitration_confirmation || 0,
+                    reportData.arbitration.arbitration_revocation || 0
+                ),
                 details: details,
-                bgColor: getBackgroundColor(Math.max(...Object.values(reportData.arbitration).filter(v => typeof v === 'number'))),
-                borderColor: getBorderColor(Math.max(...Object.values(reportData.arbitration).filter(v => typeof v === 'number')))
+                bgColor: getBackgroundColor(Math.max(
+                    reportData.arbitration.arbitration_confirmation || 0,
+                    reportData.arbitration.arbitration_revocation || 0
+                )),
+                borderColor: getBorderColor(Math.max(
+                    reportData.arbitration.arbitration_confirmation || 0,
+                    reportData.arbitration.arbitration_revocation || 0
+                )),
+                fieldName: 'arbitration'
             });
         }
     }
@@ -359,7 +286,7 @@ const riskTypes = computed(() => {
         let periodText = '';
         
         if (reportData.notice_letter.notice_letter_period !== undefined) {
-            periodText = `期间: ${getNoticeLetterPeriodText(reportData.notice_letter.notice_letter_period)}`;
+            periodText = `该人员被发送通知函，仲裁、调解、涉诉距今时间: ${getNoticeLetterPeriodText(reportData.notice_letter.notice_letter_period)}`;
         }
         
         const detailParts = [`状态: ${statusText}`];
@@ -368,53 +295,344 @@ const riskTypes = computed(() => {
         }
         
         risks.push({
-            title: '通知函触达',
+            title: '该人员是否有被发送仲裁、调解、涉诉通知函风险',
             value: reportData.notice_letter.notice_letter,
             details: detailParts,
             bgColor: getBackgroundColor(reportData.notice_letter.notice_letter),
-            borderColor: getBorderColor(reportData.notice_letter.notice_letter)
+            borderColor: getBorderColor(reportData.notice_letter.notice_letter),
+            fieldName: 'notice_letter'
         });
     }
 
     return risks;
 });
 
-// 检查是否至少有一个数据类别有内容
-const hasAnyData = computed(() => {
-    return riskTypes.value.length > 0;
+// 近三年案件数据 - 只显示命中的时间相关字段
+const recentThreeYearsData = computed(() => {
+    const risks: {title: string, value: number, details: string | string[], bgColor: string, borderColor: string, fieldName: string}[] = [];
+
+    // 劳动争议风险 - 近3年，只显示命中的
+    if (reportData.labor_disputes) {
+        let details: string[] = [];
+        if (reportData.labor_disputes.labor_disputes_3y === 2) { // 只显示命中的
+            details.push(`近3年劳动争议: ${getStatusText(reportData.labor_disputes.labor_disputes_3y)}`);
+        }
+        if (reportData.labor_disputes.labor_relation_3y === 2) { // 只显示命中的
+            details.push(`近3年劳动关系: ${getStatusText(reportData.labor_disputes.labor_relation_3y)}`);
+        }
+        
+        if (details.length > 0) {
+            risks.push({
+                title: '劳动争议风险',
+                value: 2, // 因为至少有一个命中，所以值设为2
+                details: details,
+                bgColor: getBackgroundColor(2),
+                borderColor: getBorderColor(2),
+                fieldName: 'labor_disputes_3y'
+            });
+        }
+    }
+
+    // 社会保险纠纷风险 - 近3年，只显示命中的
+    if (reportData.social_insurance) {
+        let details: string[] = [];
+        if (reportData.social_insurance.pension_3y === 2) { // 只显示命中的
+            details.push(`近3年养老: ${getStatusText(reportData.social_insurance.pension_3y)}`);
+        }
+        if (reportData.social_insurance.injury_insurance_3y === 2) { // 只显示命中的
+            details.push(`近3年工伤: ${getStatusText(reportData.social_insurance.injury_insurance_3y)}`);
+        }
+        if (reportData.social_insurance.unemployment_insurance_3y === 2) { // 只显示命中的
+            details.push(`近3年失业: ${getStatusText(reportData.social_insurance.unemployment_insurance_3y)}`);
+        }
+        if (reportData.social_insurance.medical_insurance_3y === 2) { // 只显示命中的
+            details.push(`近3年医疗: ${getStatusText(reportData.social_insurance.medical_insurance_3y)}`);
+        }
+        if (reportData.social_insurance.maternity_insurance_3y === 2) { // 只显示命中的
+            details.push(`近3年生育: ${getStatusText(reportData.social_insurance.maternity_insurance_3y)}`);
+        }
+        
+        if (details.length > 0) {
+            risks.push({
+                title: '社会保险纠纷风险',
+                value: 2, // 因为至少有一个命中，所以值设为2
+                details: details,
+                bgColor: getBackgroundColor(2),
+                borderColor: getBorderColor(2),
+                fieldName: 'social_insurance_3y'
+            });
+        }
+    }
+
+    // 人事争议类纠纷 - 近3年，只显示命中的
+    if (reportData.personnel_disputes) {
+        let details: string[] = [];
+        if (reportData.personnel_disputes.resignation_dispute_3y === 2) { // 只显示命中的
+            details.push(`近3年辞职: ${getStatusText(reportData.personnel_disputes.resignation_dispute_3y)}`);
+        }
+        if (reportData.personnel_disputes.dismissal_dispute_3y === 2) { // 只显示命中的
+            details.push(`近3年辞退: ${getStatusText(reportData.personnel_disputes.dismissal_dispute_3y)}`);
+        }
+        
+        if (details.length > 0) {
+            risks.push({
+                title: '人事争议类纠纷',
+                value: 2, // 因为至少有一个命中，所以值设为2
+                details: details,
+                bgColor: getBackgroundColor(2),
+                borderColor: getBorderColor(2),
+                fieldName: 'personnel_disputes_3y'
+            });
+        }
+    }
+
+    // 仲裁相关案件 - 近3年，只显示命中的
+    if (reportData.arbitration) {
+        let details: string[] = [];
+        if (reportData.arbitration.arbitration_confirmation_3y === 2) { // 只显示命中的
+            details.push(`近3年仲裁确认: ${getStatusText(reportData.arbitration.arbitration_confirmation_3y)}`);
+        }
+        if (reportData.arbitration.arbitration_revocation_3y === 2) { // 只显示命中的
+            details.push(`近3年仲裁撤销: ${getStatusText(reportData.arbitration.arbitration_revocation_3y)}`);
+        }
+        
+        if (details.length > 0) {
+            risks.push({
+                title: '仲裁相关案件',
+                value: 2, // 因为至少有一个命中，所以值设为2
+                details: details,
+                bgColor: getBackgroundColor(2),
+                borderColor: getBorderColor(2),
+                fieldName: 'arbitration_3y'
+            });
+        }
+    }
+
+    return risks;
+});
+
+// 近五年案件数据 - 只显示命中的时间相关字段
+const recentFiveYearsData = computed(() => {
+    const risks: {title: string, value: number, details: string | string[], bgColor: string, borderColor: string, fieldName: string}[] = [];
+
+    // 劳动争议风险 - 近5年，只显示命中的
+    if (reportData.labor_disputes) {
+        let details: string[] = [];
+        if (reportData.labor_disputes.labor_disputes_5y === 2) { // 只显示命中的
+            details.push(`近5年劳动争议: ${getStatusText(reportData.labor_disputes.labor_disputes_5y)}`);
+        }
+        if (reportData.labor_disputes.labor_relation_5y === 2) { // 只显示命中的
+            details.push(`近5年劳动关系: ${getStatusText(reportData.labor_disputes.labor_relation_5y)}`);
+        }
+        
+        if (details.length > 0) {
+            risks.push({
+                title: '劳动争议风险',
+                value: 2, // 因为至少有一个命中，所以值设为2
+                details: details,
+                bgColor: getBackgroundColor(2),
+                borderColor: getBorderColor(2),
+                fieldName: 'labor_disputes_5y'
+            });
+        }
+    }
+
+    // 社会保险纠纷风险 - 近5年，只显示命中的
+    if (reportData.social_insurance) {
+        let details: string[] = [];
+        if (reportData.social_insurance.pension_5y === 2) { // 只显示命中的
+            details.push(`近5年养老: ${getStatusText(reportData.social_insurance.pension_5y)}`);
+        }
+        if (reportData.social_insurance.injury_insurance_5y === 2) { // 只显示命中的
+            details.push(`近5年工伤: ${getStatusText(reportData.social_insurance.injury_insurance_5y)}`);
+        }
+        if (reportData.social_insurance.unemployment_insurance_5y === 2) { // 只显示命中的
+            details.push(`近5年失业: ${getStatusText(reportData.social_insurance.unemployment_insurance_5y)}`);
+        }
+        if (reportData.social_insurance.medical_insurance_5y === 2) { // 只显示命中的
+            details.push(`近5年医疗: ${getStatusText(reportData.social_insurance.medical_insurance_5y)}`);
+        }
+        if (reportData.social_insurance.maternity_insurance_5y === 2) { // 只显示命中的
+            details.push(`近5年生育: ${getStatusText(reportData.social_insurance.maternity_insurance_5y)}`);
+        }
+        
+        if (details.length > 0) {
+            risks.push({
+                title: '社会保险纠纷风险',
+                value: 2, // 因为至少有一个命中，所以值设为2
+                details: details,
+                bgColor: getBackgroundColor(2),
+                borderColor: getBorderColor(2),
+                fieldName: 'social_insurance_5y'
+            });
+        }
+    }
+
+    // 人事争议类纠纷 - 近5年，只显示命中的
+    if (reportData.personnel_disputes) {
+        let details: string[] = [];
+        if (reportData.personnel_disputes.resignation_dispute_5y === 2) { // 只显示命中的
+            details.push(`近5年辞职: ${getStatusText(reportData.personnel_disputes.resignation_dispute_5y)}`);
+        }
+        if (reportData.personnel_disputes.dismissal_dispute_5y === 2) { // 只显示命中的
+            details.push(`近5年辞退: ${getStatusText(reportData.personnel_disputes.dismissal_dispute_5y)}`);
+        }
+        
+        if (details.length > 0) {
+            risks.push({
+                title: '人事争议类纠纷',
+                value: 2, // 因为至少有一个命中，所以值设为2
+                details: details,
+                bgColor: getBackgroundColor(2),
+                borderColor: getBorderColor(2),
+                fieldName: 'personnel_disputes_5y'
+            });
+        }
+    }
+
+    // 仲裁相关案件 - 近5年，只显示命中的
+    if (reportData.arbitration) {
+        let details: string[] = [];
+        if (reportData.arbitration.arbitration_confirmation_5y === 2) { // 只显示命中的
+            details.push(`近5年仲裁确认: ${getStatusText(reportData.arbitration.arbitration_confirmation_5y)}`);
+        }
+        if (reportData.arbitration.arbitration_revocation_5y === 2) { // 只显示命中的
+            details.push(`近5年仲裁撤销: ${getStatusText(reportData.arbitration.arbitration_revocation_5y)}`);
+        }
+        
+        if (details.length > 0) {
+            risks.push({
+                title: '仲裁相关案件',
+                value: 2, // 因为至少有一个命中，所以值设为2
+                details: details,
+                bgColor: getBackgroundColor(2),
+                borderColor: getBorderColor(2),
+                fieldName: 'arbitration_5y'
+            });
+        }
+    }
+
+    return risks;
+});
+
+// 切换标签页
+const switchTab = (tabName: string) => {
+    activeTab.value = tabName;
+};
+
+// 获取当前显示的数据
+const currentData = computed(() => {
+    switch (activeTab.value) {
+        case 'summary':
+            return summaryData.value;
+        case 'threeYears':
+            return recentThreeYearsData.value;
+        case 'fiveYears':
+            return recentFiveYearsData.value;
+        default:
+            return summaryData.value;
+    }
+});
+
+// 获取当前标签页标题
+const currentTabTitle = computed(() => {
+    switch (activeTab.value) {
+        case 'summary':
+            return '汇总';
+        case 'threeYears':
+            return '近三年案件';
+        case 'fiveYears':
+            return '近五年案件';
+        default:
+            return '汇总';
+    }
+});
+
+// 获取当前标签页副标题
+const currentTabSubtitle = computed(() => {
+    switch (activeTab.value) {
+        case 'summary':
+            return '基础风险概览';
+        case 'threeYears':
+            return '近期风险动态';
+        case 'fiveYears':
+            return '长期风险趋势';
+        default:
+            return '基础风险概览';
+    }
 });
 </script>
 
 <template>
   <div class="ivyz0s0d-container">
-    <!-- 风险卡片网格 -->
-    <div v-if="hasAnyData" class="risk-cards-grid">
-      <div 
-        v-for="(risk, index) in riskTypes" 
-        :key="index"
-        class="risk-card"
-        :style="{ backgroundColor: risk.bgColor, borderLeft: `4px solid ${risk.borderColor}` }"
-      >
-        <div class="risk-card__content">
-          <h4 class="risk-card__title">{{ risk.title }}</h4>
-          <div class="risk-card__status">
-            <!-- 当 details 是字符串时显示单行 -->
-            <p v-if="typeof risk.details === 'string'" class="risk-detail-item">{{ risk.details }}</p>
-            <!-- 当 details 是数组时，每项占一行 -->
-            <p 
-              v-else 
-              v-for="(detail, idx) in risk.details" 
-              :key="idx" 
-              class="risk-detail-item"
-            >{{ detail }}</p>
+    <div class="card">
+      <!-- 标签页导航 -->
+      <div class="tabs-nav">
+        <button 
+          class="tab-button" 
+          :class="{ 'active': activeTab === 'summary' }"
+          @click="switchTab('summary')"
+        >
+          汇总
+        </button>
+        <button 
+          class="tab-button" 
+          :class="{ 'active': activeTab === 'threeYears' }"
+          @click="switchTab('threeYears')"
+        >
+          近三年案件
+        </button>
+        <button 
+          class="tab-button" 
+          :class="{ 'active': activeTab === 'fiveYears' }"
+          @click="switchTab('fiveYears')"
+        >
+          近五年案件
+        </button>
+      </div>
+
+      <!-- 标签页内容 -->
+      <div class="tab-content">
+        <div class="tab-header">
+          <h3 class="tab-title">{{ currentTabTitle }}</h3>
+          <div class="tab-subtitle">{{ currentTabSubtitle }}</div>
+        </div>
+        
+        <div v-if="hasAnyData" class="risk-cards-container">
+          <div 
+            v-for="(risk, index) in currentData" 
+            :key="index"
+            class="risk-card"
+            :class="{ 'hit-risk': risk.value === 2 }"
+            :style="{ backgroundColor: risk.bgColor, borderLeft: `4px solid ${risk.borderColor}` }"
+          >
+            <div class="risk-card__content">
+              <h4 class="risk-card__title">{{ risk.title }}</h4>
+              <div class="risk-card__status">
+                <!-- 当 details 是字符串时显示单行 -->
+                <p v-if="typeof risk.details === 'string'" class="risk-detail-item">{{ risk.details }}</p>
+                <!-- 当 details 是数组时，每项占一行 -->
+                <p 
+                  v-else 
+                  v-for="(detail, idx) in risk.details" 
+                  :key="idx" 
+                  class="risk-detail-item"
+                >{{ detail }}</p>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 如果当前标签页没有数据，显示提示 -->
+          <div v-if="currentData.length === 0" class="no-data-tab">
+            <p>暂无{{ currentTabTitle }}数据</p>
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- 无数据提示 -->
-    <div v-if="!hasAnyData" class="no-data">
-      <p>暂无相关风险数据</p>
+        <!-- 无数据提示 -->
+        <div v-if="!hasAnyData" class="no-data">
+          <p>暂无相关风险数据</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -423,21 +641,92 @@ const hasAnyData = computed(() => {
 .ivyz0s0d-container {
   padding: 20px;
   font-family: Arial, sans-serif;
+  background-color: #f8fafc;
+  min-height: 100vh;
 }
 
-.risk-cards-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 15px;
-  margin-bottom: 20px;
+.card {
+  background-color: white;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  padding: 1.25rem;
+  transition: all 0.3s ease;
+}
+
+.tabs-nav {
+  display: flex;
+  width: 100%;
+  border-bottom: 2px solid #e5e7eb;
+  margin-bottom: 1.25rem;
+}
+
+.tab-button {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  text-align: center;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #6b7280;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.tab-button:hover {
+  color: #4b5563;
+  background-color: #f9fafb;
+}
+
+.tab-button.active {
+  color: #3b82f6;
+  border-bottom-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.tab-content {
+  min-height: 300px;
+}
+
+.tab-header {
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.tab-title {
+  margin: 0 0 0.25rem 0;
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #1f2937;
+}
+
+.tab-subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.risk-cards-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .risk-card {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
+  background-color: white;
+}
+
+.risk-card.hit-risk {
+  border-left: 4px solid #f44336 !important; /* 命中风险的红色边框 */
+  background-color: #ffe8e8 !important; /* 命中风险的浅红色背景 */
 }
 
 .risk-card:hover {
@@ -451,20 +740,20 @@ const hasAnyData = computed(() => {
 }
 
 .risk-card__title {
-  margin: 0 0 8px 0;
-  font-size: 16px;
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
   font-weight: bold;
   color: #333;
 }
 
 .risk-card__status {
   margin: 0;
-  font-size: 14px;
+  font-size: 0.875rem;
   color: #666;
 }
 
 .risk-detail-item {
-  margin: 0 0 4px 0;
+  margin: 0 0 0.25rem 0;
   line-height: 1.4;
 }
 
@@ -476,6 +765,47 @@ const hasAnyData = computed(() => {
   text-align: center;
   color: #999;
   font-style: italic;
-  padding: 20px;
+  padding: 2.5rem 1.25rem;
+  background-color: white;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.no-data-tab {
+  text-align: center;
+  color: #9ca3af;
+  font-style: italic;
+  padding: 1.5rem 1rem;
+  background-color: #f9fafb;
+  border-radius: 0.5rem;
+  border: 1px dashed #e5e7eb;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .ivyz0s0d-container {
+    padding: 0.75rem;
+  }
+  
+  .card {
+    padding: 1rem;
+  }
+  
+  .tab-button {
+    font-size: 0.8rem;
+    padding: 0.5rem;
+  }
+  
+  .tab-title {
+    font-size: 1.125rem;
+  }
+  
+  .risk-card__title {
+    font-size: 0.95rem;
+  }
+  
+  .risk-card__status {
+    font-size: 0.8rem;
+  }
 }
 </style>
\ No newline at end of file