潘钊 / bsth_control · Files

var loading = loadingFunction();
var player = null;
let skeyWebPlayer_myVar = null;
let option = null;
let treeURL = null;
$(document).ready(function () {
    $.getJSON("/video/tree", null, function (rep) {
        if (rep.status == "SUCCESS") {
            initTree(rep.data);
        }
        initTable();
    });

});

function initTree(data) {
    layui.use(function () {
        var tree = layui.tree;
        // 渲染
        tree.render({
            elem: '#video_tree',
            data: data,
            onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
            showLine: true, // 是否开启连接线
            click: function (node) {
                initTable(node);
            }
        });
        closeLoading();
    });
}


function initTable(treeNode) {
    var queryURL = "/video/tree/table?1=1";
    if (treeNode) {
        if (treeNode.data.type === 1) {
            queryURL = queryURL + "&businessCode_eq=" + treeNode.data.code;
        }

        if (treeNode.data.type === 2) {
            queryURL = queryURL + "&brancheCompanyCode_eq=" + treeNode.data.code;
        }
    }
    treeURL = queryURL;
    option = initTreeTableOption(queryURL);
    layui.use(function () {
        var treeTable = layui.treeTable;
        // 渲染
        treeTable.render(option);
        treeTable.on('rowDouble(treeTable)', function (obj) {
            var targetDataIndex = obj.dataIndex + "-0";
            $("div[lay-table-id='treeTable']").find("tr").each(function (index, node) {
                var sourceDataIndex = $(node).attr("data-index");
                if (sourceDataIndex === targetDataIndex) {
                    queryChannelByCarNo(node, obj);
                    return;
                }
            });
        });

        treeTable.on('tool(treeTable)', function (obj) {
            switch (obj.event) {
                case 'SkeyeWebPlayerEvent':
                    skeyewebplayerOpen(obj.data.carCode);

                    break;
            }
        });
    });
}

function  queryTreeTable(){
    let  url = treeURL;
    if(!isEmpty($("#carCode_like").val())){
        url += "&carCode_like="+$("#carCode_like").val();
    }

    if(!isEmpty($("#insideCode_like").val())){
        url += "&insideCode_like="+$("#insideCode_like").val();
    }

    if(!isEmpty($("#equipmentCode_like").val())){
        url += "&equipmentCode_like="+$("#equipmentCode_like").val();
    }

    if(!isEmpty($("#carPlate_like").val())){
        url += "&carPlate_like="+$("#carPlate_like").val();
    }
    option.url = url;
    var treeTable = layui.treeTable;
    treeTable.render(option);
}

function  isEmpty(val){
    return null == val || undefined == val || "" == val;
}

function initTreeTableOption(queryURL) {
    var option = {
        elem: '#treeTable',
        url: queryURL,
        loading: true,
        treeColIndex: 1,
        even:true,
        treeSpid: 0,
        limit:5,
        limits :[5,10,20,50],
        maxHeight: '701px',
        cols: [[
            {field: 'name', title: '车辆编号', width: 140},
            {field: 'insideCode', title: '内部编号', width: 120},
            {field: 'equipmentCode', title: '设备编号', width: 160},
            {field: 'carPlate', title: i18n('txt-3704'), width: 160},
            {field: 'company', title: '所在公司', width: 160},
            {field: 'brancheCompany', title: '所在分公司', width: 160},
            {
                field: 'sfdc', title: i18n('txt-4087'), width: 80, templet: function (obj) {
                    if (obj.sfdc == 'true' || obj.sfdc == true) {
                        return i18n('txt-4257')
                    } else if (obj.sfdc == 'false' || obj.sfdc == false) {
                        return i18n('txt-4260');
                    }
                    return i18n('txt-4058');
                }
            },
            {
                field: 'scrapState', title: i18n('txt-3874'), width: 80, templet: function (obj) {
                    if (obj.scrapState == 'true' || obj.scrapState == true) {
                        return i18n('txt-4257')
                    } else if (obj.scrapState == 'false' || obj.scrapState == false) {
                        return i18n('txt-4260');
                    }
                    return i18n('txt-4058');
                }
            },
            {title: i18n('txt-3942'), width: 80, toolbar: '#treeTable-tools'}
        ]],
        page: true
    };
    return option;
}

