videoDetail.html 26.3 KB
<!DOCTYPE html>
<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-header">
            <h1>
                点播详情
            </h1>
            <ol class="breadcrumb">
                <li>首页</li>
                <li class="active">点播审核</li>
            </ol>
        </section>
        <section class="content">
            <div class="row">
                <!-- right column -->
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-body form-horizontal">
                            <div class="col-sm-12">
                                <div class="form-group" style="margin-bottom: 6px;">
                                    <div style=" margin-left: -5%;">
                                        <label for="activity_id" class="control-label col-sm-2">点播活动id:</label>
                                        <div class="col-sm-2">
                                            <h5 id="activity_id" th:text="${video.video_id}">
                                                82_7d92ef8192364d4891820426329801bd</h5>
                                        </div>
                                    </div>
                                    <div style="margin-left: -14%;">
                                        <label for="spid" class="control-label col-sm-2">spId:</label>
                                        <div class="col-sm-2">
                                            <h5 th:text="${video.spid}">视讯中国</h5>
                                        </div>
                                    </div>
                                    <div>
                                        <label for="upload_time" class="control-label col-sm-2"
                                               style="margin-left: -5%">视频上传时间:</label>
                                        <div class="col-sm-2">
                                            <h5 th:text="${#dates.format(video.video_upload_time, 'yyyy-MM-dd HH:mm:ss')}">
                                                2017-07-12 10:16:50</h5>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div id="tabContents" class="tab-content">
                                <div id="tabHome" class="tab-pane fade in active padding-t-15">
                                    <div class="col-sm-5">
                                        <div class="form-group">
                                            <div>
                                                <label for="video_cover_img" class="control-label col-sm-4"
                                                       style="margin-left: -3%">封面图:</label>
                                            </div>
                                            <div style="height:110px; margin-left: 17%;">
                                                <div class="col-sm-4 popover-options " th:style="${imgsStat.index==0}? 'float:left;margin-right: 43px;margin-left: -18px;':''" th:if="${imgsStat.index<2}"
                                                     th:each="imgs :${images}">
                                                    <a href="#">
                                                        <img th:src="@{${imgs.value}}" height="100px" alt="封面图">
                                                    </a>
                                                    <b th:text="${imgs.key}"></b>
                                                </div>
                                            </div>
                                            <div style="height: 110px;margin-top: 15px;">
                                                <label for="" class="control-label col-sm-4"
                                                       style="width: 26.3%;"></label>
                                                <div class="col-sm-4 popover-options " th:style="${imgsStat.index==2}?'float:left;margin-right: 15px;':'float:left;'"
                                                     th:if="${imgsStat.index>=2&&imgsStat.index<4}"
                                                     th:each="imgs :${images}">
                                                    <a href="#">
                                                        <img th:src="@{${imgs.value}}" height="100px" alt="封面图">
                                                    </a>
                                                    <b th:text="${imgs.key}"></b>
                                                </div>
                                            </div>
                                            <div style="height: 110px;margin-top: 15px;">
                                                <label for="" class="control-label col-sm-4"
                                                       style="width: 26.3%;"></label>
                                                <div class="col-sm-4 popover-options" th:style="${imgsStat.index==4}?'float:left;margin-right: 15px;':'float:left;'"
                                                     th:if="${imgsStat.index>=4}"
                                                     th:each="imgs :${images}">
                                                    <a href="#">
                                                        <img th:src="@{${imgs.value}}" height="100px" alt="封面图">
                                                    </a>
                                                    <b th:text="${imgs.key}"></b>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group" style="margin-bottom: 6px;">
                                            <label for="video_title" class="control-label col-sm-4">点播标题:</label>
                                            <div class="col-sm-8">
                                                <h5 style="font-size:1.5em; font-weight: bold;"
                                                    th:text="${video.video_title}">标题</h5>
                                            </div>
                                        </div>
                                        <div class="form-group intro" style="margin-bottom: 6px;">
                                            <label for="video_intro" class="control-label col-sm-4">点播简介:</label>
                                            <div class="col-sm-8">
                                                <h5 style="font-size:1.5em; font-weight: bold; width:100%"
                                                    th:text="${video.video_desc}">简介</h5>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="video_tag" class="control-label col-sm-4">点播标签:</label>
                                            <div class="col-sm-8">
                                                <h5 style="font-size:1.5em; font-weight: bold;" id="video_tag"
                                                    th:text="${video.video_tags}">点播标签</h5>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="video_keyword" class="control-label col-sm-4">点播关键字:</label>
                                            <div class="col-sm-8">
                                                <h5 style="font-size:1.5em; font-weight: bold;"
                                                    th:text="${video.video_keyword}">关键字</h5>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <div class="modal-body" id="videoBox" style="height:450px">
                                                    <script type="text/javascript"
                                                            src="//resweb.cnliveimg.com/sites/common/cnlive_video.min.js"></script>
                                                    <script th:inline="javascript">
                                                        var videoUrl = [[${video.video_url}]];
                                                        var cover = [[${video.video_poster}]];
                                                        cnliveVideo.init({
                                                            "eleId": "videoBox",
                                                            "width": 800,//指定放入指定ID元素内
                                                            "height": 450,
                                                            "model": 3,
                                                            "autoplay": 1,
                                                            "currRate": 3,
                                                            "cover": cover,
                                                            "videoUrl_3": videoUrl
                                                        });
                                                    </script>

                                                </div>
                                            </div>
                                        </div>
                                        <br>
                                        <hr>

                                        <div class="form-group">
                                            <label for="state" class="control-label col-sm-3">审核状态:</label>
                                            <div class="col-sm-9">
                                                <h5 th:if="${video.state==0}">未审核</h5>
                                                <h5 th:if="${video.state==1}">已审 通过</h5>
                                                <h5 th:if="${video.state==2}">拒绝</h5>
                                                <h5 th:if="${video.state==3}">自动审核失败</h5>
                                            </div>
                                        </div>

                                        <!--<div class="form-group ">-->
                                        <!--<label for="state" class="control-label col-sm-3">审核日志:</label>-->
                                        <!--<div class="col-sm-9 ">-->
                                        <!--<h5 id="state">1:系统审核;2017-07-12 11:54:01;点播审核可信,系统自动审核-->
                                        <!--<br></h5>-->
                                        <!--</div>-->
                                        <!--</div>-->


                                        <div class="form-group ">
                                            <label for="auditor_id" class="control-label col-sm-3">审核员:</label>
                                            <div class="col-sm-9 ">
                                                <h5 id="auditor_id" th:text="${video.auditor}">系统审核 </h5>
                                            </div>
                                        </div>


                                        <div class="form-group file">
                                            <label class="control-label col-sm-3" for="attr_tags">常用审核意见:</label>

                                            <div class="col-sm-9">
                                                <select class="form-control   select2 select2-hidden-accessible"
                                                        onchange="change()" multiple="" data-placeholder="选择常用审核意见,可多选"
                                                        name="attr_tags[]" id="attr_tags" style="width: 100%;"
                                                        tabindex="-1" aria-hidden="true">
                                                    <option value="其他">其他</option>
                                                    <option value="不符">不符</option>
                                                    <option value="规范">规范</option>
                                                    <option value="建议">建议</option>
                                                    <option value="错字">错字</option>
                                                    <option value="要求">要求</option>
                                                    <option value="图片">图片</option>
                                                    <option value="敏感">敏感</option>
                                                    <option value="视频">视频</option>
                                                    <option value="提交">提交</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="msg" class="control-label col-sm-3">审核备注</label>
                                            <div class="col-sm-9">
                                                <textarea name="msg" id="msg" cols="5" rows="5" class="form-control"
                                                          th:text="${video.msg}"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--抽真图-->
                                <div class="form-group col-sm-7">&nbsp;&nbsp;&nbsp;&nbsp;
                                    <label class="control-label col-sm-3">抽帧截图 :&nbsp;</label>
                                </div>

                                <div class="form-group col-sm-7"
                                     style="overflow:scroll;  height:400px; width: 44%;position: relative;right: -14%;margin-top: -4%;">
                                    <div class="col-sm-12" th:each="avImage,avImageStat : ${avsampleImgs}">
                                        <div style="padding:5px;width: 108%;" class="col-sm-8 popover-options"
                                             th:if="${avImageStat.index%2==0}">
                                            <a href="javascript:void (0);"
                                               style="float: left; width: 48%; margin-right: 1%"><img
                                                    th:src="${yuming}+ @{${avImage}}"
                                                    style="width: 100%; " alt="抽帧图"></a>
                                            <a href="javascript:void (0);" style="float: left; width: 48%;"
                                               th:if="${!avImageStat.last}"><img
                                                    th:src="${yuming}+ @{${avsampleImgs[avImageStat.index+1]}}"
                                                    style="width: 100%;" alt="抽帧图"></a>
                                        </div>
                                    </div>
                                </div>
                                <!--不能删,此处已隐藏,起一个格式作用,使通过,拒绝,返回列表能顶到底部-->
                                <div class="form-group">
                                    <input type="text" hidden="hidden" id="video_id" value="">
                                </div>

                                <div class="box-footer">
                                    <div class="col-sm-5">
                                        <button type="button" class="btn btn-danger pull-right" id="reject">拒 绝</button>
                                    </div>

                                    <div class="col-sm-1" style="margin-right:26px;">
                                        <button type="button" class="btn btn-primary pull-right" id="pass">通 过</button>
                                    </div>

                                    <div class="col-sm-1">
                                        <button type="submit" class="btn btn-info pull-right" id="back">返回列表</button>
                                    </div>
                                </div>

                                <!-- 拒绝确认弹出框 -->
                                <div class="modal" id="action_note" role="dialog" aria-labelledby="myModalLabel">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"> ×</button>
                                                <h4 class="modal-title">温馨提示</h4>
                                            </div>
                                            <div class="modal-body" id="msg2"></div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default " data-dismiss="modal"
                                                        id="action_note_no">取消
                                                </button>
                                                <button type="button" class="btn btn-primary" id="action_note_yes">确认
                                                </button>
                                                <input type="hidden" name="action_note_type" id="action_note_type"
                                                       value="">
                                                <input type="hidden" name="action_note_id" id="action_note_id" value="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <script th:inline="javascript">
                                    //使常用审核意见回显到下方的备注中
                                    function change() {
                                        $("#msg").val($("#attr_tags").val());
                                    }

                                    /*拒绝*/
                                    $("#reject").click(function () {
                                        var attr_tags = $('#attr_tags').val();//获取标签属性信息
                                        var msg = $('#msg').val(); //获取审核msg
                                        if (attr_tags == null && msg == '') { //两个都为空 不行
                                            alert('请输入审核备注或者常用审核意见!');
                                            return false;
                                        }
                                        //拒绝弹出框
                                        $('#msg2').html('您确认拒绝此条点播吗?');
                                        $('#action_note').show();
                                        $("#action_note_type").val('reject');
                                        $("#action_note_id").val();
                                    });

                                    //弹出框取消
                                    $("#action_note_no, .close").click(function () {
                                        $("#action_note").hide();
                                    });
                                    //弹出框确认
                                    $("#action_note_yes").click(function () {
                                        var id = [[${video.id}]];
                                        var activity_id = [[${video.video_id}]];
                                        var state = 4;
                                        var row_id = $("#video_id").val();
                                        var attr_tags = $('#attr_tags').val();//获取标签属性信息
                                        var msg = $('#msg').val(); //获取审核msg
                                        var callback = [[${video.callback}]];
                                        if (attr_tags == null && msg == '') { //两个都为空 不行
                                            alert('请输入审核备注或者常用审核意见!');
                                            return false;
                                        }
                                        if (typeof(row_id) == "undefined") {
                                            return false;
                                        }
                                        //拒绝
                                        $("#action_note").hide();//隐藏弹出框
                                        var action_note_type = $("#action_note_type").val();
                                        if (action_note_type == 'reject') {
                                            $.post("/videos/shenheVideo", {
                                                    id: id,
                                                    activity_id: activity_id,
                                                    state: state,
                                                    attr_tags: msg,
                                                    msg: msg,
                                                    callback: callback
                                                },
                                                function (data) {
                                                    if (data.errorCode == 0) {
                                                        alert(data.errorMessage);
                                                        self.location = document.referrer;
                                                    } else {
                                                        alert(data.errorMessage);
                                                    }
                                                })
                                        }
                                    });

                                    /*通过*/
                                    $("#pass").click(function () {
                                        var id = [[${video.id}]];
                                        var state = 3;
                                        var activity_id = [[${video.video_id}]];
                                        var attr_tags = $('#attr_tags').val();//获取标签属性信息
                                        var msg = $('#msg').val(); //获取审核msg
                                        var callback = [[${video.callback}]];
                                        if (typeof(activity_id) == "undefined") {
                                            return false;
                                        }
                                        if (confirm("您确认通过此条点播吗?")) {
                                            $.post("/videos/shenheVideo", {
                                                    id: id,
                                                    activity_id: activity_id,
                                                    state: state,
                                                    attr_tags: msg,
                                                    msg: msg,
                                                    callback: callback
                                                },
                                                function (data) {
                                                    if (data.errorCode == 0) {
                                                        alert(data.errorMessage);
                                                        self.location = document.referrer;
                                                    } else {
                                                        alert(data.errorMessage);
                                                    }
                                                });
                                        }
                                    });

                                    /*返回列表  */

                                    $("#back").click(function () {
                                        // window.location.href = '/videos/page';
                                        self.location = document.referrer;
                                    });

                                </script>
                                <!-- Select2 todo xiaohu  -->
                                <script src="../../static/js/select2.full.min.js"></script>
                                <!-- Select2 todo xiaohu  -->
                                <link rel="stylesheet" href="../../static/css/select2.min.css">
                                <link rel="stylesheet" href="../../static/css/AdminLTE.min.css">
                                <script>
                                    $(function () {
                                        $(".select2").select2();
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <footer th:replace="../templates/common/foot::foot"></footer>
    <div class="control-sidebar-bg" style="position: fixed; height: auto;"></div>
</div>
<!-- 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>