搭建结果总览页面骨架

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

@@ -1,15 +1,77 @@
 <template>
   <div class="preliminary-check-container">
-    <div class="placeholder-content">
-      <i class="el-icon-data-analysis"></i>
-      <p>结果总览功能开发中...</p>
+    <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],
@@ -24,28 +86,28 @@ export default {
       }),
     },
   },
+  data() {
+    return {
+      pageState: "loaded",
+      mockData: mockOverviewData,
+    };
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .preliminary-check-container {
-  padding: 40px 20px;
-  background: #fff;
   min-height: 400px;
 }
 
-.placeholder-content {
-  text-align: center;
+.preliminary-check-state {
+  padding: 40px 20px;
+  background: #fff;
   color: #909399;
+  text-align: center;
+}
 
-  i {
-    font-size: 48px;
-    margin-bottom: 16px;
-  }
-
-  p {
-    font-size: 14px;
-    margin: 0;
-  }
+.preliminary-check-page {
+  min-height: 400px;
 }
 </style>