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:09:16 +08:00
parent 2866767503
commit 04381dc434
4 changed files with 191 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,51 +8,76 @@
custom-class="project-analysis-dialog"
@close="handleDialogClosed"
>
<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 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 :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>
@@ -200,30 +225,121 @@ 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: 20px 0 20px 20px;
padding: 0;
}
.project-analysis-layout__main {
flex: 1;
min-width: 0;
padding: 20px 20px 20px 0;
border-left: 1px solid #e2e8f0;
padding: 0;
}
.project-analysis-layout__main-scroll {
@@ -234,25 +350,4 @@ 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>

4
ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js
View File

@@ -12,6 +12,8 @@ const dialog = fs.readFileSync(
[
'activeTab: "abnormalDetail"',
"project-analysis-header",
"project-analysis-overview",
"if (value) {",
"resetDialogState()",
'this.activeTab = "abnormalDetail"',
@@ -19,3 +21,5 @@ const dialog = fs.readFileSync(
"this.fetchDetailData()",
"this.resetDialogState()",
].forEach((token) => assert(dialog.includes(token), token));
assert(!dialog.includes("project-analysis-shell"), "关闭重开后默认页签保持，但内部套娃外壳应已移除");

14
ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
View File

@@ -21,7 +21,11 @@ const mockSource = fs.readFileSync(
'title="项目分析"',
'width="80%"',
'top="5vh"',
"project-analysis-shell",
"project-analysis-header",
"project-analysis-overview",
"project-analysis-header__title",
"project-analysis-header__risk",
"project-analysis-header__meta",
"<project-analysis-sidebar",
'<el-tabs v-model="activeTab"',
'name="abnormalDetail"',
@@ -37,10 +41,14 @@ const mockSource = fs.readFileSync(
"project-analysis-layout__main-scroll",
"overflow-y: auto",
"max-height: calc(90vh - 120px)",
"border: 1px solid #e2e8f0",
"border-radius: 20px",
"工号",
"部门",
"所属项目",
].forEach((token) => assert(dialog.includes(token), token));
assert(!dialog.includes("project-analysis-shell"), "不应继续保留内部大白卡外壳");
assert(!dialog.includes('class="source-summary"'), "当前命中模型不应停留在主区顶部");
[
"projectAnalysisTabs",
'key: "abnormalDetail"',

7
ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js
View File

@@ -21,10 +21,13 @@ const mockSource = fs.readFileSync(
'source === "riskModelPeople"',
"当前命中模型",
"dialogData.sourceSummary",
"source-summary__label",
"source-summary__value",
"project-analysis-header__context",
"project-analysis-header__context-label",
"project-analysis-header__context-value",
].forEach((token) => assert(dialog.includes(token), token));
assert(!dialog.includes('class="source-summary"'), "当前命中模型应并入头带上下文区域");
[
"sourceSummary",
"showCurrentModel: source === \"riskModelPeople\"",