项目分类统计

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

@@ -4,7 +4,7 @@ body {
     height: 100%;
     margin: 0;
     padding: 0;
-    font-family: 'Microsoft YaHei';
+    font-family: 'Alibaba PuHuiTi R';
     color: #262626;
     letter-spacing: 1px;
 }
@@ -18,15 +18,15 @@ body {
 
 #main-box {
     width: 100%;
-    height: calc(100% - 80px);
+    height: calc(100% - 60px);
     overflow-y: auto;
-    padding: 2%;
+    padding: 1%;
     box-sizing: border-box;
 }
 
 .btn-box {
     width: 100%;
-    height: 80px;
+    height: 60px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;

src/main/resources/static/js/openIframe.js

@@ -39,4 +39,25 @@ function openIframe2(id, title, content, width, height, params) {
             }
         }
     });
+}
+
+function openIframeByParamObj(id, title, content, width, height, paramsObj) {
+    let layerIndex = layer.open({
+        id: id,
+        type: 2,
+        title: ['<div style="border-left: 3px solid #00377A;color:#00377A;font-size:18px;display: flex;letter-spacing:1px;align-items: center;height: 20px;padding: 0 10px;font-weight: bold;">' + title + '</div>', 'font-size:16px;background-color:#f0f0f0;display: flex;align-items: center;'],
+        content: content,
+        shade: 0.3,
+        anim: 2,
+        shadeClose: false,
+        area: [width, height],
+        move: false,
+        success: function () {
+            if (paramsObj) {
+                let iframeWin = window["layui-layer-iframe" + layerIndex];
+                iframeWin.setParams(JSON.stringify(paramsObj));
+            }
+        },
+        end: function () { }
+    });
 }

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

