项目分类统计

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;
 }

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("<div class='img-info2'>" +
+                "        <div class='img-viewer layout'>\n" +
+                "             <img src='" + item.compressFilePath + "'>" +
+                "        </div>" +
+                "        <div class='hidden-actions3'><div class='hidden-btn layout'>" +
+                "           <div class='layout' onclick='viewImg(" + JSON.stringify(item) + ")'><div class='img-view' title='放大'></div></div>" +
+                "           <div class='layout' onclick='imgDownLoad(" + JSON.stringify(item) + ")'><div title='原图下载' class='img-download'></div></div>" +
+                "           <div class='layout' onclick='waterImgDownLoad(" + JSON.stringify(item) + ")'><div title='水印下载' class='img-water'></div></div>" +
+                setCollectImg(item) +
+                "         </div></div>" +
+                "    </div>");
+        })
+    }
+    return htmlArr;
+
+
+    // 设置收藏按钮
+    function setCollectImg(item) {
+        if (item.collectStatus === '0') {
+            return "<div class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
+                "<div style='display: none;' class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
+        } else {
+            return "<div style='display: none;' class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
+                "<div class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
+        }
+    }
+
+    // 设置收藏图标
+    function setCollectData(item) {
+        if (item.collectStatus === '1') {
+            return "<img src='../../img/synthesisQuery/collect_check.png'>";
+        }
+        return "<img style='display:none;' src='../../img/synthesisQuery/collect_check.png'>";
+    }
+
+}
+
+/**放大*/
+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');
+}

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

@@ -59,7 +59,6 @@ function initTable(dataList, limit, page) {
         limit: limit,
         cols: [
             [
-                //表头 return '<span style="color:#19BE6B"> ● </span>已派车';
                 {
                     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 '<span style="color:#409EFF;font-weight: bold;">0</span>';
+                        return "<div style='width: 50px;height: 100%;cursor: pointer;' onclick='viewImg("+JSON.stringify(d)+",0)'><span style='color:#409EFF;font-weight: bold;'>0</span></div>";
                     }
                 },
                 {
                     field: "username", title: "安全违章", width: "8%", unresize: true, align: "center",
                     templet: function (d) {
-                        return '<span style="color:#F56C6C;font-weight: bold;">0</span>';
+                        return "<div style='width: 50px;height: 100%;cursor: pointer;' onclick='viewImg("+JSON.stringify(d)+",1)'><span style='color:#F56C6C;font-weight: bold;'>0</span></div>";
                     }
                 },
                 {
                     field: "username", title: "质量检查", width: "8%", unresize: true, align: "center",
                     templet: function (d) {
-                        return '<span style="color:#80E1BB;font-weight: bold;">0</span>';
+                        return "<div style='width: 50px;height: 100%;cursor: pointer;' onclick='viewImg("+JSON.stringify(d)+",2)'><span style='color:#80E1BB;font-weight: bold;'>0</span></div>";
                     }
                 },
                 {
                     field: "username", title: "安全措施落实", width: "10%", unresize: true, align: "center",
                     templet: function (d) {
-                        return '<span style="color:#FFC328;font-weight: bold;">0</span>';
+                        return "<div style='width: 50px;height: 100%;cursor: pointer;' onclick='viewImg("+JSON.stringify(d)+",3)'><span style='color:#FFC328;font-weight: bold;'>0</span></div>";
                     }
                 },
                 {
                     field: "username", title: "协调照片 ", width: "8%", unresize: true, align: "center",
                     templet: function (d) {
-                        return '<span style="color:#F56CCF;font-weight: bold;">0</span>';
+                        return "<div style='width: 50px;height: 100%;cursor: pointer;' onclick='viewImg("+JSON.stringify(d)+",4)'><span style='color:#F56CCF;font-weight: bold;'>0</span></div>";
                     }
                 },
                 {
                     field: "username", title: "重要事项及宣传 ", width: "10%", unresize: true, align: "center",
                     templet: function (d) {
-                        return '<span style="color:#06B6D4;font-weight: bold;">0</span>';
+                        return "<div style='width: 50px;height: 100%;cursor: pointer;' onclick='viewImg("+JSON.stringify(d)+",5)'><span style='color:#06B6D4;font-weight: bold;'>0</span></div>";
                     }
                 },
                 {
@@ -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);
+}

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 () {

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

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>图片预览</title>
+    <link rel="stylesheet" href="../../js/layui-v2.9.14/layui/css/layui.css">
+    <link rel="stylesheet" href="../../css/synthesisQuery/synthesisQuery.css">
+    <link rel="stylesheet" href="../../css/font.css">
+    <script src="../../js/libs/jquery-3.7.0.min.js" charset="UTF-8" type="text/javascript"></script>
+    <script src="../../js/layui-v2.9.14/layui/layui.js" charset="UTF-8" type="text/javascript"></script>
+    <script src="../../js/publicJs.js"></script>
+    <script src="../../js/commonUtils.js"></script>
+    <script src="../../js/openIframe.js"></script>
+    <script src="../../js/my/aes.js"></script>
+    <script src="../../js/ajaxRequest.js"></script>
+</head>
+<body>
+<div id="main-box">
+    <div class="flow-demo layout" id="ID-flow-demo">
+
+    </div>
+</div>
+</body>
+<script src="../../js/synthesisQuery/photoView.js" charset="UTF-8" type="text/javascript"></script>
+</html>