综合查询

This commit is contained in:
cwchen 2025-04-01 13:40:30 +08:00
parent 7719c6470c
commit 39ee81d9f2
8 changed files with 508 additions and 19 deletions

View File

@ -0,0 +1,64 @@
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei';
color: #262626;
letter-spacing: 1px;
}
.layout {
display: flex;
align-items: center;
justify-content: start;
box-sizing: border-box;
}
#main-box {
width: 100%;
height: calc(100% - 80px);
overflow-y: auto;
padding: 2%;
box-sizing: border-box;
}
.btn-box {
width: 100%;
height: 80px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.title {
border-left: 4px solid #409eff;
color: #666;
font-size: 14px;
display: flex;
letter-spacing: 1px;
align-items: center;
height: 20px;
padding: 0 10px;
font-weight: bold;
}
.layui-input-inline {
width: 220px !important;
}
.layui-input:hover,
.layui-select:hover,
.layui-textarea:hover {
border-color: #00377a !important;
box-shadow: 0 0 0 3px rgba(0, 55, 122, .08)
}
.layui-input:focus,
.layui-select:focus,
.layui-textarea:focus {
border-color: #00377a !important;
box-shadow: 0 0 0 3px rgba(0, 55, 122, .08)
}

View File

@ -37,6 +37,10 @@ body {
height: 80px;
border-radius: 6px;
background-color: #fff;
cursor: pointer;
}
.type-num-check{
background-color: #E3EBF5;
}
.type-num > div:nth-child(1) {
@ -138,10 +142,10 @@ body {
.imgData3 {
width: 100%;
height: 15%;
justify-content: start;
justify-content: space-between;
}
.imgData3 > p {
.imgData3 > p,.imgData3 > img {
margin: 0 10px;
}
@ -253,4 +257,47 @@ body {
.layui-textarea:focus {
border-color: #00377a !important;
box-shadow: 0 0 0 3px rgba(0, 55, 122, .08)
}
}
/* layer 右侧呼出 start */
@keyframes layui-rl {
from {
transform: translateX(0px);
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
}
to {
transform: translateX(-100%);
}
}
@-webkit-keyframes layui-rl {
from {
transform: translateX(0px);
}
to {
transform: translateX(-100%);
}
}
.layui-anim {
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.layui-anim-rl {
-webkit-animation-name: layui-rl;
animation-name: layui-rl;
}
.layui-layer-adminRight {
box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
border-radius: 0;
overflow: auto;
}
/* layer 右侧呼出 end */

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 B

View File

@ -0,0 +1,114 @@
// layer 自定义右侧呼出(全屏)
layui.define(["layer"], function (exports) {
var layer = layui.layer;
var obj = {
rightPopupLayer: function (content, obj,area) {
let layerIndex = layer.open({
type: 2,
title: "高级筛选",
offset: ["0px", "100%"],
skin: "layui-anim layui-anim-rl layui-layer-adminRight",
closeBtn: 0,
content: content,
shadeClose: true,
area: area,
success: function (layero, index) {
let body = layer.getChildFrame('body', index);
let iframeWin = window[layero.find('iframe')[0]['name']];//获得iframe页的窗口对象执行iframe页的方法
iframeWin.setParams(obj);//调用子页面的方法,页面锁定
}
});
let op_width = $(".layui-anim-rl").outerWidth();
$(".layui-layer-shade")
.off("click")
.on("click", function () {
$(".layui-anim-rl")
.animate(
{left: "+=" + op_width + "px"},
300,
"linear",
function () {
$(".layui-anim-rl").remove();
$(".layui-layer-shade").remove();
}
);
});
},
};
exports("rightPopup", obj);
});
layui.define(["layer"], function (exports) {
var layer = layui.layer;
var obj = {
rightPopupLayer: function (content, id) {
let layerIndex = layer.open({
type: 2,
title: false,
offset: ["0px", "100%"],
skin: "layui-anim layui-anim-rl layui-layer-adminRight",
closeBtn: 0,
content: content,
shadeClose: true,
area: ["42%", "100%"],
success: function (layero, index) {
let body = layer.getChildFrame('body', index);
let iframeWin = window[layero.find('iframe')[0]['name']];//获得iframe页的窗口对象执行iframe页的方法
iframeWin.setParams(id);//调用子页面的方法,页面锁定
}
});
let op_width = $(".layui-anim-rl").outerWidth();
$(".layui-layer-shade")
.off("click")
.on("click", function () {
$(".layui-anim-rl")
.animate(
{left: "+=" + op_width + "px"},
300,
"linear",
function () {
$(".layui-anim-rl").remove();
$(".layui-layer-shade").remove();
}
);
});
},
};
exports("rightPopup2", obj);
});
// layer 自定义右侧呼出(非全屏)
layui.define(["layer"], function (exports) {
var layer = layui.layer;
var obj = {
rightPopupLayer: function (content = "") {
layer.open({
type: 1,
title: "",
offset: ["10px", "100%"],
skin: "layui-anim layui-anim-rl layui-layer-adminRight",
closeBtn: 0,
content: content,
shadeClose: true,
area: ["30%", "96%"],
});
let op_width = $(".layui-anim-rl").outerWidth();
$(".layui-layer-shade")
.off("click")
.on("click", function () {
$(".layui-anim-rl").animate(
{left: "+=" + op_width + "px"},
300,
"linear",
function () {
$(".layui-anim-rl").remove();
$(".layui-layer-shade").remove();
}
);
});
},
};
exports("rightPopup3", obj);
});

View File

@ -0,0 +1,14 @@
let form, laydate,layer;
function setParams(obj){
layui.use(["form", 'laydate','layer'], function () {
form = layui.form;
laydate = layui.laydate;
layer = layui.layer;
// 日期范围 - 左右面板联动选择模式
laydate.render({
elem: '#ID-laydate-range-datetime',
type: 'date',
range: true
});
});
}

View File

@ -1,10 +1,16 @@
let form, laydate, flow;
let form, laydate, flow,layer,rightPopup;
let pageNum = 1, pageSize = 15; // 定义分页
let queryType = 2; // 默认最近上传
layui.use(["form", 'laydate', 'flow'], function () {
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();
});
@ -96,33 +102,91 @@ function initImgData(list) {
" </div>" +
" <div class='imgData3 layout'>" +
" <p>" + item.sourceTypeName + "</p>" +
" <p>" + item.id.substr(0, 10) + "</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'></div></div>" +
" <div class='layout' onclick='imgDownLoad("+JSON.stringify(item)+")'><div class='img-download'></div></div>" +
" <div class='layout' onclick='waterImgDownLoad("+JSON.stringify(item)+")'><div class='img-water'></div></div>" +
(item.collectStatus === '0' ? "<div class='layout' onclick='collectImg("+JSON.stringify(item)+",1)'><div class='img-collect'></div></div>":"<div class='layout' onclick='collectImg("+JSON.stringify(item)+",2)'><div class='img-collect-check' ></div></div>") +
" <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) {
alert(item.id)
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(item,type) {
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');
}

View File

@ -0,0 +1,182 @@
<!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/highSearchForm.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="layui-form">
<div class="layui-form">
<div class="title">
通用信息查询
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">搜索查询</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">日期范围</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="ID-laydate-range-datetime"
placeholder="开始结束 - 结束日期 ">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">工程</label>
<div class="layui-input-inline" style="width: 515px;">
<select class="layui-select" lay-search></select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">专业</label>
<div class="layui-input-inline">
<select class="layui-select" lay-search></select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">工序</label>
<div class="layui-input-inline">
<select class="layui-select" lay-search></select>
</div>
</div>
</div>
<div class="title">
安全违章照片
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">类型</label>
<div class="layui-input-inline">
<input type="checkbox" name="arr[0]" title="违章照片">
<input type="checkbox" name="arr[1]" title="整改照片">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">违章地点</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">检查描述</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">整改说明</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
</div>
<div class="title">
质量检查照片
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">类型</label>
<div class="layui-input-inline">
<input type="checkbox" name="arr[0]" title="缺陷照片">
<input type="checkbox" name="arr[1]" title="整改照片">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">检查地点</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">检查描述</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">整改说明</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
</div>
<div class="title">
安全措施落实照片
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">检查描述</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">整改说明</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
</div>
<div class="title">
协调照片
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">类型</label>
<div class="layui-input-inline">
<input type="checkbox" name="arr[0]" title="建设前">
<input type="checkbox" name="arr[1]" title="建设中">
<input type="checkbox" name="arr[1]" title="建设后">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">建设地点</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
</div>
<div class="title">
重要事项及宣传照片
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">标题</label>
<div class="layui-input-inline">
<input type="text" id="ticketNo" name="ticketNo" class="layui-input" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-box">
<button class="layui-btn layui-btn-normal" onclick="saveData2()">确定</button>
<button class="layui-btn layui-btn-primary" onclick="closePage()">重置</button>
</div>
</body>
<script src="../../js/synthesisQuery/highSearchForm.js" charset="UTF-8" type="text/javascript"></script>
</html>

View File

@ -27,12 +27,16 @@
<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">
<div class="type-num layout" onclick="queryByType(this,0)">
<div class="layout">
<p>总照片数</p>
<p>1250</p>
@ -41,7 +45,7 @@
<img src="../../img/synthesisQuery/1.png">
</div>
</div>
<div class="type-num layout">
<div class="type-num layout" onclick="queryByType(this,1)">
<div class="layout">
<p>安全违章</p>
<p>1250</p>
@ -50,7 +54,7 @@
<img src="../../img/synthesisQuery/2.png">
</div>
</div>
<div class="type-num layout">
<div class="type-num layout" onclick="queryByType(this,2)">
<div class="layout">
<p>质量检查</p>
<p>1250</p>
@ -59,7 +63,7 @@
<img src="../../img/synthesisQuery/3.png">
</div>
</div>
<div class="type-num layout">
<div class="type-num layout" onclick="queryByType(this,3)">
<div class="layout">
<p>安全措施落实</p>
<p>1250</p>
@ -68,7 +72,7 @@
<img src="../../img/synthesisQuery/4.png">
</div>
</div>
<div class="type-num layout">
<div class="type-num layout" onclick="queryByType(this,4)">
<div class="layout">
<p>协调照片</p>
<p>1250</p>
@ -77,7 +81,7 @@
<img src="../../img/synthesisQuery/5.png">
</div>
</div>
<div class="type-num layout">
<div class="type-num layout" onclick="queryByType(this,5)">
<div class="layout">
<p>重要事项及宣传类</p>
<p>1250</p>