|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!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>
|
|
|
13
|
<label>接口名称：</label>
|
|
|
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<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>
|
|
|
44
|
<option th:each="item:${@apiLogService.getRetCodeList()}" th:value="${item}" th:text="${item}"></option>
|
|
|
45
46
47
|
</select>
</li>
<li>
|
|
|
48
49
50
51
52
53
54
55
|
<label>异常：</label>
<select name="hasException">
<option value=""></option>
<option value="1">有异常</option>
<option value="0">无异常</option>
</select>
</li>
<li>
|
|
|
56
57
|
<label>响应时间 > </label>
<input type="text" name="paramDuration" placeholder="1000毫秒"/>
|
|
|
58
|
</li>
|
|
|
59
60
61
62
|
<li>
<label>请求内容： </label>
<input type="text" name="requestBody" />
</li>
|
|
|
63
64
65
66
67
68
69
|
<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>
|
|
|
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<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",
|
|
|
108
109
110
111
|
detailUrl: prefix + "/list/{id}",
// createUrl: prefix + "/add",
// updateUrl: prefix + "/edit/{id}",
// removeUrl: prefix + "/remove",
|
|
|
112
|
modalName: "接口调用日志",
|
|
|
113
|
height:610,
|
|
|
114
115
|
pageSize: 30,
columns: [
|
|
|
116
117
|
{
field: 'id',
|
|
|
118
119
120
121
122
123
124
125
|
title: 'id',
visible: true
},
{
title: '操作',
align: 'center',
formatter: function (value, row, index) {
var actions = [];
|
|
|
126
|
actions.push('<a class="btn btn-success btn-xs " href="#" onclick="$.operate.detail(' + row.id + ')">详情</a> ');
|
|
|
127
128
|
return actions.join('');
}
|
|
|
129
130
|
},
{
|
|
|
131
132
133
134
|
field: 'requestFrom',
title: 'from'
},
{
|
|
|
135
|
field: 'apiName',
|
|
|
136
|
title: '接口名称'
|
|
|
137
|
},
|
|
|
138
|
/**
|
|
|
139
140
141
142
|
{
field: 'ip',
title: 'IP'
},
|
|
|
143
|
**/
|
|
|
144
|
|
|
|
145
146
147
148
|
{
field: 'responseBy',
title: 'to'
},
|
|
|
149
|
/**
|
|
|
150
151
152
153
|
{
field: 'url',
title: '请求地址'
},
|
|
|
154
|
**/
|
|
|
155
156
|
{
field: 'httpCode',
|
|
|
157
158
159
160
161
162
163
164
165
166
167
|
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(" ")
}
|
|
|
168
169
170
|
},
{
field: 'retCode',
|
|
|
171
172
173
174
175
176
177
178
179
180
181
|
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(" ")
}
|
|
|
182
183
184
185
186
|
},
{
field: 'requestTime',
title: '请求时间'
},
|
|
|
187
|
|
|
|
188
189
190
191
|
{
field: 'responseTime',
title: '响应时间'
},
|
|
|
192
|
|
|
|
193
194
|
{
field: 'duration',
|
|
|
195
196
197
198
199
200
201
202
203
204
205
|
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(" ")
}
|
|
|
206
|
},
|
|
|
207
|
/**
|
|
|
208
209
|
{
field: 'requestHeader',
|
|
|
210
|
title: '请求头'
|
|
|
211
|
},
|
|
|
212
|
**/
|
|
|
213
214
215
|
{
field: 'requestBody',
|
|
|
216
217
218
|
title: '请求内容',
formatter: function(value, row, index) {
var actions = [];
|
|
|
219
|
if(value == undefined || value == '')
|
|
|
220
|
value = " "
|
|
|
221
222
|
else
actions.push('<pre style="max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>')
|
|
|
223
224
|
return actions.join(" ")
}
|
|
|
225
|
},
|
|
|
226
|
/**
|
|
|
227
228
229
230
231
232
|
{
field: 'responseHeader',
title: '响应头'
},
**/
{
|
|
|
233
234
235
236
237
238
|
field: 'responseBody',
title: '响应内容',
formatter: function(value, row, index) {
var actions = [];
if(value == undefined)
value = " "
|
|
|
239
240
|
else
actions.push('<pre style="vertical-align: top; max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">'+value+ '</pre>')
|
|
|
241
242
|
return actions.join(" ")
}
|
|
|
243
|
},
|
|
|
244
|
|
|
|
245
|
{
|
|
|
246
247
248
|
field: 'exceptionMsg',
title: '异常信息',
formatter: function(value, row, index) {
|
|
|
249
|
var actions = [];
|
|
|
250
251
|
if(value == undefined)
value = " "
|
|
|
252
253
|
else
actions.push('<span style="color:red">'+value+ '</span>')
|
|
|
254
|
return actions.join(" ")
|
|
|
255
|
}
|
|
|
256
257
|
}
]
|
|
|
258
259
260
|
};
$.table.init(options);
});
|
|
|
261
|
|
|
|
262
|
/**
|
|
|
263
264
265
266
|
function parseJson(obj){
var str = obj.innerHTML
try {
str = JSON.parse(str);
|
|
|
267
|
obj.outerHTML = '<pre style="white-space: pre-wrap; width:350px" ondblclick="unParse(this)">' + JSON.stringify(str, null, 2) + '</pre>';
|
|
|
268
269
|
}catch (e) {
str = str.split("&").join(" ")
|
|
|
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
|
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');
|
|
|
289
|
}
|
|
|
290
291
|
transfer.blur();
document.body.removeChild(transfer);
|
|
|
292
|
}
|
|
|
293
294
|
</script>
</body>
|
|
|
295
|
</html>
|
