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

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:include page="../../common/include.jsp" />
<%String basePath = request.getScheme()+ "://" + request.getServerName() + ":" +request.getServerPort() + request.getContextPath(); %>
<script type="text/javascript">

	/**小区显示区*/
	$(function() {
		$('#houseQueryDataGrid').datagrid({
			rownumbers:true,
			fit:true,
			pageSize:10,
			pageList : [ 10, 20, 30, 40, 50 ],
			fitColumns:false,
			border:false,
			singleSelect:true,
			sortOrder:'desc',
			pagination:true,
			idField:'id',
			url:whzl.basePath + '/houseAction_listBuilding',
			toolbar:'#houseQuerysearchtool',
			nowrap:true,
			loadFilter:function(result){
					if(result.success){
						return result.obj;
					}else{
						$.messager.alert("提示",result.message);
						return ;
					}							
				}
			}
		);
	});
	
	/**查询*/
	function searchCommuntiyQuery(){
		var name = "";
		if(trim($('#communityId').combobox("getText")) != ""){
			name += trim($('#communityId').combobox("getText"));
		}
		if(trim($('#zone').combobox("getText")) != ""){
			name += " " +trim($('#zone').combobox("getText")) + "区";
			if(trim($('#no').combobox("getText")) != ""){
				name += trim($('#no').combobox("getText"))+"幢";
			}
		}else{
			if(trim($('#no').combobox("getText")) != ""){
				name += " "+trim($('#no').combobox("getText"))+"幢";
			}
		}
		var params = encodeURI("building.name="+ name + "&building.ismap=" + $('#ismap').combobox("getValue")
								 + "&house.community.id="+$('#communityId').combobox("getValue")
								 + "&house.communityName="+ $('#communityId').combobox("getText")
								 + "&house.zone="+ $('#zone').combobox("getValue")
								 + "&house.no="+ $('#no').combobox("getValue"));
		$('#houseQueryDataGrid').datagrid({url:whzl.basePath + '/houseAction_listBuilding?'+params,pageNumber:1});
	}
	
	/*清除查询条件**/
    function ClearQuery() {
    	$("#tblQuery").find("input").val("");
    	$('#communityId').combobox("setValue","");
    	$('#zone').combobox("setValue","");
    	$('#no').combobox("setValue","");
    	$('#ismap').combobox("setValue","");
    }
    
    /**编辑*/
	var editFormatter = function(value , row , index){
		return "<img src='<%=basePath%>/images/pencil.png' title='查看详情' onclick='buildingEdit(" + "\"" + row.name + "\"," + "\"" + row.ismap + "\"," + "\"" + row.maptype + "\")' style='cursor:pointer' />";
	};
	
	var buildingEdit = function(name,ismap,maptype){
		$('#editBuildingDialog').dialog(
				{
					maximizable:true,
					buttons : [
								{
									text : '确定', 
									iconCls : 'icon-ok', 
									handler : function(){ 
										parent.$.messager.progress({
											title : '提示',
											text : '保存数据中，请稍候....'
										});
										//
										var unitstr = "";
										$("#layer_edit_tb").find("td.unit").each(function(i,n){
								    		var obj = $(n);
								    		if(obj.html() != ""){
								    			unitstr += obj.text() +",";
								    		}
								    	});
										
										//
										var houses = "";
										$("#layer_edit_tb").find("td.drop").each(function(i,n){
								    		var obj = $(n);
								    		if(obj.html() != ""){
								    			var id = $(n).attr("id");
								    			//楼层;
								    			var floor = id.split('_')[1];
								        		var unit = id.split('_')[2];
									    	    //房号Id;
									    	    var houseId = $("#"+id).find(".house_item").attr("id");
									    	    if(typeof(houseId) != "undefined"){
										    	    houses += houseId + "-" + floor + "-" + unit + ",";
									    	    }
								    		}
								    	});
										
										var maptype = 0;
										if($("#maptype").attr('checked') == "checked"){
											maptype = 1;
										}
										
										$.ajax({
								            type: "post",//使用get方法访问后台
								            dataType: "json",//返回json格式的数据
								            url: "houseAction_addUnit",//要访问的后台地址
								            data: "unit.buildingName="+$("#edit_buildingTitle").text()+"&unit.unit="+unitstr + "&houses="+houses + "&remark="+$("#edit_remark").val() + "&building.maptype="+maptype +  "&building.floor="+$("#rows").val() + "&building.house="+$("#cols").val(),//要发送的数据
								            complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
								            success: function(data){//msg为返回的数据，在这里做数据绑定
								            	if(data.success){
								            		parent.$.messager.progress('close');
									            	$.messager.alert("提示",data.message);
								            		$("#editBuildingDialog").dialog("close");
								            		searchCommuntiyQuery();
								            	}else{
								            		parent.$.messager.progress('close');
								            		$.messager.alert("提示",data.message);
								            	}
								            }
									 	});
									}
								}
							],
					onLoad : function(){
						$("#edit_buildingTitle").text(name);
						buildingDraw($("#edit_buildingTitle").text(),ismap,maptype);
					}
				}
			);
	};
	
	/**详细页面对话框*/
	var buildingDraw = function(buildingName,ismap,maptype){
		$("#layer_edit_tb").empty();
		if(ismap == '1'){
			$.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) {
						$("#unitArea").empty();
	            		for(var u = 0;u<data.units.length;u++){
		            		if(data.units[u] != null && data.units[u] != ''){
		            			$("#unitArea").append("<div class='unit_item'>"+data.units[u]+"单元</div>");
		            		}
	            		}
	            		
	            		$("#house").empty();
	            		$("#houseTotal").empty();
	            		$("#houseTotal").text(data.objHouse.length + "户");
	            		for(var h = 0;h<data.objHouse.length;h++){
	            			if(data.objHouse[h].unit != null && data.objHouse[h].unit != ""){
			            		$("#house").append("<div class='item' id='"+data.objHouse[h].id+"'>"+data.objHouse[h].unit + "-"+data.objHouse[h].houseNumber+"</div>");
	            			}else{
			            		$("#house").append("<div class='item' id='"+data.objHouse[h].id+"'>"+data.objHouse[h].houseNumber+"</div>");
	            			}
	            		}
	            		
						var unitsLen = data.unitList.length;
						var floorHtml = "";
						if (unitsLen > 0) {//有单元
							floorHtml = '<tr>';
							floorHtml += '<td class="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="unit" style="font-size:16px;">'+(uItem+1)+'</td>';
								}
							}else{
								for(var uItem = 0; uItem < unitsLen; uItem++) {
									var unit = data.unitList[uItem];
									for(var t =0;t<unit.houses;t++){
										floorHtml += '<td class="unit" style="font-size:16px;"><div class="unit_item unit_assigned">'+unit.unit+'</div></td>';
									}
								}
							}
							floorHtml += '</tr>';
						}else{
							floorHtml = '<tr>';
							floorHtml += '<td class="unit_title">&nbsp;</td>';
							for(var uItem = 0; uItem < data.col-1; uItem++) {
								floorHtml += '<td class="unit" style="font-size:16px;">'+(uItem+1)+'</td>';
							}
							floorHtml += '</tr>';
						}
						var layerHtml = "";
						$("#rows").val(data.rowMax);
						$("#cols").val(data.col-1);
						//for ( var row = data.row; row > 0; row--) {,绘制图形
						for ( var row = data.rowMax; row >= data.rowMin; row--) {
							layerHtml += '<tr>';
							if(maptype == "1"){
								layerHtml += '<td class="floor">' + row + '</td>';
							}else{
								layerHtml += '<td class="floor">' + row + '楼</td>';
							}
							for ( var col = 1; col < data.col; col++) {
								layerHtml += '<td id = "floor_'+row + '-' + col+'" class="drop"></td>';
							}
							layerHtml += '</tr>';
						}
						$("#layer_edit_tb").append('<table class="building_tb" border=0 style="width:'+(54*(Number(data.col))+Number(data.col))+'px;border-spacing: 1px;">' + 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;
							if(data.obj[iItem].location.split("-").length == 4){
								col = data.obj[iItem].location.split("-")[3];
							}
							var houseId = data.obj[iItem].houseNumber;
							if(data.obj[iItem].unit != null && data.obj[iItem].unit != ''){
								houseId = data.obj[iItem].unit + "-" + houseId;
							}
							
							if(layer>1 && col>1){
								for(var r = 0;r<layer;r++){
									for(var c = 0;c<col;c++){
										var rowFloor = Number(floor)-r;
										var xNo = Number(x)+c;
										$("#floor_"+rowFloor+"-"+xNo).append('<div class="house_item" id="'+ data.obj[iItem].id+ '" style="position: static; left: 17px; top: 207px;">'+ houseId+ '</div>');
									}
								}
								
							}
							else if(layer>1){//多层一户
								for(var a = 0;a<layer;a++){
									var rowFloor = Number(floor)-a;
									var loc = rowFloor + "-" + x;
									$("#floor_"+loc).append('<div class="house_item" id="'+ data.obj[iItem].id+ '" style="position: static; left: 17px; top: 207px;">'+ houseId+ '</div>');
								}
							}else if(col>1){//多层一户
								for(var a = 0;a<col;a++){
									var rowFloor = Number(floor);
									var xNo = Number(x)+a;
									var loc = rowFloor + "-" + xNo;
									$("#floor_"+loc).append('<div class="house_item" id="'+ data.obj[iItem].id+ '" style="position: static; left: 17px; top: 207px;">'+ houseId+ '</div>');
								}
							}
							else{
								$("#floor_"+floor+"-"+x).append('<div class="house_item" id="'+ data.obj[iItem].id+ '" style="position: static; left: 17px; top: 207px;">'+ houseId+ '</div>');
							} 
						}
						
						/**单元右边可放置*/
						$('.right td.unit').droppable({
						    accept: '.unit_item',
						    onDrop:function(e,source){
						        $(this).removeClass('over');
					            var c = $(source).clone().addClass('unit_assigned');
					            //清除原来的，更换新的
					            $(this).empty().append(c);
					            c.draggable({
					                revert:true
					            });
						    }
						});
						
						/**房号右边可放置*/
						$('.right td.drop').droppable({
						    accept: '.item,.item_copy',
						    onDragEnter:function(e,source){
					            $(source).draggable('proxy').css('border','1px solid red');
					            $(source).removeClass('trash');
					        },
					        onDragLeave:function(e,source){
					        	$(source).removeClass('trash');
					        },
					        onDrop:function(e,source){
					        	if(($(this).html() == '')){//判断是否重复
					        		$(source).removeClass('item');
					        		$(source).removeClass('item_copy');
						        	$(source).addClass('house_item');
						            $(this).append(source);
					        	}else{
					        		$("#house").append($(this).html().replace("house_item","item"));
					        		$('.left .item').draggable({
					        			revert:true,
					        		    proxy:'clone'
					        		});
					        		$(this).empty();
						        	$(source).removeClass('item');
						        	$(source).addClass('house_item');
						            $(this).append(source);
					        	}
					        }
						});
						
						//单元可拖拽
						$('.house_item').draggable({
						    revert:true,
						    proxy:'clone'
						});
						
						//单元可拖拽
						$('.unit .unit_item').draggable({
						    revert:true,
						    proxy:'clone'
						});
						
						//房号拖地
						$('.left .item').draggable({
							revert:true,
						    proxy:'clone'
						});
						
						//房号可放置
						$('.left').droppable({
							accept:'.assigned , .house_item',
							onDragEnter:function(e,source){
					            $(source).draggable('proxy').css('border','1px solid red');
					            $(source).removeClass('trash');
					        },
							onDragLeave:function(e,source){
								$(source).draggable('options').cursor='not-allowed';
							},
							onDrop:function(e,source){
								$(source).removeClass('house_item');
					        	$(source).addClass('item');
						        $(this).append(source);
							}
						});
					} else {
						$.messager.alert("提示", data.message);
					}
				}
			});
			
		}else{
			$.ajax({
	            type: "post",//使用get方法访问后台
	            dataType: "json",//返回json格式的数据
	            url: "houseAction_findAll",//要访问的后台地址
	            data: "house.buildingName="+buildingName,//要发送的数据
	            complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
	            success: function(data){//msg为返回的数据，在这里做数据绑定
	            	if(data.success){
	            		$("#buildingTitle").empty();
	            		$("#buildingTitle").append(buildingName);
	            		drwaeLayer();
	            		$("#unitArea").empty();
	            		for(var u = 0;u<data.units.length;u++){
		            		$("#unitArea").append("<div class='unit_item'>"+data.units[u]+"单元</div>");
	            		}
	            		$("#house").empty();
	            		$("#houseTotal").empty();
	            		$("#houseTotal").text(data.obj.length + "户");
	            		for(var h = 0;h<data.obj.length;h++){
	            			if(data.obj[h].unit != null && data.obj[h].unit != ""){
			            		$("#house").append("<div class='item' id='"+data.obj[h].id+"'>"+data.obj[h].unit + "-"+data.obj[h].houseNumber+"</div>");
	            			}else{
			            		$("#house").append("<div class='item' id='"+data.obj[h].id+"'>"+data.obj[h].houseNumber+"</div>");
	            			}
	            		}
	            		
	            		//单元可拖拽
	            		$('.unit .unit_item').draggable({
	            		    revert:true,
	            		    proxy:'clone'
	            		});
	            		
	            		//单元可拖拽
	            		$('.left .item').draggable({
	            		    revert:true,
	            		    proxy:'clone'
	            		});
	            		
	            		//房号可放置
	            		$('.left').droppable({
	            			accept:'.assigned , .house_item',
	            			onDragLeave:function(e,source){
	            				$(source).draggable('options').cursor='not-allowed';
	            			},
	            			onDrop:function(e,source){
	            				$(source).removeClass('house_item');
	            	        	$(source).addClass('item');
	            		        $(this).append(source);
	            			}
	            		});
	            		
	            	}else{
	            		$.messager.alert("提示",data.message);
	            	}
	            }
		 	});
		}
	};
	
	var detail = function (id){
		$("#detailHouseDialog").dialog(
			{
				buttons : [
					{
						text : '确定', 
						iconCls : 'icon-ok', 
						handler : function(){ 
							$("#detailHouseDialog").dialog("close");
						}
					}
				],
				onLoad : function(){
					 house_detail_load(id);
				}
			}
		);
	}
	
	
    /**详细*/
	var mapFormatter = function(value , row , index){
		if("1" == row.ismap){
			if("1" == row.maptype){
				return "平面图";
	    	}else{
	    		return "立体图";
	    	}
		}else{
    		return "没有楼型图";
    	}
    	
	};
	
	var viewFormatter = function(value , row , index){
    	if("1" == row.ismap){
			return "<img src='<%=basePath%>/images/details.png' title='查看详情' onclick='buildingView(" + "\"" + row.name + "\"," + "\"" + row.remark + "\"," + "\"" + row.maptype + "\")' style='cursor:pointer' />";
    	}else{
    		return "没有楼型图";
    	}
	};
	
	var buildingView = function(name,remark,maptype){
		$('#viewBuildingDialog').dialog(
			{
				maximizable:true,
				onLoad : function(){
					$("#view_buildingTitle").text(name);
					if(typeof(remark) != "undefined"){
						$("#remark").text(remark);
					}
					draw(name,maptype);
				}
			}
		);
	};
    