function queryChannelByCarNo(treeNode, obj) {
    loading = loadingFunction();
    var url = "/video/car/channel/" + obj.data.name;
    $.getJSON(url, function (rep) {
        if (rep.status === "SUCCESS") {
            var html = "<td data-field=\"name\" colspan='8'  data-key=\"1-" + obj.dataIndex + "-0\" class=\"\" >";
            html += "<table cellspacing=\"0\" cellpadding=\"0\" border=\"1\" class=\"layui-table\" style='padding-left: 15px;boder:1px solid #000;margin-bottom: 15px;'><thead><tr>";
            html += "<th data-field=\"name\" data-key=\"1-" + obj.dataIndex + "-0\" class=\"\" title=\"通道编号\"><div class=\"layui-table-cell \" style='width: 200px;'><span>通道编号</span></div></th>";
            html += "<th data-field=\"name\" data-key=\"2-" + obj.dataIndex + "-0\" class=\"\" title=\"设备编号\"><div class=\"layui-table-cell \" style='width: 200px;'><span>设备编号</span></div></th>";
            html += "<th data-field=\"name\" data-key=\"3-" + obj.dataIndex + "-0\" class=\"\" title=\"通道名称\"><div class=\"layui-table-cell\" style='width: 100px;'><span>通道名称</span></div></th>";
            html += "<th data-field=\"name\" data-key=\"4-" + obj.dataIndex + "-0\" class=\"\" title=\"快照\"><div class=\"layui-table-cell \"><span>快照</span></div></th>";
            html += "<th data-field=\"name\" data-key=\"5-" + obj.dataIndex + "-0\" class=\"\" title=\"厂家\"><div class=\"layui-table-cell \" style='width: 100px;'><span>厂家</span></div></th>";
            html += "<th data-field=\"name\" data-key=\"6-" + obj.dataIndex + "-0\" class=\"\" title=\"开启音频\"><div class=\"layui-table-cell \"><span>开启音频</span></div></th>";
            html += "<th data-field=\"name\" data-key=\"7-" + obj.dataIndex + "-0\" class=\"\" title=\"" + i18n('txt-3874') + "\"><div class=\"layui-table-cell \"><span>" + i18n('txt-3874') + "</span></div></th>";
            html += "<th data-field=\"name\" data-key=\"8-" + obj.dataIndex + "-0\" class=\"\" title=\"" + i18n('txt-3874') + "\"><div class=\"layui-table-cell \" style='width: 100px;'><span>" + i18n('txt-3874') + "</span></div></th>";
            html += "</tr>";
            if (rep.data) {
                $.each(rep.data, function (index, node) {
                    html += "<tr><td>" + node.channelId + "</td><td>" + node.deviceId + "</td><td>" + node.name + "</td><td>" + getBigSnap(rep.channelImageURL, node.deviceId, node.channelId) + "</td><td>" + node.manufacture;
                    html += "</td><td>" + hasAudioText(node.hasAudio) + "</td><td>" + wvpStatusText(node.status) + "</td><td><button class=\"layui-btn layui-btn-primary layui-border\" onclick=\"playWvpVideo('";
                    html += rep.wvpPlayURL + "','" + node.deviceId + "','" + node.channelId + "')\">播放</button><button class=\"layui-btn layui-btn-primary layui-border\" onclick=\"deviceVedioPage('" + node.deviceId + "','" + node.channelId + "')\">设备录像</button></td></tr>";
                });
            }

            html += "</thead></table></td>";

            $(treeNode).html(html);

            closeLoading();
        }
    })
}

function hasAudioText(hasAudio) {
    return "true" == hasAudio || true == hasAudio ? "开启" : i18n('txt-4015');
}

function wvpStatusText(status) {
    return "true" == status || true == status ? "在线" : i18n('txt-4184');
}

function getBigSnap(imageURL, deviceId, channelId) {
    return "<image src=" + imageURL + deviceId + "/" + channelId + " />"
}

function playWvpVideo(playURL, deviceId, channelId) {
    var idDiv = "video_" + (Date.now());
    var html = "'<div id='" + idDiv + "' style='padding-top: 0;'></div>'";

    let player = null;
    var myVar = null;
    var playURL1 = playURL + deviceId + "_" + channelId + ".live.mp4";

    var index = layer.open({
        type: 1,
        title: "视频播放",
        area: ['1000px', '650px'],
        height: '800px',
        content: html,
        success: function (layero, index, that) {
            player = playVideo(playURL1, idDiv);

            myVar = setInterval(function () {
                player = playVideo(playURL1, idDiv);

            }, 300000);


        },
        beforeEnd: function (layero, index, that) {
            if (player) {
                player = null;
            }

            if (myVar) {
                window.clearInterval(myVar);
                myVar = null;
            }

            $("#" + idDiv).html("");
        }
    });
}

function playVideo(url, ID) {
    return new WebMediaPlayer(url, ID, function () {
    }, {
        cbUserPtr: this,
        decodeType: 'auto',
        openAudio: true,
        autoplay: true,
        bigPlay: false,
        showMode: false
    }).play();
}


