Blame view

src/main/resources/templates/monitor/apilog/apilog.html 10.9 KB
周峰 authored
1
2
3
4
5
6
7
8
<!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">
9
            <form id="formId" autocomplete="off">
周峰 authored
10
11
12
13
14
15
                <div class="select-list">
                    <ul>
                        <li>
                            <label>API:</label>
                            <select name="apiName">
                                <option value=""></option>
16
17
                                <option th:each="item:${@apiLogService.getApiNameList()}" th:value="${item}"
                                        th:text="${item}"></option>
周峰 authored
18
19
20
21
22
23
                            </select>
                        </li>
                        <li>
                            <label>请求方:</label>
                            <select name="requestFrom">
                                <option value=""></option>
24
25
                                <option th:each="item:${@apiLogService.getRequestFromList()}" th:value="${item}"
                                        th:text="${item}"></option>
周峰 authored
26
27
28
29
30
31
                            </select>
                        </li>
                        <li>
                            <label>响应方:</label>
                            <select name="responseBy">
                                <option value=""></option>
32
33
                                <option th:each="item:${@apiLogService.getResponseByList()}" th:value="${item}"
                                        th:text="${item}"></option>
周峰 authored
34
35
36
37
38
39
                            </select>
                        </li>
                        <li>
                            <label>httpCode:</label>
                            <select name="httpCode">
                                <option value=""></option>
40
41
                                <option th:each="item:${@apiLogService.getHttpCodeList()}" th:value="${item}"
                                        th:text="${item}"></option>
周峰 authored
42
43
44
45
46
47
                            </select>
                        </li>
                        <li>
                            <label>retCode:</label>
                            <select name="retCode">
                                <option value=""></option>
48
49
                                <option th:each="item:${@apiLogService.getRetCodeList()}" th:value="${item}"
                                        th:text="${item}"></option>
周峰 authored
50
51
52
                            </select>
                        </li>
                        <li>
周峰 authored
53
54
55
56
57
58
59
60
                            <label>异常:</label>
                            <select name="hasException">
                                <option value=""></option>
                                <option value="1">有异常</option>
                                <option value="0">无异常</option>
                            </select>
                        </li>
                        <li>
周峰 authored
61
62
                            <label>响应时间 &gt; </label>
                            <input type="text" name="paramDuration" placeholder="1000毫秒"/>
周峰 authored
63
                        </li>
64
65
                        <li>
                            <label>请求内容:</label>
pengyongcheng authored
66
                            <input name="requestBody" placeholder="请输入请求内容" type="text"/>
67
                        </li>
68
                        <li class="select-time">
周峰 authored
69
                            <label>请求时间:</label>
70
71
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                   name="beginRequestTime"/>
周峰 authored
72
                            <span>-</span>
73
74
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                   name="endRequestTime"/>
周峰 authored
75
                        </li>
76
77
78
79
80
81
82
                        <li style="float: right; margin-right: 45px">
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()">
                                <i class="fa fa-search"></i>&nbsp;搜索
                            </a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()">
                                <i class="fa fa-refresh"></i>&nbsp;重置
                            </a>
周峰 authored
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
                        </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>
103
        <div class="col-sm-12 select-table table-striped">
周峰 authored
104
105
106
107
108
109
110
111
112
113
114
115
116
            <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",
周峰 authored
117
118
119
120
            detailUrl: prefix + "/list/{id}",
            // createUrl: prefix + "/add",
            // updateUrl: prefix + "/edit/{id}",
            // removeUrl: prefix + "/remove",
周峰 authored
121
            modalName: "接口调用日志",
