commit.

src/main/java/cn/com/qmth/examcloud/app/model/DeviceRecord.java

@@ -7,6 +7,8 @@
 
 package cn.com.qmth.examcloud.app.model;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
+
 import javax.persistence.Column;
 import javax.persistence.Entity;
 import javax.persistence.Table;
@@ -150,6 +152,7 @@ public class DeviceRecord extends IdEntity {
         this.url = url;
     }
 
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+08:00")
     public Date getCreateDate() {
         return createDate;
     }

src/main/java/cn/com/qmth/examcloud/app/service/DeviceRecordService.java

@@ -17,6 +17,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
 import org.springframework.data.domain.PageRequest;
 import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
 import org.springframework.data.jpa.domain.Specification;
 import org.springframework.scheduling.annotation.Async;
 import org.springframework.stereotype.Service;
@@ -80,14 +81,15 @@ public class DeviceRecordService {
                     predicates.add(builder.equal(root.get("loginToken"), params.getLoginToken()));
                 }
                 if (StringUtils.isNotBlank(params.getUrl())) {
-                    predicates.add(builder.equal(root.get("url"), params.getUrl()));
+                    predicates.add(builder.like(root.get("url"), "%" + params.getUrl() + "%"));
                 }
                 return builder.and(predicates.toArray(new Predicate[predicates.size()]));
             }
         };
         if (pageNo < 1) pageNo = 1;
         if (pageSize < 1) pageSize = 1;
-        Pageable pageable = new PageRequest(pageNo - 1, pageSize);
+        Sort sort = new Sort(new Sort.Order(Sort.Direction.DESC, "id"));
+        Pageable pageable = new PageRequest(pageNo - 1, pageSize, sort);
         Page<DeviceRecord> page = deviceRecordRepository.findAll(spec, pageable);
         return new Result<>().success(page);
     }

src/main/resources/static/page.js

@@ -0,0 +1,95 @@
+(function ($) {
+    var ms = {
+        init: function (obj, args) {
+            obj.unbind();
+            return (function () {
+                ms.fillHtml(obj, args);
+                ms.bindEvent(obj, args);
+            })();
+        },
+        //填充html
+        fillHtml: function (obj, args) {
+            return (function () {
+                obj.empty();
+                //上一页
+                if (args.current > 1) {
+                    obj.append('<li><a href="#" curId="prevPage">&laquo;</a></li>');
+                } else {
+                    obj.append('<li class="disabled"><a>&laquo;</a></li>');
+                }
+                //中间页码
+                if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {
+                    obj.append('<li><a href="#" curId="curNumber">1</a></li>');
+                }
+                if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {
+                    obj.append('<li><a>…</a></li>');
+                }
+                var start = args.current - 2, end = args.current + 2;
+                if ((start > 1 && args.current < 4) || args.current == 1) {
+                    end++;
+                }
+                if (args.current > args.pageCount - 4 && args.current >= args.pageCount) {
+                    start--;
+                }
+                for (; start <= end; start++) {
+                    if (start <= args.pageCount && start >= 1) {
+                        if (start != args.current) {
+                            obj.append('<li><a href="#" curId="curNumber">' + start + '</a></li>');
+                        } else {
+                            obj.append('<li class="active"><a>' + start + '</a></li>');
+                        }
+                    }
+                }
+                if (args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5) {
+                    obj.append('<li><a>…</a></li>');
+                }
+                if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {
+                    obj.append('<li><a href="#" curId="curNumber">' + args.pageCount + '</a></li>');
+                }
+                //下一页
+                if (args.current < args.pageCount) {
+                    obj.append('<li><a href="#" curId="nextPage">&raquo;</a></li>');
+                } else {
+                    obj.append('<li class="disabled"><a>&raquo;</a></li>');
+                }
+            })();
+        },
+        //绑定事件
+        bindEvent: function (obj, args) {
+            return (function () {
+                obj.on("click", "a[curId=curNumber]", function () {
+                    var current = parseInt($(this).text());
+                    ms.fillHtml(obj, {"current": current, "pageCount": args.pageCount});
+                    if (typeof(args.backFn) == "function") {
+                        args.backFn(current);
+                    }
+                });
+                //上一页
+                obj.on("click", "a[curId=prevPage]", function () {
+                    var current = parseInt(obj.children("li.active").text());
+                    ms.fillHtml(obj, {"current": current - 1, "pageCount": args.pageCount});
+                    if (typeof(args.backFn) == "function") {
+                        args.backFn(current - 1);
+                    }
+                });
+                //下一页
+                obj.on("click", "a[curId=nextPage]", function () {
+                    var current = parseInt(obj.children("li.active").text());
+                    ms.fillHtml(obj, {"current": current + 1, "pageCount": args.pageCount});
+                    if (typeof(args.backFn) == "function") {
+                        args.backFn(current + 1);
+                    }
+                });
+            })();
+        }
+    };
+    $.fn.createPage = function (options) {
+        var args = $.extend({
+            pageCount: 10,
+            current: 1,
+            backFn: function () {
+            }
+        }, options);
+        ms.init(this, args);
+    };
+})(jQuery);

