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

<style>
    .layui-upload-list {
        width: auto;
        height: auto;
        margin-bottom: 0;
    }

    .layui-elem-quote {
        padding-bottom: 5px;
    }

    .layui-upload-img {
        /*width: 92px;*/
        height: 92px;
    }

    hr {
        margin: 15px 0;
    }

    .uk-alert-danger {
        background: #fff1f0;
        color: #d85030;
        margin-bottom: 15px;
        padding: 10px;
        border: 1px solid rgba(216, 80, 48, .3);
        border-radius: 4px;
        text-shadow: 0 1px 0 #fff;
    }

    .imgItem {
        display: inline-block;
        position: relative;
        margin: 0 10px 10px 0;
    }

    .imgItem .layui-close {
        position: absolute;
        top: 0;
        right: 0;
        height: 16px;
        line-height: 16px;
        text-align: center;
        color: #000;
        width: 16px;
        border: 1px solid #000;
        background-color: #fff;
    }

    iframe.fr-iframe {
        padding: 0 20px;
    }

    .fr-wrapper.show-placeholder .fr-placeholder {
        padding-left: 30px !important;
    }

    .layui-form-label {
        width: {{ $colWidth }}px;
    }

    .layui-input-block {
        margin-left: {{ $colWidth + 30 }}px;
    }

    .weadmin-body {
        overflow: initial;
    }
</style>
<script src="/js/admin/xm-select.js"></script>
<script src="/laydate/laydate.js"></script>
<form class="layui-form" id="form-unify" method="post" action="{{ $path ?? '' }}" style="padding:20px;">
    @csrf
    <h2 class="uk-modal-title">{{ $fromTitle }}</h2>
    @if(isset($item[$primaryKey]))
        <input type="hidden" name="{{ $primaryKey }}" value="{{ $item[$primaryKey] }}">
    @endif
    <br>
    @foreach($columns as $key => $column)
        @switch($column['type'])
            @case('tree_select')
            <div class="layui-form-item">
                <label class="layui-form-label">{{ $column['label'] }}</label>
                <div class="layui-input-block">
                    {{-- {!! json_encode($column) !!} --}}
                    <select name="{{ $key }}">
                        @if($column['isShowNull'] == true)
                            <option value="0" @if(!isset($item)) selected @endif>无</option>
                        @endif
                        @if(count($column['options']) > 0)
                            @include('admin::component.multi_select_option', ['selects' => $column['options'], 'selectPid' => $item[$key] ?? ($column['default'] ?? '')])
                        @endif
                    </select>
                </div>
            </div>
            @break
        @endswitch
    @endforeach

    <div class="layui-form-item">
        <label class="layui-form-label">摄像头名称</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入摄像头名称" name="camera_name" value="{{ $item['camera_name'] ?? (old('camera_name')) }}"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">摄像头类型</label>
        <div class="layui-input-block">
            <select name="camera_type">
                <option value="0" @if(!isset($item)) selected @endif>无</option>
                @if(count($columns['camera_type']['options']) > 0)
                    @foreach($columns['camera_type']['options'] as $k => $col)
                        <option value="{{ $k }}"
                                @if($columns['camera_type']['default'] == $k || (isset($item['camera_type']) && $item['camera_type'] == $k)) selected @endif>
                            {{ $col }}
                        </option>
                    @endforeach
                @endif
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">摄像头来源</label>
        <div class="layui-input-block">
            <select name="camera_source" id="camera_source" lay-filter="camera_source">
                <option value="0" @if(!isset($item)) selected @endif>无</option>
                @if(count($columns['camera_source']['options']) > 0)
                    @foreach($columns['camera_source']['options'] as $k => $col)
                        <option value="{{ $k }}"
                                @if($columns['camera_source']['default'] == $k || (isset($item['camera_source']) && $item['camera_source'] == $k)) selected @endif>
                            {{ $col }}
                        </option>
                    @endforeach
                @endif
            </select>
        </div>
    </div>

    <input class="layui-input" type="hidden" id="source_default" value="{{ $item['camera_source'] ?? (old('camera_source')) }}"/>

    <div class="layui-form-item" id="video_recorder">
        <div class="layui-form-label">录像机品牌</div>
        <div class="layui-input-block">
            @foreach($columns['video_recorder']['options'] as $k => $col)
                <label><input type="radio" name="video_recorder" lay-filter="radio" value="{{ $k }}"
                              @if((isset($item['video_recorder']) && $item['video_recorder'] == $k) ||
                              old('video_recorder') === $k ||
                              (isset($columns['video_recorder']['default']) && $columns['video_recorder']['default'] === $k)) checked
                              @endif title="{{ $col }}"/>
                </label>
            @endforeach
        </div>
    </div>

    <div class="layui-form-item" id="rtsp">
        <label class="layui-form-label">rtsp规则</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" readonly id="rtsp_input" value="rtsp://用户名:密码@IP地址:端口/h264/ch通道号/码流类型/av_stream（sub:子码流，main:主码流）"/>
        </div>
    </div>

    <div class="layui-form-item" id="camera_url">
        <label class="layui-form-label">摄像头链接</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入摄像头链接" name="camera_url" value="{{ $item['camera_url'] ?? (old('camera_url')) }}"/>
        </div>
    </div>

    <div class="layui-form-item" id="user_name">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入用户名" name="user_name" value="{{ $item['user_name'] ?? (old('user_name')) }}"/>
        </div>
    </div>

    <div class="layui-form-item" id="password">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入密码" name="password" value="{{ $item['password'] ?? (old('password')) }}"/>
        </div>
    </div>

    <div class="layui-form-item" id="ip">
        <label class="layui-form-label">ip地址</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入ip地址" name="ip" value="{{ $item['ip'] ?? (old('ip')) }}"/>
        </div>
    </div>

    <div class="layui-form-item" id="port">
        <label class="layui-form-label">端口</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入端口" name="port" value="{{ $item['port'] ?? (old('port')) }}"/>
        </div>
    </div>

    <div class="layui-form-item" id="com_number">
        <label class="layui-form-label">通道号</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入通道号" name="com_number" value="{{ $item['com_number'] ?? (old('com_number')) }}"/>
        </div>
    </div>

    <div class="layui-form-item" id="code_stream">
        <label class="layui-form-label">视频码流</label>
        <div class="layui-input-block">
