{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fonticon/iconfont.css' %}">

    <meta name="renderer" content="webkit">
    <title>测试页面</title>
    <style>
        body {
            background: #fff;
        }

        .innerTable {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            margin-top: 10px;
        }

        .parent {
            /* min-height: 400px; */
        }

        video {
            /* max-width: 1200px; */
            width: 100%;
            /* height: 400px; */
            /* display: inline-block; */
        }

        .parent:hover .videoBtn {
            display: block;
        }

        .videoBtn {
            position: absolute;
            right: 0;
            top: 14px;
            width: 10%;
            height: 88%;
            display: none;
        }

        .videoBtn input {
            display: block;
            /* margin-bottom: 2%; */
            width: 50%;
            height: 15%;
            border-radius: 50%;
            border: none;
            background-color: transparent;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            outline: none;
        }

        .videoBtn .up {
            background-image: url(../static/img/jkbtn/up.png);
        }

        .videoBtn .up:active {
            background-image: url(../static/img/jkbtn/upActive.png);
        }

        .videoBtn .down {
            background-image: url(../static/img/jkbtn/down.png);
        }

        .videoBtn .down:active {
            background-image: url(../static/img/jkbtn/downActive.png);
        }

        .videoBtn .left {
            background-image: url(../static/img/jkbtn/left.png);
        }

        .videoBtn .left:active {
            background-image: url(../static/img/jkbtn/leftActive.png);
        }

        .videoBtn .right {
            background-image: url(../static/img/jkbtn/right.png);
        }

        .videoBtn .right:active {
            background-image: url(../static/img/jkbtn/rightActive.png);
        }

        .videoBtn .add {
            background-image: url(../static/img/jkbtn/add.png);
        }

        .videoBtn .add:active {
            background-image: url(../static/img/jkbtn/addActive.png);
        }

        .videoBtn .shrink {
            background-image: url(../static/img/jkbtn/shrink.png);
        }

        .videoBtn .shrink:active {
            background-image: url(../static/img/jkbtn/shrinkActive.png);
        }

        .videoBtn .cut {
            background-image: url(../static/img/jkbtn/cut.png);
        }

        .videoBtn .cut:active {
            background-image: url(../static/img/jkbtn/cutActive.png);
        }

        .flashDownDiv,
        .nullData {
            /* margin: 15% 0 0 0; */
            text-align: center;
            font-size: 14px;
            height: 630px;
            /* margin-top: 10%; */
        }

        .flashDownDiv p:first-child,
        .nullData p:first-child {
            padding-top: 10%;
        }
        .flashShowDiv{
            background: #323d48;
        }

        .flashShowDiv,
        .flashDownDiv,
        .nullData {
            display: none;
        }

        .fenpei-bottom {
            margin-top: 20px;
        }

        .flashShowDiv video {
            width: 100%;
        }


        #downpath {
            width: 100%;
            height: 80px;
            resize: none;
            margin-top: 10px;
        }


        #divMain .a4 {
            width: 50%;
            height: 50%;
        }

        #divMain .aSelected {
            z-index: 9;
            border: 3px solid #49dfb4;
        }

        #divMain a,
        a:visited {
            float: left;
            /* border: 1px solid #000; */
            margin: 0 -1px -1px 0;
            position: relative;
            text-decoration: none;
            box-sizing: border-box;
            border: 3px solid #000;
        }

        #divMain .a1 {
            width: 100%;
            height: 100%;
        }

        #divMain .a4 {
            width: 50%;
            height: 50%;
        }

        #divMain .a9 {
            width: 33.33%;
            height: 33.33%;
        }


        .v1 {
            cursor: pointer;
            width: 23px;
            height: 23px;
            display: inline-table;
        }

        .v1.active,
        .v1:hover {
            color: #37CAB9;
        }

        .v4 {
            cursor: pointer;
            width: 23px;
            height: 23px;
            display: inline-table;
        }

        .v4.active,
        .v4:hover {
            color: #37CAB9;
        }

        .v9 {
            cursor: pointer;
            width: 23px;
            height: 23px;
            display: inline-table;
        }

        .v9.active,
        .v9:hover {
            color: #37CAB9;
        }

        /* 控制按钮 */

        .searchInp {
            text-align: center;
            margin: 10px 0;
        }

        .searchInp>input {
            line-height: 30px;
            font-size: 14px;
            border: 1px solid #000;
            padding: 0 10px;
            padding: 0 10px;
            border-right: none;
        }
        .searchInp>button {
            line-height: 30px;
            vertical-align: middle;
            padding: 0 5px;
            background: #c2c3c5;
            color: #fff;
        }
        .jkListDiv{
            overflow-x: hidden;
            line-height: 40px;
            height: 100%;
        }

        .jkListUl>li {
            color: #fff;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-indent: 15px;
        }

        .cutCtrl,
        .directionCtrl>div {
            position: absolute;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }


        .cutCtrl {
            top: 0;
            left: 50%;
            margin-left: -25px;
            background: url(../static/img/jkbtn/cut.png) no-repeat center;
            background-size: 100% 100%;
        }

        .directionCtrl {
            position: relative;
            /* width: 180px; */
            height: 180px;
            bottom: 0;
            background: url(../static/imgs/ptz_bg.png) no-repeat center;
            background-size: 150px 150px;
            /* margin-left: 13px; */
        }

        .upCtrl {
            top: 18px;
            left: 53%;
            margin-left: -25px;
        }

        .leftCtrl {
            left: 24px;
            top: 53%;
            margin-top: -25px;
        }

        .bottomCtrl {
            bottom: 17px;
            left: 53%;
            margin-left: -25px;
        }

        .rightCtrl {
            right: 26px;
            top: 53%;
            margin-top: -25px;
        }

        .Zoom {
            background-image: url(../static/imgs/zoom.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 120px;
            height: 30px;
            margin: auto;
            /* margin-top: 15px; */
            /* margin-bottom: 15px; */
        }

        .Zoom span {
            width: 54px;
            height: 32px;
            display: inline-block;
            float: left;
            margin-left: 5px;
            cursor: pointer;
        }
        /* 监控列表 */
        .gardenListBtn{
            margin-top: 10px;
            color: #fff;
            text-align: center;
        }
        .jkListUl>li.select-c {
            background-color: #36404D;
            color: rgb(255, 255, 0);
        }
        .gardenListBtn button.layui-btn-primary{
            color: #49dfb4;
            border: #000;
            background-image: linear-gradient(#525b6d, #3e4654);
            border: 1px solid #3c4452;
        }
        .gardenListBtn button.layui-btn-primary:hover{
            box-shadow: 0 0 2px 0px #039c6b;
        }
    </style>
</head>
<script>
</script>

<body>
    <script src="{% static '/lib/js/ezuikit.js' %}"></script>
    <div class="content">
        <!-- <div class="searchCover page-header">
            <a class="refresh" onclick="addEquip()" id="addEquip" href="javascript:;" style="float: right;">
                <i class="add">
                    <img src="{% static '/imgs/addicon.png' %}" alt="" width="28">
                </i>添加新设备 </a>
        </div> -->
        <div class="innerTable">
            <div class="nullData">
                <p>暂无设备</p>
                <p>请先添加设备</p>
            </div>
            <div class="flashDownDiv">
                <p>您没有安装flash插件，无法播放视频</p>
                <p>请先下载安装最新的flash插件</p>
                <a href="https://get.adobe.com/cn/flashplayer/" class="layui-btn layui-btn-normal">
                    <i class="fa fa-download" aria-hidden="true"></i>
                    下载视频控件
                </a>
            </div>
            <div class="flashShowDiv">
                <div style="display: table; width: 100%;" id="jk_main">
                    <!-- 视频框 -->
                    <div style="display: table-cell;">
                        <div id="divMain" style="height:750px; background: #313a47; margin: auto; padding: 5px; position: relative; z-index: 9999;">

                        </div>
                        <div style="clear: both; height: 45px; line-height: 45px; background: #323d48; padding: 5px; position: relative; z-index: 9999;">
                            &ensp;
                            <span class="v1" id="span_V1" onclick="CreateVidewDiv(1);">
                                <i class="iconfont" style="font-size: 24px;">&#xe600;</i>
                            </span>
                            &ensp;
                            <span class="v4" id="span_V4" onclick="CreateVidewDiv(4);">
                                <i class="iconfont" style="font-size: 24px;">&#xea50;</i>
                            </span>
                            &ensp;
                            <span class="v9" id="span_V9" onclick="CreateVidewDiv(9);">
                                <i class="iconfont" style="font-size: 24px;">&#xea3f;</i>
                            </span>
                        </div>
                    </div>
                    <!-- 控制 -->
                    <div id="div_ControlPanel" style="position:relative;display: table-cell; width: 220px; background: #464e60; overflow: hidden; vertical-align: top;">
                        
                        <table style="width: 100%; height: 100%">
                            <tr style="height: 30px;">
                                <td>
                                    <div class="searchInp">
                                        <input type="text" placeholder="请输入设备ID搜索" onkeyup="if (event.keyCode == 13) searchFun();"><button onclick="searchFun()"><i class="fa fa-search" aria-hidden="true"></i></button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="vertical-align: top;">
                                    <div class="jkListDiv">                                       
                                        <ul class="jkListUl" id="dataFillDiv"></ul>
                                    </div> 
                                </td>
                            </tr>
                            <tr style="height: 50px;">
                                <td>
                                    <div class="gardenListBtn">
                                        <span class="firstPage">
                                            <button type="button" onclick="switchPage('home')" class="layui-btn layui-btn-sm layui-btn-primary">
                                                <i class="layui-icon">&#xe68e;</i>
                                            </button>
                                        </span>
                                        <span class="prevPageBtn">
                                            <button type="button" onclick="switchPage('jian')" class="layui-btn layui-btn-sm layui-btn-primary">
                                                <i class="layui-icon">&#xe65a;</i>
                                            </button>
                                        </span>
                                        <span class="menuCurr">1</span>
                                        <span class="">/</span>
                                        <span class="menuTotalPage">6</span>
                                        <span class="">页</span>
                                        <span class="nextPageBtn">
                                            <button type="button" onclick="switchPage('jia')" class="layui-btn layui-btn-sm layui-btn-primary">
                                                <i class="layui-icon">&#xe65b;</i>
                                            </button>
                                        </span>
                                    </div>
                                </td>
                            </tr>
                            <tr id="tr_ptz">
                                <td style="height: 190px; padding: 15px;">
                                    <div class="ctrlBox">
                                        <!-- <div class="cutCtrl" onclick="configCamera(this,'takephoto','')"></div>  -->
                                        <div class="directionCtrl">
                                            <div class="upCtrl" onmousedown="configCamera(this,'move',0)" onmouseup="configCamera(this,'stop')"></div>
                                            <div class="leftCtrl" onmousedown="configCamera(this,'move',2)" onmouseup="configCamera(this,'stop')"></div>
                                            <div class="bottomCtrl" onmousedown="configCamera(this,'move',1)" onmouseup="configCamera(this,'stop')"></div>
                                            <div class="rightCtrl" onmousedown="configCamera(this,'move',3)" onmouseup="configCamera(this,'stop')"></div>
                                        </div>
                                        <div class="Zoom">
                                            <span onmousedown="configCamera(this,'move',8)" onmouseup="configCamera(this,'stop')"></span>
                                            <span onmousedown="configCamera(this,'move',9)" onmouseup="configCamera(this,'stop')"></span>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                        </table>
                        
                        
                    </div>

                </div>
            </div>
        </div>
    </div>
    <input type="text" name="" id="currid" value="{{equip_id|default:''}}">


    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>

    <script>
        $.ajaxSetup({
            data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        var divNum;

        function CreateVidewDiv(n) {

            divNum = n;
            AutoNext = true;

            var width = "100%";
            var height = "100%";

            var html = "";

            for (var i = 1; i <= n; i++) {
                if (i == 1)
                    html += "<a id=\"a_" + i + "\" class=\"a" + n + " aSelected\">";
                else
                    html += "<a id=\"a_" + i + "\" class=\"a" + n + "\">";

                html += "<span id='span_ConnectionType_" + i + "' style='display:none'></span>";
                html += "<span id='span_deviceSerial_" + i + "' class='equipname' style='display:none'></span>";
                html += "<span id='span_cameraNo_" + i + "' style='display:none'></span>";
                html += "<span id='span_playTime_" + i + "' style='display:none'></span>";


                html += "<table id=\"table_" + i + "\" style=\"width: " + width + "; height: " + height + "; text-align:center;vertical-align:middle;\">";
                html += "<tr style='display:none;'>";
                html += "<td id=\"title_" + i + "\" class=\"Video_Title\" onclick=\"setCurIndex(" + i + ")\" onmouseover=\"setMouseOver(" + i + ")\" onmouseout=\"setMouseOut(" + i + ")\"><span style='color:#999'>点此选择</span></td>";
                html += "</tr>";
                html += "<tr><td id='video_" + i + "' onclick=\"setCurIndex(" + i + ");\" onmouseover=\"setMouseOver(" + i + ")\" onmouseout=\"setMouseOut(" + i + ")\">";
                html += "</td></tr>";
                html += "</table> ";
                html += "</a> ";


            }

            curIndex = 1;

            $("#divMain").html(html);

            $("#span_V1").removeClass("active");
            $("#span_V4").removeClass("active");
            $("#span_V9").removeClass("active");
            $("#span_V16").removeClass("active");

            $("#span_V" + n).addClass("active");
        }

        function setMouseOut(idx) {
            if (curIndex != idx && $("#a_" + idx).length > 0)
                $("#a_" + idx).removeClass("aSelected");
        }
        function setMouseOver(idx) {
            if ($("#a_" + idx).length > 0)
                $("#a_" + idx).addClass("aSelected");
        }
        // 点击获取当前监控
        function setCurIndex(idx) {
            AutoNext = false;
            if (curIndex > 0 && $("#a_" + curIndex).length > 0)
                $("#a_" + curIndex).removeClass("aSelected");

            curIndex = idx;

            if ($("#a_" + idx).length > 0)
                $("#a_" + idx).addClass("aSelected");
        }
        var winHeight = 0;
        function windowResize() { //函数：获取尺寸
            var divMainWidth = $('#divMain').css('width').replace("px", "");
            var divMainHeight = divMainWidth * 9 / 16;

            $('#divMain').css('height', divMainHeight + "px");

            var EZUIKitHeight = divMainHeight / Math.sqrt(divNum) - 10;
            $('.videoNum' + divNum).css('height', EZUIKitHeight + "px");


            $('#div_ControlPanel').css('height', divMainHeight + "px");

            if ($("#tr_ptz").is(':visible'))
                $('#div_CamerList').css('height', divMainHeight - 215 + "px");
            else
                $('#div_CamerList').css('height', divMainHeight - 20 + "px");

        }

        windowResize();
        window.onresize = function () {
            windowResize();
        }

        var spanIdx = "";

        function StartPlayTime() {
            setInterval(function () {

                for (var i = 0; i <= 16; i++) {
                    var obj = $("#span_playTime_" + i);

                    if (obj.length > 0) {

                        if (obj.html() != "") {
                            if ($("#span_ConnectionType_" + i).html() != "1")
                                continue;

                            var t = parseInt((new Date().getTime() - parseInt(obj.html())) / 1000);//播放时间，秒

                            if (t >= 5 * 60) {//5分钟
                                $("#video_" + i).html("<div style='font-size:14px;color:yellow;padding:10px;text-align:center;'>抱歉，由于长时间没有操作，4G摄像头进入自动休眠模式。</div>");
                                $("#a_" + i).removeClass("noborder");
                            }
                        }
                    }
                }

            }, 1000);
        }
        //监听播放时间
        StartPlayTime();

        var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);

        //预览函数
        function StartPlay(id, connectionType, liveStatus, rtmp, hls, deviceSerial, cameraNo, title, obj) {

            $("#span_ConnectionType_" + curIndex).html(connectionType);
            $("#span_deviceSerial_" + curIndex).html(deviceSerial);
            $("#span_cameraNo_" + curIndex).html(cameraNo);
            $("#span_playTime_" + curIndex).html(new Date().getTime()); //开始播放，时间为0 

            if (spanIdx != "")
                $("#Span_" + spanIdx).css("color", "white");

            spanIdx = id;

            $("#Span_" + id).css("color", "#FFFF00");

            $("#a_" + curIndex).addClass("noborder");


            if (curIndex == 0 || $("#a_" + curIndex).length == 0)
                return;

            $("#title_" + curIndex).html(title);

            var playHtml;
            var script;
             

            if (isIE) {
                playHtml = "<video id='myPlayer" + curIndex + "' style='width: 100%; height: 100%' class='videoNum" + divNum + "' poster='' controls playsinline webkit-playsinline autoplay>";

                //playHtml += " <source src='" + rtmp + "' type='rtmp/flv' />";
                playHtml += "<source src='" + hls + "' type='application/x-mpegURL' />";
                playHtml += "</video>";

                script = document.createElement("script");
                script.type = "text/javascript";
                script.appendChild(document.createTextNode(" new EZUIPlayer('myPlayer" + curIndex + "');")); 
            }
            else {

                playHtml = "<iframe   id='playFrame" + curIndex + "'  src='https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/" + deviceSerial + "/" + cameraNo + ".hd.live&autoplay=1&accessToken=at.d2trwvdod5bxxlr4dug8le6wb0ugbi2h-173pi8ymy3-1882umg-zrib7cj3f&templete=2'  width='100%' height='100%' allowfullscreen frameborder='0' allowtransparency=true></iframe>"

                script = document.createElement("script");
                script.type = "text/javascript";
                script.appendChild(document.createTextNode(" IframeOnClick.track(document.getElementById('playFrame" + curIndex + "'), function() { setCurIndex(" + curIndex + " ); }); "));

            }


            $("#video_" + curIndex).html(playHtml);
            $("#video_" + curIndex).append(script);


            if ($("#a_" + (curIndex + 1)).length > 0)
                SetAutoNext(curIndex + 1);

            windowResize();
        }
        //iframe点击事件
        var IframeOnClick = {
            resolution: 200,
            iframes: [],
            interval: null,
            Iframe: function () {
                this.element = arguments[0];
                this.cb = arguments[1];
                this.hasTracked = false;
            },
            track: function (element, cb) {
                this.iframes.push(new this.Iframe(element, cb));
                if (!this.interval) {
                    var _this = this;
                    this.interval = setInterval(function () { _this.checkClick(); }, this.resolution);
                }
            },
            checkClick: function () {
                if (document.activeElement) {
                    var activeElement = document.activeElement;
                    for (var i in this.iframes) {
                        if (activeElement === this.iframes[i].element) { // user is in this Iframe
                            if (this.iframes[i].hasTracked == false) {
                                this.iframes[i].cb.apply(window, []);
                                this.iframes[i].hasTracked = true;
                            }
                        } else {
                            this.iframes[i].hasTracked = false;
                        }
                    }
                }
            }
        };



        function SetAutoNext(idx) {
            if (AutoNext) {
                if (curIndex > 0 && $("#a_" + curIndex).length > 0)
                    $("#a_" + curIndex).removeClass("aSelected");

                curIndex = idx;

                if ($("#a_" + idx).length > 0)
                    $("#a_" + idx).addClass("aSelected");
            }
        }


        function addEquip() {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.prompt({ title: '添加设备，并确认', formType: 0, title: '请输入设备ID' }, function (text, index) {
                    layer.close(index);
                    // layer.msg('演示完毕！<br>您最后写下了：'+text);
                    $.ajax({
                        url: 'equipmanage_jk',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            imei: text,
                        },
                        success: function (data) {
                            console.log(data)
                        }
                    })
                });
            });

        }
    </script>



    <script>
        // 判断是否启用flash
        function flashChecker() {
            var hasFlash = 0;　　　　 //是否安装了flash
            var flashVersion = 0;　　 //flash版本
            if (document.all) {
                var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
                if (swf) {
                    hasFlash = 1;
                    VSwf = swf.GetVariable("$version");
                    flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
                }
            } else {
                if (navigator.plugins && navigator.plugins.length > 0) {
                    var swf = navigator.plugins["Shockwave Flash"];
                    if (swf) {
                        hasFlash = 1;
                        var words = swf.description.split(" ");
                        for (var i = 0; i < words.length; ++i) {
                            if (isNaN(parseInt(words[i]))) {
                                continue;
                            }
                            flashVersion = parseInt(words[i]);
                        }
                    }
                }
            }
            return {
                f: hasFlash,
                v: flashVersion
            };
        }
        var fls = flashChecker();

        // 控制
        function configCamera(deviceSerial, ctrl, movenum) {
            var id = $("#a_" + curIndex).find('.equipname').html();
            console.log($("#a_" + curIndex))
            if (!id) {
                layui.use(['layer'], function () {
                    var layer = layui.layer;
                    layer.msg('暂无设备！')
                })
                return;
            }

            $.ajax({
                url: 'equipmanage_jk',
                type: 'post',
                dataType: 'json',
                data: {
                    id: id,
                    ctrl: ctrl,
                    movenum: movenum
                },
                // beforeSend: function () {
                //     if (ctrl == 'takephoto') {
                //         loadFlage = layer.load();
                //     }
                // },
                // complete: function () {
                    
                //     layui.use(['layer'], function () {
                //         var layer = layui.layer;                        
                //         layer.close(loadFlage);
                //     })
                // },
                success: function (data) {
                    if (ctrl == 'takephoto') {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                title: '手动下载'
                                , content: '<textarea readonly id="downpath">' + data.data.picUrl + '</textarea>'
                                , btn: ['复制', '取消']
                                , area: ['400px', '230px']
                                , yes: function (index, layero) {
                                    //按钮【按钮一】的回调
                                    document.getElementById('downpath').select();
                                    layer.tips('手动复制，在浏览器打开，另存为', '#downpath', {
                                        tips: 2
                                    });
                                    return false;
                                }
                                , btn2: function (index, layero) {
                                    //按钮【按钮二】的回调
                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                                , btn3: function (index, layero) {
                                }
                                , cancel: function () {
                                    //右上角关闭回调

                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                            });
                        });
                        // window.open(data.data.picUrl)
                    }
                }
            })
        }
        if (fls.f) { //安装了flash
            CreateVidewDiv(1)
            $('.flashShowDiv').show();
            $('.flashDownDiv').hide();
            // StartPlay('363','1', '1', 'rtmp://rtmp01open.ys7.com/openlive/18319fb1a08249d3a498c5cba3e8bdee.hd','http://hls01open.ys7.com/openlive/18319fb1a08249d3a498c5cba3e8bdee.hd.m3u8', '719458092', '1','阳台',null);

            $.ajax({
                url: 'jklist',
                type: 'get',
                data: {
                    f_id:"",
                    page: 1
                },
                dataType: 'json',
                beforeSend: function () {
                    // loadFlage = layer.load();
                },
                success: function (data) {
                    // layer.close(loadFlage);
                    if (data.nums) {
                        // StartPlay(data);
                        setHtml(data.ids);
                        $("#dataFillDiv >li").removeClass("select-c");
                        if(!$('#currid').val()){
                            $("#dataFillDiv >li").eq(0).addClass("select-c");
                        }
                        // getVideoResource(data.ids[0].equip_id,data.ids[0].equip_name);
                        menuTotalPage = Math.ceil(data.nums / 10);
                        if (menuTotalPage > 1) {
                            $('.gardenListBtn').show();
                        } else {
                            $('.gardenListBtn').hide();
                        }
                        $('.menuTotalPage').html(menuTotalPage);
                    } else {
                        $('.flashShowDiv').hide();
                        $('.nullData').show();
                    }
                }
            })
            
           
        } else {
            $('.flashShowDiv').hide();
            $('.flashDownDiv').show();
        }

        // 搜索
        function searchFun(){
            var id = $('.searchInp>input').val();
            searchPare(id)
        }
        function searchPare(para){
            $.ajax({
                url: 'jklist',
                type: 'get',
                data: {
                    f_id:para,
                    page: 1
                },
                dataType: 'json',
                beforeSend: function () {
                    // loadFlage = layer.load();
                },
                success: function (data) {
                    // layer.close(loadFlage);
                    if (data.nums) {
                        // StartPlay(data);
                        setHtml(data.ids);
                        $("#dataFillDiv >li").removeClass("select-c");
                        $("#dataFillDiv >li").eq(0).addClass("select-c");
                        // getVideoResource(data.ids[0].equip_id,data.ids[0].equip_name);
                        menuTotalPage = Math.ceil(data.nums / 10);
                        if (menuTotalPage > 1) {
                            $('.gardenListBtn').show();
                        } else {
                            $('.gardenListBtn').hide();
                        }
                        $('.menuTotalPage').html(menuTotalPage);
                    } else {
                        $('.flashShowDiv').hide();
                        $('.nullData').show();
                    }
                }
            })
        }
        var menuCurrNum = 1; //当前页
        var menuTotalPage;  //总页
        // 分页切换
        function switchPage(flag) {
            var id = $('.searchInp>input').val();
            if (flag == 'jia') {
                if (menuCurrNum < menuTotalPage) {
                    menuCurrNum++;
                }
            } else if (flag == 'jian') {
                if (menuCurrNum > 1) {
                    menuCurrNum--;
                }
            } else {
                menuCurrNum = 1;
            }
            $('.menuCurr').html(menuCurrNum);
            $.ajax({
                url: 'jklist',
                type: 'get',
                data: { f_id: id,page: menuCurrNum },
                dataType: 'json',
                success: function (data) {
                    setHtml(data.ids);
                    $("#dataFillDiv >li").removeClass("select-c");
                    $("#dataFillDiv >li").eq(0).addClass("select-c");
                    // getVideoResource(data.ids[0].equip_id,data.ids[0].equip_name);
                },
                error: function (type) {
                    console.log(type);
                }
            })
        }
        // 菜单列表
        function setHtml(data) {
            if (data.length) {
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    if(data[i].equip_name){
                        var equip_name = '设备：'+data[i].equip_name;
                    }else{
                        var equip_name = '设备ID：'+data[i].equip_id;
                    }
                    html += '<li data-id="'+data[i].equip_id+'" data-name = "'+data[i].equip_name+'">'+equip_name+'</li>';
                    if (i == data.length - 1) {
                        $('#dataFillDiv').html(html);
                        if($('#currid').val()){
                            getVideoResource($('#currid').val(),'')
                        }else{
                            getVideoResource(data[0].equip_id,data[0].equip_name)
                        }
                    }
                }
            } else {
                $('#dataFillDiv').html('<div style="text-align:center;line-height:200px;font-size:18px">暂无数据</div>');
            }
        }

        $('#dataFillDiv').on('click','li',function(){
            $("#dataFillDiv >li").removeClass("select-c");
            $(this).addClass("select-c");
            var id = $(this).data('id');
            var name = $(this).data('name');
            getVideoResource(id,name);
        })
        // 请求设备视频资源
        function getVideoResource(id,name){
            $.ajax({
                url: 'equipmanage_jk',
                type: 'get',
                data: {
                    id:id
                },
                dataType: 'json',
                beforeSend: function () {
                    // loadFlage = layer.load();
                },
                success: function (data) {
                    // layer.close(loadFlage);
                    console.log(data);
                    if (data[0].code == 200) {
                        StartPlay(id,'1', '1', data[0].data[0].rtmpHd,data[0].data[0].hlsHd, id, '1',name,null);
                    } else {
                    //     $('.flashShowDiv').hide();
                    //     $('.nullData').show();
                    }
                }
            })
        }

        
    </script>
</body>

</html>