大屏设计模块使用

pigx-report-platform 是基于开源的 BI 平台 GoView V1.2.6 实现一个高效的拖拽式低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可制作数据大屏,减少心智负担。

官方资源

官方文档地址:GoView V1.2.6
官方反馈地址:GoView Issues

架构说明

架构限制

建议将大屏设计的功能与业务应用解耦,使其作为独立的微服务运行。因此,PIGX 大屏设计器不支持单体应用的架构。

单体项目建议直接使用 Docker 部署 goview 设计器,在 pigx-ui 中进行 iframe 或者独立的入口访问即可。

运行大屏设计

修改配置文件

配置文件路径:nacos/pigx-report-platform-dev.yml

配置要点:

  • 调整数据库配置,这里会自动表结构
  • 配置文件上传路径
gv:
  img-path: /Users/lengleng/Downloads/img/

启动服务

在 IDEA 中运行:PigxReportPlatformApplication.main()

启动大屏设计服务

访问大屏设计

访问限制

大屏设计只能通过 PIGX-UI 访问。

大屏设计入口

大屏设计操作指南

创建大屏

创建大屏

基本信息配置

基本信息配置

组件数据配置

组件数据配置

静态数据

操作步骤:

  • 下载对应组件要求的数据格式模板
  • 在数据模板中录入真实业务数据并导入
静态数据导入

动态数据

动态数据配置
数据格式要求

动态数据接口指的是数据通过后台接口进行动态计算返回 JSON 数据,具体返回数据格式严格按照数据内容要求返回。

数据返回格式:

// 要求使用 data 包裹数据格式,进行返回,goview 才能识别解析
{
  "data": "数据格式"
}
跨域配置

目标接口要支持跨域访问,参考 PIGX 支持接口跨域配置文档

接口权限

如调用 PIGX 现有微服务接口,请注意设置目标接口为 Inner(false) 对外暴露。

发布大屏

发布大屏

GoView 源码整合原理

高级内容

如下内容属于很进阶的内容,大家无需尝试自行构建,了解原理即可。

什么是 WebJar

WebJars 是一种将客户端的 JavaScript 和 CSS 依赖项打包成 JAR 文件的技术。它的目标是简化 Web 开发人员管理和引入前端资源的过程。通过使用 WebJars,开发人员可以像使用任何其他 Maven/Gradle 依赖项一样管理客户端库。

WebJars 的工作原理是将前端库(如 jQuery、Bootstrap、Goview)打包成 JAR 文件,并将其发布到 Maven 中央仓库。然后,开发人员可以将这些 WebJars 作为 Maven/Gradle 依赖项添加到他们的项目中。当构建项目时,依赖管理工具会自动从 Maven 中央仓库下载相应的 WebJar,并将其解压到项目的 classpath 中。

源码地址:https://git.pig4cloud.com/big/goview-spring-boot-starter

构建方式

只需要将 GoView npm run build 构建产物打包即可。

GoView 构建产物