function playVideo1(url, ID) {
    let html = "<video id=\"video\" class=\"video-js vjs-default-skin vjs-fluid\"  width=\"375\" height=\"200\" controls preload=\"none\" ";
    html += " data-setup='{ \"html5\" : { \"nativeTextTracks\" : false } }'><source src=\"" + url + "\" type=\"video/mp4\" /> </video>";
    $("#" + ID).html(html);
}

function playVideo2(url, jqeruyObj, style) {
    console.log(url);
    let html = " <video id=\"video\" controls=\"\" src=\"" + url + "\" style=\"width:100%; height:100%; object-fit: fill\" autoplay></video>";
    jqeruyObj.html(html);
}

function loadingFunction() {
    closeLoading();
    var loading = layer.load(0, {
        shadeClose: false,
        title: '加载中..',
        shade: [0.5, '#000']
    });
    return loading;
}

function closeLoading() {
    if (loading) {
        layer.close(loading);
        loading = null;
    }
}

function deviceVedioPage(device, channel) {
    var idDiv = "device_video_" + (Date.now());
    var html = "<div id='" + idDiv + "'></div>";

    var index = layer.open({
        type: 1,
        title: "设备录像",
        area: ['1300px', '650px'],
        content: html,
        success: function (layero, index, that) {
            $("#" + idDiv).html($("#deviceVideoDiv").html());
            var $deviceVideoDiv = $("#" + idDiv);
            $("#deviceVideoDate", $deviceVideoDiv).datetimepicker({
                format: 'YYYY-MM-DD',
                locale: 'zh-cn'
            });

            $("#queryDeviecChannel", $deviceVideoDiv).click(function () {
                deviceVidemoQueryHistory(device, channel, $deviceVideoDiv, idDiv);
            })
        }, beforeEnd: function (layero, index, that) {
            if (player) {
                player = null;
            }
        }
    });
}

function deviceVidemoQueryHistory(device, channel, $deviceVideoDiv, idDiv) {
    var dateStr = $("#deviceVideoDate", $deviceVideoDiv).val();
    if (null === dateStr || undefined === dateStr || "" === dateStr) {
        layer.alert('请选择需要查看的时间');
        return;
    }
    loading = loadingFunction();
    var url = "/video/car/channel/history/" + device + "/" + channel + "/" + dateStr;
    $.getJSON(url, function (resp) {
        if (resp.status === "SUCCESS") {
            var html = "<tr>";
            $.each(resp.data, function (index, node) {
                if(isEmpty(node.filePath)){
                    node.filePath=node.startTime+"_"+index;
                }
                html += "<td><button class=\"layui-btn layui-btn-primary layui-border\" onclick=\"playDeviceVidemoQueryHistory('" + idDiv + "','" + resp.wvpPlayURL + "','" + device + "','" + channel + "','" + node.startTime + "','" + node.endTime + "','" + resp.token + "')\" title='"+ node.filePath+"'>" + node.filePath + "</button></td>";
                if (index % 2 === 1) {
                    html += "</tr><tr>";
                }
            });

            $("#deviceVideoTbody", $deviceVideoDiv).html(html);
            closeLoading();
        }else{
            closeLoading();
        }
    });
}

function playDeviceVidemoQueryHistory(idDiv, url, device, channel, startTime, endTime, token) {
    if (player) {
        player = null;
    }
    startTime = startTime.replace("-", "").replace("-", "").replace(":", "").replace(":", "").replace(" ", "");
    endTime = endTime.replace("-", "").replace("-", "").replace(":", "").replace(":", "").replace(" ", "");
    console.log(startTime);
    url = url + device + "_" + channel + "_" + startTime + "_" + endTime + ".live.mp4";
    console.log(url);
    var idDiv1 = "device_video_play_" + (Date.now());
    $("#videoPlay", $("#" + idDiv)).html("<div id='" + idDiv1 + "' style='height:550px;width:99%'></div>")
    player = playVideo(url, idDiv1);

}

function skeyewebplayerOpen(carNo) {
    loading = loadingFunction();

    layer.open({
        type: 1,
        content: '<div  id="skeyewebplayer"></div>',
        title: "分页显示",
        area: ['320px', '195px'], // 初始宽高
        success: function (layero, index) {
            layer.full(index); // 最大化
            let $skeyewebplayer = $("#skeyewebplayer");
            $("#skeyewebplayer").html($("#skeyewebplayerDiv").html());
            let width = $(window).width();
            let height = $(window).height();
            height = height - height * 0.0605;
            let channelHeight = height - height * 0.03;
            $("#skeyewebplayerDivChannel", $skeyewebplayer).attr("style", "height:" + channelHeight + "px;");
            $("#skeyewebplayerDiv_main", $skeyewebplayer).attr("style", "width:" + width + "px;height:" + height + "px");
            skeyWebPlayer(1, "skeyewebplayer");
            skeywebPlayerChannel($skeyewebplayer, carNo);
        },
        beforeEnd: function (layero, index, that) {
            if (skeyWebPlayer_myVar) {
                window.clearInterval(skeyWebPlayer_myVar);
            }
            $("#skeyewebplayer").html("");
        }
    });
}

