润乾报表与项目整合说明

目录
配置篇
 添加JAR包
 添加license文件
 添加配置文件和标签文件
 修改配置文件
 添加打印applet jar包和js包
 设计篇
 打开报表设计器
 新建数据源
 新建报表文件
 新增查询条件
 报表样式设计
 开发篇
 开发环境搭建
 示例代码
 显示效果
 官方DEMO
连接数据库
 启动服务器
 DEMO浏览

配置篇

添加JAR包

在\ide\eclipse\workspace\tcis3.0\eos-web\WEB-INF\lib路径下添加以下JAR包：

添加license文件

将license文件添加到\apache-tomcat-5.5.20\shared\classes路径下，如下图：

添加配置文件和标签文件

在\ide\eclipse\workspace\tcis3.0\eos-web\WEB-INF\report路径下添加如下文件：

修改配置文件

将配置文件添加完成后，修改配置文件web.xml和reportConfig.xml。
在web.xml文件中添加如下配置：

在reportConfig.xml文件中修改红框中的配置：

授权文件为之前添加的license文件名，数据源修改为\apache-tomcat-5.5.20\conf路径下server.xml文件中配置的数据源名称，特别注意数据源的username、password和url必须与eos工程连接的数据库保持一致，如下图：

到此配置已全部完成，将eos中的工程重新部署一次，以上添加的JAR文件和配置文件，标签文件会自动部署到如下路径中对应的文件夹内，如下图：

添加打印applet jar包和js包

将runqianReport4Applet.jar和runqianReport.js添加到\ide\eclipse\workspace\tcis3.0\eos-web路径下，重新部署eos中的工程，系统会自动将这两个文件部署到\apache-tomcat-5.5.20\webapps\default路径下，具体配置如下图：

友情提示：使用润乾的打印功能，客户端电脑必须已经安装Java JDK，否则无法使用。

设计篇

打开报表设计器

双击此图标打开设计器，如下图：

新建数据源

在菜单上选择"配置"—"数据源"，进行数据源配置：如下图：

新建报表文件

在菜单上选择"文件"—"新建"，新建报表文件，如下图：

点击下一步，进行SQL语句设置

点击"生成网格报表"，生成报表样式，如下图：

到此处整个报表已经设计完成。

新增查询条件

下面我们可以进一步完善此报表，可以增加查询条件参数，在菜单上选择"配置"—"参数"，如下图：

修改数据集，在菜单上选择"配置"—"数据集"，进行数据集对应的SQL语句修改，如下图：

报表样式设计

设置好了查询条件参数，我们还可以进一步完善此报表样式设计，如下图：

调整完成后，点击菜单上的保存按钮，将此报表保存为文件，如：demo.raq

开发篇

开发环境搭建

首先按下图结构在各模块构建包下建立报表js文件和jsp文件的目录：

然后添加所需要的JAR包，如下图：

到此所有的开发准备工作都已经完成。

报表文件存放路径

请将设计完成的报表文件存放到/resources/reportFiles路径下，如下图：

示例代码

Jsp示例代码：
reportManage.jsp
<%@page pageEncoding="UTF-8"%>
<%@include file="/frame/ui/page/include.jsp"%>
<html>

<head>
<title>ims</title>
<script type="text/javascript">
BIZ.ns('com.towngas.tcis.report');
ScriptMgr.load({
scripts: ['interfaces/report/js/reportUi.js',
'interfaces/report/js/reportEv.js'],
callback: function()

Unknown macro: { <span style="color}

});
</script>
</head>
<body>
<div id="reportDiv"></div>
</body>
</html>
js示例代码：
reportUi.js
/**
* 20121120 xiaobin
* 报表管理 DEMO 页面
*/
com.towngas.tcis.report.reportMgr = function() {
/**
* 创建功能面板
*/
this.initPanel = function() {
//初始化查询页面
this.createReportQueryPanel();
this.createReportTabPanel();
//创建查询 tab 页
this.reportTabPanel = new Ext.fn.TabPanel({
renderTo : "reportDiv",
activeTab : 0,
enableTabScroll:true,
items : [new Ext.fn.fnLayOut({
title:'first demo',
layout : 'ns',
autoScroll: true,
panels : [this.reportQueryPanel,this.reportTablePanel]
})]
});
}
/**
* 创建查询面板
*/
this.createReportQueryPanel = function() {
this.reportQueryPanel = new Ext.fn.QueryPanel({
height : 120,
columns : 1,
title:'first demo',
fields : [{
xtype : 'textfield',
name : 'picturename',
fieldLabel : '批次号'
}]
});
};
/**
* 创建显示面板
*/
this.createReportTabPanel = function() {
this.reportTablePanel = new Ext.Panel({
region : 'center'
});
};
}
reportEv.js
/**
* 20121120 xiaobin
* 报表管理 DEMO 查询事件
*/
com.towngas.tcis.report.reportMgr.prototype.initEvent = function() {
/**
* 查询事件
*/
this.reportQueryPanel.mon(this.reportQueryPanel, 'query', function(formpanel, vals) {
var tabPanel = this.reportTablePanel;
//润乾导出按钮控制
var fnBtn = '&fnBtn=excel|word|pdf';
//润乾报表解析路径
var url = 'interfaces/report/reportJsp/showReport.jsp?raq=demo&picturename=' + vals.picturename + fnBtn;
tabPanel.removeAll();
tabPanel.add({
xtype : "panel",
html : "<iframe width='100%' height='320' frameborder='0' scrolling='auto' src="url"></iframe>"
});
tabPanel.doLayout();
}, this);
}

显示效果

显示效果如下：

官方DEMO

连接数据库

在菜单上选择"配置"—"数据源"，进行官方DEMO的数据源配置：如下图：

启动服务器

连接成功后，启动润乾内置的tomcat服务器，如下图：

DEMO浏览

Tomcat服务器启动后，点击tomcat服务器启动图标旁边的ie图标，如下图：

点击ie图标后，弹出官方DEMO主页，如下图：

完。

空间快捷链接

页面树结构

配置篇

添加JAR包

添加license文件

添加配置文件和标签文件

修改配置文件

添加打印applet jar包和js包

设计篇

打开报表设计器

新建数据源

新建报表文件

新增查询条件

报表样式设计

开发篇

开发环境搭建

报表文件存放路径

示例代码

显示效果

官方DEMO

连接数据库

启动服务器

DEMO浏览

空间快捷链接

页面树结构

EOS与润乾报表整合说明

配置篇

添加JAR包

添加license文件

添加配置文件和标签文件

修改配置文件

添加打印applet jar包和js包

设计篇

打开报表设计器

新建数据源

新建报表文件

新增查询条件

报表样式设计

开发篇

开发环境搭建

报表文件存放路径

示例代码

显示效果

官方DEMO

连接数据库

启动服务器

DEMO浏览