skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
	<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>群众艺术馆设备监测</title>
<style type="text/css">
#demo {
	overflow: hidden;
	border: 0px dashed #CCC;
	width: 100%;
	height: 230px;
}

#demo img {
	border: 0px solid #F2F2F2;
}

#indemo {
	height: 300%;
}

#yibiao1 {
	width: 100%;
	height: 230px;
}
</style>
<link rel="stylesheet" href="plug-in/dataview/css/sensor_height.css">
<link rel="stylesheet" href="plug-in/dataview/css/progresscircle.css">
<script type="text/javascript"
	src="plug-in/dataview/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="plug-in/dataview/echarts4.min.js"></script>
<script type="text/javascript" src="plug-in/dataview/sensor_dianya.js"></script>
<script type="text/javascript" src="plug-in/dataview/infographic.js"></script>
<script type="text/javascript" src="plug-in/dataview/progresscircle.js"></script>
<script type="text/javascript">
         <!--
         $(window).resize(function ()// 绑定到窗口的这个事件中
         {
             var whdef = 100/916;// 表示1920的设计图,使用100PX的默认值
             var wH = window.innerHeight;// 当前窗口的高度
             var wW = window.innerWidth;// 当前窗口的宽度
             // var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
             var rem = wH * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
             $('html').css('font-size', rem + "px");
             //myChart1.resize();
             //myChart2.resize();
             //myChart3.resize();
						 // yibiao1.resize();
          // myChart4.resize();
         });
         //-->

        	

        		function requestFullScreen() {
        		    // 判断各种浏览器，找到正确的方法
        		    var element = document.documentElement;
        		    var requestMethod = element.requestFullScreen || //W3C
        		    element.webkitRequestFullScreen ||    //Chrome等
        		    element.mozRequestFullScreen || //FireFox
        		    element.msRequestFullScreen; //IE11
        		    if (requestMethod) {
        		        requestMethod.call(element);
        		    }
        		    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
        		        var wscript = new ActiveXObject("WScript.Shell");
        		        if (wscript !== null) {
        		            wscript.SendKeys("{F11}");
        		        }
        		    }
        		}

        		//退出全屏 判断浏览器种类
        		function exitFull() {
        		    // 判断各种浏览器，找到正确的方法
        		    var exitMethod = document.exitFullscreen || //W3C
        		    document.mozCancelFullScreen ||    //Chrome等
        		    document.webkitExitFullscreen || //FireFox
        		    document.webkitExitFullscreen; //IE11
        		    if (exitMethod) {
        		        exitMethod.call(document);
        		    }
        		    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
        		        var wscript = new ActiveXObject("WScript.Shell");
        		        if (wscript !== null) {
        		            wscript.SendKeys("{F11}");
        		        }
        		    }
        		}
     </script>
</head>

