138 lines
3.9 KiB
Markdown
138 lines
3.9 KiB
Markdown
|
# 报告查看器 - 独立 Vue3 项目
|
|||
|
|
|
|||
|
|
这是一个独立的 Vue3 项目，用于展示报告组件。项目使用本地 JSON 文件（`example.json`）作为数据源，不依赖网络请求。
|
|||
|
|
|
|||
|
|
## 📋 已包含的组件
|
|||
|
|
|
|||
|
|
1. **DWBG6A2C** - 司南报告（包含所有子模块）
|
|||
|
|
2. **FLXG0V4B** - 司法涉诉
|
|||
|
|
3. **QYGL3F8E** - 人企关系加强版（包含所有子模块）
|
|||
|
|
4. **JRZQ4B6C** - 信贷表现
|
|||
|
|
5. **JRZQ09J8** - 收入评估
|
|||
|
|
6. **QCXG9P1C** - 名下车辆
|
|||
|
|
7. **DWBG8B4D** - 谛听多维报告（包含所有子模块）
|
|||
|
|
|
|||
|
|
## 🚀 快速开始
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd report-viewer
|
|||
|
|
npm install
|
|||
|
|
# 或
|
|||
|
|
pnpm install
|
|||
|
|
# 或
|
|||
|
|
yarn install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 启动开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
访问：`http://localhost:3000`
|
|||
|
|
|
|||
|
|
### 3. 构建生产版本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
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 在示例模式下不进行网络请求）
|
|||
|
|
|
|||
|
|
## 📝 使用说明
|
|||
|
|
|
|||
|
|
1. 启动项目后，会自动加载 `public/example.json` 中的数据
|
|||
|
|
2. 数据会自动排序并显示在报告页面中
|
|||
|
|
3. 所有组件都会根据数据进行渲染
|
|||
|
|
|
|||
|
|
## 🔧 注意事项
|
|||
|
|
|
|||
|
|
1. **图片资源**：确保所有必要的图片文件已复制到 `src/assets/images/` 目录
|
|||
|
|
2. **样式依赖**：项目依赖 Tailwind CSS 和 Vant UI，确保正确引入
|
|||
|
|
3. **浏览器兼容**：需要现代浏览器支持（ES2015+）
|
|||
|
|
4. **数据格式**：`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` 文件格式是否正确，确保数据符合组件期望的结构
|
|||
|
|
|
|||
|
|
## 📞 技术支持
|
|||
|
|
|
|||
|
|
如有问题，请检查：
|
|||
|
|
1. 控制台错误信息
|
|||
|
|
2. `public/example.json` 文件是否存在且格式正确
|
|||
|
|
3. 依赖是否正确安装
|
|||
|
|
4. 文件路径是否正确
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**提示**：这是一个独立的 Vue3 项目，使用本地 JSON 文件作为数据源，无需后端 API 支持。
|