开发集成

简介

报表秀可以作为报告模版的开发工具，开发完成后，可以导出报告模板，嵌入到现有到系统中。
导出来到模板，一般使用现有系统到数据作为数据源，更加方便与系统的无缝集成。

开发集成的流程

正常设计报告
设置组件 API (需要开发者账号权限)
设置数据源模式
预览报告开发模版
导出报告模板
部署/对接第三方系统

如果报告需要根据参数而改变，请参考全局参数, 如果全局参数需要表单控件, 请参考表单控件

1. 正常设计报告

2. 设置组件 API

3. 设置数据源模式

数据模式：如果使用 API 数据源，必须选择 “使用API接口数据” 模式。默认数据模式，是制作报告模版时的所见的当前数据
重复调用：如果需要按周期重复调用，则打开此开关
数据更新频率：如果需要定时更新，开启重复调用，并设定调用频率，默认频率为 60 秒

4. 预览报告开发模版

5. 导出报告模板

导出模版前，请先发布报告
将导出一个压缩文件包，内含报告文件以及依赖文件

下载会得到一个类似这样 bbxdev-node-20211016173016.zip 文件，这是一个压缩文件，可以解压。

6. 对接现有系统

解压后，文件构成目录如图所示，重点关注三个地方：

bbx 文件夹是依赖文件
报告的通用依赖的内容在此文件夹内
report 文件夹下是报告文件
这是报告本身的内容，集成时，主要参考这里的html和js文件
api.js 文件
这是一个使用nodejs环境模拟的api，用于预览模板效果的。集成时，需要是用你的API来替换这里的API。

提示

集成，本质上很简单，就是把report目录下的js文件植入到你的系统中，这是前端开发的基础工作，集成具体依赖，参考report下的html文件。

7. 运行 demo

本 demo 是运行在 node 环境下的，在运行程序前，请确保已经安装好了 node 环境。
如果没有安装 node，你可以点击这里, 或者可以到 https://nodejs.org/ 下载安装。

此案例代码，可以点击这里下载。

解压后，进入解压的目录

cd bbxdev-node

运行脚本，安装项目依赖

npm install

运行脚本，启动系统

npm start

访问报告文件(按项目实际文件为准)

http://127.0.0.1:9898/reports/eeedf1828c720c888f6df84a7178193f.html

可以看到以下效果

提示

此次只是以nodejs环境作为一个默认的运行demo，你可以集成到任何其他支持http协议的服务中，如 java，python，php 等。

8. 全局参数

对于组件的API会有各自的参数区分业务数据，然而，也会有多个组件同时指向同一个参数的情况，比如, 指向某位员工，或者某一天。为了避免组件的重复设置，可以使用全局参数。设置全局参数后，所有开启全局参数的组件，都会注入对应的全局参数。

全局参数的源码案例，可以点击这里下载。下载后，解压，进入目录，然后运行 npm install npm start 即可启动。

8.1 定义全局参数

进入报告设置栏，在全局参数组下点击「打开参数定义」

添加并填写全局参数定义

填写完后点击「确定」保存全局参数定义

然后可以看到全局定义的参数更新了

提示

定义参数时，注意“键名”的命名，这是需要对应API的参数key值。标签名是用于阅读的，可以填写中文。这里为了方便对应，标签名和键名写成一致。
定义完全局参数后，组件并不能被马上应你用到组件上，需要在需要使用全局的组件中开启接受全局参数。

8.2 开启组件全局参数

选中需要使用全局参数的组件，进入组件设置的数据源栏。

定义组件API，定义方法可以参考组件API
将调用设定下的数据模式选择为“使用API接口数据”
将调用设定下的全局参数选择为”接受“

为了更好展现案例效果，按同样的方法，设定另外一个组件API

提示

定义组件API时，需要接受的参数键名(key)应该与全局参数的键名(key)一致，只有键名相同的才会起关联作用

8.3 测试全局参数

设定并开启组件的API后，切换回报告设置的全局参数栏。把gcode参数改为”456“，点击确定。然后可以看到对应两个图表的数据已经更新。

提示

注意：因为示例仅做测试，可选参数也是固定可选的。
user在此示例中仅设置为 zhangsan 或者 lisi
gcode在此示例中仅设置为 123 或者 456

8.4 API方式设置组件全局参数

按照上面的步骤5, 导出模板，然后把bbxdev-node/app/api.js的api内容补充完整，具体参考源码案例。

在 window.BBX_ 的命名空间，有设置全局API参数的接口 setComponentApiParamsAndForceRequest, 调用案例参考 bbxdev-node/public/reports/global-params-demo.js 。如果需要测试，把此文件的注释去掉即可。

// 需要测试时，把下面的注释去掉，这里使用定时器，只是为了方便演示，并不一需要使用呢定时器调用。

setTimeout(async () => {
  const API = window.BBX_;
  await API.setComponentApiParamsAndForceRequest({ params: { gcode: '456', user: 'zhangsan' }});
}, 3000);

setTimeout(async () => {
  const API = window.BBX_;
  await API.setComponentApiParamsAndForceRequest({ params: { gcode: '123', user: 'lisi' }});
}, 6000);