</script>

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

	<div data-options="region:'center',border:false">
		<div id="houseQuerysearchtool" data-options="region:'north' , border:false">
			<div class="clear"></div>
			<table id="houseQueryTblQuery" style="width:100%;font-size:12px;">
				<tr>
				    <td align="right"><span>区县</span></td>
					<td>
						<select id="qx" style="width:120px;">
						</select>
						<input id="communityId">
						<input id="zone" style="width: 60px;">区
						<input id="no" style="width: 60px;">幢
						&nbsp;&nbsp;楼型图:
						<select id="ismap" style="width:120px;">
							<option value="">全部</option>
							<option value="1">有</option>
							<option value="0">无</option>
						</select>
					</td>
					<td>
						<a href="javascript:searchCommuntiyQuery();" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
						<a href="javascript:ClearQuery();" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">清空</a>
					</td>
				</tr>
			</table>
			<div class="clear"></div>
		</div>

		<table id="houseQueryDataGrid">
			<thead frozen="true">
        		<tr>
        			<th data-options="field:'name',sortable:true,width:200">大楼名称</th>
        		</tr>
        	</thead>
			<thead>
        		<tr>
        			<th data-options="field:'remark',width:100">备注</th>
        			<th data-options="field:'maptype',width:100,formatter:mapFormatter">楼型</th>
        			<th data-options="field:'edit',width:70,formatter:editFormatter">编辑楼型图</th>
        			<th data-options="field:'view',width:70,formatter:viewFormatter">查看楼型图</th>
        		</tr>
        	</thead>
		</table>
	</div>
