新增图谱功能及验收清单
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<el-dialog
|
||||
title="项目分析"
|
||||
:visible.sync="visibleProxy"
|
||||
width="92%"
|
||||
width="88%"
|
||||
top="2vh"
|
||||
append-to-body
|
||||
custom-class="project-analysis-dialog"
|
||||
@@ -44,7 +44,7 @@
|
||||
<el-button type="text" size="mini" @click="handleRetryDetail">重试</el-button>
|
||||
</template>
|
||||
</el-alert>
|
||||
<el-tabs v-model="activeTab" class="project-analysis-tabs" stretch>
|
||||
<el-tabs v-model="activeTab" class="project-analysis-tabs" stretch @tab-click="handleTabChange">
|
||||
<el-tab-pane label="异常明细" name="abnormalDetail">
|
||||
<project-analysis-abnormal-tab
|
||||
:detail-data="dialogData.abnormalDetail"
|
||||
@@ -60,10 +60,24 @@
|
||||
<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')" />
|
||||
<project-analysis-fund-flow-tab
|
||||
v-if="activeTab === 'relationshipGraph'"
|
||||
ref="relationshipGraphTab"
|
||||
:project-id="projectId"
|
||||
:person="person"
|
||||
:model-summary="modelSummary"
|
||||
initial-graph-tab="relation"
|
||||
:graph-tabs="['relation']"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="资金流向" name="fundFlow">
|
||||
<project-analysis-placeholder-tab :tab-data="getTabData('fundFlow')" />
|
||||
<project-analysis-fund-flow-tab
|
||||
v-if="activeTab === 'fundFlow'"
|
||||
ref="fundFlowTab"
|
||||
:project-id="projectId"
|
||||
:person="person"
|
||||
:model-summary="modelSummary"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@@ -75,6 +89,7 @@
|
||||
<script>
|
||||
import { getOverviewPersonAnalysisDetail } from "@/api/ccdi/projectOverview";
|
||||
import ProjectAnalysisAbnormalTab from "./ProjectAnalysisAbnormalTab";
|
||||
import ProjectAnalysisFundFlowTab from "./ProjectAnalysisFundFlowTab";
|
||||
import ProjectAnalysisPlaceholderTab from "./ProjectAnalysisPlaceholderTab";
|
||||
import ProjectAnalysisSidebar from "./ProjectAnalysisSidebar";
|
||||
import { buildProjectAnalysisDialogData } from "./preliminaryCheck.mock";
|
||||
@@ -83,6 +98,7 @@ export default {
|
||||
name: "ProjectAnalysisDialog",
|
||||
components: {
|
||||
ProjectAnalysisAbnormalTab,
|
||||
ProjectAnalysisFundFlowTab,
|
||||
ProjectAnalysisPlaceholderTab,
|
||||
ProjectAnalysisSidebar,
|
||||
},
|
||||
@@ -208,6 +224,16 @@ export default {
|
||||
this.resetDialogState();
|
||||
this.$emit("close");
|
||||
},
|
||||
handleTabChange() {
|
||||
this.$nextTick(() => {
|
||||
const tabRef = this.activeTab === "relationshipGraph"
|
||||
? this.$refs.relationshipGraphTab
|
||||
: this.$refs.fundFlowTab;
|
||||
if (tabRef && tabRef.ensureGraphReady) {
|
||||
tabRef.ensureGraphReady();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -216,14 +242,14 @@ export default {
|
||||
.project-analysis-dialog__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(96vh - 64px);
|
||||
min-height: calc(92vh - 64px);
|
||||
border: 1px solid #dde3ec;
|
||||
background: #ffffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-analysis-header {
|
||||
padding: 38px 54px 34px;
|
||||
padding: 28px 40px 24px;
|
||||
border-bottom: 1px solid #dde3ec;
|
||||
background: #ffffff;
|
||||
}
|
||||
@@ -241,15 +267,15 @@ export default {
|
||||
|
||||
.project-analysis-header__eyebrow {
|
||||
color: #65758d;
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.project-analysis-header__title {
|
||||
margin-top: 24px;
|
||||
margin-top: 18px;
|
||||
color: #101a2b;
|
||||
font-size: 34px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -280,10 +306,10 @@ export default {
|
||||
.project-analysis-workspace {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 56px;
|
||||
min-height: 720px;
|
||||
max-height: calc(96vh - 168px);
|
||||
padding: 28px 54px 42px;
|
||||
gap: 36px;
|
||||
min-height: 640px;
|
||||
max-height: calc(92vh - 150px);
|
||||
padding: 20px 40px 28px;
|
||||
overflow: auto;
|
||||
background: #ffffff;
|
||||
}
|
||||
@@ -295,15 +321,15 @@ export default {
|
||||
}
|
||||
|
||||
.project-analysis-layout__sidebar {
|
||||
flex: 0 0 38%;
|
||||
max-width: 520px;
|
||||
flex: 0 0 34%;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.project-analysis-layout__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border-left: 1px solid #dde3ec;
|
||||
padding-left: 56px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.project-analysis-layout__alert {
|
||||
@@ -343,12 +369,12 @@ export default {
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: 58px;
|
||||
padding: 0 32px !important;
|
||||
height: 52px;
|
||||
padding: 0 24px !important;
|
||||
color: #2a374a;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 58px;
|
||||
line-height: 52px;
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
@@ -362,7 +388,7 @@ export default {
|
||||
}
|
||||
|
||||
.el-tabs__content {
|
||||
padding-top: 28px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="project-analysis-fund-graph">
|
||||
<fund-graph-section
|
||||
ref="fundGraphSection"
|
||||
:initial-keyword="defaultKeyword"
|
||||
:initial-graph-tab="initialGraphTab"
|
||||
:auto-scroll="false"
|
||||
:hide-header="true"
|
||||
:graph-tabs="graphTabs"
|
||||
:layout-scale="0.94"
|
||||
:show-edge-detail-table="false"
|
||||
hide-empty-detail-pane
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FundGraphSection from "./graph/FundGraphSection";
|
||||
|
||||
export default {
|
||||
name: "ProjectAnalysisFundFlowTab",
|
||||
components: {
|
||||
FundGraphSection,
|
||||
},
|
||||
props: {
|
||||
projectId: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
person: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
modelSummary: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
initialGraphTab: {
|
||||
type: String,
|
||||
default: "fund",
|
||||
validator: (value) => ["fund", "relation"].includes(value),
|
||||
},
|
||||
graphTabs: {
|
||||
type: Array,
|
||||
default: () => ["fund", "relation"],
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
defaultKeyword() {
|
||||
return (this.modelSummary && this.modelSummary.staffIdCard)
|
||||
|| (this.person && (this.person.idNo || this.person.staffIdCard || this.person.staffName || this.person.name))
|
||||
|| "";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
ensureGraphReady() {
|
||||
this.$nextTick(() => {
|
||||
const graphSection = this.$refs.fundGraphSection;
|
||||
if (graphSection && graphSection.resizeChart) {
|
||||
graphSection.resizeChart();
|
||||
}
|
||||
if (graphSection && graphSection.resizeRelationChart) {
|
||||
graphSection.resizeRelationChart();
|
||||
}
|
||||
if (graphSection && graphSection.renderChart) {
|
||||
graphSection.renderChart();
|
||||
}
|
||||
if (graphSection && graphSection.renderRelationChart) {
|
||||
graphSection.renderRelationChart();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.project-analysis-fund-graph {
|
||||
min-height: 520px;
|
||||
|
||||
::v-deep .graph-analysis-section {
|
||||
margin-top: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
::v-deep .fund-workbench {
|
||||
grid-template-columns: minmax(0, 1fr) 316px;
|
||||
max-width: 1000px;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
::v-deep .fund-workbench.fund-workbench--single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
::v-deep .fund-left-pane {
|
||||
padding: 10px 12px 12px;
|
||||
}
|
||||
|
||||
::v-deep .fund-right-pane {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas-wrap,
|
||||
::v-deep .detail-empty {
|
||||
height: auto;
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
::v-deep .query-row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .keyword-input {
|
||||
width: 196px;
|
||||
}
|
||||
|
||||
::v-deep .date-range {
|
||||
width: 216px;
|
||||
}
|
||||
|
||||
::v-deep .detail-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
::v-deep .query-row {
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep .graph-shell {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
::v-deep .detail-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
::v-deep .node-field-row,
|
||||
::v-deep .edge-metrics span,
|
||||
::v-deep .edge-metrics strong,
|
||||
::v-deep .detail-subtitle {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.project-analysis-fund-graph {
|
||||
::v-deep .fund-workbench {
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
max-width: 940px;
|
||||
}
|
||||
|
||||
::v-deep .fund-workbench.fund-workbench--single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas-wrap,
|
||||
::v-deep .detail-empty {
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
::v-deep .graph-canvas {
|
||||
min-height: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -22,22 +22,7 @@
|
||||
@evidence-confirm="$emit('evidence-confirm', $event)"
|
||||
/>
|
||||
|
||||
<section class="graph-placeholder-card">
|
||||
<div class="graph-placeholder-header">
|
||||
<div>
|
||||
<div class="graph-placeholder-title">图谱外链展示</div>
|
||||
<div class="graph-placeholder-subtitle">用于后续接入外链图谱页面</div>
|
||||
</div>
|
||||
<el-tag size="mini" type="info" effect="plain">占位中</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="graph-placeholder-body">
|
||||
<div class="graph-placeholder-text">
|
||||
当前卡片用于预留专项核查图谱入口，后续接入外链地址后可在此直接跳转展示。
|
||||
</div>
|
||||
<el-button type="primary" size="small" disabled>待接入</el-button>
|
||||
</div>
|
||||
</section>
|
||||
<fund-graph-section ref="fundGraphSection" />
|
||||
</div>
|
||||
|
||||
<div v-if="projectId" class="special-check-extended-wrapper">
|
||||
@@ -51,12 +36,14 @@ import { createSpecialCheckLoadedData, specialCheckStateData } from "./specialCh
|
||||
import { getFamilyAssetLiabilityList } from "@/api/ccdi/projectSpecialCheck";
|
||||
import ExtendedQuerySection from "./ExtendedQuerySection";
|
||||
import FamilyAssetLiabilitySection from "./FamilyAssetLiabilitySection";
|
||||
import FundGraphSection from "./graph/FundGraphSection";
|
||||
|
||||
export default {
|
||||
name: "SpecialCheck",
|
||||
components: {
|
||||
ExtendedQuerySection,
|
||||
FamilyAssetLiabilitySection,
|
||||
FundGraphSection,
|
||||
},
|
||||
props: {
|
||||
projectId: {
|
||||
@@ -155,52 +142,6 @@ export default {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.graph-placeholder-card {
|
||||
margin-top: 16px;
|
||||
min-height: 500px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--ccdi-border);
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--ccdi-shadow);
|
||||
}
|
||||
|
||||
.graph-placeholder-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.graph-placeholder-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--ccdi-text-primary);
|
||||
}
|
||||
|
||||
.graph-placeholder-subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--ccdi-text-muted);
|
||||
}
|
||||
|
||||
.graph-placeholder-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 18px;
|
||||
padding: 16px 18px;
|
||||
border: 1px dashed #d9e3ee;
|
||||
background: #f8fbfe;
|
||||
}
|
||||
|
||||
.graph-placeholder-text {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: var(--ccdi-text-secondary);
|
||||
}
|
||||
|
||||
.special-check-extended-wrapper {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user