优化项目详情资金流向图谱展示

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="project-analysis-fund-graph">
+  <div class="project-analysis-fund-graph" :class="rootClasses">
     <fund-graph-section
       ref="fundGraphSection"
       :initial-keyword="defaultKeyword"
@@ -7,8 +7,12 @@
       :auto-scroll="false"
       :hide-header="true"
       :graph-tabs="graphTabs"
-      :layout-scale="0.94"
-      :show-edge-detail-table="false"
+      :layout-scale="1.03"
+      :show-edge-detail-table="true"
+      :edge-detail-table-height="220"
+      compact-graph-labels
+      :show-edge-metrics="!isFundOnly"
+      :stacked-fund-detail-pane="isFundOnly"
       hide-empty-detail-pane
     />
   </div>
@@ -46,6 +50,15 @@ export default {
     },
   },
   computed: {
+    isFundOnly() {
+      return this.initialGraphTab === "fund" && this.graphTabs.length === 2;
+    },
+    rootClasses() {
+      return {
+        "project-analysis-fund-graph--fund": this.isFundOnly,
+        "project-analysis-fund-graph--relation": !this.isFundOnly,
+      };
+    },
     defaultKeyword() {
       return (this.modelSummary && this.modelSummary.staffIdCard)
         || (this.person && (this.person.idNo || this.person.staffIdCard || this.person.staffName || this.person.name))
@@ -76,7 +89,7 @@ export default {
 
 <style lang="scss" scoped>
 .project-analysis-fund-graph {
-  min-height: 520px;
+  min-height: 780px;
 
   ::v-deep .graph-analysis-section {
     margin-top: 0;
@@ -84,28 +97,44 @@ export default {
   }
 
   ::v-deep .fund-workbench {
-    grid-template-columns: minmax(0, 1fr) 316px;
-    max-width: 1000px;
-    min-height: 450px;
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 100%;
+    min-height: 760px;
   }
 
   ::v-deep .fund-workbench.fund-workbench--single {
     grid-template-columns: minmax(0, 1fr);
-    max-width: 760px;
+    max-width: 100%;
+    min-height: 560px;
+  }
+
+  ::v-deep .fund-workbench--stacked {
+    display: flex;
+    flex-direction: column;
   }
 
   ::v-deep .fund-left-pane {
-    padding: 10px 12px 12px;
+    padding: 14px 16px 16px;
+    overflow: hidden;
+    border-right: 0;
   }
 
   ::v-deep .fund-right-pane {
-    padding: 12px;
+    position: relative;
+    z-index: 2;
+    padding: 14px;
+    background: #ffffff;
+    border-top: 1px solid #dce7f2;
+    overflow: hidden;
   }
 
-  ::v-deep .graph-canvas-wrap,
-  ::v-deep .detail-empty {
+  ::v-deep .graph-canvas-wrap {
     height: auto;
-    min-height: 360px;
+    min-height: 520px;
+  }
+
+  ::v-deep .detail-empty {
+    min-height: 240px;
   }
 
   ::v-deep .query-row {
@@ -124,6 +153,21 @@ export default {
     font-size: 12px;
   }
 
+  ::v-deep .detail-table .el-table__cell {
+    padding: 5px 0;
+  }
+
+  ::v-deep .pagination-container {
+    margin-top: 8px;
+    padding: 0;
+  }
+
+  ::v-deep .pagination-container .el-pagination {
+    display: flex;
+    justify-content: flex-end;
+    white-space: nowrap;
+  }
+
   ::v-deep .query-row {
     gap: 8px;
     margin-bottom: 10px;
@@ -131,32 +175,73 @@ export default {
 
   ::v-deep .graph-shell {
     border-radius: 10px;
+    overflow: hidden;
   }
 
   ::v-deep .graph-canvas {
-    min-height: 360px;
+    min-height: 520px;
   }
 
   ::v-deep .detail-title {
     font-size: 15px;
+    line-height: 1.35;
   }
 
   ::v-deep .node-field-row,
   ::v-deep .edge-metrics span,
   ::v-deep .edge-metrics strong,
   ::v-deep .detail-subtitle {
-    font-size: 11px;
+    font-size: 12px;
+  }
+
+}
+
+.project-analysis-fund-graph--relation {
+  min-height: 520px;
+
+  ::v-deep .fund-workbench {
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 760px;
+    min-height: 450px;
+  }
+
+  ::v-deep .graph-canvas-wrap,
+  ::v-deep .detail-empty {
+    min-height: 360px;
+  }
+
+  ::v-deep .graph-canvas {
+    min-height: 360px;
   }
 }
 
 @media (max-width: 1440px) {
-  .project-analysis-fund-graph {
+  .project-analysis-fund-graph--fund {
     ::v-deep .fund-workbench {
-      grid-template-columns: minmax(0, 1fr) 300px;
-      max-width: 940px;
+      grid-template-columns: minmax(0, 1fr);
+      max-width: 100%;
     }
 
     ::v-deep .fund-workbench.fund-workbench--single {
+      grid-template-columns: minmax(0, 1fr);
+      max-width: 100%;
+    }
+
+    ::v-deep .graph-canvas-wrap {
+      min-height: 500px;
+    }
+
+    ::v-deep .detail-empty {
+      min-height: 220px;
+    }
+
+    ::v-deep .graph-canvas {
+      min-height: 500px;
+    }
+  }
+
+  .project-analysis-fund-graph--relation {
+    ::v-deep .fund-workbench {
       grid-template-columns: minmax(0, 1fr);
       max-width: 720px;
     }