100 lines
4.6 KiB
Markdown
100 lines
4.6 KiB
Markdown
# 项目详情专项排查图谱嵌入设计
|
||
|
||
## 背景
|
||
|
||
项目详情页的“专项排查”页面当前已有“图谱外链展示”占位卡片，需要替换为真实 iframe 图谱展示能力。图谱分为“资金图谱”和“关系图谱”两个页签，对应 `assets/图谱.txt` 中的两个外部链接。
|
||
|
||
本次设计只涉及前端页面展示，不新增后端接口，不保存证件号，不调整项目详情主导航。
|
||
|
||
## 目标
|
||
|
||
- 在项目详情的“专项排查”页面内嵌入图谱展示区域。
|
||
- 图谱区域包含共用证件号输入框和“资金图谱 / 关系图谱”两个页签。
|
||
- 用户输入证件号后，前端执行标准化与 md5 加密，并替换图谱链接 `vId` 中 `/` 后的 hash 字符串。
|
||
- 未输入证件号前不加载 iframe，只显示输入提示。
|
||
|
||
## 页面位置
|
||
|
||
在 `ruoyi-ui/src/views/ccdiProject/components/detail/SpecialCheck.vue` 中，将现有“图谱外链展示”占位卡片替换为独立组件：
|
||
|
||
- 上方：员工家庭资产负债专项核查
|
||
- 中间：图谱展示组件
|
||
- 下方：采购、招聘、调动扩展查询
|
||
|
||
组件建议命名为 `GraphAtlasSection.vue`，放在 `ruoyi-ui/src/views/ccdiProject/components/detail/` 目录下，并由 `SpecialCheck.vue` 引入。
|
||
|
||
## 交互设计
|
||
|
||
图谱组件顶部展示一行查询区：
|
||
|
||
- 证件号输入框
|
||
- “查询图谱”按钮
|
||
|
||
触发方式：
|
||
|
||
- 输入框回车触发查询
|
||
- 点击“查询图谱”按钮触发查询
|
||
|
||
图谱页签顺序：
|
||
|
||
1. 资金图谱
|
||
2. 关系图谱
|
||
|
||
未查询状态下，iframe 不渲染，展示空状态提示“请输入证件号后查询图谱”。查询成功后，当前页签渲染对应 iframe。切换页签时复用同一个已加密证件号重新生成 iframe 地址。
|
||
|
||
## 数据处理
|
||
|
||
证件号处理流程：
|
||
|
||
1. 对用户输入执行 `trim`，去掉前后空格。
|
||
2. 如果标准化后的证件号末尾是小写 `x`，转换为大写 `X`。
|
||
3. 使用现有 `@/utils/md5` 工具生成 md5。
|
||
4. 按当前页签替换图谱链接 `params.vId` 中 `/` 后的 hash。
|
||
|
||
图谱 `vId` 规则：
|
||
|
||
- 资金图谱：`idno_node/<md5证件号>`
|
||
- 关系图谱：`rel_node/<md5证件号>`
|
||
|
||
链接来源固定为 `assets/图谱.txt` 的两个外部图谱地址。本次按前端常量维护，不引入后端配置化。
|
||
|
||
## 异常处理
|
||
|
||
- 证件号为空时，点击按钮或回车提示“请输入证件号”，不加载 iframe。
|
||
- 证件号非空时不做身份证格式校验，只执行标准化和 md5，避免引入需求外的业务规则。
|
||
- iframe 只负责设置 `src`，不读取跨域内容。
|
||
- 外部图谱服务的 token、网络或页面错误由 iframe 内部页面展示，当前系统不额外增加兜底跳转或降级逻辑。
|
||
- 当前阶段外部图谱页面可能无法正常打开，验收以 iframe 链接拼接正确为准，不以 iframe 内容成功渲染为通过条件。
|
||
|
||
## 样式要求
|
||
|
||
- 图谱区域延续专项排查页面现有白底卡片风格。
|
||
- iframe 区域设置稳定的最小高度，避免图谱区域过矮。
|
||
- 大屏下图谱区域尽量占用可视高度，方便查看节点关系。
|
||
- 查询区、页签、iframe 容器之间保持清晰间距，不影响上下两个专项排查区块。
|
||
|
||
## 测试设计
|
||
|
||
实现完成后按项目规则进行真实页面验证：
|
||
|
||
1. 进入真实项目详情页，切换到“专项排查”。
|
||
2. 确认图谱模块位于资产负债核查和扩展查询之间。
|
||
3. 未输入证件号时点击“查询图谱”，确认提示“请输入证件号”，且页面不加载 iframe。
|
||
4. 未输入证件号时在输入框按回车，确认同样提示“请输入证件号”，且页面不加载 iframe。
|
||
5. 输入证件号后点击按钮，确认资金图谱 iframe 地址中的 `vId` 为 `idno_node/<md5证件号>`。
|
||
6. 修改证件号后在输入框按回车，确认资金图谱 iframe 地址刷新为新的 `idno_node/<md5证件号>`。
|
||
7. 切换到关系图谱，确认沿用同一个证件号，iframe 地址中的 `vId` 为 `rel_node/<md5证件号>`。
|
||
8. 使用带前后空格、末尾小写 `x` 的证件号重复验证，确认按 `trim + X` 标准化后生成 md5。
|
||
9. 当前阶段不要求外部图谱内容实际打开成功，以上 iframe `src` 链接正确即可判定图谱拼接链路通过。
|
||
10. 测试结束后关闭本轮启动的前端进程。
|
||
|
||
前端命令执行前必须先在 `ruoyi-ui` 目录执行 `nvm use`。
|
||
|
||
## 非目标
|
||
|
||
- 不新增后端接口。
|
||
- 不将图谱链接写入数据库。
|
||
- 不保存用户输入的证件号或 md5 结果。
|
||
- 不新增项目详情顶部一级菜单。
|
||
- 不为外部图谱服务增加 token 刷新、降级链接或兼容逻辑。
|