skyversation
/
meidu2021


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
							<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<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/tongji.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/tongji.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 id="ec1"></div>
							<!--统计图二-->
							<div id="ec2"></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 id="ecRiLi"></div>
					</div>

				</div>
				<div class="wrap-right">
					<div class="right-top sun-div">
						<div class="sun-title">
							<span class="">能耗统计</span>
						</div>
						<div id="data-list">
							<table style="width: 100%">
								<tr style="height: 0.5rem">
									<td style="text-align: center; width: 33%; font-size: 0.22rem">今日能耗</td>
									<td style="text-align: center; width: 33%; font-size: 0.22rem">月度能耗</td>
									<td style="text-align: center; width: 33%; font-size: 0.22rem">季度能耗</td>
								</tr>
								<tr>
									<td style="text-align: center"><div id="rinenghao"
											class="circlechart" data-percentage="100">0</div></td>
									<td style="text-align: center">
										<div id="yuenenghao" class="circlechart" data-percentage="100">0</div>
									</td>
									<td style="text-align: center">
										<div id="jinenghao" class="circlechart" data-percentage="100">0</div>
									</td>
								</tr>
							</table>

						</div>
						<div id="ec3"></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 id='ec4'></div>
						</div>
						<div class="r-btm-righ">
							<div class="sun-title">
								<span class="">传感器实时数据</span>
							</div>
							<div id="demo">
								<div id="indemo">
									<div id="demo1">
										<ul>
											<li><b class="litextsmall" title="集水井5水位超出上限">04-17
													17:52:00 : 1号消防泵压力采集值 [1000] [正常]</b></li>
											<li><b style="color: red" class="litextsmall"
												title="关于XX申请筹建幼儿园">04-17 17:26:09 : 4号集水井水位采集值 [67cm]
													[超出上限]</b></li>
											<li><b style="color: red" class="litextsmall"
												title="关于XX申请筹建幼儿园">04-17 17:26:09 : 5号集水井水位采集值 [57cm]
													[超出上限]</b></li>
											<li><b class="litextsmall" title="关于XX申请筹建幼儿园">04-17
													17:26:09 : 1号电梯电压采集值 [381V] [正常]</b></li>
											<li><b class="litextsmall" title="集水井5水位超出上限">04-17
													17:26:09 : 高压间环境温度采集值 [35℃] [正常]</b></li>
											<li><b class="litextsmall" title="关于XX申请筹建幼儿园">04-17
													17:26:09 : 主变压箱温度采值 [44℃] [正常]</b></li>
											<li><b class="litextsmall" title="关于XX申请筹建幼儿园">04-17
													17:26:09 : 备变压箱温度采集值 [33℃] [正常]</b></li>

										</ul>
									</div>
									<div id="demo2"></div>
								</div>
							</div>


						</div>
					</div>

				</div>
			</div>
		</article>
	</div>
	<script type="text/javascript">
     var myChart1 = echarts.init(document.getElementById('ec1'));
     var myChart2 = echarts.init(document.getElementById('ec2'));
      var myChart3 = echarts.init(document.getElementById('ec3'));
	 var myChart4 = echarts.init(document.getElementById('ec4'));
	 var myChartRiLi = echarts.init(document.getElementById('ecRiLi'),'infographic');
		// var yibiao1 = echarts.init(document.getElementById('yibiao1'));
