JS实现LED数字样式

1. 概述
1.1 预期效果

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

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

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

1.2 实现思路

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

注：本功能不支持导出。

2. 示例
2.1 数据准备

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

2.2 表格设计

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

2.3 添加 JS 事件
2.3.1 生成 LED 样式

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

JS 代码如下：

1. /*
   
2. * selector：需要生成led样式容器的选择器；例  #testId
   
3. * color：led灯的颜色；例 red
   
4. * width：led灯的宽度；例 100
   
5. * height：led灯的高度；例 200
   
6. * values：led需要显示的值；例 -123.4
   
7. * lineWidth：led灯的线宽；例 5
   
8. * italics：倾斜角度；例 10
   
9. */
   
10. 
    
11. 
    
12. window.ledSetValue= function(selector,color,width,height,values,lineWidth,italics,opacity_){
    
13.                 color = color == null || color == ""?"orange":color;
    
14.                 width = width == null || width == ""?50:width;
    
15.                 height = height == null || height == ""?100:height;
    
16.                 values = values == null || values == ""?0:values;
    
17.                 lineWidth = lineWidth == null || lineWidth == ""?5:lineWidth;
    
18.                 italics = italics == null || italics == ""?0:italics;
    
19.          
    
20. 
    
21.                 var valuesArr = values.toString().split("");
    
22.                 var commaCount = values.toString().match(/\./g) == null?0:values.toString().match(/\./g).length;
    
23.                 var divWidth = (valuesArr.length - commaCount) * width + (valuesArr.length - commaCount-1)*lineWidth*0.5 + (width*0.5 - 0.5*lineWidth)*commaCount;
    
24.                 //生成一个随机数，该数用来作为canvas画板的id
    
25.                 var random = 'canvas' + new Date().getTime().toString() + (Math.random() * 10000000).toString().substring(0, 6).replace(/\./g, '');
    
26.                 var html = '<canvas id="'+random +'" width="'+divWidth+'" height="'+height+'" style="transform:skewX('+italics+'deg)">21</canvas>';
    
27. 
    
28.                 document.querySelector(selector).innerHTML = html;
    
29.                 var c=document.querySelector("#"+random);
    
30. 
    
31.                 var ctx=c.getContext("2d");
    
32.                 ctx.lineWidth=lineWidth;
    
33.                 ctx.strokeStyle = color;
    
34. 
    
35.                 var distanceLeft = 0;
    
36.                 for(var i=0;i<valuesArr.length;i++){
    
37.                         var styleLed = setNumber(valuesArr);
    
38. 
    
39.                         if(valuesArr != "."){
    
40.                                 ctx.lineCap="round";
    
41.                                 //七段数码管第一段（关于七段数码管详情请百度）
    
42.                                 ctx.beginPath();
    
43.                                 ctx.globalAlpha = styleLed[0];
    
44.                                 ctx.moveTo(1.5*lineWidth + distanceLeft,0.5*lineWidth);
    
45.                                 ctx.lineTo(width - 1.5*lineWidth + distanceLeft,0.5*lineWidth);
    
46.                                 ctx.stroke();
    
47.                                 //七段数码管第二段
    
48.                                 ctx.beginPath();
    
49.                                 ctx.globalAlpha = styleLed[1];
    
50.                                 ctx.moveTo(width - 0.5*lineWidth + distanceLeft,1.5*lineWidth);
    
51.                                 ctx.lineTo(width - 0.5*lineWidth + distanceLeft,height/2 - lineWidth);
    
52.                                 ctx.stroke();
    
53.                                 //七段数码管第三段
    
54.                                 ctx.beginPath();
    
55.                                 ctx.globalAlpha = styleLed[2];
    
56.                                 ctx.moveTo(width - 0.5*lineWidth + distanceLeft,height/2 + lineWidth);
    
57.                                 ctx.lineTo(width - 0.5*lineWidth + distanceLeft,height  - 1.5*lineWidth);
    
58.                                 ctx.stroke();
    
59.                                 //七段数码管第四段
    
60.                                 ctx.beginPath();
    
61.                                 ctx.globalAlpha = styleLed[3];
    
62.                                 ctx.moveTo(1.5*lineWidth + distanceLeft,height  - 0.5*lineWidth);
    
63.                                 ctx.lineTo(width - 1.5*lineWidth + distanceLeft,height  - 0.5*lineWidth);
    
64.                                 ctx.stroke();
    
65.                                 //七段数码管第五段
    
66.                                 ctx.beginPath();
    
67.                                 ctx.globalAlpha = styleLed[4];
    
68.                                 ctx.moveTo(0.5*lineWidth + distanceLeft,height/2 + lineWidth);
    
69.                                 ctx.lineTo(0.5*lineWidth + distanceLeft,height  - 1.5*lineWidth);
    
70.                                 ctx.stroke();
    
71.                                 //七段数码管第六段
    
72.                                 ctx.beginPath();
    
73.                                 ctx.globalAlpha = styleLed[5];
    
74.                                 ctx.moveTo(0.5*lineWidth + distanceLeft,1.5*lineWidth);
    
75.                                 ctx.lineTo(0.5*lineWidth + distanceLeft,height/2 - lineWidth);
    
76.                                 ctx.stroke();
    
77.                                 //七段数码管第七段
    
78.                                 ctx.beginPath();
    
79.                                 ctx.globalAlpha = styleLed[6];
    
80.                                 ctx.moveTo(1.5*lineWidth + distanceLeft,height/2);
    
81.                                 ctx.lineTo(width - 1.5*lineWidth + distanceLeft,height/2);
    
82.                                 ctx.stroke();
    
83. 
    
84.                                 distanceLeft += width + 0.5*lineWidth;
    
85.                         }else{
    
86.                                 ctx.beginPath();
    
87.                                 ctx.lineCap="square";
    
88.                                 ctx.globalAlpha = 1;
    
89.                                 ctx.moveTo(0.25*width - 0.5*lineWidth + distanceLeft,height - lineWidth);
    
90.                                 ctx.lineTo(0.25*width - 0.5*lineWidth  + distanceLeft,height - lineWidth);
    
91.                                 ctx.stroke();
    
92.                                 distanceLeft += 0.5*width - 0.5*lineWidth;
    
93.                         }
    
94.                 }
    
95.                 /*
    
96.                  *设置单个数字的值的方法
    
97.                  *number：传入单个数字的值
    
98.                  *opacity：设置led不亮部分的透明度  
    
99.                  */
    
100.                 function setNumber(number,opacity=opacity_ ){
     
101.                         var styleLed = [];
     
102.                         switch(number.toString()) {
     
103.                                 case '0':
     
104.                                         styleLed = [1,1,1,1,1,1,opacity];
     
105.                                         break;
     
106.                                 case '1':
     
107.                                         styleLed = [opacity,1,1,opacity,opacity,opacity,opacity];
     
108.                                         break;
     
109.                                 case '2':
     
110.                                         styleLed = [1,1,opacity,1,1,opacity,1];
     
111.                                         break;
     
112.                                 case '3':
     
113.                                         styleLed = [1,1,1,1,opacity,opacity,1];
     
114.                                         break;
     
115.                                 case '4':
     
116.                                         styleLed = [opacity,1,1,opacity,opacity,1,1];
     
117.                                         break;
     
118.                                 case '5':
     
119.                                         styleLed = [1,opacity,1,1,opacity,1,1];
     
120.                                         break;
     
121.                                 case '6':
     
122.                                         styleLed = [1,opacity,1,1,1,1,1];
     
123.                                         break;
     
124.                                 case '7':
     
125.                                         styleLed = [1,1,1,opacity,opacity,opacity,opacity];
     
126.                                         break;
     
127.                                 case '8':
     
128.                                         styleLed = [1,1,1,1,1,1,1];
     
129.                                         break;
     
130.                                 case '9':
     
131.                                         styleLed = [1,1,1,1,opacity,1,1];
     
132.                                         break;
     
133.                                 case '-':
     
134.                                         styleLed = [opacity,opacity,opacity,opacity,opacity,opacity,1];
     
135.                                         break;
     
136.                                 default:
     
137.                                         styleLed = [opacity,opacity,opacity,opacity,opacity,opacity,opacity];
     
138.                                         break;
     
139.                         }
     
140.                         return styleLed;
     
141.                 }
     
142. 
     
143.         }

