fix
This commit is contained in:
217
README.md
217
README.md
@@ -1,137 +1,88 @@
|
||||
# 报告查看器 - 独立 Vue3 项目
|
||||
## 报告查看器（report-viewer）
|
||||
|
||||
这是一个独立的 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. 文件路径是否正确
|
||||
一个基于 **Vue 3 + Vite + Tailwind CSS + Vant** 的移动端报告查看器，用于展示各类风控 / 报告数据（如司法涉诉、消费交易特征等），支持图表可视化和多页报告浏览。
|
||||
|
||||
---
|
||||
|
||||
**提示**：这是一个独立的 Vue3 项目，使用本地 JSON 文件作为数据源，无需后端 API 支持。
|
||||
## 功能概览
|
||||
|
||||
- **报告展示**：按模块展示多种报告内容与字段说明
|
||||
- **图表可视化**：基于 `ECharts` 和 `vue-echarts` 渲染图表
|
||||
- **移动端 UI**：使用 `Vant 4` 组件库，适配手机端浏览体验
|
||||
- **组合式 API**：使用 Vue 3 组合式写法封装业务逻辑（如风险提示 hook 等）
|
||||
|
||||
---
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **框架**：Vue 3
|
||||
- **构建工具**：Vite
|
||||
- **UI 组件库**：Vant 4
|
||||
- **样式**：Tailwind CSS、Sass
|
||||
- **数据请求**：Axios
|
||||
- **图表**：ECharts、vue-echarts
|
||||
|
||||
---
|
||||
|
||||
## 环境要求
|
||||
|
||||
- **Node.js**：建议 >= 18
|
||||
- **包管理器**：推荐使用 `pnpm`（项目中已指定 `pnpm` 版本）
|
||||
|
||||
---
|
||||
|
||||
## 安装与运行
|
||||
|
||||
```bash
|
||||
# 安装依赖（推荐）
|
||||
pnpm install
|
||||
|
||||
# 如果使用 npm / yarn，也可以：
|
||||
# npm install
|
||||
# 或
|
||||
# yarn install
|
||||
```
|
||||
|
||||
### 本地开发
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
启动后，按终端提示在浏览器中访问对应地址（通常为 `http://localhost:5173`）。
|
||||
|
||||
### 打包构建
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
构建产物会输出到 `dist` 目录，可部署到任意静态资源服务器。
|
||||
|
||||
### 预览构建结果
|
||||
|
||||
```bash
|
||||
pnpm preview
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 目录结构（简要）
|
||||
|
||||
以下仅列出与前端页面关系最紧密的部分：
|
||||
|
||||
- `src/main.js`：应用入口文件，挂载 Vue 应用
|
||||
- `src/views/Report.vue`：报告主页面
|
||||
- `src/ui/`：报告相关的 UI 组件（如 `CIVYZ9A2B.vue` 等）
|
||||
- `src/composables/`：组合式函数（如 `useRiskNotifier` 等）
|
||||
- `tailwind.config.js`：Tailwind CSS 配置
|
||||
|
||||
---
|
||||
|
||||
## 开发说明
|
||||
|
||||
- 若需新增报告模块，建议：
|
||||
- 在 `src/ui/` 下新增对应的 Vue 组件
|
||||
- 在 `Report.vue` 中注册或路由中引用新组件
|
||||
- 如需共享逻辑，可在 `src/composables/` 中抽离成 hook
|
||||
- 图表相关逻辑优先封装在单独组件或 composable 中，避免在视图中直接写大量配置。
|
||||
|
||||
Reference in New Issue
Block a user