// 		 
// 		 var option = {
// 			 series : [{
// 				 name : '警告信息',
// 				 type : 'gauge',
// 				 detail : {formatter:'{value}条警告'},
// 				 axisLine : {lineStyle : {width:20}},
// 				 splitLine : {length :20},
// 				 date : [{value:2,name:''}]
// 			 }]
// 		 }
// 		 yibiao1.setOption(option);

		 
     //var myChart4 = echarts.init(document.getElementById('ec4'));
     /*
      * 参数说明
      * obj : 动画的节点，本例中是ul
      * top : 动画的高度，本例中是-35px;注意向上滚动是负数
      * time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
      * function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
      *
      */
     function noticeUp(obj,top,time) {
         $(obj).animate({
             marginTop: top
         }, time, function () {
             $(this).css({marginTop:"0"}).find(":first").appendTo(this);
         })
     }
      
      function getVirtulData() {
    		var currDate = new Date();
    		var currMonth =  echarts.format.formatTime('yyyy-MM', currDate);
    	    var date = +echarts.number.parseDate(currMonth+"-01");
    	    var end = +echarts.number.parseDate(new Date());
    	    var dayTime = 3600 * 24 * 1000;
    	    var data = [];
    	    for (var time = date; time < end; time += dayTime) {
    	        data.push([
    	            echarts.format.formatTime('yyyy-MM-dd', time),
    	            Math.floor(Math.random() * 100)
    	        ]);
    	    }
    	    return data;
    	}

    	function getPieSeriesUpdate(scatterData, chart) {
    		var currDate = new Date();
       		var currMonth =  echarts.format.formatTime('yyyy-MM', currDate);
       	    var date = +echarts.number.parseDate(currMonth+"-01");
       	    var ajaxdata;
        	 $.ajax({
        		 url:"dataviewController.do?getRiLi&startDate="+echarts.format.formatTime('yyyy-MM-dd', date)+"&endDate="+echarts.format.formatTime('yyyy-MM-dd', currDate),
        		 type:"post",
        		 dataType: 'json',
        	     async:false,
        	     success:function(result){
        	    	 ajaxdata = result;
        	     }
        	 }
        	 );
       
    	    return echarts.util.map(scatterData, function (item, index) {
    	    	 var obj = ajaxdata.attributes[item[0]]; 
    	    	 var warning = 0;
 	 	         var normal = 0;
 	 	        var offline = 0;
    	    	 if(obj && typeof obj === "object"){
    	    		  warning = obj.warningCount;
      	 	          normal = obj.normalCount;
      	 	          offline = obj.offlineCount;
    	    	 }
    	 	      
    	        var center = chart.convertToPixel('calendar', item);
    	        return {
    	        	 id: index + 'pie',
    	             type: 'pie',
    	             center: center,
    	             label: {
    	                 normal: {
    	                     formatter: '{c}',
    	                     position: 'inside'
    	                 }
    	             },
    	             radius: 25	,
    	             data: [ {name: '报警', value: warning},
    	                 {name: '正常', value:normal},
    	                
    	                 {name: '设备离线', value: offline}
    	             ]
    	        };
    	    });
    	}


    	function loadOptionRiLi(){
    		var app = {};
    		option = null;
    		var cellSize = [120, 80];
    		var pieRadius = 30;

    		
    		var scatterData = getVirtulData();
    		if(myChartRiLi){
    			myChartRiLi.clear();
    		}
    		option = {
    		     
    		    tooltip : {},
    		    legend: {
    		        data: [ {
    		            name: '正常',
    		            // 设置文本为红色
    		            textStyle: {
    		                color: 'white'
    		            }
    		        },{
    		            name: '报警',
    		            // 设置文本为红色
    		            textStyle: {
    		                color: 'white'
    		            }
    		        },{
    		            name: '设备离线',
    		            // 设置文本为红色
    		            textStyle: {
    		                color: 'white'
    		            }
    		        }],
    		        top: 1,
    		        color:'red'
    		    },
    		    calendar: {
    		        top: 45,
    		        left: 'center',
    		        height:'auto',
    		        orient: 'vertical',
    		        cellSize: cellSize,
    		        splitLine: {
    		            show: true,
    		            lineStyle: {
    		                color: 'rgb(0,136,212)',
    		                width: 1,
    		                type: 'solid'
    		            }
    		        },
    		        yearLabel: {
    		            show: false,
    		            textStyle: {
    		                fontSize: 30
    		            }
    		        },
    		        dayLabel: {
    		            margin: 7,
    		            firstDay: 1,
    		            nameMap: ['日', '一', '二', '三', '四', '五', '六'],
    		        	color:'white',
    		        	fontSize:13
    		        },
    		        monthLabel: {
    		            show: true
    		        },
    		        itemStyle: {
    		            normal: {
    		                color: 'rgba(255,255,255,0)',
    		                borderWidth: 1,
    		                borderColor: 'rgb(0,136,212)'
    		            }
    		        },
    		        range: [echarts.format.formatTime('yyyy-MM', new Date())]
    		    },
    		    
    		    
    		    series: [{
    		        id: 'label',
    		        type: 'scatter',
    		        coordinateSystem: 'calendar',
    		        symbolSize: 1,
    		        label: {
    		            normal: {
    		                show: true,
    		                formatter: function (params) {
    		                    return echarts.format.formatTime('dd', params.value[0]);
    		                },
    		                offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
    		                textStyle: {
    		                    color: 'white',
    		                    fontSize: 14
    		                },
    		                
    		            }
    		        },
    		        data: scatterData
    		    }]
    		};

    		if (!app.inNode) {
    		    var pieInitialized;
    		    setTimeout(function () {
    		        pieInitialized = true;
    		        myChartRiLi.setOption({
    		            series: getPieSeriesUpdate(scatterData, myChartRiLi)
    		        });
    		    }, 10);

    		    app.onresize = function () {
    		        if (pieInitialized) {
    		        	myChartRiLi.setOption({
    		                series: getPieSeriesUpdate(scatterData, myChartRiLi)
    		            });
    		        }
    		    };
    		};
    		if (option && typeof option === "object") {
    		    myChartRiLi.setOption(option, true);
    		}
    	}
      
      
     function rinenghaoCallback(result){
    	var d=$.parseJSON(result);
    	var div1 = document.getElementById("rinenghao");
    	var div2 = document.getElementById("yuenenghao");
    	var div3 = document.getElementById("jinenghao");
    	div1.innerHTML = d.attributes["rinenghao"];
    	div2.innerHTML = d.attributes["yuenenghao"];
    	div3.innerHTML = d.attributes["jinenghao"];
    	$('.circlechart').circlechart();
     }
      
     function refreshNenghao(){
    	 $("#rinenghao").load("dataviewController.do?getRiNenghao","",rinenghaoCallback);
     }
     
     function getRiLiData(){
     	var currDate = new Date();
   		var currMonth =  echarts.format.formatTime('yyyy-MM', currDate);
   	    var date = +echarts.number.parseDate(currMonth+"-01");
   	    var data = [];
    	 $.ajax({
    		 url:"dataviewController.do?getRiLi&startDate="+echarts.format.formatTime('yyyy-MM-dd', date)+"&endDate="+echarts.format.formatTime('yyyy-MM-dd', currDate),
    		 type:"post",
    		 dataType: 'json',
    	     async:false,
    	     success:function(result){
    	    	 data = riliCallback(result);
    	     }
    	 }
    	 );
     }
     
     function refreshGonglvPie(){
    	 $.ajax({
    		 url:"dataviewController.do?getGonglvPie",
    		 type:"post",
    		 dataType: 'json',
    	     async:false,
    	     success:function(result){
    	    	 //alert(result.title.text);
        		 if(result!=null){
        			// alert(result.series[0].data[0]);
        			var opt = myChart1.getOption();
        			var value = [];
        			 var serisdata = result.series[0].data;
        			 $.each(serisdata, function(i,p){
        				 value[i] = {'name':p['name'], 'value':p['value']};
        			 });
        			//alert(opt.title[0].text);
        			opt.legend[0].data = result.legend.data;
        			opt.title[0].text = result.title.text;
        			opt.series[0].data = value;
        			  myChart1.hideLoading();
        			myChart1.setOption(opt);
        		 }
        	 }
    	 }
    	 );
     }
     
     function refreshWarningSumBar(){
    	 $.ajax({
    		 url:"dataviewController.do?getWarningSumBar",
    		 type:"post",
    		 dataType: 'json',
    	     async:false,
    	     success:function(result){
    	    	// alert(result.title.text);
        		 if(result!=null){
        			//alert(result.yaxis[0].data);
        			var opt = myChart4.getOption();
        			 var serisdata = result.series[0].data;
        			
        			opt.series[0].data = serisdata;
        			opt.xAxis[0].data = result.xaxis[0].data;
        			myChart4.hideLoading();
        			myChart4.setOption(opt);
        		 }
        	 }
    	 }
    	 );
     }
     
     function refreshGonglvBar(){
    	 $.ajax({
    		 url:"dataviewController.do?getGonglvBar",
    		 type:"post",
    		 dataType: 'json',
    	     async:false,
    	     success:function(result){
    	    	// alert(result.title.text);
        		 if(result!=null){
        			//alert(result.yaxis[0].data);
        			var opt = myChart2.getOption();
        			 var serisdata = result.series[0].data;
        			
        			opt.series[0].data = serisdata;
        			opt.yAxis[0].data = result.yaxis[0].data;
        			myChart2.hideLoading();
        			myChart2.setOption(opt);
        		 }
        	 }
    	 }
    	 );
     }
     
     function refreshNenghaoLine(){
    	 $.ajax({
    		url:"dataviewController.do?getNenghaoLine",
    		type:"post",
    		dataType:"json",
    		async:false,
    		success:function(result){
    			if(result!=null){
    				var opt = myChart3.getOption();
    				 var serisdata = result.series[0].data;
         			
         			opt.series[0].data = serisdata;
         			opt.xAxis[0].data = result.xaxis[0].data;
         			
    				myChart3.setOption(opt);
    			}
    		}
    	 });
    	 
     }
     
     $(function () {
         // 调用 公告滚动函数
         setInterval("noticeUp('.notice ul','-35px',500)", 5000);
         setInterval(refreshNenghao, 10000); 
         setInterval(refreshGonglvPie, 8000);
         setInterval(refreshGonglvBar, 9000);
         setInterval(refreshNenghaoLine, 60000);
         setInterval(refreshWarningSumBar, 3000);
         loadOptionRiLi();
         setInterval(loadOptionRiLi, 10000);
     });
     $('.circlechart').circlechart();
		 var speed=10;//控制速度
		var tab=document.getElementById("demo");
		var tab1=document.getElementById("demo1");
		var tab2=document.getElementById("demo2");
		tab2.innerHTML=tab1.innerHTML;
		function Marquee(){
			if(tab2.offsetHeight-tab.scrollTop<=0)
				tab.scrollTop-=tab1.offsetHeight;
			else{
				tab.scrollTop++;
			}
		}
		//定时器
		var MyMar=setInterval(Marquee,speed);
		//鼠标滑过停止滚动
		tab.onmouseover=function() {clearInterval(MyMar)};
		//鼠标滑出继续滚动
		tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
 </script>
</body>
</html>