<?php //dd($columns['code_stream']['value'] == 1);exit;?>
            <select name="code_stream">
                <option value="0">无</option>
{{--                @foreach($columns['code_stream']['options'] as $k=>$v)--}}
{{--                    @if($k == 1 && count($columns['code_stream']['options']) > 0)--}}
{{--                        <option value="{{ $k }}" selected>{{ $v }}</option>--}}
{{--                    @else--}}
{{--                        <option value="{{ $k }}">{{ $v }}</option>--}}
{{--                    @endif--}}
{{--                @endforeach--}}
                @if($columns['code_stream']['value'] == 2)
                    <option value="1">子码流</option>
                    <option value="2" selected>主码流</option>
                @else
                    <option value="1" selected>子码流</option>
                    <option value="2">主码流</option>
                @endif


            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入排序" name="sort" value="{{ $item['sort'] ?? (old('sort')) }}"/>
        </div>
    </div>

    @if(isset($columns['surface_id']))
    <div class="layui-form-item">
        <label class="layui-form-label">所属矿区区域</label>
        <div class="layui-input-block">
            <?php /*dd($columns);exit;*/?>
            <select name="surface_id">
                <option value="0">无</option>
                @foreach($columns['surface_id']['options'] as $k=>$v)
                    @if($k == 1 && count($columns['surface_id']['options']) > 0)
                        <option value="{{ $k }}" selected>{{ $v }}</option>
                    @else
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endif
                @endforeach
            </select>
        </div>
    </div>
    @endif

    @foreach($columns as $key => $column)
        @switch($column['type'])
            @case('uploadImg')
            <label class="layui-form-label">{{ $column['label'] }}</label>
            <div class="layui-upload">
                <img id="pre" class="layui-upload-img none">

                @if (strlen($column['default']) > 0)
                    <script>
                        $('#pre').attr('src', '{{ $column['default'] }}');
                    </script>
                @endif

                <span style="display: inline-table;">
                    <button type="button" class="layui-btn" id="selectImgBtn">上传图片</button>
                    <p id="uploadTips">
                        <input type="hidden" name="{{ $key }}" value="{{ $column['default'] ?? '' }}"/>
                    </p>
                </span>
            </div>
            <style>
                .layui-upload-img {
                    /*width: 92px;*/
                    height: 92px;
                    margin: 10px 10px 10px 10px;
                }

                #uploadTips {
                    line-height: 30px;
                }
            </style>
            <script>
                layui.use('upload', function () {

                    var $ = layui.jquery
                        , upload = layui.upload;

                    var uploadInst = upload.render({
                        elem: '#selectImgBtn'
                        , url: "{{ $column['uploadURLPath'] }}"
                        , acceptMime: 'image/jpg, image/png, image/jpeg'
                        , number: 1
                        , before: function (obj) {
                            //预读本地文件示例，不支持ie8
                            obj.preview(function (index, file, result) {
                                $('#pre').attr('src', result); //图片链接（base64）
                            });
                            //开始加载效果
                            var loading = layer.load(0, {
                                shade: 0.2,
                                time: 2*1000
                            });
                        }
                        , done: function (res) {
                            //如果上传失败
                            if (res.code > 0) {
                                return layer.msg('上传失败');
                            }
                            //上传成功
                            $("input[name='{{ $key }}']").val(res.data.image_path);
                            //结束加载效果

                        }
                        , error: function () {
                            //演示失败状态，并实现重传
                            var uploadTips = $('#uploadTips');
                            uploadTips.html('<span style="color: #FF5722; text-align:center">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            uploadTips.find('.demo-reload').on('click', function () {
                                uploadInst.upload();
                            });
                        }
                    });

                });
            </script>
            @break

            @default
        @endswitch
        @if($hasHr)
            <hr>
        @endif
    @endforeach

    @if(!is_null($footBtns))
        <hr>
        <div style="text-align: right">
            @if(in_array('goback',$footBtns))
                @if($isAjax)
                    <button class="layui-btn layui-btn-primary layui-layer-close" style="position:relative;"
                            type="button">
                        取消
                    </button>
                @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(in_array('save',$footBtns))
                <button class="layui-btn" type="submit" lay-submit lay-filter="formBox">保存</button>
            @endif
        </div>
    @endif
