skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<%@ 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_height.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();
         });
         //-->
     </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_dixiacheku"></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_fengjifang"></div>
							</div>
					</div>

				</div>
				<div class="wrap-right">
					<div class="right-top">
						<div class="sun-title">
							<span class="">泵房液位监测</span>
						</div>
							<div class="left_btm_ec">
							<div class="ec_line_right" id="ec_bengfangjishuijing"></div>
							</div>
					</div>
					<div class="right-btm">
						<div class="r-btm-left">
							<div class="sun-title">
								<span class="">污水井液位监测</span>
							</div>
							<div class="left-btm-ec">
							<div  class="ec_line" id="ec_wushuijing"></div>
							</div>
						</div>
						
					</div>

				</div>
			</div>
		</article>
			 <button class="btn" onclick="requestFullScreen()">@美都环卫物业</button>
	</div>
	<script type="text/javascript">
      var ec_dixiacheku = echarts.init(document.getElementById('ec_dixiacheku'));
      var ec_fengjifang = echarts.init(document.getElementById('ec_fengjifang'));
      //var ec_bengfangshuixiang = echarts.init(document.getElementById('ec_bengfangshuixiang'));
      var ec_bengfangjishuijing = echarts.init(document.getElementById('ec_bengfangjishuijing'));
      var ec_wushuijing = echarts.init(document.getElementById('ec_wushuijing'));
     $(function () {
    	 setInterval(refreshLineChart, 5000);
     });

		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}");
		        }
		    }
		}
     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_dixiacheku = ec_dixiacheku.getOption();
			    	 opt_dixiacheku.xAxis[0].data.shift();
			    	 opt_dixiacheku.xAxis[0].data.push(axisNewData);
			    	 opt_dixiacheku.series[0].data.shift();
			    	 opt_dixiacheku.series[0].data.push(d.attributes["jsj2"]);
			    	 opt_dixiacheku.series[1].data.shift();
			    	 opt_dixiacheku.series[1].data.push(d.attributes["jsj3"]);
			    	 opt_dixiacheku.series[2].data.shift();
			    	 opt_dixiacheku.series[2].data.push(d.attributes["jsj4"]);
			    	 opt_dixiacheku.series[3].data.shift();
			    	 opt_dixiacheku.series[3].data.push(d.attributes["jsj5"]);
			    	 opt_dixiacheku.series[4].data.shift();
			    	 opt_dixiacheku.series[4].data.push(d.attributes["jsj6"]);
			    	 ec_dixiacheku.setOption(opt_dixiacheku);
			    	 
			    	
			    //	 var opt_ec_bengfangshuixiang = ec_bengfangshuixiang.getOption();
			    //	 opt_ec_bengfangshuixiang.xAxis[0].data.shift();
			    //	 opt_ec_bengfangshuixiang.xAxis[0].data.push(axisNewData);
			    //	 opt_ec_bengfangshuixiang.series[0].data.shift();
			    //	 opt_ec_bengfangshuixiang.series[0].data.push(d.attributes["bfsx"]);
			    	
			    //	 ec_bengfangshuixiang.setOption(opt_ec_bengfangshuixiang);
			    	 
			    	 var opt_ec_fengjifang = ec_fengjifang.getOption();
			    	 opt_ec_fengjifang.xAxis[0].data.shift();
			    	 opt_ec_fengjifang.xAxis[0].data.push(axisNewData);
			    	 opt_ec_fengjifang.series[0].data.shift();
			    	 opt_ec_fengjifang.series[0].data.push(d.attributes["jsj8"]);
			    	
			    	 ec_fengjifang.setOption(opt_ec_fengjifang);
			    	 
			    	 
			    	 var opt_ec_bengfangjishuijing = ec_bengfangjishuijing.getOption();
			    	 opt_ec_bengfangjishuijing.xAxis[0].data.shift();
			    	 opt_ec_bengfangjishuijing.xAxis[0].data.push(axisNewData);
			    	 opt_ec_bengfangjishuijing.series[0].data.shift();
			    	 opt_ec_bengfangjishuijing.series[0].data.push(d.attributes["jsj7"]);
			    	 opt_ec_bengfangjishuijing.series[1].data.shift();
			    	 opt_ec_bengfangjishuijing.series[1].data.push(d.attributes["bfsx"]);
			    	
			    	 ec_bengfangjishuijing.setOption(opt_ec_bengfangjishuijing);
			    	 
			    	 var opt_ec_wushuijing = ec_wushuijing.getOption();
			    	 opt_ec_wushuijing.xAxis[0].data.shift();
			    	 opt_ec_wushuijing.xAxis[0].data.push(axisNewData);
			    	 opt_ec_wushuijing.series[0].data.shift();
			    	 opt_ec_wushuijing.series[0].data.push(d.attributes["jsj1"]);
			    	
			    	 ec_wushuijing.setOption(opt_ec_wushuijing);
      			}
      		}
     });
     }
  
 </script>
</body>
</html>