anxiao_web/pages/video/js/tree.js

import { layuiObj } from "./index.js";
import { skynetIpcInfo } from "./orgApi/getSkynetIpcList.js";
import { iframeVideoUrl } from "../../../public/js/url.js";
var treeData=[];
var playVideoList=[];
function createSchoolTree(){
    treeData=[];
    for(var i=0;i<skynetIpcInfo.length;i++){				
        setDeviceMenu(skynetIpcInfo[i]);//构建节点数据(4层)
    }
    setParameterTree()
    initSchoolSearchSelect();
}

function setDeviceMenu(deviceData){	
    var borough=deviceData["borough"];
    var detachment=deviceData["detachment"];
    var station=deviceData["station"];
    var name=deviceData["name"]
    var devicetype=deviceData["deviceType"];
    var pointCode=deviceData["pointCode"];
    console.log(deviceData);
    for(var iRoot=0;iRoot<treeData.length;iRoot++){		
        var oneNodeName=treeData[iRoot]["text"];
        if(oneNodeName == borough){		
            var brigadeChildren=treeData[iRoot]["children"];
            for(var boroughNode=0;boroughNode<brigadeChildren.length;boroughNode++){		
                var twoNodeName=brigadeChildren[boroughNode]["text"];
                if(twoNodeName==detachment){
                    var boroughChildren=brigadeChildren[boroughNode]["children"];
                    for(var detachmentNode=0;detachmentNode<boroughChildren.length;detachmentNode++){
                        var threeNodeName=boroughChildren[detachmentNode]["text"]
                        if(threeNodeName==station){	
                            var deviceinfo={
                                "id":4,
                                "text":name,
                                "iconCls":"icon_detachment",
                                "name":name,
                                "pointCode":pointCode,
                                "devicetype":devicetype,
                            }
                            boroughChildren[detachmentNode]["children"].push(deviceinfo);
                            return;
                        }
                    }
                    /*找不到中队
                    创建3级中队
                    创建4级节点*/
                    brigadeChildren[boroughNode]["children"].push(
                        {
                            "id":3,
                            "text":station,
                            "iconCls":"icon_detachment",
                            "state":"closed",
                            "children":[
                                {
                                    "id":4,
                                    "text":name,
                                    "iconCls":"icon_detachment",
                                    "name":name,
                                    "pointCode":pointCode,
                                    "devicetype":devicetype,
                                }
                                
                            ]
                        }
                    )
                    return;
                }
            }
            /*找不到大队		
            创建大队
            创建中队
            创建4级节点	*/
            treeData[iRoot]["children"].push({
                "id":2,
                "text":detachment,
                "state":"closed",
                "iconCls":"icon_borough",
                "children":[
                    {
                        "id":3,
                        "text":station,
                        "iconCls":"icon_detachment",
                        "state":"closed",
                        "children":[
                            {
                                "id":4,
                                "text":name,
                                "iconCls":"icon_detachment",
                                "deviceid":name,
                                "pointCode":pointCode,
                                "devicetype":devicetype,
                            }
                            
                        ]
                    }
                ]
            })
            return;
        }
    }
    /*创建 支队 节点
    创建大队
    创建中队
    创建4级节点	*/
    var stationObj={
        "id":1,
        "text":borough,
        "iconCls":"icon_brigade",
        "children":[
            {
                "id":2,
                "text":detachment,
                "state":"closed",
                "iconCls":"icon_borough",
                "children":[
                    {
                        "id":3,
                        "text":station,
                        "iconCls":"icon_detachment",
                        "state":"closed",
                        "children":[
                            {
                                "id":4,
                                "text":name,
                                "iconCls":"icon_detachment",
                                "name":name,
                                "pointCode":pointCode,
                                "devicetype":devicetype,
                            }
                            
                        ]
                    }
                ]	
            }
        ]
    }
    treeData.push(stationObj);
    return;	 		
}	

//设置节点数
function setParameterTree(){
    $('.orgTree').tree({
        data:treeData,
        formatter:function(node){
            var s = "";
            var text=node.text;
            s += `<span >${text}</span>`
            if (node.children){
                s += `<span>(${node.children.length})</span>`
            }
            return s;
        },
        animate:true,
        checkbox:true,
        onClick: function(node){//显示对应的设备总数跟在线
            var id=node["id"];
            if(id==4){
                var pointCode=node["pointCode"];
                //播放学校的视频
                playStationIpc(pointCode);
            }
        }
    })
}

