hanzhengyi
/
wxapp2


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
							<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<style type="text/css">
	body {background-color: #f1f0f5;}
	table,tr,td,th {border: 0px; color: #6e6e6e; font-size: 14px; margin: 0px; padding:0px; border-spacing:0px; border-style:none; border-collapse:collapse;}
	p {margin: 20px auto 20px auto;text-align: center;}
	video {margin: 20px;text-align: center;}
	.timenum {color: #1993c7; font-size: 24px;}
	.ui-content {margin: 0px; padding: 0px; background-color: #ffffff; }
	.gray { 
	    -webkit-filter: grayscale(100%);
	    -moz-filter: grayscale(100%);
	    -ms-filter: grayscale(100%);
	    -o-filter: grayscale(100%);
	    filter: grayscale(100%);
	    filter: gray;
	    opacity:0.7;//通过改变透明度来调节灰色的程度
	}
	a {text-decoration:none;}

</style>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
	var arr={$arr1|json_encode=true};
	var companyid={$companyid};
	
	
	var vidoeStore;
	var count = 0, reCount=0;
	var removeDIV=function(id){
		var obj = document.getElementById(id);
		var parent = obj.parentNode;
		parent.removeChild(obj);
	}
	var getNow = function(s){
		return s<10?('0'+s):s;
	}
	var gettime = function(){
		var myDate = new Date();
		var year = myDate.getFullYear();
		var month = myDate.getMonth()+1;
		var date = myDate.getDate();
		var hour = myDate.getHours();
		var min = myDate.getMinutes();
		var sec = myDate.getSeconds();
		return (year+'-'+getNow(month)+'-'+getNow(date)+' '+getNow(hour)+':'+getNow(min)+':'+getNow(sec));
	}

	var open_video = function(id){
		if($("#openid").val()!=id)
			$("#openid").val(id);
		for(var n=0;n<vidoeStore.RESULT.LIST.length;n++){
			if(vidoeStore.RESULT.LIST[n].DEVICE==$("#openid").val()){
				if(vidoeStore.RESULT.LIST[n].ONAIR){
                    window.location="https://qhome.usky.cn/video2.html?device="+id+"&companyid="+companyid;
					return;
				}
			}
		}
		count = 0;
		reCount = 0;
		var mask = document.getElementById('videomask');
		if(mask==undefined){
			var mwidth = $(window).width();
			var mheight = $(window).height();
			mask = document.createElement('div');
			mask.id = 'videomask';
			mask.style.position = 'absolute';
			mask.style.top = '0px';
			mask.style.left = '0px';
			mask.style.width = $(window).width()+'px';
			mask.style.height = $(window).height()+'px';
			mask.style.backgroundColor = 'rgba(0,0,0,0.3)';
			document.getElementById("pagethree").appendChild(mask);
			var note = document.createElement('div');
			note.style.textAlign='center';
			note.style.margin = '300px '+((mwidth-60)/2)+'px 0px '+((mwidth-60)/2)+'px';
			note.innerHTML='Loading...';
			mask.appendChild(note);
		}
		var d = {
			CMD:3,
			BODY:{
				DEVICE:id,
				ACTION:1,
				IDX:7
			}
		}
		$.ajax({
			url:"https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi",
			type:'POST',
			data: 'queryJson:'+JSON.stringify(d),
			success:function(result){
				setTimeout(chk_video,5000);
			}
		})
	}
	var chk_video = function(){
		var d = {
			CMD:1
		}
		if($("#openid").val().length==0)
			$("#videoinfobody").html("<p> Loading... </p>");
		$.ajax({
			url:"https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi",
			type:'POST',
			data: 'queryJson:'+JSON.stringify(d),
			success:function(result){
				var json = eval('(' + result + ')');
				vidoeStore = json;
				//alert(vidoeStore);
				if($("#openid").val().length>0){
					for(var n=0;n<json.RESULT.LIST.length;n++){
						if($("#openid").val()==json.RESULT.LIST[n].DEVICE){
							reCount++;
							if(json.RESULT.LIST[n].ONAIR){
								if((++count)>2){
									var mask = document.getElementById('videomask');
									if(mask!=undefined){
										removeDIV('videomask');
									}
									window.location="https://qhome.usky.cn/video2.html?device="+json.RESULT.LIST[n].DEVICE+"&companyid="+companyid;
								}else{
									setTimeout(chk_video,5000);
								}
							}else{
								setTimeout(chk_video,5000);
							}
							if(reCount>5){
								var mask = document.getElementById('videomask');
								if(mask!=undefined){
									removeDIV('videomask');
								}
								$("#myPopup").popup("open");
							}
							break;
						}
					}
				}else{
					var header = $(".ui-header");
				    var footer = $(".ui-footer");
				    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
				    var viewport_height = $(window).height();
				    var content_height = viewport_height - header.outerHeight() - footer.outerHeight()-contentCurrent;
					$("#videoinfobody").html("");
				    $("#videoinfobody").css({
				    	"padding":'0px',
				    	"margin":'0px',
				    	"height":(content_height+"px"),
				    	"overflow-y":"auto",
				    	"overflow-x":"none"
				    });
				    var div = document.getElementById("videoinfobody");
				    var table3 = document.createElement("table");
					table3.width='100%';
					table3.style.borderTop = '5px solid #c8c8c8';
					table3.style.borderBottom = '1px solid #c8c8c8';
					div.appendChild(table3);
					var table6 = document.createElement("table");
					table6.border='0';
					table6.cellspacing='0';
					table6.cellpadding='0';
					table6.style.margin='10px 10px 30px 10px';
					table6.style.width= ($(window).width()-20)+'px';
					table6.style.border='1px solid #dadada';
					table6.style.color="#000000";
					div.appendChild(table6);
					var tr8 = document.createElement("tr");
					tr8.style.border='1px solid #dadada';
					tr8.style.height='36px';
					tr8.style.backgroundColor='#dadada';
					table6.appendChild(tr8);
					var td24 = document.createElement("th");
					tr8.appendChild(td24);
					var td25 = document.createElement("th");
					td25.innerHTML="设备编号";
					tr8.appendChild(td25);
					var td26 = document.createElement("th");
					td26.innerHTML="在线状态";
					tr8.appendChild(td26);
					var td27 = document.createElement("th");
					td27.innerHTML="操作";
					tr8.appendChild(td27);
					var num = 0;
					for(var n=0;n<json.RESULT.LIST.length;n++){
						var online = (json.RESULT.LIST[n].ALIVEVALUE==3)?true:false;
						for(var i=0;i<arr.length;i++){
							//alert(json.RESULT.LIST[n].DEVICE);
							//alert(arr[i]);
							if(json.RESULT.LIST[n].DEVICE==arr[i]){
								var trr = document.createElement("tr");
								trr.style.border='1px solid #dadada';
								trr.style.height='36px';
								table6.appendChild(trr);
								var tdd1 = document.createElement("th");
								tdd1.innerHTML=(i+1);
								trr.appendChild(tdd1);
								var tdd2 = document.createElement("td");
								tdd2.innerHTML=json.RESULT.LIST[n].DEVICE;
								trr.appendChild(tdd2);
								var tdd3 = document.createElement("td");
								tdd3.style.textAlign='center';
								if(online)
									tdd3.innerHTML='<span style="color:#00bf95">在线</span>';
								else
									tdd3.innerHTML='<span style="color:#ff6d00">离线</span>';
								trr.appendChild(tdd3);
								var tdd4 = document.createElement("td");
								tdd4.style.textAlign='center';
								trr.appendChild(tdd4);
								var todo = document.createElement("div");
								todo.style.width='24px';
								todo.style.height='24px';
								todo.style.margin='0px auto 0px auto';
								todo.style.backgroundImage='url(__PUBLIC__/wxapp/images/video-x.png)';
								if(!online)
									todo.setAttribute('class','gray');
								else{
									todo.setAttribute('onclick','open_video("'+json.RESULT.LIST[n].DEVICE+'")');
									num++;
								}
								tdd4.appendChild(todo);
							}
							
							
						}
						
						
					}
					if(json.RESULT.LIST.length>0){
						var tmp = (num*100/json.RESULT.LIST.length);
						$("#video_online").html('在线率：'+((tmp>80)?('<span style="color:#00bf95">'+tmp.toFixed(2)+'%</span>')
							:('<span style="color:#ff6d00">'+tmp.toFixed(2)+'%</span>')));
					}
				}
			}
		})
	}
	var resizebody = function(){
	    scroll(0, 0);
	    var header = $(".ui-header");
	    var footer = $(".ui-footer");
	    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
	    var viewport_height = $(window).height();
	    var headerHeight = header.outerHeight();
	    var footerHeight = footer.outerHeight();
	    if(headerHeight!=undefined)
	    	$("#headerHeight").val(headerHeight);
	    if(footerHeight!=undefined)
	    	$("#footerHeight").val(footerHeight);
	    var content_height = viewport_height - $("#headerHeight").val() - $("#footerHeight").val() -contentCurrent;
	    $(".ui-content").height(content_height);
    };
	var chkinfo = function(){
		chk_video();
		resizebody();
	};
	$(document).ready(function(){
		$(window).bind("orientationchange resize load", resizebody);
	});
</script>
<title>永天云服务器</title>
</head>
<body onload="chkinfo()">

<div data-role="page" id="pagethree">
  <div data-role="header" data-theme="b">
	<a href="__MODULE__/index/index{$tokenurl}/companyid/{$companyid}" class="ui-btn ui-btn-left ui-icon-back ui-btn-icon-left" data-ajax="false">返回</a>
    <h1>视频监测</h1>
	<a href="#" class="ui-btn ui-icon-refresh ui-btn-icon-notext ui-btn-right" onclick="chk_video()">刷新</a>
  </div>

  <div id="videoinfo" data-role="content" class="ui-content">
  	<div id="videoinfobody">

	</div>
    <div data-role="popup" id="myPopup">
    <a href="#pagethree" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
      <p>远程摄像头连接超时，请稍后再试</p>
    </div>
  </div>
</div>
<input id='openid' name='openid' type='hidden' value=''/>
<input type="hidden" id="headerHeight" name="headerHeight" value="44">
<input type="hidden" id="footerHeight" name="footerHeight" value="58">
</body>
</html>