video_system/Modules/Camera/Resources/views/camera_list.blade.php

<link rel="stylesheet" href="/static/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/css.css">
<link rel="stylesheet" href="/static/css/ace.min.css">

<link href="/datetimepicker/css/bootstrap.min.css" rel="stylesheet">
<link href="/datetimepicker/css/materialdesignicons.min.css" rel="stylesheet">
<!--时间选择插件-->
<link rel="stylesheet" href="/datetimepicker/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<!--日期选择插件-->
<link rel="stylesheet" href="/datetimepicker/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
<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>
<style>
    body,html{
        background:white;
        overflow-y:hidden;
    }
    .pagination{
        margin-left:190px;
        padding-top:10px;
    }
    #mine_list{
        overflow: auto;
        overflow-y:scroll;
        overflow-x:scroll;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow-x: auto;
        display: -webkit-box;
        -webkit-overflow-scrolling: touch;
    }
    /*#mine_list::-webkit-scrollbar{*/
    /*    display:none;*/
    /*}*/
    #camera_table{
        /*overflow:hidden;*/
        /*overflow-y:scroll;*/
    }
    #camera_table::-webkit-scrollbar{
        display:none;
    }
    #page {
        margin: 20px auto;
        color: #666;
        display: block;
        margin-left:184px;
    }

    #page li {
        display: inline-block;
        min-width: 30px;
        height: 28px;
        cursor: pointer;
        color: #666;
        font-size: 13px;
        line-height: 28px;
        background-color: #f9f9f9;
        border: 1px solid #dce0e0;
        text-align: center;
        margin: 0 4px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .xl-nextPage,
    .xl-prevPage {
        width: 60px;
        color: #009688;
        height: 28px;
    }

    #page li.xl-disabled {
        opacity: .5;
        cursor: no-drop;
    }

    #page li.xl-active {
        background-color: #009688;
        border-color: #009688;
        color: #FFF
    }

    .layui-layer-page .layui-layer-content {
        overflow: auto !important;
    }

    .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
        border-top: 0;
        border-bottom: #DDDDDD solid 1px;
    }
    .ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
        overflow: hidden;
        white-space: pre;
        padding-right: 2px;
        height: 40px;
        line-height: 40px;
    }
    #camera_list td{
        max-width:70px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;
    }
    #camera_list td:nth-child(4){
        max-width:250px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;
    }
    #camera_list td:nth-child(7){
        max-width:250px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;
    }
    #camera_list input{
        border:none;
        color:#666666;
        background-color:transparent!important;
        width:100%;
        padding:0;
        overflow:hidden;text-overflow:ellipsis; white-space:nowrap;
    }
</style>

