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

<template>
  <div class="project-analysis-fund-graph" :class="rootClasses">
    <fund-graph-section
      ref="fundGraphSection"
      :initial-keyword="defaultKeyword"
      :initial-graph-tab="initialGraphTab"
      :auto-scroll="false"
      :hide-header="true"
      :graph-tabs="graphTabs"
      :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>
</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: {
    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))
        || "";
    },
  },
  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: 780px;

  ::v-deep .graph-analysis-section {
    margin-top: 0;
    box-shadow: none;
  }

  ::v-deep .fund-workbench {
    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: 100%;
    min-height: 560px;
  }

  ::v-deep .fund-workbench--stacked {
    display: flex;
    flex-direction: column;
  }

  ::v-deep .fund-left-pane {
    padding: 14px 16px 16px;
    overflow: hidden;
    border-right: 0;
  }

  ::v-deep .fund-right-pane {
    position: relative;
    z-index: 2;
    padding: 14px;
    background: #ffffff;
    border-top: 1px solid #dce7f2;
    overflow: hidden;
  }

  ::v-deep .graph-canvas-wrap {
    height: auto;
    min-height: 520px;
  }

  ::v-deep .detail-empty {
    min-height: 240px;
  }

  ::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 .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;
  }

  ::v-deep .graph-shell {
    border-radius: 10px;
    overflow: hidden;
  }

  ::v-deep .graph-canvas {
    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: 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--fund {
    ::v-deep .fund-workbench {
      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;
    }

    ::v-deep .graph-canvas-wrap,
    ::v-deep .detail-empty {
      min-height: 340px;
    }

    ::v-deep .graph-canvas {
      min-height: 340px;
    }
  }
}
</style>