一、介绍
使用了网上看来的beautifulreport的模版，觉得页面table部分不够完善进行了二次开发，增加如下：
1、增加table数据分页功能
2、增加饼图显式展示数量
二、代码
略（显示过长，且格式有问题），有需要的私信我，单独发。
贴下主要修改部分的代码：
1、增加分页组件
<input id="pageInfo" type="text" value="0" style="display: none"><nav aria-label="..."> <ul class="pager"> <li><a onclick="changePage(0)">Previous</a></li> <li><a onclick="changePage(1)">Next</a></li> </ul></nav>
2、增加分页逻辑JS部分
function changePage(type) { var intputValue = parseInt($("#pageInfo").val()); var tableStart = 0; var tableEnd = 0; var indexValue = 0; if (type === 0 && intputValue === 0) { toastr.info("暂无前一页！"); return false; } else if (type === 1 && intputValue === (Math.ceil(resultData["testAll"] / 10) - 1)) { toastr.info("暂无后一页！"); return false; } if (type === 0) { $("#pageInfo").val(intputValue - 1); intputValue = parseInt($("#pageInfo").val()); tableStart = intputValue * 10; tableEnd = (intputValue + 1) * 10 - 1; resultValue = new Array(); indexValue = 0; $.each(resultData["testResult"], function (i, n) { if (i >= tableStart && i <= tableEnd){ resultValue[indexValue] = n; indexValue += 1; } }); } else if (type === 1 ) { $("#pageInfo").val(intputValue + 1); intputValue = parseInt($("#pageInfo").val()); tableStart = intputValue * 10; tableEnd = (intputValue + 1) * 10 - 1; resultValue = new Array(); indexValue = 0; $.each(resultData["testResult"], function (i, n) { if (i >= tableStart && i <= tableEnd){ resultValue[indexValue] = n; indexValue += 1; } }); } $('#detailBody tr').remove(); var filterAll = 0; var filterOk = 0; var filterFail = 0; var filterSkip = 0; var buttonIndexPre = null; $.each(resultValue, function (i, n) { filterAll += 1; var status = ""; if (n["status"] == '成功') { filterOk += 1; status = "<td><span class='text-navy'>成功</span></td>"; } else if (n["status"] == '失败') { $.each(resultData["testResult"], function (j, m) { if (n["methodName"] === m["methodName"]){ buttonIndexPre = j; } }); filterFail += 1; status = "<td><span class='text-danger'>失败</span></td>"; } else if (n["status"] == '跳过') { filterSkip += 1; status = "<td><span class='text-warning'>跳过</span></td>"; } else { status = "<td><span>" + n["status"] + "</span></td>"; } var tr = "<tr style='font-family: Consolas'>" + "<td>" + (i + 1) + "</td>" + "<td>" + n["className"] + "</td>" + "<td>" + n["methodName"] + "</td>" + "<td>" + n["description"] + "</td>" + "<td>" + n["spendTime"] + "</td>" + status + "<td><button type='button' onclick='details(this)' buttonIndex='" + buttonIndexPre + "' class='btn btn-primary btn-xs' style='margin-bottom: 0px'>展开</button></td></tr>" $("#detailBody").append(tr); $("#filterAll").text(filterAll); $("#filterOk").text(filterOk); $("#filterFail").text(filterFail); $("#filterSkip").text(filterSkip); });}
3、修改原来table展示逻辑
function generateResult(className, caseResult) { $("#detailBody").children().remove(); var filterAll = 0; var filterOk = 0; var filterFail = 0; var filterSkip = 0; var indexValue = 0; if (className == "" && caseResult == "") { $.each(resultData["testResult"], function (i, n) { if (i >= 0 && i <= 9){ resultValue[indexValue] = n; indexValue += 1; } }); $.each(resultValue, function (i, n) { filterAll += 1; var status = ""; if (n["status"] == '成功') { filterOk += 1; status = "<td><span class='text-navy'>成功</span></td>"; } else if (n["status"] == '失败') { filterFail += 1; status = "<td><span class='text-danger'>失败</span></td>"; } else if (n["status"] == '跳过') { filterSkip += 1; status = "<td><span class='text-warning'>跳过</span></td>"; } else { status = "<td><span>" + n["status"] + "</span></td>"; } var tr = "<tr style='font-family: Consolas'>" + "<td>" + (i + 1) + "</td>" + "<td>" + n["className"] + "</td>" + "<td>" + n["methodName"] + "</td>" + "<td>" + n["description"] + "</td>" + "<td>" + n["spendTime"] + "</td>" + status + "<td><button type='button' onclick='details(this)' buttonIndex='" + i + "' class='btn btn-primary btn-xs' style='margin-bottom: 0px'>展开</button></td></tr>" $("#detailBody").append(tr); $("#filterAll").text(filterAll); $("#filterOk").text(filterOk); $("#filterFail").text(filterFail); $("#filterSkip").text(filterSkip); }); } if (className != "" || caseResult != "") { $.each(resultData["testResult"], function (i, n) { if ((className == "" || n["className"] == className) && (caseResult == "" || n["status"] == caseResult)) { filterAll += 1; var status = ""; if (n["status"] == '成功') { filterOk += 1; status = "<td><span class='text-navy'>成功</span></td>"; } else if (n["status"] == '失败') { filterFail += 1; status = "<td><span class='text-danger'>失败</span></td>"; } else if (n["status"] == '跳过') { filterSkip += 1; status = "<td><span class='text-warning'>跳过</span></td>"; } else { status = "<td><span>" + n["status"] + "</span></td>"; } var tr = "<tr style='font-family: Consolas'>" + "<td>" + (i + 1) + "</td>" + "<td>" + n["className"] + "</td>" + "<td>" + n["methodName"] + "</td>" + "<td>" + n["description"] + "</td>" + "<td>" + n["spendTime"] + "</td>" + status + "<td><button type='button' onclick='details(this)' buttonIndex='" + i + "' class='btn btn-primary btn-xs' style='margin-bottom: 0px'>展开</button></td></tr>" $("#detailBody").append(tr); $("#filterAll").text(filterAll); $("#filterOk").text(filterOk); $("#filterFail").text(filterFail); $("#filterSkip").text(filterSkip); } }); }}
4、饼图显式展示数值
function pie() { var option = { title: { text: '测试用例运行结果', subtext: '', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['失败', '跳过', '成功'] }, series: [ { name: '运行结果', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: resultData["testFail"], name: '失败'}, {value: resultData["testSkip"], name: '跳过'}, {value: resultData["testPass"], name: '成功'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: {show: true} } } } ] }; var chart = echarts.init(document.getElementById("echarts-map-chart")); chart.setOption(option);}
5、增加toastr弹窗
<script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
CSS部分:
.toast-center-center { top: 50%; left: 50%; margin-top: -30px; margin-left: -150px;}
JS部分：
toastr.options = { "closeButton": false, //是否显示关闭按钮 "debug": false, //是否使用debug模式 "positionClass": "toast-center-center",//弹出窗的位置 "showDuration": "300",//显示的动画时间 "hideDuration": "1000",//消失的动画时间 "timeOut": "5000", //展现时间 "extendedTimeOut": "1000",//加长展示时间 "showEasing": "swing",//显示时的动画缓冲方式 "hideEasing": "linear",//消失时的动画缓冲方式 "showMethod": "fadeIn",//显示时的动画方式 "hideMethod": "fadeOut" //消失时的动画方式};
三、效果图
主要修改用蓝色方框标出。
