综合查询

src/main/java/com/bonus/imgTool/backstage/entity/QueryParamDto.java

@@ -19,5 +19,5 @@ public class QueryParamDto {
     /**用户id*/
     private long userId;
     private int pageNum = 1;
-    private int pageSize = 10;
+    private int pageSize = 15;
 }

src/main/resources/application.properties

@@ -37,7 +37,7 @@ spring.http.multipart.maxRequestSize=10000Mb
 token.expire.seconds=7200
 #\u6587\u4EF6\u4E0A\u4F20
 spring.servlet.multipart.enabled=true
-zhly.aq.enable=false
+zhly.aq.enable=true
 #\u6587\u4EF6\u8FC7\u6EE4
 zhly.aq.file.suffix=woff,js,css,html,woff2,lang,map,png,jpg
 #\u9759\u6001\u8D44\u6E90 \u4E0D\u62E6\u622A

src/main/resources/static/css/synthesisQuery/synthesisQuery.css

@@ -90,7 +90,7 @@ body {
     height: calc(100% - 200px);
 }
 
-.layui-flow-more{
+.layui-flow-more {
     width: 100%;
 }
 
@@ -126,10 +126,12 @@ body {
     height: 15%;
     justify-content: space-between;
 }
-.imgData2>p{
+
+.imgData2 > p {
     margin: 0 10px;
 }
-.imgData2>p:nth-child(1){
+
+.imgData2 > p:nth-child(1) {
     color: #999;
 }
 
@@ -138,44 +140,63 @@ body {
     height: 15%;
     justify-content: start;
 }
-.imgData3>p{
+
+.imgData3 > p {
     margin: 0 10px;
 }
-.imgData3>p:nth-child(1){
+
+.imgData3 > p:nth-child(1) {
     color: #666;
     font-weight: bold;
 }
 
-.img-color1{
+.img-color1 {
     background-color: #FEF1F1;
     color: #F36C6C;
     padding: 2px 10px;
 }
 
-.img-color2{
+.img-color2 {
     background-color: #EFFBF6;
     color: #5AD8A6;
     padding: 2px 10px;
 }
 
-.img-color3{
+.img-color3 {
     background-color: #FFF9EA;
     color: #FFC328;
     padding: 2px 10px;
 }
 
-.img-color4{
+.img-color4 {
     background-color: #FCF2FA;
     color: #F66CD7;
     padding: 2px 10px;
 }
 
-.img-color5{
+.img-color5 {
     background-color: #E6F9F9;
     color: #00CCDD;
     padding: 2px 10px;
 }
 
+.hidden-actions {
+    width: auto;
+    height: 250px;
+    display: none;
+    position: relative;
+    top: -250px;
+    background: rgba(14, 14, 14, 0.3);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.hidden-btn {
+    width: 100%;
+    height: 100%;
+    justify-content: space-evenly;
+}
+
 .layui-input:hover,
 .layui-select:hover,
 .layui-textarea:hover {

src/main/resources/static/js/synthesisQuery/synthesisQuery.js

@@ -5,11 +5,16 @@ layui.use(["form", 'laydate', 'flow'], function () {
     form = layui.form;
     laydate = layui.laydate;
     flow = layui.flow;
+    dataFlow();
+});
+
+/**数据流加载*/
+function dataFlow() {
     flow.load({
         elem: '#ID-flow-demo', // 流加载容器
         scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
         end: '数据加载完毕',
-        direction:'bottom',
+        direction: 'bottom',
         done: function (page, next) { // 执行下一页的回调
             console.error(page);
             pageNum = page;
@@ -17,13 +22,17 @@ layui.use(["form", 'laydate', 'flow'], function () {
             let returnData = loadData();
             if (returnData != null) {
                 lis = initImgData(returnData.data.list)
-                next(lis.join(''), page < returnData.data.total/15);
+                next(lis.join(''), page < returnData.data.total / 15);
+                $('.img-info').on('mouseenter', function () {
+                    this.querySelector('.hidden-actions').style.display = 'block';
+                });
+                $('.img-info').on('mouseleave', function () {
+                    this.querySelector('.hidden-actions').style.display = 'none';
+                });
             }
         }
     });
-
-});
-
+}
 
 
 /*切换查询类型*/
@@ -43,21 +52,7 @@ function changeType(type, that) {
         $(that).prev().removeClass("checkedElement").addClass("noCheckedElement");
     }
     $('#ID-flow-demo').empty();
-    flow.load({
-        elem: '#ID-flow-demo', // 流加载容器
-        scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
-        end: '数据加载完毕',
-        direction:'bottom',
-        done: function (page, next) { // 执行下一页的回调
-            console.error(page);
-            let lis = [];
-            let returnData = loadData();
-            if (returnData != null) {
-                lis = initImgData(returnData.data.list)
-                next(lis.join(''), page < returnData.data.total/15);
-            }
-        }
-    });
+    dataFlow();
 }
 
 /**加载图片数据*/
@@ -101,10 +96,32 @@ function initImgData(list) {
                 "        </div>" +
                 "        <div class='imgData3 layout'>" +
                 "            <p>" + item.sourceTypeName + "</p>" +
-                "            <p>" + item.id.substr(0,10) + "</p>" +
+                "            <p>" + item.id.substr(0, 10) + "</p>" +
                 "        </div>" +
+                "        <div class='hidden-actions'><div class='hidden-btn layout'>" +
+                "           <button class='btn-edit' onclick='viewImg("+JSON.stringify(item)+")'>放大</button>" +
+                "           <button class='btn-delete' onclick='imgDownLoad("+JSON.stringify(item)+")'>原图下载</button>" +
+                "           <button class='btn-delete' onclick='waterImgDownLoad("+JSON.stringify(item)+")'>水印下载</button>" +
+                            (item.collectStatus === '0' ? "<button class='btn-delete' onclick='collectImg("+JSON.stringify(item)+",1)'>收藏</button>":"<button class='btn-delete' onclick='collectImg("+JSON.stringify(item)+",2)'>取消收藏</button>")  +
+                "         </div></div>" +
                 "    </div>");
         })
     }
     return htmlArr;
 }
+
+function viewImg(item) {
+
+}
+
+function imgDownLoad(item) {
+
+}
+
+function waterImgDownLoad(item) {
+
+}
+
+function collectImg(item,type) {
+
+}