jnpf-web-datareport

一 环境要求

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 的终端执行以下命令

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

3.接口配置

• 打开/html/index.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,做如下修改,

# 在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.运行报表前端

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

5.报表前端开发

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

测试、生产环境部署

目录结构

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

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

• 部署配置

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

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

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

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

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

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

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

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