1.1 問題描述

在製作決策報表時，需要製作一個普通的時間模組，通常我們可以使用 數字時鐘元件 ，但是插件也有一定的限制，例如時間不能取消秒鐘的顯示，位置不能交換等。

那除了插件，還有什麼方法可以實現決策報表中顯示實時時間呢？

1.2 實現思路

1）給 body 新增一個初始化後事件，使用 JavaScript 程式碼直接實現實時時間效果。

2）可以透過 now() 函式配合報表重新整理實現，但頻繁重新整理可能會對報表系統存在潛在風險。

透過給 body 新增初始化後事件實現。

2.1 新增事件

建立決策報表，點選 body ，點選「事件」，新增「初始化後」事件。如下圖所示：

輸入 JavaScript 程式碼如下:

$("body").prepend('<canvas id="canvas" style="position:absolute;z-index:10;right: 0.3%;top:0.5%;" width="240" height="25"></canvas>');
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = 'white';
        function renderTime() {
               var date=new Date();  
               var year=date.getFullYear(); //獲取當前年份 
               var mon=date.getMonth()+1; //獲取當前月份 
               var da=date.getDate(); //獲取當前日   
               if(mon < 10) {
                 mon = "0" + mon;
               }
              if(da < 10) {
                 da = "0" + da;
               }          
               var day=date.getDay(); //獲取當前星期幾 
               if(day== "0") {
                 day = "日";
               } else if(day == "1"){
                 day = "一";
               } else if(day == "2"){
                 day = "二";
               } else if(day == "3"){
                 day = "三";
               } else if(day == "4"){
                 day = "四";
               } else if(day == "5"){
                 day = "五";
               } else if(day == "6"){
                 day = "六";
               } else {
                 day = "NO";
               }
               var hh=date.getHours(); //獲取小時   
               var mm=date.getMinutes(); //獲取分鐘   
               var ss=date.getSeconds(); //獲取秒  
               if(hh < 10) {
                 hh = "0" + hh;
               }
               if(mm < 10) {
                 mm = "0" + mm;
               }
               if(ss < 10) {
                 ss = "0" + ss;
               }
               if(ss !=0){
                clear();//清空一下畫布
               }
              var d=year + '-' + mon + '-' + da + ' ' + '星期'+ day + '  ' + hh + ':' + mm + ':' + ss;
                ctx.globalAlpha=0.9;
               ctx.font = "bold 12pt Asia";
               ctx.fillStyle = 'red';//字體色
               ctx.textAlign="center";
               ctx.fillText(d, 120, 20);         
        }
        setInterval(renderTime, 40);
        function clear(){
            ctx.clearRect(0,0, 240, 40);
        }

2.2 效果預覽

儲存範本，點選「PC端預覽」，效果如下圖所示：

注：不支援行動端。

 透過 now() 函式配合報表重新整理實現。

3.1 準備範本

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

3.2 設定重新整理

設定重新整理，可以透過安裝 決策報表內報表塊重新整理插件 實現，也可以透過新增 JS 實現。以下兩種方法選擇一種即可。

1）方法一：若安裝插件，設定定期重新整理報表塊，重新整理間隔為 1 秒，如下圖所示：

2）方法二：若為新增 JS，選中報表塊，在「元件設定>事件」處，為報表塊新增一個「初始化」事件，使報表塊定時重新整理。如下圖所示：

JavaScript 程式碼如下：

setInterval(function() { 
     _g().getWidgetByName('report0').gotoPage(1,"{}","lazy");
}, 1000);

注1：此 JS 方法重新整理報表時會出現載入圖示。

注2：若範本內容非常多，範本計算量大，請切勿修改"lazy"為true，會導致工程計算量激增。

3.3 預覽效果

3.3.1 PC 端

儲存範本，選擇「PC端預覽」，PC 端實現效果下圖所示：

3.3.2 行動端

App 端及 HTML5 端均支援，效果如下圖所示：

注：決策報表內報表塊重新整理插件不支援行動端。

點選下載範本：

JS實現決策報表顯示實時時間.frm

JS實現決策報表實時時間範例二.frm