seating-in-china
/
meetingPersons.html

<!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>
    <style>
        .header{
            margin-bottom: 0px;
        }
        /* 为可拖动的条目应用可移动光标类型 */
        #sortableList > .list-group-item {cursor: move}

        /* 为正在被拖动的条目应用半透明外观 */
        #sortableList > .list-group-item.dragging {
            visibility: visible;
            opacity: .3;
        }
    </style>
    <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});

                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);
        })
        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){
                result += $(this).attr("data").replace("-","排") + "座 " + $(this).attr("title") + "<br/>";
            });
            bootbox.alert({
                title: "排座结果",
                message: result
            });
        }
    </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 id="meetingPlace" class="meetingPlace">
            </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>