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>

    <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>