<!DOCTYPE HTML> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="gray-bg"> <div class="container-div"> <div class="row"> <div class="col-sm-12 select-info"> <form id="formId"> <div class="select-list"> <ul> <li> <label>API:</label> <select name="apiName"> <option value=""></option> <option th:each="item:${@apiLogService.getApiNameList()}" th:value="${item}" th:text="${item}"></option> </select> </li> <li> <label>请求方:</label> <select name="requestFrom"> <option value=""></option> <option th:each="item:${@apiLogService.getRequestFromList()}" th:value="${item}" th:text="${item}"></option> </select> </li> <li> <label>响应方:</label> <select name="responseBy"> <option value=""></option> <option th:each="item:${@apiLogService.getResponseByList()}" th:value="${item}" th:text="${item}"></option> </select> </li> <li> <label>httpCode:</label> <select name="httpCode"> <option value=""></option> <option th:each="item:${@apiLogService.getHttpCodeList()}" th:value="${item}" th:text="${item}"></option> </select> </li> <li> <label>retCode:</label> <select name="retCode"> <option value=""></option> <option th:each="item:${@apiLogService.getRetCodeList()}" th:value="${item}" th:text="${item}"></option> </select> </li> <li> <label>异常:</label> <select name="hasException"> <option value=""></option> <option value="1">有异常</option> <option value="0">无异常</option> </select> </li> <li> <label>响应时间 > </label> <input type="text" name="paramDuration" placeholder="1000毫秒"/> </li> <li class="time"> <label>请求时间:</label> <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="beginRequestTime"/> <span>-</span> <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endRequestTime"/> </li> <li> <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a> <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a> </li> </ul> </div> </form> </div> <div class="btn-group hidden-xs" id="toolbar" role="group"> <a class="btn btn-outline btn-success btn-rounded" onclick="$.operate.add()" shiro:hasPermission="apilog:apiLog:add"> <i class="fa fa-plus"></i> 新增 </a> <a class="btn btn-outline btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="apilog:apilog:edit"> <i class="fa fa-edit"></i> 修改 </a> <a class="btn btn-outline btn-danger btn-rounded multiple disabled" onclick="$.operate.batRemove()" shiro:hasPermission="apilog:apiLog:remove"> <i class="fa fa-trash-o"></i> 删除 </a> </div> <div class="col-sm-12 select-info table-striped"> <table id="bootstrap-table" data-mobile-responsive="true"></table> </div> </div> </div> <div th:include="include :: footer"></div> <script th:inline="javascript"> var editFlag = [[${@permission.hasPermi('apilog:apiLog:edit')}]]; var removeFlag = [[${@permission.hasPermi('apilog:apiLog:remove')}]]; var prefix = ctx + "monitor/apilog" $(function () { var options = { url: prefix + "/list", detailUrl: prefix + "/list/{id}", // createUrl: prefix + "/add", // updateUrl: prefix + "/edit/{id}", // removeUrl: prefix + "/remove", modalName: "接口调用日志", pageSize: 30, columns: [ { field: 'id', title: 'id', visible: true }, { title: '操作', align: 'center', formatter: function (value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs " href="#" onclick="$.operate.detail(' + row.id + ')">详情</a> '); return actions.join(''); } }, { field: 'requestFrom', title: 'from' }, { field: 'apiName', title: 'API' }, /** { field: 'ip', title: 'IP' }, **/ { field: 'responseBy', title: 'to' }, /** { field: 'url', title: '请求地址' }, **/ { field: 'httpCode', title: 'http', formatter: function(value, row, index) { var actions = []; var style = "style='color:green'" if(value>200) style = " style='color:red'"; if(value == undefined) value = " " actions.push('<span '+ style + '>'+value+ '</span>') return actions.join(" ") } }, { field: 'retCode', title: 'ret', formatter: function(value, row, index) { var actions = []; var style = "style='color:green'" if(value>200) style = " style='color:red'"; if(value == undefined) value = " " actions.push('<span '+ style + '>'+value+ '</span>') return actions.join(" ") } }, { field: 'requestTime', title: '请求时间' }, /** { field: 'responseTime', title: '响应时间' }, **/ { field: 'duration', title: '耗时', formatter: function(value, row, index) { var actions = []; var style = "" if(value>1000) style = " style='color:red'"; if(value == undefined) value = " " actions.push('<span '+ style + ' title="毫秒">'+value+ '</span>') return actions.join(" ") } }, /** { field: 'requestHeader', title: '请求头' }, **/ { field: 'requestBody', title: '请求内容', formatter: function(value, row, index) { var actions = []; if(value == undefined || value == '') value = " " else actions.push('<pre style="max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>') return actions.join(" ") } }, /** { field: 'responseHeader', title: '响应头' }, **/ { field: 'responseBody', title: '响应内容', formatter: function(value, row, index) { var actions = []; if(value == undefined) value = " " else actions.push('<pre style="vertical-align: top; max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>') return actions.join(" ") } }, { field: 'exceptionMsg', title: '异常信息', formatter: function(value, row, index) { var actions = []; if(value == undefined) value = " " else actions.push('<span style="color:red">'+value+ '</span>') return actions.join(" ") } } ] }; $.table.init(options); }); /** function parseJson(obj){ var str = obj.innerHTML try { str = JSON.parse(str); obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="unParse(this)">' + JSON.stringify(str, null, 2) + '</pre>'; }catch (e) { str = str.split("&").join(" ") obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="unParse(this)">' + str + '</pre>'; } } function unParse(obj) { var str = obj.innerHTML; obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="parseJson(this)" title="双击格式化">'+str.replaceAll("\n","")+ '</pre>' } **/ function copy(obj) { let transfer = document.createElement('textarea'); document.body.appendChild(transfer); transfer.value = obj.innerHTML; // transfer.focus(); transfer.select(); if (document.execCommand('copy')) { document.execCommand('copy'); } transfer.blur(); document.body.removeChild(transfer); } </script> </body> </html>