481 lines
19 KiB
Vue
481 lines
19 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed } from 'vue';
|
|||
|
|
|
|||
|
|
// 接收父组件传入的 props
|
|||
|
|
const props = defineProps({
|
|||
|
|
data: Object,
|
|||
|
|
params: Object,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 定义组件名称，用于在控制台输出调试信息
|
|||
|
|
const componentName = 'IVYZ0S0D';
|
|||
|
|
|
|||
|
|
// 将 props.data 赋值给 reportData 变量
|
|||
|
|
let reportData: any = props.data || {};
|
|||
|
|
|
|||
|
|
// 如果 reportData 不为空，则将其赋值给变量
|
|||
|
|
if (reportData) {
|
|||
|
|
console.log(`${componentName} 组件接收到的数据：`, reportData);
|
|||
|
|
} else {
|
|||
|
|
console.log(`${componentName} 组件未接收到数据`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取状态描述文本
|
|||
|
|
const getStatusText = (value: number) => {
|
|||
|
|
if (value === 1) return '未命中';
|
|||
|
|
if (value === 2) return '命中';
|
|||
|
|
return '未知';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取通知函状态描述文本
|
|||
|
|
const getNoticeLetterStatusText = (value: number) => {
|
|||
|
|
if (value === 1) return '未命中';
|
|||
|
|
if (value === 2) return '命中';
|
|||
|
|
return '未知';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取通知函期间描述文本
|
|||
|
|
const getNoticeLetterPeriodText = (period: number) => {
|
|||
|
|
const periodMap: Record<number, string> = {
|
|||
|
|
0: '没有被发送通知函',
|
|||
|
|
1: '近2年内',
|
|||
|
|
2: '2-4年',
|
|||
|
|
3: '5年以上'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return periodMap[period] || '未知期间';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取背景颜色
|
|||
|
|
const getBackgroundColor = (value: number) => {
|
|||
|
|
if (value === 1) return '#e8f5e8'; // 浅绿色
|
|||
|
|
if (value === 2) return '#ffe8e8'; // 浅红色
|
|||
|
|
return '#f5f5f5'; // 默认灰色
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取边框颜色
|
|||
|
|
const getBorderColor = (value: number) => {
|
|||
|
|
if (value === 1) return '#4caf50'; // 绿色边框
|
|||
|
|
if (value === 2) return '#f44336'; // 红色边框
|
|||
|
|
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 riskTypes = computed(() => {
|
|||
|
|
const risks: {title: string, value: number, details: string | string[], bgColor: string, borderColor: string}[] = [];
|
|||
|
|
|
|||
|
|
// 总体风险
|
|||
|
|
if (reportData.risk_flag !== undefined) {
|
|||
|
|
risks.push({
|
|||
|
|
title: '总体风险',
|
|||
|
|
value: reportData.risk_flag,
|
|||
|
|
details: getStatusText(reportData.risk_flag),
|
|||
|
|
bgColor: getBackgroundColor(reportData.risk_flag),
|
|||
|
|
borderColor: getBorderColor(reportData.risk_flag)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 失信风险
|
|||
|
|
if (reportData.dishonesty && reportData.dishonesty.dishonesty !== undefined) {
|
|||
|
|
risks.push({
|
|||
|
|
title: '失信风险',
|
|||
|
|
value: reportData.dishonesty.dishonesty,
|
|||
|
|
details: getStatusText(reportData.dishonesty.dishonesty),
|
|||
|
|
bgColor: getBackgroundColor(reportData.dishonesty.dishonesty),
|
|||
|
|
borderColor: getBorderColor(reportData.dishonesty.dishonesty)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 高消费限制风险
|
|||
|
|
if (reportData.high_consumption && reportData.high_consumption.high_consumption !== undefined) {
|
|||
|
|
risks.push({
|
|||
|
|
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)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 劳动争议风险
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (reportData.labor_disputes.labor_contract !== undefined) {
|
|||
|
|
details.push(`劳动合同: ${getStatusText(reportData.labor_disputes.labor_contract)}`);
|
|||
|
|
}
|
|||
|
|
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')),
|
|||
|
|
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')))
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 社会保险纠纷风险
|
|||
|
|
if (reportData.social_insurance) {
|
|||
|
|
let details: string[] = [];
|
|||
|
|
if (reportData.social_insurance.social_insurance !== undefined) {
|
|||
|
|
details.push(`社保纠纷: ${getStatusText(reportData.social_insurance.social_insurance)}`);
|
|||
|
|
}
|
|||
|
|
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')),
|
|||
|
|
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')))
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 福利待遇纠纷
|
|||
|
|
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)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 人事争议类纠纷
|
|||
|
|
if (reportData.personnel_disputes) {
|
|||
|
|
let details: string[] = [];
|
|||
|
|
if (reportData.personnel_disputes.personnel_dispute !== undefined) {
|
|||
|
|
details.push(`人事争议: ${getStatusText(reportData.personnel_disputes.personnel_dispute)}`);
|
|||
|
|
}
|
|||
|
|
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')),
|
|||
|
|
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')))
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 仲裁相关案件
|
|||
|
|
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')),
|
|||
|
|
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')))
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通知函触达
|
|||
|
|
if (reportData.notice_letter && reportData.notice_letter.notice_letter !== undefined) {
|
|||
|
|
let statusText = getNoticeLetterStatusText(reportData.notice_letter.notice_letter);
|
|||
|
|
let periodText = '';
|
|||
|
|
|
|||
|
|
if (reportData.notice_letter.notice_letter_period !== undefined) {
|
|||
|
|
periodText = `期间: ${getNoticeLetterPeriodText(reportData.notice_letter.notice_letter_period)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const detailParts = [`状态: ${statusText}`];
|
|||
|
|
if (periodText) {
|
|||
|
|
detailParts.push(periodText);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
risks.push({
|
|||
|
|
title: '通知函触达',
|
|||
|
|
value: reportData.notice_letter.notice_letter,
|
|||
|
|
details: detailParts,
|
|||
|
|
bgColor: getBackgroundColor(reportData.notice_letter.notice_letter),
|
|||
|
|
borderColor: getBorderColor(reportData.notice_letter.notice_letter)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return risks;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 检查是否至少有一个数据类别有内容
|
|||
|
|
const hasAnyData = computed(() => {
|
|||
|
|
return riskTypes.value.length > 0;
|
|||
|
|
});
|
|||
|
|
</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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 无数据提示 -->
|
|||
|
|
<div v-if="!hasAnyData" class="no-data">
|
|||
|
|
<p>暂无相关风险数据</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.ivyz0s0d-container {
|
|||
|
|
padding: 20px;
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-cards-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-card {
|
|||
|
|
border: 1px solid #e0e0e0;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 15px;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|||
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-card:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-card__content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-card__title {
|
|||
|
|
margin: 0 0 8px 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-card__status {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-detail-item {
|
|||
|
|
margin: 0 0 4px 0;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.risk-detail-item:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-data {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #999;
|
|||
|
|
font-style: italic;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|