199 lines
5.9 KiB
Markdown
199 lines
5.9 KiB
Markdown
# 报告查看器使用说明
|
||
|
||
## 📋 已包含的组件
|
||
|
||
本项目已包含以下报告组件的完整代码：
|
||
|
||
1. **DWBG6A2C** - 司南报告（包含所有子模块）
|
||
2. **FLXG0V4B** - 司法涉诉
|
||
3. **QYGL3F8E** - 人企关系加强版（包含所有子模块）
|
||
4. **JRZQ4B6C** - 信贷表现
|
||
5. **JRZQ09J8** - 收入评估
|
||
6. **QCXG9P1C** - 名下车辆
|
||
7. **DWBG8B4D** - 谛听多维报告（包含所有子模块）
|
||
|
||
## 📁 需要提供的文件清单
|
||
|
||
如果要将这些组件提供给其他人使用，需要提供以下文件：
|
||
|
||
### 1. 核心文件
|
||
- ✅ `src/views/Report.vue` - 报告页面视图
|
||
- ✅ `src/components/BaseReport.vue` - 报告主组件
|
||
|
||
### 2. UI 业务组件目录
|
||
- ✅ `src/ui/DWBG6A2C/` - 司南报告（完整目录）
|
||
- ✅ `src/ui/CFLXG0V4B/` - 司法涉诉（完整目录）
|
||
- ✅ `src/ui/CQYGL3F8E/` - 人企关系加强版（完整目录）
|
||
- ✅ `src/ui/JRZQ4B6C/` - 信贷表现（完整目录）
|
||
- ✅ `src/ui/JRZQ09J8/` - 收入评估（完整目录）
|
||
- ✅ `src/ui/CQCXG9P1C.vue` - 名下车辆组件
|
||
- ✅ `src/ui/CDWBG8B4D/` - 谛听多维报告（完整目录）
|
||
|
||
### 3. 基础组件
|
||
- ✅ `src/components/GaugeChart.vue` - 评分图表
|
||
- ✅ `src/components/ShareReportButton.vue` - 分享按钮
|
||
- ✅ `src/components/TitleBanner.vue` - 标题横幅
|
||
- ✅ `src/components/VerificationCard.vue` - 验证卡片
|
||
- ✅ `src/components/StyledTabs.vue` - 样式化标签页
|
||
- ✅ `src/components/LEmpty.vue` - 空状态组件
|
||
- ✅ `src/components/LRemark.vue` - 备注组件
|
||
- ✅ `src/components/LTitle.vue` - 标题组件
|
||
|
||
### 4. 工具和配置
|
||
- ✅ `src/composables/useApiFetch.js` - API 请求工具
|
||
- ✅ `src/assets/` - 所有样式文件和图片资源
|
||
- ✅ `package.json` - 依赖配置
|
||
- ✅ `vite.config.js` - Vite 配置
|
||
- ✅ `tailwind.config.js` - Tailwind 配置
|
||
- ✅ `postcss.config.js` - PostCSS 配置
|
||
|
||
### 5. 入口文件
|
||
- ✅ `src/main.js` - 应用入口
|
||
- ✅ `src/App.vue` - 根组件
|
||
- ✅ `index.html` - HTML 模板
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 方式一：使用独立项目（推荐）
|
||
|
||
1. 将整个 `report-viewer` 文件夹复制给别人
|
||
2. 进入目录：`cd report-viewer`
|
||
3. 安装依赖：`npm install` 或 `pnpm install`
|
||
4. 启动开发服务器：`npm run dev`
|
||
5. 访问：`http://localhost:3000/?orderId=xxx` 或 `http://localhost:3000/?orderNo=xxx`
|
||
|
||
### 方式二：集成到现有项目
|
||
|
||
1. 复制以下目录到你的项目中：
|
||
- `src/ui/` - 所有 UI 组件
|
||
- `src/components/` - 报告相关基础组件
|
||
- `src/views/Report.vue` - 报告视图
|
||
- `src/composables/useApiFetch.js` - API 工具（如果需要）
|
||
|
||
2. 确保安装以下依赖：
|
||
```json
|
||
{
|
||
"vue": "^3.5.12",
|
||
"vue-router": "^4.4.5",
|
||
"vant": "^4.9.9",
|
||
"echarts": "^5.5.1",
|
||
"vue-echarts": "^7.0.3",
|
||
"@vueuse/core": "^11.3.0",
|
||
"axios": "^1.7.7",
|
||
"lodash": "^4.17.21",
|
||
"tailwindcss": "^3.4.15"
|
||
}
|
||
```
|
||
|
||
3. 配置路由（如果需要）：
|
||
```javascript
|
||
{
|
||
path: '/report',
|
||
component: () => import('@/views/Report.vue')
|
||
}
|
||
```
|
||
|
||
## ⚙️ 配置说明
|
||
|
||
### API 地址配置
|
||
|
||
编辑 `src/composables/useApiFetch.js`：
|
||
|
||
```javascript
|
||
const useApiFetch = createFetch({
|
||
baseUrl: "/api/v1", // 修改为你的 API 地址
|
||
// ...
|
||
});
|
||
```
|
||
|
||
### 路由参数
|
||
|
||
报告页面支持以下 URL 参数：
|
||
|
||
- `orderId` - 订单ID（数字）
|
||
- `orderNo` - 订单号（字符串）
|
||
- `out_trade_no` - 交易订单号（字符串）
|
||
- `order_id` - 订单ID（字符串，从查询参数获取）
|
||
|
||
### 使用示例
|
||
|
||
```javascript
|
||
// 在组件中使用 BaseReport
|
||
import BaseReport from '@/components/BaseReport.vue'
|
||
|
||
<BaseReport
|
||
:feature="'preloanbackgroundcheck'"
|
||
:report-data="reportData"
|
||
:report-params="reportParams"
|
||
:report-name="reportName"
|
||
:report-date-time="reportDateTime"
|
||
:is-empty="false"
|
||
:is-done="true"
|
||
/>
|
||
```
|
||
|
||
## 📦 项目结构
|
||
|
||
```
|
||
report-viewer/
|
||
├── src/
|
||
│ ├── components/ # 基础组件
|
||
│ │ ├── BaseReport.vue # ⭐ 核心组件
|
||
│ │ ├── GaugeChart.vue
|
||
│ │ └── ...
|
||
│ ├── views/
|
||
│ │ └── Report.vue # ⭐ 报告页面
|
||
│ ├── ui/ # ⭐ 业务组件
|
||
│ │ ├── DWBG6A2C/ # 司南报告
|
||
│ │ ├── CFLXG0V4B/ # 司法涉诉
|
||
│ │ ├── CQYGL3F8E/ # 人企关系加强版
|
||
│ │ ├── JRZQ4B6C/ # 信贷表现
|
||
│ │ ├── JRZQ09J8/ # 收入评估
|
||
│ │ ├── CQCXG9P1C.vue # 名下车辆
|
||
│ │ └── CDWBG8B4D/ # 谛听多维报告
|
||
│ ├── composables/
|
||
│ │ └── useApiFetch.js # API 工具
|
||
│ └── assets/ # 样式和图片
|
||
│ ├── images/
|
||
│ └── *.css
|
||
├── package.json
|
||
├── vite.config.js
|
||
├── tailwind.config.js
|
||
└── README.md
|
||
```
|
||
|
||
## 🔧 注意事项
|
||
|
||
1. **图片资源**：确保所有图片文件路径正确，特别是背景图片
|
||
2. **API 接口**：需要根据实际后端 API 调整请求地址和格式
|
||
3. **样式依赖**：项目依赖 Tailwind CSS 和 Vant UI，确保正确引入
|
||
4. **浏览器兼容**：需要现代浏览器支持（ES2015+）
|
||
5. **Token 认证**：如果需要认证，确保在 localStorage 中设置 token
|
||
|
||
## 🐛 常见问题
|
||
|
||
### Q: 组件导入失败？
|
||
A: 检查路径别名 `@` 是否正确配置在 `vite.config.js` 中
|
||
|
||
### Q: 样式不生效？
|
||
A: 确保 `tailwind.config.js` 中包含了正确的 content 路径
|
||
|
||
### Q: API 请求失败？
|
||
A: 检查 `useApiFetch.js` 中的 `baseUrl` 配置和 CORS 设置
|
||
|
||
### Q: 图片加载失败？
|
||
A: 检查图片路径是否正确，确保图片文件已复制到 `src/assets/images/` 目录
|
||
|
||
## 📞 技术支持
|
||
|
||
如有问题，请检查：
|
||
1. 控制台错误信息
|
||
2. 网络请求是否正常
|
||
3. 依赖是否正确安装
|
||
4. 文件路径是否正确
|
||
|
||
---
|
||
|
||
**提示**：这是一个独立的 Vue3 项目，可以直接运行，也可以集成到现有项目中。
|
||
|