function skeywebPlayerChannel($skeyewebplayer, carNo) {
    var url = "/video/car/channel/" + carNo;
    $.getJSON(url, function (rep) {
        if (rep.status === "SUCCESS") {

            if (rep.data) {
                let html = "<table cellspacing=\"0\" cellpadding=\"0\" border=\"1\" class=\"layui-table\"><tbody>";
                $.each(rep.data, function (index, node) {
                    html = html + "<tr><td><button class=\"layui-btn layui-btn-primary\" channelNode='" + node.name + "' deviceId='" + node.deviceId + "' channelId='" + node.channelId + "' onclick=\"skeyewebplayerChannelClick('" + rep.wvpPlayURL + "',this)\">" + node.name + "</button></td></tr>";
                });
                $("#skeyewebplayerDivChannel", $skeyewebplayer).html(html);
                closeLoading();
            }
        }
    });
}

function skeyewebplayerChannelClick(playURL, btn) {
    console.log(btn);
    let children = $("#skeyewebplayerDivContent", $("#skeyewebplayer")).children();
    let length = children.length;
    if (length === 1) {
        displaySkeyewebplayerChannel(children[0], playURL, btn);
    } else if (length > 1) {
        for (let i = 0; i < length; i++) {
            let classCss = $(children[i]).attr("class");
            if (classCss.indexOf("skeyewebplayerDivContent_play_selected") > -1) {
                displaySkeyewebplayerChannel(children[i], playURL, btn);
                break;
            }
        }
    }


}

function displaySkeyewebplayerChannel(htmlNode, playURL, btn) {
    loading = loadingFunction();
    let $htmlNode = $(htmlNode);

    let $btn = $(btn);
    $("div[class='skeyewebplayerDiv_title']", $htmlNode).html($btn.attr("channelNode"));

    let playURL1 = playURL + $btn.attr("deviceId") + "_" + $btn.attr("channelId") + ".live.mp4";
    $("div[class='skeyewebplayerDiv_play_content']", $htmlNode).html("");

    playVideo2(playURL1, $("div[class='skeyewebplayerDiv_play_content']", $htmlNode));


    closeLoading();
}

function skeyewebplayerOne() {
    skeyWebPlayer(1, "skeyewebplayer");
}

function skeyewebplayerFour() {
    skeyWebPlayer(4, "skeyewebplayer");
}

function skeyewebplayerNine() {
    skeyWebPlayer(9, "skeyewebplayer");
}

function skeyWebPlayer(len, parentId) {
    var $skeyewebplayerDivContent = $("#skeyewebplayerDivContent", $("#" + parentId));
    var classCss = "skeyewebplayerDivContent_one";
    let width = $(window).width();
    width = width - width * 0.1;
    $skeyewebplayerDivContent.attr("style", "width:" + width + "px;height:98%;float:right");
    skeyWebPlayer_myVar = setInterval(function () {
        width = $(window).width();
        width = width - width * 0.1;
        $skeyewebplayerDivContent.attr("style", "width:" + width + "px;height:98%;float:right");
    }, 1000);

    if (len === 4) {
        classCss = "skeyewebplayerDivContent_Four";
    } else if (len === 9) {
        classCss = "skeyewebplayerDivContent_nine";
    }

    var html = "";
    for (let i = 0; i < len; i++) {
        html += "<div class='" + classCss + "' id='skeyewebplayerDivContent_play_" + i + "' onclick=\"skeyewebplayerDivContent_play_click(this)\"><div class='skeyewebplayerDiv_title'>";
        html += "</div><div id='skeyewebplayerDiv_play_content_" + i + "' class='skeyewebplayerDiv_play_content'></div></div>";
    }
    $skeyewebplayerDivContent.html(html);

}

function skeyewebplayerDivContent_play_click(node) {
    let $node = $(node);
    let nodes = $(node).parent().children();

    $.each(nodes, function (index, item) {
        let $item = $(item);
        let classCss = $item.attr("class");
        classCss = classCss.replace(" skeyewebplayerDivContent_play_selected", "");
        $item.attr("class", classCss)
    })
    let classCss = $node.attr("class");

    if (classCss.indexOf("skeyewebplayerDivContent_play_selected") > -1) {
        classCss = classCss.replace(" skeyewebplayerDivContent_play_selected", "");
    } else {
        classCss = classCss + " skeyewebplayerDivContent_play_selected"
    }
    $node.attr("class", classCss)
}