SC-MOM/SC-report-web

数据报表

开发环境

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

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

# 安装依赖
yarn
# 安装Node静态服务器
npm install 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,做如下修改:

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

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

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

• 配置说明：
  • 本示例中，http://192.168.0.20:90为项目在测试环境中访问入口，在部署中根据实际情况调整;
  • 报表接口中，ReportServer为虚拟目录，需要在Nginx增加相关配置，具体配置如下:

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