历史版本4 :JS实现决策报表显示实时时间 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 预期效果
在制作决策报表时,需要制作一个普通的时间模块,用传统FR的方法耗时耗力,性能也不怎么好,可通过 JS 实现该时间模块,提高性能,减少样式导致的问题。
1.2 实现思路
使用 JS 技术直接实现实时时间效果。
2. 示例编辑
2.1 准备模板
打开一张 .frm 结尾的报表,例如:reportlets\demo\analytics\marketing\销售额市场分析.frm,如下图所示:
2.2 添加事件
点击body,为body添加「初始化后」事件。如下图所示:
JavaScript 代码如下:
$("body").prepend('<canvas id="canvas" style="position:absolute;z-index:10;right: 25%;top: 2%;" width="200" height="20"></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;
}
var d=year + '-' + mon + '-' + da + ' ' + '星期'+ day + ' ' + hh + ':' + mm + ':' + ss;
ctx.fillStyle = 'rgb(20, 99, 140)';
//ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
ctx.fillRect(0, 0, 200, 20);
//Date
ctx.font = "bold 9pt Asia";
ctx.fillStyle = 'white';
ctx.fillText(d, 13, 10);
}
setInterval(renderTime, 40);
2.3 效果预览
保存模板,点击「分页预览」,效果如下图所示:
注:不支持移动端
3. 模板下载编辑
点击可下载模板:销售额市场分析.frm