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

<template>
  <div class="preliminary-check-container">
    <div v-if="pageState === 'loading'" class="preliminary-check-state">
      <div class="state-card">
        <el-skeleton animated :rows="6" />
      </div>
    </div>

    <div v-else-if="pageState === 'empty'" class="preliminary-check-state">
      <div class="state-card">
        <el-empty description="暂无结果总览数据" />
      </div>
    </div>

    <div v-else class="preliminary-check-page">
      <overview-stats :summary="currentData.summary" />
      <risk-people-section
        :section-data="currentData.riskPeople"
        :selected-model-codes="selectedModelCodes"
        @view-project-analysis="handleRiskPeopleProjectAnalysis"
      />
      <risk-model-section
        :section-data="currentData.riskModels"
        @selection-change="handleRiskModelSelectionChange"
        @view-project-analysis="handleRiskModelProjectAnalysis"
      />
      <risk-detail-section :section-data="currentData.riskDetails" />
    </div>
    <project-analysis-dialog
      :visible.sync="projectAnalysisDialogVisible"
      :person="currentProjectAnalysisPerson"
      :source="projectAnalysisSource"
      :project-name="projectInfo.projectName"
      @close="handleProjectAnalysisDialogClose"
    />
  </div>
</template>

<script>
import {
  createOverviewLoadedData,
  mockOverviewData,
  mockOverviewStateData,
} from "./preliminaryCheck.mock";
import {
  getOverviewDashboard,
  getOverviewRiskPeople,
  getOverviewRiskModelCards,
} from "@/api/ccdi/projectOverview";
import OverviewStats from "./OverviewStats";
import RiskPeopleSection from "./RiskPeopleSection";
import RiskModelSection from "./RiskModelSection";
import RiskDetailSection from "./RiskDetailSection";
import ProjectAnalysisDialog from "./ProjectAnalysisDialog";

export default {
  name: "PreliminaryCheck",
  components: {
    OverviewStats,
    RiskPeopleSection,
    RiskModelSection,
    RiskDetailSection,
    ProjectAnalysisDialog,
  },
  props: {
    projectId: {
      type: [String, Number],
      default: null,
    },
    projectInfo: {
      type: Object,
      default: () => ({
        projectName: "",
        updateTime: "",
        projectStatus: "0",
      }),
    },
  },
  data() {
    return {
      pageState: "loading",
      selectedModelCodes: [],
      mockData: mockOverviewData,
      stateDataMap: mockOverviewStateData,
      realData: mockOverviewData,
      projectAnalysisDialogVisible: false,
      currentProjectAnalysisPerson: null,
      projectAnalysisSource: "riskPeople",
    };
  },
  computed: {
    currentData() {
      if (this.pageState === "loaded") {
        return this.realData;
      }
      return this.stateDataMap[this.pageState] || this.realData;
    },
  },
  watch: {
    projectId(newVal) {
      if (newVal) {
        this.loadOverviewData();
        return;
      }
      this.realData = this.stateDataMap.empty;
      this.pageState = "empty";
      this.selectedModelCodes = [];
      this.resetProjectAnalysisDialog();
    },
  },
  created() {
    if (this.projectId) {
      this.loadOverviewData();
      return;
    }
    this.realData = this.stateDataMap.empty;
    this.pageState = "empty";
    this.resetProjectAnalysisDialog();
  },
  methods: {
    handleRiskModelSelectionChange(modelCodes) {
      this.selectedModelCodes = Array.isArray(modelCodes) ? [...modelCodes] : [];
    },
    handleRiskPeopleProjectAnalysis(row) {
      this.openProjectAnalysisDialog("riskPeople", row);
    },
    handleRiskModelProjectAnalysis(row) {
      this.openProjectAnalysisDialog("riskModelPeople", row);
    },
    openProjectAnalysisDialog(source, person) {
      this.projectAnalysisSource = source || "riskPeople";
      this.currentProjectAnalysisPerson = person || null;
      this.projectAnalysisDialogVisible = true;
    },
    handleProjectAnalysisDialogClose() {
      this.projectAnalysisDialogVisible = false;
      this.resetProjectAnalysisDialog();
    },
    resetProjectAnalysisDialog() {
      this.projectAnalysisDialogVisible = false;
      this.currentProjectAnalysisPerson = null;
      this.projectAnalysisSource = "riskPeople";
    },
    async loadOverviewData() {
      if (!this.projectId) {
        this.realData = this.stateDataMap.empty;
        this.pageState = "empty";
        this.selectedModelCodes = [];
        this.resetProjectAnalysisDialog();
        return;
      }

      this.pageState = "loading";
      this.selectedModelCodes = [];
      this.resetProjectAnalysisDialog();
      try {
        const [dashboardRes, riskPeopleRes, riskModelCardsRes] = await Promise.all([
          getOverviewDashboard(this.projectId),
          getOverviewRiskPeople(this.projectId),
          getOverviewRiskModelCards(this.projectId),
        ]);
        const dashboardData = (dashboardRes && dashboardRes.data) || {};
        const riskPeopleData = (riskPeopleRes && riskPeopleRes.data) || {};
        const riskModelCardsData = (riskModelCardsRes && riskModelCardsRes.data) || {};

        this.realData = createOverviewLoadedData({
          projectId: this.projectId,
          dashboardData,
          riskPeopleData,
          riskModelCardsData,
        });

        const hasOverviewData = Boolean(
          (Array.isArray(dashboardData.stats) && dashboardData.stats.length) ||
          (Array.isArray(riskPeopleData.overviewList) && riskPeopleData.overviewList.length) ||
          (Array.isArray(riskModelCardsData.cardList) && riskModelCardsData.cardList.length)
        );

        this.pageState = hasOverviewData ? "loaded" : "empty";
      } catch (error) {
        this.realData = this.stateDataMap.empty;
        this.pageState = "empty";
        this.selectedModelCodes = [];
        this.resetProjectAnalysisDialog();
        console.error("加载结果总览失败", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.preliminary-check-container {
  min-height: 400px;
  padding: 0 0 24px;
}

.preliminary-check-state {
  min-height: 400px;
}

.state-card {
  padding: 32px 24px;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.preliminary-check-page {
  min-height: 400px;
}
</style>