大屏设计器

数据可视化，一般可以通过报表设计器、或者大屏设计器来实现。本小节，我们来讲解大屏设计器的功能开启。

大屏设计器，指的是通过拖拽图表或页面元素，无需编写代码即可制作数据大屏。如下图所示：

![](/media/202408/2024-08-28_102812_986012.png)
在项目中，通过集成市面上的报表引擎，实现了大屏设计器的能力。目前使用如下：

![](/media/202408/2024-08-28_102821_266981.png

> 为什么不使用 JimuReport 报表引擎呢？
因为 JimuReport 的大屏设计器是商业化的，需要购买授权。我手头暂时没有授权，所以没办法集成~

## 1. 功能开启
dtpc-module-report 实现了报表设计器的能力，开启步骤如下：

- 第一步，导入报表的 SQL 数据库脚本
- 第二步，启动dtpcreport-report 服务
- 第三步，启动大屏设计器的前端项目
### 1.1 第一步，导入 SQL
下载 go-view.sql 脚本，并导入数据库，初始化 Go-View 相关的表结构和数据。

![](/media/202408/2024-08-28_102936_638614.png)

### 1.2 第二步，启动 report 服务
运行该服务的 ReportServerApplication (opens new window)启动类，看到 "Init JimuReport Config [ 线程池 ] " 说明开启成功。

### 1.3 第三步，启动前端项目（AJ-Report）
TODO 开发中，预计 4 月份左右。

### 1.3 第三步，启动前端项目（Go-View）
① 克隆 yudao-ui-go-view (opens new window)项目，执行如下命令进行启动：

> # 安装 pnpm，提升依赖的安装速度
npm config set registry https://registry.npmmirror.com
npm install -g pnpm
 安装依赖
pnpm install
 启动服务
npm run dev

② 启动完成后，浏览器会自动打开 http://127.0.0.1:3000 (opens new window)地址，可以看到前端界面。

![](/media/202408/2024-08-28_103034_937234.png)

③ 访问 [报表管理 -> 大屏设计器] 菜单，可以查看对应的功能。如下图所示：

![](/media/202408/2024-08-28_103107_883042.png)

## 2. 如何使用？
#### 2.1 AJ-Report 大屏设计器
TODO 开发中，预计 4 月份左右。

#### 2.2 Go-View 大屏设计器
可以查看 Go-View 的官方文档，主要是：

GoView 说明文档 —— 页面引导
GoView 说明文档 —— 常见问题
如果你想了解在 Go-View 中，如何使用 SQL 或 HTTP 查询数据，可以查看内置的两个示例：

![](/media/202408/2024-08-28_103335_081167.png)

> 集成 Go-View 的代码实现？
① 后端：Go-View 的后端代码，主要在 go-view (opens new window)包下实现。
② 前端：在 @/views/report/go-view (opens new window)文件，通过 IFrame 嵌入 Go-View 界面。