40 Star 101 Fork 21

Elmo / seating-in-china

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
meetingPersons.html 13.33 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
caolijian1987 提交于 2018-08-06 09:47 . commit
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>中国特色排座系统</title>
<link href="./static/zui-1.8.1/css/zui.min.css" rel="stylesheet">
<link href="./static/zui-1.8.1/css/zui-theme-indigo.css" rel="stylesheet">
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="./static/zui-1.8.1/lib/jquery/jquery.js"></script>
<!-- ZUI Javascript组件 -->
<script src="./static/zui-1.8.1/js/zui.min.js"></script>
<script src="./static/zui-1.8.1/lib/sortable/zui.sortable.min.js"></script>
<script src="./static/zui-1.8.1/lib/selectable/zui.selectable.js"></script>
<link href="./static/seating-in-china/jquery.seating-in-china.css" rel="stylesheet">
<script src="./static/seating-in-china/jquery.seating-in-china.js"></script>
<link href="./static/zui-1.8.1/lib/bootbox/bootbox.min.css" rel="stylesheet">
<script src="./static/zui-1.8.1/lib/bootbox/bootbox.min.js"></script>
<title></title>
<script>
var hasRuled = false;
$(function () {
$('#sortableList').sortable();
$('#content').height($(window).height() - 53);
$('[data-toggle="tooltip"]').tooltip();
var rows = $.zui.store.get('rows');
var cols = $.zui.store.get('cols');
$("#meetingPlace").seating({rows: rows, cols: cols});
makeRowsAndCols(rows,cols);
var mySelectable = $('#meetingPlace');
var selectedData = $.zui.store.get('selectedData');
if (selectedData) {
$("#meetingPlace").initSeatSelection(selectedData);
$("#selectedDataDiv").html("<b>待排座次:</b>" + selectedData.join(","));
}
$('#content2').height($(window).height() - 53);
$('#content3').height($(window).height() - 53);
$('[data-toggle="tooltip"]').tooltip();
})
function makeSure() {
var rule = $("input[name='rule']:checked").val();
if (!rule) {
alert('请选择排座规则!');
return;
} else {
// alert(rule);
var selectedData = $.zui.store.get('selectedData');
var long = $("#long").prop('checked');
$("#meetingPlace").sortSeatByParam({rule: rule, long: long}, selectedData, true);
hasRuled = true;
}
}
var hasSeated = false;
function autoSeating(_thiz) {
if (!hasRuled) {
alert('请先定义好规则后再自动排座!');
return;
} else {
if (hasSeated) {
var rule = $("input[name='rule']:checked").val();
var long = $("#long").prop('checked');
var selectedData = $.zui.store.get('selectedData');
selectedData = $("#meetingPlace").sortSeatByParam({rule: rule, long: long}, selectedData, false);
var len = $(".list-group-item").length;
for (var i = 0; i < len; i++) {
var obj = $(".list-group-item[data-order='" + i + "']");
var time = 0;
var txt = $.trim(obj.html().split(">")[2]);
var targetLeft = $("[data-id='" + selectedData[i] + "']").offset().left;
var targetBottom = $("[data-id='" + selectedData[i] + "']").offset().top;
$("#move" + i).remove();
obj.toggle(500 + i * 100);
}
$(_thiz).html("<i class=\"icon icon-sort-by-order\"></i> 自动排座");
hasSeated = false;
} else {
var rule = $("input[name='rule']:checked").val();
var long = $("#long").prop('checked');
var selectedData = $.zui.store.get('selectedData');
selectedData = $("#meetingPlace").sortSeatByParam({rule: rule, long: long}, selectedData, false);
var len = $(".list-group-item").length;
for (var i = 0; i < len; i++) {
var obj = $(".list-group-item[data-order='" + i + "']");
var time = 0;
var txt = $.trim(obj.html().split(">")[2]);
var targetLeft = $("[data-id='" + selectedData[i] + "']").offset().left;
var targetBottom = $("[data-id='" + selectedData[i] + "']").offset().top;
$("#dotDIV").append($("#move").clone(true).addClass("added").attr("data", selectedData[i]).attr("id", "move" + i).attr("title", txt).show());
$("#move" + i).tooltip();
$("#move" + i).animate({
left: targetLeft + "px",
top: targetBottom + "px"
}, 500 + i * 100);
obj.toggle(500 + i * 100);
}
$('[data-toggle="tooltip"]').tooltip();
$(_thiz).html("<i class='icon icon-undo'></i> 取消重排");
hasSeated = true;
}
}
}
function exportData() {
var result = "";
$(".added").each(function (i) {
var data = $(this).attr("data");
var top = data.split("-")[0];
var left = data.split("-")[1];
var lie = $.zui.store.get('lie');
var hang = $.zui.store.get('hang');
var realPai = top - hang;
var realLie = left - lie;
result += realPai + "" + realLie + "" + $(this).attr("title") + "<br/>";
});
bootbox.alert({
title: "排座结果",
message: result
});
}
function makeRowsAndCols(rows, cols){
$("#topTR").html('');
for(var i=0;i<rows;i++){
var val = ' value = "'+i+'" ';
var lie = $.zui.store.get('lie');
if(i==lie){
val += ' checked';
}
var td = '<td class="topTD"><input type="radio" name="lie" '+val+' class="topRow" data-toggle="tooltip" data-placement="top" title="设为起始列"></td>';
$("#topTR").append(td);
}
$("#colTable").html('<tr><td class="leftCol" ><input type="radio" disabled></td></tr>');
for(var i=0;i<cols;i++){
var val = ' value = "'+i+'" ';
var hang = $.zui.store.get('hang');
if(i==hang){
val += ' checked';
}
var tr = '<tr><td class="leftCol" data-toggle="tooltip" data-placement="right" title="设为起始排"><input class="left" name="hang" '+val+' type="radio" ></td></tr>';
$("#colTable").append(tr);
}
$(".topRow").change(function() {
$.zui.store.set('lie',$(this).val());
});
$(".left").change(function() {
$.zui.store.set('hang',$(this).val());
});
}
</script>
</head>
<body>
<nav class="navbar navbar-inverse header" role="navigation">
<a class="navbar-brand" href="">会议排座DEMO</a>
<ul class="nav navbar-nav ">
<li><a href="./index.html">会场定义</a></li>
<li><a href="./meetingPersons.html">会议座次安排</a></li>
</ul>
</nav>
<div id="dotDIV">
</div>
<div data-toggle="tooltip" data-placement="right" title="" id="move"
style="position:absolute;z-index:100;left:145px;top:58px;height:20px;width: 20px;text-align:center;display: none;"
class="bg-success dot">
<i class="icon icon-user"></i>
</div>
<div class="container-fluid with-padding" style="">
<div class="row">
<div id="content" style="height:300px;overflow-y: auto;overflow-x: hidden;width:200px;" class="col-md-2">
<div class="list-group" id="sortableList" style="">
<div class="list-group-item"><i class="icon-move"></i> 办公厅(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 发改委(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 教育局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 住建局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 人社局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 民政局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 环保局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 安监局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 公安局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 科技局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 交通局(某某)</div>
<div class="list-group-item"><i class="icon-move"></i> 统计局(某某)</div>
</div>
</div>
<div class="col-md-8" id="content2" style="overflow: auto">
<div class="alert alert-danger" style="padding:5px;margin-bottom: 5px;display: none;">
参会人员比会场座位要多,无法排开...
</div>
<div class="panel" style="margin-bottom:5px;">
<div class="panel-body" style="padding:5px;word-break:break-all">
<div id="selectedDataDiv" style="word-break:break-all">
</div>
</div>
</div>
<div class="g-bd1 f-cb">
<div class="g-sd1">
<table id="colTable">
<tr>
<td class="leftCol" ><input type="radio" disabled></td>
</tr>
<tr>
<td class="leftCol"><input type="radio"></td>
</tr>
</table>
</div>
<div class="g-mn1">
<div class="g-mn1c">
<div>
<table>
<tr id="topTR">
<td class="topTD"><input type="radio" name="row" class="topRow"></td>
</tr>
</table>
</div>
<div id="meetingPlace" class="meetingPlace" style="">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel" id="content3" style="margin-bottom:0px;">
<div class="panel-heading">
排座方式
</div>
<div class="panel-body" style="padding:5px;">
<h5>一、定义排座规则</h5>
<div class="radio">
<label>
<input type="radio" value="L2R" name="rule"> 从左至右
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="R2L" name="rule"> 从右至左
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="T2B" name="rule"> 从上而下
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="B2T" name="rule"> 从下而上
</label>
</div>
<hr style="margin:5px;"/>
<div class="checkbox">
<label>
<input type="checkbox" id="long" value="long"> 一条龙(神龙甩尾)
</label>
</div>
<button onclick="makeSure();" class="btn btn-block btn-success" type="button"><i
class="icon icon-cogs"></i> 确认规则
</button>
<h5>二、自动排座</h5>
<button onclick="autoSeating(this);" class="btn btn-block btn-primary" type="button"><i
class="icon icon-sort-by-order"></i> 自动排座
</button>
<button onclick="alert('紧张开发中');" class="btn btn-block" type="button"><i
class="icon icon-hand-up"></i> 手动调整
</button>
<br/>
<br/>
<button onclick="exportData();" class="btn btn-block btn-info" type="button"><i
class="icon icon-print"></i> 导出结果
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

评论 ( 0 )

你可以在登录后,发表评论

JavaScript
1
https://gitee.com/elmo87/seating-in-china.git
git@gitee.com:elmo87/seating-in-china.git
elmo87
seating-in-china
seating-in-china
master

搜索帮助

105716 1d94204e 1850385 105716 2d26be5c 1850385