shellway/gemdalepi
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

✅ 已修复：网页查看器显示不全/无滚动条/无法缩放（v2） #1

New Issue
Open
opened 2026-08-06 15:23:49 +08:00 by shellway · 4 comments
shellway commented 2026-08-06 15:23:49 +08:00
Owner
Copy Link
Copy Source

问题反馈（爸爸 15:21）

  1. 页面显示不全，打开只能看到两家公司
  2. 没有滚动条，无法缩放

修复内容（v2）

  • 初始视图：画布按树实际规模计算（6050x980），默认展开第一层，完整显示 14 家根公司
  • 滚动条：图表容器 overflow:auto，画布超出窗口时可横向/纵向滚动
  • 缩放按钮：新增 🔍放大 / 🔍缩小 / 🔄重置（30%~400%）
  • 展开收起：新增 📂全部展开 / 📁全部收起
  • 保留：搜索高亮、点击展开下级、滚轮缩放

验证

关联

  • 部署方式：爸爸手动下载到群晖 /var/services/web/equity/
## 问题反馈（爸爸 15:21） 1. 页面显示不全，打开只能看到两家公司 2. 没有滚动条，无法缩放 ## 修复内容（v2） - **初始视图**：画布按树实际规模计算（6050x980），默认展开第一层，完整显示 14 家根公司 - **滚动条**：图表容器 overflow:auto，画布超出窗口时可横向/纵向滚动 - **缩放按钮**：新增 🔍放大 / 🔍缩小 / 🔄重置（30%~400%） - **展开收起**：新增 📂全部展开 / 📁全部收起 - 保留：搜索高亮、点击展开下级、滚轮缩放 ## 验证 - DOM 渲染测试通过（ECharts 实例/按钮/滚动容器均正常） - 已部署：http://192.168.27.11/equity/ ## 关联 - 部署方式：爸爸手动下载到群晖 /var/services/web/equity/
shellway commented 2026-08-06 15:35:10 +08:00
Author
Owner
Copy Link
Copy Source

v3 修复（15:30）

白屏根因定位：

  1. 容器高度塌陷：v2 的 #wrap 无明确高度，ECharts 初始化拿到 0 高度画布 → 图表空白（按钮是 HTML 不受影响，所以按钮正常、图不显示）
  2. 手动设置节点 collapsed 与 initialTreeDepth 冲突，可能干扰树布局
  3. value 数组格式 ECharts tree 不识别

v3 修复内容：

  • flex 布局固定容器高度（#wrap flex:1 + min-height:0）
  • 移除手动 collapsed 标记，只靠 initialTreeDepth:1 控制初始层级
  • value 改纯数字格式
  • ECharts 库与业务代码分 script 块
  • 新增错误显示栏（页面出错时红色提示，方便日后排查）

验证：canvas 6050×980 创建成功、无 JS 错误（headless Chrome DOM 验证）

## v3 修复（15:30） **白屏根因定位**： 1. **容器高度塌陷**：v2 的 #wrap 无明确高度，ECharts 初始化拿到 0 高度画布 → 图表空白（按钮是 HTML 不受影响，所以按钮正常、图不显示） 2. 手动设置节点 collapsed 与 initialTreeDepth 冲突，可能干扰树布局 3. value 数组格式 ECharts tree 不识别 **v3 修复内容**： - flex 布局固定容器高度（#wrap flex:1 + min-height:0） - 移除手动 collapsed 标记，只靠 initialTreeDepth:1 控制初始层级 - value 改纯数字格式 - ECharts 库与业务代码分 script 块 - 新增错误显示栏（页面出错时红色提示，方便日后排查） **验证**：canvas 6050×980 创建成功、无 JS 错误（headless Chrome DOM 验证）
shellway commented 2026-08-06 15:59:26 +08:00
Author
Owner
Copy Link
Copy Source

v6 修复（15:50）— 根治白屏 ✅

两个叠加根因：

  1. ECharts tree TB方向 + 多根节点数组布局 bug：14 个根公司全被挤在画布中心一条竖线上（实测内容范围仅 165px 宽），视口里几乎看不到 → 表现为"白屏"
  2. setOption 与容器尺寸设置顺序反了：必须先 setOption 再设置容器尺寸，否则布局塌缩

修复内容：

  • 14 个根节点包装成虚拟根「金地商置集团」（单根结构，绕过多根 bug）
  • 调整执行顺序：chart.setOption(baseOption) → 然后 applySize()
  • 验证：canvas 5324×910，内容铺满 X:215-5085（覆盖宽 4870/5324 = 91%）

