功能强大的 jQuery 图片查看器插件 : viewer
image.png
image.png
$(function () {
TaskReport.renderReportTable();
$('.sidebar-toggle').click();
});
let TaskReport = {
renderReportTable: () => {
$('#task-report-table').bootstrapTable({
detailView: false,//父子表
//分页方式：client 客户端分页，server服务端分页（*）
sidePagination: "client",
pageNumber: 1,
pageSize: 10,
pageList: [10, 20, 50, 100, 200, 300],
paginationHAlign: 'right', //right, left
paginationVAlign: 'bottom', //bottom, top, both
paginationDetailHAlign: 'left', //right, left
paginationPreText: '‹',
paginationNextText: '›',
searchOnEnterKey: false,
strictSearch: false,
searchAlign: 'right',
selectItemName: 'btSelectItem',
//是否显示搜索
search: true,
url: '/api/task/findTask.json',
method: 'GET',
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
paginationLoop: false,
silent: true,
//是否启用排序
//排序方式
sortOrder: "asc",
contentType: 'application/json',
dataType: 'json',
// dataField: 'departmentIssueQualityDataList', //server 后端 : json 对应的表格数据 key
responseHandler: function (res) {
console.log(res);
$('#task-report-table').bootstrapTable('getOptions').data = res.data;
let scenarioName = res.data[0] ? "" : res.data[0].scenario.name;
TaskReport.renderScenarioInfo(scenarioName);
return res;
},
queryParams: function (params) {
params.tid = $('#tid').val();
return params
},
// 当表格加载完毕才可以绑定的事件
onPostBody: (rows) => {
TaskReport.viewImages();
},
columns: [
{
title: 'No.',
align: 'left',
valign: 'middle',
formatter: (value, row, index) => {
return `${index + 1}`;
}
}, {
title: '节点名称',
align: 'left',
valign: 'middle',
cellStyle: function (value, row, index) {
return {
css: {
"min-width": "200px",
"word-wrap": "break-word",
"word-break": "normal"
}
};
},
formatter: (value, row, index) => {
return row.node.name;
}
}, {
title: '截图',
align: 'center',
valign: 'middle',
formatter: (value, row, index) => {
let imageUrl = row.imageUrl;
return `<img data-original="${imageUrl}" src="${imageUrl}" width="200px" class="node-img" alt="">`;
}
}, {
title: '输入脚本',
align: 'center',
valign: 'middle',
formatter: (value, row, index) => {
return row.node.input;
}
}, {
title: '输出脚本',
align: 'left',
valign: 'middle',
formatter: (value, row, index) => {
return row.node.output;
}
}, {
title: '期望输出',
align: 'left',
valign: 'middle',
formatter: (value, row, index) => {
return row.node.expectOutput;
}
}, {
title: '实际输出',
align: 'left',
valign: 'middle',
formatter: (value, row, index) => {
return row.actualOutput;
}
}, {
title: '断言算子',
align: 'left',
valign: 'middle',
formatter: (value, row, index) => {
return row.node.operator;
}
}, {
title: '结果',
align: 'left',
valign: 'middle',
formatter: (value, row, index) => {
return row.result;
}
}, {
title: '运行时间',
align: 'left',
valign: 'middle',
formatter: (value, row, index) => {
return `${row.startTime}~${row.endTime}`;
}
}, {
title: '创建时间',
align: 'left',
valign: 'middle',
formatter: (value, row, index) => {
return row.gmtCreate;
}
}
]
});
},
renderScenarioInfo: (name) => {
$('#scenario-name').html(name);
},
viewImages: () => {
let images = $('.node-img');
let handler = function (e) {
console.log(e.type);
};
let options = {
// inline: true,
url: 'data-original',
build: handler,
built: handler,
show: handler,
shown: handler,
hide: handler,
hidden: handler
};
images.on({
'build.viewer': handler,
'built.viewer': handler,
'show.viewer': handler,
'shown.viewer': handler,
'hide.viewer': handler,
'hidden.viewer': handler
}).viewer(options);
}
};https://github.com/fengyuanchen/viewer