复制代码

2.3.2 单个固定单元格

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

JS代码如下：

1. 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 显示位置所在单元格的元素，获取方法如下图所示：

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

JS 代码如下：

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

复制代码

2.3.3 扩展单元格

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

JS 代码如下：

1. var x_ = 'C'; //设置具体哪列展示成LED样式 ，该列的值必须是数字
   
2. var num_ = 16; //具体从哪一行开始展示
   
3. 
   
4. $('td[id^="' + x_ + '"]').each(function() {
   
5.         var num = $(this).attr('id').substring(1, $(this).attr('id').indexOf('-'));
   
6. 
   
7.         if (parseInt(num) < num_) {
   
8.                 return true;
   
9.         }
   
10. 
    
11.         var id = $(this).attr('id').substring(0, $(this).attr('id').indexOf('-'));
    
12.         var qingxiedu = contentPane.curLGP.getCellValue(id);
    
13.         if (qingxiedu.length == 0 || typeof qingxiedu == 'undefined') {
    
14.                 qingxiedu = '0';
    
15.         }
    
16. 
    
17.         window.ledSetValue("#" + $(this).attr('id'), 'red', 20, 30, qingxiedu, 3, 1, 0.06);
    
18. })

复制代码

2.4 效果预览

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

注：不支持移动端。

3. 模板下载

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

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

思路很好 样式难看额

66666666

这两处的valuesArr应该改为valuesArr[i]