排查过程（像素级自检，headless Chrome）：

  • v3/v4/v5 均验证内容缩在画布中心 → 逐步二分定位
  • 实验对照：LR方向正常 vs TB方向异常 → 定位多根 bug
  • 实验对照：有 value 字段异常 vs 无 value 正常 → 但最终确认真凶是执行顺序 + 多根
  • 全部通过 canvas getImageData 像素检测验证（截图方式在 headless 环境不可靠）
## v6 修复（15:50）— 根治白屏 ✅ **两个叠加根因**： 1. **ECharts tree TB方向 + 多根节点数组布局 bug**：14 个根公司全被挤在画布中心一条竖线上（实测内容范围仅 165px 宽），视口里几乎看不到 → 表现为"白屏" 2. **setOption 与容器尺寸设置顺序反了**：必须先 setOption 再设置容器尺寸，否则布局塌缩 **修复内容**： - 14 个根节点包装成虚拟根「金地商置集团」（单根结构，绕过多根 bug） - 调整执行顺序：`chart.setOption(baseOption)` → 然后 `applySize()` - 验证：canvas 5324×910，内容铺满 X:215-5085（覆盖宽 4870/5324 = 91%） **排查过程**（像素级自检，headless Chrome）： - v3/v4/v5 均验证内容缩在画布中心 → 逐步二分定位 - 实验对照：LR方向正常 vs TB方向异常 → 定位多根 bug - 实验对照：有 value 字段异常 vs 无 value 正常 → 但最终确认真凶是执行顺序 + 多根 - 全部通过 canvas getImageData 像素检测验证（截图方式在 headless 环境不可靠）
shellway commented 2026-08-06 16:31:51 +08:00
Author
Owner
Copy Link
Copy Source

v7 更新（16:30，爸爸确认显示正常后新增需求）

需求2：默认只显示主要控股公司，搜索才显示完整路径

  • 默认：仅显示「金地商置集团」+ 第一层（14 家一级公司），其余折叠
  • 搜索命中：自动剪枝，只保留命中公司的完整股权路径（祖先链+该公司子树），无关分支隐藏，黄色高亮
  • 清除搜索：恢复默认视图

需求3：折线连线

  • edgeShape: 'polyline'，连线改为直角折线（更美观，类似 org 图）

验证：初始渲染铺满画布 ✓；搜索"威新"→ 定位北京威新世纪物业管理有限公司，36 家匹配显示完整路径 ✓

## v7 更新（16:30，爸爸确认显示正常后新增需求） **需求2：默认只显示主要控股公司，搜索才显示完整路径** - 默认：仅显示「金地商置集团」+ 第一层（14 家一级公司），其余折叠 - 搜索命中：自动剪枝，只保留命中公司的**完整股权路径**（祖先链+该公司子树），无关分支隐藏，黄色高亮 - 清除搜索：恢复默认视图 **需求3：折线连线** - edgeShape: 'polyline'，连线改为直角折线（更美观，类似 org 图） **验证**：初始渲染铺满画布 ✓；搜索"威新"→ 定位北京威新世纪物业管理有限公司，36 家匹配显示完整路径 ✓
shellway commented 2026-08-06 17:22:44 +08:00
Author
Owner
Copy Link
Copy Source

v8 更新（17:19，爸爸新需求）

需求1：点击企业自动放大显示整条线路

  • 点击任意节点 → 自动剪枝只显示该企业的完整股权路径（祖先链+该企业+直属子公司）并放大填充画布
  • 点「🔄重置」或清除搜索恢复全貌

需求2：线路上增加股权比例标签

  • 每个子节点标签显示「公司名 (xx%)」
  • 说明：ECharts 5.5.1 tree 系列的 edgeLabel（连线标签）实测不渲染，改用节点标签紧贴连线终点显示，效果等同

验证：初始渲染正常、路径查找正确（集团→深圳威新，剪枝后节点=金地商置集团）✓

## v8 更新（17:19，爸爸新需求） **需求1：点击企业自动放大显示整条线路** - 点击任意节点 → 自动剪枝只显示该企业的完整股权路径（祖先链+该企业+直属子公司）并放大填充画布 - 点「🔄重置」或清除搜索恢复全貌 **需求2：线路上增加股权比例标签** - 每个子节点标签显示「公司名 (xx%)」 - 说明：ECharts 5.5.1 tree 系列的 edgeLabel（连线标签）实测不渲染，改用节点标签紧贴连线终点显示，效果等同 **验证**：初始渲染正常、路径查找正确（集团→深圳威新，剪枝后节点=金地商置集团）✓
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
shellway
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: shellway/gemdalepi#1