JS显示即时或实时时间

  • 文档创建者:静听禅鸣
  • 编辑次数:24次
  • 最近更新:Kevin-s 于 2019-12-09
  • 1. 概述

    1.1 问题描述

    在论坛上经常会有人提出来,想在报表里显示即时的时间,由于在报表里使用公式,是只能显示静止的当前时间,而不是即时的时间,这里可以通过 JS 来实现即时的时间显示。

    222

    1.2 实现思路

    获取当前的时间,一秒刷新一次报表,将当前时间显示在某个单元格里。

    注:也可以使用 数字时钟控件插件 来显示即时时间。

    2. 示例

    2.1 cpt 示例一

    获取当前的时间,一秒刷新一次 单元格,当前时间显示在 C4 单元格里,如下图:

    222

    点击模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,在事件设置里面添加一个加载结束事件,如下图:

    image.png

    JS 代码如下:

    //每秒执行一次
    setInterval(function() {
    //将当前时间赋值给M
        var M = FR.remoteEvaluate('FORMAT(now(),"yyyy-MM-dd HH:mm:ss")');
        //给C4单元格赋值M
        contentPane.setCellValue("C4", null, M);
    }, 1000);

    保存模板后使用填报预览。 

    2.2  cpt 示例二

    同上,点击模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,在下面的事件设置里面添加一个加载结束事件,如下图:

    image.png

    JS 代码如下:

    function Appendzero(obj)   
        {  
            if(obj<10) return "0" +""+ obj; //判断obj是否小于10,如果小于10,则在数字前面加上"0"补位  
            else return obj;   
        }    
    FR.CLOCK = function(cell)  
    {   
        var cl = $('[id^='+cell+']');  
    //因为后面调用使用了 FR.CLOCK('A1'),即得到A1的句柄  
        setInterval(function(){   
            var date=new Date();//获取当时日期  
            var format=date.getFullYear()+"-"+Appendzero(date.getMonth()+1)+"-"+Appendzero(date.getDate())+" "+Appendzero(date.getHours())+":"+Appendzero(date.getMinutes())+":"+Appendzero(date.getSeconds());//format 是一个数符串,把年-月-日 小时:分钟:秒组合到一起了,调用了Appendzero()函数,进行补位操作  
            cl.html(format);   
    //C1,传来的单元格,使单元格里显示日期  
        },1000);  
    //1000毫秒=1秒,即1秒钟刷新一次   
    } ;   
    FR.CLOCK('A1');  
    //这里是关键,A1是传的单元格,传给CLOCK方法


    2.3 frm 示例三

    上面讲解的是 cpt 里实现显示实时时间,那么如果我们 frm 里也想显示实时时间呢?

    有两种方案:

    方法一:使用决策报表内报表块刷新插件,在报表块的单元格 A1 里写公式=now()

    image.png

    然后使用定期刷新每秒刷新,或者监控刷新监控 A1 单元格每秒刷新,即可显示实时时间。

    image.png

    插件使用详细点击 决策报表内报表块刷新插件

    方法二:在报表块的单元格A1里写公式=now()

    image.png

    然后使用 JS,每秒刷新当前报表块。

    image.png

    详细 JS 如下:

    var form = this.options.form;
    setInterval(function() { 
         form.getWidgetByName('report0').gotoPage(1,"{}",true);
    }, 1000);

    报表块局部刷新详细点击 JS 实现决策报表内报表块局部刷新/翻页


    2.4 预览效果

    保存模板,选择填报预览,PC 端实现效果下图所示:

    1)示例一

    222

    注:此方法的优点是每秒只刷新指定的单元格,页面其他内容不会受到影响。

    2)示例二

    222

    3)示例三

    8888.gif

    注:示例三 JS 预览会出现加载图标,其余两者一致image.png

    保存模板,选择填报预览,移动端实现效果下图所示:

    注:cpt 两种 JS 都不支持移动端使用,frm 第二种方法支持移动端 App 和 H5 预览。

    App 预览效果:

    222

    H5 预览效果:

    3. 模板下载

    1)示例一

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\30-JS显示即时或实时时间示例一.cpt

    点击下载模板:30-JS显示即时或实时时间示例一.cpt

    2)示例二

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\30-JS显示即时或实时时间示例二.cpt

    点击下载模板:30-JS显示即时或实时时间示例二.cpt

    3)示例三

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\30-JS显示即时或实时时间示例三.cpt

    点击下载模板:30-JS显示即时或实时时间示例三.frm

    关键字:显示现在时间


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览