<div @if(request()->ajax()) style="max-height: 600px;overflow-y: auto;" @endif>
    @if(count($searchs) > 0)
        <div style="width:200px;height:615px;position:absolute;" id="mine_list">
            <div class="row">
                <div class="col-sm-12">
                    <div class="widget-box" style="margin-top:0;">
                        <div class="widget-header header-color-blue2" style="background:#009688;width:120%;cursor:pointer;" onclick="form_resert()">
                            <h4 class="lighter smaller">区域列表</h4>
                        </div>

                        <div class="widget-body" style="border:0px solid #009688;">
                            <div class="widget-main padding-8">
                                <div id="tree1" class="tree tree-selectable">
                                    <div class="tree-folder" style="display:none;">
                                        <div class="tree-folder-header">
                                            <i class="icon-plus"></i>
                                            <div class="tree-folder-name"></div>
                                        </div>
                                        <div class="tree-folder-content"></div>
                                        <div class="tree-loader" style="display: none;"></div>
                                    </div>
                                    <div class="tree-item" style="display:none;">
                                        <i class="icon-remove"></i>
                                        <div class="tree-item-name"></div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-left:210px;">
            <form class="layui-form" method="get" action="/admin/{{ $path }}" style="margin-bottom: 10px;" id="search_form">
                @csrf
                @if(request()->has('id'))
                    <input type="hidden" name="id" value="{{ request()->input('id') }}">
                @endif
                <input type="hidden" name="mine_id" id="mine_id" value="">
                <input type="hidden" name="pagesize" id="pagesize" value="{{$pagesize}}">
                @foreach($searchs as $var => $search)
                    @if($search['type'] == 'input')
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text"
                                   placeholder="{{ $search['label'] }}"
                                   name="{{ $var }}" id="{{ $var }}"
                                   value="{{ ${$var} ?? '' }}">
                        </div>
                    @endif
                    @if($search['type'] == 'select')
                        <div class="layui-input-inline">
                            <select name="{{ $var }}" id="{{ $var }}">
                                <option value="0"
                                        @if(!isset($search['assist'])) selected @endif>{{ $search['label'] }}
                                </option>
                                @if(count($search['assist']) > 0)
                                    @foreach($search['assist'] as $k => $col)
                                        <option value="{{ $k }}"
                                                @if(isset(${$var}) && ${$var} == $k) selected @endif>{{ $col }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    @endif
                    @if($search['type'] == 'tree_select')
                        <div class="layui-input-inline">
                            <select name="{{ $var }}">
                                <option value="0"
                                        @if(!isset($search['assist'])) selected @endif>{{ $search['label'] }}
                                </option>
                                @if(count($search['assist']) > 0)
                                    @include('admin::component.multi_select_option', ['selects' => $search['assist'], 'selectPid' => request($var) ?? ''])
                                @endif
                            </select>
                        </div>
                    @endif
                    @if($search['type'] == 'date')
                        <div class="layui-input-inline">
                            <input class="layui-input date-{{ $var }}" type="text"
                                   placeholder="{{ $search['label'] ?? '日期' }}"
                                   name="{{ $var }}" autocomplete="off" readonly
                                   disableautocomplete value="{{ $search['assist'][0] ?? '' }}"
                            >
                        </div>
                        <script>
                            $('.date-{{ $var }}').datepicker({
                                language: 'zh-CN',
                                format: 'yyyy-mm-dd',
                                date: '{{ $search['assist'][0] ?? null }}',
                            });
                        </script>
                    @endif
                    @if($search['type'] == 'date_time')
                        <div class="layui-input-inline">
                            <input class="layui-input star-{{ $var }}" type="text"
                                   placeholder="{{ $search['label'][0] ?? '起始日期' }}"
                                   name="star_{{ $var }}" autocomplete="off" readonly
                                   disableautocomplete value="{{ $search['assist'][0] ?? '' }}">
                        </div> -
                        <div class="layui-input-inline">
                            <input class="layui-input end-{{ $var }}" type="text"
                                   placeholder="{{ $search['label'][1] ?? '结束日期' }}"
                                   name="end_{{ $var }}" autocomplete="off" readonly
                                   disableautocomplete value="{{ $search['assist'][1] ?? '' }}">
                        </div>
                        <script>
                            $('.star-{{ $var }}').datepicker({
                                language: 'zh-CN',
                                format: 'yyyy-mm-dd',
                                date: '{{ $search['assist'][0] ?? null }}',
                                pick: function (rtime) {
                                    $('.end-{{ $var }}').datepicker('setStartDate', rtime.date);
                                }
                            });
                            $('.end-{{ $var }}').datepicker({
                                language: 'zh-CN',
                                format: 'yyyy-mm-dd',
                                date: '{{ $search['assist'][0] ?? null }}'
                            });
                        </script>
                    @endif
                @endforeach
                <button class="layui-btn" type="button" onclick="form_submit();"><i class="layui-icon">&#xe615;</i></button>
            </form>
        </div>
    @endif
    @if(count($topActions) > 0 || (isset($topActionOthers) && count($topActionOthers)) > 0)
        <div class="weadmin-block layui-clear" style="margin-left:210px;">
            @if(in_array('goback', $topActions))
                @if(isset($topActions['href']))
                    <a class="layui-btn layui-btn-primary layui-layer-close" style="position:relative;"
                       href="{{ $topActions['href'] }}">返回
                    </a>
                @else
                    <button class="layui-btn layui-btn-primary layui-layer-close" style="position:relative;" type="button"
                            onclick="javascript:history.go(-1);">返回
                    </button>
                @endif
            @endif
            @if(checkBtn('/admin/'.$path.'/add', $permissionsList))
                @if(in_array('add', $topActions))
                    <button class="layui-btn" onclick="addItem()"><i class="layui-icon"></i>添加</button>
                @endif
            @endif

            @if(checkBtn('/admin/'.$path.'/export', $permissionsList))
                @if(in_array('export', $topActions))
                    <a href="/admin/{{ $path }}/export?{{ http_build_query(request()->except('_token')) }}"
                       class="layui-btn">Excel导出当前页</a>
                    <a href="/admin/{{ $path }}/export?type=all&{{ http_build_query(request()->except('_token')) }}"
                       class="layui-btn">Excel导出全部</a>
                @endif
            @endif

            @if(checkBtn('/admin/'.$path.'/importTemplate', $permissionsList))
                @if(in_array('importTemplate', $topActions))
                    <a href="/admin/{{ $path }}/importTemplate" class="layui-btn">下载导入模板</a>
                @endif
            @endif

            @if(checkBtn('/admin/'.$path.'/import', $permissionsList))
                @if(in_array('import', $topActions))
                    <button type="button" class="layui-btn" id="import">
                        <i class="layui-icon">&#xe67c;</i>Excel导入
                    </button>
                @endif
            @endif
            <div class="lyear-layout-sidebar-scroll" style="display:none;"></div>
            <div style="float: right;">
                @if(isset($topActionOthers) && count($topActionOthers) > 0)
                    @foreach($topActionOthers as $topActionOther)
                        @if(checkBtn('/admin/'.$topActionOther['path'], $permissionsList))
                            @if(isset($topActionOther['isShow']))
                                @if(isset($topActionOther['isJump']))
                                    <button class="layui-btn {{ $topActionOther['class'] }}"
                                            onclick="jumpBtn(this)"
                                            data-jumptype="{{ $topActionOther['isJump'] }}"
                                            data-href="{{ $topActionOther['path'] }}">{{ $topActionOther['name'] }}
                                    </button>
                                @else
                                    <a href="/admin/{{ $topActionOther['path'] }}"
                                       class="layui-btn {{ $topActionOther['class'] }}">{{ $topActionOther['name'] }}</a>
                                @endif

                            @endif
                        @endif
                    @endforeach
                @endif
            </div>
        </div>
    @endif
        <div style="margin-left:210px;max-height:454px;" id="camera_table">
            <table class="layui-table" style="">
                <thead>
                <tr>
                    @foreach($columns as $column)
                        <th style="font-weight:bold;">{{ $column['name'] }}</th>
                    @endforeach
                    @if((isset($displayActionOthers) && count($displayActionOthers) > 0) || count($actionBtns) > 0)
                        <th style="width:15%;font-weight:bold;">操作</th>
                    @endif
                </tr>
                </thead>
                <tbody id="camera_list">
                @if(count($items) > 0)
                    @foreach($items as $item)
                        <tr>
                            @foreach($columns as $varName => $column)
                                @if($varName == 'parent_title' || $varName == 'title' || $varName == 'camera_name' || $varName == 'camera_url')
                                    <td><input type="text" readonly value="{!! isset($column['value']) ? $column['value']($item->$varName, $item) : $item->$varName !!}" title="{!! isset($column['value']) ? $column['value']($item->$varName, $item) : $item->$varName !!}"></td>
                                @else
                                    <td>{!! isset($column['value']) ? $column['value']($item->$varName, $item) : $item->$varName !!}</td>
                                @endif
                            @endforeach
                            @if((isset($displayActionOthers) && count($displayActionOthers) > 0) || count($actionBtns) > 0)
                                <td>
                                    @if(isset($displayActionOthers) && count($displayActionOthers) > 0)
                                        @foreach($displayActionOthers as $displayActionOther)
                                            @if(checkBtn('/admin/'.$displayActionOther['path'], $permissionsList))
                                                @if(isset($displayActionOther['isShow']) ? $displayActionOther['isShow']($item) : 1)
                                                    @if(isset($displayActionOther['isJump']))
                                                        <button
                                                                class="layui-btn layui-btn-xs {{ $displayActionOther['class'] }} @if($displayActionOther['isJump'] == 'uploadimg') uploadimg @endif"
                                                                onclick="jumpBtn(this)"
                                                                data-title="{{ $displayActionOther['title'] ?? '' }}"
                                                                data-jumptype="{{ $displayActionOther['isJump'] }}"
                                                                data-href="{{ substr($displayActionOther['path'],-1) == '&' ? $displayActionOther['path']:$displayActionOther['path'].'?' }}{{ $primaryKey }}={{ $item->$primaryKey }}">{{ $displayActionOther['name'] }}
                                                        </button>
                                                    @else
                                                        <a href="/admin/{{ substr($displayActionOther['path'],-1) == '&' ? $displayActionOther['path']:$displayActionOther['path'].'?' }}{{ $primaryKey }}={{ $item->$primaryKey }}"
                                                           class="layui-btn layui-btn-xs {{ $displayActionOther['class'] }}"
                                                           @if(isset($displayActionOther['fullWin'])) target="_blank" @endif>{{ $displayActionOther['name'] }}</a>
                                                    @endif
                                                @endif
                                            @endif
                                        @endforeach
                                    @endif
                                    @if(!is_array($item) || !in_array($item[$displayActions['name']], $displayActions['value']))
                                        @if(checkBtn('/admin/'.$path.'/view', $permissionsList))
                                            @if(in_array('view', $actionBtns))
{{--                                                <a href="/admin/{{ $path }}/view?{{ $primaryKey }}={{ $item->$primaryKey }}"--}}
{{--                                                   class="layui-btn layui-btn-normal layui-btn-xs" {{ $actionBtnsAttribute['view'] ?? '' }} >查看</a>--}}
                                                <button class="layui-btn layui-btn-xs layui-btn-normal viewItem"
                                                        data-itemid="{{ $item->$primaryKey }}" {{ $actionBtnsAttribute['view'] ?? '' }}>
                                                    查看
                                                </button>
                                            @endif
                                        @endif
                                        @if(checkBtn('/admin/'.$path.'/edit', $permissionsList))
                                            @if(in_array('edit', $actionBtns))
{{--                                                <a href="/admin/{{ $path }}/edit?{{ $primaryKey }}={{ $item->$primaryKey }}"--}}
{{--                                                   class="layui-btn layui-btn-xs" {{ $actionBtnsAttribute['edit'] ?? '' }}>编辑</a>--}}
                                                <button class="layui-btn layui-btn-xs editItem"
                                                        data-itemid="{{ $item->$primaryKey }}" {{ $actionBtnsAttribute['view'] ?? '' }}>
                                                    编辑
                                                </button>
                                            @endif
                                        @endif
                                        @if(checkBtn('/admin/'.$path.'/del', $permissionsList))
                                            @if(in_array('del', $actionBtns))
                                                <button class="layui-btn layui-btn-xs layui-btn-danger delItem"
                                                        data-itemid="{{ $item->$primaryKey }}" {{ $actionBtnsAttribute['del'] ?? '' }}>
                                                    删除
                                                </button>
                                            @endif
                                        @endif


                                        @if(checkBtn('/admin/'.$path.'/playback', $permissionsList))
                                            @if(in_array('playback', $actionBtns) && $item->playback == 0)
                                                <button class="layui-btn layui-btn-xs layui-btn-warm backItem"
                                                        data-itemid="{{ $item->$primaryKey }}" {{ $actionBtnsAttribute['playback'] ?? '' }}>
                                                    回放
                                                </button>
{{--                                                <a href="/admin/{{ $path }}/playback?{{ $primaryKey }}={{ $item->$primaryKey }}" class="layui-btn layui-btn-xs layui-btn-warm" {{ $actionBtnsAttribute['playback'] ?? '' }}>回放</a>--}}
                                            @endif
                                        @endif
                                    @endif
                                </td>
                            @endif
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="{{ count($columns) + 1 }}">暂无数据</td>
                    </tr>
                @endif
                </tbody>
            </table>
        </div>

</div>
{{--@if(method_exists($items, 'links'))--}}
{{--    {{ $items->appends(request()->except('_token'))->links() }}--}}
{{--@endif--}}

<div id="page"></div>

<script>
    $(function () {
        $('.delItem').on('click', function () {
            var self = $(this);
            layer.confirm('你确定删除？', function () {
                layer.closeAll();
                $.post('/admin/{{ $path }}/del', {"{{ $primaryKey }}": self.data('itemid')}, function (res) {
                    if (res.code === 0) {
                        layer.msg('成功！', {anim: 0}, function () {
                            form_submit();
                            // location.reload();
                        });
                    } else {
                        layer.msg(res.message);
                    }
                });
            });
        })
    });

    function jumpBtn(el) {
        var self = $(el);
        var path = self.data('href');
        var type = self.data('jumptype');
        var jvalue = self.data('value') || '';
        var title = self.data('title') || '';
        var text = self.text();
        if (type === 'confirm') {
            layer.confirm('确定' + text + '？', function (index) {
                layer.close(index);
                $.get('/admin/' + path, function (res) {
                    if (res.code === 0) {
                        layer.msg('成功！', {anim: 0}, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg('失败：' + res.message);
                    }
                });
            });
        } else if (type === 'uploadimg') {

        } else if (type === 'prompt') {
            layer.prompt({
                value: jvalue,
                title: title,
            }, function (value, index, elem) {
                layer.close(index);
                $.get('/admin/' + path, {newValue: value}, function (res) {
                    if (res.code === 0) {
                        layer.msg('成功！', {anim: 0, time: 1000}, function () {
                            self.text(value).data('value', value);
                            location.reload();
                        });
                    } else {
                        layer.msg('失败：' + res.message);
                    }
                });
            });
        } else {
            $.get('/admin/' + path, function (res) {
                layer.open({
                    type: 1,
                    area: '700px',
                    offset: '150px',
                    title: false,
                    content: res
                });
            });
        }
    }

    layui.use(['upload', 'form'], function () {
        var upload = layui.upload, form = layui.form;

        form.on('switch', function (data) {
            var self = $(data.elem);
            var path = self.data('href');
            $.get('/admin/' + path, function (res) {
                console.log(res);
                if (res.code === 0) {
                } else {
                    layer.msg('失败：' + res.message);
                }
            });
        });
        //执行实例
        var uploadInst = upload.render({
            elem: '#import' //绑定元素
            , field: 'excel'
            , exts: 'xls|xlsx|csv'
            , url: '/admin/{{ $path }}/import' //上传接口
            , done: function (res) {
                if (res.code === 0) {
                    layer.msg('导入成功，加载请稍等待！', {anim: 0}, function () {
                        location.reload();
                    });
                } else {
                    layer.msg('导入失败，即将跳转到错误信息页。', {anim: 0}, function () {
                        location.href = '/admin/errorPage';
                    });
                }
            }
            , error: function (res) {
                layer.msg(res.message);
            }
        });

        //执行实例
        $('.uploadimg').each(function (index, elem) {
            upload.render({
                elem: elem //绑定元素
                , field: 'img'
                , url: '/admin/' + $(elem).data('href') //上传接口
                , done: function (res) {
                    if (res.code === 0) {
                        layer.msg('上传成功', {anim: 0}, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
                , error: function (res) {
                    layer.msg(res.message);
                }
            });
        });

    });
</script>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/fuelux.tree-sampledata.js"></script>
<script src="/static/js/fuelux.tree.min.js"></script>
<script src="/static/js/ace-elements.min.js"></script>
<script src="/static/js/ace.min.js"></script>
{{--<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>--}}
<script type="text/javascript" src="/static/js/xlPaging.js"></script>
<script type="text/javascript">
    if(window.screen.height > 1000){
        document.getElementById('mine_list').style.maxHeight = '815px';
        document.getElementById('camera_table').style.maxHeight = '654px';
    }

    function input_title(i){
        i.title = i.value;
    }

    //区域列表
    var tree_data = <?php echo json_encode($tree_data);?>;
    var treeDataSource = new DataSourceTree({data: tree_data});
    jQuery(function($){
        $('#tree1').ace_tree({
            dataSource: treeDataSource ,
            multiSelect:true,
            loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
            'open-icon' : 'icon-minus',
            'close-icon' : 'icon-plus',
            'selectable' : true,
            // 'selected-icon' : 'icon-ok',
            // 'unselected-icon' : 'icon-remove'
        });
    });
    var pagesize = parseInt(document.getElementById('pagesize').value);
    //分页
    $("#page").paging({
        nowPage: 1, // 当前页码
        pageNum: pagesize, // 总页码
        buttonNum: 7, //要展示的页码数量
        callback: function (num) { //回调函数
            var mine_id = '';
            var camera_name = '';
            var camera_source = 0;
            var camera_type = 0;
            $.get('/admin/camera/camerapage',{'page':num,'mine_id':mine_id,'camera_name':camera_name,'camera_source':camera_source,'camera_type':camera_type},function(str){
                document.getElementById('camera_list').innerHTML = '';
                if(str.data.length > 0){
                    for(var i=0;i<str.data.length;i++){
                        if(str.data[i].is_show == 1){
                            if(str.data[i].playback == 0){
                                $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否" checked></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button><button class="layui-btn layui-btn-xs layui-btn-warm backItem"  onclick="play_back('+str.data[i].id+');">回放</button></td></tr>');
                            }else{
                                $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否" checked></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button></td></tr>');
                            }
                        }else{
                            if(str.data[i].playback == 0){
                                $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否"></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button><button class="layui-btn layui-btn-xs layui-btn-warm backItem"  onclick="play_back('+str.data[i].id+');">回放</button></td></tr>');
                            }else{
                                $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否"></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button></td></tr>');
                            }
                        }
                    }
                    layui.form.render();
                }else{
                    $('#camera_list').append('<tr><td colspan="8">暂无数据</td></tr>');
                }
            });
        }
    });

    //表单提交ajax
    function form_submit(){
        var mine_id = document.getElementById('mine_id').value;
        var camera_name = document.getElementById('camera_name').value;
        var camera_source = document.getElementById('camera_source').value;
        var camera_type = document.getElementById('camera_type').value;
        document.getElementById('camera_list').innerHTML = '';
        $.get('/admin/camera/update',{'mine_id':mine_id,'camera_source':camera_source,'camera_type':camera_type,'camera_name':camera_name},function(str){
            if(str.data.length > 0){
                for(var i=0;i<str.data.length;i++){
                    if(str.data[i].is_show == 1){
                        if(str.data[i].playback == 0){
                            $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否" checked></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button><button class="layui-btn layui-btn-xs layui-btn-warm backItem"  onclick="play_back('+str.data[i].id+');">回放</button></td></tr>');
                        }else{
                            $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否" checked></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button></td></tr>');
                        }
                    }else{
                        if(str.data[i].playback == 0){
                            $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否"></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button><button class="layui-btn layui-btn-xs layui-btn-warm backItem"  onclick="play_back('+str.data[i].id+');">回放</button></td></tr>');
                        }else{
                            $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否"></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button></td></tr>');
                        }
                    }
                }
                layui.form.render();
            }else{
                $('#camera_list').append('<tr><td colspan="8">暂无数据</td></tr>');
            }
            //分页
            $("#page").paging({
                nowPage: 1, // 当前页码
                pageNum: str.last_page, // 总页码
                buttonNum: 7, //要展示的页码数量
                callback: function (num) { //回调函数
                    $.get('/admin/camera/camerapage',{'page':num,'mine_id':mine_id,'camera_name':camera_name,'camera_source':camera_source,'camera_type':camera_type},function(str){
                        document.getElementById('camera_list').innerHTML = '';
                        if(str.data.length > 0){
                            for(var i=0;i<str.data.length;i++){
                                if(str.data[i].is_show == 1){
                                    if(str.data[i].playback == 0){
                                        $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否" checked></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button><button class="layui-btn layui-btn-xs layui-btn-warm backItem"  onclick="play_back('+str.data[i].id+');">回放</button></td></tr>');
                                    }else{
                                        $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否" checked></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button></td></tr>');
                                    }
                                }else{
                                    if(str.data[i].playback == 0){
                                        $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否"></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button><button class="layui-btn layui-btn-xs layui-btn-warm backItem"  onclick="play_back('+str.data[i].id+');">回放</button></td></tr>');
                                    }else{
                                        $('#camera_list').append('<tr><td><input type="text" readonly value="'+str.data[i].parent_title+'" title="'+str.data[i].parent_title+'"></td><td><input type="text" readonly value="'+str.data[i].title+'" title="'+str.data[i].title+'"></td><td><input type="text" readonly value="'+str.data[i].camera_name+'" title="'+str.data[i].camera_name+'"></td><td><input type="text" readonly value="'+str.data[i].camera_url+'" title="'+str.data[i].camera_url+'"></td><td><span class="layui-form"><input type="checkbox" name="is_show" data-href="camera/list/edit?type=show&id='+str.data[i].id+'" lay-skin="switch" lay-text="是|否"></span></td><td>'+str.data[i].sort+'</td><td><button class="layui-btn layui-btn-xs layui-btn-normal viewItem" onclick="check_camera('+str.data[i].id+');">查看</button><button class="layui-btn layui-btn-xs editItem"  onclick="edit_camera('+str.data[i].id+');">编辑</button><button class="layui-btn layui-btn-xs layui-btn-danger delItem"  onclick="del_camera('+str.data[i].id+');">删除</button></td></tr>');
                                    }
                                }
                            }
                            layui.form.render();
                        }else{
                            $('#camera_list').append('<tr><td colspan="8">暂无数据</td></tr>');
                        }
                    });
                }
            });
        });
    }
    //重置表单
    function form_resert(){
        document.getElementById('mine_id').value = null;
        document.getElementById('camera_name').value = null;
        document.getElementById('camera_source').value = 0;
        document.getElementById('camera_type').value = 0;
        search_form.submit();
    }
    //删除摄像头
    function del_camera(id){
        layer.confirm('你确定删除？', function () {
            layer.closeAll();
            $.post('/admin/camera/list/del', {"id": id}, function (res) {
                if (res.code === 0) {
                    layer.msg('成功！', {anim: 0}, function () {
                        form_submit();
                        // location.reload();
                    });
                } else {
                    layer.msg(res.message);
                }
            });
        });
    }
    //编辑摄像头
    function edit_camera(id){
        $.get('/admin/{{ $path }}/edit', {id: id}, function (res) {
            layer.open({
                type: 1,
                area: ['1000px','600px'],
                title: false,
                content: res
            });
        });
    }
    //查看摄像头
    function check_camera(id){
        $.get('/admin/{{ $path }}/view', {id: id}, function (res) {
            layer.open({
                type: 1,
                area: ['1000px','600px'],
                title: false,
                content: res
            });
        });
    }
    //回放
    function play_back(id){
        $.get('/admin/{{ $path }}/playback', {id: id}, function (res) {
            layer.open({
                type: 1,
                area: ['1000px','600px'],
                title: false,
                content: res
            });
        });
    }
    //添加弹窗
    function addItem() {
        var mine_id = document.getElementById('mine_id').value;
        $.get('/admin/{{ $path }}/add?mine_id='+mine_id, function (res) {
            layer.open({
                type: 1,
                area: ['1000px','600px'],
                title: false,
                content: res
            })
        });
    }
    //查看弹窗
    $(function () {
        $('.viewItem').on('click', function () {
            var self = $(this);
            $.get('/admin/{{ $path }}/view', {id: self.data('itemid')}, function (res) {
                layer.open({
                    type: 1,
                    area: ['1000px','600px'],
                    title: false,
                    content: res
                });
            });
        })
    });
    //编辑弹窗
    $(function () {
        $('.editItem').on('click', function () {
            var self = $(this);
            $.get('/admin/{{ $path }}/edit', {id: self.data('itemid')}, function (res) {
                layer.open({
                    type: 1,
                    area: ['1000px','600px'],
                    title: false,
                    content: res
                });
            });
        })
    });
    //回放弹窗
    $(function () {
        $('.backItem').on('click', function () {
            var self = $(this);
            $.get('/admin/{{ $path }}/playback', {id: self.data('itemid')}, function (res) {
                layer.open({
                    type: 1,
                    area: ['1000px','600px'],
                    title: false,
                    content: res
                });
            });
        })
    });
</script>