//初始化快速搜索的
function initSchoolSearchSelect(){
    $("#orgboxSelect").html(getSchoolOptions());
    layuiObj.layuiForm.render("select","orgboxSelectForm");
    $("#orgboxSelect").siblings("div.layui-form-select").find("div.layui-select-title").find("input").attr("onfocus","this.select()");
    schoolSearchSelectChange();
}

//获取所有的设备
function  getSchoolOptions(){
    var options="<option value='000'>请选择学校</option>"
    var stationArr=[];
    for(var i=0;i<skynetIpcInfo.length;i++){
        var name=skynetIpcInfo[i]["station"];
        if(stationArr.indexOf(name)==-1){
            stationArr.push(name);
            options+=`<option value="${name}">${name}</option>`
        }
    }
	return options;
}

//监听select变化
function schoolSearchSelectChange(){
    layuiObj.layuiForm.on('select(orgboxSelect)', function(data){   
        var name=data["value"];
        if(name=="000"){
            $(".orgTree").css("display","block");
            $(".stationIpcList").css("display","none");
        }else{
            $(".orgTree").css("display","none");
            $(".stationIpcList").css("display","block");
            showSelectIpcList(name)
        }
    })
}

function showSelectIpcList(selectname){
    var p="";
    var index=1;
    for(var i=0;i<skynetIpcInfo.length;i++){
        var station=skynetIpcInfo[i]["station"];
       if(station==selectname){
            var pointCode=skynetIpcInfo[i]["pointCode"];
            p+=`<p pointCode='${pointCode}'><span>${index}</span><span>${skynetIpcInfo[i]["name"]}</span></p>`
            index++;
       }
    }
    $(".stationIpcList").html(p);
    addshowSelectIpcListEvent();
}

function addshowSelectIpcListEvent(){
    $(".stationIpcList>p").on('click',function(){
        var pointCode=$(this).attr("pointCode");
        var name=$(this).children("span:last-child").html();
        playStationIpc(pointCode);
    })
}

window.addEventListener('message', function(e) {
    var data=e.data
    var cmd=data["cmd"];
    var deviceid=data["deviceid"]
    if(cmd=="closePage"){
        deletePlayVideoList(deviceid);
        closeIpcVideoPage(deviceid);
    }
})

function closeIpcVideoPage(token){
   var vdiv=$(".videoPlay");
   for(var i=0;i<vdiv.length;i++){
        var thisDiv=vdiv[i];
        var deviceid=$(thisDiv).attr("deviceid");
        if(token==deviceid){
            $(thisDiv).parent().empty();
        }
   }
}

function getIframeUrl(token){
    var url=`${iframeVideoUrl}?token=${token}&autoplay=true`
    return `
     <iframe src='${url}' allowfullscreen="true"></iframe>
    `
}

function playStationIpc(token){
    var div=returnIpcPlayDiv(token);
    $(".statipnIpcSelect").html(div);
}

function returnIpcPlayDiv(token){
    addPlayVideoList(token);
    var name="";
    for(var i=0;i<skynetIpcInfo.length;i++){
        if(token==skynetIpcInfo[i]["pointCode"]){
            name=skynetIpcInfo[i]["name"];
            break;
        }
    }
    return `
        <div class="videoPlay" deviceid='${token}'>
            ${getIframeUrl(token)}
        </div>
        <div class="videoOpear">
            <span>${name}</span>
        </div>
    `
}

function layoutResetPlayIpc(list){
    playVideoList=[];
    for(let i=0;i<list.length;i++){
        var div=returnIpcPlayDiv(list[i])
        $(`.mainContentC>div:nth-child(${i+1})`).html(div);
    }
}

function addPlayVideoList(deviceid){
    if(playVideoList.indexOf(deviceid)==-1){
        playVideoList.push(deviceid);
    }
}

function deletePlayVideoList(deviceid){
    var index=playVideoList.indexOf(deviceid)
    if(index!=-1){
        playVideoList.splice(index,1);
    }
}

export {createSchoolTree,layoutResetPlayIpc,playVideoList}