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