JS顯示即時或實時時間

1.1 問題描述

如果想在報表裏實時顯示時間，該如何實現呢？如下圖所示：

1.2 實現思路

獲取當前的時間，一秒刷新一次報表，将當前時間顯示在某個單元格中。

普通報表中通過添加 JS 實現 ，JS 代碼中每秒獲取一次時間。

2.1 準備模板

新建模板，調整單元格高寬布局，準備讓時間實時顯示在 C4 單元格中，爲效果明顯，給 C4 單元格添加邊框，如下圖所示：

2.2 添加事件

點擊「模板>模板 Web 屬性>填報頁面設置」，選擇「爲該模板單獨設置」，添加一個「加載結束」事件，如下圖所示：

JavaScript 代碼如下：

注：JS 代碼中，設置實時事件顯示在 C4 單元格，使用時可根據實際情況修改，此 JS 的優點是每秒只刷新指定的單元格，頁面其他内容不會受到影響。

//每秒執行一次
setInterval(function() {
//将當前時間賦值給M
    var M = FR.remoteEvaluate('FORMAT(now(),"yyyy-MM-dd HH:mm:ss")');
    //給C4單元格賦值M
    contentPane.setCellValue("C4", null, M);
}, 1000);

或通過另一段 JS代碼實現，如下圖所示：

JavaScript 代碼如下：

注：JS 代碼中，設置實時事件顯示在 A1 單元格，使用時可根據實際情況修改。

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 預覽效果

保存模板，點擊「填報預覽」，爲效果明顯，單元格添加了邊框，效果如下圖所示：

注：不支持移動端

使用第一段 JS 效果：

使用第二段 JS 效果：

決策報表中可以使用 數字時鍾控件插件 ，也可以通過 now() 函數配合報表刷新實現，推薦使用數字時鍾插件，頻繁刷新可能會對報表系統存在潛在風險。

3.1 準備模板

新建決策報表，在決策報表 body 中拖入一個報表塊，在報表塊 A1單元格中輸入公式：now()，如下圖所示：

3.2 設置刷新

設置刷新，可以通過定時刷新插件實現，也可以通過添加 JS 實現。

若爲定時刷新插件，參考 決策報表内報表塊刷新插件 安裝插件後，設置定時刷新報表塊，刷新間隔爲 1 秒，如下圖所示：

若爲添加 JS，選中報表塊，在「控件設置>事件」處，爲報表塊添加一個「初始化」事件，如下圖所示：

JavaScript 代碼如下：

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

注：此 JS 方法報表刷新時會出現加載圖标。

3.3 預覽效果

保存模板，選擇「PC端預覽」，PC 端實現效果下圖所示：

移動端及 HTML 效果如下圖所示：

普通報表第一段 JS 示例

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\30-JS顯示即時或實時時間示例一.cpt

點擊下載模板：30-JS顯示即時或實時時間示例一.cpt

普通報表第二段 JS 示例

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\30-JS顯示即時或實時時間示例二.cpt

點擊下載模板：30-JS顯示即時或實時時間示例二.cpt

決策報表 JS 示例

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\30-JS顯示即時或實時時間示例三.cpt

點擊下載模板：30-JS顯示即時或實時時間示例三.frm