bootstrap复杂页面设计

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="js/bootstrap-table/bootstrap-table.min.css" />
    <link rel="stylesheet" href="js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="js/bootstrap-select/css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="js/zselect/zselect.css" />
    <link rel="stylesheet" href="js/scroller/css/nicescroll.css" />
    <link rel="stylesheet" href="js/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" href="js/puck-1.0.0/css/puck.css" />
    <style type="text/css">

        /*背景色*/
        body{
            background:#fafafa;
        }

        /*固定头部*/
        #fixedTop{
            position:fixed;
            top:0px;
            background:#6085FF;
            width:100%;
            height: 60px;
            line-height: 65px;
            padding:0 20px;
            /*z-index: 1030;*/
        }

        /*logo样式*/
        .logo{
            background-image: url('image/logo.png');
            width:40px;
            height: 40px;
            position:relative;
            top:50%;
            transform: translateY(-50%);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            float:left;
        }

        /*标题样式*/
        .systemName{
            float:left;
            font-size: 18px !important;
            color:#ffffff;
            margin-left:10px;
        }

        /*content左右边距*/
        @media(min-width: 768px) {
            .content{
                left:0px;
                right: 0px;
            }
        }

        @media(min-width: 992px) {
            .content{
                left:50px;
                right: 50px;
            }
        }

        @media(min-width: 1200px) {
            .content{
                left:200px;
                right: 200px;
            }
        }

        /*content样式*/
        .content{
            top: 60px;
            position:absolute;
            background:#ffffff;
            bottom:0px;
            padding:20px;
        }

        /*table头部样式*/
        #table0 thead {
            background:#fafafa;
        }

        /*操作按钮样式(查看,修改,删除)*/
        .operator-button {
            display: inline-block;
            width: 30px;
        }

        /*按钮样式*/
        .btn-hik-primary{
            color: #fff;
            background-color: #2080f7;
            border-color: #2080f7;
            width:96px;
            height: 32px;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid #ccc;
            border-color: #e5e5e5;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            font-weight: 700;
            margin: 0;
            transition: all .2s;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            text-align: center;
            font-size: 12px;
            border-radius: 2px;
        }

        /*label文字不加粗*/
        label{
            font-weight: normal;
        }

        /*th文字不加粗*/
        th{
            font-weight: normal;
        }

        /*立刻执行按钮样式*/
        .execute-icons{
            color: green;
            margin-top: 5px;
            margin-left:20px;
        }

        /*立刻删除按钮样式*/
        .stop-icons{
            color: red;
            margin-top: 5px;
            margin-left:20px;
        }

        /*左对齐*/
        .align-left{
            text-align: left !important;
            font-weight: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /*正常图标样式*/
        .icon-normal{
            transform: rotate(0);
            -webkit-transform: rotate(0);
            transition: transform .3s;
        }

        /*翻转图标样式*/
        .icon-inverse{
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transition: transform .3s;
        }

        /*     */
        .form-horizontal .form-group{
            margin-right: 0;
            margin-left: 0;
        }


        /*弹出层居中*/
        .modal {
            text-align: center;
        }

        @media screen and (min-width: 768px) {
            .modal:before {
                display: inline-block;
                vertical-align: middle;
                content: " ";
                height: 100%;
            }
        }

        .modal-dialog {
            display: inline-block;
            text-align: left;
            vertical-align: middle;
        }

        /*修改默认panel-heading 样式*/
        .panel-heading{
            background:#DDDDDD !important;
        }

        /* 修改默认panel-body 样式 */
        .panel-body{
            background: #F2F2F2;
            padding: 10px 0;
        }

        .form-horizontal .control-label{
            padding-right: 0px;
        }




    </style>

</head>

<body style="background:#fbfbfb">

<div id="fixedTop">
    <div class="logo"></div>
    <div class="systemName" >测试使用</div>
</div>

<div class="content">
    <div id="toolbar">
        <div class="btn-group">
            <button class="btn-hik-primary" id="toolbar_add">
                <span>新增</span>
            </button>
        </div>
    </div>
    <table id="table0"></table>
</div>

<div class="modal fade" id="row-view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel-view">
                    计划查看
                    <a href="#" style="float:right;" data-dismiss="modal"><img src="image/close.png" style="height: 20px;width:20px;" aria-hidden="true"></a>
                </h4>
            </div>
            <div class="modal-body" style="overflow-y: auto;height: 700px;">
                <form class="form-horizontal" role="form" >
                    <div class="form-group">
                        <label class="col-md-2 control-label">计划名称:</label>
                        <label class="col-md-2 control-label align-left" name="name"></label>
                        <label class="col-md-1 control-label">开始日期:</label>
                        <label class="col-md-2 control-label align-left" name="begindate"></label>
                        <label class="col-md-1 control-label">结束日期:</label>
                        <label class="col-md-3 control-label align-left" name="enddate"></label>
                    </div>
                    <div id="timeZone-view"></div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="row-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel-edit">
                    计划新增/修改
                    <a href="#" style="float:right;" data-dismiss="modal"><img src="image/close.png" style="height: 20px;width:20px;" aria-hidden="true"></a>
                </h4>
            </div>
            <div class="modal-body" style="overflow-y: auto;height: 700px;">
                <form class="form-horizontal" role="form">

                    <div class="form-group plan">

                        <input class="form-control" id="planID" type="text" style="display: none" >

                        <label class="col-md-2 control-label">计划名称:</label>
                        <div class="col-md-2">
                            <input class="form-control" id="name" type="text" required="required">
                        </div>
                        <label class="col-md-1 control-label">开始日期:</label>
                        <div class="col-md-2">
                            <input class="form-control datePicker" id="begindate" type="text" required="required">
                        </div>
                        <label class="col-md-1 control-label">结束日期:</label>
                        <div class="col-md-2">
                            <input class="form-control datePicker" id="enddate" type="text" required="required">
                        </div>
                        <div class="col-md-2">
                            <button id="timeAdd" type="button" class="btn-hik-primary time-add">新增时间段</button>
                        </div>
                    </div>

                    <div id="timeZone-edit"></div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn_submit" class="btn-hik-primary" style="margin-right: 100px;" data-dismiss="modal">保存</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.rotate.js"></script>
<script type="text/javascript" src="js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker/js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker/js/zh-cn.js"></script>
<script type="text/javascript" src="js/bootstrap-select/js/bootstrap-select.js"></script>
<script type="text/javascript" src="js/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
<script type="text/javascript" src="js/zselect/zselect.js" ></script>
<script type="text/javascript" src="js/scroller/jquery.nicescroll.js" ></script>
<script type="text/javascript" src="js/zTree_v3/js/jquery.ztree.all-3.5.js" ></script>
<script type="text/javascript">

    var sfs = [];
    var kkTree = {};


    $(function(){

        $(".datePicker").datetimepicker({
            locale: moment.locale('zh-cn'),
            format: 'YYYY-MM-DD'
        });

        $.ajax({
            url: "szAlg",
            method:'get',
            success: function(data) {
                sfs = JSON.parse(data);
            }
        });

        $('#table0').bootstrapTable({
            columns: [{
                field: "name",
                title: '计划名称',
                valign: "middle",
                align: "center"
            },
                {
                    field: "begindate",
                    title: '开始日期',
                    valign: "middle",
                    align: "center",
                },
                {
                    field: "enddate",
                    title: '结束日期',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: "operate",
                    title: "操作",
                    align: "center",
                    valign: "middle",
                    formatter: operateFormatter,
                    edit: false
                },
            ],
            classes:"table table-no-bordered",
            url: 'szAlgSched',
            rowStyle: function (row, index) {
                if(index % 2 == 0){
                    return {css:{'background':'#ffffff'}}
                }else{
                    return {css:{'background':'#fafafa'}}
                }
            },
            method:'get',
            idField: "id",
            pagination: true,
            sidePagination: 'client',
            //             searchOnEnterKey: true,
            pageList: [5,10,50],
            toolbar: "#toolbar",
        });


    })

    function operateFormatter(value, row, index) {
        return [
            "<a class=\"operator-button\" href='javascript:viewRow(" + index + ")' title=\"查看\">",
            "<img src='image/search.png'>",
            "</a>     ",
            "<a class=\"operator-button\" href='javascript:editRow(" + index + ")' title=\"修改\">",
            "<img src='image/edit.png'>",
            "</a>     ",
            "<a class=\"operator-button\" href='javascript:removeRow(" + index + ")' title=\"删除\">",
            "<img src='image/trashcan.png'>",
            "</a>     ",
        ].join('');
    };

    function viewRow(index) {

        $("#timeZone-view").html('');
        $("#row-view label[name='name']").text('');
        $("#row-view label[name='begindate']").text('');
        $("#row-view label[name='enddate']").text('');

        var planid = $("#table0").bootstrapTable('getData')[index].id;

        $.ajax({
            url: "szAlgSched/"+planid,
            success: function(data) {

                data = JSON.parse(data);



                $("#row-view label[name='name']").text(data.name);
                $("#row-view label[name='begindate']").text(data.begindate);
                $("#row-view label[name='enddate']").text(data.enddate);
                var html = [];

                $.each(data.timeZone, function(index,item) {

                    html.push('<div class="panel panel-default"> ');
                    html.push('    <div class="panel-heading">');
                    html.push('        <h3 class="panel-title">时间段('+item.begintime+"-"+item.endtime+")");
                    html.push('            <a href="javascript:void(0)"  title="立刻执行"><span class="glyphicon glyphicon-play execute-icons" name="executeImmediate" ><input name="timeZoneID" value="'+item.id+'" style="display:none" /></span></a>');
                    html.push('            <a href="javascript:void(0)"  title="立刻停止"><span class="glyphicon glyphicon-stop stop-icons" name="stopImmediate" ></span></a>');
                    html.push('            <a href="#" style="float:right;text-decoration:none;" name="toggleBody"><span class="glyphicon glyphicon-chevron-down icon-normal" style="display: inline-block"></span></a>');
                    html.push('        </h3>');
                    html.push('    </div>');
                    html.push('    <div class="panel-body timeZoneDiv" >');
                    html.push('        <div class="form-group">');
                    html.push('             <label class="col-md-2 control-label">开始时间:</label>');
                    html.push('             <label class="col-md-2 control-label align-left" >' + item.begintime + '</label>');
                    html.push('             <label class="col-md-1 control-label">结束时间:</label>');
                    html.push('             <label class="col-md-2   control-label align-left" >' + item.endtime + '</label>');
                    html.push('             <label class="col-md-1 control-label">卡口:</label>');
                    html.push('             <label title="'+item.crossingname+'" class="col-md-3 control-label align-left" >' + item.crossingname + '</label>');
                    html.push('             <h5 class="page-header"></h5>');

                    $.each(item.sf, function(index, item) {
                        html.push('         <div class="form-group sf">');
                        html.push('             <label class="col-md-2 control-label">厂商:</label>');
                        html.push('             <label class="col-md-2 control-label align-left" >' + item.vendorname + '</label>');
                        html.push('             <label class="col-md-1 control-label">算法:</label>');
                        html.push('             <label class="col-md-2 control-label align-left" >' + item.name + '</label>');
                        html.push('             <label class="col-md-1 control-label">违法业务:</label>');

                        var alarmName = "";
                        var alarms = "";
                        if(item.alarm != null){
                            alarms = item.alarm.split(",");
                            $.each(alarms, function(index, item) {
                                temp = (item == 1) ? "大货车闯禁行" : "危险品车闯禁行";
                                alarmName = alarmName + "," + temp;
                            });
                            alarmName = alarmName.substring(1);
                        }

                        html.push('             <label class="col-md-3 control-label align-left" >' + alarmName + '</label>');
                        html.push('         </div>');
                    });
                    html.push('     </div>');
                    html.push('  </div>');
                    html.push('</div>');
                });
                $("#timeZone-view").append(html.join(''));

                toggleBodyListener();
                executeImmediateListener();
            }
        });

        $("#row-view").modal({backdrop: 'static', keyboard: false}).on("shown.bs.modal",function () {
        });
    };

    function executeImmediateListener(){

        $("[name='executeImmediate']").click(function(){

            var id = $(this).children("[name='timeZoneID']").val();
            $.ajax({
                url:"executeTimeTasks/"+id,
                success:function(data){
                    data =  JSON.parse(data);

                    if(data.ecode == 0){
                        alert("任务已启动");
                    }else{
                        alert("任务启动错误,错误原因:"+data.msg);
                    }
                },
                err:function(){
                    alert("任务启动错误,错误原因:未知");
                }
            });

        });


        $("[name='stopImmediate']").click(function(){

            $.ajax({
                url:"stopTimeTasks/",
                success:function(data){
                    data =  JSON.parse(data);
                    if(data.ecode == 0){
                        alert("任务已停止");
                    }else{
                        alert("任务启动错误,错误原因:"+data.msg);
                    }
                },
                err:function(){
                    alert("任务停止错误,错误原因:未知");
                }
            });

        });
    }

    function toggleBodyListener(){
        $("[name = 'toggleBody']").unbind('click').click(function(){

            if($(this).children(".glyphicon-chevron-down").hasClass("icon-inverse")){
                $(this).children(".glyphicon-chevron-down").removeClass("icon-inverse")
            }else{
                $(this).children(".glyphicon-chevron-down").addClass("icon-inverse")
            }
            $(this).parents(".panel-default").find(".panel-body").slideToggle();
        });
    };


    $("#toolbar_add").click(function() {
        $("#planID").val(-1);
        $("#name").val("");
        $("#begindate").val("");
        $("#enddate").val("");
        $("#timeZone-edit").html('');
        $("#row-edit").modal().on("shown.bs.modal");
        timeAddListener();
        $("#table0").bootstrapTable('refresh');
    });


    function editRow(index) {

        $("#planID").val(-1);
        $("#name").val("");
        $("#begindate").val("");
        $("#enddate").val("");
        $("#timeZone-edit").html('');

        var planid = $("#table0").bootstrapTable('getData')[index].id;

        $.ajax({
            url: "szAlgSched/"+planid,
            success: function(data) {
                data = JSON.parse(data);
                $("#planID").val(planid);
                $("#name").val(data.name);
                $("#begindate").val(data.begindate);
                $("#enddate").val(data.enddate);
                var html = [];

                $.each(data.timeZone, function(index, item) {

                    html.push('<div class="panel panel-default"> ');
                    html.push('    <div class="panel-heading">');
                    html.push('        <h3 class="panel-title">时间段');
//                    html.push('            <a href="javascript:void(0)"  title="删除时间段"><span class="glyphicon glyphicon-remove-circle delete-icons delete-timezone" name="executeImmediate" ></span></a>');
                    html.push('            <a href="javascript:void(0)" title="删除时间段" style="margin-left:934px;"><img src="image/trashcan.png" class="delete-timezone"></img> </a>');
//                    html.push('            <a href="#" style="float:right;text-decoration:none" name="toggleBody">>></a>');
                    html.push('            <a href="#" style="float:right;text-decoration:none" name="toggleBody"><span class="glyphicon glyphicon-chevron-down icon-normal"></span></a>');
                    html.push('        </h3>');
                    html.push('    </div>');
                    html.push('    <div class="panel-body timeZoneDiv" >');
                    html.push('         <div class="form-group timeZone">');
                    html.push('             <label class="col-md-2 control-label">开始时间:</label>');
                    html.push('             <div class="col-md-2">');
                    html.push('                 <input class="form-control datetimePicker"  name="begintime" type="text" value=' + item.begintime + '>');
                    html.push('             </div>');
                    html.push('             <label class="col-md-1 control-label">结束时间:</label>');
                    html.push('             <div class="col-md-2">');
                    html.push('                 <input class="form-control datetimePicker" name="endtime" type="text" value=' + item.endtime + '>');
                    html.push('             </div>');
                    html.push('             <label class="col-md-1 control-label">卡口:</label>');
                    html.push('             <div class="col-md-2">');
                    html.push('                 <input class="form-control" id="crossing'+index+'" name="crossingid" type="text" >');
                    html.push('             </div>');
                    html.push('             <div class="col-md-2">');
                    html.push('                 <button type="button" class="btn-hik-primary  sf-add level-3">新增算法</button>');
                    html.push('             </div>');

                    html.push('             <h5 class="page-header level-2"></h5>');

                    $.each(item.sf, function(value, item, index) {
                        html.push('         <div class="form-group sf">');
                        html.push('             <label class="col-md-2 control-label">厂商:</label>');
                        html.push('             <div class="col-md-2">');
                        html.push('                 <select class="form-control vendorSelect" name="vendorid">');
                        html.push('<option value="">请选择</option>');

                        $.each(sfs, function(value1, item1, index1) {
                            if(item.vendorid == item1.vendorid){
                                html.push("<option  value=" + item1.vendorid + " selected >" + item1.vendorname + "</option>");
                            }else{
                                html.push("<option  value=" + item1.vendorid + ">" + item1.vendorname + "</option>");
                            }

                        });
                        html.push('             </select>');
                        html.push('         </div>');
                        html.push('         <label class="col-md-1 control-label">算法:</label>');
                        html.push('         <div class="col-md-2">');

                        html.push('             <select class="form-control algidSelect" name="algid">');

                        $.each(sfs, function(value1, item1, index1) {
                            if(item.vendorid == item1.vendorid){

                                $.each(item1.sf, function(value2, item2, index2) {

                                    if(item.algid == item2.algorithmID){
                                        html.push("<option  value=" + item2.algorithmID + " selected >" + item2.name + "</option>");
                                    }else{
                                        html.push("<option  value=" + item2.algorithmID + " >" + item2.name + "</option>");
                                    }
                                });
                            }
                        });
                        html.push('</select>');

                        html.push('</div>');
                        html.push('<label class="col-md-1 control-label">违法业务:</label>');
                        html.push('<div class="col-md-2">');


                        html.push('<select  class="selectpicker show-tick form-control" multiple data-live-search="false" name="alarm">');

                        if(item.alarm != null){
                            if(item.alarm.indexOf("1") > -1){
                                html.push('<option value="1" selected>大货车闯禁行</option>');
                            }else{
                                html.push('<option value="1">大货车闯禁行</option>');
                            }
                            if(item.alarm.indexOf("2") > -1){
                                html.push('<option value="2" selected>危险品车闯禁行</option>');
                            }else{
                                html.push('<option value="2">危险品车闯禁行</option>');
                            }
                        }else{
                            html.push('<option value="1">大货车闯禁行</option>');
                            html.push('<option value="2">危险品车闯禁行</option>');
                        }

                        html.push('</select>');
                        html.push('</div>');
                        html.push('<div class="col-md-1">');
                        html.push('            <a href="javascript:void(0)" title="删除算法"><img src="image/trashcan.png" class="delete-icons delete-sf"></img> </a>');
                        html.push('</div>');
                        html.push('</div>');

                    });

                    html.push('</div>');
                    html.push("</div>");
                    html.push("</div>");

                });

                $("#timeZone-edit").append(html.join(''));
                csChangeListener();
                $(".selectpicker").selectpicker();
                $(".datetimePicker").datetimepicker({
                    locale: moment.locale('zh-cn'),
                    format: "HH:mm"
                });

                toggleBodyListener();
                kkTreeListenerAll(data.timeZone);
                delIconListener();
                sfAddListener();


                $.each(data.timeZone, function(index, item){

                    $("#crossing"+index).val(item.crossingid);

                    $("#crossing"+index+"_").val(item.crossingname);

                    var first = true;

                    $("#crossing"+index+"_").click(function () {

                        if(first){
                            var treeObj =  $.fn.zTree.getZTreeObj("crossing"+index+"_ul");

                            var crossingids = item.crossingid.split(",");

                            $.each(crossingids,function(index, item){
                                var node = treeObj.getNodeByParam("id", item, null);
                                treeObj.checkNode(node, true, true);
                            });
                            first = false;
                        }


                    });
                });
            }
        });

        timeAddListener();

        $("#row-edit").modal({backdrop: 'static', keyboard: false}).on("shown.bs.modal").on("hide.bs.modal", function() {
            $("#timeZone").html('');
        });
    }


    function removeRow(index) {

        if(confirm("确认删除吗")){

            var planid = $("#table0").bootstrapTable('getData')[index].id;

            $.ajax({
                url: "szAlgSched/"+planid,
                type: "post",
                data : {_method:"DELETE"},
                success: function(data) {
                    alert("删除成功");
                    $("#table0").bootstrapTable('refresh');
                },
                err: function(){
                    alert("删除失败");
                }
            });
        }
        else{
            return;
        }
    }




    function timeAddListener() {
        $(".time-add").off().click(function() {
            var html = [];
            html.push('<div class="panel panel-default" > ');
            html.push('    <div class="panel-heading">');
            html.push('        <h3 class="panel-title">时间段');
            html.push('            <a href="javascript:void(0)" title="删除时间段" style="margin-left:918px;"><img src="image/trashcan.png" class="delete-timezone"></img> </a>');
            html.push('            <a href="#" style="float:right;text-decoration:none;" name="toggleBody"><span class="glyphicon glyphicon-chevron-down icon-normal" style="display: inline-block"></span></a>');
            html.push('        </h3>');
            html.push('    </div>');
            html.push('    <div class="panel-body timeZoneDiv" >');
            html.push('<div class="form-group timeZone">');
            html.push('<label class="col-md-2 control-label">开始时间:</label>');
            html.push('<div class="col-md-2">');
            html.push('<input class="form-control datetimePicker" name="begintime" type="text" >');
            html.push('</div>');
            html.push('<label class="col-md-1 control-label">结束时间:</label>');
            html.push('<div class="col-md-2">');
            html.push('<input class="form-control datetimePicker" name="endtime" type="text" >');
            html.push('</div>');
            html.push('<label class="col-md-1 control-label">卡口:</label>');
            html.push('<div class="col-md-2">');
            html.push('<input class="form-control" name="crossingid" type="text">' );
            html.push('</div>');
            html.push('<div class="col-md-2">');
            html.push('<button type="button" class="btn-hik-primary  sf-add">新增算法</button>');
            html.push('</div>');
            html.push('<h5 class="page-header"></h5>');
            html.push('</div>');
            html.push('</div>')
            html.push('</div>')

            $("#timeZone-edit").append(html.join(''));
            delIconListener();
            sfAddListener();
            kkTreeListener();
            toggleBodyListener();

            $(".datetimePicker").datetimepicker({
                locale: moment.locale('zh-cn'),
                format: "HH:mm"
            });


        });
    }

    function sfAddListener() {

        $(".sf-add").off().click(function() {

            var html = [];
            html.push('<div class="form-group sf">');
            html.push('<label class="col-md-2 control-label">厂商:</label>');
            html.push('<div class="col-md-2">');
            html.push('<select class="form-control vendorSelect" name="vendorid">');
            html.push('<option value="">请选择</option>');
            $.each(sfs, function(value, item, index) {
                html.push("<option value=" + item.vendorid + ">" + item.vendorname + "</option>");
            });
            html.push('</select>');
            html.push('</div>');
            html.push('<label class="col-md-1 control-label">算法:</label>');
            html.push('<div class="col-md-2">');
            html.push('<select class="form-control algidSelect" name="algid">');
            html.push('<option value="">请选择</option>');
            html.push('</select>');
            html.push('</div>');
            html.push('<label class="col-md-1 control-label">违法业务:</label>');
            html.push('<div class="col-md-2">');
            html.push('<select  class="selectpicker show-tick form-control" multiple data-live-search="false" name="alarm">');
            html.push('<option value="1">大货车闯禁行</option>');
            html.push('<option value="2">危险品车闯禁行</option>');
            html.push('</select>');
            html.push('</div>');
            html.push('<div class="col-md-1">');
            html.push('            <a href="javascript:void(0)" title="删除算法"><img src="image/trashcan.png" class="delete-icons delete-sf"></img> </a>');
            html.push('</div>');
            html.push('</div>');
            $(this).parent().parent().append(html.join(''))
            csChangeListener();
            delIconListener();
            $(".selectpicker").selectpicker();
            $(this).parent().parent().find(".sf").find("[name='vendorid']").eq(-1).prop('selectedIndex', 1).trigger('change');

        });
    }

    function csChangeListener(){
        $(".vendorSelect").change(function() {

            var algidSelect = $(this).parent().siblings().find(".algidSelect");
            var vendorid = $(this).val();
            algidSelect.html('');

            if(vendorid != "") {
                var algidList = [];
                $.each(sfs, function(value, item, index) {
                    if(item.vendorid == vendorid) {
                        algidList = item.sf;
                    }
                });

                var html1 = [];

                $.each(algidList, function(value, item, index) {
                    html1.push("<option value=" + item.algorithmID + ">" + item.name + "</option>");
                });
                algidSelect.append(html1.join(''));
            } else {
                algidSelect.append('<option value="">请选择</option>');
            }
        });
    }

    function delIconListener(){

        $(".delete-timezone").click(function(){
            var obj = $(this).parent().parent().parent().parent();
            obj.slideToggle(1000);
            setInterval(function(){
                obj.remove();
            },1100);

        });

        $(".delete-sf").click(function(){
            var obj = $(this).parent().parent().parent();
            obj.slideToggle(500);
            setInterval(function(){
                obj.remove();
            },600);
        });

    }

    function kkTreeListener(){
        $('[name="crossingid"]').eq(-1).zselect({
            type:"tree",
            hasQuery: true,
            treeSetting:{
                hasCache: true,
                url: "trafficCrossingInfo",
                setting:{
                    view: {
                        showLine: false
                    },
                    check: {
                        chkboxType: {
                            "Y": "ps",
                            "N": "ps"
                        },
                        chkStyle: "checkbox",
                        enable: true
                    }
                },
                buttons : {
                    submit: {
                        filter: "CrossInfo"
                    }
                }
            }

        });
    }

    function kkTreeListenerAll(timeZone){

        $('[name="crossingid"]').zselect({
            type:"tree",
            hasQuery: true,
            treeSetting:{
                hasCache: true,
                url: "trafficCrossingInfo",
                setting:{
                    view: {
                        showLine: false
                    },
                    check: {
                        chkboxType: {
                            "Y": "ps",
                            "N": "ps"
                        },
                        chkStyle: "checkbox",
                        enable: true
                    }
                },
                buttons : {
                    submit: {
                        filter: "CrossInfo"
                    }
                }
            }

        });
    }

    function checkForm(){

        if($("#name").val() == "") {
            alert("计划名称不能为空");
            $("#name").focus();
            return false;
        }else if($("#begindate").val() == ""){
            alert("开始日期不能为空");
            $("#begindate").trigger("click");
            return false;
        }else if($("#enddate").val() == ""){
            alert("结束日期不能为空");
            $("#enddate").focus();
            return false;
        }else if($("#begindate").val() > $("#enddate").val()){
            alert("结束日期必须大于开始日期");
            $("#enddate").focus();
            return false;
        }

        var check = true;

        var timeZoneEdits = $("#timeZone-edit").find(".timeZone");

        if(timeZoneEdits.length != 0 ){

            var timeList = [];

            for(var i = 0; i< timeZoneEdits.length ; i++){

                var begintime = timeZoneEdits.eq(i).find('[name="begintime"]').val();
                var endtime = timeZoneEdits.eq(i).find('[name="endtime"]').val()


                if(begintime == ""){
                    alert("开始时间不能为空");
                    timeZoneEdits.eq(i).find('[name="begintime"]').focus();
                    check = false;
                    return false;
                }else if(endtime == ""){
                    alert("结束时间不能为空");
                    timeZoneEdits.eq(i).find('[name="endtime"]').focus();
                    check = false;
                    return false;
                }else if(timeZoneEdits.eq(i).find('[name="crossingid"]').val() == ""){
                    //            }else if(timeZoneEdits.eq(i).find('[name="crossingid"]').val() == ""){
                    alert("卡口不能为空");
                    timeZoneEdits.eq(i).find('[name="crossingid"]').focus();
                    check = false;
                    return false;
                }else if(begintime > endtime){
                    alert("开始时间不能大于结束时间");
                    timeZoneEdits.find('[name="endtime"]').focus();
                    check = false;
                    return false;
                }
                timeList.push({"begintime":begintime, "endtime":endtime});
            }


            var sfEdits = $("#timeZone-edit").find(".sf");

            if(sfEdits.length == 0){
                alert("请至少选择一个算法");
                check = false;
                return false;
            }

        }else{
            alert("请至少选择一个时间段");
            check = false;
            return false;
        }


        check = checkTimeIsOverlay(timeList);

        return check;

    }


    function checkTimeIsOverlay(timelist){

        var result = true;

        timelist.sort(function(a,b){
            if(a.begintime > b.begintime){
                return 1
            }else if(a.begintime = b.begintime){
                return 0
            }else{
                return -1;
            }
        });

        var tmpstime = "00:00";
        var tmpetime = "00:00";

        $.each(timelist, function(index,item){
            if(item.begintime <= tmpetime){
                result = false;
                alert("时间段("+tmpstime+"-"+tmpetime+")与时间段("+item.begintime+"-"+item.endtime+")存在交叉");
                result = false;
                return false;
            }
            tmpstime = item.begintime;
            tmpetime = item.endtime;
        });

        return result;

    }




    $("#btn_submit").click(function(){


        if(checkForm()){
            var data = {};

            data["id"] = $("#planID").val();
            data["name"] = $("#name").val();
            data["begindate"] = $("#begindate").val();
            data["enddate"] = $("#enddate").val();

            var timeZone = [];
            var timeZoneTmp = {};
            var sfs = [];

            $.each($("#timeZone-edit").find(".timeZone"), function(value,item,index) {

                $.each($(item).children("div").children("input"), function(value1,item1,index1) {
                    timeZoneTmp[$(item1).attr("name")] = $(item1).val();
                });

                $.each($(item).find(".sf"), function(value1,item1,index1) {

                    var sf = {}
                    sf["vendorid"] = $(item1).find("[name='vendorid']").val();
                    sf["algid"] = $(item1).find("[name='algid']").val();
                    var alarms = $(item1).find("[name='alarm']").val();
                    if(alarms != null){
                        alarms = alarms.join(',')
                    }else{
                        alarms == "";
                    }
                    sf["alarm"] = alarms

                    sfs.push(sf);
                });
                timeZoneTmp["sf"] = sfs;
                timeZone.push(timeZoneTmp);
                sfs = [];
                timeZoneTmp = {};
            });

            data["timeZone"] = timeZone;

            $.ajax({
                url:"szAlgSched",
                data: JSON.stringify(data),
                type : 'post',
                contentType: 'application/json',
                success:function(){
                    alert("保存成功");
                    $("#table0").bootstrapTable('refresh');
                },
                err:function(){
                    alert("保存失败");
                }
            });
        }else{
            return false;
        }

    });



</script>


</body>

</html>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值