skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<%@ 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_yali.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">

         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>
		</article>
			 <button class="btn" onclick="requestFullScreen()">@美都环卫物业</button>
	</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["xfbyl1"]);
       	    	 ec_lefttop.setOption(opt_ec_lefttop);
       	    	 
       	    	//生活水泵
       	    	 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["shsbyl1"]);
       	    	 opt_ec_leftbtm.series[1].data.shift();
       	    	 opt_ec_leftbtm.series[1].data.push(d.attributes["shsbyl2"]);
       	    	 opt_ec_leftbtm.series[2].data.shift();
       	    	 opt_ec_leftbtm.series[2].data.push(d.attributes["shsbyl3"]);
       	    	
       	    	 ec_leftbtm.setOption(opt_ec_leftbtm);
       	    	 //消防备泵
       	    	 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["xfbyl2"]);
       	    	
       	    	 ec_righttop.setOption(opt_ec_righttop);
       	    	 
       	    	 //空调补水器压力
       	    	 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["ktbsqyl"]);
       	    	
       	    	 ec_rightbtm.setOption(opt_ec_rightbtm);
       			}
       		}
    	 });
     }
  
 </script>
</body>
</html>