新增图谱功能及验收清单

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

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