</form>

<script>

    layui.use(['form', 'laydate', 'table'], function () {

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

        form.on('checkbox', function (data) {
            $(data.othis).toggleClass('layui-form-checked');
        });

        form.on('select(camera_source)', function(data){
            var val=data.value;
            if(val == 1){
                document.getElementById("camera_url").style.display = 'none';
                document.getElementById("user_name").style.display = 'block';
                document.getElementById("password").style.display = 'block';
                document.getElementById("ip").style.display = 'block';
                document.getElementById("port").style.display = 'block';
                document.getElementById("com_number").style.display = 'block';
                document.getElementById("code_stream").style.display = 'block';
                document.getElementById("video_recorder").style.display = 'block';
                document.getElementById("rtsp").style.display = 'block';
            }else if(val == 2){
                document.getElementById("camera_url").style.display = 'none';
                document.getElementById("user_name").style.display = 'none';
                document.getElementById("password").style.display = 'none';
                document.getElementById("ip").style.display = 'none';
                document.getElementById("port").style.display = 'none';
                document.getElementById("com_number").style.display = 'none';
                document.getElementById("code_stream").style.display = 'block';
                document.getElementById("video_recorder").style.display = 'none';
                document.getElementById("rtsp").style.display = 'none';
            }else if(val == 3){
                document.getElementById("camera_url").style.display = 'block';
                document.getElementById("user_name").style.display = 'none';
                document.getElementById("password").style.display = 'none';
                document.getElementById("ip").style.display = 'none';
                document.getElementById("port").style.display = 'none';
                document.getElementById("com_number").style.display = 'none';
                document.getElementById("code_stream").style.display = 'none';
                document.getElementById("video_recorder").style.display = 'none';
                document.getElementById("rtsp").style.display = 'none';
            }
        });

        form.on('radio(radio)', function(data){
            var val=data.value;
            if(val == 1){
                document.getElementById('rtsp_input').value = 'rtsp://用户名:密码@IP地址:端口/h264/ch通道号/码流类型/av_stream（sub:子码流，main:主码流）';
            }
            if(val == 2){
                document.getElementById('rtsp_input').value = 'rtsp://用户名:密码@IP地址:端口/cam/realmonitor?channel=通道号&subtype=码流类型(0:主码流，1:子码流)';
            }
            if(val == 3){
                document.getElementById('rtsp_input').value = 'rtsp://用户名:密码@IP地址:端口/unicast/c通道号/s码流类型/live(0:主码流，1:子码流)';
            }
        });

        @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 === '') {
                                // location.reload();
                                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){
                                                $('#camera_list').append('<tr><td>'+str.data[i].parent_title+'</td><td>'+str.data[i].title+'</td><td>'+str.data[i].camera_name+'</td><td>'+str.data[i].camera_type+'</td><td>'+str.data[i].camera_source+'</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{
                                                $('#camera_list').append('<tr><td>'+str.data[i].parent_title+'</td><td>'+str.data[i].title+'</td><td>'+str.data[i].camera_name+'</td><td>'+str.data[i].camera_type+'</td><td>'+str.data[i].camera_source+'</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){
                                                            $('#camera_list').append('<tr><td>'+str.data[i].parent_title+'</td><td>'+str.data[i].title+'</td><td>'+str.data[i].camera_name+'</td><td>'+str.data[i].camera_type+'</td><td>'+str.data[i].camera_source+'</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{
                                                            $('#camera_list').append('<tr><td>'+str.data[i].parent_title+'</td><td>'+str.data[i].title+'</td><td>'+str.data[i].camera_name+'</td><td>'+str.data[i].camera_type+'</td><td>'+str.data[i].camera_source+'</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>');
                                                }
                                            });
                                        }
                                    });
                                });
                                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
    });

    $('.layui-form').on('click', '.layui-close', function () {
        var self = $(this);
        self.closest('.imgItem').remove();
    });

    $('.layui-form').on('click', '.file-delete', function () {
        var self = $(this);
        self.closest('tr').remove();
    });

    // alert(document.getElementById("source_default").value == '');
    // alert(document.getElementById("camera_source").value);
    //根据摄像头来源显示内容

    if(document.getElementById("source_default").value == ''){//硬盘录像机
        document.getElementById("camera_url").style.display = 'none';
        document.getElementById("user_name").style.display = 'block';
        document.getElementById("password").style.display = 'block';
        document.getElementById("ip").style.display = 'block';
        document.getElementById("port").style.display = 'block';
        document.getElementById("com_number").style.display = 'block';
        document.getElementById("code_stream").style.display = 'block';
        document.getElementById("rtsp").style.display = 'block';
        document.getElementById("video_recorder").style.display = 'block';
    }
    if(document.getElementById("source_default").value == 1){//硬盘录像机
        document.getElementById("camera_url").style.display = 'none';
        document.getElementById("user_name").style.display = 'block';
        document.getElementById("password").style.display = 'block';
        document.getElementById("ip").style.display = 'block';
        document.getElementById("port").style.display = 'block';
        document.getElementById("com_number").style.display = 'block';
        document.getElementById("code_stream").style.display = 'block';
        document.getElementById("rtsp").style.display = 'block';
        document.getElementById("video_recorder").style.display = 'block';
    }
    if(document.getElementById("source_default").value == 2){//视频服务器
        document.getElementById("camera_url").style.display = 'none';
        document.getElementById("user_name").style.display = 'none';
        document.getElementById("password").style.display = 'none';
        document.getElementById("ip").style.display = 'none';
        document.getElementById("port").style.display = 'none';
        document.getElementById("com_number").style.display = 'none';
        document.getElementById("code_stream").style.display = 'block';
        document.getElementById("rtsp").style.display = 'none';
        document.getElementById("video_recorder").style.display = 'none';
    }
    if(document.getElementById("source_default").value == 3){//内网摄像头
        document.getElementById("camera_url").style.display = 'block';
        document.getElementById("user_name").style.display = 'none';
        document.getElementById("password").style.display = 'none';
        document.getElementById("ip").style.display = 'none';
        document.getElementById("port").style.display = 'none';
        document.getElementById("com_number").style.display = 'none';
        document.getElementById("code_stream").style.display = 'none';
        document.getElementById("rtsp").style.display = 'none';
        document.getElementById("video_recorder").style.display = 'none';
    }
</script>