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:59:41 +08:00
parent 63d2786e8c
commit ee13847917
5 changed files with 215 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

163
src/main/resources/static/js/synthesisQuery/photoView.js Normal file
View File

@ -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');
}

19
src/main/resources/static/js/synthesisQuery/proClassifyStatistics.js
View File

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

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

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

25
src/main/resources/static/pages/synthesisQuery/photoView.html Normal file
View File

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