JS实现LED数字样式

  • 文档创建者:qq1320929786
  • 编辑次数:4次
  • 最近更新:Leo.Tsai 于 2020-05-14
  • 1. 概述

    1.1 预期效果

    本文将介绍如何实现 LED 数字样式,效果如下图所示:

    单个固定单元格 LED 数字样式:先生成默认 LED 数字样式,用户填报 LED 属性值,点击按钮后,可以自定义 LED 数字效果。

    单个单元格.GIF

    扩展单元格 LED 数字样式:LED 数字样式可以跟随单元格扩展。

    扩展单元格.png

    1.2 实现思路

    通过 JS 加载起始和结束事件实现 LED 样式,通过按钮点击事件获取单元格填报值改变数字效果。

    注:本功能不支持导出。

    2. 示例

    2.1 数据准备

    新建普通报表,新建数据集 ds1,数据库查询语句为:SELECT * FROM F财务指标分析

    1589440134184723.png

    2.2 表格设计

    如下图设计表格,需要注意的是 C2~C9 和 B10 单元格需要添加控件。

    Snag_153595a.png

    2.3 添加 JS 事件

    2.3.1 生成 LED 样式

    设计器菜单栏选择模板>模板Web属性,如下图步骤添加一个加载起始事件。

    Snag_15fda86.png

    JS 代码如下:

    /*
     * selector:需要生成led样式容器的选择器;例  #testId
     * color:led灯的颜色;例 red
     * width:led灯的宽度;例 100
     * height:led灯的高度;例 200
     * values:led需要显示的值;例 -123.4
     * lineWidth:led灯的线宽;例 5
     * italics:倾斜角度;例 10
     */
     

    window.ledSetValue= function(selector,color,width,height,values,lineWidth,italics,opacity_){
    color = color == null || color == ""?"orange":color;
    width = width == null || width == ""?50:width;
    height = height == null || height == ""?100:height;
    values = values == null || values == ""?0:values;
    lineWidth = lineWidth == null || lineWidth == ""?5:lineWidth;
    italics = italics == null || italics == ""?0:italics;
     

    var valuesArr = values.toString().split("");
    var commaCount = values.toString().match(/\./g) == null?0:values.toString().match(/\./g).length;
    var divWidth = (valuesArr.length - commaCount) * width + (valuesArr.length - commaCount-1)*lineWidth*0.5 + (width*0.5 - 0.5*lineWidth)*commaCount;
    //生成一个随机数,该数用来作为canvas画板的id
    var random = 'canvas' + new Date().getTime().toString() + (Math.random() * 10000000).toString().substring(0, 6).replace(/\./g, '');
    var html = '<canvas id="'+random +'" width="'+divWidth+'" height="'+height+'" style="transform:skewX('+italics+'deg)">21</canvas>';

    document.querySelector(selector).innerHTML = html;
    var c=document.querySelector("#"+random);

    var ctx=c.getContext("2d");
    ctx.lineWidth=lineWidth;
    ctx.strokeStyle = color;

    var distanceLeft = 0;
    for(var i=0;i<valuesArr.length;i++){
    var styleLed = setNumber(valuesArr[i]);

    if(valuesArr[i] != "."){
    ctx.lineCap="round";
    //七段数码管第一段(关于七段数码管详情请百度)
    ctx.beginPath();
    ctx.globalAlpha = styleLed[0];
    ctx.moveTo(1.5*lineWidth + distanceLeft,0.5*lineWidth);
    ctx.lineTo(width - 1.5*lineWidth + distanceLeft,0.5*lineWidth);
    ctx.stroke();
    //七段数码管第二段
    ctx.beginPath();
    ctx.globalAlpha = styleLed[1];
    ctx.moveTo(width - 0.5*lineWidth + distanceLeft,1.5*lineWidth);
    ctx.lineTo(width - 0.5*lineWidth + distanceLeft,height/2 - lineWidth);
    ctx.stroke();
    //七段数码管第三段
    ctx.beginPath();
    ctx.globalAlpha = styleLed[2];
    ctx.moveTo(width - 0.5*lineWidth + distanceLeft,height/2 + lineWidth);
    ctx.lineTo(width - 0.5*lineWidth + distanceLeft,height  - 1.5*lineWidth);
    ctx.stroke();
    //七段数码管第四段
    ctx.beginPath();
    ctx.globalAlpha = styleLed[3];
    ctx.moveTo(1.5*lineWidth + distanceLeft,height  - 0.5*lineWidth);
    ctx.lineTo(width - 1.5*lineWidth + distanceLeft,height  - 0.5*lineWidth);
    ctx.stroke();
    //七段数码管第五段
    ctx.beginPath();
    ctx.globalAlpha = styleLed[4];
    ctx.moveTo(0.5*lineWidth + distanceLeft,height/2 + lineWidth);
    ctx.lineTo(0.5*lineWidth + distanceLeft,height  - 1.5*lineWidth);
    ctx.stroke();
    //七段数码管第六段
    ctx.beginPath();
    ctx.globalAlpha = styleLed[5];
    ctx.moveTo(0.5*lineWidth + distanceLeft,1.5*lineWidth);
    ctx.lineTo(0.5*lineWidth + distanceLeft,height/2 - lineWidth);
    ctx.stroke();
    //七段数码管第七段
    ctx.beginPath();
    ctx.globalAlpha = styleLed[6];
    ctx.moveTo(1.5*lineWidth + distanceLeft,height/2);
    ctx.lineTo(width - 1.5*lineWidth + distanceLeft,height/2);
    ctx.stroke();

    distanceLeft += width + 0.5*lineWidth;
    }else{
    ctx.beginPath();
    ctx.lineCap="square";
    ctx.globalAlpha = 1;
    ctx.moveTo(0.25*width - 0.5*lineWidth + distanceLeft,height - lineWidth);
    ctx.lineTo(0.25*width - 0.5*lineWidth  + distanceLeft,height - lineWidth);
    ctx.stroke();
    distanceLeft += 0.5*width - 0.5*lineWidth;
    }
    }
    /*
     *设置单个数字的值的方法
     *number:传入单个数字的值
     *opacity:设置led不亮部分的透明度  
     */
    function setNumber(number,opacity=opacity_ ){
    var styleLed = [];
    switch(number.toString()) {
    case '0':
    styleLed = [1,1,1,1,1,1,opacity];
    break;
    case '1':
    styleLed = [opacity,1,1,opacity,opacity,opacity,opacity];
    break;
    case '2':
    styleLed = [1,1,opacity,1,1,opacity,1];
    break;
    case '3':
    styleLed = [1,1,1,1,opacity,opacity,1];
    break;
    case '4':
    styleLed = [opacity,1,1,opacity,opacity,1,1];
    break;
    case '5':
    styleLed = [1,opacity,1,1,opacity,1,1];
    break;
    case '6':
    styleLed = [1,opacity,1,1,1,1,1];
    break;
    case '7':
    styleLed = [1,1,1,opacity,opacity,opacity,opacity];
    break;
    case '8':
    styleLed = [1,1,1,1,1,1,1];
    break;
    case '9':
    styleLed = [1,1,1,1,opacity,1,1];
    break;
    case '-':
    styleLed = [opacity,opacity,opacity,opacity,opacity,opacity,1];
    break;
    default:
    styleLed = [opacity,opacity,opacity,opacity,opacity,opacity,opacity];
    break;
    }
    return styleLed;
    }

    }

    2.3.2 单个固定单元格

    1)设计器菜单栏选择模板>模板Web属性,如下图步骤添加一个加载结束事件,调用上面生成 LED 样式的代码,作用对象为单个固定单元格,生成默认 LED 样式。

    Snag_18c31c8.png

    JS代码如下:

    window.ledSetValue("#B11-0-0" ,'red',20,30,-0.032,3,1,0.06);

    注:在设置冻结和重复列的情况下,td 标签的 id 属性后面几个字符串会一直变动。这个时候元素选择需要改动,把 "#D11-0-0" 改成 "td[id^=D11]" 

    其中#B11-0-0是 LED 显示位置所在单元格的元素,获取方法如下图所示:

    7C78A154-4D91-4224-805B-F8C62358EDD5.GIF

    2)如下图步骤给 B10 单元格的按钮添加点击事件,用于获取填报值,进而自定义 LED 样式。

    Snag_1947ca5.png

    JS 代码如下:

    	 var cell = contentPane.curLGP.getTDCell(0,0);
    contentPane.curLGP.selectTDCell(cell);
    var x_='C'
    var yanse=contentPane.curLGP.getCellValue(x_+(a-8))
         var kuandu=contentPane.curLGP.getCellValue(x_+(a-7))
         var gaodu=contentPane.curLGP.getCellValue(x_+(a-6))
         var qingxiedu=contentPane.curLGP.getCellValue(x_+(a-5))
         var toumingdu=contentPane.curLGP.getCellValue(x_+(a-4))
         var cuxi=contentPane.curLGP.getCellValue(x_+(a-3))
         var zhi=contentPane.curLGP.getCellValue(x_+(a-2))
         var danyuange=contentPane.curLGP.getCellValue(x_+(a-1))
     
      window.ledSetValue("#"+danyuange+"-0-0",yanse,kuandu,gaodu,zhi,cuxi,qingxiedu,toumingdu);

    2.3.3 扩展单元格

    设计器菜单栏选择模板>模板Web属性,如下图步骤添加一个加载结束事件,调用上面生成 LED 样式的代码,作用对象为扩展单元格,生成指定的 LED 样式。

    Snag_1a0290c.png

    JS 代码如下:

    var x_='C' //设置具体哪列展示成LED样式 ,该列的值必须是数字
    var num_=16 //具体从哪一行开始展示
     //setTimeout(function(){
    $('td[id^="'+x_+'"]').each(function(){
    var num=$(this).attr('id').substring(1,$(this).attr('id').indexOf('-'))

     
             if( parseInt(num)<num_){return true;}

    var id= $(this).attr('id').substring(0,$(this).attr('id').indexOf('-'))
    var qingxiedu=contentPane.curLGP.getCellValue(id)
     if(qingxiedu.length==0||typeof qingxiedu=='undefined'){
      qingxiedu='0'
      }

     window.ledSetValue("#"+$(this).attr('id'),'red',20,30,qingxiedu,3,1,0.06);
     } )
     
     // },9)

    2.4 效果预览

    保存报表,点击填报预览,效果如 1.1预期效果 所示。

    注:不支持移动端。

    3. 模板下载

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\LED式数字实现模板.cpt

    点击下载模板:LED式数字实现模板.cpt

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!