ushio
/
video_system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="author" content="yinqi">
</head>

<body>
    <form class="layui-form" id="form-unify" method="post" action="/admin/camera/list/playback" style="padding:20px;">
        @csrf
        <h2 class="uk-modal-title">摄像头回放({{ $camera_name }})</h2>
        @if(isset($item[$primaryKey]))
            <input type="hidden" name="{{ $primaryKey }}" value="{{ $item[$primaryKey] }}">
        @endif
        <br>

        <div class="layui-form-item" id="playback">
            <div class="layui-form-label" style="width:auto;">是否可回放</div>
            <div class="layui-input-block">
                @foreach($columns['playback']['options'] as $k => $col)
                    <label><input type="radio" name="playback" lay-filter="radio" value="{{ $k }}"
                                  @if((isset($item['playback']) && $item['playback'] == $k) ||
                                  old('playback') === $k ||
                                  (isset($columns['playback']['default']) && $columns['playback']['default'] === $k)) checked
                                  @endif title="{{ $col }}"/>
                    </label>
                @endforeach
            </div>
        </div>

        <div class="layui-form-label" id="add_btn">
            <div class="layui-row" style="padding-bottom:20px;">
                <a class="layui-btn" href="#" id="addFlowItem" onclick="addFlowItem()" style="text-decoration: none;color:white;">添加时间段</a>
            </div>
        </div>

        <div class="lyear-layout-sidebar-scroll" id="time_list" style="margin-top:100px;">
            <?php
                if(count($playback) > 0){
                    for($i=0;$i<count($playback);$i++){
                        echo '<li id="layui-form-item">';
                        echo '<div class="col-lg-1" style="height:34px;line-height: 34px;width:auto;">';
                        echo '<label class="lab">时间段'.($i+1).':</label>';
                        echo '</div>';
                        echo '<div class="col-lg-2">';
                        echo '<input class="form-control" type="text" name="title[]" placeholder="请填写时间段名称" value="'.$playback[$i]->title.'">';
                        echo '</div>';
                        echo '<div class="col-lg-2">';
                        echo '<input class="form-control js-datetimepicker" type="text" id="start_id'.$i.'" name="start_time[]" placeholder="开始时间" value="'.$playback[$i]->start_time.'" data-side-by-side="true" data-locale="zh-cn" data-format="HH:mm:ss" />';
                        echo '</div>';
                        echo '<div class="col-lg-2">';
                        echo '<input class="form-control js-datetimepicker" type="text" id="end_id'.$i.'" name="end_time[]" placeholder="结束时间" value="'.$playback[$i]->end_time.'" data-side-by-side="true" data-locale="zh-cn" data-format="HH:mm:ss" />';
                        echo '</div>';
                        echo '<div class="col-lg-2" style="height:34px;line-height: 34px;">';
                        echo '<a href="javascript:void(0);" class="layui-btn layui-btn-xs layui-btn-danger delFlowBtn">';
                        echo '<i class="layui-icon">&#xe640;</i>';
                        echo '</a>';
                        echo '</div>';
                        echo '<br><br><br>';
                        echo '</li>';
                    }
                }
            ?>
        </div>

        <hr>
        <div style="text-align: right">
            @if(in_array('goback',$footBtns))
                <button class="layui-btn layui-btn-primary layui-layer-close" style="position:relative;"
                        type="button"
                        onclick="javascript:history.go(-1);">返回
                </button>
            @endif
            @if(in_array('save',$footBtns))
                <button class="layui-btn" type="submit" lay-submit lay-filter="formBox">保存</button>
            @endif
        </div>

    </form>

    <script type="text/javascript" src="/datetimepicker/js/jquery.min.js"></script>
    <script type="text/javascript" src="/datetimepicker/js/perfect-scrollbar.min.js"></script>
    <script src="/datetimepicker/js/bootstrap-datetimepicker/moment.min.js"></script>
    <script src="/datetimepicker/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="/datetimepicker/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
    <script type="text/javascript" src="/datetimepicker/js/main.min.js"></script>
    <script>
        layui.use(['form', 'laydate', 'table'], function () {

            var form = layui.form, table = layui.table;
            form.render();

            form.on('radio(radio)', function(data){
                var val=data.value;
                if(val == 1){
                    $('#add_btn').css('display','block');
                }else{
                    $('#add_btn').css('display','none');
                    $('#time_list').empty();
                }
            });

            @if($isAjax)
            form.on('submit(formBox)', function (data) {
                var urlPost = $('#form-unify').attr('action');
                var submitBtn = $(data.elem);
                submitBtn.addClass('layui-btn-disabled').prop('disabled', true).text('提交中……');
                $.ajax({
                    url: urlPost,
                    type: 'POST',
                    dataType: 'json',
                    data: data.field
                })
                    .done(function (res) {
                        if (res.code === 0) {
                            submitBtn.text('完成');
                            layer.msg('完成！', {anim: 0}, function () {
                                if (res.data.table === '') {
                                    layer.closeAll();
                                } else {
                                    layer.closeAll();
                                    if (res.data.table !== undefined) {
                                        // table.reload(res.data.table);
                                    }
                                    if (res.url !== undefined) {
                                        location.href = res.url;
                                    }
                                }
                            });
                        } else {
                            layer.msg(res.message, {anim: 0}, function () {
                                submitBtn.removeClass('layui-btn-disabled').prop('disabled', false).text('重新保存');
                            });
                        }
                    })
                    .fail(function (res) {
                        layer.msg(res.message, {anim: 0}, function () {
                            submitBtn.removeClass('layui-btn-disabled').prop('disabled', false).text('重新保存');
                        });
                    });
                return false;
            });
            @endif

        });

        var playback = $('input[name=playback]:checked').val();
        if(playback == 1){
            $('#add_btn').css('display','block');
        }else{
            $('#add_btn').css('display','none');
            $('#time_list').empty();
        }

        function addFlowItem(){
            var length = $('#time_list li').length+1;
            var start_id = 'start_time'+Math.ceil(Math.random()*100000);
            var end_id = 'end_time'+Math.ceil(Math.random()*100000);;
            $('#time_list').append('<li id="layui-form-item"><div class="col-lg-1" style="height:34px;line-height: 34px;width:auto;"><label class="lab">时间段'+length+':</label></div><div class="col-lg-2"><input class="form-control" type="text" name="title[]" placeholder="请填写时间段名称"></div><div class="col-lg-2"><input class="form-control js-datetimepicker" type="text" id="'+start_id+'" name="start_time[]" placeholder="开始时间" value="" data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm" /></div><div class="col-lg-2"><input class="form-control js-datetimepicker" type="text" id="'+end_id+'" name="end_time[]" placeholder="结束时间" value="" data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm" /></div><div class="col-lg-2" style="height:34px;line-height: 34px;"><a href="javascript:void(0);" class="layui-btn layui-btn-xs layui-btn-danger delFlowBtn"><i class="layui-icon">&#xe640;</i></a></div><br><br><br></li>');
            $('#'+start_id).datetimepicker({
                format:'HH:mm:ss',
                locale: moment.locale('zh-cn'),
                showClose:true
            });
            $('#'+end_id).datetimepicker({
                format:'HH:mm:ss',
                locale: moment.locale('zh-cn'),
                showClose:true
            });
        }

        $('body').on('click', '.delFlowBtn', function () {
            var self = $(this);
            layer.confirm('确定要删除此流程?', {icon: 3, title: '提示'}, function (index) {
                self.closest('#layui-form-item').remove();
                layer.close(index);

                var length = $('#time_list li').length;
                for(var i=0;i<length;i++){
                    $('.lab').eq(i).text('时间段'+(i+1));
                }
            });

        });
    </script>
</body>
</html>