bonus
/
yn_img_tool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

项目分类统计

This commit is contained in:
cwchen 2025-04-01 18:12:19 +08:00
parent b032611088
commit 63d2786e8c
9 changed files with 274 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/main/resources/static/css/synthesisQuery/synthesisQuery.css
View File

@ -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%;

BIN
src/main/resources/static/img/synthesisQuery/list.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 446 B

BIN
src/main/resources/static/img/synthesisQuery/list_check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 432 B

BIN
src/main/resources/static/img/synthesisQuery/photo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 605 B

BIN
src/main/resources/static/img/synthesisQuery/photo_check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 583 B

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

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

221
src/main/resources/static/js/synthesisQuery/proClassifyStatisticsDetail.js
View File

@ -1,12 +1,13 @@
let form, laydate, flow,layer,rightPopup;
let pageNum = 1, pageSize = 15; // 定义分页
let queryType = 2; // 默认最近上传
function setParams(obj){
let form, laydate, flow, layer, rightPopup;
let pageNum = 1, pageSize = 15; // 图片定义分页
let pageNum2 = 1, pageSize2 = 2; // 列表定义分页
let queryType = 1; // 默认图片
function setParams(obj) {
layui.config({
base: "../../js/layui-v2.9.14/layui/", //此处路径请自行处理, 可以使用绝对路径
}).extend({
rightPopup: "rightPopup2",
}).use(["form", 'laydate', 'flow','layer','rightPopup'], function () {
}).use(["form", 'laydate', 'flow', 'layer', 'rightPopup'], function () {
form = layui.form;
laydate = layui.laydate;
flow = layui.flow;
@ -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({
@ -160,14 +355,6 @@ 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');
function highSearch() {
rightPopup.rightPopupLayer("../../pages/synthesisQuery/highSearchForm.html", JSON.stringify({}), ["50%", "100%"]);
}

8
src/main/resources/static/js/synthesisQuery/synthesisQuery.js
View File

@ -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>" +
"<div style='display: none;' collectStatus=" + item.collectStatus + " class='layout' onclick='collectImg(this," + JSON.stringify(item) + ",1)'><div title='取消收藏' class='img-collect-check'></div></div>";
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;' 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>";
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>";
}
}

4
src/main/resources/static/pages/synthesisQuery/proClassifyStatisticsDetail.html
View File

@ -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>