team/tydata-webview-v2

Fork 0

Files

liangzai 3135250b1e t

2025-11-13 22:27:54 +08:00

5.9 KiB

Raw Blame History

报告查看器使用说明

📋 已包含的组件

本项目已包含以下报告组件的完整代码：

DWBG6A2C - 司南报告（包含所有子模块）
FLXG0V4B - 司法涉诉
QYGL3F8E - 人企关系加强版（包含所有子模块）
JRZQ4B6C - 信贷表现
JRZQ09J8 - 收入评估
QCXG9P1C - 名下车辆
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 模板

🚀 快速开始

方式一：使用独立项目（推荐）

将整个 report-viewer 文件夹复制给别人
进入目录：cd report-viewer
安装依赖：npm install 或 pnpm install
启动开发服务器：npm run dev
访问：http://localhost:3000/?orderId=xxx 或 http://localhost:3000/?orderNo=xxx

方式二：集成到现有项目

复制以下目录到你的项目中：
- src/ui/ - 所有 UI 组件
- src/components/ - 报告相关基础组件
- src/views/Report.vue - 报告视图
- src/composables/useApiFetch.js - API 工具（如果需要）

确保安装以下依赖：

{
  "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"
}

配置路由（如果需要）：

{
  path: '/report',
  component: () => import('@/views/Report.vue')
}

⚙️ 配置说明

API 地址配置

编辑 src/composables/useApiFetch.js：

const useApiFetch = createFetch({
    baseUrl: "/api/v1", // 修改为你的 API 地址
    // ...
});

路由参数

报告页面支持以下 URL 参数：

orderId - 订单ID（数字）
orderNo - 订单号（字符串）
out_trade_no - 交易订单号（字符串）
order_id - 订单ID（字符串，从查询参数获取）

使用示例

// 在组件中使用 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

🔧 注意事项

图片资源：确保所有图片文件路径正确，特别是背景图片
API 接口：需要根据实际后端 API 调整请求地址和格式
样式依赖：项目依赖 Tailwind CSS 和 Vant UI，确保正确引入
浏览器兼容：需要现代浏览器支持（ES2015+）
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/ 目录

📞 技术支持

如有问题，请检查：

控制台错误信息
网络请求是否正常
依赖是否正确安装
文件路径是否正确

提示：这是一个独立的 Vue3 项目，可以直接运行，也可以集成到现有项目中。

5.9 KiB Raw Blame History Unescape Escape