jucai/resources/views/admin/jobfair/floorplan.blade.php

<div class="box">
	<form action="{{route('floorplans.floors')}}" enctype="multipart/form-data" method="post" id="form1">
		{{ csrf_field() }}
		<input type="hidden" value="{{ $content->id or '' }}" name="floorplan_id" id="floorplan_id">
		<input type="hidden" name="floor_position" id="floor_position" value="">
		<div class="box-body table-responsive">
			<div class="form-group clearfix">
			    <label for="uploadImg" class="control-label astrisk">展位图：</label>
			    <div style="float: left;width: 580px;">
			       <div tabindex="500" class="btn btn-primary btn-file" style="float: left;">
						<i class="glyphicon glyphicon-folder-open"></i>&nbsp;
						  <span class="hidden-xs">上传图片</span>
						 <input type="file"  accept="image/*" class="uploadImg" name="uploadImg" id="uploadImg" onchange="changeImg(this)">
					</div>
					<div class="tips">
					（建议图片大小1000x800）
					</div>
			    </div>
			</div>
			<div class="form-group clearfix">
			    <label for="imgName" class="control-label astrisk">展位平面图名称：</label>
			    <div style="float: left;width: 380px;">
			        <div class="input-group">
			            <span class="input-group-addon"><i class="fa fa-pencil fa-fw"></i></span>
			            <input type="text" id="imgName" name="imgName" value="{{ $content->name or '' }}" class="form-control" placeholder="请输入展位图名称">
			        </div>
			    </div>
			    <div  class="tips"></div>
			</div>
			<div class="form-group clearfix zwNamePre">
			    <label for="prefix" class="control-label">展位号前缀：</label>
			    <div style="float: left;width: 180px;">
			        <div class="input-group">
			            <span class="input-group-addon"><i class="fa fa-pencil fa-fw"></i></span>
			            <input type="text"  name="prefixCode"  class="form-control" placeholder="请输入前缀">
			        </div>
			    </div>
			    {{--<div  style="float: left;width: 55px;">
		            <button type="button" class="btn btn-primary prefixSave">保存</button>
		        </div>--}}
		        <div  class="tips"></div>
			</div>
			<div class="form-group clearfix sbIdPre">
				<label for="prefix" class="control-label">设备ID前缀：</label>
				<div style="float: left;width: 180px;">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-pencil fa-fw"></i></span>
						<input type="text"  name="prefixId"  class="form-control" placeholder="请输入前缀">
					</div>
				</div>
				{{--<div  style="float: left;width: 55px;">--}}
					{{--<button type="button" class="btn btn-primary prefixSave"  >保存</button>--}}
				{{--</div>--}}
				<div  class="tips"></div>
			</div>
			<div class="form-group clearfix sbIdPre">
				<label for="prefix" class="control-label">批量创建展位：</label>
				<div style="float: left;width: 180px;">
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-pencil fa-fw"></i></span>
						<input type="text" name="tempZwNum"   class="form-control" placeholder="请输入展位数" onkeyup="if(event.keyCode !=37 &amp;&amp; event.keyCode != 39) value=value.replace(/\D/g,'');" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/\D/g,''))">
					</div>
				</div>
				<div  style="float: left;width: 55px;">
				<button type="button" class="btn btn-primary tempZwSave">确定</button>
				</div>
				<div  class="tips"></div>
			</div>
			<div class="col-md-12" style="width:1000px;">
				<div>
					在平面图上点击新增、移动展位。（左键新增可预定展位，右键新增预留展位）
					<img src="{{ theme_asset('app/images/jobfair/zw-order.png')}}" alt="" /><span style="padding: 0px 10px;">可预定展位</span>
					<img src="{{ theme_asset('app/images/jobfair/zw-stayLock.png')}}" alt="" /><span style="padding: 0px 10px;">预留展位</span>
				</div>
			</div>
			<div class="clearfix">
				<div class="col-md-12  no-padding jobfairbox" id="jobfairShow" oncontextmenu="return false"  data-manage="true">
					<img id="floorplanImg" class="floorplanImg" src="{{ theme_asset('app/images/1000x800.png')}}" alt="平面图"/>
				</div>
				<div class="lists-info">
					<div class="list-box">
						<table class="table table-hover no-border">
							<thead>
							<tr><th colspan="4" style="text-align:center;vertical-align:middle;font-size: 16px;">展位清单</th> </tr>
							<tr style="border: 1px solid #f4f4f4;"><th style="width: 60px;">展位号</th><th style="width: 65px;" >类型</th><th style="width: 60px;">排序</th><th style="width: 90px;">设备ID</th></tr>
							</thead>
						</table>
						<div class="main-table">
							<table class="table table-hover">
								<tbody></tbody>
							</table>
						</div>

					</div>
					<div class="total-num"></div>
					<div style="margin:20px 0px 0px 95px;"><button type="button" class="btn btn-primary" id="refresh">更新列表</button></div>
				</div>
			</div>
		</div>
		<div class="box-footer">
			<div class="btn-group" style="margin-left: 440px;">
	            <button type="button" class="btn btn-primary" id="save">保存</button>
	        </div>
		</div>
	</form>
