302 lines
9.4 KiB
JavaScript
302 lines
9.4 KiB
JavaScript
|
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}
|