重构家庭资产负债详情展示
This commit is contained in:
@@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<div class="family-asset-liability-detail" v-loading="loading">
|
||||
<div class="detail-grid">
|
||||
<div class="detail-stack">
|
||||
<section class="detail-block">
|
||||
<div class="block-header">
|
||||
<div>
|
||||
<div class="block-title">收入明细</div>
|
||||
<div class="block-subtitle">展示本人、配偶与家庭收入汇总</div>
|
||||
</div>
|
||||
<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">
|
||||
@@ -17,72 +15,79 @@
|
||||
<span class="metric-label">配偶收入</span>
|
||||
<span class="metric-value">{{ formatAmount(incomeDetail.spouseIncome) }}</span>
|
||||
</div>
|
||||
<div class="detail-metric-item">
|
||||
<span class="metric-label">家庭总收入</span>
|
||||
<span class="metric-value">{{ formatAmount(incomeDetail.totalIncome) }}</span>
|
||||
</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">{{ formatAmount(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">{{ 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, 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">
|
||||
<div>
|
||||
<div class="block-title">负债明细</div>
|
||||
<div class="block-subtitle">展示本人及配偶负债小计与明细列表</div>
|
||||
</div>
|
||||
<div class="block-header section-header">
|
||||
<div class="block-title">详查结果</div>
|
||||
<div class="section-summary-value">{{ riskResult.name }}</div>
|
||||
</div>
|
||||
<div v-if="!debtDetail.missingSelfDebtInfo" class="detail-summary">
|
||||
<span>本人负债小计：{{ formatAmount(debtDetail.selfTotalDebt) }}</span>
|
||||
<span>配偶负债小计：{{ formatAmount(debtDetail.spouseTotalDebt) }}</span>
|
||||
<div class="result-card" :class="[`result-card--${riskResult.type}`]">
|
||||
<div class="result-card-label">结论</div>
|
||||
<div class="result-card-value">{{ riskResult.text }}</div>
|
||||
</div>
|
||||
<el-table v-if="debtItems.length" :data="debtItems" size="mini" class="detail-table">
|
||||
<el-table-column prop="debtName" label="负债名称" min-width="140" />
|
||||
<el-table-column prop="debtMainType" label="负债大类" min-width="100" />
|
||||
<el-table-column prop="debtSubType" label="负债小类" min-width="120" />
|
||||
<el-table-column prop="creditorType" label="债权人类型" min-width="120" />
|
||||
<el-table-column prop="ownerName" label="归属人" min-width="100" />
|
||||
<el-table-column label="本金余额" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ formatAmount(scope.row.principalBalance) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询日期" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ formatDetailDateTime(scope.row.queryDate) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-empty v-else :image-size="64" description="暂无负债明细" />
|
||||
</section>
|
||||
|
||||
<section class="detail-block">
|
||||
<div class="block-header">
|
||||
<div>
|
||||
<div class="block-title">资产明细</div>
|
||||
<div class="block-subtitle">展示本人及配偶资产小计与明细列表</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!assetDetail.missingSelfAssetInfo" class="detail-summary">
|
||||
<span>本人资产小计：{{ formatAmount(assetDetail.selfTotalAsset) }}</span>
|
||||
<span>配偶资产小计：{{ formatAmount(assetDetail.spouseTotalAsset) }}</span>
|
||||
</div>
|
||||
<el-table v-if="assetItems.length" :data="assetItems" size="mini" class="detail-table">
|
||||
<el-table-column prop="assetName" label="资产名称" min-width="140" />
|
||||
<el-table-column prop="assetMainType" label="资产大类" min-width="100" />
|
||||
<el-table-column prop="assetSubType" label="资产小类" min-width="120" />
|
||||
<el-table-column prop="holderName" label="持有人" min-width="100" />
|
||||
<el-table-column label="当前估值" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ formatAmount(scope.row.currentValue) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="估值日期" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ formatDetailDateTime(scope.row.valuationDate) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-empty v-else :image-size="64" description="暂无资产明细" />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,6 +118,17 @@ export default {
|
||||
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
|
||||
@@ -135,20 +151,135 @@ export default {
|
||||
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", {
|
||||
return `¥${amount.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) {
|
||||
@@ -170,23 +301,24 @@ export default {
|
||||
padding: 8px 0 4px;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
.detail-stack {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.detail-block {
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.block-header {
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -196,10 +328,11 @@ export default {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.block-subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
.section-summary-value {
|
||||
flex-shrink: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.detail-metric-list {
|
||||
@@ -220,26 +353,118 @@ export default {
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.detail-summary {
|
||||
.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;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
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;
|
||||
}
|
||||
|
||||
.detail-table {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
.summary-group-amount,
|
||||
.summary-group-share {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
:deep(.detail-table .el-table__body-wrapper) {
|
||||
overflow-x: auto;
|
||||
.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) {
|
||||
.detail-grid {
|
||||
.summary-group-list,
|
||||
.metric-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user