team/report_viewer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

f

Browse Source
This commit is contained in:
Mrx
2026-02-24 11:10:28 +08:00
parent ce06f3a958
commit b1b301306e
2 changed files with 626 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
public/example.json
View File

@@ -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"
}
}
}
}
}

774
src/ui/IVYZ0S0D.vue
View File

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