js+css 灵活层叠 绝对/相对 定位 2

<#import "/WEB-INF/macros/itemChoice.ftl" as queryMacros>


<style type="text/css">
.wrap{  
    width:100%;  
    margin:0 auto;
font-family:"微软雅黑";
}  
#header{  
    margin:10px;  
    height:20px;
font-weight:bold;
font-size:14px;  
text-align:left;
}  
#container{  
    position:relative;  
    margin:2px;  
    height:20px;  
    text-align:center;
}  
#left_side{           /*  position:absolute;   */
    top:0px;  
    left:0px;  
    position:absolute; 
font-size:14px;  
    height:100%; 

}  
#content{  
    margin:0px 100px 0px 100px;  
    font-size:14px; 
    width:25%;
    height:100%;
background:#000; 
color:#00EE00;
text-align:right;

}  
#right_side{      /*  position:absolute;   */
     
    top:0px;  
    left:0px;
    margin-left: 72%;
   position:absolute; 
    width:17%;  
    height:100%; 
    text-align:left;
}  
#footer{  
    height:1px;
width:100%;
    background:#6e6e6e;
margin-top:20px;
} 


 .tempDrawDiv{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}
 .tempPlotRetc{position:absolute; border:1px solid #CCCCCC; overflow:hidden; background:#EFEFEF ; opacity:0.8; }
 
  .touming{background:rgba(0,0,0,0.1) none repeat scroll !important; /*实现非IE背景透明，文字不透明*/
 background:black; display:inline; filter:Alpha(opacity=10);/*实现IE背景透明     width:100px; height:100px;       */  
  color:green; font-size:18px; display:inline; font-weight:bold;}
  
  .touming2{background:rgba(0,0,0,0.1) none repeat scroll !important; /*实现FF背景透明，文字不透明*/
 background:black; display:inline; filter:Alpha(opacity=10);/*实现IE背景透明     width:100px; height:100px;       */  
  color:green; font-size:12px; display:inline; font-weight:bold;}
  
  .touming p{ position:relative;display:inline;}/*实现IE文字不透明*/


    /*   <tr style='color:red;' ><td>"+ (i+1) + " : " + data.name+"</td></tr>     */  
</style>


<div class="magMainRight" id="magMainRightHeight" >
<div class="magxk" id="tt1"><i class="ico2"></i><a href="#">运行监测</a>|<span>项目运行</span></div>
<div class="h10" id="tt2"></div>

    <div class="right-sec" id="tt3" >
    <div class="rec100 fixed" style="display:display;">
    <form action="${base}/pump/homepage/projrun!show.action" id="form_query_jiben_${_menuId}" class="form form-horizontal">
    <input name="_menuId" type="hidden" value="${_menuId}">
    <input name="area" type="hidden" value="" />
    <@queryMacros.search formId="form_query_jiben_${_menuId}" leverNumber="3" customEvent="null">
</@queryMacros.search>
    <input type="button" id="query${_menuId}" value="查询" class="button1" οnclick="showDatas();">
    <input type="hidden" id="reverseFlush" οnclick="tempFlushItemRun();" >
    </form>
</div>
</div>      
    
    <div class="h10" id="tt4" ></div>
    <!-- 第二部分 -->
    <div class="right-sec"   >
    <div class="rec100 fixed" style="height:70%;">
    <div class="xq-title" id="tt5" style=""><i class="i3"></i>项目实时运行图<span style="float:right">
    <a href=# οnclick="showItemPhoto${_menuId}();">查看/隐藏项目现场图片</a></span>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <input type="button" id="plotPlacesPicture" value="图片位置绘制" class="btn btn-success" οnclick="plotPlacesPicture()">
         <input type="button" id="finishPlotPicture" disabled="disabled" value="结束绘制" class="btn btn-danger" οnclick="finishPlotPicture();">
         <input type="button" id="initializePicture" disabled="disabled" value="图片初始化" class="btn btn-info" οnclick="initializePicture();">
    </div>
    <div id="itemPhoto_display${_menuId}" style="height:400px;display:none;"></div>
   
    <div class="col-md-9" style="">
    <center>
   
   <table id="tempTable" width="778"  border="0" align="left" cellpadding="0" cellspacing="0"  >
  <tr >
    <td >
     <span id="autoClickOne" style="position:absolute;background-color:red;height:0.1;width:0.1;" οnclick="GetControlPositionFirstCoordinate(this);" ></span>
    </td>
  </tr>
  <tr>
    <td align="left" >
      <span style="text-align:left;" id="tempTableDiv" >
         <img id="pumpRunImage${_menuId}" src="/xiangmutu.jpg" style="max-width:100%;max-height:100%;"/>
      </span> 
    </td>
  </tr>
  <tr>
    <td align="right" >
     <span id="autoClickTwo" style="position:absolute;background-color:red;height:0.1;width:0.1;" οnclick="GetControlPositionLastCoordinate(this);"></span>
    </td>
  </tr>
  </table>
   
    </center>
    </div>
    <div class="col-md-3">
             
    <table id="pumps_data_div_${_menuId}" class="table table-striped" >
         
    </table>
    </div>
    </div>
    </div>
</div>


<script type="text/javascript">


    var tempObjArr = new Array() ;
    var wId = "storeDiv";
var startX = 0 , startY = 0;
var firstOne = null ;
    var lastOne = null ;
    var currentTableHeight = $("#magMainRightHeight").height() ;     
    var uncalled_for = $("#tt1").height() + $("#tt2").height() + $("#tt3").height() + $("#tt4").height() + $("#tt5").height() ;

function plotPlacesPicture(){     
       document.getElementById('plotPlacesPicture').disabled=true ;
         document.getElementById('finishPlotPicture').disabled=false ; 
         document.getElementById('initializePicture').disabled=true ;
     
   document.onmousedown = function(e){   
   var evt = window.event || e;
        var target = e.target || e.srcElement;
   if(target.id == 'finishPlotPicture') {
            document.onmousemove = null ;
            document.onmouseup = null ;
            document.onmousedown = null ;
            return;
        }


try{
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
startX = evt.clientX + scrollLeft;  
startY = evt.clientY + scrollTop;     

           if( startX > lastOne[0] || startX < firstOne[0] || (startY > (lastOne[1]-currentTableHeight)) || ((startY) < (firstOne[1]-currentTableHeight)) ){
   //             alert("请在项目图片中选择开始位置！"); return ;        
           }      
 var div = $("<div id="+(wId)+" class='tempPlotRetc' style='position:absolute;float:left;margin-left:"+startX+"px;margin-top:"+(startY-(currentTableHeight+uncalled_for))+"px;width:200; height:30; '>"+
"<input type='text' style='display:none;' value="+(startX)+","+(startY-(currentTableHeight+uncalled_for))+" >"+
"<input type='text' style='display:none;width:38px;' onKeyUp='bdText(this);' value=''><span id='bd'></span>"+
"</div>");
div.appendTo($("body"));     
   
}catch(e){
//alert(e);
      } 
}
  }
  
  function initializePicture(){        
       Main.isProRun = 0 ;
     var valueAndZuoBiao = new Array() ;
       $("div[id^=storeDiv]").each(function(i){
             $(this).find("input").each(function(q){  
                  if(q==0){
                      valueAndZuoBiao[i] = $(this).attr("value") ;
                  } 
                  if(q==1){
                      if( $(this).val() == "" ){
                           valueAndZuoBiao[i] = 0 + "," + valueAndZuoBiao[i] ; 
                      }else{
                           valueAndZuoBiao[i] = $(this).val() + "," + valueAndZuoBiao[i] ;
                      }     
                  }     
             });
       });    
      $("div[id^=storeDiv]").each(function(i){   $(this).remove()   });  
      
     for(var ooooo in valueAndZuoBiao ){   
          var tempValue = valueAndZuoBiao[ooooo].split(",");
          var tempHeight = 0 ;      
          
         for( var ttmm in tempObjArr ){
             var tempObjArrString = tempObjArr[ttmm].split(",");     
             if( tempValue[0] == tempObjArrString[0] ){          
                   
     $.ajax({
       type: 'POST' ,
       url: '${base}/pump/homepage/projrun!getPictureByPumpId.action' ,
       data: {tempPump:valueAndZuoBiao[ooooo]} ,
       dataType: 'json' ,
       async : false ,
       success: function(data){  
             showDatas();
      }
    });         
             }
         }
       
     }
          
   }
  
  function finishPlotPicture(){     
      document.onmousemove = null ;
            document.onmouseup = null ;
            document.onmousedown = null ;    
         document.getElementById('plotPlacesPicture').disabled=false;
         document.getElementById('finishPlotPicture').disabled=true ;  
         document.getElementById('initializePicture').disabled=false ;
         $("div[id^=storeDiv]").each(function(i){   
               $(this).find("input").each(function(q){  
                    if(q==1){
                       $(this).css("display","");
                    }
               });
         });
          Main.isProRun = 1 ;
  }
 
    function bdText(obj){     
       for( var ttmm in tempObjArr ){
             var tempObjArrString = tempObjArr[ttmm].split(",");     
             if( tempObjArrString[0] == $(obj).attr("value") ){
                   $(obj).next().text( tempObjArrString[1] );
                   return ;
             }else{
                   $(obj).next().text( " " ); 
             }
       }
}

function removeThisElement(obj){    
 if( confirm("确定删除?")){ 
var delStr = $(obj).attr("id") ;
    $("body").find("div[id^='"+delStr+"']").each(function(i){ 
               $(this).remove() ;
          });
        var delId = $(obj).attr("value") ;  
      $.ajax({
url: Main.ContextPath + "${base}/pump/homepage/projrun!delPictureYmzbById.action",
dataType: 'json',
data: {delId:delId} ,
type: 'post',
success: function(datas){    }
  }); 
 }
    }
        
     function GetControlPositionFirstCoordinate(object) {  
           var firstCoordinate = document.getElementById('autoClickOne').getBoundingClientRect() ; 
             firstOne = (Math.round(firstCoordinate.left)+","+Math.round(firstCoordinate.top)).split(",") ; 
     }
     
      function GetControlPositionLastCoordinate(object) {  
      
         var lastCoordinate = document.getElementById('autoClickTwo').getBoundingClientRect() ;
         lastOne = (Math.round(lastCoordinate.left)+","+Math.round(lastCoordinate.top)).split(",") ;
      }
      
    $("#autoClickOne").trigger("click");
    $("#autoClickTwo").trigger("click");








  function tempFlushItemRun() {              
     $("#form_query_jiben_"+${_menuId}).find("select[name^=area]").each(function(i){    
                        $(this).parent().remove();
          }); 
          $("#form_query_jiben_"+${_menuId}).find("select[name^=customer]").each(function(w){        
                         $(this).parent().remove();
          }); 
           $("#form_query_jiben_"+${_menuId}).find("select[name^=contract]").each(function(w){        
                         $(this).parent().remove();
          }); 
           $("#form_query_jiben_"+${_menuId}).find("select[name^=pump]").each(function(w){        
                         $(this).parent().remove();
          }); 
           $("#form_query_jiben_"+${_menuId}).find("select[name^=meter]").each(function(w){        
                         $(this).parent().remove();
          }); 
           $("#form_query_jiben_"+${_menuId}).find("label").each(function(i){
                if( $(this).text()=="省市:"  ){
                       $(this).remove();
                }else if( $(this).text()=="客户:"  ){
                      $(this).remove();
                }else if( $(this).text()=="项目:"  ){
                      $(this).remove();
                }else if( $(this).text()=="水泵:"  ){
                      $(this).remove();
                }else if( $(this).text()=="测量点:"  ){
                      $(this).remove();
                }     
        });   
   setTimeout(function(){       
$.ajax({
url: Main.ContextPath + "/pump/diagnose/pumpTree!getPumpZtree.action",
dataType: 'json',
data: {enterprise:Main.enterprise.id,showMeter:true,showPump:true},
async : true ,
type: 'post',
success: function(datas){     
       flushMacro(datas, ${_menuId} , 3 );    
       Main.commonTreeStructs = datas;      
           showDatas();
}
}); 
   },500);
    
  
     }  


function showDatas(){          
        $("body").find("div[id^=zbid]").each(function(i){ 
               $(this).remove() ;
            });
$contractId = $("#contractform_query_jiben_${_menuId}").val();   
jugeSelect( "form_query_jiben_${_menuId}" , 
   function(){
   
   //  暂注释
   $projImg = $('#pumpRunImage${_menuId}');
$projImg.attr('src','${base}/pump/homepage/projrun!showProjImage.action?contract='+$contractId);

$tableCustomerListGrid = $('#pumps_data_div_${_menuId}');
$tableCustomerListGrid.html('');
$.ajax({
url : '${base}/pump/homepage/projrun!showProjDatas.action',
dataType : 'json',
data : {customer:$("#customerform_query_jiben_${_menuId}").val(),area:$("#areaform_query_jiben_${_menuId}").val(),contract:$("#contractform_query_jiben_${_menuId}").val()},
type : 'post',
success : function(result) {
if(!MyTools.procErrMsg(result,true)) {
for(var i=0;i<result.datas.length;i++){    
    var tempHeight = 0 ;    
var data = result.datas[i];
tempObjArr[i] = (i+1) + "," + data.name ;          
if(typeof(data.name)!='undefined'){
  if( data.ymzb == "zbIsNull" ){
//       $tableCustomerListGrid.append("<div id='header' style='color:red;' >"+ (i+1) + " : " + data.name+"</div>");
     $tableCustomerListGrid.append("<tr style='color:red;' ><td>"+ (i+1) + " : " + data.name+"</td></tr>");
  }else{
//   $tableCustomerListGrid.append("<div id='header' style='color:green;' >"+ (i+1) + " : " + data.name+"</div>");
    $tableCustomerListGrid.append("<tr style='color:green;' ><td>"+ (i+1) + " : " + data.name+"</td></tr>");   
      var data = result.datas[i];
var pumpZuoBiao = (data.ymzb).split(",");
var i_Unit,p_Unit;
typeof(data.i_0_Unit) != 'undefined' ? i_Unit = data.i_0_Unit : i_Unit = "";
typeof(data.p_Unit) != 'undefined' ? p_Unit = data.p_Unit : p_Unit = "";
   
         div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming' style=' display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.name+"</p></div>"); 
            tempHeight+=21;  
            div.appendTo($("body"));      
   
    if(typeof(data.i_0)!='undefined'){       
       if(data.i_0=="断开"){
        div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:red; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.i_0_Label+" : "+data.i_0+"("+i_Unit+")</p></div>"); 
       }else{
        div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:green; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.i_0_Label+" : "+data.i_0+"("+i_Unit+")</p></div>"); 
       }
       tempHeight+=14;
       div.appendTo($("body"));
    }
    if(typeof(data.p)!='undefined'){
       if(data.p=="断开"){
       div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:red; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.p_Label+" : "+data.p+"("+p_Unit+")</p></div>"); 
       }else{
        div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:green; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+data.p_Label+" : "+data.p+"("+p_Unit+")</p></div>"); 
       }
       tempHeight+=14;
       div.appendTo($("body"));
    }
    if(typeof(data.cgq) != 'undefined' && data.cgq.length > 0){
         for(var j=0;j<data.cgq.length;j++){   
            var cgq = data.cgq[j];
       if(cgq.value=="断开"){
     div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:red; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+cgq.label+" : "+cgq.value+"("+cgq.unit+")</p></div>");  
       }else{
     div = $("<div id='zbid"+data.eeId+"' value='"+data.eeId+"' οndblclick='removeThisElement(this);' class='touming2' style=' color:green; display:inline;position:absolute;margin-left:"+(parseInt(pumpZuoBiao[0]))+"px;margin-top:"+(parseInt(pumpZuoBiao[1])+tempHeight)+"px;'><p>"+cgq.label+" : "+cgq.value+"("+cgq.unit+")</p></div>");  
       }
            tempHeight+=14;
            div.appendTo($("body"));
         }  
    }  } }  }  }  }
        });
     });
   }

showDatas();

function showItemPhoto${_menuId}() {    
var item = $("#form_query_jiben_${_menuId} select[name='contract']").val();
if(item == "") {
alert("请选择项目");
return ;
}    //     alert( $("#itemPhoto_display${_menuId}").css('display') == "none" );

  if( $("#itemPhoto_display${_menuId}").css('display') == "none" ){    
$("body").find("div").each(function(i){    
var tempString = $(this).attr("id") ;
if(tempString){                              
if( tempString.substring(0,4) == "zbid" ){     
         $(this).remove() ;
 }
}
      });
}else{
   showDatas();
}  

$('#itemPhoto_display${_menuId}').toggle('slow');
PageUtil.loadAjaxPageHtml("${base}/pump/monitor/item!getItemsitePhoto.action",{contract:item},function(data){
$("#itemPhoto_display${_menuId}").html(data); 
});
 
   }
     
</script>