baozhangfang/WebRoot/WEB-INF/jsp/yaohao/houseYaohao.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<% String basePath = request.getScheme()+ "://" + request.getServerName() + ":" +request.getServerPort() + request.getContextPath(); %>
<script>
			var yaohaoId = null;
			var securityPersonId = null;
			var roomType = null;
			var communityId = null;
			
			//房源属性
			var houseArray = null; 
			var houseIndex = -1;
			var currentId = null;
			var isJump = false;
			
			var hasYaohao = false;
			
		
			//根据摇号id获取房源列表
			var getHouseArray = function(){
				$.ajax({
				    type: "post",//使用post方法访问后台
				    dataType: "json",//返回json格式的数据
				    url: "yaohaoAction_listHouseByYaohao1",//要访问的后台地址
				    data:{"yaohaoId":yaohaoId ,"roomType" :roomType , "communityId" : communityId },
				    success: function(msg){//msg为返回的数据，在这里做数据绑定
				    	if(msg.success){
				    		houseArray = msg.obj.rows;
				    		if(houseArray[0] != null ){
				    			currentId = houseArray[0].id;
				    		}
				    	}
				    }
				});
			}

			$(function() {
				yaohaoId = $("#yaohaoId").val();
				securityPersonId = $("#securityPersonId").val();
				roomType = $("#roomType").val();
				communityId = $("#communityId").val();
				getHouseArray();
			});

			//点击开始摇号
			$("#houseBegin").click(
				function(){
					if(!hasYaohao){
						if(isJump == false){
							isJump = true;
							jump();
						}
					}
				}
			);
			
			//点击停止摇号
			$("#houseOK").click(
				function(){
					if(!hasYaohao){
						if(isJump == true){
							isJump = false;
							var sum = GetRandomNum(houseArray.length,houseArray.length*2);
							stop(sum);
						}
					}
				}
			);
			
			//获取房源数组中下一个元素的id
			var getNextId = function(){
				if(houseArray!=null && houseArray.length > 0){
					if(houseIndex >= houseArray.length-1 ){
						houseIndex = 0;
					}else{
						houseIndex++;
					}
					return houseArray[houseIndex].id;
				}
			}
			
			var jump = function(){
				if(!isJump) {
					return;
				}else{
					$("#house_" + currentId ).removeClass('active'); 
					currentId = getNextId();
					$("#house_" + currentId ).addClass('active'); 
					setTimeout("jump()",50); 
				}
			}
			
			var stop = function(count){
				$('#communitySelect').modal('hide');
				if(count == 0){
					setTimeout("reviewHouse()",300); 
					return ;
				}else{
					$("#house_" + currentId ).removeClass('active'); 
					currentId = getNextId();
					$("#house_" + currentId ).addClass('active'); 
					count--;
					setTimeout("stop("+ count + ")",50 + 400/count); 
				}
			}
			
			var reviewHouse = function (){
				$.ajax({
				    type: "post",//使用post方法访问后台
				    dataType: "json",//返回json格式的数据
				    url: "yaohaoAction_updateYaohaoItem",//要访问的后台地址
				    data:{"yaohao.id":yaohaoId ,
						  "house.id":currentId , 
						  "securityPerson.id":securityPersonId 
						 },
				    success: function(msg){//msg为返回的数据，在这里做数据绑定
				    	if(msg.success){
				    		$('#yaohaoItemDataGrid').datagrid('reload');
				    		$.ajax({
							    type: "post",//使用post方法访问后台
							    dataType: "json",//返回json格式的数据
							    url: "houseAction_findById",//要访问的后台地址
							    data:{
									  "house.id":currentId 
									 },
							    success: function(msg){//msg为返回的数据，在这里做数据绑定
							    	if(msg.success){
							    		$('#yaohaoItemDataGrid').datagrid('reload');
							    		$.messager.alert("提示","恭喜您，您选中了房屋" + msg.obj.address);
							    		hasYaohao = true;
							    	}
							    }
							});
				    		hasYaohao = true;
				    	}
				    }
				});
			}
			
			//获取随机数
			function GetRandomNum(Min,Max){   
				var Range = Max - Min;   
				var Rand = Math.random();   
				return(Min + Math.round(Rand * Range));   
			}  
			
			
			/*
			*  方法:Array.remove(dx) 通过遍历,重构数组
			*  功能:删除数组元素.
			*  参数:dx删除元素的下标.
			*/
			Array.prototype.remove=function(dx){
			    if(isNaN(dx)||dx>this.length){return false;}
			    for(var i=0,n=0;i<this.length;i++)
			    {
			        if(this[i]!=this[dx])
			        {
			            this[n++]=this[i];
			        }
			    }
			    this.length-=1;
			} 
</script>
	
    <div class="container-fluid container-main">
        	<div class="box box-solid box-primary lottery-house">
                <div class="box-body lottery-house-body" name="house">
                	<input type="hidden" value="${yaohao.id}" id="yaohaoId">
                	<input type="hidden" value="${securityPerson.id}" id="securityPersonId">
                	<input type="hidden" value="${roomType}" id="roomType">
                	<input type="hidden"  value="${communityId}" id="communityId">
                	
                	<s:iterator value="houseList" id="info" >  
                		<s:if test="#info.houseState == 3">
		                	<div class="lottery-house-unit" id="house_${info.id}" >
		                    	<div  class="lottery-house-community">${info.address}</div>
		                    </div>
	                    </s:if>
	                    <s:else>
	                    	<div class="lottery-house-unit ignore" id="house_${info.id}" >
		                    	<div  class="lottery-house-community">${info.address}</div>
		                    </div>
	                    </s:else>
                    </s:iterator>
                </div>
                <div class="lottery-house-foot" name="house">
                	<button id="houseBegin" type="button" class="btn btn-primary"><i class="fa fa-play"></i> 开始</button>
                    <button id="houseOK" type="button" class="btn btn-primary" ><i class="fa fa-stop"></i> 停止</button>
                </div>
            </div>
    </div>
    
    <div class="modal fade" id="housestop" tabindex="-2" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-modal">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>		        
            <h4 class="modal-title"><i class="fa fa-building fa-fw modal-header-icon"></i>&nbsp;房源摇号结果</h4>
          </div>
          <div class="modal-body">
            	本次摇中的房源为：<span class="red" id="currentHouseAddress" ></span>，房源顺位号为: <span class="red" id="currentYaohaoNo"> </span>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
	 </div>