From ee138479175f046afbdc2bb4ef7507ff6bfb68d0 Mon Sep 17 00:00:00 2001 From: cwchen <1048842385@qq.com> Date: Tue, 1 Apr 2025 18:59:41 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=86=E7=B1=BB=E7=BB=9F?= =?UTF-8?q?=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/synthesisQuery/synthesisQuery.css | 18 +- .../static/js/synthesisQuery/photoView.js | 163 ++++++++++++++++++ .../synthesisQuery/proClassifyStatistics.js | 19 +- .../proClassifyStatisticsDetail.js | 2 - .../pages/synthesisQuery/photoView.html | 25 +++ 5 files changed, 215 insertions(+), 12 deletions(-) create mode 100644 src/main/resources/static/js/synthesisQuery/photoView.js create mode 100644 src/main/resources/static/pages/synthesisQuery/photoView.html diff --git a/src/main/resources/static/css/synthesisQuery/synthesisQuery.css b/src/main/resources/static/css/synthesisQuery/synthesisQuery.css index 8cab3cb..c555ff0 100644 --- a/src/main/resources/static/css/synthesisQuery/synthesisQuery.css +++ b/src/main/resources/static/css/synthesisQuery/synthesisQuery.css @@ -122,12 +122,24 @@ body { background-color: #fff; } +.img-info2 { + width: 19%; + height: 150px; + margin: 0 1% 1% 0; + background-color: #fff; +} + .imgData { width: 100%; height: 70%; } -.imgData img, .info-img img { +.img-viewer { + width: 100%; + height: 100%; +} + +.imgData img, .info-img img,.img-viewer img { width: 100%; height: 100%; /*object-fit: contain; !* 或 contain *!*/ @@ -237,7 +249,7 @@ body { margin: 0 0.8% 1% 0; } -.hidden-actions,.hidden-actions2 { +.hidden-actions,.hidden-actions2,.hidden-actions3 { width: auto; height: 250px; display: none; @@ -247,7 +259,7 @@ body { border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } -.hidden-actions2{ +.hidden-actions2,.hidden-actions3{ top: -150px; height: 150px; } diff --git a/src/main/resources/static/js/synthesisQuery/photoView.js b/src/main/resources/static/js/synthesisQuery/photoView.js new file mode 100644 index 0000000..fcca310 --- /dev/null +++ b/src/main/resources/static/js/synthesisQuery/photoView.js @@ -0,0 +1,163 @@ +let form, laydate, flow,layer,rightPopup; +let pageNum = 1, pageSize = 20; // 定义分页 +function setParams(obj){ + layui.config({ + base: "../../js/layui-v2.9.14/layui/", //此处路径请自行处理, 可以使用绝对路径 + }).extend({ + rightPopup: "rightPopup", + }).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() { + 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-info2').on('mouseenter', function () { + this.querySelector('.hidden-actions3').style.display = 'block'; + }); + $('.img-info2').on('mouseleave', function () { + this.querySelector('.hidden-actions3').style.display = 'none'; + }); + } + } + }); +} + +/**加载图片数据*/ +function loadData() { + let returnData = null; + let url = dataUrl + "/backstage/synthesisQuery/getImgList" + let obj = { + pageNum: pageNum, + pageSize: pageSize, + } + 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("
" + + "
\n" + + " " + + "
" + + "
" + + "
" + + "
" + + "
" + + setCollectImg(item) + + "
" + + "
"); + }) + } + return htmlArr; + + + // 设置收藏按钮 + function setCollectImg(item) { + if (item.collectStatus === '0') { + return "
" + + ""; + } else { + return "" + + "
"; + } + } + + // 设置收藏图标 + function setCollectData(item) { + if (item.collectStatus === '1') { + return ""; + } + return ""; + } + +} + +/**放大*/ +function viewImg(item) { + layer.photos({ + shade: 0.5, + footer: false, + photos: { + "title": "图片预览", + "start": 0, + "data": [ + { + "pid": 1, + "src": "../../img/synthesisQuery/7.jpg", + } + ] + }, + }); +} + +/**放大*/ +function imgDownLoad(item) { + alert(item.id) +} + +/**水印下载*/ +function waterImgDownLoad(item) { + alert(item.id) +} + +/**收藏*/ +function collectImg(that, item, type) { + if (type === 0) { // 收藏 + $(that).next().removeAttr("style"); + $(that).css({'display': 'none'}) + $(that).parent().parent().prev().find('img').eq(0).removeAttr('style') + } else if (type === 1) { // 取消收藏 + $(that).prev().removeAttr("style"); + $(that).css({'display': 'none'}); + $(that).parent().parent().prev().find('img').eq(0).css({'display': 'none'}) + } +} + +/**高级筛选*/ +function highSearch(){ + rightPopup.rightPopupLayer("../../pages/synthesisQuery/highSearchForm.html", JSON.stringify({}),["45%", "100%"]); +} + +/*图片类型查询*/ +function queryByType(that,type){ + $('.type-num').each(function(){ + $(this).removeClass('type-num-check'); + }) + $(that).addClass('type-num-check'); +} diff --git a/src/main/resources/static/js/synthesisQuery/proClassifyStatistics.js b/src/main/resources/static/js/synthesisQuery/proClassifyStatistics.js index eaa992a..c1d20b2 100644 --- a/src/main/resources/static/js/synthesisQuery/proClassifyStatistics.js +++ b/src/main/resources/static/js/synthesisQuery/proClassifyStatistics.js @@ -59,7 +59,6 @@ function initTable(dataList, limit, page) { limit: limit, cols: [ [ - //表头 return ' ● 已派车'; { title: "序号", width: "5%", unresize: true, align: "center", templet: function (d) { @@ -70,37 +69,37 @@ function initTable(dataList, limit, page) { { field: "username", title: "总照片数量", width: "8%", unresize: true, align: "center", templet: function (d) { - return '0'; + return "
0
"; } }, { field: "username", title: "安全违章", width: "8%", unresize: true, align: "center", templet: function (d) { - return '0'; + return "
0
"; } }, { field: "username", title: "质量检查", width: "8%", unresize: true, align: "center", templet: function (d) { - return '0'; + return "
0
"; } }, { field: "username", title: "安全措施落实", width: "10%", unresize: true, align: "center", templet: function (d) { - return '0'; + return "
0
"; } }, { field: "username", title: "协调照片 ", width: "8%", unresize: true, align: "center", templet: function (d) { - return '0'; + return "
0
"; } }, { field: "username", title: "重要事项及宣传 ", width: "10%", unresize: true, align: "center", templet: function (d) { - return '0'; + return "
0
"; } }, { @@ -167,3 +166,9 @@ function reset() { function viewData(obj){ openIframeByParamObj("viewData", "详情", "./proClassifyStatisticsDetail.html", "92%", "95%", obj); } + +/**图片预览*/ +function viewImg(obj,type){ + obj.type = type; + openIframeByParamObj("viewImg", "图片详情", "./photoView.html", "92%", "85%", obj); +} diff --git a/src/main/resources/static/js/synthesisQuery/proClassifyStatisticsDetail.js b/src/main/resources/static/js/synthesisQuery/proClassifyStatisticsDetail.js index f4acdf3..4f609dd 100644 --- a/src/main/resources/static/js/synthesisQuery/proClassifyStatisticsDetail.js +++ b/src/main/resources/static/js/synthesisQuery/proClassifyStatisticsDetail.js @@ -25,7 +25,6 @@ function dataFlow() { end: '数据加载完毕', direction: 'bottom', done: function (page, next) { // 执行下一页的回调 - console.error(page); pageNum = page; let lis = []; let returnData = loadData(); @@ -36,7 +35,6 @@ function dataFlow() { lis = initListData(returnData.data.list) } - console.error(lis) next(lis.join(''), page < returnData.data.total / (queryType === 1 ? pageSize : pageSize2)); if (queryType === 1) { $('.img-info').on('mouseenter', function () { diff --git a/src/main/resources/static/pages/synthesisQuery/photoView.html b/src/main/resources/static/pages/synthesisQuery/photoView.html new file mode 100644 index 0000000..589dfc3 --- /dev/null +++ b/src/main/resources/static/pages/synthesisQuery/photoView.html @@ -0,0 +1,25 @@ + + + + + 图片预览 + + + + + + + + + + + + +
+
+ +
+
+ + + \ No newline at end of file