src/main/resources/templates/deviceRecord/list.ftl

@@ -9,38 +9,124 @@
     <link href="${base}/styles/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
 </head>
 <body>
-<div id="contentDiv">loading...</div>
+<h3>设备访问记录</h3>
+<div class="panel panel-default" style="margin: 10px;padding: 10px">
+    <div class="btn-group">
+        <input type="text" class="form-control" id="url" placeholder="访问地址"/>
+    </div>
+    <div class="btn-group">
+        <input type="text" class="form-control" id="system" placeholder="系统标识"/>
+    </div>
+    <div class="btn-group">
+        <input type="text" class="form-control" id="account" placeholder="来源账号"/>
+    </div>
+    <div class="btn-group">
+        <input type="text" class="form-control" id="loginKey" placeholder="KEY"/>
+    </div>
+    <div class="btn-group">
+        <input type="text" class="form-control" id="loginToken" placeholder="TOKEN"/>
+    </div>
+    <div class="btn-group">
+        <a href="#" class="btn btn-info" onclick="doSearch()"> 搜索</a>
+    </div>
+    <table id="contentTable" class="table">
+        <thead>
+        <tr>
+            <th>ID</th>
+            <th>访问地址</th>
+            <th>系统标识</th>
+            <th>设备编号</th>
+            <th>网络类型</th>
+            <th>设备品牌</th>
+            <th>型号</th>
+            <th>系统版本号</th>
+            <th>APP版本号</th>
+            <th>APP更新号</th>
+            <th>APP补丁号</th>
+            <th>来源账号</th>
+            <th>KEY</th>
+            <th>TOKEN</th>
+            <th>操作时间</th>
+        </tr>
+        </thead>
+        <tbody id="contentDiv"></tbody>
+    </table>
+    <ul id="contentPager" class="pagination"></ul>
+</div>
 <script src="${base}/styles/jquery/jquery-1.9.1.min.js"></script>
+<script src="${base}/page.js"></script>
 <script type="text/javascript">
 
     $(function () {
-        loadData();
+        loadData(1, true);
     });
 
-    function loadData() {
+    function doSearch() {
+        $("#contentPager").empty();
+        loadData(1, true);
+    }
+
+    function loadData(curPageNo, needCreatePage) {
+        $("#contentDiv").empty();
         var params = {};
-        var pageNo = 1;
-        var pageSize = 5;
+        params.url = $('#url').val();
+        params.system = $('#system').val();
+        params.account = $('#account').val();
+        params.loginKey = $('#loginKey').val();
+        params.loginToken = $('#loginToken').val();
         $.ajax({
-            url: '${base}/device/record/list?pageNo=' + pageNo + '&pageSize=' + pageSize,
+            url: '${base}/device/record/list?pageSize=5&pageNo=' + curPageNo,
             contentType: "application/json; charset=UTF-8",
             dataType: "json",
             type: "POST",
             data: JSON.stringify(params),
             success: function (response) {
                 if (response && response.success) {
-                    var html = [];
                     var list = response.data.content;
-                    for (var n = 0; n < list.length; n++) {
-                        var obj = list[n];
-                        html.push('<p>' + JSON.stringify(obj) + '</p>');
+                    if (list && list.length > 0) {
+                        var html = [];
+                        for (var n = 0; n < list.length; n++) {
+                            var obj = list[n];
+                            html.push('<tr>');
+                            html.push('<td>' + obj.id + '</td>');
+                            html.push('<td>' + checkNull(obj.url) + '</td>');
+                            html.push('<td>' + checkNull(obj.system) + '</td>');
+                            html.push('<td>' + checkNull(obj.deviceId) + '</td>');
+                            html.push('<td>' + checkNull(obj.netType) + '</td>');
+                            html.push('<td>' + checkNull(obj.brand) + '</td>');
+                            html.push('<td>' + checkNull(obj.model) + '</td>');
+                            html.push('<td>' + checkNull(obj.sysVersion) + '</td>');
+                            html.push('<td>' + checkNull(obj.appVersion) + '</td>');
+                            html.push('<td>' + checkNull(obj.appCode) + '</td>');
+                            html.push('<td>' + checkNull(obj.patchCode) + '</td>');
+                            html.push('<td>' + checkNull(obj.account) + '</td>');
+                            html.push('<td>' + checkNull(obj.loginKey) + '</td>');
+                            html.push('<td>' + checkNull(obj.loginToken) + '</td>');
+                            html.push('<td>' + checkNull(obj.createDate) + '</td>');
+                            html.push('</tr>');
+                        }
+                        $("#contentDiv").html(html.join(''));
+                        if (needCreatePage) {
+                            $("#contentPager").createPage({
+                                pageCount: response.data.totalPages,
+                                current: curPageNo,
+                                backFn: function (current) {
+                                    loadData(current, false);
+                                }
+                            });
+                        }
                     }
-                    $("#contentDiv").html(html.join(''));
                 }
             }
         });
     }
 
+    function checkNull(str) {
+        if (!str || str == null) {
+            return "无";
+        }
+        return str;
+    }
 </script>
 </body>
 </html>