setTimeout(async () => {
  const API = window.BBX_;
  await API.setComponentApiParamsAndForceRequest({ params: { gcode: '456', user: 'lisi' }});
}, 9000);

setTimeout(async () => {
  const API = window.BBX_;
  await API.setComponentApiParamsAndForceRequest({ params: { gcode: '123', user: 'zhangsan' }});
}, 12000);

可以看到接受全局参数的组件API进行请求时，已经使用了全局参数

8.5 URL方式设置组件全局参数

在url上加上形式为globalparams={p1:v1, p2:v2}的参数。

在 8.4 的下载的案例基础上，加入需要设置全局参数 { user: 'zhangsan', gcode: '456' }，那么可以这么做。url后面加参数，如：

http://127.0.0.1:9696/reports/eeedf1828c720c888f6df84a7178193f.html?globalparams=%7B"user"%3A"zhangsan"%2C"gcode"%3A"456"%7D

可以看到接受全局参数的组件API进行请求时，已经使用了全局参数

提示

%7B"user"%3A"zhangsan"%2C"gcode"%3A"456"%7D 看起来像是乱码，这是怎么来的？
这其实是 encodeURIComponent(JSON.stringify({ user: 'zhangsan', gcode: '456' })) 的结果。

9. 表单控件

这里的表单控件，主要是给全局参数在UI界面上的支持，也就是说，表单的输入项应该对应全局参数的设置。

9.1 参数表单

参数表单，是普通表单，是作为一个组件嵌入报告中，可以设置大小和移动位置等。

为了方便演示，把上面例子报告中的右边组件做一下位置调整，空出来地方放置表单。

1). 打开左边资源栏的基础控件下的表单，可以看到有「参数表单」这一项。

2). 把参数表单控件拖拽到空白处，调整好大小

3). 选中表单组件，回到组件设置栏，点击「打开表单设计器」

4). 在打开表单设计窗口中，点击「导入全局参数」

提示

如果是已经设计了全局参数，那么可以在这一步导入全局参数信息，导入后，还可以继续修改。不从全局参数导入，重开设计表单也是可以的。

5). 导入后，可以看到已经有两个参数。现在选中user参数栏，“user”就是对应全局参数的“user”。

6). 表单输入项的标题可以改，比如把“user”改为“员工”

提示

表单输入栏的ID，必须对应全局参数的键名，否则参数不能匹配传递。

7). 类似，把gocode栏的标题“gcode” 改为 “渠道”，然后点击「确定」保存，可以看到表单已经更新。

8). 如果需要测试，点击头部菜单的「播放」

9). 在播放模式下，可以看到改变参数，点击「确定」，如果API正常，可以看到图表数据已经更新

10). 然后安装前面导出报告模板，导出再进行集成

9.2 弹出表单

弹出表单是为了方便报告美观，把表单隐藏起来，只留出一个触发按钮，点击触发按钮后弹出表单。

1). 打开左边资源栏的基础控件下的表单，可以看到有「弹出表单」这一项。

2). 把参数表单控件拖拽到空白处，调整好大小

3). 选中表单组件，回到组件设置栏，点击「打开表单设计器」，设计过程可以参考9.1 参数表单

4). 如果需要，可以调整弹出表单的大小

10 统一API

一份报告可能会有多个组件，如果组件数量比较多，如果不想消耗多次请求的网络，希望每次更新只需发一次数据请求，那么可以使用统一API功能。

1). 继续沿用上面的例子，添加一个表单(参数表单或者弹出表单)，这里使用弹窗表单。

2). 选择表单组件设置的「使用统一API」(打上勾)

3). 点击「打开统一API定义」，设置统一API, 然后点击确定

4). 点击「打开表单设计器」，设置和统一API对应的参数表单

5). 可以点击头部菜单栏的「播放」，进入可以交互模式进行测试。

11 环境设置

开发、测试和生产环境一般来说是不一样的，设置新的API时，可以不写域名(包括端口), 域名可以使用环境配置方式设定。

注意，配置API的url时，以http://或者https:// 开头的API，将会被忽略，不会受到环境配置域名的影响。

打开报告设置栏，在「更多/域名」下可以配置环境。

环境设定的选项，可以用于数据测试，指定环境配置的域名信息。

提示

环境设定的默认值为”自动“, 即根据当前页面url中的”evn“参数值判断环境。 evn 的取值范围是 dev, test, prod，分别对应开发，测试，生产环境。默认值为prod，即生产环境上可以不配置evn参数。
比如 http://localhost:7088/preview/pv-6/666/KmWAz1Cou3/zXIQ7hQLz.html?title=123&evn=dev 中evn的参数值为 dev，那么该报告使用的环境配置为开发环境

简介​

1. 正常设计报告​

2. 设置组件 API​

3. 设置数据源模式​

4. 预览报告开发模版​

5. 导出报告模板​

6. 对接现有系统​

7. 运行 demo​

8. 全局参数​

8.1 定义全局参数​

8.2 开启组件全局参数​

8.3 测试全局参数​

8.4 API方式设置组件全局参数​

8.5 URL方式设置组件全局参数​

9. 表单控件​

9.1 参数表单​

9.2 弹出表单​

10 统一API​

11 环境设置​

简介