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

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