t

report-viewer/src/views/Report.vue

@@ -0,0 +1,104 @@
+<template>
+    <BaseReport 
+        v-if="isDone" 
+        :order-id="orderId" 
+        :order-no="orderNo" 
+        :feature="feature"
+        :reportData="reportData" 
+        :reportParams="reportParams" 
+        :reportName="reportName" 
+        :reportDateTime="reportDateTime"
+        :isEmpty="isEmpty" 
+        :isDone="isDone" 
+        :is-example="true"
+    />
+    <div v-else class="loading-container">
+        <div class="loading-spinner"></div>
+        <p>加载中，请稍候...</p>
+    </div>
+</template>
+
+<script setup>
+
+const route = useRoute();
+const feature = ref(""); // 保留但可以设置任意值，不影响功能
+const reportData = ref([]);
+const reportParams = ref({
+    name: "张三",
+    id_card: "3203**199102***152",
+    mobile: "158****2970"
+});
+const reportName = ref("个人风险报告");
+const reportDateTime = ref(new Date().toLocaleString('zh-CN'));
+const isEmpty = ref(false);
+const isDone = ref(false);
+const orderId = ref("");
+const orderNo = ref("");
+
+onMounted(async () => {
+    await loadExampleData();
+});
+
+const loadExampleData = async () => {
+    try {
+        // 从 public 目录加载示例数据
+        const response = await fetch('/example.json');
+        const data = await response.json();
+        
+        if (Array.isArray(data) && data.length > 0) {
+            // 直接使用任意产品类型（不影响显示）
+            feature.value = 'preloanbackgroundcheck';
+            
+            // 排序数据
+            reportData.value = data.sort((a, b) => {
+                return (a.feature?.sort || 0) - (b.feature?.sort || 0);
+            });
+            
+            isEmpty.value = false;
+            isDone.value = true;
+        } else {
+            isEmpty.value = true;
+            isDone.value = true;
+        }
+    } catch (error) {
+        console.error('加载示例数据失败:', error);
+        isEmpty.value = true;
+        isDone.value = true;
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+
+    .loading-spinner {
+        width: 50px;
+        height: 50px;
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #3498db;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 20px;
+    }
+
+    p {
+        color: #666;
+        font-size: 16px;
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>