引入的js库：

Jquery，Jquery templates plugin，Jquery tablesorter，JsxCompressor（JSXGraph）

版本都很老，而且有些还是废弃的项目（Jquery templates plugin），但是脚本都直接写进了html页面中，所以版本问题无影响

页面呈现的内容：统计列表，python运行时错误，用例执行日志消息，都是通过调用js绘制，而不是直接生成html代码
所用数据保存在window对象中，其中

window.output["strings"]是日志数据的对象

<script type="text/javascript">
window.output["strings"] = window.output["strings"].concat(["*","*testMML","*D:\\gitworkspace\\base\\eta-sh\\common\\testMML.txt","*../../gitworkspace/base/eta-sh/common/testMML.txt","*OMM","*EMML.Login","*<p>ip:\x3c/p>","*10.62.44.135, 2121, admin, ${EMPTY}","eNqdjsEKgkAURffvK94iQoUksza2axOBo2AmUbQY9CVDzhgzI9HfZxZBW8/ycg8czxsL4JuEbNJJUk7OXDwocRVUIeOK19SvFvdPY0liTloKxZvBwY/643Rks5SxzClCF89ZWAQLP1j5wXyzDC//VwRvfHCcbncJdIa04pIi4FXfBHduzKPVVQQwmdZ2DYzFaL+9UdPWQqHpypKoAsn1LcLh9gLgFUn3","*EMML.Execute Mml","*CREATE:MOC=\"SubNetwork\",MOI=\"SubNetwork=1000\",ATTRIBUTES=\"NMSDNPREFIX=DC=www.zte.com.cn,NMSUSERDEFINEDNETWORKTYPE=AN,SubNetwork=1000,NMSSETOFMCC=460,USERLABEL=子网1000\",EXTENDS=\"\"","eNrz9fVRSE3OyLficg5ydQxxtfL1d7ZVCi5N8kstKc8vylbS8fX3RBawNTQwMFDScQwJCfJ0Cg1xDbZV8vMNdvELCHJ184ywdXG2LS8v1+OqKknVS87P1UvO0wFKhwa7BrkA5f1cXfxcQ8L9g7xDIgNcbR39dNAMBikOdg3xd/N1drY1MTPQAen0cXRy5fKxfbp2wvO9EyHWu0aEuPq5AO1Wso428o52GYWjcBSOwlE4CkfhKByFo3AUjsJROApH4YBDR1AnHUSoqKWXWA/ZoQYuPTBQUKhRgIDnuyc/mzeHSxcMuJ52zH66e9ezyb1P9s551jHhadf8xw1NXGjWwhRzgYMCAEL1cig=","*BuiltIn.Log","*<p>Logs the given message with the given level.\x3c/p>","*你好，编号9527","*EMS","*10.62.44.49, 21123, admin, ${EMPTY}","eNrT0iIXcCmgAb/UEr/S3NQ8hVBjQ4Xnu+c/2dHwfO/E5+sWPt+8G8hFV66AakBpbrFCNIoRYYZGeobGeqaGAYZGsWhatch39vOZu1/ObON6PmXFs47tTyf0WnElpuRm5nE9Xd/2fEGjFReXiqtv8LM5vU+7Fj6duULD0EDPzEjPxETPxFJTLb3EmsvX10ehJLUIqCUxxyonPz0zT6G4NDk5NTWFKzexKNtKAb9+AKKEaEI=","*CREATEOMM:VENDOR=ZTE Corporation,NAME=UV3网元_10.62.44.135,FTPPORT=20021,MOC=wcdma.omm,TIMEZONE=0,IPADDRESS=10.62.44.135,PORT=21125;","eNrz9fVRSE3OyLficg5ydQxx9ff1tQpz9XPxD7KNCnFVcM4vKsgvSizJzM/T8XP0dbUNDTN+vnfi09bmeEMDPTMjPRMTPS5DY1Mdt5CAAP+gEFsjAwMjQx1ff2fb8uSU3ES9/NxcnRBPX9cofz9XWwMdzwBHF5cg1+BgW7h2kG6IVkNDI1PraCPvaJdROApH4SgchaNwFI7CUTgKR+EoHIWjcBQOOHQEdtJVXH2Dn83pfdq18OnMFRrw3ryJpaZaeon1YBlN4NIDAwWFGgUIeDpx75PdS551Ln+xsOfpko0vtiy1ggg92dH7dO2Mp3NWPG5o4sLvOQDXU2GC"]);
</script>

window.output["stats"]是统计表格的数据，该列表有3个元素，分别对应3个表格

<script type="text/javascript">
window.output["stats"] = [[{"elapsed":"00:00:07","fail":0,"label":"Critical Tests","pass":2},{"elapsed":"00:00:07","fail":0,"label":"All Tests","pass":2}],[],[{"elapsed":"00:00:07","fail":0,"id":"s1","label":"testMML","name":"testMML","pass":2}]];
</script>

还增加了window.fileloading,window.model,window.util,window.testdata,window.output等对象/模块

绘制统计数据表格的函数为addStatistics，addStatTable

折叠日志消息的函数toggleElement,，其代码段：

function toggleSuite(suiteId) {
    toggleElement(suiteId, ['keyword', 'suite', 'test']);
}
function toggleTest(testId) {
    toggleElement(testId, ['keyword']);
}
function toggleKeyword(kwId) {
    toggleElement(kwId, ['keyword', 'message']);
}
function toggleElement(elementId, childrenNames) {
    var element = $('#' + elementId);
    var children = element.children('.children');
    children.toggle(100, '', function () {
        element.children('.element-header').toggleClass('closed');
    });
    populateChildren(elementId, children, childrenNames);
}
function populateChildren(elementId, childElement, childrenNames) {
    if (!childElement.hasClass('populated')) {
        var element = window.testdata.findLoaded(elementId);
        var callback = drawCallback(element, childElement, childrenNames);
        element.callWhenChildrenReady(callback);
        childElement.addClass('populated');
    }
}

页面中各种图标使用base64代码

比如RF标志：

<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAJEBoACtnfgA5cYYAERsiAEx2lAAbKkQAcazBACZCVwAcM1cAK0ucAAMDBQAnQncASG+FABkoVQAyWmgA6f8SgvH/Ij99+GLyIinyJfn/Yi//KSLzUy9iZogpIld3/4JVVTkid7vyUjNVNVJEAGOZ6Z7pXwAABpmZkRiLAAAGiJZpmGAAAEEt3SXdxAAATC7o/u3EAAC8MRZpjasAAAY1VVVTYAAABKqqqqpAAAAADKqq4AAAAAAAv4sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMADAADgAwAA4AcAAOAHAADgBwAAwAcAAOAHAADgDwAA8A8AAPg/AAD+fwAA">

又比如用例折叠的图标：

.element-header {
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 0.3em 6.5em 0.3em 1.4em;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url("data:image/gif;base64,R0lGODlhDQALAIAAAAAAAAAAACH5BAEKAAEALAAAAAANAAsAAAIZTICpYGz/nIOxUShvPU1ZroHTlYWlJi1LAQA7");
}

表格排序使用了jquery tablesorter插件，看介绍使用比较简单，设置table的class为tablesorter，然后在$().ready()中调用$("#"+table id).tablesorter()就可以

$(function(){
  $("#myTable").tablesorter();
});