集团公司通用监控报表的制作思路

xiaoerp

报表发上去以后很多朋友问怎么做的，其实报表、数据库我已经传上去了，大家可以直接看报表定义。
这里我主要是想描述一下制作的思路
背景
这张报表其实并没有在我们现在的系统中，而是用户在刚上线时提了这个需求，他们希望能够做这样的交互，能有像word、execl那样增加批注，但当时没有开发出来。自从得知论坛中要举办比赛我就开始琢磨应该做个什么样的报表去参赛，要有亮点，最终我决定试一下这个功能。所以这几天没事我就看cognos的JavaScript脚本，从这里找突破口。因为我相信只要是HTML展现，就没有JavaScript干不成的事。
总体思路
当鼠标在列表的某个单元格上点击右键时，通过JavaScript的event.srcElement能够获取点击所在的单元格或者单元格内的文本，这是通过parentNode能够获取该单元格的上级对象也就是行，有了行就可以通过JavaScript获取单位ID，根据单位ID上报时间来更新生成报表展现，批注等iframe的URL。
制作步骤
首先看一下总体布局


第一部分过滤条件和图例说明我不做过多介绍了

第2部分两线图展示区，大家看到这里是个HTML项，实际上它的内容很简单就是个iframe框架，如下图


之所以选用报表表达式来实现是因为若不用报表表达式必须在页面载入后在调用一个JavaScript函数来刷新该frame，用了报表表达式在展现是就根据参数劈成了URL就不需要在另外写个函数调用了。

第3部分 列表展示区


上图所示每个单位栏次都有两个HTML项目，中间放的是单位编号，这两个HTML项目拼出一个DIV并将其style的display属性设置为none，当报表展现时就看不到单位编号，但是我用JavaScript却可以获取到。

第4部分JavaScript区

先讲一下 说明为“获取传递参数”的下HTML项目。


报表接收的参数有两个一个是unitId单位编号，一个是reportTime上报月份，我这里把上报时间隐藏起来是因为在请求对应单位的历史执行情况、批注等操作时需要将其作为参数传递给另外的页面，这样JavaScript通过ID能够很方便的获取到参数的值。

剩下的就是重写右键菜单的HTML项目。昨天已经做了描述，如果不懂JavaScript的话，这里面的东西不是一两句话能说清楚的，我着重说一下几个比较重要的函数吧

markSelected(evt)

我们在报表中左键点击单元格Cognos会将点击的单元格区别显示，该函数就是将右键点击的单元格区别显示

getSelectedRow(evt)

该函数返回点击单元格所在的行，这个函数很重要，所有的操作都是在获取到行以后才操作的，因为只有获取到了行才能获取到单位ID，前面提到了我将单位ID隐藏在单位列中的DIV里了，通过selectedRow.cells[0].getElementsByTagName("DIV")[0].innerText;就能获取该行所对应的单位编号，又可以根据document.getElementById("reportTime").value;获取上报月份参数这里我用下面的函数加注释来解释一下

function showMemoFrame()

{

    showDIV.style.top = contextMenu.style.top;

    showDIV.style.left = contextMenu.style.left;--前面两行用来定位从哪显示该iframe

    var unitID = selectedRow.cells[0].getElementsByTagName("DIV")[0].innerText;--获取单位ID

    var reportTime = document.getElementById("reportTime").value;--获取上报月份参数值

    var host = location.host;--获取报表运行服务器IP和端口

    var reportUrl = "http://" + host + "/p2pd/interboy/showMemo.jsp?action=getmemo&unitID=" + unitID + "&reportTime=" + reportTime;--拼出展现备注的jsp地址

    showFrame.src = reportUrl;--给iframe的src赋值

    showDIV.style.visibility = "visible";--将iframe所在DIV设置为可见

}

编辑备注和查看历史是一个意思，我就不都说了。

JSP其实很简单，我只是为了演示，说明一下思路，所以用了3个来显现select和update，真正在生产环境下这样写肯定不行。

我这里是按行做的批注，其实可以做到按单元格，思路和这个是一样的，只是脚本和数据库表需要适当调整。