wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构家庭资产负债详情展示

Browse Source
This commit is contained in:
wkc
2026-03-25 19:28:54 +08:00
parent 17a6c389d1
commit 60f935da27
20 changed files with 691 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilityDetail.vue
View File

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

30
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
View File

@@ -4,11 +4,10 @@
<section
v-for="(group, groupIndex) in detailGroups"
:key="`${group.groupCode || group.groupType || groupIndex}-group`"
class="abnormal-card analysis-panel"
class="abnormal-card"
>
<div class="abnormal-card__header">
<div class="abnormal-card__title">{{ group.groupName || "异常明细" }}</div>
<div class="abnormal-card__summary">{{ getGroupSummary(group) }}</div>
</div>
<el-table
@@ -152,16 +151,6 @@ export default {
resolveGroupKey(group, index = 0) {
return group.groupCode || group.groupName || `BANK_STATEMENT_${index}`;
},
getGroupSummary(group) {
const recordTotal = Array.isArray(group && group.records) ? group.records.length : 0;
if (group && group.groupType === "BANK_STATEMENT") {
return `共 ${recordTotal} 条交易记录，按时间顺序查看重点流水。`;
}
if (group && group.groupType === "OBJECT") {
return `共 ${recordTotal} 个异常对象，结合快照与摘要连续阅读。`;
}
return "按统一工作台区块承载当前异常分组内容。";
},
getStatementPage(group) {
const groupKey = this.resolveGroupKey(group);
return this.statementPageMap[groupKey] || 1;
@@ -190,14 +179,10 @@ export default {
gap: 16px;
}
.analysis-panel {
border: 1px solid #e2e8f0;
border-radius: 20px;
background: #ffffff;
}
.abnormal-card {
padding: 20px;
border: 1px solid #e2e8f0;
background: #fff;
}
.abnormal-card__header {
@@ -210,10 +195,8 @@ export default {
color: #0f172a;
}
.abnormal-card__summary {
margin-top: 8px;
font-size: 13px;
line-height: 1.7;
.abnormal-card__subtitle {
font-size: 12px;
color: #64748b;
}
@@ -259,8 +242,7 @@ export default {
.object-card {
padding: 16px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #ffffff;
background: #f8fafc;
}
.object-card__title {

247
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
View File

@@ -8,76 +8,51 @@
custom-class="project-analysis-dialog"
@close="handleDialogClosed"
>
<div class="project-analysis-header">
<div class="project-analysis-header__main">
<div class="project-analysis-header__title-row">
<div class="project-analysis-header__title">{{ dialogData.sidebar.basicInfo.name || "-" }}</div>
<span class="project-analysis-header__risk">{{ dialogData.sidebar.basicInfo.riskLevel || "-" }}</span>
</div>
<div class="project-analysis-header__meta">
<span>工号 {{ dialogData.sidebar.basicInfo.staffCode || "-" }}</span>
<span>部门 {{ dialogData.sidebar.basicInfo.department || "-" }}</span>
<span>所属项目 {{ dialogData.sidebar.basicInfo.projectName || "-" }}</span>
</div>
</div>
<div
v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
class="project-analysis-header__context"
>
<span class="project-analysis-header__context-label">当前命中模型</span>
<span class="project-analysis-header__context-value">{{ dialogData.sourceSummary.currentModelValue }}</span>
</div>
</div>
<div class="project-analysis-overview">
<div class="project-analysis-overview__item">
<span class="project-analysis-overview__label">风险等级</span>
<strong class="project-analysis-overview__value">{{ dialogData.sidebar.basicInfo.riskLevel || "-" }}</strong>
</div>
<div class="project-analysis-overview__item">
<span class="project-analysis-overview__label">命中模型数</span>
<strong class="project-analysis-overview__value">{{ dialogData.sidebar.modelSummary.modelCount || "-" }}</strong>
</div>
<div class="project-analysis-overview__item">
<span class="project-analysis-overview__label">核心异常标签</span>
<strong class="project-analysis-overview__value">{{ dialogData.sidebar.modelSummary.riskTags.length || 0 }}</strong>
</div>
</div>
<div class="project-analysis-layout">
<project-analysis-sidebar
class="project-analysis-layout__sidebar"
:sidebar-data="dialogData.sidebar"
/>
<div v-loading="detailLoading" class="project-analysis-layout__main">
<div class="project-analysis-layout__main-scroll">
<el-alert
v-if="detailError"
:closable="false"
class="project-analysis-layout__alert"
type="error"
show-icon
:title="detailError"
>
<template slot="default">
<el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
</template>
</el-alert>
<el-tabs v-model="activeTab" stretch>
<el-tab-pane label="异常明细" name="abnormalDetail">
<project-analysis-abnormal-tab class="analysis-panel" :detail-data="dialogData.abnormalDetail" />
</el-tab-pane>
<el-tab-pane label="资产分析" name="assetAnalysis">
<project-analysis-placeholder-tab class="analysis-panel" :tab-data="getTabData('assetAnalysis')" />
</el-tab-pane>
<el-tab-pane label="征信摘要" name="creditSummary">
<project-analysis-placeholder-tab class="analysis-panel" :tab-data="getTabData('creditSummary')" />
</el-tab-pane>
<el-tab-pane label="关系图谱" name="relationshipGraph">
<project-analysis-placeholder-tab class="analysis-panel" :tab-data="getTabData('relationshipGraph')" />
</el-tab-pane>
<el-tab-pane label="资金流向" name="fundFlow">
<project-analysis-placeholder-tab class="analysis-panel" :tab-data="getTabData('fundFlow')" />
</el-tab-pane>
</el-tabs>
<div class="project-analysis-shell">
<div class="project-analysis-layout">
<project-analysis-sidebar
class="project-analysis-layout__sidebar"
:sidebar-data="dialogData.sidebar"
/>
<div v-loading="detailLoading" class="project-analysis-layout__main">
<div class="project-analysis-layout__main-scroll">
<el-alert
v-if="detailError"
:closable="false"
class="project-analysis-layout__alert"
type="error"
show-icon
:title="detailError"
>
<template slot="default">
<el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
</template>
</el-alert>
<div
v-if='dialogData.sourceSummary.showCurrentModel && source === "riskModelPeople"'
class="source-summary"
>
<span class="source-summary__label">当前命中模型</span>
<span class="source-summary__value">{{ dialogData.sourceSummary.currentModelValue }}</span>
</div>
<el-tabs v-model="activeTab" stretch>
<el-tab-pane label="异常明细" name="abnormalDetail">
<project-analysis-abnormal-tab :detail-data="dialogData.abnormalDetail" />
</el-tab-pane>
<el-tab-pane label="资产分析" name="assetAnalysis">
<project-analysis-placeholder-tab :tab-data="getTabData('assetAnalysis')" />
</el-tab-pane>
<el-tab-pane label="征信摘要" name="creditSummary">
<project-analysis-placeholder-tab :tab-data="getTabData('creditSummary')" />
</el-tab-pane>
<el-tab-pane label="关系图谱" name="relationshipGraph">
<project-analysis-placeholder-tab :tab-data="getTabData('relationshipGraph')" />
</el-tab-pane>
<el-tab-pane label="资金流向" name="fundFlow">
<project-analysis-placeholder-tab :tab-data="getTabData('fundFlow')" />
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
@@ -225,121 +200,30 @@ export default {
</script>
<style lang="scss" scoped>
.project-analysis-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 24px;
border: 1px solid #e2e8f0;
border-radius: 20px;
background: linear-gradient(135deg, #fffdf7 0%, #ffffff 60%, #f8fafc 100%);
}
.project-analysis-header__main {
min-width: 0;
flex: 1;
}
.project-analysis-header__title-row {
display: flex;
align-items: center;
gap: 12px;
}
.project-analysis-header__title {
font-size: 24px;
font-weight: 600;
line-height: 1.2;
color: #0f172a;
}
.project-analysis-header__risk {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: #fee2e2;
font-size: 13px;
font-weight: 600;
color: #b91c1c;
}
.project-analysis-header__meta {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
margin-top: 14px;
font-size: 13px;
color: #475569;
}
.project-analysis-header__context {
display: flex;
min-width: 220px;
flex-direction: column;
gap: 8px;
padding: 16px 18px;
border-radius: 16px;
background: #fff7ed;
}
.project-analysis-header__context-label {
font-size: 12px;
color: #9a3412;
}
.project-analysis-header__context-value {
font-size: 14px;
font-weight: 600;
line-height: 1.6;
color: #7c2d12;
}
.project-analysis-overview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 16px;
}
.project-analysis-overview__item {
padding: 18px 20px;
border: 1px solid #e2e8f0;
border-radius: 18px;
background: #ffffff;
}
.project-analysis-overview__label {
display: block;
font-size: 12px;
color: #64748b;
}
.project-analysis-overview__value {
display: block;
margin-top: 8px;
font-size: 18px;
color: #0f172a;
}
.project-analysis-layout {
display: flex;
gap: 20px;
margin-top: 16px;
min-height: 640px;
max-height: calc(90vh - 120px);
}
.project-analysis-shell {
border: 1px solid #e2e8f0;
border-radius: 20px;
background: #fff;
overflow: hidden;
}
.project-analysis-layout__sidebar {
flex: 0 0 340px;
padding: 0;
padding: 20px 0 20px 20px;
}
.project-analysis-layout__main {
flex: 1;
min-width: 0;
padding: 0;
padding: 20px 20px 20px 0;
border-left: 1px solid #e2e8f0;
}
.project-analysis-layout__main-scroll {
@@ -350,4 +234,25 @@ export default {
.project-analysis-layout__alert {
margin-bottom: 16px;
}
.source-summary {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding: 14px 16px;
border: 1px solid #fde68a;
background: #fffbeb;
}
.source-summary__label {
font-size: 12px;
color: #92400e;
}
.source-summary__value {
font-size: 13px;
font-weight: 600;
color: #b45309;
}
</style>

14
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="project-analysis-placeholder-tab analysis-panel analysis-panel--placeholder">
<section class="project-analysis-placeholder-tab">
<div class="placeholder-title">{{ tabData.label }}</div>
<div class="placeholder-text">{{ tabData.description }}</div>
</section>
@@ -21,19 +21,11 @@ export default {
</script>
<style lang="scss" scoped>
.analysis-panel {
border: 1px solid #e2e8f0;
border-radius: 20px;
background: #ffffff;
}
.project-analysis-placeholder-tab {
min-height: 560px;
padding: 24px;
}
.analysis-panel--placeholder {
background: #ffffff;
border: 1px solid #e2e8f0;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.placeholder-title {

200
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
View File

@@ -1,57 +1,51 @@
<template>
<aside class="project-analysis-sidebar">
<section class="sidebar-profile">
<div class="sidebar-section__title">人物档案</div>
<div class="sidebar-profile__name-row">
<div>
<div class="sidebar-profile__name">{{ sidebarData.basicInfo.name || "-" }}</div>
<div class="sidebar-profile__meta">
<span>工号 {{ sidebarData.basicInfo.staffCode || "-" }}</span>
<span>部门 {{ sidebarData.basicInfo.department || "-" }}</span>
<section class="sidebar-card">
<div class="sidebar-section">
<div class="sidebar-card__title">人员基础信息</div>
<div class="sidebar-field">
<span class="sidebar-field__label">姓名</span>
<span class="sidebar-field__value">{{ sidebarData.basicInfo.name || "-" }}</span>
</div>
<div class="sidebar-field">
<span class="sidebar-field__label">工号</span>
<span class="sidebar-field__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
</div>
<div class="sidebar-field">
<span class="sidebar-field__label">部门</span>
<span class="sidebar-field__value">{{ sidebarData.basicInfo.department || "-" }}</span>
</div>
<div class="sidebar-field">
<span class="sidebar-field__label">风险等级</span>
<span class="sidebar-field__value">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
</div>
<div class="sidebar-field">
<span class="sidebar-field__label">所属项目</span>
<span class="sidebar-field__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
</div>
</div>
<div class="sidebar-section sidebar-section--split">
<div class="sidebar-card__title">命中模型摘要</div>
<div class="sidebar-field">
<span class="sidebar-field__label">命中模型数</span>
<span class="sidebar-field__value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
</div>
<div class="sidebar-field sidebar-field--column">
<span class="sidebar-field__label">核心异常标签</span>
<div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
<el-tag
v-for="(tag, index) in sidebarData.modelSummary.riskTags"
:key="`${formatRiskTag(tag)}-${index}`"
size="mini"
effect="plain"
>
{{ formatRiskTag(tag) }}
</el-tag>
</div>
</div>
<span class="sidebar-risk-badge">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
</div>
<div class="sidebar-profile__grid">
<div class="sidebar-profile__item">
<span class="sidebar-profile__label">所属项目</span>
<span class="sidebar-profile__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
</div>
<div class="sidebar-profile__item">
<span class="sidebar-profile__label">风险等级</span>
<span class="sidebar-profile__value">{{ sidebarData.basicInfo.riskLevel || "-" }}</span>
<span v-else class="sidebar-field__value">暂无异常标签</span>
</div>
</div>
</section>
<section class="sidebar-summary">
<div class="sidebar-section__title">模型摘要</div>
<div class="sidebar-summary__metric">
<span class="sidebar-summary__label">命中模型数</span>
<strong class="sidebar-summary__value">{{ sidebarData.modelSummary.modelCount || "-" }}</strong>
</div>
<div class="sidebar-summary__block">
<span class="sidebar-summary__label">核心异常标签</span>
<div v-if="sidebarData.modelSummary.riskTags.length" class="tag-list">
<el-tag
v-for="(tag, index) in sidebarData.modelSummary.riskTags"
:key="`${formatRiskTag(tag)}-${index}`"
size="mini"
effect="plain"
>
{{ formatRiskTag(tag) }}
</el-tag>
</div>
<span v-else class="sidebar-summary__empty">暂无异常标签</span>
</div>
</section>
<section class="sidebar-hint">
<div class="sidebar-section__title">辅助提示</div>
<p class="sidebar-hint__text">
侧栏仅保留人物身份与模型摘要，详细异常请在主区页签中继续查看。
</p>
</section>
</aside>
</template>
@@ -86,109 +80,69 @@ export default {
<style lang="scss" scoped>
.project-analysis-sidebar {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.sidebar-profile,
.sidebar-summary,
.sidebar-hint {
padding: 20px;
border-radius: 20px;
background: #ffffff;
.sidebar-card {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
.sidebar-section__title {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
color: #92400e;
.sidebar-section {
padding: 18px 16px;
}
.sidebar-profile__name-row {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
margin-top: 14px;
.sidebar-section--split {
border-top: 1px solid #e2e8f0;
}
.sidebar-profile__name {
font-size: 24px;
.sidebar-card__title {
margin-bottom: 14px;
font-size: 15px;
font-weight: 600;
color: #0f172a;
}
.sidebar-profile__meta {
.sidebar-field + .sidebar-field {
margin-top: 12px;
}
.sidebar-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
font-size: 12px;
color: #64748b;
}
.sidebar-risk-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 999px;
background: #fee2e2;
font-size: 12px;
font-weight: 600;
color: #b91c1c;
}
.sidebar-profile__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
}
.sidebar-profile__item,
.sidebar-summary__metric,
.sidebar-summary__block {
padding: 14px 16px;
border-radius: 16px;
background: #f8fafc;
}
.sidebar-profile__label,
.sidebar-summary__label {
.sidebar-field--column {
display: block;
}
.sidebar-field--column .sidebar-field__label {
display: block;
margin-bottom: 8px;
}
.sidebar-field__label {
flex: 0 0 84px;
font-size: 12px;
color: #64748b;
}
.sidebar-profile__value,
.sidebar-summary__value,
.sidebar-summary__empty {
display: block;
margin-top: 8px;
font-size: 14px;
.sidebar-field__value {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.6;
text-align: right;
color: #0f172a;
word-break: break-all;
}
.sidebar-summary {
display: flex;
flex-direction: column;
gap: 12px;
}
.sidebar-hint__text {
margin: 14px 0 0;
font-size: 13px;
line-height: 1.7;
color: #64748b;
}
.tag-list {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;