baozhangfang/WebRoot/WEB-INF/jsp/house/houseListMapAllQuery.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%String basePath = request.getScheme()+ "://" + request.getServerName() + ":" +request.getServerPort() + request.getContextPath(); %>
<style>
.view td {
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	font-family: arial, "Microsoft Yahei", sans-serif;
	text-align: center;
}

.view_unit_title {
	width: 100px;
	height: 24px;
	background-color: #043a66;
}
.view_unit_item {
	color:white;
	width: 100px;
	height: 24px;
	background-color: #184e8b;
	text-align: center;
}
.view_unit_floor {
	width: 100px;
	height: 24px;
	background-color: #d7d7d7;
	color: #444;
	text-align: center;
}
.view_unit {
	width: 100px;
	height: 24px;
	background-color: #5cadef;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
.view_unit_pre {
	width: 100px;
	height: 24px;
	color: #fff;
	background:#5cadef url("images/star.png") no-repeat;
	background-position: 2;
	cursor: pointer;
}
.view_unit_pre_settled {
	width: 100px;
	height: 24px;
	color: red;
	background:#5cadef url("images/star.png") no-repeat;
	background-position: 2;
	cursor: pointer;
}
.view_unit_settled {
	width: 100px;
	height: 24px;
	color: red;
	background:#5cadef;
	background-position: 2;
	cursor: pointer;
}
.view_unit_not {
	width: 100px;
	height: 24px;
	background-color: #a2a1a1;
	color:#444;
	text-align: center;
	cursor: pointer;
}
.building_tb{
	margin-left: auto; 
	margin-right: auto;
	border-spacing: 1px;
}
</style>
<script type="text/javascript">

	var emptyobj = null;
	/**查询*/
	function searchHouseMapQuery(){
		var name = "";
		if(trim($('#map_communityId').combobox("getText")) != ""){
			name += trim($('#map_communityId').combobox("getText"));
		}
		if(trim($('#map_zone').combobox("getText")) != ""){
			name += " " +trim($('#map_zone').combobox("getText")) + "区";
			if(trim($('#map_no').combobox("getText")) != ""){
				name += trim($('#map_no').combobox("getText"))+"幢";
			}
		}else{
			if(trim($('#map_no').combobox("getText")) != ""){
				name += " "+trim($('#map_no').combobox("getText"))+"幢";
			}
		}
		
		if($('#map_no').combobox("getText") == null || $('#map_no').combobox("getText") ==''){
			$.messager.alert("提示", "大楼名称不能为空！");
		}else{
			parent.$.messager.progress({
				title : '提示',
				text : '拼命加载中，请稍候....'
			});
			$("#layer_tb").empty();
			$.ajax({
				type : "post",//使用get方法访问后台
				dataType : "json",//返回json格式的数据
				url : "houseAction_findAllQuery",//要访问的后台地址
				data : "house.buildingName=" + name+ "&house.community.id="+$('#map_communityId').combobox("getValue")+"&userCookieflag=1",//要发送的数据
				complete : function() {
					$("#load").hide();
				},//AJAX请求完成时隐藏loading提示
				success : function(data) {//msg为返回的数据，在这里做数据绑定
					if (data.success) {
						if(data.building.ismap == "1"){
							var unitsLen = data.unitList.length;
							var floorHtml = "";
							/* if (unitsLen > 0) {//有单元
								floorHtml = '<tr>';
								floorHtml += '<td class="view_unit_title">&nbsp;</td>';
								for ( var uItem = 0; uItem < unitsLen; uItem++) {
									var unit = data.unitList[uItem];
									floorHtml += '<td class="view_unit_item" style="font-size:16px;color:white;" colspan='+unit.houses+'>'+ unit.unit + '</td>';
								}
								floorHtml += '</tr>';
							} */
							if (unitsLen > 0) {//有单元
								floorHtml = '<tr>';
								floorHtml += '<td class="view_unit_title">&nbsp;</td>';
								var t = 0;
								for(var uItem = 0; uItem < unitsLen; uItem++) {
									var unit = data.unitList[uItem];
									t = t + unit.houses;
								}
								if(t < (data.col-1)){
									for(var uItem = 0; uItem < data.col-1; uItem++) {
										floorHtml += '<td class="view_unit_floor" style="font-size:16px;">'+(uItem+1)+'</td>';
									}
								}else{
									for ( var uItem = 0; uItem < unitsLen; uItem++) {
										var unit = data.unitList[uItem];
										floorHtml += '<td class="view_unit_item" style="font-size:16px;color:white;" colspan='+unit.houses+'>'+ unit.unit + '</td>';
									}
								}
								floorHtml += '</tr>';
							}else{
								floorHtml = '<tr>';
								floorHtml += '<td class="view_unit_title">&nbsp;</td>';
								for(var uItem = 0; uItem < data.col-1; uItem++) {
									floorHtml += '<td class="view_unit_floor" style="font-size:16px;">'+(uItem+1)+'</td>';
								}
								floorHtml += '</tr>';
							}
							var layerHtml = "";
							var maptype = data.building.maptype;
							$("#view_buildingTitle").empty();
							$("#view_buildingTitle").text(data.building.name);
							$("#remark").empty();
							$("#remark").text(data.building.remark);
							/* for ( var row = data.row; row > 0; row--) {
								layerHtml += '<tr>';
								if(maptype == "1"){
									layerHtml += '<td class="view_unit_floor">' + row + '</td>';
								}else{
									layerHtml += '<td class="view_unit_floor">' + row + '楼</td>';
								}
								for ( var col = 1; col < data.col; col++) {
									var location = row + "-" + col + "-";
									var isExist = false;
									for ( var iItem = 0; iItem < data.obj.length; iItem++) {//根据坐标寻找值
										var floor = data.obj[iItem].location.split("-")[0];
										var x = data.obj[iItem].location.split("-")[1];
										var layer = data.obj[iItem].location.split("-")[2];
										if(layer>1){//多层一户
											if(data.obj[iItem].location.indexOf(location)==0){
												//layerHtml += '<td class="view_unit" id = "'+location+'" rowspan="'+layer+'">' + data.obj[iItem].houseNumber + '</td>';
												if(data.obj[iItem].status == "1"){
													//layerHtml += '<td class="view_unit" rowspan="'+layer+'" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
													if(data.obj[iItem].preStatus == "1"){
														if(data.obj[iItem].settledStatus == "1"){
															layerHtml += '<td class="view_unit_pre_settled" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')" rowspan="'+layer+'" >'+ data.obj[iItem].houseNumber + '</td>';
														}else{
															layerHtml += '<td class="view_unit_pre" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')" rowspan="'+layer+'" >'+ data.obj[iItem].houseNumber + '</td>';
														}
													}else{
														if(data.obj[iItem].settledStatus == "1"){
															layerHtml += '<td class="view_unit_settled" rowspan="'+layer+'" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
														}else{
															layerHtml += '<td class="view_unit" rowspan="'+layer+'" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
														}
													}
												}else{
													layerHtml += '<td class="view_unit_not" rowspan="'+layer+'" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
												}
												isExist = true;
												break;
											}else{
												for(var a = 1;a<layer;a++){
													var rowFloor = Number(floor)-a;
													var loc = rowFloor + "-" + x+"-";
													if(loc == location){
														isExist = true;
														break;
													}
												}
											}
											
										}else{
						
											if (data.obj[iItem].location.indexOf(location)==0) {
												isExist = true;
												//id,userName,mobile,area,communityName,houseNumber
												if(data.obj[iItem].status == "1"){
													//layerHtml += '<td class="view_unit" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
													if(data.obj[iItem].preStatus == "1"){
														if(data.obj[iItem].settledStatus == "1"){
															layerHtml += '<td class="view_unit_pre_settled" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
														}else{
															layerHtml += '<td class="view_unit_pre" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
														}
													}else{
														if(data.obj[iItem].settledStatus == "1"){
															layerHtml += '<td class="view_unit_settled" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
														}else{
															layerHtml += '<td class="view_unit" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
														}
													}
												}else{
													layerHtml += '<td class="view_unit_not" onclick="showId('+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +')">'+ data.obj[iItem].houseNumber + '</td>';
												}
												break;
											}
										}
									}
									if (!isExist) {
										layerHtml += '<td id = "'+location+'" class="view_unit_not">&nbsp;</td>';
									}
								}
							}
							layerHtml += '</tr>';
							//$("#layer_tb").append('<table class="building_tb" border=0>' + floorHtml + layerHtml + '</table>');
							
							for( var row = data.row; row > 0; row--) {
								layerHtml += '<tr>';
								if(maptype == "1"){
									layerHtml += '<td class="view_unit_floor">' + row + '</td>';
								}else{
									layerHtml += '<td class="view_unit_floor">' + row + '楼</td>';
								}
								for ( var col = 1; col < data.col; col++) {
									layerHtml += '<td id = "floor_'+row + '-' + col+'" class="view_unit_not">&nbsp;</td>';
								}
								layerHtml += '</tr>';
							}
							$("#layer_tb").append('<table class="building_tb" border=0 style="width:'+60*(Number(data.col))+'px">' + floorHtml + layerHtml + '</table>');
							 */
							 
							 for( var row = data.row; row > 0; row--) {
									layerHtml += '<tr>';
									if(maptype == "1"){
										layerHtml += '<td class="view_unit_floor">' + row + '</td>';
									}else{
										layerHtml += '<td class="view_unit_floor">' + row + '楼</td>';
									}
									for ( var col = 1; col < data.col; col++) {
										layerHtml += '<td id = "floor_'+row + '-' + col+'" class="view_unit_not">&nbsp;</td>';
									}
									layerHtml += '</tr>';
							}
							$("#layer_tb").append('<table class="building_tb" border=0 style="width:'+60*(Number(data.col))+'px">' + floorHtml + layerHtml + '</table>');
								
							for ( var iItem = 0; iItem < data.obj.length; iItem++) {//根据坐标寻找值
								var floor = data.obj[iItem].location.split("-")[0];
								var x = data.obj[iItem].location.split("-")[1];
								var layer = data.obj[iItem].location.split("-")[2];
								var loc = floor + "-"+ x;
								var col = 0;
								if(data.obj[iItem].location.split("-").length == 4){
									col = data.obj[iItem].location.split("-")[3];
								}
								
								if(layer>1 && col>1){//多层一户
									$("#floor_"+loc).attr("rowspan",layer);
									$("#floor_"+loc).attr("colspan",col);
									$("#floor_"+floor+"-"+x).html(data.obj[iItem].houseNumber);
									for(var j = 0;j<layer;j++){
										for(var i=0;i<col;i++){
											var id = "";
											if(!(j == 0 && i ==0)){
												id = "#floor_"+(floor-j)+"-"+(Number(x)+i);
											}
											var roomToRemove = $(id);
											roomToRemove.remove();
										}
									}
								}else if(layer>1){
									$("#floor_"+loc).attr("rowspan",layer);
									$("#floor_"+floor+"-"+x).html(data.obj[iItem].houseNumber);
									for(var i=1;i<layer;i++){
										var roomToRemove = $("#floor_"+(floor-i)+"-"+x);
										roomToRemove.remove();
									}
								}else if(col>1){
									$("#floor_"+loc).attr("colspan",col);
									$("#floor_"+floor+"-"+x).html(data.obj[iItem].houseNumber);
									for(var i=1;i<col;i++){
										var roomToRemove = $("#floor_"+floor+"-"+(Number(x)+i));
										roomToRemove.remove();
									}
								}else{
									$("#floor_"+floor+"-"+x).html(data.obj[iItem].houseNumber);
								}
								
								if(data.obj[iItem].status == "1"){
									if(data.obj[iItem].preStatus == "1"){
										if(data.obj[iItem].settledStatus == "1"){
											$("#floor_"+floor+"-"+x).removeClass("view_unit_not");
											$("#floor_"+floor+"-"+x).addClass("view_unit_pre_settled");
										}else{
											$("#floor_"+floor+"-"+x).removeClass("view_unit_not");
											$("#floor_"+floor+"-"+x).addClass("view_unit_pre");
										}
									}else{
										if(data.obj[iItem].settledStatus == "1"){
											$("#floor_"+floor+"-"+x).removeClass("view_unit_not");
											$("#floor_"+floor+"-"+x).addClass("view_unit_settled");
										}else{
											$("#floor_"+floor+"-"+x).removeClass("view_unit_not");
											$("#floor_"+floor+"-"+x).addClass("view_unit");
										}
									}
								}
								
								$("#floor_"+floor+"-"+x).attr("onclick","showId("+data.obj[iItem].id +",'" + data.obj[iItem].userName + "','" +  data.obj[iItem].mobile + "','" +  data.obj[iItem].area + "','" +  data.obj[iItem].communityName + "','" + data.obj[iItem].no + "','" + data.obj[iItem].houseNumber +"'" +")");
							}
							parent.$.messager.progress('close');
						}else{
							parent.$.messager.progress('close');
							$.messager.alert("提示", "该大楼不存在楼型图！");
						}
					} else {
						$.messager.alert("提示", data.message);
					}
				}
			});
		}
	}
	
	/*清除查询条件**/
    function ClearHouseMapQuery() {
    	$('#map_communityId').combobox("setValue","");
    	$('#map_zone').combobox("setValue","");
    	$('#map_no').combobox("setValue","");
    }

    
</script>

<div class="easyui-layout" data-options="fit:true,border:false">

	<div data-options="region:'center',border:false">
		<div id="houseMapQuerysearchtool" data-options="region:'north' , border:false">
			<div class="clear"></div>
			<table id="houseMapQueryTblQuery" style="width:100%;font-size:12px;">
				<tr>
				    <td align="right"><span>区县</span></td>
					<td>
						<select id="map_qx" style="width:120px;">
							<option value="">全部</option>
							<option value="清河区">清河区</option>
							<option value="清浦区">清浦区</option>
							<option value="淮阴区">淮阴区</option>
							<option value="淮安区">淮安区</option>
							<option value="开发区">开发区</option>
							<option value="涟水县">涟水县</option>
							<option value="洪泽县">洪泽县</option>
							<option value="金湖县">金湖县</option>
							<option value="盱眙县">盱眙县</option>
						</select>
						<input id="map_communityId" value="${userCookie.communityId}">
						<input id="map_zone" style="width: 60px;" value="${userCookie.zone}">区
						<input id="map_no" style="width: 60px;" value="${userCookie.no}">幢
					</td>
					<td align="left">
						<a href="javascript:searchHouseMapQuery();" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
						<a href="javascript:ClearHouseMapQuery();" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">清空</a>
					</td>
				</tr>
			</table>
			<div class="clear"></div>
		</div>
		
		<div class="view" style="width:100%;margin-top: 10px;">
			<div style="margin-left: auto; margin-right: auto; width: 100%; text-align: center;font-family: arial, 'Microsoft Yahei', sans-serif;font-weight: bolder;font-size: 18px; font-weight: bolder;">
				<span id="view_buildingTitle"></span>楼层分布图
			</div>
			<div id="remark" style="margin-left: auto; margin-right: auto; width: 100%; text-align: center; color:red; font-size: 12px; font-weight: bolder;">
			</div>
			<div style="margin-left: auto; margin-right: auto; width: 100%; text-align: center;">
				<div style="width: 490px; height:16px; margin-top:5px;margin-bottom:5px; line-height:16px; font-size: 12px; font-weight: bolder; margin-left: auto;margin-right: auto;text-align: center;">
					<div style="float: left;width: 50px;">图例：</div>
					<div style="width: 100px;height: 16px;float: left;overflow: hidden;">
						<div style="width: 16px;height: 16px;float:left;background-color: #5cadef;overflow: hidden;"></div><div style="float: left;">&nbsp;已有合同 </div>
					</div>
					<div style="width: 100px;height: 16px;float: left;overflow: hidden;">
						<div style="width: 16px;height: 16px;float:left;background-color: #a2a1a1;"></div><div style="float: left;">&nbsp;没有合同</div>
					</div>
					<div style="width: 140px;height: 16px;float: left;overflow: hidden;">
						<div style="width: 16px;height: 16px;float:left;background:#5cadef url('images/star.png') no-repeat;"></div><div style="float: left;">&nbsp;本年度已预收费</div>
					</div>
					<div style="width: 100px;height: 16px;float: left;overflow: hidden;">
						<div style="width: 16px;height: 16px;float:left;background-color: #f00;overflow: hidden;"></div><div style="float: left;">&nbsp;未结算</div>
					</div>
				</div>
			</div>
			<div id="layer_tb" style="margin-left: auto; margin-right: auto; width: 100%; text-align: center;"></div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(function(){
	parent.$.messager.progress('close');
	
	$('#map_qx').combobox({
		editable:false,
		onChange:function (newValue,oldValue) {
			$('#map_communityId').combobox("setValue","");
			$('#map_communityId').combobox('reload',whzl.basePath + '/communityAction_findAll?community.area='+newValue); 
		}
	});
	
	$('#map_communityId').combobox({
	    url: whzl.basePath + '/communityAction_findAll',
	    valueField:'value',
        textField:'text',
        filter:function(q,row){ 
	       	var opts=$(this).combobox("options"); 
	       	return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配 
       	},
       	onChange:function (newValue,oldValue) {
       		$('#map_zone').combobox("setValue","");
       		$('#map_no').combobox("setValue","");
			$('#map_zone').combobox('reload',whzl.basePath + '/houseAction_findAllZone?house.community.id='+newValue); 
			$('#map_no').combobox('reload',whzl.basePath + '/houseAction_findAllNo?house.community.id='+$('#map_communityId').combobox("getValue") + '&house.zone='+$('#map_zone').combobox("getValue")); 
		}
	});
	$('#map_zone').combobox({
		//editable:false,
		url: whzl.basePath + '/houseAction_findAllZone?house.community.id='+$('#map_communityId').combobox("getValue"),
	    valueField:'value',
        textField:'text',
		filter:function(q,row){ 
	       	var opts=$(this).combobox("options"); 
	       	//return row[opts.textField].indexOf(q)==0;// 
	       	return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配 
       	},
       	onChange:function (newValue,oldValue) {
       		$('#map_no').combobox("setValue","");
			$('#map_no').combobox('reload',whzl.basePath + '/houseAction_findAllNo?house.communityId='+$('#map_communityId').combobox("getValue") + '&house.zone='+newValue); 
		}
	});
	$('#map_no').combobox({
		//editable:false,
		url: whzl.basePath + '/houseAction_findAllNo?house.community.id='+$('#map_communityId').combobox("getValue") + '&house.zone='+ $('#map_zone').combobox("getValue"),
	    valueField:'value',
        textField:'text',
		filter:function(q,row){ 
	       	var opts=$(this).combobox("options"); 
	       	return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配 
       	}
	});
	
});
</script>