$(function(){
|
var videoJson = [], attr_dir = [], dataShow = [], time = 350;
|
var contentHeight = $(".video_boxs").height() + "px";
|
var contentWidth = $(".video_boxs").width() + "px";
|
|
$("#selectBtn").change(function(){
|
var _indexSel =this.options[this.options.selectedIndex].value;
|
var len = $(".video_boxs .video-con").length;
|
var count = 1;
|
dataShow = [];
|
if(len == 1){
|
$(".video_boxs .video-con").each(function(){
|
var ht = $(this).attr("data-h");
|
var fSrc = $(this).find("iframe").attr("src");
|
if(ht) dataShow.push({"name":ht, "videoUrl":fSrc});
|
});
|
if(_indexSel == 1) count = 0;
|
if(_indexSel == 2) count = 4;
|
if(_indexSel == 3) count = 9;
|
for(var i=1; i<count; i++){
|
dataShow.push({"name":"", "videoUrl":""});
|
}
|
|
}else if(len == 4){
|
if(_indexSel == 1){
|
var ht = $(".video_boxs .video-con").eq(0).attr("data-h");
|
var fSrc = $(".video_boxs .video-con").eq(0).find("iframe").attr("src");
|
dataShow.push({"name":ht, "videoUrl":fSrc});
|
};
|
if(_indexSel == 2){
|
$(".video_boxs .video-con").each(function(){
|
var ht = $(this).attr("data-h");
|
var fSrc = $(this).find("iframe").attr("src");
|
if(ht){
|
dataShow.push({"name":ht, "videoUrl":fSrc});
|
}else{
|
dataShow.push({"name":"", "videoUrl":""});
|
}
|
});
|
};
|
if(_indexSel == 3){
|
$(".video_boxs .video-con").each(function(){
|
var ht = $(this).attr("data-h");
|
var fSrc = $(this).find("iframe").attr("src");
|
if(ht){
|
dataShow.push({"name":ht, "videoUrl":fSrc});
|
}else{
|
dataShow.push({"name":"", "videoUrl":""});
|
}
|
});
|
for(var i=1; i<6; i++){
|
dataShow.push({"name":"", "videoUrl":""});
|
}
|
};
|
}else if(len == 9){
|
if(_indexSel == 1){
|
var ht = $(".video_boxs .video-con").eq(0).attr("data-h");
|
var fSrc = $(".video_boxs .video-con").eq(0).find("iframe").attr("src");
|
dataShow.push({"name":ht, "videoUrl":fSrc});
|
};
|
if(_indexSel == 2){
|
$(".video_boxs .video-con").each(function(){
|
var ht = $(this).attr("data-h");
|
var fSrc = $(this).find("iframe").attr("src");
|
if($(this).index() < 4){
|
if(ht){
|
dataShow.push({"name":ht, "videoUrl":fSrc});
|
}else{
|
dataShow.push({"name":"", "videoUrl":""});
|
}
|
}
|
});
|
};
|
if(_indexSel == 3){
|
$(".video_boxs .video-con").each(function(){
|
var ht = $(this).attr("data-h");
|
var fSrc = $(this).find("iframe").attr("src");
|
if(ht){
|
dataShow.push({"name":ht, "videoUrl":fSrc});
|
}else{
|
dataShow.push({"name":"", "videoUrl":""});
|
}
|
});
|
};
|
}
|
console.log(dataShow);
|
videoFormat(_indexSel);
|
})
|
$.ajax({
|
url: getNativePath() + "station/findfindStationTreeByWlpnm.do",
|
type: "get",
|
data:{"stnmVideoType":"2"},
|
dataType: "json",
|
success: function(data) {
|
stationMenu(data.data);
|
}
|
});
|
|
|
function stationMenu(data){
|
var html = "", _indexi = 0;
|
videoJson = [];
|
var newArr = [];
|
for(var i in data) {
|
var stHtml = "";
|
var index = 0;
|
for(var z in data[i]) {
|
var stnmHtml = "";
|
for(var x in data[i][z]) {
|
var e = data[i][z][x];
|
if(e.type) {
|
var Url = 'player.html?url=' + e.videoUrl;
|
} else {
|
var Url = e.videoUrl;
|
}
|
if(i === '监测监控实验站') {
|
newArr.push({
|
"name": e.videoName,
|
"videoUrl": Url,
|
})
|
} else {
|
videoJson.push({
|
"name": e.videoName,
|
"videoUrl": Url,
|
});
|
}
|
if(_indexi === 0 && index === 0) {
|
stnmHtml += '<h5 class="on" data-id="videobox' + _indexi + '" data-url="' + Url + '">' + e.videoName + '</h5>';
|
} else {
|
stnmHtml += '<h5 data-id="videobox' + _indexi + '" data-url="' + Url + '">' + e.videoName + '</h5>';
|
}
|
_indexi++;
|
}
|
if(index === 0) {
|
stHtml += '<h4 class="on">' + z + '</h4><div style="display:block">' + stnmHtml + '</div>';
|
} else {
|
stHtml += '<h4>' + z + '</h4><div>' + stnmHtml + '</div>';
|
}
|
index++;
|
}
|
if(i === '监测监控实验站') {
|
var fHtml = '<h3>' + i + '</h3><div class="part-box">' + stHtml + '</div>';
|
} else {
|
html += '<h3>' + i + '</h3><div class="part-box">' + stHtml + '</div>';
|
}
|
}
|
videoJson = newArr.concat(videoJson);
|
html = fHtml += html;
|
// for(var i=0; i<data.length; i++){
|
// var stHtml = "";
|
// for(var j=0; j<data[i].children.length; j++){
|
// if(data[i].children[j].name ){//!= "玉田湖国家湿地公园"
|
// if(!data[i].children[j].children){
|
// console.log(data[i].children[j])
|
// videoJson.push({
|
// "name":data[i].children[j].name,
|
// "videoUrl":data[i].children[j].videoUrl
|
// });
|
// if(i == 0 && j == 0){
|
// stHtml += '<h4 data-id="videobox'+_indexi+'" data-url="'+data[i].children[j].videoUrl+'" class="on">'+data[i].children[j].name+'</h4>';
|
// }else{
|
// stHtml += '<h4 data-id="videobox'+_indexi+'" data-url="'+data[i].children[j].videoUrl+'">'+data[i].children[j].name+'</h4>';
|
// }
|
// _indexi++;
|
// } else {
|
// var stnmHtml = "";
|
// for(var k=0; k<data[i].children[j].children.length; k++){
|
// var ddData = data[i].children[j].children[k];
|
// if(ddData.children){
|
// console.log(ddData.children)
|
// var stnmHtmlChil = "";
|
// for(var s=0; s<ddData.children.length; s++){
|
// videoJson.push({
|
// "name":ddData.children[s].text,
|
// "videoUrl":ddData.children[s].videoUrl
|
// });
|
// if(i == 0 && j == 0 && k == 0 && s == 0){
|
// stnmHtmlChil += '<li class="on" data-id="videobox'+_indexi+'" data-url="'+ddData.children[s].videoUrl+'">'+ddData.children[s].videoName+'</li>';
|
// }else{
|
// stnmHtmlChil += '<li data-id="videobox'+_indexi+'" data-url="'+ddData.children[s].videoUrl+'">'+ddData.children[s].videoName+'</li>';
|
// }
|
// _indexi++;
|
// }
|
// if(i == 0 && j == 0 && k==0){
|
// stnmHtml += '<h5 class="on">'+ddData.text+'</h5>'+
|
// '<ul style="display:block">'+stnmHtmlChil+'</ul>';
|
// }else{
|
// stnmHtml += '<h5>'+ddData.text+'</h5>'+
|
// '<ul>'+stnmHtmlChil+'</ul>';
|
// }
|
// }else{
|
// console.log(ddData)
|
// videoJson.push({
|
// "name":ddData.text,
|
// "videoUrl":ddData.videoUrl
|
// });
|
//
|
// if(i == 0 && j == 0 && k==0){
|
// stnmHtml += '<h5 class="on" data-id="videobox'+_indexi+'" data-url="'+ddData.videoUrl+'">'+ddData.text+'</h5>';
|
// }else{
|
// stnmHtml += '<h5 data-id="videobox'+_indexi+'" data-url="'+ddData.videoUrl+'">'+ddData.text+'</h5>';
|
// }
|
// _indexi++;
|
// }
|
// }
|
// if(i == 0 && j == 0){
|
// stHtml += '<h4 class="on">'+data[i].children[j].name+'</h4>'+
|
// '<div style="display:block">'+stnmHtml+'</div>';
|
// }else{
|
// stHtml += '<h4>'+data[i].children[j].name+'</h4>'+
|
// '<div>'+stnmHtml+'</div>';
|
// }
|
// }
|
// }
|
// }
|
// if(data[i].name != "自然保护区"){
|
// if(i == 0){
|
// html += '<h3>'+data[i].name+'</h3>'+
|
// '<div class="part-box" style="display:block">'+stHtml+'</div>';
|
// }else{
|
// html += '<h3>'+data[i].name+'</h3>'+
|
// '<div class="part-box">'+stHtml+'</div>';
|
// }
|
// }
|
//
|
// }
|
$(".left_dir").html(html);
|
$(".left_dir").mCustomScrollbar("destroy"); //清除滚动条
|
setTimeout(function() {$(".left_dir").mCustomScrollbar();}, time);
|
dataShow.push(videoJson[0]);
|
videoFormat(1);
|
stationAction();
|
};
|
|
function videoFormat(num){
|
var nums = num*num, Str1 = "";
|
if(num == 1){ //1X1
|
$(".video_boxs").html('<div class="video-con" data-h=""><iframe scrolling="no" frameborder=0 src=""></iframe></div>');
|
$(".video-con").css({"width":"100%", "height":"100%", "margin-top":"0px", "margin-left":"0px", "margin-bottom":"0px"});
|
}else if(num == 2){ //2X2
|
for(var i=0; i<4; i++){
|
if(i == 0){
|
Str1 += '<div class="video-con on" data-h=""><div class="videoBg"></div><iframe scrolling="no" frameborder=0 src=""></iframe></div>';
|
}else{
|
Str1 += '<div class="video-con" data-h=""><div class="videoBg"></div><iframe scrolling="no" frameborder=0 src=""></iframe></div>';
|
}
|
}
|
$(".video_boxs").html(Str1);
|
$(".video-con").css({"width":"calc(50% - 6px)", "height":"calc(50% - 6px)", "margin-top":"3px", "margin-left":"3px"});
|
}else if(num ==3){ //3X3
|
for(var i=0; i<9; i++){
|
if(i == 0){
|
Str1 += '<div class="video-con on" data-h=""><div class="videoBg"></div><iframe scrolling="no" frameborder=0 src=""></iframe></div>';
|
}else{
|
Str1 += '<div class="video-con" data-h=""><div class="videoBg"></div><iframe scrolling="no" frameborder=0 src=""></iframe></div>';
|
}
|
}
|
$(".video_boxs").html(Str1);
|
$(".video-con").css({"width":"33.33%", "height":"33.33%"});
|
$(".video-con").css({"width":"calc(33.33% - 6px)", "height":"calc(33.33% - 6px)", "margin-left":"4px", "margin-top":"4px", "margin-bottom":"0px"});
|
}
|
$(".video_boxs .video-con").click(function(){
|
$(".video-con").removeClass("on");
|
$(this).addClass("on");
|
});
|
stationVideo();
|
|
|
}
|
|
function stationVideo(){
|
var len = $(".video_boxs .video-con").length;
|
if(len == 1){
|
$(".video_boxs .video-con").attr("data-h", dataShow[0].name);
|
$(".video_boxs .video-con").find("iframe").attr("src", dataShow[0].videoUrl);
|
}else if(len == 4){
|
for(var k=0; k<len; k++){
|
if(dataShow[k].name){
|
$(".video_boxs .video-con").eq(k).attr("data-h", dataShow[k].name);
|
$(".video_boxs .video-con").find("iframe").attr("src", dataShow[k].videoUrl);
|
}
|
}
|
}else if(len == 9){
|
for(var k=0; k<len; k++){
|
if(dataShow[k].name){
|
$(".video_boxs .video-con").eq(k).attr("data-h", dataShow[k].name);
|
$(".video_boxs .video-con").find("iframe").attr("src", dataShow[k].videoUrl);
|
}
|
}
|
}
|
$(".left_dir .part-box h4").each(function(){
|
if($(this).html() == dataShow[0].name){
|
$(".left_dir .part-box ul li").removeClass('on');
|
$(".left_dir .part-box h4").removeClass("on");
|
$(".left_dir .part-box h5").removeClass("on");
|
$(this).parent().slideDown();
|
$(this).parent().siblings('div').slideUp().find('div').slideUp();
|
$(this).addClass('on').next('div').slideToggle().siblings('div').slideUp();
|
setTimeout(function(){$(".left_dir").mCustomScrollbar("update");}, time);
|
}
|
});
|
|
$(".left_dir .part-box h5").each(function(){
|
if($(this).html() == dataShow[0].name){
|
$(".left_dir .part-box ul li").removeClass('on');
|
$(".left_dir .part-box h4").removeClass("on");
|
$(".left_dir .part-box h5").removeClass("on");
|
$(this).parents().slideDown().prev().addClass("on");
|
$(this).parent().parent().slideDown().prev().addClass("on");
|
$(this).parent().parent().siblings('div').slideUp();
|
$(this).addClass('on').next('ul').slideToggle().parents().siblings('div').find("ul").slideUp();
|
setTimeout(function(){$(".left_dir").mCustomScrollbar("update");}, time);
|
}
|
});
|
|
$(".left_dir .part-box ul li").each(function(){
|
if($(this).html() == dataShow[0].name){
|
$(".left_dir .part-box ul li").removeClass("on");
|
$(".left_dir .part-box h4").removeClass("on");
|
$(".left_dir .part-box h5").removeClass("on");
|
$(this).parent().slideDown().prev().addClass("on");
|
$(this).parent().parent().slideDown().prev().addClass("on");
|
$(this).parent().parent().parent().slideDown().siblings('div').slideUp();
|
$(this).addClass("on");
|
setTimeout(function(){$(".left_dir").mCustomScrollbar("update");}, time);
|
}
|
});
|
}
|
|
function stationUrl(videoUrl, videoHtml){
|
var len = $(".video_boxs .video-con").length;
|
var lens = dataShow.length;
|
for(var i=0; i<dataShow.length; i++){
|
if(dataShow[i].name == videoHtml){
|
return false;
|
}
|
}
|
if(len == 1){
|
dataShow = [];
|
$(".video_boxs .video-con").attr("data-h", videoHtml);
|
$(".video_boxs .video-con iframe").attr("src", videoUrl);
|
dataShow.push({"name":videoHtml, "videoUrl":videoUrl});
|
}else if(len == 4){
|
$(".video_boxs .video-con").each(function(){
|
if($(this).hasClass('on')){
|
$(".video_boxs .video-con").eq($(this).index()).attr("data-h", videoHtml);
|
$(".video_boxs .video-con").eq($(this).index()).find("iframe").attr("src", videoUrl);
|
dataShow[$(this).index()].name = videoHtml;
|
dataShow[$(this).index()].videoUrl = videoUrl;
|
}
|
});
|
}else if(len == 9){
|
$(".video_boxs .video-con").each(function(){
|
if($(this).hasClass('on')){
|
$(".video_boxs .video-con").eq($(this).index()).attr("data-h", videoHtml);
|
$(".video_boxs .video-con").eq($(this).index()).find("iframe").attr("src", videoUrl);
|
dataShow[$(this).index()].name = videoHtml;
|
dataShow[$(this).index()].videoUrl = videoUrl;
|
}
|
});
|
}
|
}
|
|
function stationAction(){
|
$(".left_dir h3").unbind().click(function(){
|
$(this).next('.part-box').slideToggle().siblings('.part-box').slideUp();
|
$(this).siblings('.part-box').find("ul").hide();
|
setTimeout(function(){$(".left_dir").mCustomScrollbar("update");}, time);
|
});
|
|
$(".left_dir .part-box h4").unbind().click(function(){
|
var videoUrl = $(this).attr("data-url");
|
if(videoUrl){
|
$(".left_dir .part-box ul li").removeClass('on');
|
var videoHtml = $(this).html();;
|
stationUrl(videoUrl, videoHtml);
|
}
|
$(".left_dir .part-box h4").removeClass("on");
|
$(this).addClass('on').next('div').slideToggle().siblings('div').slideUp();
|
setTimeout(function(){$(".left_dir").mCustomScrollbar("update");}, time);
|
});
|
|
$(".left_dir .part-box h5").unbind().click(function(){
|
var videoUrl = $(this).attr("data-url");
|
if(videoUrl){
|
$(".left_dir .part-box ul li").removeClass('on');
|
var videoHtml = $(this).html();;
|
stationUrl(videoUrl, videoHtml);
|
}
|
$(".left_dir .part-box h5").removeClass("on");
|
$(this).addClass('on').next('ul').slideToggle().parents().siblings('div').find("ul").slideUp();
|
setTimeout(function(){$(".left_dir").mCustomScrollbar("update");}, time);
|
})
|
|
$(".left_dir .part-box ul li").unbind().click(function(){
|
var videoUrl = $(this).attr("data-url");
|
$(".left_dir .part-box ul li").removeClass("on");
|
$(this).addClass("on");
|
if(videoUrl){
|
var videoHtml = $(this).html();
|
stationUrl(videoUrl, videoHtml);
|
}
|
|
|
});
|
}
|
|
function uniq(array){
|
var temp = [];
|
var index = [];
|
var l = array.length;
|
for(var i = 0; i < l; i++) {
|
for(var j = i + 1; j < l; j++){
|
if (array[i] === array[j]){
|
i++;
|
j = i;
|
}
|
}
|
temp.push(array[i]);
|
index.push(i);
|
}
|
return temp;
|
}
|
});
|
