jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!-- 页面内css部分 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.selectCheckBox {
width: 18px;
height: 18px;
vertical-align: middle
}
.el-table > tbody > tr > td {
border: 0px solid #000000 !important;
}
.jzqkjl_text {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.dataTables_wrapper {
padding-bottom: 20px
}
#jump {
float: right;
margin-right: 10px
}
#cfnum {
float: left;
margin-top: 8px;
margin-right: 5px
}
#jupm_page {
float: left;
margin-top: 3px;
width: 60px;
margin-right: 5px;
}
#jupm_btn {
margin-top: 4px;
}
/* 翻页检索位置靠右 */
#gycw_sbmx_xj_listTable_wrapper > div.row:LAST-CHILD {
position: relative;
}
.dataTables_paginate {
padding-right: 125px
}
#jump {
position: absolute;
right: 5px;
}
a.paginate_button.current {
background-color: #dde2ef;
}
.things-wrap-content-div {
border-radius: 5px;
border: 1px solid;
width: 170px;
display: flex;
align-items: center;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
color: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: rgb(189, 162, 154);
}
.things-wrap-content-div:hover {
opacity: 0.8;
border: 1px solid #5a5a5a;
}
.things-wrap-content-div-clone{
position: absolute;
background-color: #EBF4FA;
z-index: 9999;
font-size: small;
}
.tjsz_cont{
min-width: 100%;
padding: 10px 20px 20px 10px;
height: calc(68vh - 10px);
overflow-y: auto;
overflow-x: auto;
}
.tztj_box_level{
/* display: inline-block;
overflow: hidden; */
margin-bottom: 15px;
min-width: 100%;
padding: 10px 0;
display: flex;
flex-direction: row;
}
.tztj_box_level.level_one{
margin-bottom: 0;
}
.tztj_box_level>div{
display: inline-block;
float: left;
}
.tztj_box_left{
min-height: 116px;
/* border-right: 1px solid #ddd;
position: relative;
margin-top: -8px;*/
margin-right: 10px;
display: flex !important;
align-items: center;
/*padding-right: 10px;*/
}
.tztj_box_right::before,
.tztj_box_right::after{
content: '';
display: inline-block;
width: 8px;
height: 1px;
background: #ddd;
position: absolute;
left: 0px;
}
.tztj_box_right::before{
top: 0;
}
.tztj_box_right::after{
bottom: 0;
}
.tztj_box_right{
/* width: calc(100% - 75px); */
border-left: 1px solid #ddd;
position: relative;
margin-top: -8px;
padding-left: 10px;
padding-top: 8px;
}
.tztj_box_right>.tztj_pre:last-child{
margin-bottom: 8px;
}
.tztj_pre{
/* min-width: 300px; */
padding: 8px 10px;
background: #f1f1f1;
overflow: hidden;
margin-bottom: 15px;
width: 505px;
border-radius: 4px;
border: 1px solid #ddd;
display: flex;
}
.tztj_pre.active{box-shadow: 0 0 10px rgb(6 75 129 / 20%);
background: #e3f0fb;
border: 1px solid #ccddeb;}
.tztj_pre>.tztj_pre_text,
.tztj_pre>.tztj_form{
display: inline-block;
float: left;
margin-right: 5px;
}
.tztj_pre>.tztj_pre_text{
padding-top: 3px;
}
.tztj_form,
.tztj_input{
border-radius: 3px;
border: 1px solid #ddd;
height: 28px;
line-height: 28px;
padding: 0 10px;
}
.tjsz_cont .btn.btn-danger{padding: 3px 8px}
.tjds_select{height: 28px;line-height: 28px;border-radius: 4px;border: 1px solid #ddd;}
.tjds_select.active{box-shadow: 0 0 10px rgb(6 75 129 / 20%);
background: #e3f0fb;
border: 1px solid #ccddeb;}
</style>
<div class="modal fade bs-example-modal-lg" id="sh_system_hint"
tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" style="width: 1200px;">
<div class="box" style="height: 80vh;">
<div class="box-header with-border">
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool"
data-dismiss="modal" aria-hidden="true">
<i class="fa fa-remove"></i>
</button>
</div>
<h4 class="box-title">高级查询</h4>
</div>
<div class="row" style="margin: 0;">
<div class="col-md-12" id="manage_center_widthAjust">
<div class="panel panel-default margin_b_md_0">
<div class="panel panel-default" style="margin-bottom: 0;">
<div class="panel-body"
style="overflow-y: auto; overflow-x: hidden;">
<div class="row" id="row1">
<div class="col-md-3" id="col1" style="height: 60vh;border-right: solid 1px #f5f5f5;overflow: auto">
<div class="panel-heading clearfix">
<span class="panel-title line_h30 cursor_p">指标</span>
</div>
</div>
<div class="col-md-9 text-center" id="conditionContentDiv" style="height: 60vh;">
<div class="panel-heading clearfix">
<span class="panel-title line_h30 cursor_p">条件设置</span>
</div>
<div id="collapseOne" class="panel-collapse collapse in" aria-expanded="true" style="">
<div id="condition" class="panel-body tiaojianContent" style="height: 55vh !important;overflow: auto">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
var _page_data = {
isMovedown: false,
isConditionDivEnter: false,
cloneObj: null,
currentPreId: null,
conditionObjs: [],
gjSql: "",
startPosition: { x: 0, y: 0, offsetX: 0, offsetY: 0 },
zhibiaos:[
{
text:'资产总计（元）',
col:'C01_1'
},
{
text:' 其中：年末存货（元）',
col:'C02_1'
},
{
text:'  固定资产净值（元）',
col:'C03_1'
},
{
text:'  在建工程（元）',
col:'C04_1'
},
{
text:'负债合计（元）',
col:'C05_1'
},
{
text:'年初存货（元）',
col:'C06_1'
},
{
text:'本年折旧（元）',
col:'C07_1'
},
{
text:'营业收入（元）',
col:'C08_1'
},
{
text:'同期应税收入（元）',
col:'C09_1'
},
{
text:'净服务收入（元）',
col:'C10_1'
},
{
text:'营业成本（元）',
col:'C11_1'
},
{
text:'税金及附加（元）',
col:'C12_1'
},
{
text:'其他收益（元）',
col:'C13_1'
},
{
text:'投资收益（元）',
col:'C14_1'
},
{
text:'营业利润（元）',
col:'C15_1'
},
{
text:'本年应付工资薪酬（元）',
col:'C16_1'
},
{
text:'应缴增值税（元）',
col:'C17_1'
},
{
text:'期末从业人员（人）',
col:'C18_1'
},
],
queryGj: function () {
$("#sh_system_hint").modal('show');
},
closeGj: function () {
$("#sh_system_hint").modal('hide');
},
clearGj: function () {
$("#condition").html('');
},
setGj: function () {
_page_data.conditionObjs=[];
if($('.tztj_pre').length==0){
return;
}
if($('.tztj_pre').length==1){
_page_data.conditionObjs.push({
col:$('.tztj_pre').children("input[name='expression']").val(),
operator:$('.tztj_pre').children("select[name='operator']").val(),
val:$('.tztj_pre').children("input[name='inputValue']").val(),
})
}else{
_page_data.setGj2(_page_data.conditionObjs,$('#condition'))
console.log(_page_data.conditionObjs)
}
_page_data.closeGj()
},
setGj2: function (conditionObjs,levelObj) {
levelObj.children().each(function(index, element) {
if($(element).hasClass('tztj_box_level')){
var obj={
tztj_box_left:$(element).children('.tztj_box_left').children('.tjds_select').val(),
datas:[]
}
_page_data.setGj2(obj['datas'],$(element).children('.tztj_box_right'))
conditionObjs.push(obj)
}else if($(element).hasClass('tztj_pre')){
conditionObjs.push({
col:$(element).children("input[name='expression']").val(),
operator:$(element).children("select[name='operator']").val(),
val:$(element).children("input[name='inputValue']").val(),
})
}
});
},
getUuid:function () {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
},
delZhibiao:function (id) {
if($('.tztj_pre').length==1){
$('#'+id).remove();
}else{
var parent=$('#'+id).parent();
$('#'+id).remove();
if(parent.children().length==1){
parent.parent().after(parent.children())
parent.parent().remove();
}
}
}
};
$(function () {
$("#sh_system_hint").modal('show');
var zhibiaos=''
for(var i=0;i<_page_data.zhibiaos.length;i++){
var zhibiaoObj=_page_data.zhibiaos[i];
$('#col1').append($('<div class="things-wrap-content-div" id="zhibiaos'+i+'" col="'+zhibiaoObj.col+'">'+zhibiaoObj.text+'</div>'))
$('#zhibiaos'+i).mousedown(function(e){
_page_data.startPosition.x = e.clientX
_page_data.startPosition.y = e.clientY
_page_data.startPosition.offsetX = e.offsetX
_page_data.startPosition.offsetY = e.offsetY
_page_data.isMovedown = true
})
$('#zhibiaos'+i).mousemove(function(e){
if (
e.clientX - _page_data.startPosition.x > 10 ||
e.clientY - _page_data.startPosition.y > 10 ||
e.clientX - _page_data.startPosition.x < 10 ||
e.clientY - _page_data.startPosition.y < 10
) {
if (_page_data.isMovedown) {
if (_page_data.cloneObj == null) {
if($(e.target).prop('tagName')!=='DIV'&&$(e.target).prop('tagName')!=='div'){
_page_data.cloneObj = $(e.target).parent().clone()
}else{
_page_data.cloneObj = $(e.target).clone()
}
var cloneObj=$(_page_data.cloneObj)
cloneObj.mouseup(function(e){
_page_data.isMovedown = false
_page_data.startPosition = { x: 0, y: 0, offsetX: 0, offsetY: 0 }
setTimeout(()=>{
if(_page_data.isConditionDivEnter){
var id='PRE_'+_page_data.getUuid()
var levelId='LEVEL_'+_page_data.getUuid()
var tztj_pre='<div class="tztj_pre" id="'+id+'" isnum="true">\n' +
' <input class="tztj_form" name="description" readonly value="'+cloneObj.text()+'">\n' +
' <input name="prefix" class="tztj_form" type="text" style="display:none;" value="">\n' +
' <input name="expression" class="tztj_form" type="text" style="display:none;" value="'+cloneObj.attr('col')+'">\n' +
' <select name="operator" class="tztj_form" style="pading:0 15px 0 5px;width:90px">\n' +
' <option value="<">小于</option>\n' +
' <option value="<=">小于等于</option>\n' +
' <option value=">">大于</option>\n' +
' <option value=">=">大于等于</option>\n' +
' <option value="=">等于</option>\n' +
' </select>\n' +
' <input name="inputValue" class="tztj_form" style="width:100px" type="number">\n' +
' <button type="button" class="btn btn-sm btn-danger" onclick="_page_data.delZhibiao(\''+id+'\')"\n' +
' style="margin-left:5px"> 删除\n' +
' </button>\n' +
' </div>'
var level='<div class="tztj_box_level level_one">\n' +
' <div class="tztj_box_left"><select class="tjds_select" name="sign_select">\n' +
' <option value="and">且</option>\n' +
' <option value="or">或</option>\n' +
' </select></div>\n' +
' <div class="tztj_box_right" id="'+levelId+'">\n' +
' </div>\n' +
'</div>'
if(_page_data.currentPreId==null){
if($('.tztj_pre').length==0){
$('#condition').append($(tztj_pre))
}else{
if($('.tztj_box_level').length==0){
var tztj_pre_temp=$('.tztj_pre');
var level_one='<div class="tztj_box_level level_one">\n' +
' <div class="tztj_box_left"><select class="tjds_select" name="sign_select" onchange="_page_bi_analysis_tjsz.editSelect($(this))">\n' +
' <option value="and">且</option>\n' +
' <option value="or">或</option>\n' +
' </select></div>\n' +
' <div class="tztj_box_right" id="oneRight">\n' +
' </div>\n' +
'</div>'
$('#condition').html($(level_one))
$('#oneRight').append(tztj_pre_temp)
tztj_pre_temp.mouseenter(function(e){
_page_data.currentPreId=e.currentTarget.id;
})
tztj_pre_temp.mouseout(function(e){
_page_data.currentPreId=null;
})
$('#oneRight').append($(tztj_pre))
}else{
$('#oneRight').append($(tztj_pre))
}
}
}else{
if($('.tztj_box_level').length>0){
$('#'+_page_data.currentPreId).before($(level))
$('#'+levelId).append($('#'+_page_data.currentPreId))
$('#'+levelId).append($(tztj_pre))
}
}
$('#'+id).mouseenter(function(e){
_page_data.currentPreId=e.currentTarget.id;
})
$('#'+id).mouseout(function(e){
_page_data.currentPreId=null;
})
}
},100)
_page_data.cloneObj.remove()
_page_data.cloneObj = null
})
$(_page_data.cloneObj).mousemove(function(e){
_page_data.cloneObj.css({
left: e.pageX - _page_data.startPosition.offsetX + 'px',
top: e.pageY - _page_data.startPosition.offsetY + 'px'
})
})
_page_data.cloneObj.addClass('things-wrap-content-div-clone')
_page_data.cloneObj.css({
left: e.pageX - _page_data.startPosition.offsetX + 'px',
top: e.pageY - _page_data.startPosition.offsetY + 'px'
})
_page_data.cloneObj.appendTo($(document.body))
}
}
}
})
}
$('#conditionContentDiv').mouseenter(function(e){
_page_data.isConditionDivEnter = true
})
$('#col1').mouseenter(function(e){
})
$('#conditionContentDiv').mouseout(function(e){
_page_data.isConditionDivEnter = false
})
$('#row1').mousemove(function(e){
if(_page_data.cloneObj != null) {
_page_data.cloneObj.css({
left: e.pageX - _page_data.startPosition.offsetX + 'px',
top: e.pageY - _page_data.startPosition.offsetY + 'px'
})
}
})
$('#row1').mouseup(function(e){
_page_data.isMovedown = false
_page_data.startPosition = { x: 0, y: 0, offsetX: 0, offsetY: 0 }
if (_page_data.cloneObj != null) {
_page_data.cloneObj.remove()
_page_data.cloneObj = null
}
})
})
</script>
<!-- 页面内js部分 -->
最终是显效果如下：
VID_20231219_142417
5255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
