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">
      <p>结果总览加载中...</p>
    </div>

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

    <div v-else class="preliminary-check-page">
      <overview-stats :summary="mockData.summary" />
      <risk-people-section :section-data="mockData.riskPeople" />
      <risk-model-section :section-data="mockData.riskModels" />
      <risk-detail-section :section-data="mockData.riskDetails" />
    </div>
  </div>
</template>

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

const OverviewStats = {
  name: "OverviewStats",
  props: {
    summary: {
      type: Object,
      default: () => ({}),
    },
  },
  template: '<section class="overview-stats-placeholder"></section>',
};

const RiskPeopleSection = {
  name: "RiskPeopleSection",
  props: {
    sectionData: {
      type: Object,
      default: () => ({}),
    },
  },
  template: '<section class="risk-people-placeholder"></section>',
};

const RiskModelSection = {
  name: "RiskModelSection",
  props: {
    sectionData: {
      type: Object,
      default: () => ({}),
    },
  },
  template: '<section class="risk-model-placeholder"></section>',
};

const RiskDetailSection = {
  name: "RiskDetailSection",
  props: {
    sectionData: {
      type: Object,
      default: () => ({}),
    },
  },
  template: '<section class="risk-detail-placeholder"></section>',
};

export default {
  name: "PreliminaryCheck",
  components: {
    OverviewStats,
    RiskPeopleSection,
    RiskModelSection,
    RiskDetailSection,
  },
  props: {
    projectId: {
      type: [String, Number],
      default: null,
    },
    projectInfo: {
      type: Object,
      default: () => ({
        projectName: "",
        updateTime: "",
        projectStatus: "0",
      }),
    },
  },
  data() {
    return {
      pageState: "loaded",
      mockData: mockOverviewData,
    };
  },
};
</script>

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

.preliminary-check-state {
  padding: 40px 20px;
  background: #fff;
  color: #909399;
  text-align: center;
}

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