</div>

@if(isset($content->images))
	<input type="hidden" id="kP" value="{{ upload_asset($content->images) }}">
@else
	<input type="hidden" id="kP" value="">
@endif
<input type="hidden" id="kD" value={!! $content->value or '' !!}>

<style type="text/css">
	/*body{min-width: 1680px;overflow: auto;}*/
	.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
	.clearfix{zoom:1;  /*为了兼容IE*/}
	.box .lists-info{float: left;margin-left: 20px;position: relative;/*left: 0px;top: -55px;*/margin-top: 10px;}
	.box .lists-info .list-box{margin-bottom:20px;}
	.box .lists-info .list-box table{margin-bottom: 0px;}
	.box .lists-info .list-box .main-table{max-height: 620px;overflow-y: auto;}
	.box .lists-info .list-box .main-table table{border: 1px solid #f4f4f4;}
	.box .lists-info .list-box table input{border:none;}
	.box .lists-info .list-box table tr td{width: 63px;}
	.box .lists-info .list-box table tr .td-sort{width: 64px;}
	.box .lists-info .list-box table tr .td-enable{color: #009900;width: 69px;}
	.box .lists-info .list-box table tr .td-disable{color: #FF6600;width: 69px;}
	.box .lists-info .list-box table tr .equipment-id{width: 80px;}
	.box .lists-info .total-num{text-align: center;padding: 5px;font-size: 12px;}
	.box .form-group{margin: 20px 0px;width: 1000px;}
	.box .form-group label{float: left;width: 120px;line-height: 34px;text-align: right;}
	.tips{float: left;color: #999999;line-height: 34px;}
	.addbox{width: 140px;float: left;}
	.jobfairbox{width: 1002px;height:auto;min-height:802px;background-color: #fff; border: 1px solid #ccc;margin-top:20px;position: relative;float: left;}
	.jobfairbox .floorplanImg{max-width: 1000px;position: absolute;left: 0px;top: 0px;}
	.jobfairbox .del{background:#ffffff url("{{ theme_asset('app/images/252.png') }}")no-repeat center;width: 18px;height: 18px;border-radius: 10px;display: inline-block;background-size: 16px;position: absolute;left: 22px; top: -12px;cursor: default;display: none;}
	.jobfairbox .sign{display: none;}
	.jobfairbox .zw-box:hover .del{display: block;}
	.jobfairbox .zw-box{display:block;width: 30px;height: 30px;float: left;color: #333;}
	.jobfairbox .zw-box:nth-child(20n+1){margin-right: 0px;}
    .jobfairbox .zw-box.zw-lock{background: url("{{ theme_asset('app/images/jobfair/zw-stayLock.png') }}")no-repeat;position: absolute;}
    .jobfairbox .zw-box.zw-order{background: url("{{ theme_asset('app/images/jobfair/zw-order.png') }}")no-repeat;position: absolute;}
    .jobfairbox .zw-box .zw-num{position: absolute;left: 0px;top: 5px;width: 30px;height: 16px;background: transparent;border: none;text-align: center;}
	.jobfairbox .zw-box.zw-lock .zw-num{color: #fff;}
	.jobfairbox .zw-box.zw-order .zw-num{color: #333;}
</style>
<script type="text/javascript">
	//同步右侧展位清单
	function ayncZwLists(zwLists){
		var listHtml = "";
		$(".main-table tbody").html("");
        //console.log(zwLists);
		$(".total-num").html("总展位："+$(".jobfairbox .zw-box").length+"，<span style='color:#009900;'>可预订：</span>"+$(".jobfairbox .zw-box.zw-order").length+"，<span style='color:#FF6600;'>预留：</span>"+$(".jobfairbox .zw-box.zw-lock").length);
		for(var i=0;i<zwLists.length;i++){
			var zwName,zwStatus,zwStatusClass,zwType,zwPositionleft,zwPositiontop,zwSortIndex,zwEquipmentId;
			zwName = zwLists[i].name;
			zwType = zwLists[i].type;
			zwPositionleft =zwLists[i].left;
			zwPositiontop =zwLists[i].top;
			zwSortIndex = zwLists[i].sortindex? zwLists[i].sortindex: (i+1);
			zwEquipmentId = zwLists[i].equipment_id;
			if(zwType==1){
				zwStatus=  "可预定";
				zwStatusClass = "td-enable";
			}else{
				zwStatus= "预留";
				zwStatusClass = "td-disable";
			}
			listHtml = '<tr data-name="'+zwName+'" data-type="'+zwType+'" data-postionleft="'+zwPositionleft+'" data-postiontop="'+zwPositiontop+'" >'+
					'<td><span style="color:#3c8dbc;">'+zwName+'</span></td>'+
					'<td class="'+zwStatusClass+'">'+zwStatus+'</td>'+
					'<td><input  type="text" class="td-sort"  value="'+zwSortIndex+'"></td>'+
					'<td><input type="text" class="equipment-id" value="'+zwEquipmentId+'"></td>'+
					'</tr>';
			$(".main-table tbody").append(listHtml);
		}
	}
	// 获取右侧清单展位信息
	function getRightArr() {
		var newzwlists = new Array();
		$(".main-table tbody tr").each(function(){
			var name = $(this).data("name");
			var type = $(this).data("type");
			var left = $(this).data("postionleft");
			var top = $(this).data("postiontop");
			var sortIndex = parseInt($(this).find(".td-sort").val());
			var equipmentId = $.trim($(this).find(".equipment-id").val());
			var  positionObj = {
				id:0,
				name:name,
				type:type,
				left:left,
				top:top,
				sortindex:sortIndex,
				equipment_id:equipmentId
			}
			newzwlists.push(positionObj);
		})
		return newzwlists;
	}
	// 获取左侧展位图中展位信息
	function getzwArr(){
		var zwArr = new Array();
		$("#jobfairShow .zw-box").each(function(){
			var left = $(this).css("left");
			var top = $(this).css("top");
			var name = $.trim($(this).find(".zw-num").val());
			var type = $(this).data("type");
			var sortIndex = $(this).data("index");
			var equipmentId = $(this).data("equipment");
			var  obj = {
				id:0,
				name:name,
				type:type,
				left:left,
				top:top,
				sortindex:sortIndex,
				equipment_id:equipmentId
			}
			zwArr.push(obj);
		})
		return zwArr;
	}
	//更新列表同步恢复左侧展位
	function recoveryZw(zwArr) {
		$("#jobfairShow .zw-box").remove();
		for(var i =0; i< zwArr.length;i++){
			var zwClass = zwArr[i].type==1?"zw-order":"zw-lock";
			var jobfairHtml = '<a class="zw-box '+zwClass+'" data-type="'+zwArr[i].type+'"  style="left:'+zwArr[i].left+';top:'+zwArr[i].top+';" data-index="'+zwArr[i].sortindex+'" data-equipment="'+zwArr[i].equipment_id+'">'+
					'<span class="del"/></span>'+
					'<input type="text" class="zw-num"  value="'+zwArr[i].name+'" /></a>';
			$("#jobfairShow").append(jobfairHtml);
		}
	}
</script>
<script type="text/javascript" src="{{ theme_asset('app/js/drag.js') }}"></script>
<script type="text/javascript" src="{{ theme_asset('app/js/jobfair.js') }}"></script>
<script type="text/javascript">
	//判断浏览器是否支持FileReader接口
    if (typeof FileReader == 'undefined') {
    	alert("浏览器不支持")
        //使选择控件不可操作
        $("#uploadImg").prop("disable",true)
    }
	
    //上传平面图预览
    function changeImg(obj) {
        var file = obj.files[0];
		if((file.type).indexOf("image/")==-1){
			swal('请上传图片', '', 'warning');
			return false;
		}
        var reader = new FileReader();
        reader.onload = function (e) {
            //console.log("成功读取....");
            var image = document.getElementById("floorplanImg");
                image.src = e.target.result;
        };
        reader.readAsDataURL(file)
		setTimeout(resetHeiht,1000);
    }
	function resetHeiht(){
		var h = $("#floorplanImg").outerHeight();
		if(h>800){
			$("#jobfairShow").css("minHeight",(h+2)+"px");
		}else{
			$("#jobfairShow").css("minHeight","802px");
		}
	}
$(function () {
	var jobfair = $("#floorplan_id").val();
	var imgUrl = $("#kP").val();
    var positionArr =  $("#kD").val();
	// 恢复展位
    if(jobfair){
    	positionArr = JSON.parse(positionArr);
        $("#floorplanImg").attr("src", imgUrl);
        //console.log(positionArr)
		recoveryZw(positionArr);
		ayncZwLists(positionArr);
		resetHeiht();
    }
	$(document).on("keyup",".zw-num",function(){
		ayncZwLists(getzwArr());
	})
	$(document).on("mousemove",".zw-box",function(){
		ayncZwLists(getzwArr());
	})
	//批量创建临时展位
	$(".tempZwSave").click(function () {
		var tempZwNum = parseInt($("input[name='tempZwNum']").val());
		var prefixCode = $.trim($("input[name='prefixCode']").val());
		var prefixId = $.trim($("input[name='prefixId']").val());
		if (!tempZwNum) {
			swal('请输入批量创建个数', '', 'warning');
			return false;
		}
		$("#jobfairShow .zw-box").remove();
		for(var i =0; i<tempZwNum;i++){
			var html2 = '<a class="zw-box" data-type="1" style="margin:10px"  data-equipment="'+prefixId+(i+1)+'">'+
							'<span class="del"/></span>'+
							'<input type="text" class="zw-num"  value="'+prefixCode+(i+1)+
							'"/>' +
						'</a>';
			$("#jobfairShow").append(html2);
		}
		$(".zw-box").each(function () {
			var left = $(this).position().left+10;
			var top = $(this).position().top+10;
			//console.log("left:"+left+"top:"+top)
			$(this).css({left:left,top:top});
		})
		$(".zw-box").addClass("zw-order").css({margin:"0px"});
		ayncZwLists(getzwArr());
	})

	$(".main-table").on("change",".equipment-id",function () {
		var newzwlists = getRightArr();
		recoveryZw(newzwlists);
	})
	//更新列表
$("#refresh").click(function () {
	var newzwlists = getRightArr()
	newzwlists.sort(function(a,b){
		if(a.sortindex <b.sortindex ){
			return -1;
		}
		if(a.sortindex >b.sortindex ){
			return 1;
		}
		return 0;
	})
	ayncZwLists(newzwlists);
	recoveryZw(newzwlists);
})
	//保存
	$("#save").off().click(function(){
		if($("#jobfairShow #floorplanImg").attr("src").indexOf("1000x800.png")!==-1){
			swal('请上传展位图', '', 'warning');
			return false;
		}
		var imgName = $("#imgName").val();
		if (imgName == "") {
            swal('请填写展位图名称', '', 'warning');
            return false;
        }
		var zwArr =getRightArr();
		//console.log(zwArr)
        $("#floor_position").val(JSON.stringify(zwArr));
       	$("#form1").submit();
       	$(this).prop("disabled","true");
	})
 })
</script>