报告查看器 - 独立 Vue3 项目
这是一个独立的 Vue3 项目，用于展示报告组件。项目使用本地 JSON 文件（example.json）作为数据源，不依赖网络请求。
📋 已包含的组件
- DWBG6A2C - 司南报告（包含所有子模块）
- FLXG0V4B - 司法涉诉
- QYGL3F8E - 人企关系加强版（包含所有子模块）
- JRZQ4B6C - 信贷表现
- JRZQ09J8 - 收入评估
- QCXG9P1C - 名下车辆
- DWBG8B4D - 谛听多维报告（包含所有子模块）
🚀 快速开始
1. 安装依赖
cd report-viewer
npm install
# 或
pnpm install
# 或
yarn install
2. 启动开发服务器
npm run dev
访问：http://localhost:3000
3. 构建生产版本
npm run build
📁 项目结构
report-viewer/
├── public/
│ └── example.json # 示例数据文件
├── src/
│ ├── components/ # 基础组件
│ │ ├── BaseReport.vue # ⭐ 核心组件
│ │ ├── GaugeChart.vue
│ │ ├── ShareReportButton.vue
│ │ └── ...
│ ├── views/
│ │ └── Report.vue # ⭐ 报告页面
│ ├── ui/ # ⭐ 业务组件
│ │ ├── DWBG6A2C/ # 司南报告
│ │ ├── CFLXG0V4B/ # 司法涉诉
│ │ ├── CQYGL3F8E/ # 人企关系加强版
│ │ ├── JRZQ4B6C/ # 信贷表现
│ │ ├── JRZQ09J8/ # 收入评估
│ │ ├── CQCXG9P1C.vue # 名下车辆
│ │ └── CDWBG8B4D/ # 谛听多维报告
│ ├── assets/ # 样式和图片
│ └── composables/ # 工具函数（已移除网络请求）
├── package.json
├── vite.config.js
└── tailwind.config.js
⚙️ 配置说明
数据源
项目从 public/example.json 加载示例数据。可以直接修改该文件来更新显示的内容。
已移除的功能
- ✅ 产品背景图片（已移除背景图显示）
- ✅ 网络请求（改为从本地 JSON 文件加载）
- ✅ API 调用（ShareReportButton 在示例模式下不进行网络请求）
📝 使用说明
- 启动项目后，会自动加载
public/example.json中的数据 - 数据会自动排序并显示在报告页面中
- 所有组件都会根据数据进行渲染
🔧 注意事项
- 图片资源：确保所有必要的图片文件已复制到
src/assets/images/目录 - 样式依赖：项目依赖 Tailwind CSS 和 Vant UI，确保正确引入
- 浏览器兼容：需要现代浏览器支持（ES2015+）
- 数据格式：
example.json必须符合组件期望的数据结构
📦 依赖说明
核心依赖
- vue ^3.5.12 - Vue 框架
- vue-router ^4.4.5 - 路由管理
- vant ^4.9.9 - UI 组件库
- echarts ^5.5.1 - 图表库
- vue-echarts ^7.0.3 - Vue ECharts 封装
- @vueuse/core ^11.3.0 - Vue 工具库
- lodash ^4.17.21 - 工具函数库
开发依赖
- vite ^5.4.10 - 构建工具
- tailwindcss ^3.4.15 - CSS 框架
- @vitejs/plugin-vue - Vite Vue 插件
- unplugin-auto-import - 自动导入插件
- unplugin-vue-components - 自动组件导入插件
🐛 常见问题
Q: 图片加载失败？
A: 确保图片文件已复制到 src/assets/images/report/ 目录
Q: 样式不生效？
A: 确保 tailwind.config.js 中包含了正确的 content 路径
Q: 数据不显示？
A: 检查 public/example.json 文件格式是否正确，确保数据符合组件期望的结构
📞 技术支持
如有问题，请检查：
- 控制台错误信息
public/example.json文件是否存在且格式正确- 依赖是否正确安装
- 文件路径是否正确
提示：这是一个独立的 Vue3 项目，使用本地 JSON 文件作为数据源，无需后端 API 支持。