baozhangfang/WebRoot/WEB-INF/jsp/house/buildingView.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;
	color: #444;
	background-color: #184e8b;
}
.view_unit_floor {
	width: 100px;
	height: 24px;
	color: #444;
	background-color: #d7d7d7;
}
.view_unit {
	width: 100px;
	height: 24px;
	color: #444;
	background-color:#5cadef;
}
.view_unit_pre {
	width: 100px;
	height: 24px;
	color: #444;
	background:#5cadef url("images/star.png") no-repeat;
	background-position: 2;
}
.view_unit_not {
	width: 100px;
	height: 24px;
	background-color: #a2a1a1;
	color:#444;
	text-align: center;
}
.building_tb{
	margin-left: auto; 
	margin-right: auto;
	border-spacing: 1px;
}
</style>

	<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: 350px; 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: 100px;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>
		</div>
		<div id="layer_tb" style="margin-left: auto; margin-right: auto; width: 100%; text-align: center;"></div>
	</div>
	
<script>
	function draw(buildingName,maptype) {
		parent.$.messager.progress({
			title : '提示',
			text : '拼命加载中，请稍候....'
		});
		$("#layer_tb").empty();
		$.ajax({
			type : "post",//使用get方法访问后台
			dataType : "json",//返回json格式的数据
			url : "houseAction_findAllQuery",//要访问的后台地址
			data : "house.buildingName=" + buildingName,//要发送的数据
			complete : function() {
				$("#load").hide();
			},//AJAX请求完成时隐藏loading提示
			success : function(data) {//msg为返回的数据，在这里做数据绑定
				if (data.success) {
					var unitsLen = data.unitList.length;
					var floorHtml = "";
					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 = "";
					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;
							layerHtml += '<td id = "f-'+location+'" class="view_unit_not">&nbsp;</td>';
						}
						layerHtml += '</tr>';
					}
							
					$("#layer_tb").append('<table id="view_tb" 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 col = 0;
						var loc = floor + "-"+ x;
						if(data.obj[iItem].location.split("-").length == 4){
							col = data.obj[iItem].location.split("-")[3];
						}
						if(layer>1 && col>1){//多层一户
							$("#f-"+loc).attr("rowspan",layer);
							$("#f-"+loc).attr("colspan",col);
							$("#f-"+floor+"-"+x).html(spanFormat(data.obj[iItem].id,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 = "#f-"+(floor-j)+"-"+(Number(x)+i);
									}
									var roomToRemove = $(id);
									roomToRemove.remove();
								}
							}
						}else if(layer>1){//纵向
							$("#f-"+loc).attr("rowspan",layer);
							$("#f-"+floor+"-"+x).html(spanFormat(data.obj[iItem].id,data.obj[iItem].houseNumber));
							for(var i=1;i<layer;i++){//删除单元格
								var roomToRemove = $("#f-"+(floor-i)+"-"+x);
								roomToRemove.remove();
							}
						}else if(col>1){//横向
							$("#f-"+loc).attr("colspan",col);
							$("#f-"+floor+"-"+x).html(spanFormat(data.obj[iItem].id,data.obj[iItem].houseNumber));
							for(var i=1;i<col;i++){//删除单元格
								var roomToRemove = $("#f-"+floor+"-"+(Number(x)+i));
								roomToRemove.remove();
							}
						}else{//正常
							$("#f-"+floor+"-"+x).html(spanFormat(data.obj[iItem].id,data.obj[iItem].houseNumber));
							
							
						}
						//处理状态
						if(data.obj[iItem].status == "1"){
							if(data.obj[iItem].preStatus == "1"){
								$("#f-"+floor+"-"+x).removeClass("view_unit_not");
								$("#f-"+floor+"-"+x).addClass("view_unit_pre");
							}else{
								$("#f-"+floor+"-"+x).removeClass("view_unit_not");
								$("#f-"+floor+"-"+x).addClass("view_unit");
							}
						}
					}
					parent.$.messager.progress('close');
				} else {
					parent.$.messager.progress('close');
					$.messager.alert("提示", data.message);
				}
			}
		});
	}
	
	
	var spanFormat = function(id,name){
		return "<span onclick='detail("+ id +")' style='cursor:pointer'> " + name + " </span>"		
	}
	
</script>