Skip to content

Commit

Permalink
feat: supports up, down, left, and right buttons to switch the previe…
Browse files Browse the repository at this point in the history 
…w image

Made some style adjustments and fixed some display issues

The report html supports up, down, left, and right buttons to switch the preview image.
  • Loading branch information
@Pactortester
Pactortester committed May 12, 2023
1 parent b757831 commit 71f75ba
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 8 deletions.
19 changes: 13 additions & 6 deletions css/report.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ body{
padding-left: 100px;
margin-bottom: 220px;
min-width: 960px;
min-height: calc(100% - 222px);
min-height: calc(100%);
position: relative;
}
#back_multi .back {
Expand Down Expand Up @@ -193,6 +193,7 @@ h2.empty-report{
}

.gallery{
min-height: 18vh;
margin-bottom: 30px;
}
.gallery .info-title{
Expand All @@ -204,6 +205,10 @@ h2.empty-report{
white-space: nowrap;
background: #121c34;
padding-top: 20px;
z-index: 3;
}
.gallery .placeholder {
background-color: #121c34;
}
.gallery .thumbnail {
display: inline-block;
Expand Down Expand Up @@ -342,14 +347,15 @@ h2.empty-report{
}
.step-left{
min-width: 320px;
padding: 30px 20px;
padding: 30px 50px 30px 20px;
width: 32%;
max-width: 500px;
max-height: 900px;
overflow-y: auto;
}
.step-right{
border-left: dashed 1px rgb(102,102,102);
padding: 30px 0px 0 60px;
margin-left: 30px;
vertical-align: top;
min-height: 500px;
width: 100%;
Expand Down Expand Up @@ -567,6 +573,7 @@ pre.trace {
position: fixed;
bottom: 0;
right: 0;
z-index: 4;
}
.row.gif-wrap .menu{
display: block;
Expand Down Expand Up @@ -636,7 +643,7 @@ pre.trace {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
z-index: 2;
z-index: 4;
display: none;
}
.mask .content {
Expand Down Expand Up @@ -690,7 +697,7 @@ pre.trace {
color: #999;
min-width: 1160px;
border-top: solid 1px #172036;
position: relative;
position: absolute;
width: 100%;
bottom: -219px;
left: 0;
Expand Down Expand Up @@ -839,4 +846,4 @@ pre.trace {

/* 分页 */

.ui-paging-container{color:#666;font-size:12px}.ui-paging-container ul{overflow:hidden;text-align:center}.ui-paging-container li,.ui-paging-container ul{list-style:none}.ui-paging-container li{display:inline-block;padding:3px 6px;margin-left:5px;color:#666}.ui-paging-container li.ui-pager{cursor:pointer;border:1px solid #ddd;border-radius:2px}.ui-paging-container li.focus,.ui-paging-container li.ui-pager:hover{background-color:#288df0;color:#FFF}.ui-paging-container li.ui-paging-ellipse{border:none}.ui-paging-container li.ui-paging-toolbar{padding:0}.ui-paging-container li.ui-paging-toolbar select{height:22px;border:1px solid #ddd;color:#666}.ui-paging-container li.ui-paging-toolbar input{vertical-align:top;line-height:20px;height:20px;padding:0;border:1px solid #ddd;text-align:center;width:30px;margin:0 0 0 5px}.ui-paging-container li.ui-paging-toolbar a{text-decoration:none;display:inline-block;height:20px;border:1px solid #ddd;vertical-align:top;border-radius:2px;line-height:20px;padding:0 3px;cursor:pointer;margin-left:5px;color:#666}.ui-paging-container li.ui-pager-disabled,.ui-paging-container li.ui-pager-disabled:hover{background-color:#f6f6f6;cursor:default;border:none;color:#ddd}
.ui-paging-container{color:#666;font-size:12px}.ui-paging-container ul{overflow:hidden;text-align:center}.ui-paging-container li,.ui-paging-container ul{list-style:none}.ui-paging-container li{display:inline-block;padding:3px 6px;margin-left:5px;color:#666}.ui-paging-container li.ui-pager{cursor:pointer;border:1px solid #ddd;border-radius:2px}.ui-paging-container li.focus,.ui-paging-container li.ui-pager:hover{background-color:#288df0;color:#FFF}.ui-paging-container li.ui-paging-ellipse{border:none}.ui-paging-container li.ui-paging-toolbar{padding:0}.ui-paging-container li.ui-paging-toolbar select{height:22px;border:1px solid #ddd;color:#666}.ui-paging-container li.ui-paging-toolbar input{vertical-align:top;line-height:20px;height:20px;padding:0;border:1px solid #ddd;text-align:center;width:30px;margin:0 0 0 5px}.ui-paging-container li.ui-paging-toolbar a{text-decoration:none;display:inline-block;height:20px;border:1px solid #ddd;vertical-align:top;border-radius:2px;line-height:20px;padding:0 3px;cursor:pointer;margin-left:5px;color:#666}.ui-paging-container li.ui-pager-disabled,.ui-paging-container li.ui-pager-disabled:hover{background-color:#f6f6f6;cursor:default;border:none;color:#ddd}
89 changes: 87 additions & 2 deletions js/report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ function StepPannel(data, root){
this.order = 'acc' // or dec
this.duration = 'acc' // or dec
this.status = 'acc' // or dec
this.thumbnail_step_list = []

this.init = function(){
// 初始化
Expand Down Expand Up @@ -121,6 +122,33 @@ function StepPannel(data, root){
$("#show-console").click(function(){
$('#console').fadeIn(300)
})
document.body.onkeydown= (e)=>{
e=window.event||e;
switch(e.keyCode){
case 37:
//左键
this.jumpToPreThumbNail()
break;
case 38:
//向上键
//禁用触发页面滚动
e.preventDefault();
this.jumpToPreThumbNail()
break;
case 39:
//右键
this.jumpToNextThumbNail()
break;
case 40:
//向下键
//禁用触发页面滚动
e.preventDefault();
this.jumpToNextThumbNail()
break;
default:
break;
}
}
}

this.sortSteps = function(attr, rev){
Expand Down Expand Up @@ -188,14 +216,21 @@ function StepPannel(data, root){
step.duration = getFormatDuration(step.duration_ms)
step.index = i
step.status = step.traceback ? 'fail' : 'success'
this.thumbnail_step_list = this.original_steps.map(function(step){
if(step.screen && step.screen.thumbnail) {
return step.index
}})
this.thumbnail_step_list = this.thumbnail_step_list.filter((val)=>{
return val != null
})
}
}

this.init_gallery = function(){
var that = this
var fragment = this.original_steps.map(function(step){
if(step.screen && step.screen.thumbnail) {
return '<div class="thumbnail" index="%s">'.format(step.index) +
return '<div class="thumbnail" index="%s">'.format(step.index) +
'<img src="%s" alt="%s"/>'.format(step.screen.thumbnail, step.screen.thumbnail) +
'<div class="time">%s</div>'.format(getFormatDuration2(getDelta(step.time, that.data.run_start))) +
'</div>'
Expand All @@ -221,6 +256,34 @@ function StepPannel(data, root){
$('.steps .filter').removeClass('active')
}

this.jumpToNextThumbNail = function() {
this.jumpToThumbNail('next')
}

this.jumpToPreThumbNail = function() {
this.jumpToThumbNail('pre')
}

this.jumpToThumbNail = function(op) {
let cur_thumbnail_step_index = this.thumbnail_step_list.findIndex((val)=>{
return val == this.currentStep
})
let nxt_thumbnail_step_index = 0

if(op == 'next'){
if(cur_thumbnail_step_index < this.thumbnail_step_list.length - 1){
nxt_thumbnail_step_index = this.thumbnail_step_list[cur_thumbnail_step_index + 1]
}
}else if(op == 'pre'){
if(cur_thumbnail_step_index > 0){
nxt_thumbnail_step_index = this.thumbnail_step_list[cur_thumbnail_step_index - 1]
}
}
this.currentStep = nxt_thumbnail_step_index
this.currentPage = Math.ceil(this.currentStep / this.pagesize)
this.setSteps(this.currentStep)
}

this.showMagnifyPic = function(fragment) {
this.magnifyContainer.html(fragment)
this.magnifyContainer.children().removeAttr('style')
Expand Down Expand Up @@ -289,7 +352,7 @@ function StepPannel(data, root){
}

this.getStepRightInfo = function(step){
// HTML 本步骤成功与否、耗时
// HTML 本步骤成功与否、耗时
try{
return ("<div class='step-infos'>"+
"<div class='infos-li'>" +
Expand Down Expand Up @@ -781,13 +844,35 @@ function init_page(){
$('.summary .info-sub.start').html(getFormatDate(data.run_start))
$('.summary .info-sub.time').html(getFormatTime(data.run_start) + '-' + getFormatTime(data.run_end))
$('.summary .info-value.duration').html(getFormatDuration(getDelta(data.run_end, data.run_start)))
setImgAffix()
}

function hideFancybox(img) {
// 图片加载失败的情况下，隐藏整个div
$(img).parent().hide();
}

function setImgAffix(){
// 延迟触发，等待其他元素渲染完成再去获取，否则获取的值有误
setTimeout(() => {
// 获取页面加载时快览与页面顶端的距离
var stickyHeaderTop = $('.gallery .content').offset().top
// 在快览滑动到顶端时将其设置为固钉，添加页面滚动的监听事件
$(window).scroll(function(){
if($(window).scrollTop() > stickyHeaderTop) {
$('.gallery .content').css({position: 'fixed', top: '0px'})
} else {
$('.gallery .content').css({position: 'relative', top: '0px'})
}
})
// 计算需要占位的高度
var placeHolderHeight= $('.gallery .placeholder').height()
var placeHolderWidth = $('.gallery .content').width()
$('.gallery .placeholder').css({minHeight: placeHolderHeight})
$('.gallery .content').css({maxWidth: placeHolderWidth})
}, 500)
}

$(function(){
init_page()
stepPanel = new StepPannel(data)
Expand Down

0 comments on commit 71f75ba

Please sign in to comment.