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

<template>
  <el-dialog
    title="项目分析"
    :visible.sync="visibleProxy"
    width="1280px"
    append-to-body
    custom-class="project-analysis-dialog"
    @close="handleDialogClosed"
  >
    <div class="project-analysis-layout">
      <project-analysis-sidebar
        class="project-analysis-layout__sidebar"
        :sidebar-data="dialogData.sidebar"
      />
      <div class="project-analysis-layout__main">
        <el-tabs v-model="activeTab" stretch>
          <el-tab-pane label="异常明细" name="abnormalDetail">
            <div class="project-analysis-tab-placeholder">
              <div class="tab-placeholder-title">异常明细</div>
              <div class="tab-placeholder-text">{{ getTabDescription("abnormalDetail") }}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="资产分析" name="assetAnalysis">
            <div class="project-analysis-tab-placeholder">
              <div class="tab-placeholder-title">资产分析</div>
              <div class="tab-placeholder-text">{{ getTabDescription("assetAnalysis") }}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="征信摘要" name="creditSummary">
            <div class="project-analysis-tab-placeholder">
              <div class="tab-placeholder-title">征信摘要</div>
              <div class="tab-placeholder-text">{{ getTabDescription("creditSummary") }}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="关系图谱" name="relationshipGraph">
            <div class="project-analysis-tab-placeholder">
              <div class="tab-placeholder-title">关系图谱</div>
              <div class="tab-placeholder-text">{{ getTabDescription("relationshipGraph") }}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="资金流向" name="fundFlow">
            <div class="project-analysis-tab-placeholder">
              <div class="tab-placeholder-title">资金流向</div>
              <div class="tab-placeholder-text">{{ getTabDescription("fundFlow") }}</div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import ProjectAnalysisSidebar from "./ProjectAnalysisSidebar";
import { buildProjectAnalysisDialogData } from "./preliminaryCheck.mock";

export default {
  name: "ProjectAnalysisDialog",
  components: {
    ProjectAnalysisSidebar,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    person: {
      type: Object,
      default: () => null,
    },
    source: {
      type: String,
      default: "riskPeople",
    },
    projectName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeTab: "abnormalDetail",
    };
  },
  computed: {
    dialogData() {
      return buildProjectAnalysisDialogData({
        person: this.person,
        source: this.source,
        projectName: this.projectName,
      });
    },
    visibleProxy: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      },
    },
  },
  watch: {
    visible(value) {
      if (value) {
        this.resetDialogState();
      }
    },
  },
  methods: {
    resetDialogState() {
      this.activeTab = "abnormalDetail";
    },
    getTabDescription(tabKey) {
      const currentTab = this.dialogData.tabs.find((item) => item.key === tabKey);
      return currentTab ? currentTab.description : "";
    },
    handleDialogClosed() {
      this.resetDialogState();
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.project-analysis-layout {
  display: flex;
  gap: 20px;
  min-height: 640px;
}

.project-analysis-layout__sidebar {
  flex: 0 0 320px;
}

.project-analysis-layout__main {
  flex: 1;
  min-width: 0;
}

.project-analysis-tab-placeholder {
  min-height: 560px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.tab-placeholder-title {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}

.tab-placeholder-text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #64748b;
}
</style>