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

let form, laydate, flow;
let pageNum = 1, pageSize = 15; // 定义分页
let queryType = 2; // 默认最近上传
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',
        done: function (page, next) { // 执行下一页的回调
            console.error(page);
            pageNum = page;
            let lis = [];
            let returnData = loadData();
            if (returnData != null) {
                lis = initImgData(returnData.data.list)
                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';
                });
            }
        }
    });
}


/*切换查询类型*/
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;
    let url = dataUrl + "/backstage/synthesisQuery/getImgList"
    let obj = {
        pageNum: pageNum,
        pageSize: pageSize,
        queryType: queryType
    }
    let params = {
        encryptedData: encryptCBC(JSON.stringify(obj))
    }
    ajaxRequest(url, "POST", params, false, function () {
    }, function (result) {
        if (result.status === 200) {
            console.log(result)
            returnData = result;
        } else {
            layer.msg(result.msg, {icon: 2})
        }
    }, function (xhr) {
        error(xhr)
    });
    return returnData;
}

/**渲染图片*/
function initImgData(list) {
    let htmlArr = [];
    if (list && list.length > 0) {
        $.each(list, function (index, item) {
            htmlArr.push("<div class='img-info'>" +
                "        <div class='imgData layout'>\n" +
                "             <img src='" + item.compressFilePath + "'>" +
                "        </div>" +
                "        <div class='imgData2 layout'>" +
                "            <p>" + item.uploadTime + "</p>" +
                "            <p class='img-color" + (item.uploadType) + "'>" + item.uploadTypeName + "</p>" +
                "        </div>" +
                "        <div class='imgData3 layout'>" +
                "            <p>" + item.sourceTypeName + "</p>" +
                "            <p>" + item.id.substr(0, 10) + "</p>" +
                "        </div>" +
                "        <div class='hidden-actions'><div class='hidden-btn layout'>" +
                "           <div class='layout' onclick='viewImg("+JSON.stringify(item)+")'><div class='img-view'></div></div>" +
                "           <div class='layout' onclick='imgDownLoad("+JSON.stringify(item)+")'><div class='img-download'></div></div>" +
                "           <div class='layout' onclick='waterImgDownLoad("+JSON.stringify(item)+")'><div class='img-water'></div></div>" +
                            (item.collectStatus === '0' ? "<div class='layout' onclick='collectImg("+JSON.stringify(item)+",1)'><div class='img-collect'></div></div>":"<div class='layout' onclick='collectImg("+JSON.stringify(item)+",2)'><div class='img-collect-check' ></div></div>")  +
                "         </div></div>" +
                "    </div>");
        })
    }
    return htmlArr;
}

/**放大*/
function viewImg(item) {
    alert(item.id)
}
/**放大*/
function imgDownLoad(item) {
    alert(item.id)
}
/**水印下载*/
function waterImgDownLoad(item) {
    alert(item.id)
}
/**收藏*/
function collectImg(item,type) {
    alert(item.id)
}