预测线上化模块主要功能未为借呗长期预测的线上化配置，可通过配置模板展示给使用者预测数据，可视化图表。该模块作为子应用被嵌入主站中，以 React 函数式组件+antd 4为基础架构，公共状态管理使用 reduX 。该模块涉及到 antV X6中的 DAG 流程处理图提供清晰明了的数据处理流程，使用 RXJS 作为X6的公共状态管理仓库。使用 SpreadJS(pc端 Excel 表格插件)用于展示初始数据并提供录入修改数据数据功能。 使用 bizCharts 作为输出数据的可视化展示。
项目难点：初次使用 antV X6，加上官网上对于 React 渲染方式的文档不太充分，所以通过X6官方在 github 提供的一个 demo 作为项目中X6的骨架，该 demo中，管理组件公共状态使用了类+RXJS ，学习成本大。SpreadJS 也是现学现卖的，该插件 bug 很多，不断的踩坑派坑，印象最深的是如果A组件中引入了该插件，这时A组件中有一个 Modal 对话框，该对话框中如果引入了 SpreadJS 插件会引起 Spread 渲染报错，经过排查发现 SpreadJS 插件的最外层 DOM 节点是作为插件数据的唯一挂载源，如果出现嵌套会导致该插件出现数据异常。解决方式为使用 reactDOM.createPortal 自定义渲染节点将嵌套的 Modal 强制放在其他 DOM 节点中。