</div>
<div id="viewBuildingDialog" data-options="title:'&nbsp;楼型图信息',iconCls:'icon-details',width:950,height:400,modal:true,href:'<%=basePath %>/houseAction_toBuildingView'">
</div>
<div id="editBuildingDialog" data-options="title:'&nbsp;编辑楼型图信息',iconCls:'icon-edit',width:900,height:450,modal:true,href:'<%=basePath %>/houseAction_toBuildingEdit'">
</div>
<div id="detailHouseDialog" data-options="title:'&nbsp;户型详细信息',iconCls:'icon-details',width:700,height:450,modal:true,href:'<%=basePath %>/houseAction_toDetail'">
</div>
<div id="detailDialog"></div>
<script type="text/javascript">
$(function(){
	parent.$.messager.progress('close');
	
	$('#ismap').combobox({
		editable:false
	});
	$('#qx').combobox({
		url: whzl.basePath + '/houseRegisterAction_listChildrenCombobox',
	    valueField:'value',
        textField:'text',
		editable:false,
		onChange:function (newValue,oldValue) {
			$('#communityId').combobox("setValue","");
			$('#communityId').combobox('reload',whzl.basePath + '/communityAction_findAll?community.area='+newValue); 
		}
	});
	
	$('#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) {
       		$('#zone').combobox("setValue","");
       		$('#no').combobox("setValue","");
			$('#zone').combobox('reload',whzl.basePath + '/houseAction_findAllZone?house.community.id='+newValue); 
			$('#no').combobox('reload',whzl.basePath + '/houseAction_findAllNo?house.community.id='+$('#communityId').combobox("getValue") + '&house.zone='+$('#zone').combobox("getValue")); 
		}
	});
	$('#zone').combobox({
		//editable:false,
		url: whzl.basePath + '/houseAction_findAllZone?house.community.id='+$('#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) {
       		$('#no').combobox("setValue","");
			$('#no').combobox('reload',whzl.basePath + '/houseAction_findAllNo?house.community.id='+$('#communityId').combobox("getValue") + '&house.zone='+newValue); 
		}
	});
	$('#no').combobox({
		//editable:false,
		url: whzl.basePath + '/houseAction_findAllNo?house.community.id='+$('#communityId').combobox("getValue") + '&house.zone='+ $('#zone').combobox("getValue"),
	    valueField:'value',
        textField:'text',
		filter:function(q,row){ 
	       	var opts=$(this).combobox("options"); 
	       	return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配 
       	}
	});
	
});
</script>