完成结果总览页面前端实现

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

@@ -1,24 +1,28 @@
 <template>
   <div class="preliminary-check-container">
     <div v-if="pageState === 'loading'" class="preliminary-check-state">
-      <p>结果总览加载中...</p>
+      <div class="state-card">
+        <el-skeleton animated :rows="6" />
+      </div>
     </div>
 
     <div v-else-if="pageState === 'empty'" class="preliminary-check-state">
-      <p>暂无结果总览数据</p>
+      <div class="state-card">
+        <el-empty description="暂无结果总览数据" />
+      </div>
     </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" />
+      <overview-stats :summary="currentData.summary" />
+      <risk-people-section :section-data="currentData.riskPeople" />
+      <risk-model-section :section-data="currentData.riskModels" />
+      <risk-detail-section :section-data="currentData.riskDetails" />
     </div>
   </div>
 </template>
 
 <script>
-import { mockOverviewData } from "./preliminaryCheck.mock";
+import { mockOverviewData, mockOverviewStateData } from "./preliminaryCheck.mock";
 import OverviewStats from "./OverviewStats";
 import RiskPeopleSection from "./RiskPeopleSection";
 import RiskModelSection from "./RiskModelSection";
@@ -50,21 +54,33 @@ export default {
     return {
       pageState: "loaded",
       mockData: mockOverviewData,
+      stateDataMap: mockOverviewStateData,
     };
   },
+  computed: {
+    currentData() {
+      return this.stateDataMap[this.pageState] || this.mockData;
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .preliminary-check-container {
   min-height: 400px;
+  padding: 16px 0 24px;
+  background: #f3f6fb;
 }
 
 .preliminary-check-state {
-  padding: 40px 20px;
+  min-height: 400px;
+}
+
+.state-card {
+  padding: 32px 24px;
+  border-radius: 16px;
   background: #fff;
-  color: #909399;
-  text-align: center;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
 
 .preliminary-check-page {