项目分类统计

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

@@ -5,6 +5,7 @@ body {
     margin: 0.15% 0 0 0.25%;
     padding: 0;
     font-family: 'Alibaba PuHuiTi R';
+    background-color: rgb(246, 245, 245);
 }
 
 .layout {
@@ -39,7 +40,8 @@ body {
     background-color: #fff;
     cursor: pointer;
 }
-.type-num-check{
+
+.type-num-check {
     background-color: #E3EBF5;
 }
 
@@ -76,6 +78,12 @@ body {
     justify-content: space-between;
 }
 
+#batch-type-box {
+    width: 100%;
+    height: 60px;
+    justify-content: end;
+}
+
 #change-type-box p {
     cursor: pointer;
 }
@@ -145,7 +153,7 @@ body {
     justify-content: space-between;
 }
 
-.imgData3 > p,.imgData3 > img {
+.imgData3 > p, .imgData3 > img {
     margin: 0 10px;
 }
 
@@ -200,51 +208,60 @@ body {
     height: 100%;
     justify-content: space-evenly;
 }
-.hidden-btn>div{
+
+.hidden-btn > div {
     width: 50px;
     height: 50px;
     border-radius: 50px;
     background-color: #fff;
 }
-.hidden-btn>div>div{
+
+.hidden-btn > div > div {
     width: 24px;
     height: 24px;
     cursor: pointer;
 }
-.img-view{
+
-    background: url("../../img/synthesisQuery/view.png") no-repeat  0 0 / 100% 100% ;
+.img-view {
-}
+    background: url("../../img/synthesisQuery/view.png") no-repeat 0 0 / 100% 100%;
-.img-view:hover{
-    background: url("../../img/synthesisQuery/view_check.png") no-repeat 0 0 / 100% 100% ;
 }
 
-.img-download{
+.img-view:hover {
-    background: url("../../img/synthesisQuery/download.png") no-repeat  0 0 / 100% 100% ;
+    background: url("../../img/synthesisQuery/view_check.png") no-repeat 0 0 / 100% 100%;
-}
-.img-download:hover{
-    background: url("../../img/synthesisQuery/download_check.png") no-repeat 0 0 / 100% 100% ;
 }
 
-.img-water{
+.img-download {
-    background: url("../../img/synthesisQuery/water.png") no-repeat  0 0 / 100% 100% ;
+    background: url("../../img/synthesisQuery/download.png") no-repeat 0 0 / 100% 100%;
-}
-.img-water:hover{
-    background: url("../../img/synthesisQuery/water_check.png") no-repeat 0 0 / 100% 100% ;
 }
 
-.img-collect{
+.img-download:hover {
-    background: url("../../img/synthesisQuery/collect.png") no-repeat  0 0 / 100% 100% ;
+    background: url("../../img/synthesisQuery/download_check.png") no-repeat 0 0 / 100% 100%;
-}
-.img-collect:hover{
-    background: url("../../img/synthesisQuery/collect_check.png") no-repeat 0 0 / 100% 100% ;
 }
 
-.img-collect-check{
+.img-water {
-    background: url("../../img/synthesisQuery/collect_check.png") no-repeat  0 0 / 100% 100% ;
+    background: url("../../img/synthesisQuery/water.png") no-repeat 0 0 / 100% 100%;
 }
-.img-collect-check:hover{
+
-    background: url("../../img/synthesisQuery/collect.png") no-repeat 0 0 / 100% 100% ;
+.img-water:hover {
+    background: url("../../img/synthesisQuery/water_check.png") no-repeat 0 0 / 100% 100%;
 }
+
+.img-collect {
+    background: url("../../img/synthesisQuery/collect.png") no-repeat 0 0 / 100% 100%;
+}
+
+.img-collect:hover {
+    background: url("../../img/synthesisQuery/collect_check.png") no-repeat 0 0 / 100% 100%;
+}
+
+.img-collect-check {
+    background: url("../../img/synthesisQuery/collect_check.png") no-repeat 0 0 / 100% 100%;
+}
+
+.img-collect-check:hover {
+    background: url("../../img/synthesisQuery/collect.png") no-repeat 0 0 / 100% 100%;
+}
+
 .layui-input:hover,
 .layui-select:hover,
 .layui-textarea:hover {

src/main/resources/static/css/table-common2.css

@@ -832,3 +832,46 @@ input:-ms-input-placeholder {
     height: 40px;
     letter-spacing: 1px;
 }
+
+/* layer 右侧呼出 start */
+@keyframes layui-rl {
+    from {
+        transform: translateX(0px);
+        -webkit-transform: translateX(0px);
+        -moz-transform: translateX(0px);
+        -ms-transform: translateX(0px);
+        -o-transform: translateX(0px);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+@-webkit-keyframes layui-rl {
+    from {
+        transform: translateX(0px);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+.layui-anim {
+    -webkit-animation-duration: .3s;
+    animation-duration: .3s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.layui-anim-rl {
+    -webkit-animation-name: layui-rl;
+    animation-name: layui-rl;
+}
+
+.layui-layer-adminRight {
+    box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
+    border-radius: 0;
+    overflow: auto;
+}
+
+/* layer 右侧呼出 end */

src/main/resources/static/js/layui-v2.9.14/layui/rightPopup.js

@@ -9,6 +9,7 @@ layui.define(["layer"], function (exports) {
                 offset: ["0px", "100%"],
                 skin: "layui-anim layui-anim-rl layui-layer-adminRight",
                 closeBtn: 0,
+                move:false,
                 content: content,
                 shadeClose: true,
                 area: area,

src/main/resources/static/js/layui-v2.9.14/layui/rightPopup2.js

@@ -0,0 +1,41 @@
+
+layui.define(["layer"], function (exports) {
+    var layer = layui.layer;
+    var obj = {
+        rightPopupLayer: function (content, obj,area) {
+            let layerIndex = parent.layer.open({
+                type: 2,
+                title: "高级筛选",
+                offset: ["0px", "100%"],
+                skin: "layui-anim layui-anim-rl layui-layer-adminRight",
+                closeBtn: 0,
+                move:false,
+                content: content,
+                shadeClose: true,
+                area: area,
+                success: function (layero, index) {
+                    let body = layer.getChildFrame('body', index);
+                    let iframeWin = parent.window[layero.find('iframe')[0]['name']];//获得iframe页的窗口对象，执行iframe页的方法：
+                    iframeWin.setParams(obj);//调用子页面的方法，页面锁定
+                }
+            });
+            let op_width = $(".layui-anim-rl").outerWidth();
+            alert(op_width)
+            $(".layui-layer-shade")
+                .off("click")
+                .on("click", function () {
+                    $(".layui-anim-rl")
+                        .animate(
+                            {left: "+=" + op_width + "px"},
+                            300,
+                            "linear",
+                            function () {
+                                $(".layui-anim-rl").remove();
+                                $(".layui-layer-shade").remove();
+                            }
+                        );
+                });
+        },
+    };
+    exports("rightPopup", obj);
+});

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

@@ -1,18 +1,20 @@
 let form, laydate, flow,layer,rightPopup;
 let pageNum = 1, pageSize = 15; // 定义分页
 let queryType = 2; // 默认最近上传
-layui.config({
+function setParams(obj){
+    layui.config({
         base: "../../js/layui-v2.9.14/layui/", //此处路径请自行处理, 可以使用绝对路径
-}).extend({
+    }).extend({
-    rightPopup: "rightPopup",
+        rightPopup: "rightPopup2",
-}).use(["form", 'laydate', 'flow','layer','rightPopup'], function () {
+    }).use(["form", 'laydate', 'flow','layer','rightPopup'], function () {
         form = layui.form;
         laydate = layui.laydate;
         flow = layui.flow;
         layer = layui.layer;
         rightPopup = layui.rightPopup;
         dataFlow();
-});
+    });
+}
 
 /**数据流加载*/
 function dataFlow() {
@@ -40,27 +42,6 @@ function dataFlow() {
     });
 }
 
-
-/*切换查询类型*/
-function changeType(type, that) {
-    queryType = type;
-    pageNum = 1;
-    $(that).removeClass("noCheckedElement");
-    if ($(that).hasClass("checkedElement") && type === 1) {
-        $(that).next().removeClass("checkedElement").addClass("noCheckedElement");
-    } else if (!$(that).hasClass("checkedElement") && type === 1) {
-        $(that).addClass("checkedElement");
-        $(that).next().removeClass("checkedElement").addClass("noCheckedElement");
-    } else if ($(that).hasClass("checkedElement") && type === 2) {
-        $(that).prev().removeClass("checkedElement").addClass("noCheckedElement");
-    } else if (!$(that).hasClass("checkedElement") && type === 2) {
-        $(that).addClass("checkedElement");
-        $(that).prev().removeClass("checkedElement").addClass("noCheckedElement");
-    }
-    $('#ID-flow-demo').empty();
-    dataFlow();
-}
-
 /**加载图片数据*/
 function loadData() {
     let returnData = null;

src/main/resources/static/pages/synthesisQuery/proClassifyStatisticsDetail.html

@@ -91,10 +91,10 @@
             </div>
         </div>
     </div>
-    <!--我的收藏、最近上传-->
+    <!--批量原图下载、批量水印下载-->
-    <div id="change-type-box" class="layout">
+    <div id="batch-type-box" class="layout">
-        <p class="noCheckedElement" onclick="changeType(1,this)">我的收藏</p>
+        <button type="button" class="layui-btn layui-bg-blue">批量原图下载</button>
-        <p class="checkedElement" onclick="changeType(2,this)">最近上传</p>
+        <button type="button" class="layui-btn layui-bg-blue">批量水印下载</button>
     </div>
     <div id="img-box">
         <div class="flow-demo layout" id="ID-flow-demo">