video.html 16.6 KB
<!DOCTYPE html>
<!-- saved from url=(0031)http://shenhe.cnlive.com/videos -->
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="../templates/common/head::head" >
</head>

<body class="skin-blue sidebar-mini">

<div class="wrapper">
    <div th:replace="../templates/common/frame::frame" ></div>
    <div class="content-wrapper" style="min-height: 788px;">
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-info">
                        <div class="box-body">
                            <div class="btn-group margin-bottom pull-right">
                                <button type="button" class="btn  btn-sm margin-r-5 filter " th:onclick="'javascript:quanbu()'" value="">
                                    全部
                                </button>
                                </button>
                                <button type="button" class="btn btn-sm margin-r-5 filter " id="daishen" onclick="javascript:daishen()" value="0">待审
                                </button>
                                <button type="button" class="btn  btn-sm margin-r-5 filter " id="yishen" th:onclick="'javascript:yishen()'" value="1">已审
                                </button>
                                <button type="button" class="btn btn-primary btn-sm margin-r-5" id="query" onclick="openOrClose(&#39;forms&#39;)">查询
                                    <span id="a_up"></span><span id="a_down" style="display: none;"></span>
                                </button>
                            </div>
                            <div class="form-horizontal form-group-sm" id="forms" style="display: none;">
                                <div class="btn-group margin-bottom col-md-6" style="padding: 0;">
                                    <div class="col-md-5" style="padding: 0">
                                        <label for="video_title" class="control-label cb-toolbar">标题:</label>
                                        <div class="col-sm-9" style="padding: 0;">
                                            <input class="form-control"  type="text" value="" id="video_titleID">
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-group margin-bottom col-md-6" style="padding: 0;">
                                    <div class="col-md-5" style="padding: 0">
                                        <label for="video_title" class="control-label cb-toolbar">热点:</label>
                                        <div class="col-sm-9" style="padding: 0;">
                                            <select class="form-control" id="video_priority" name="video_priority" >
                                                <option value ="1"></option>
                                                <option value ="0"></option>
                                            </select>
                                            <!--<input class="form-control" name="video_priority" type="text" id="video_priority">-->
                                        </div>
                                    </div>
                                </div>

                                <div class="btn-group margin-bottom col-md-6 pull-right" style="position: relative;left: -27%;">
                                    <div class="col-md-11" style="width: 88%;padding: 0;">
                                        <div class="col-md-6" style="padding: 0">
                                            <label for="start_date" class="control-label cb-toolbar">时间:</label>
                                            <div class="input-group col-md-9 date">
                                                <input class="form-control date" name="start_date" type="text" id="start_date">
                                                <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-6" style="padding: 0">
                                            <label for="start_date" class="control-label cb-toolbar"></label>
                                            <div class="input-group col-md-9 date">
                                                <input class="form-control date" name="end_date" type="text" id="end_date">
                                                <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-group margin-bottom col-md-6" style="padding: 0;">
                                    <div class="col-md-1 text-center" style="width: 12%;padding: 0">
                                        <button type="button" class="btn btn-primary btn-sm" id="videos_query">查 询</button>
                                    </div>
                                </div>
                            </div>

                    <div class="fixed-table-container" style="padding-bottom: 0px;">
                        <div class="fixed-table-body">
                            <table id="table" data-toggle="table" class="table table-hover table-striped">
                            <thead>
                                <tr>
                                        <!--<th class="bs-checkbox " style="text-align: center; width: 5%; " data-field="state" tabindex="0">-->
                                            <!--<div class="th-inner "><input name="btSelectAll" type="checkbox"></div>-->
                                            <!--<div class="fht-cell"></div>-->
                                        <!--</th>-->
                                        <th style="text-align: center; width: 6%; " data-field="sp_id_brief" tabindex="0"><div class="th-inner ">spid</div><div class="fht-cell"></div></th>
                                        <th style="text-align: center; width: 20%; " data-field="video_title" tabindex="0"><div class="th-inner ">标题</div><div class="fht-cell"></div></th>
                                        <th style="text-align: center; width: 10%; " data-field="video_cover_img" tabindex="0"><div class="th-inner ">点播封面图</div><div class="fht-cell"></div></th>
                                        <th style="text-align: center; width: 6%; " data-field="auditor" tabindex="0"><div class="th-inner ">审核员</div><div class="fht-cell"></div></th>
                                        <th style="text-align: center; width: 3%; " data-field="is_hot_name" tabindex="0"><div class="th-inner ">热点</div><div class="fht-cell"></div></th>
                                        <th style="text-align: center; width: 3%; " data-field="state_name" tabindex="0"><div class="th-inner ">审核状态</div><div class="fht-cell"></div></th>
                                        <th style="text-align: center; width: 10%; " data-field="upload_time" tabindex="0"><div class="th-inner ">视频上传时间</div><div class="fht-cell"></div></th>
                                        <th style="text-align: center; width: 17%; " data-field="action" tabindex="0"><div class="th-inner ">操作</div><div class="fht-cell"></div></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-index="0" th:each="video : ${videoPage.list}">
                                    <!--<td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>-->
                                    <td style="text-align: center; width: 6%;" th:text="${video.spid}"></td>
                                    <td style="text-align: center; width: 20%;" th:text="${video.video_title}">邓建国正面PK冯小刚 </td>
                                    <td style="text-align: center; width: 10%;">
                                        <div width="160px" height="90px"><img th:src="@{${video.video_poster}}" width="160px" alt="封面图"></div>
                                    </td>
                                    <td style="text-align: center; width: 6%;" th:text="${video.auditor}">审核员</td>
                                    <td style="text-align: center; width: 3%;" th:text="${video.video_priority=='1'?'是':'否'}"></td>
                                    <td style="text-align: center; width: 3%;">
                                        <span class="btn btn-sm btn-warning" th:if="${video.state==0}">待审核</span>
                                        <span class="btn btn-sm btn-warning" th:if="${video.state==1}">审核通过</span>
                                        <span class="btn btn-sm btn-warning" th:if="${video.state==2}">审核拒绝</span>
                                    </td>
                                    <td style="text-align: center; width: 10%;" th:text="${#dates.format(video.video_upload_time, 'yyyy-MM-dd HH:mm:ss')}">2018-03-07 16:56:20</td>
                                    <td style="text-align: center; width: 17%;">
                                        <a class="detail" th:href="@{'/videos/details/?id='+${video.id}}">
                                            <button class="btn btn-default btn-sm" >查看</button>
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                            </table>
                        </div>


                        <!--分页处理-->
                        <div class="fixed-table-pagination" style="display: block;">
                            <div class="pull-left pagination-detail"><span class="pagination-info" th:text="'共 '+${videoPage.total}+' 条记录'">共 0 条记录</span></div>
                            <div class="pull-right pagination">
                                <ul class="pagination" th:if="${videoPage.pages>1}">
                                    <li class="page-pre"><a th:href="@{'/videos/page'}">‹‹</a></li>
                                    <li class="page-pre" th:if="${!videoPage.isFirstPage}"><a th:href="@{'/videos/page?page='+${videoPage.pageNum-1}}"></a></li>

                                    <li class="page-number" th:if="${videoPage.pageNum-3>1}"><a th:href="@{'/videos/page?page='+${videoPage.pageNum-3}}" th:text="${videoPage.pageNum-3}">2</a></li>
                                    <li class="page-number" th:if="${videoPage.pageNum-2>1}"><a th:href="@{'/videos/page?page='+${videoPage.pageNum-2}}" th:text="${videoPage.pageNum-2}">2</a></li>
                                    <li class="page-number" th:if="${videoPage.pageNum-1>1}"><a th:href="@{'/videos/page?page='+${videoPage.pageNum-1}}" th:text="${videoPage.pageNum-1}">2</a></li>
                                    <li class="page-number active"><a href="javaScript:void(0);" th:text="${videoPage.pageNum}">2</a></li>
                                    <li class="page-number" th:if="${videoPage.pageNum+1<videoPage.pages}"><a th:href="@{'/videos/page?page='+${videoPage.pageNum+1}}" th:text="${videoPage.pageNum+1}">2</a></li>
                                    <li class="page-number" th:if="${videoPage.pageNum+2<videoPage.pages}"><a th:href="@{'/videos/page?page='+${videoPage.pageNum+2}}" th:text="${videoPage.pageNum+2}">2</a></li>
                                    <li class="page-number" th:if="${videoPage.pageNum+3<videoPage.pages}"><a th:href="@{'/videos/page?page='+${videoPage.pageNum+3}}" th:text="${videoPage.pageNum+3}">2</a></li>

                                    <li class="page-next" th:if="${!videoPage.isLastPage}"><a th:href="@{'/videos/page?page='+${videoPage.pageNum+1}}"></a></li>
                                    <li class="page-next"><a th:href="@{'/videos/page?page='+${videoPage.pages}}">››</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script th:inline="javascript">
        //待审核
        $('#daishen').click(function () {
            var state = 0;
            var video_priority = $("#video_priority").val();
            var video_title = $("#video_titleID").val();
            var start_date = $("#start_date").val();
            var end_date = $("#end_date").val();
            window.location.href = "page?video_title="+video_title+"&start_date="+start_date+"&end_date="+end_date+"&state="+state+"&video_priority="+video_priority;
        });
        //已审核
        $('#yishen').click(function () {
            var state = 1;
            var video_priority = $("#video_priority").val();
            var video_title = $("#video_titleID").val();
            var start_date = $("#start_date").val();
            var end_date = $("#end_date").val();
            window.location.href = "page?video_title="+video_title+"&start_date="+start_date+"&end_date="+end_date+"&state="+state+"&video_priority="+video_priority;
        });
        function quanbu() {
            window.location.href = "page";
        }
        //查询
        $('#videos_query').click(function () {
            var video_priority = $("#video_priority").val();
            var video_title = $("#video_titleID").val();
            var start_date = $("#start_date").val();
            var end_date = $("#end_date").val();
            window.location.href = "/videos/page?video_title="+video_title+"&start_date="+start_date+"&end_date="+end_date+"&state=&video_priority="+video_priority;
        });
    </script>
    <!--保留之前的样式代码-->
    <script>
        /* 筛选 状态  按钮之间的切换 todo */
        $('.filter').click(function () {
            var object = $('#forms input').serializeObject();
            object['state'] = $(this).val();
            switch ($(this).val()) {
                case "0":
                    $(this).addClass('btn-info');
                    $(this).siblings().removeClass('btn-info');
                    $('#hide_select_area_2').hide();
                    form_state = 0; //待审
                    break;
                case "1":
                    $(this).addClass('btn-info');
                    $(this).siblings().removeClass('btn-info');
                    $('#hide_select_area_2').hide();
                    form_state = 1; //我的已审
                    break;
                default:
                    $(this).addClass('btn-info');
                    $(this).siblings().removeClass('btn-info');
                    $('#hide_select_area_2').hide();
                    form_state = 0; //全部
                    break;
            }
            object['_token'] = 'MCgqTuvq2fL01T4VhkXj0shCeGYJU4l0X3loXu40';
            $('#state').val(object['state']);
        });
        $('#a_down').hide();
        /*查询样式*/
        function openOrClose(id_name_str) {
            var id_name = '#' + id_name_str;
            if ($(id_name).css('display') == 'block') {
                $(id_name).slideUp(350);
                $('#a_up').show();
                $('#a_down').hide();
            } else {
                $(id_name).slideDown(350);
                $('#a_up').hide();
                $('#a_down').show();
            }
        }

        /*时间插件*/
        $('.date').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: "zh-CN",
            toolbarPlacement: 'bottom',
            showClear: true,
        });
    </script>
    <footer th:replace="../templates/common/foot::foot"></footer>
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg" style="position: fixed; height: auto;"></div>
</div><!-- ./wrapper -->

<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script type="text/javascript">
    $('div.alert').not('.alert-danger').delay(3000).slideUp(300);
</script>

<!-- AdminLTE App -->
<script src="./../../static/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="./../../static/js/sidebar.js"></script>
</body>
</html>