新增图谱功能及验收清单

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

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