功能強大的 jQuery 圖檔檢視器插件 : viewer
$(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);
}
};