倒计时消息提示框

1.1 预期效果

FineReport 自带的提示框样式比较单一，例如填报校验的提示框，如下图所示：

可以通过引入一些 JS 和 CSS 来做出个性化的效果，如下图所示：

1.2 实现思路

• 如果是 cpt 报表，直接在模板 Web 属性中引入外部 JavaScript 和 CSS 。

• 如果是 frm 报表，需要在 body 初始化事件中写外部 JavaScript 和 CSS 引用。

2.1 下载文件

1）点击下载 JavaScript 和 CSS 文件：

notice.js

animate.css

noticejs.css

2）将 3 个文件放到%FR_HOME%\webroot\help\css目录下，如下图所示：

2.2 引用文件

1）新建普通报表，设计器菜单栏点击模板>模板Web属性，打开的页面点击引用JavaScript，将上面的 1 个 JavaScript 文件引用到报表中，如下图所示：

2）点击引用CSS，将上面的 2 个 CSS 文件引用到报表中，如下图所示：

2.3 设计表格

B2、D2、F2、H2 单元格都添加按钮控件，按钮名字分别设置为：success、info、warning、error，如下图所示：

2.4 添加事件

分别给表格中的 4 个按钮添加点击事件，触发弹出提示框的操作，如下图所示：

1）B2 单元格按钮点击事件 JavaScript 代码如下：

new NoticeJs({
	title: '',
	type: 'success',
	text: '填报成功',
	position: 'topCenter',
	closeWith: ['button','click'],
	timeout: 30,
	modal: false,
	progressBar: true,
	callbacks: {
		beforeShow: [],
		onShow: [],
		afterShow: [],
		onClose: [],
		afterClose: [],
		onClick: [],
		onHover: [function() {
			console.log("success");
		}]
	},
	animation: {
		open: 'animated bounceInRight',
		close: 'animated bounceOutLeft'
	}
}).show()

2）D2 单元格按钮点击事件 JavaScript 代码如下：

new NoticeJs({
	type: 'info',
	text: '填报进行中，暂时不可操作',
	position: 'topCenter',
	timeout: 30,
	modal: true,
	animation: {
		open: 'animated bounceInRight',
		close: 'animated bounceOutLeft'
	}
}).show()

3）F2 单元格点击事件 JavaScript 代码如下：

new NoticeJs({
	type: 'warning',
	text: '重复提交',
	timeout: 30,
	animation: {
		open: 'animated bounceIn',
		close: 'animated bounceOut'
	}
}).show()

4）H2 单元格点击事件 JavaScript 代码如下：

new NoticeJs({
	type: 'error',
	text: '填报失败',
	position: 'topCenter',
	timeout: 30,
	animation: {
		open: 'animated flipInX',
		close: 'animated flipoutX'
	}
}).show()

2.5 效果预览

保存报表，点击填报预览，效果如下图所示：

注：不支持移动端。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\倒计时消息提示框.cpt

点击下载模板：

倒计时消息提示框.cpt

点击下载JavaScript 和CSS 文件：

animate.css

notice.js

noticejs.css

4.1 frm 报表实现方法

frm 报表需要在 body 初始化事件中写 JavaScript 引入，其他操作同上面 cpt 报表的实现方法，如下图所示：

JavaScript 代码如下：

function dynamicLoadCss(url) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;
    head.appendChild(link);
}
 
function dynamicLoadJs(url) {
    var oHead = document.getElementsByTagName('head').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = url;
    oHead.appendChild(oScript);
}
 
dynamicLoadCss("/webroot/help/css/noticejs.css");
dynamicLoadCss("/webroot/help/css/animate.css");
//引入css
dynamicLoadJs("/webroot/help/css/notice.js");
//引入js

4.2 Notice.js 参数说明

4.3 动画效果

open	close	效果图
animated bounceInRight	animated bounceOutLeft
animated bounceIn	animated bounceOut
animated fadeIn	animated fadeOut
animated lightSpeedIn	animated lightSpeedOut
animated zoomIn	animated zoomOut
animated flipInX	animated flipOutX
animated rollIn	animated rollOut