@@ -0,0 +1,169 @@
+let form, layer, table, tableIns;
+let pageNum = 1, limitSize = 10; // 默认第一页，分页数量为10
+layui.use(['form', 'layer', 'table'], function () {
+    form = layui.form;
+    layer = layui.layer;
+    table = layui.table;
+    layui.form.render();
+    pages(1, 10, 1);
+})
+
+function pages(pageNum, pageSize, typeNum) {
+    let params = getReqParams(pageNum, pageSize, typeNum);
+    let url = dataUrl + "/users/getList"
+    ajaxRequest(url, "POST", params, true, function () {
+    }, function (result) {
+        console.log(result);
+        if (result.code === 200) {
+            if (result.data) {
+                initTable(result.data, result.limit, result.curr)
+                laypages(result.count, result.curr, result.limit)
+            }
+        } else if (result.code === 500) {
+            layer.alert(result.msg, {icon: 2})
+        }
+    }, function (xhr) {
+        error(xhr)
+    });
+
+}
+
+function laypages(total, page, limit) {
+    layui.use(['laypage'], function () {
+        let laypage = layui.laypage;
+        laypage.render({
+            elem: 'voi-page',
+            count: total,
+            curr: page,
+            limit: limit,
+            limits: [10, 20, 50, 100, 200, 500],
+            layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
+            groups: 5,
+            jump: function (obj, first) {
+                if (!first) {
+                    pageNum = obj.curr, limitSize = obj.limit;
+                    pages(obj.curr, obj.limit, null);
+                }
+            }
+        });
+    })
+}
+
+/*初始化表格*/
+function initTable(dataList, limit, page) {
+    let loadingMsg = layer.msg("数据加载中,请稍候...", {icon: 16, scrollbar: false, time: 0,});
+    tableIns = table.render({
+        elem: "#table_data",
+        height: "full-130",
+        data: dataList,
+        limit: limit,
+        cols: [
+            [
+                //表头 return '<span style="color:#19BE6B"> ● </span>已派车';
+                {
+                    title: "序号", width: "5%", unresize: true, align: "center",
+                    templet: function (d) {
+                        return (page - 1) * limit + d.LAY_NUM;
+                    }
+                },
+                {field: "loginName", title: "项目名称", width: "23%", unresize: true, align: "center"},
+                {
+                    field: "username", title: "总照片数量", width: "8%", unresize: true, align: "center",
+                    templet: function (d) {
+                        return '<span style="color:#409EFF;font-weight: bold;">0</span>';
+                    }
+                },
+                {
+                    field: "username", title: "安全违章", width: "8%", unresize: true, align: "center",
+                    templet: function (d) {
+                        return '<span style="color:#F56C6C;font-weight: bold;">0</span>';
+                    }
+                },
+                {
+                    field: "username", title: "质量检查", width: "8%", unresize: true, align: "center",
+                    templet: function (d) {
+                        return '<span style="color:#80E1BB;font-weight: bold;">0</span>';
+                    }
+                },
+                {
+                    field: "username", title: "安全措施落实", width: "10%", unresize: true, align: "center",
+                    templet: function (d) {
+                        return '<span style="color:#FFC328;font-weight: bold;">0</span>';
+                    }
+                },
+                {
+                    field: "username", title: "协调照片 ", width: "8%", unresize: true, align: "center",
+                    templet: function (d) {
+                        return '<span style="color:#F56CCF;font-weight: bold;">0</span>';
+                    }
+                },
+                {
+                    field: "username", title: "重要事项及宣传 ", width: "10%", unresize: true, align: "center",
+                    templet: function (d) {
+                        return '<span style="color:#06B6D4;font-weight: bold;">0</span>';
+                    }
+                },
+                {
+                    field: "createTime", title: "最后更新时间", width: "10%", align: "center", templet: 'center',
+                },
+                {
+                    title: "操作", unresize: true, width: "10%", align: "center",
+                    templet: function (d) {
+                        let html = '';
+                        let view = "<a class='layui-icon layui-icon-file'  style='cursor:pointer;' title='详情' onclick='viewData("+JSON.stringify(d)+")'></a>"
+                        let originalDownload = "<a class='layui-icon layui-icon-download-circle'  style='cursor:pointer;' title='原图下载' onclick='delData('" + d.id + "')'></a>"
+                        let waterDownload = "<a class='layui-icon layui-icon-download-circle'  style='cursor:pointer;' title='水印下载'  onclick='addProcesses('" + d.id + "')'></a>";
+                        html = view + originalDownload + waterDownload;
+                        return html;
+                    }
+                },
+            ],
+        ],
+        done: function (res, curr, count) {
+            layer.close(loadingMsg);
+            table.resize("table_data");
+            count || this.elem.next(".layui-table-view").find(".layui-table-header").css("display", "inline-block");
+            count || this.elem.next(".layui-table-view").find(".layui-table-box").css("overflow", "auto");
+        },
+    });
+}
+
+
+// 获取参数
+function getReqParams(page, limit, type) {
+    let obj = {};
+    if (!type) {
+        obj = {
+            page: page + "",
+            limit: limit + "",
+            keyWord: $('#keyWord').val(),
+
+        };
+    } else {
+        obj = {
+            page: '1',
+            limit: '10',
+            keyWord: '',
+        };
+    }
+    obj = {
+        encryptedData: encryptCBC(JSON.stringify(obj))
+    }
+    return obj;
+}
+
+// 查询/重置
+function query(type) {
+    pageNum = 1;
+    pages(1, limitSize);
+}
+
+
+//重置
+function reset() {
+    pages(1, limitSize, 1)
+}
+/**详情*/
+function viewData(obj){
+    openIframeByParamObj("viewData", "详情", "./proClassifyStatisticsDetail.html", "92%", "95%", obj);
+}

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

@@ -0,0 +1,192 @@
+let form, laydate, flow,layer,rightPopup;
+let pageNum = 1, pageSize = 15; // 定义分页
+let queryType = 2; // 默认最近上传
+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-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>" +
+                setCollectData(item) +
+                "        </div>" +
+                "        <div class='hidden-actions'><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 collectStatus=" + item.collectStatus + " 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>";
+        } 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>" +
+                "<div collectStatus=" + item.collectStatus + " 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({}),["50%", "100%"]);
+}
+
+/*图片类型查询*/
+function queryByType(that,type){
+    $('.type-num').each(function(){
+        $(this).removeClass('type-num-check');
+    })
+    $(that).addClass('type-num-check');
+}

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

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../../js/layui-v2.9.14/layui/css/layui.css">
+    <link rel="stylesheet" href="../../css/font.css">
+    <link rel="stylesheet" href="../../css/table-common2.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>
+    <title>项目分类统计</title>
+</head>
+<body>
+<div id="content">
+    <div class="basic-search-box layout">
+        <form class="layui-form basic-form" onsubmit="return false;">
+            <div class="layui-form-item">
+                <div class="layui-inline" style="padding: 0 0 0 10px;">
+                    <div class="layui-input-inline">
+                        <select class="layui-select" lay-search placeholder="请选择工程类型"></select>
+                    </div>
+                </div>
+                <div class="layui-inline" style="padding: 0 0 0 10px;">
+                    <div class="layui-input-inline">
+                        <select class="layui-select" lay-search placeholder="请选择工程"></select>
+                    </div>
+                </div>
+                <div class="layui-inline btns">
+                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm btn-1" onclick="query(1)">查询
+                    </button>
+                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm btn-1" onclick="reset()">重置
+                    </button>
+                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="reset()">导出
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="table-box" table-responsive style="z-index: 1;">
+        <table id="table_data" class="table" lay-filter="table_data"></table>
+        <div id="voi-page" class="layout"></div>
+    </div>
+</div>
+</body>
+<style>
+    .layui-table-init {
+        background-color: transparent !important;
+    }
+</style>
+<script src="../../js/synthesisQuery/proClassifyStatistics.js" charset="UTF-8" type="text/javascript"></script>
+</html>

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

