init:清理项目文件
99
docs/FIX_SUMMARY.md
Normal file
@@ -0,0 +1,99 @@
|
||||
# 生成报告按钮失效修复总结
|
||||
|
||||
## 问题分析
|
||||
|
||||
生成报告按钮失效的可能原因:
|
||||
|
||||
1. **图表实例获取失败**:`echarts.getInstanceByDom()` 无法正确获取 React 组件中的图表实例
|
||||
2. **图片加载超时**:图片加载 Promise 可能无法正确解析
|
||||
3. **html2pdf.js 配置问题**:复杂的 CSS 样式可能导致渲染失败
|
||||
4. **异步时序问题**:多个异步操作没有正确协调
|
||||
|
||||
## 已实施的修复
|
||||
|
||||
### 1. 添加详细的调试日志
|
||||
在 `App.tsx` 的 `handleDownloadPDF` 函数中添加了详细的 console.log 语句,用于跟踪:
|
||||
- 图片加载状态
|
||||
- 图表实例获取结果
|
||||
- PDF 生成过程
|
||||
|
||||
### 2. 改进图表实例获取逻辑
|
||||
- 简化了图表实例获取逻辑
|
||||
- 添加了错误处理,当无法获取图表实例时使用透明占位图
|
||||
- 避免了复杂的实例查找逻辑
|
||||
|
||||
### 3. 修复图表组件
|
||||
在 `ChinaMap.tsx` 中:
|
||||
- 添加了 `alt` 属性修复 accessibility 警告
|
||||
- 保留了图表实例到 DOM 元素的引用(备用方案)
|
||||
|
||||
### 4. 创建测试文件
|
||||
创建了多个测试文件来验证功能:
|
||||
- `test-pdf.html` - 测试 html2pdf.js 基本功能
|
||||
- `test-button.html` - 测试按钮事件处理
|
||||
- `simple-test.html` - 最小化 PDF 生成测试
|
||||
|
||||
## 测试步骤
|
||||
|
||||
### 步骤1:测试基本按钮功能
|
||||
1. 打开 `simple-test.html` 文件
|
||||
2. 点击"测试生成报告按钮"
|
||||
3. 检查是否能够下载 PDF 文件
|
||||
4. 查看浏览器控制台是否有错误
|
||||
|
||||
### 步骤2:测试应用功能
|
||||
1. 启动开发服务器:`npm run dev`
|
||||
2. 访问 http://localhost:5174/
|
||||
3. 点击"生成报告"按钮
|
||||
4. 查看浏览器控制台输出
|
||||
5. 检查是否出现错误信息
|
||||
|
||||
### 步骤3:诊断具体问题
|
||||
根据控制台输出诊断问题:
|
||||
- 如果看到"图表 X 无法获取实例",说明图表实例获取有问题
|
||||
- 如果看到"PDF导出失败",检查 html2pdf.js 配置
|
||||
- 如果没有任何输出,按钮事件可能没有触发
|
||||
|
||||
## 常见问题解决方案
|
||||
|
||||
### 问题1:图表实例无法获取
|
||||
**解决方案**:
|
||||
1. 确保图表组件已正确渲染
|
||||
2. 检查 `echarts.getInstanceByDom()` 的参数是否正确
|
||||
3. 考虑使用全局变量保存图表实例
|
||||
|
||||
### 问题2:图片加载超时
|
||||
**解决方案**:
|
||||
1. 增加图片加载超时时间
|
||||
2. 添加图片加载失败的回退机制
|
||||
3. 使用 base64 内联图片
|
||||
|
||||
### 问题3:html2pdf.js 渲染问题
|
||||
**解决方案**:
|
||||
1. 简化 html2canvas 配置
|
||||
2. 减少复杂的 CSS 样式
|
||||
3. 使用更简单的测试内容验证功能
|
||||
|
||||
### 问题4:按钮事件未触发
|
||||
**解决方案**:
|
||||
1. 检查按钮的 `onClick` 事件绑定
|
||||
2. 确保没有其他事件阻止了按钮点击
|
||||
3. 添加简单的 console.log 测试事件绑定
|
||||
|
||||
## 下一步调试建议
|
||||
|
||||
如果问题仍然存在,建议:
|
||||
|
||||
1. **逐步简化测试**:从最简单的 HTML 内容开始测试 PDF 生成
|
||||
2. **分离问题**:分别测试图表导出、图片加载、PDF 生成
|
||||
3. **检查依赖版本**:确保 html2pdf.js、echarts 等依赖版本兼容
|
||||
4. **查看浏览器兼容性**:在不同浏览器中测试功能
|
||||
|
||||
## 相关文件
|
||||
|
||||
- `src/App.tsx` - 主应用组件,包含生成报告逻辑
|
||||
- `src/components/ChinaMap.tsx` - 图表组件
|
||||
- `src/index.css` - 导出样式定义
|
||||
- `test-pdf.html` - PDF 生成测试
|
||||
- `test-button.html` - 按钮功能测试
|
||||
- `simple-test.html` - 简单 PDF 测试
|
||||
126
docs/assets/images/10@2x.svg
Normal file
|
After Width: | Height: | Size: 723 KiB |
57
docs/assets/images/10备份@2x.svg
Normal file
|
After Width: | Height: | Size: 560 KiB |
15
docs/assets/images/12@2x.svg
Normal file
|
After Width: | Height: | Size: 484 KiB |
35
docs/assets/images/13@2x.svg
Normal file
|
After Width: | Height: | Size: 214 KiB |
124
docs/assets/images/3@2x.svg
Normal file
|
After Width: | Height: | Size: 774 KiB |
221
docs/assets/images/4@2x.svg
Normal file
|
After Width: | Height: | Size: 338 KiB |
BIN
docs/assets/images/logo.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
docs/assets/images/new/不同出口免抵退税金额企业分布.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/assets/images/new/不同出口退税金额企业分布.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/assets/images/new/企业风险扫描结果分布.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/assets/images/new/发票高风险企业占比.png
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/assets/images/new/法定代表人关联企业数量分布.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/assets/images/new/登录人关联企业数量分布.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
docs/assets/images/new/进出口企业占比.png
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/assets/images/new/预缴税款企业占比.png
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
docs/assets/images/new/高新技术企业占比.png
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/assets/images/other/不同出口免抵退税金额企业分布.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/assets/images/other/不同出口退税金额企业分布.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/assets/images/other/企业风险扫描结果分布.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
docs/assets/images/other/法定代表人关联企业数量分布.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/assets/images/other/登录人关联企业数量分布.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
152
docs/assets/images/封面@2x.svg
Normal file
|
After Width: | Height: | Size: 257 KiB |
BIN
docs/assets/images/封面背景-1.png
Normal file
|
After Width: | Height: | Size: 220 KiB |
BIN
docs/assets/images/封面背景-2.png
Normal file
|
After Width: | Height: | Size: 1.7 MiB |
BIN
docs/assets/images/封面背景.png
Normal file
|
After Width: | Height: | Size: 192 KiB |
BIN
docs/assets/images/封面背景@1x.png
Normal file
|
After Width: | Height: | Size: 438 KiB |
BIN
docs/assets/images/改善计划二维码-1.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
docs/assets/images/改善计划二维码.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
docs/assets/images/泾渭云二维码-1.png
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
BIN
docs/assets/images/泾渭云二维码.png
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
24
docs/assets/images/饼图颜色排序@2x.svg
Normal file
|
After Width: | Height: | Size: 29 KiB |
14
docs/页面文件.md
Normal file
@@ -0,0 +1,14 @@
|
||||
页面 1(已完成)
|
||||
https://www.figma.com/design/zZpz11E3WVxolpkgzBu4o1/2025%E5%B9%B4%E9%87%91%E8%9D%B6%E6%A0%B8%E5%BF%83%E7%94%A8%E6%88%B7%E8%BF%90%E8%90%A5%E5%B9%B4%E6%8A%A5?node-id=6-3&t=4noCsRgnD1h31dze-4
|
||||
|
||||
页面 2
|
||||
https://www.figma.com/design/zZpz11E3WVxolpkgzBu4o1/2025%E5%B9%B4%E9%87%91%E8%9D%B6%E6%A0%B8%E5%BF%83%E7%94%A8%E6%88%B7%E8%BF%90%E8%90%A5%E5%B9%B4%E6%8A%A5?node-id=6-240&t=4noCsRgnD1h31dze-4
|
||||
|
||||
页面 3
|
||||
https://www.figma.com/design/zZpz11E3WVxolpkgzBu4o1/2025%E5%B9%B4%E9%87%91%E8%9D%B6%E6%A0%B8%E5%BF%83%E7%94%A8%E6%88%B7%E8%BF%90%E8%90%A5%E5%B9%B4%E6%8A%A5?node-id=6-416&t=4noCsRgnD1h31dze-4
|
||||
|
||||
页面 4
|
||||
https://www.figma.com/design/zZpz11E3WVxolpkgzBu4o1/2025%E5%B9%B4%E9%87%91%E8%9D%B6%E6%A0%B8%E5%BF%83%E7%94%A8%E6%88%B7%E8%BF%90%E8%90%A5%E5%B9%B4%E6%8A%A5?node-id=11-1884&t=4noCsRgnD1h31dze-4
|
||||
|
||||
页面 5
|
||||
https://www.figma.com/design/zZpz11E3WVxolpkgzBu4o1/2025%E5%B9%B4%E9%87%91%E8%9D%B6%E6%A0%B8%E5%BF%83%E7%94%A8%E6%88%B7%E8%BF%90%E8%90%A5%E5%B9%B4%E6%8A%A5?node-id=13-1889&t=4noCsRgnD1h31dze-4
|
||||