<body>

	<div class="container">
		<header>
			<div class="herder_bg"></div>
		</header>
		<article>
		
			<div class="wrap">
				<div class="wrap-left">
					<div class="left-top sun-div">
						<div class="sun-title">
							<span class="">电压监测</span>
						</div>
						<div class="left-top-ec">
							<!--<span>当天实时</span> <span>全局工作统计</span>-->
							<!--统计图一-->
							<div class="ec_line" id="ec_lefttop"></div>
	
						</div>
					</div>
					<div class="left-btm sun-div">
						<div class="sun-title">
							<span class="">电流监测</span>
						</div>
						<!-- <table class="ri-table">
										 	<tr ><td style="width: 40%;"><span style="color:#fda400;position: relative;">设备</span></td><td style="width: 30%;"><span style="color:#fda400">位置</span></td><td style="width: 30%;"><span style="color:#fda400">运行状态</span></td></tr>
										 	<tr><td>集水井1</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井2</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井3</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井4</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井5</td><td>停车场东侧</td><td style="color:red">超出上限</td></tr>
										 	<tr><td>集水井6</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井7</td><td>停车场东侧</td><td>正常</td></tr>
										 </table>-->
										 <div class="left-btm-ec">
							<div  class="ec_line" id="ec_leftbtm"></div>
							</div>
					</div>

				</div>
				<div class="wrap-right">
					<div class="right-top sun-div">
						<div class="sun-title">
							<span class="">电流监测</span>
						</div>
						<div class="left-top-ec">
						<div  class="ec_line" id="ec_righttop"></div></div>
					</div>
					<div class="right-btm">
						<div class="r-btm-left">
							<div class="sun-title">
								<span class="">电流监测</span>
							</div>
							<!--<div class="notice">
															<ul>
																	<li><b class="litext" title="集水井5水位超出上限">集水井5水位 57cm, 超出上限</b><span class="r">04-17 17:52</span></li>
																	<li><b class="litext" title="关于XX申请筹建幼儿园">集水井4水位 67cm, 超出上限</b><span class="r">04-17 17:56</span></li>
																	<li><b class="litext" title="关于XX申请筹建幼儿园">集水井5水位 57cm, 超出上限</b><span class="r">04-17 17:23</span></li>
																<li><b class="litext" title="关于XX申请筹建幼儿园">集水井5水位 57cm, 超出上限</b><span class="r">04-17 17:23</span></li>
															</ul>
													</div>-->
							<div class="left-btm-ec">
							<div  class="ec_line" id="ec_rightbtm"></div>
							</div>
						</div>
						
					</div>

				</div>
					
			</div>
			<!-- 	<div class="wrap-left">
					<div class="left-top sun-div">
						<div class="sun-title">
							<span class="">电压监测</span>
						</div>
						<div class="left-top-ec">
							<!--<span>当天实时</span> <span>全局工作统计</span>
					
							<div class="ec_line" id="ec_lefttop"></div>
	
						</div>
					</div>
					<div class="left-top sun-div">
						<div class="sun-title">
							<span class="">电流监测</span>
						</div>
						<table class="ri-table">
										 	<tr ><td style="width: 40%;"><span style="color:#fda400;position: relative;">设备</span></td><td style="width: 30%;"><span style="color:#fda400">位置</span></td><td style="width: 30%;"><span style="color:#fda400">运行状态</span></td></tr>
										 	<tr><td>集水井1</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井2</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井3</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井4</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井5</td><td>停车场东侧</td><td style="color:red">超出上限</td></tr>
										 	<tr><td>集水井6</td><td>停车场东侧</td><td>正常</td></tr>
										 	<tr><td>集水井7</td><td>停车场东侧</td><td>正常</td></tr>
										 </table>
										 <div class="left-top-ec">
							<div  class="ec_line" id="ec_leftbtm"></div>
							</div>
					</div>

				</div>
				
			</div>-->
			 <button class="btn" onclick="requestFullScreen()">@美都环卫物业</button>
		</article>
	</div>
	<script type="text/javascript">
      var ec_lefttop = echarts.init(document.getElementById('ec_lefttop'));
      var ec_leftbtm = echarts.init(document.getElementById('ec_leftbtm'));
      var ec_righttop = echarts.init(document.getElementById('ec_righttop'));
      var ec_rightbtm = echarts.init(document.getElementById('ec_rightbtm'));
     $(function () {
    	 setInterval(refreshLineChart, 5000);
     });
     
     function refreshLineChart(){
    	 $.ajax({
     		url:"dataviewController.do?getLiveData",
     		type:"post",
     		dataType:"json",
     		async:false,
     		success:function(result){
     			if(result!=null){
     				var d=result;
     				if(false == d.success){
     					layer.msg(d.msg);
     					return;
     				}
     				 var axisNewData =  echarts.format.formatTime('hh:mm:ss', new Date());
     		    	 var opt_ec_lefttop = ec_lefttop.getOption();
     		    	 opt_ec_lefttop.xAxis[0].data.shift();
     		    	 opt_ec_lefttop.xAxis[0].data.push(axisNewData);
     		    	 opt_ec_lefttop.series[0].data.shift();
     		    	 opt_ec_lefttop.series[0].data.push(d.attributes["plbdy"]);
     		    	 opt_ec_lefttop.series[1].data.shift();
     		    	 opt_ec_lefttop.series[1].data.push(d.attributes["xfbdy"]);
     		    	 opt_ec_lefttop.series[2].data.shift();
     		    	 opt_ec_lefttop.series[2].data.push(d.attributes["shsbdy"]);
     		    	 ec_lefttop.setOption(opt_ec_lefttop);
     		    	 
     		    	
     		    	 var opt_ec_righttop = ec_righttop.getOption();
     		    	opt_ec_righttop.xAxis[0].data.shift();
     		    	opt_ec_righttop.xAxis[0].data.push(axisNewData);
     		    	opt_ec_righttop.series[0].data.shift();
     		    	opt_ec_righttop.series[0].data.push(d.attributes["shsbdl"]);
     		    	opt_ec_righttop.series[1].data.shift();
     		    	opt_ec_righttop.series[1].data.push(d.attributes["plbdl"]);
     		    	opt_ec_righttop.series[2].data.shift();
     		    	opt_ec_righttop.series[2].data.push(d.attributes["xfbdl"]);
     		    	opt_ec_righttop.series[3].data.shift();
     		    	opt_ec_righttop.series[3].data.push(d.attributes["AUH-1F"]);
     		    	opt_ec_righttop.series[4].data.shift();
     		    	opt_ec_righttop.series[4].data.push(d.attributes["AUH-2F-4"]);
     		    	opt_ec_righttop.series[5].data.shift();
     		    	opt_ec_righttop.series[5].data.push(d.attributes["AUH-2F-2"]);
     		    	opt_ec_righttop.series[6].data.shift();
     		    	opt_ec_righttop.series[6].data.push(d.attributes["AUH-1F-1"]);
     		    	opt_ec_righttop.series[7].data.shift();
     		    	opt_ec_righttop.series[7].data.push(d.attributes["AUH-2F-3"]);
     		    	opt_ec_righttop.series[8].data.shift();
     		    	opt_ec_righttop.series[8].data.push(d.attributes["SF2F-1"]);
     		    	opt_ec_righttop.series[9].data.shift();
     		    	opt_ec_righttop.series[9].data.push(d.attributes["AUH-2F-1"]);
     		  	 ec_righttop.setOption(opt_ec_righttop);
     		    	
     		    	var opt_ec_leftbtm = ec_leftbtm.getOption();
     		    	opt_ec_leftbtm.xAxis[0].data.shift();
     		    	opt_ec_leftbtm.xAxis[0].data.push(axisNewData);
     		    	 opt_ec_leftbtm.series[0].data.shift();
     		    	 opt_ec_leftbtm.series[0].data.push(d.attributes["FAU-3F-2"]);
     		    	 opt_ec_leftbtm.series[1].data.shift();
     		    	 opt_ec_leftbtm.series[1].data.push(d.attributes["EF-3F-1"]);
     		    	 opt_ec_leftbtm.series[2].data.shift();
     		    	 opt_ec_leftbtm.series[2].data.push(d.attributes["EF-3F-2"]);
     		      	 opt_ec_leftbtm.series[3].data.shift();
     		    	 opt_ec_leftbtm.series[3].data.push(d.attributes["AHU-4F-2"]);
     		    	 opt_ec_leftbtm.series[4].data.shift();
     		    	 opt_ec_leftbtm.series[4].data.push(d.attributes["FAU-4F-2"]);
     		    	 opt_ec_leftbtm.series[5].data.shift();
     		    	 opt_ec_leftbtm.series[5].data.push(d.attributes["AUH-3F-1"]);
     		     	 opt_ec_leftbtm.series[6].data.shift();
     		    	 opt_ec_leftbtm.series[6].data.push(d.attributes["AHU-4F-1"]);
     		    	 opt_ec_leftbtm.series[7].data.shift();
     		    	 opt_ec_leftbtm.series[7].data.push(d.attributes["FAU-4F-1"]);
     		      	 opt_ec_leftbtm.series[8].data.shift();
     		    	 opt_ec_leftbtm.series[8].data.push(d.attributes["SF-3F-1"]);
     		    	 opt_ec_leftbtm.series[9].data.shift();
     		    	 opt_ec_leftbtm.series[9].data.push(d.attributes["FAU-3F-1"]);
 
     		    	 ec_leftbtm.setOption(opt_ec_leftbtm);
     		    	 
     		    	 var opt_ec_rightbtm = ec_rightbtm.getOption();
     		    	 opt_ec_rightbtm.xAxis[0].data.shift();
     		    	 opt_ec_rightbtm.xAxis[0].data.push(axisNewData);
     		    	 opt_ec_rightbtm.series[0].data.shift();
     		    	 opt_ec_rightbtm.series[0].data.push(d.attributes["AUH-BF-1-1"]);
     		    	 opt_ec_rightbtm.series[1].data.shift();
     		    	 opt_ec_rightbtm.series[1].data.push(d.attributes["FAU-BF-1-1"]);
     		    	 opt_ec_rightbtm.series[2].data.shift();
     		    	 opt_ec_rightbtm.series[2].data.push(d.attributes["AUH-BF-1-2"]);
     		      	 opt_ec_rightbtm.series[3].data.shift();
     		    	 opt_ec_rightbtm.series[3].data.push(d.attributes["FAU-BF-1-2"]);
     		    	 opt_ec_rightbtm.series[4].data.shift();
     		    	 opt_ec_rightbtm.series[4].data.push(d.attributes["CHP-1-1"]);
     		    	 opt_ec_rightbtm.series[5].data.shift();
     		    	 opt_ec_rightbtm.series[5].data.push(d.attributes["CHP-1-2"]);
     		    	 opt_ec_rightbtm.series[6].data.shift();
     		    	 opt_ec_rightbtm.series[6].data.push(d.attributes["CHP-1-3"]);
     		    	 opt_ec_rightbtm.series[7].data.shift();
     		    	 opt_ec_rightbtm.series[7].data.push(d.attributes["CHP-1-4"]);
     		    	 opt_ec_rightbtm.series[8].data.shift();
     		    	 opt_ec_rightbtm.series[8].data.push(d.attributes["CHP-1-5"]);
     		   
     		    	 ec_rightbtm.setOption(opt_ec_rightbtm);
     		    	
     			}
     		}
     	 });
    	 
     }
  
 </script>
</body>
</html>