@@ -0,0 +1,106 @@
+<!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 id="search-box">
+        <form class="layui-form">
+            <div class="layui-form-item layout">
+                <div class="layui-input-group">
+                    <input style="width: 600px;" type="text" id="title" name="title" placeholder="搜索标题"
+                           autocomplete="off" class="layui-input" lay-affix="clear">
+                    <div class="layui-input-split layui-input-suffix" style="cursor: pointer;background-color: #fff;">
+                        <i class="layui-icon layui-icon-search"></i>
+                    </div>
+                </div>
+                <div class="layui-inline layout" style="margin-bottom: 0;cursor: pointer;" onclick="highSearch()">
+                    <img src="../../img/synthesisQuery/high_search.png" alt="高级筛选">
+                    <p>高级筛选</p>
+                </div>
+            </div>
+        </form>
+    </div>
+    <!--各类型图片数量-->
+    <div id="type-num-box" class="layout">
+        <div class="type-num layout" onclick="queryByType(this,0)">
+            <div class="layout">
+                <p>总照片数</p>
+                <p>1250</p>
+            </div>
+            <div class="layout">
+                <img src="../../img/synthesisQuery/1.png">
+            </div>
+        </div>
+        <div class="type-num layout" onclick="queryByType(this,1)">
+            <div class="layout">
+                <p>安全违章</p>
+                <p>1250</p>
+            </div>
+            <div class="layout">
+                <img src="../../img/synthesisQuery/2.png">
+            </div>
+        </div>
+        <div class="type-num layout" onclick="queryByType(this,2)">
+            <div class="layout">
+                <p>质量检查</p>
+                <p>1250</p>
+            </div>
+            <div class="layout">
+                <img src="../../img/synthesisQuery/3.png">
+            </div>
+        </div>
+        <div class="type-num layout" onclick="queryByType(this,3)">
+            <div class="layout">
+                <p>安全措施落实</p>
+                <p>1250</p>
+            </div>
+            <div class="layout">
+                <img src="../../img/synthesisQuery/4.png">
+            </div>
+        </div>
+        <div class="type-num layout" onclick="queryByType(this,4)">
+            <div class="layout">
+                <p>协调照片</p>
+                <p>1250</p>
+            </div>
+            <div class="layout">
+                <img src="../../img/synthesisQuery/5.png">
+            </div>
+        </div>
+        <div class="type-num layout" onclick="queryByType(this,5)">
+            <div class="layout">
+                <p>重要事项及宣传类</p>
+                <p>1250</p>
+            </div>
+            <div class="layout">
+                <img src="../../img/synthesisQuery/6.png">
+            </div>
+        </div>
+    </div>
+    <!--我的收藏、最近上传-->
+    <div id="change-type-box" class="layout">
+        <p class="noCheckedElement" onclick="changeType(1,this)">我的收藏</p>
+        <p class="checkedElement" onclick="changeType(2,this)">最近上传</p>
+    </div>
+    <div id="img-box">
+        <div class="flow-demo layout" id="ID-flow-demo">
+        </div>
+    </div>
+</div>
+</body>
+<script src="../../js/synthesisQuery/proClassifyStatisticsDetail.js" charset="UTF-8" type="text/javascript"></script>
+</html>