1.1 应用场景

经常会有需求按照时间段来查询数据，但有时无法做出时间段的限制而让服务器承受巨大的压力，这时就可以用这个方案来解决。

1.2 功能介绍

PC 端报表需要查看某个时间段的数据，但是不能超过指定的天数，如果超过天数或者结束时间大于开始时间则给予用户友情提示。

2.1 数据准备

新建数据集 ds1，输入数据查询语句：

SELECT * FROM 订单 where 1=1 

${if(len(start_time)=0,""," and 订购日期>='"+start_time+"'")}

${if(len(end_time)=0,""," and 订购日期<='"+end_time+"'")}

2.2 报表设计

1）如下图设计报表样式，订购日期格式改为日期型，应付金额格式改为数字保留小数点后两位。

2）进入参数面板编辑界面，将参数 start_time 和 end_time 添加到参数面板，绑定日期控件。

3）设置日期区间开始日期的属性，选中 start_time 参数对应的日期控件，属性设置如下图所示：

控件值插入公式：monthdelta($end_time,-1)，表示结束日期显示值后推一个月最作为开始日期的默认显示值。

结束日期插入公式：$end_time，表示选取日期区间的开始日期时不能超过日期区间的结束日期。

4）设置日期区间结束日期的属性，选中 endtime 参数对应的日期控件，属性设置如下图所示：

控件值插入指定的日期：2010/04/16，表示以该日期作为结束日期的默认显示值。

结束日期插入公式：TODAY()，表示选取结束日期时不能超过今天。

5）选中参数面板的查询按钮，添加 JS 点击事件，代码如下：

var start = this.options.form.getWidgetByName("start_time").getValue();  //获取start_time控件的值
var end = this.options.form.getWidgetByName("end_time").getValue(); //获取end_time控件的值 


    window.alert = alert;
	//定义新的alert弹出框样式
    function alert(data, callback) { //回调函数
        var alert_bg = document.createElement('div');
        alert_box = document.createElement('div'),
            alert_text = document.createElement('div'),
            alert_btn = document.createElement('div'),
            textNode = document.createTextNode(data ? data : ''),
            btnText = document.createTextNode('确 定');

        // 控制样式
        css(alert_bg, {
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'right': '0',
            'bottom': '0',
            'background-color': 'rgba(0, 0, 0, 0.1)',
            'z-index': '999999999'
        });

        css(alert_box, {
            'width': '270px',
            'max-width': '90%',
            'font-size': '16px',
            'text-align': 'center',
            'background-color': '#fff',
            'border-radius': '15px',
            'position': 'absolute',
            'top': '50%',
            'left': '50%',
            'transform': 'translate(-50%, -50%)'
        });

        css(alert_text, {
            'padding': '10px 15px',
            'border-bottom': '1px solid #ddd'
        });

        css(alert_btn, {
            'padding': '10px 0',
            'color': '#007aff',
            'font-weight': '600',
            'cursor': 'pointer'
        });

        // 内部结构套入
        alert_text.appendChild(textNode);
        alert_btn.appendChild(btnText);
        alert_box.appendChild(alert_text);
        alert_box.appendChild(alert_btn);
        alert_bg.appendChild(alert_box);

        // 整体显示到页面内
        document.getElementsByTagName('body')[0].appendChild(alert_bg);

        // 确定绑定点击事件删除标签
        alert_btn.onclick = function() {
            alert_bg.parentNode.removeChild(alert_bg);
            if (typeof callback === 'function') {
                callback(); //回调
            }
        }
    }
    //定义alert函数中修饰弹出框的CSS函数
    function css(targetObj, cssObj) {
        var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
        for (var i in cssObj) {
            str += i + ':' + cssObj[i] + ';';
        }
        targetObj.style.cssText = str;
    }

if( start == "" || start==null){  //判断开始日期是否为空
  alert("开始时间不能为空!");   //开始日期参数为空时提示
  return false;  
};  
if(end == "" || end==null){  //判断结束日期是否为空
  alert("结束时间不能为空!");   //结束日期参数为空时提示
  return false;  
};  
if( start > end){   //判断开始日期是否大于结束日期
  alert("开始时间不能大于结束时间!");   //开始日期大于结束日期时提示  
  return false;  
}
var startdate = new Date(start);   //将开始日期转化为Date型
var enddate = new Date(end);    //将结束日期转化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24);   //将两个日期相减得出的毫秒数转化为天数
if(subdate >= 32){    //判断结束日期是否超过开始日期后一年
alert("请输入32天以内的时间!");    //结束日期超过开始日期后的十五天时提示
return false;
}

注：如果您的报表场景中时间参数不是 start_time 和 end_time，那么需要修改代码中的相应参数。

2.3 效果预览

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

注：不支持移动端 App 实现该功能，H5 端实现该功能参见文档：移动端日期筛选控制。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\FreeReport\日期控件查询天数控制.cpt

点击下载模板：日期控件查询天数控制.cpt