项目分类统计

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

@@ -127,10 +127,10 @@ body {
     height: 70%;
 }
 
-.imgData img {
+.imgData img, .info-img img {
     width: 100%;
     height: 100%;
-    object-fit: contain; /* 或 contain */
+    /*object-fit: contain; !* 或 contain *!*/
 }
 
 .imgData2 {
@@ -192,7 +192,52 @@ body {
     padding: 2px 10px;
 }
 
-.hidden-actions {
+.list-info {
+    width: 100%;
+    margin: 0 1% 1% 0;
+    background-color: #fff;
+    padding: 0 2%;
+    box-sizing: border-box;
+}
+
+.info-data, .info-data2 {
+    justify-content: space-between;
+    margin: 1% 0;
+}
+
+.info-data2 {
+    justify-content: start;
+}
+
+.info-data > p:nth-child(1) {
+    color: #999;
+    font-weight: bold;
+}
+
+.info-data2 > p:nth-child(1) {
+    width: 5%;
+    color: #333;
+    font-weight: bold;
+}
+
+.info-data2 > p:nth-child(2) {
+    width: 95%;
+    color: #333;
+}
+
+.info-img {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap
+}
+
+.info-img > div {
+    width: 19%;
+    height: 150px;
+    margin: 0 0.8% 1% 0;
+}
+
+.hidden-actions,.hidden-actions2 {
     width: auto;
     height: 250px;
     display: none;
@@ -202,6 +247,10 @@ body {
     border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
+.hidden-actions2{
+    top: -150px;
+    height: 150px;
+}
 
 .hidden-btn {
     width: 100%;

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

@@ -20,7 +20,6 @@ layui.define(["layer"], function (exports) {
                 }
             });
             let op_width = $(".layui-anim-rl").outerWidth();
-            alert(op_width)
             $(".layui-layer-shade")
                 .off("click")
                 .on("click", function () {

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

@@ -1,6 +1,7 @@
 let form, laydate, flow, layer, rightPopup;
-let pageNum = 1, pageSize = 15; // 定义分页
+let pageNum = 1, pageSize = 15; // 图片定义分页
-let queryType = 2; // 默认最近上传
+let pageNum2 = 1, pageSize2 = 2; // 列表定义分页
+let queryType = 1; // 默认图片
 function setParams(obj) {
     layui.config({
         base: "../../js/layui-v2.9.14/layui/", //此处路径请自行处理, 可以使用绝对路径
@@ -29,14 +30,29 @@ function dataFlow() {
             let lis = [];
             let returnData = loadData();
             if (returnData != null) {
+                if (queryType === 1) { // 图片
                     lis = initImgData(returnData.data.list)
-                next(lis.join(''), page < returnData.data.total / 15);
+                } else { // 列表
+                    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 () {
                         this.querySelector('.hidden-actions').style.display = 'block';
                     });
                     $('.img-info').on('mouseleave', function () {
                         this.querySelector('.hidden-actions').style.display = 'none';
                     });
+                } else {
+                    $('.img-data').on('mouseenter', function () {
+                        this.querySelector('.hidden-actions2').style.display = 'block';
+                    });
+                    $('.img-data').on('mouseleave', function () {
+                        this.querySelector('.hidden-actions2').style.display = 'none';
+                    });
+                }
             }
         }
     });
@@ -46,11 +62,20 @@ function dataFlow() {
 function loadData() {
     let returnData = null;
     let url = dataUrl + "/backstage/synthesisQuery/getImgList"
-    let obj = {
+    let obj = {}
+    if (queryType === 1) { // 图片
+        obj = {
             pageNum: pageNum,
             pageSize: pageSize,
             queryType: queryType
         }
+    } else { // 列表
+        obj = {
+            pageNum: pageNum2,
+            pageSize: pageSize2,
+            queryType: queryType
+        }
+    }
     let params = {
         encryptedData: encryptCBC(JSON.stringify(obj))
     }
@@ -118,6 +143,176 @@ function initImgData(list) {
 
 }
 
+/**1.图片 2.列表*/
+function changeType(that, type) {
+    if (type === 1) {
+        $(that).attr('src', '../../img/synthesisQuery/photo_check.png');
+        $(that).next().attr('src', '../../img/synthesisQuery/list.png');
+    } else {
+        $(that).attr('src', '../../img/synthesisQuery/list_check.png');
+        $(that).prev().attr('src', '../../img/synthesisQuery/photo.png');
+    }
+    queryType = type;
+    pageNum = 1;
+    pageNum2 = 1;
+    $('#ID-flow-demo').empty();
+    dataFlow();
+}
+
+
+/*图片类型查询*/
+function queryByType(that, type) {
+    $('.type-num').each(function () {
+        $(this).removeClass('type-num-check');
+    })
+    $(that).addClass('type-num-check');
+}
+
+/**渲染列表图片*/
+function initListData(list) {
+    let htmlArr = [];
+    if (list && list.length > 0) {
+        $.each(list, function (index, item) {
+            let html = "<div class='list-info'>" +
+                "        <div class='info-data layout'>" +
+                "            <p>" + item.uploadTime + "</p>" +
+                "            <p class='img-color" + (item.uploadType) + "'>" + item.uploadTypeName + "</p>" +
+                "        </div>" +
+                setBasicInfo(item) +
+                "    </div>"
+            console.log(html)
+            htmlArr.push(html);
+        })
+    }
+    return htmlArr;
+
+    /**设置安全违章\质量检测\安全措施落实\协调照片\重要事项及宣传类*/
+    function setBasicInfo(item) {
+        let html = '';
+        if (item.uploadType === '1') { // 安全违章
+            html += "<div class='info-data2 layout'>" +
+                "<p>违章地点：</p>" +
+                "<p>" + item.id + "</p>" +
+                "</div>" +
+                "<div class='info-data2 layout'>" +
+                "<p>违章描述：</p>" +
+                "<p>施工人员未正确佩戴安全帽，存在安全隐患</p>" +
+                "</div>" +
+                "<div class='info-img'>" +
+                setImgData() +
+                "</div>" +
+                setRectData(item);
+        } else if (item.uploadType === '2') { // 质量检测
+            html += "<div class='info-data2 layout'>" +
+                "<p>检查地点</p>" +
+                "<p>工地 A 区施工现场 3 号楼</p>" +
+                "</div>" +
+                "<div class='info-data2 layout'>" +
+                "<p>检查描述：</p>" +
+                "<p>施工人员未正确佩戴安全帽，存在安全隐患</p>" +
+                "</div>" +
+                "<div class='info-img'>" +
+                setImgData() +
+                "</div>" +
+                setRectData(item);
+        } else if (item.uploadType === '3') { // 安全措施落实
+            html += "<div class='info-data2 layout'>" +
+                "<p>检查地点</p>" +
+                "<p>工地 A 区施工现场 3 号楼</p>" +
+                "</div>" +
+                "<div class='info-data2 layout'>" +
+                "<p>检查描述：</p>" +
+                "<p>施工人员未正确佩戴安全帽，存在安全隐患</p>" +
+                "</div>" +
+                "<div class='info-img'>" +
+                setImgData() +
+                "</div>";
+        } else if (item.uploadType === '4') { // 协调照片
+            html += "<div class='info-data2 layout'>" +
+                "<p>建设前描述</p>" +
+                "<p>工地 A 区施工现场 3 号楼</p>" +
+                "</div>" +
+                "<div class='info-img'>" +
+                setImgData() +
+                "</div>" +
+                "<div class='info-data2 layout'>" +
+                "<p>建设中描述：</p>" +
+                "<p>施工人员未正确佩戴安全帽，存在安全隐患</p>" +
+                "</div>" +
+                "<div class='info-img'>" +
+                setImgData() +
+                "</div>" +
+                "<div class='info-data2 layout'>" +
+                "<p>恢复后描述：</p>" +
+                "<p>施工人员未正确佩戴安全帽，存在安全隐患</p>" +
+                "</div>" +
+                "<div class='info-img'>" +
+                setImgData() +
+                "</div>";
+
+        } else if (item.uploadType === '5') { // 重要事项及宣传类
+            html += "<div class='info-data2 layout'>" +
+                "<p>标题</p>" +
+                "<p>工地 A 区施工现场 3 号楼</p>" +
+                "</div>" +
+                "<div class='info-data2 layout'>" +
+                "<p>内容：</p>" +
+                "<p>施工人员未正确佩戴安全帽，存在安全隐患</p>" +
+                "</div>" +
+                "<div class='info-img'>" +
+                setImgData() +
+                "</div>";
+        }
+        return html;
+
+        function setImgData() {
+            let list = [{compressFilePath: '../../img/synthesisQuery/7.jpg'}, {compressFilePath: '../../img/synthesisQuery/7.jpg'}, {compressFilePath: '../../img/synthesisQuery/7.jpg'}, {compressFilePath: '../../img/synthesisQuery/7.jpg'}, {compressFilePath: '../../img/synthesisQuery/7.jpg'}, {compressFilePath: '../../img/synthesisQuery/7.jpg'}];
+            let cent = '';
+            $.each(list, function (index, item) {
+                cent += "<div class='img-data'>" +
+                    "<img src=" + item.compressFilePath + ">" +
+                    "<div class='hidden-actions2'><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 cent;
+        }
+
+        /**设置整改数据*/
+        function setRectData(item) {
+            let cent2 = '';
+            if (item.rectStatus === '1') { // 已整改
+                cent2 += "<div class='info-data2 layout'>" +
+                    "<p>整改说明：</p>" +
+                    "<p>施工人员已进行安全教育</p>" +
+                    "</div>" +
+                    "<div class='info-img'>" +
+                    setImgData() +
+                    "</div>";
+            }
+            return cent2;
+        }
+    }
+
+
+    // 设置收藏按钮
+    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 viewImg(item) {
     layer.photos({
@@ -163,11 +358,3 @@ function collectImg(that, item, type) {
 function highSearch() {
     rightPopup.rightPopupLayer("../../pages/synthesisQuery/highSearchForm.html", JSON.stringify({}), ["50%", "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/synthesisQuery.js

@@ -119,11 +119,11 @@ function initImgData(list) {
     // 设置收藏按钮
     function setCollectImg(item) {
         if (item.collectStatus === '0') {
-            return "<div collectStatus=" + item.collectStatus + " class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
+            return "<div class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
-                "<div style='display: none;' collectStatus=" + item.collectStatus + " class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></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;' collectStatus=" + item.collectStatus + " class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
+            return "<div style='display: none;' class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",0)'><div title='收藏' class='img-collect'></div></div>" +
-                "<div collectStatus=" + item.collectStatus + " class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
+                "<div class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
         }
     }
 

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

@@ -31,6 +31,10 @@
                     <img src="../../img/synthesisQuery/high_search.png" alt="高级筛选">
                     <p>高级筛选</p>
                 </div>
+                <div class="layui-inline layout" style="width: 100px;justify-content: space-evenly;">
+                    <img style="cursor: pointer;" title="按照图片类型统计" onclick="changeType(this,1)" src="../../img/synthesisQuery/photo_check.png">
+                    <img style="cursor: pointer;" title="按照列表统计" onclick="changeType(this,2)" src="../../img/synthesisQuery/list.png">
+                </div>
             </div>
         </form>
     </div>