(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210895309.6 (22)申请日 2022.07.26 (71)申请人 北京国电通网络技 术有限公司 地址 100070 北京市丰台区四合庄路2号院 东旭国际中心4 号楼 （A座 南楼） 申请人 国网信息通信产业 集团有限公司 (72)发明人 陈银伟　范永学　韩东兴　杨宇　 (74)专利代理 机构 北京风雅颂专利代理有限公 司 11403 专利代理师 金含 (51)Int.Cl. G06F 9/451(2018.01) G06F 9/445(2018.01) (54)发明名称 基于微前端框架的屏幕展示方法和相关设 备 (57)摘要 本申请提供一种基于微前端框架的屏幕展 示方法和相关设备， 该方法包括： 构建微前端框 架， 微前端框架包含多个子应用； 构建展示页面， 展示页面包含多个子区域； 每个子区域设置一个 调用接口， 通过调用接口将子应用加载至子区域 中； 其中， 子应用与子区域一一对应； 令每个子应 用从开源的可视化图表库中获取相应的展示图 表， 并在对应的子区域内对展示图表进行展示。 通过上述方法， 支撑后期拓展业务的展示， 方便 维护和推广。 权利要求书1页 说明书7页 附图3页 CN 115495178 A 2022.12.20 CN 115495178 A 1.一种基于微前端框架的屏幕展示方法， 其特 征在于， 包括： 构建微前端框架， 所述 微前端框架包 含多个子应用； 构建展示页面， 所述展示页面包 含多个子区域； 每个所述子区域设置一个调用接口， 通过所述调用接口将所述子应用加载至所述子区 域中； 其中， 所述子应用与所述子区域 一一对应； 令每个所述子应用从开源的可视化图表库中获取相应的展示图表， 并在对应的所述子 区域内对所述展示图表进行展示。 2.根据权利要求1所述的基于微前端框架的屏幕展示方法， 其特征在于， 所述微前端框 架还包括主应用， 所述主应用 用于对所述多个子应用进行 管理。 3.根据权利要求1所述的基于微前端框架的屏幕展示方法， 其特征在于， 所述展示页面 由页面服务框架和组件构成。 4.根据权利要求1所述的基于微前端框架的屏幕展示方法， 其特征在于， 所述通过所述 调用接口将所述子应用加载至所述子区域中之前， 包括： 令所述子应用在所述 微前端框架内进行注 册。 5.根据权利要求1所述的基于微前端框架的屏幕展示方法， 其特 征在于， 还 包括： 对在所述子区域内展示的所述展示图表进行刷新， 包括： 响应于接收到刷新指令， 所述子应用将所述刷新指令发送至所述可视化图表库； 所述可视化图表库根据 所述刷新指令生成更新后的展示图表， 并将所述更新后的展示 图表发送至所述子应用； 所述子应用将所述更新后的展示图表在对应的所述子区域内进行展示。 6.根据权利要求1所述的基于微前端框架的屏幕展示方法， 其特征在于， 基于所述屏幕 尺寸通过配置文件设置所述展示页面的展示比例。 7.根据权利要求1所述的基于微前端框架的屏幕展示方法， 其特 征在于， 还 包括： 令每个所述子应用从预先构建的数据库中获取相应的实时图像， 并在对应的所述子区 域内对所述实时图像进行展示。 8.一种基于微前端框架的屏幕展示装置， 其特 征在于， 包括： 框架模块， 被 配置为： 构建微前端框架， 所述 微前端框架包 含多个子应用； 区域模块， 被 配置为： 构建展示页面， 所述展示页面包 含多个子区域； 加载模块， 被配置为： 每个所述子区域设置一个调用接口， 通过所述调用接口将所述子 应用加载至所述子区域中； 其中， 所述子应用与所述子区域 一一对应； 展示模块， 被配置为： 令每个所述子应用从开源的可视化图表库中获取相应的展示图 表， 并在对应的所述子区域内对所述展示图表进行展示。 9.一种电子设备， 包括存储器、 处理器及存储在存储器上并可在处理器上运行的计算 机程序， 所述处 理器执行所述程序时实现如权利要求1至7任意 一项所述的方法。 10.一种非暂态计算机可读存储介质， 所述非暂态计算机可读存储介质存储计算机指 令， 所述计算机指令用于使计算机执 行权利要求1至7任意 一项所述的方法。权　利　要　求　书 1/1 页 2 CN 115495178 A 2基于微前端框架的屏幕 展示方法和相关设 备 技术领域 [0001]本申请涉及屏幕展示技术领域， 尤其涉及 一种基于微前端框架的屏 幕展示方法和 相关设备。 背景技术 [0002]在工程施工或项 目运行期间， 需要人员监控项 目进度或关键要素， 为方便人员监 控， 将需监控的项目进度和关键要素集成在同一展示页面， 并将展示页面在显示大屏上进 行展示。 [0003]现有的大屏展示页面是依据用户业务和屏幕尺寸进行定向开发， 然后将定向开发 的大屏展示页面在大屏上进行展示， 用户业务后期拓展后， 大屏无法对后期拓展业务进行 展示， 同时定向开发也 不利于后期维护和推广。 发明内容 [0004]有鉴于此， 本申请的目的在于提出一种基于微前端框架的屏 幕展示方法和相关设 备， 用以解决或部分解决上述 技术问题。 [0005]基于上述目的， 本申请提供了一种基于微前端框架的屏幕展示方法， 包括： [0006]构建微前端框架， 所述 微前端框架包 含多个子应用； [0007]构建展示页面， 所述展示页面包 含多个子区域； [0008]每个所述子区域设置一个调用接口， 通过所述调用接口将所述子应用加载至所述 子区域中； 其中， 所述子应用与所述子区域 一一对应； [0009]令每个所述子应用从开源的可视化图表库中获取相应的展示图表， 并在对应的所 述子区域内对所述展示图表进行展示。 [0010]可选的， 所述微前端框架还包括主应用， 所述主应用用于对所述多个子应用进行 管理。 [0011]可选的， 所述展示页面由页面 服务框架和组件构成。 [0012]可选的， 所述通过所述调用接口将所述子应用加载至所述子区域中之前， 包括： 令 所述子应用在所述 微前端框架内进行注 册。 [0013]可选的， 基于微前端框架的屏幕展示方法， 还 包括： [0014]对在所述子区域内展示的所述展示图表进行刷新， 包括： [0015]响应于接收到刷新指令， 所述子应用将所述刷新指令发送至所述可视化图表库； [0016]所述可视化图表库根据所述刷新指令生成更新后的展示图表， 并将 所述更新后的 展示图表发送至所述子应用； [0017]所述子应用将所述更新后的展示图表在对应的所述子区域内进行展示。 [0018]可选的， 基于所述屏幕尺寸 通过配置文件设置所述展示页面的展示比例。 [0019]可选的， 基于微前端框架的屏幕展示方法， 还 包括： [0020]令每个所述子应用从预先构建的数据库中获取相应的实时图像， 并在对应的所述说　明　书 1/7 页 3 CN 115495178 A 3