482 lines
13 KiB
Vue
482 lines
13 KiB
Vue
<template>
|
|
<div class="family-asset-liability-detail" v-loading="loading">
|
|
<div class="detail-stack">
|
|
<section class="detail-block">
|
|
<div class="block-header section-header">
|
|
<div class="block-title">总收入</div>
|
|
<div class="section-summary-value">{{ formatAmount(totalIncome) }}</div>
|
|
</div>
|
|
<div class="detail-metric-list">
|
|
<div class="detail-metric-item">
|
|
<span class="metric-label">本人收入</span>
|
|
<span class="metric-value">{{ formatAmount(incomeDetail.selfIncome) }}</span>
|
|
</div>
|
|
<div class="detail-metric-item">
|
|
<span class="metric-label">配偶收入</span>
|
|
<span class="metric-value">{{ formatAmount(incomeDetail.spouseIncome) }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="detail-block">
|
|
<div class="block-header section-header">
|
|
<div class="block-title">总负债</div>
|
|
<div class="section-summary-value">{{ formatAmount(totalDebt) }}</div>
|
|
</div>
|
|
<div v-if="debtGroups.length" class="summary-group-list">
|
|
<div v-for="group in debtGroups" :key="group.key" class="summary-group-item">
|
|
<div class="summary-group-main">
|
|
<span class="summary-group-name">{{ group.label }}</span>
|
|
<span class="summary-group-amount">{{ formatAmount(group.amount) }}</span>
|
|
</div>
|
|
<div class="summary-group-meta">
|
|
<span class="summary-group-share-label">占比</span>
|
|
<span class="summary-group-share">{{ formatPercent(group.amount, totalDebt) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-hint">暂无负债来源项</div>
|
|
</section>
|
|
|
|
<section class="detail-block">
|
|
<div class="block-header section-header">
|
|
<div class="block-title">总资产</div>
|
|
<div class="section-summary-value">{{ formatWanAmount(totalAsset) }}</div>
|
|
</div>
|
|
<div v-if="assetGroups.length" class="summary-group-list">
|
|
<div v-for="group in assetGroups" :key="group.key" class="summary-group-item">
|
|
<div class="summary-group-main">
|
|
<span class="summary-group-name">{{ group.label }}</span>
|
|
<span class="summary-group-amount">{{ formatWanAmount(group.amount) }}</span>
|
|
</div>
|
|
<div class="summary-group-meta">
|
|
<span class="summary-group-share-label">占比</span>
|
|
<span class="summary-group-share">{{ formatPercent(group.amount, totalAsset) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-hint">暂无资产来源项</div>
|
|
</section>
|
|
|
|
<section class="detail-block">
|
|
<div class="block-header section-header">
|
|
<div class="block-title">关键指标</div>
|
|
<div class="section-summary-value">3 项</div>
|
|
</div>
|
|
<div class="metric-grid">
|
|
<div class="metric-card">
|
|
<span class="metric-card-label">资产负债率</span>
|
|
<span class="metric-card-value">{{ assetDebtRatio }}</span>
|
|
</div>
|
|
<div class="metric-card">
|
|
<span class="metric-card-label">资产/收入比</span>
|
|
<span class="metric-card-value">{{ assetIncomeRatio }}</span>
|
|
</div>
|
|
<div class="metric-card">
|
|
<span class="metric-card-label">负债/收入比</span>
|
|
<span class="metric-card-value">{{ debtIncomeRatio }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="detail-block">
|
|
<div class="block-header section-header">
|
|
<div class="block-title">详查结果</div>
|
|
<div class="section-summary-value">{{ riskResult.name }}</div>
|
|
</div>
|
|
<div class="result-card" :class="[`result-card--${riskResult.type}`]">
|
|
<div class="result-card-label">结论</div>
|
|
<div class="result-card-value">{{ riskResult.text }}</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { parseTime } from "@/utils/ruoyi";
|
|
|
|
export default {
|
|
name: "FamilyAssetLiabilityDetail",
|
|
props: {
|
|
detail: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
incomeDetail() {
|
|
return this.detail && this.detail.incomeDetail
|
|
? this.detail.incomeDetail
|
|
: {
|
|
selfIncome: 0,
|
|
spouseIncome: 0,
|
|
totalIncome: 0,
|
|
};
|
|
},
|
|
summary() {
|
|
return this.detail && this.detail.summary
|
|
? this.detail.summary
|
|
: {
|
|
totalIncome: 0,
|
|
totalAsset: 0,
|
|
totalDebt: 0,
|
|
riskLevelCode: "MISSING_INFO",
|
|
riskLevelName: "缺少信息",
|
|
};
|
|
},
|
|
assetDetail() {
|
|
return this.detail && this.detail.assetDetail
|
|
? this.detail.assetDetail
|
|
: {
|
|
missingSelfAssetInfo: false,
|
|
selfTotalAsset: 0,
|
|
spouseTotalAsset: 0,
|
|
totalAsset: 0,
|
|
items: [],
|
|
};
|
|
},
|
|
debtDetail() {
|
|
return this.detail && this.detail.debtDetail
|
|
? this.detail.debtDetail
|
|
: {
|
|
missingSelfDebtInfo: false,
|
|
selfTotalDebt: 0,
|
|
spouseTotalDebt: 0,
|
|
totalDebt: 0,
|
|
items: [],
|
|
};
|
|
},
|
|
totalIncome() {
|
|
return this.resolveAmount(this.summary.totalIncome, this.incomeDetail.totalIncome);
|
|
},
|
|
totalAsset() {
|
|
return this.resolveAmount(this.summary.totalAsset, this.assetDetail.totalAsset);
|
|
},
|
|
totalDebt() {
|
|
return this.resolveAmount(this.summary.totalDebt, this.debtDetail.totalDebt);
|
|
},
|
|
assetItems() {
|
|
return Array.isArray(this.assetDetail.items) ? this.assetDetail.items : [];
|
|
},
|
|
debtItems() {
|
|
return Array.isArray(this.debtDetail.items) ? this.debtDetail.items : [];
|
|
},
|
|
assetGroups() {
|
|
return this.buildAmountGroups(this.assetItems, "currentValue", this.resolveAssetGroupLabel, this.totalAsset);
|
|
},
|
|
debtGroups() {
|
|
return this.buildAmountGroups(this.debtItems, "principalBalance", this.resolveDebtGroupLabel, this.totalDebt);
|
|
},
|
|
// 净资产 = 总资产 - 总负债
|
|
netAsset() {
|
|
return this.totalAsset - this.totalDebt;
|
|
},
|
|
// 资产负债率 = totalDebt / totalAsset
|
|
assetDebtRatio() {
|
|
return this.formatMetricValue(this.totalDebt / this.totalAsset, {
|
|
denominator: this.totalAsset,
|
|
suffix: "%",
|
|
isPercent: true,
|
|
});
|
|
},
|
|
// 资产/收入比 = totalAsset / totalIncome
|
|
assetIncomeRatio() {
|
|
return this.formatMetricValue(this.totalAsset / this.totalIncome, {
|
|
denominator: this.totalIncome,
|
|
suffix: "倍",
|
|
});
|
|
},
|
|
// 负债/收入比 = totalDebt / totalIncome
|
|
debtIncomeRatio() {
|
|
return this.formatMetricValue(this.totalDebt / this.totalIncome, {
|
|
denominator: this.totalIncome,
|
|
suffix: "倍",
|
|
});
|
|
},
|
|
riskResult() {
|
|
const riskResultMap = {
|
|
NORMAL: {
|
|
name: this.summary.riskLevelName || "正常",
|
|
text: "结构基本合理",
|
|
type: "success",
|
|
},
|
|
RISK: {
|
|
name: this.summary.riskLevelName || "存在风险",
|
|
text: "负债与收入压力偏高",
|
|
type: "warning",
|
|
},
|
|
HIGH: {
|
|
name: this.summary.riskLevelName || "高风险",
|
|
text: "资产负债结构明显异常",
|
|
type: "danger",
|
|
},
|
|
MISSING_INFO: {
|
|
name: this.summary.riskLevelName || "缺少信息",
|
|
text: "当前信息不完整",
|
|
type: "info",
|
|
},
|
|
};
|
|
return riskResultMap[this.summary.riskLevelCode] || riskResultMap.MISSING_INFO;
|
|
},
|
|
},
|
|
methods: {
|
|
resolveAmount(...values) {
|
|
const target = values.find((value) => value !== undefined && value !== null && value !== "");
|
|
return Number(target || 0);
|
|
},
|
|
formatAmount(value) {
|
|
const amount = Number(value || 0);
|
|
return `¥${amount.toLocaleString("zh-CN", {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})}`;
|
|
},
|
|
formatWanAmount(value) {
|
|
const amount = Number(value || 0);
|
|
if (!Number.isFinite(amount)) {
|
|
return "-";
|
|
}
|
|
return `${(amount / 10000).toLocaleString("zh-CN", {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})} 万元`;
|
|
},
|
|
buildAmountGroups(items, amountField, resolveLabel, totalAmount) {
|
|
const groupMap = items.reduce((result, item, index) => {
|
|
const label = resolveLabel(item);
|
|
const key = `${label}-${index}`;
|
|
if (!result[label]) {
|
|
result[label] = {
|
|
key,
|
|
label,
|
|
amount: 0,
|
|
};
|
|
}
|
|
result[label].amount += Number(item[amountField] || 0);
|
|
return result;
|
|
}, {});
|
|
|
|
return Object.values(groupMap)
|
|
.map((group) => ({
|
|
...group,
|
|
share: this.formatPercent(group.amount, totalAmount),
|
|
}))
|
|
.sort((left, right) => right.amount - left.amount);
|
|
},
|
|
resolveAssetGroupLabel(item) {
|
|
return item.assetName || [item.assetMainType, item.assetSubType].filter(Boolean).join(" / ") || "未分类资产";
|
|
},
|
|
resolveDebtGroupLabel(item) {
|
|
return item.debtName || [item.debtMainType, item.debtSubType].filter(Boolean).join(" / ") || "未分类负债";
|
|
},
|
|
formatPercent(numerator, denominator) {
|
|
if (!denominator) {
|
|
return "-";
|
|
}
|
|
return `${((Number(numerator || 0) / Number(denominator)) * 100).toFixed(2)}%`;
|
|
},
|
|
formatMetricValue(value, options = {}) {
|
|
const { denominator, suffix, isPercent } = options;
|
|
// 分母为 0 时显示 -
|
|
if (!denominator) {
|
|
return "-";
|
|
}
|
|
if (isPercent) {
|
|
return `${(Number(value || 0) * 100).toFixed(2)}${suffix}`;
|
|
}
|
|
return `${Number(value || 0).toFixed(2)}${suffix}`;
|
|
},
|
|
formatDetailDateTime(value) {
|
|
if (!value) {
|
|
return "-";
|
|
}
|
|
const formatted = parseTime(value, "{y}-{m}-{d} {h}:{i}:{s}");
|
|
if (!formatted) {
|
|
return "-";
|
|
}
|
|
const hasTime = !formatted.endsWith(" 00:00:00");
|
|
return parseTime(value, hasTime ? "{y}-{m}-{d} {h}:{i}:{s}" : "{y}-{m}-{d}") || "-";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.family-asset-liability-detail {
|
|
padding: 8px 0 4px;
|
|
}
|
|
|
|
.detail-stack {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detail-block {
|
|
padding: 16px;
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.block-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.section-summary-value {
|
|
flex-shrink: 0;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
}
|
|
|
|
.detail-metric-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.detail-metric-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
font-size: 13px;
|
|
color: #475569;
|
|
}
|
|
|
|
.metric-value {
|
|
font-weight: 600;
|
|
color: #111827;
|
|
}
|
|
|
|
.summary-group-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.summary-group-item {
|
|
padding: 12px 14px;
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.summary-group-main,
|
|
.summary-group-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.summary-group-meta {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.summary-group-name,
|
|
.summary-group-share-label {
|
|
font-size: 13px;
|
|
color: #475569;
|
|
}
|
|
|
|
.summary-group-amount,
|
|
.summary-group-share {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #111827;
|
|
}
|
|
|
|
.metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.metric-card {
|
|
padding: 12px 14px;
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.metric-card-label {
|
|
display: block;
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.metric-card-value {
|
|
display: block;
|
|
margin-top: 8px;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
}
|
|
|
|
.result-card {
|
|
padding: 14px 16px;
|
|
border-radius: 10px;
|
|
border: 1px solid #dbeafe;
|
|
background: #eff6ff;
|
|
}
|
|
|
|
.result-card--success {
|
|
border-color: #bbf7d0;
|
|
background: #f0fdf4;
|
|
}
|
|
|
|
.result-card--warning {
|
|
border-color: #fde68a;
|
|
background: #fffbeb;
|
|
}
|
|
|
|
.result-card--danger {
|
|
border-color: #fecaca;
|
|
background: #fef2f2;
|
|
}
|
|
|
|
.result-card--info {
|
|
border-color: #cbd5e1;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.result-card-label {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.result-card-value {
|
|
margin-top: 6px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #111827;
|
|
}
|
|
|
|
.empty-hint {
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.summary-group-list,
|
|
.metric-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|