周峰 authored
122
123
            pageSize: 30,
            columns: [
周峰 authored
124
125
                {
                    field: 'id',
周峰 authored
126
127
128
129
130
131
132
133
                    title: 'id',
                    visible: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
134
                        actions.push('<a class="btn btn-success btn-xs " href="#" onclick="$.operate.detail(' + row.id + ')">详情</a> ');
周峰 authored
135
136
                        return actions.join('');
                    }
周峰 authored
137
138
                },
                {
139
                    field: 'requestFrom',
140
                    title: '请求方'
141
142
                },
                {
周峰 authored
143
144
145
146
147
                    field: 'apiName',
                    title: 'API'
                },
                {
                    field: 'responseBy',
148
                    title: '响应方'
周峰 authored
149
150
151
                },
                {
                    field: 'httpCode',
周峰 authored
152
                    title: 'http',
153
                    formatter: function (value, row, index) {
周峰 authored
154
155
                        var actions = [];
                        var style = "style='color:green'"
156
                        if (value != web_status.SUCCESS)
周峰 authored
157
                            style = " style='color:red'";
158
                        if (value === undefined)
周峰 authored
159
                            value = " "
160
                        actions.push('<span ' + style + '>' + value + '</span>')
周峰 authored
161
162
                        return actions.join(" ")
                    }
周峰 authored
163
164
165
                },
                {
                    field: 'retCode',
周峰 authored
166
                    title: 'ret',
167
                    formatter: function (value, row, index) {
周峰 authored
168
169
                        var actions = [];
                        var style = "style='color:green'"
170
                        if (value != web_status.SUCCESS)
周峰 authored
171
                            style = " style='color:red'";
172
                        if (value === undefined)
周峰 authored
173
                            value = " "
174
                        actions.push('<span ' + style + '>' + value + '</span>')
周峰 authored
175
176
                        return actions.join(" ")
                    }
周峰 authored
177
178
179
180
181
182
183
                },
                {
                    field: 'requestTime',
                    title: '请求时间'
                },
                {
                    field: 'duration',
周峰 authored
184
                    title: '耗时',
185
                    formatter: function (value, row, index) {
186
187
                        let actions = [];
                        let style = ""
188
                        if (value >= 20000)
周峰 authored
189
                            style = " style='color:red'";
190
                        if (value === undefined)
周峰 authored
191
                            value = " "
192
                        actions.push('<span ' + style + ' title="毫秒">' + value + '</span>')
周峰 authored
193
194
                        return actions.join(" ")
                    }
周峰 authored
195
196
197
                },
                {
                    field: 'requestBody',
周峰 authored
198
                    title: '请求内容',
199
                    formatter: function (value, row, index) {
周峰 authored
200
                        var actions = [];
201
                        if (value == undefined || value == '')
周峰 authored
202
                            value = " "
周峰 authored
203
                        else
204
                            actions.push('<pre style="max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">' + value + '</pre>')
周峰 authored
205
206
                        return actions.join(" ")
                    }
周峰 authored
207
208
                },
                {
周峰 authored
209
210
                    field: 'responseBody',
                    title: '响应内容',
211
                    formatter: function (value, row, index) {
周峰 authored
212
                        var actions = [];
213
                        if (value == undefined)
周峰 authored
214
                            value = " "
周峰 authored
215
                        else
216
                            actions.push('<pre style="vertical-align: top; max-height:100px; white-space: pre-wrap; width:350px" ondblclick="copy(this)" title="双击复制">' + value + '</pre>')
周峰 authored
217
218
                        return actions.join(" ")
                    }
周峰 authored
219
220
                },
                {
周峰 authored
221
222
                    field: 'exceptionMsg',
                    title: '异常信息',
223
                    formatter: function (value, row, index) {
周峰 authored
224
                        var actions = [];
225
                        if (value === undefined)
周峰 authored
226
                            value = " "
周峰 authored
227
                        else
228
                            actions.push('<span style="color:red">' + value + '</span>')
周峰 authored
229
                        return actions.join(" ")
周峰 authored
230
                    }
周峰 authored
231
                }
232
            ]
周峰 authored
233
234
235
        };
        $.table.init(options);
    });
周峰 authored
236
237
238
239
240
241
242
243
    function copy(obj) {
        let transfer = document.createElement('textarea');
        document.body.appendChild(transfer);
        transfer.value = obj.innerHTML;
        transfer.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
周峰 authored
244
        }
245
246
        transfer.blur();
        document.body.removeChild(transfer);
周峰 authored
247
    }
周峰 authored
248
249
250
</script>
</body>
</html>