## 一 环境要求

### 1.1 开发环境

- 操作系统：`Windows 10/11`，`MacOS`；
- `Visual Studio Code`(简称 VSCode)

### 1.2 运行环境

`Nginx` 建议使用 1.18.0 及以上版本、`OpenResty` 或 `TongHttpServer 6.0`(国产信创)

## 二 浏览器支持

> 支持现代浏览器，不支持 IE

| IE          | Edge            | Firefox         | Chrome          | Safari          |
| ----------- | --------------- | --------------- | --------------- | --------------- |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |


## 三 关联项目

> 需要使用下表中的对应分支

| 项目            | 分支(Coding)  | 说明             |
| --------------- | ------------- | ---------------- |
| jnpf-datareport | v5.1.x-stable | 报表后端项目源码 |

### 开发环境

1.导入项目：将 `jnpf-web-datareport` 拖入`Visual Studio Code`编辑器

2.安装依赖及静态服务器，在 `Visual Studio Code` 的终端执行以下命令

```bash
# 安装依赖
yarn
# 安装Node静态服务器
yarn http-server -g
```

3.接口配置

- 打开`/html/index.html`,做如下修改

```html
# 在index.html文件中第 24 行开始
<script type="text/javascript">
  // 报表接口
  window._server = "http://localhost:30007";
  // 报表前端
  window._contextPath = "http://localhost:8200";
  // 主项目接口地址
  window._mainServer = "http://localhost:30000";
</script>
```

- 打开`/html/preview.html`,做如下修改,

```html
# 在preview.html文件中第86行
<script type="text/javascript">
  // 报表接口
  window._server = "http://localhost:30007";
</script>
```

- 配置说明：

  - `window._server`：报表接口，对应`jnpf-datareport`项目接口地址，本地开发环境默认为`http://localhost:30007`;
  - `window._contextPath`：报表前端，本地开发环境默认为`http://localhost:8200`;
  - `window._mainServer`：主项目接口地址，对应`jnpf-java-boot`项目接口地址，本地开发环境默认为`http://localhost:30000`

    4.运行报表前端

```bash
# 在html目录下执行以下命令
http-server -a localhost -p 8200
```

5.报表前端开发

修改`src`目录下相关文件后，需要执行打包命令`yarn build`,打包的文件是存放在`html`文件夹下的`js`文件夹中

## 测试、生产环境部署

### 目录结构

```bash
├── jnpf-web                       # 假设这个目录是存放测试或生产环境的前端
     │── DataV                     # 大屏(`jnpf-datascreen`)打包后文件存放目录
     │── Report                    # 报表(`jnpf-datareport`)html下的文件
     └── 主项目前端打包后的文件     # 主项目(`jnpf-web`)打包后存放在根目录
```

- 将 `jnpf-web-datareport` 下的 `html` 文件夹中的所有拷贝到 `jnpf-web` 的 `Report` 目录下,如 `Report` 目录不存在请手动建立

- 部署配置

  - 打开`/Report/index.html`,做如下修改:

```html
<script type="text/javascript">
  // 报表接口
  window._server = "/ReportServer";
  // 报表前端
  window._contextPath = "/Report";
  // 主项目接口地址
  window._mainServer = "";
</script>
```

  - 打开`/Report/preview.html`,做如下修改:

```html
<script type="text/javascript">
  // 报表接口
  window._server = "/ReportServer";
</script>
```

- 打开`/Report/searchform.html`,做如下修改,

```html
<script type="text/javascript">
  // 报表接口
  window._server = "/ReportServer";
  // 报表前端
  window._contextPath = "/Report";
</script>
```

- 配置说明：报表接口中，`ReportServer` 为虚拟目录，需要在 `Nginx` 增加相关配置，具体配置如下:

  ```bash
    # 数据报表接口配置
    location /ReportServer/ {
      proxy_pass http://localhost:30007/;
    }
  ```