PerfectEquation
/
GZ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
							<!DOCTYPE html>
<html>
  <head>
    <title>变电站停趋势图</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="/nwyj/page/cockpit/context.js"></script> 
    <!--框架必需start-->
	<script type="text/javascript" src="/nwyj/scripts/qui/libs/js/jquery.js"></script> 
    <script type="text/javascript" src="/nwyj/scripts/qui/libs/js/language/cn.js"></script>
    <script type="text/javascript" src="/nwyj/scripts/qui/libs/js/main.js"></script>
    <script type="text/javascript" src="/nwyj/scripts/qui/libs/js/framework.js"></script>
    <link href="/nwyj/scripts/qui/libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" id="skin" prePath="/nwyj/scripts/qui/" scrollerY="false"/>
    <link rel="stylesheet" type="text/css" id="customSkin"/>
	<!--框架必需end-->
	<!--树组件start-->
	<link rel="stylesheet" type="text/css" href="/nwyj/scripts/qui/libs/js/tree/ztree/ztree.css" />
	<script type="text/javascript" src="/nwyj/scripts/qui/libs/js/tree/ztree/ztree.js"></script>
	<script type="text/javascript" src="/nwyj/scripts/qui/libs/js/form/selectTree.js"></script> 
	<script type="text/javascript" src="/nwyj/scripts/qui/libs/js/form/listerTree.js"></script>
	<!--树组件end-->
  <!--   <script type="text/javascript" src="/nwyj/scripts/jquery/jquery-1.11.1.min.js"></script>  -->
    <script type="text/javascript" src="/nwyj/scripts/highcharts/highcharts.js"></script> 
    <script type="text/javascript" src="/nwyj/page/cockpit/chart_line_substation_trend.js"></script>   
    <link rel="stylesheet" type="text/css" href="/nwyj/page/cockpit/chartPage.css">
    <script type="text/javascript" src="/nwyj/page/cockpit/laydate/laydate.js"></script>
    <script type="text/javascript" src="/nwyj/page/cockpit/webgis/util.js"></script>
  <style type="text/css">
  </style>
  </head>
  <body>
 <div id="title" style="background-color:#144E52; width:100%; height:35px; line-height:35px; color:#ffc000; text-align:center; font-weight:bold; font-size:26px; "></div>
 <div id="container"></div>
  <div id="choose_content">
		<h2>单位：</h2>
		 	<div id="compTree" class="selectTree" selWidth="280" asyncMode="true"  multiMode="true"></div></br>
		<h2>电压等级：</h2>
			<div class="selectTree" id="levelTree" selWidth="280" multiMode="true" keepDefaultStyle="true"></div></br>
		<h2>状态：</h2>
			<ul>
				<li><input type="checkbox" name="state" value="PRESSURE_LOSS" data="已恢复" checked="checked">已恢复<br/></li>	
				<li><input type="checkbox" name="state" value="NO_RECOVER" data="未恢复">未恢复<br/></li>	
			</ul>
		<h2>开始时间：</h2>
			<input id="startTime"  onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
		<h2>结束时间：</h2>
			<input id="dataTime"  onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">	
		<h2>间隔时间：</h2>
			<select id="selectList" value=""></select><br/>
		<h2>X轴数据(个)：</h2>
			<input id="n" type="text">	
		<!-- <h2 class="_center"><span class="_query_command">查询</span><span class="_query_command">刷新</span></h2> -->
		<h2 class="_center"><span class="_query_command">查询历史</span><span class="_rend_command">实时刷新</span></h2>
 </div>
   <script type="text/javascript">
    var urlParams=resolveUrl();
    var rendState=renderState;//状态：1：刷新，0：查看历史
    var privence=urlParams["dept_name"];
    HTitle["fixed"]=urlParams["dept_name"];
    HTitle["change"]=urlParams["dept_name"];
    var text=HTitle[tState]+stationTitleTrend;
    var childId="'"+urlParams["dept_id"]+"'";
    var comId=urlParams["parentId"];
    var startTime=defaultStartTime;
    var dateTime=getNowDateTime();
    var interval=intervalTime;
    var list=intervalList
    var n=xn;
    var chart;
    var categorie=[urlParams["dept_name"]];
    var categories= [];

	var level=[{name:"500KV",column:"ONE"} /* ,{name:"200KV",column:"TWO"} ,{name:"110KV",column:"THREE"},{name:"35KV",column:"FORE"} */]
 	var series= [];
	var state=[{name:"已恢复",column:"PRESSURE_LOSS" }  ,
	           {name:"未恢复",column:"NO_RECOVER"}  ];
   
   
   var deptUrl=deptTreePath;
   var zNodes2 ={"treeNodes":substationLevel};
	//获取间隔时间
  	function getInterval(){
   		if($("#selectList").data("selectedNode")==""||$("#selectList").data("selectedNode")==undefined)return;
   		interval=$("#selectList").data("selectedNode").value;
  	}
  	//x轴数据个数
  	function getN(){
  		n=$("#n").val()==""?n:$("#n").val();
  	}
  	//获取电压级别
  	function getLevel(){
  		if($("#levelTree").data("selectedNodes")<1)return false;
  		level=[];
  		$.each($("#levelTree").data("selectedNodes"),function(index,item){
			level.push({name:item.name,column:item.column});
		})
		return true;
  	}
	//获取部门
	function getDepartment(){
		if($("#compTree").data("selectedNodes")<1)return false;
		HTitle["change"]="";
		categorie=[];
		childId="";
		comId="";
		$.each($("#compTree").data("selectedNodes"),function(index,item){
			HTitle["change"]+=',"'+item.name+'"';
			categorie.push(item.name);
			childId+="'"+item.id+"',";
			comId=item.parentId;
		})
		childId=childId.substring(0,childId.lastIndexOf(","));
		HTitle["change"]=HTitle["change"].substring(1,HTitle["change"].length);
		text=HTitle[tState]+stationTitleTrend;
		return true;
	}
	//获取时间
	//获取时间
    function getTime(){
		 if(""!=$("#startTime").val())startTime=$("#startTime").val();
    	dateTime=$("#dataTime").val()==""?getNowDateTime():$("#dataTime").val();
    }
	//打桩成功
	function getState(){
		//未选中复选款时退出
		if($("input[name=state]:checked").size()<1)return false;
		//选中复选框，更新恢复的状态
		state=[];
		$("input[name=state]:checked").each(function(){
			var temp={};
			temp.name=$(this).attr("data");
			temp.column=$(this).attr("value");
			state.push(temp);
		});
		return true;
	}
	
    function init(){
    	loadSelect($("#selectList"),list);
	   	// 添加额外属性主要用于最初的初始节点
	   	$("#compTree").attr('params', '{"deptId":"'+urlParams["dept_id"]+'"}');
	   	// 异步加载请求地址
	   	$("#compTree").attr('url', deptUrl);
	    $.post(deptUrl, {"id" : urlParams["dept_id"]}, function(data) {$("#compTree").data("data", data);$("#compTree").render();}, "json");
    	
   		$("#levelTree").data("data",zNodes2); 
   	    $("#levelTree").render();
   	    $("._rend_command").on("click",rend);
   		$("._query_command").on("click",query);
	}
    //获取所有的参数
    function getParam(){
    	getState();//获取恢复状态
		getTime();//获取查询时间
		getDepartment();//获取查询部门
		getLevel();//获取电压
		getInterval();//获取间隔时间
		getN();
		categories=[];
		series=[]
    }
    //刷新
    //刷新
    function rend(){
    	getParam();
		rendState=1;
		//alert("comId="+comId+"===childId="+childId+"===dateTime="+dateTime+"===interval="+interval+"===n="+n+"===rendState="+rendState);
		loadChart(comId,childId,getNowDateTime(),interval,n);
		console.log(JSON.stringify({categories:categories}));
		console.log("categorie_________:"+JSON.stringify({categorie:categorie}));
		console.log("level_________:"+JSON.stringify({level:level}));
		console.log("childId_________:"+childId); 
    }
    //	查询
    function query(){	
    		getTime();//获取查询时间
 			$.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getHistoryRecords",{startDate:startTime,endDate:dateTime,comId:comId,typeId:"2"},function(result){
 				console.log(JSON.stringify(result));
 				if(result.state=="FAILURE") throw new Error("查询失败");
 				if(result.rows.length<1){
 					alert("此区间段内尚无历史数据");
 					rend();
 					return ;
 				}
 				var dateStr=getDateStr(result.rows);
	 			loadHistory(dateStr);
 			},"json");
			console.log(JSON.stringify({categories:categories}));
			console.log("categorie_________:"+JSON.stringify({categorie:categorie}));
			console.log("level_________:"+JSON.stringify({level:level}));
			console.log("childId_________:"+childId); 
    }
    
    function getDateStr(dateArr){
    	var dateArray=[];
     	for(var item=0 ;item<dateArr.length; item++){
     		dateArray.push(dateArr[item]["APPEAR_TIME"])
    	} 
    	return dateArray.join(",");
    }
    

    function getInitParams(){
   	   if(loadState["stationStrend"]==0){
   		   loadChart(parentId,childId,dateTime); 
   	   }else{
   		   $.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getParentsInfo",{comId:urlParams["dept_id"],count:loadState["stationStrend"]},function(result){
   			   categorie=[];
   			   childId="'"+result.rows.childId.join("','")+"'";
   			   categorie=result.rows.childName;
			   HTitle["change"]='"'+categorie.join('","')+'"';
			   text=HTitle[tState]+stationTitleTrend;
			   comId=urlParams["dept_id"];
   			  // alert("comId="+comId+"===childId="+childId+"===dateTime="+dateTime+"===interval="+interval+"===n="+n+"===rendState="+rendState);
   			   loadChart(comId,childId,dateTime,interval,n);
   		   },"json");
   	   }
      }
      
     //初始化
     $(function(){
  	   init();
  	   getInitParams();
     })
   
   /****************************************************************************************************************/
   			//加载历史
			function loadHistory(dateStr){
	  			getParam();
				$.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getHistoryInfos",{dateStr:dateStr,childId:childId,comId:comId,typeId:"2"},function(result){
				rendState=0;
				loadData(result);
				},"json");
   			}
		function loadChart(compId,childId,date,timeInterval,n){
			categories=[];
		 	$.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getChartInfos",{comId:compId,childId:childId,typeId:"2",date:date,timeInterval:timeInterval,n:n},function(result){
		 		loadData(result);
			},"json");  
			$("#title").html(text) ;
			  var chart = $('#container').highcharts();
		}
	
	
	
   
   
   
  /****************************************************************************************************************************************/ 
   		function loadData(result){
	  			var colorIndex=0;
   				categories=[];
   				series=[];
 		 		console.log("result====="+JSON.stringify(result));
 		 		console.log("resultthleng====="+result.length);
 		 		categories=result["xAxisCategories"].substring(result["xAxisCategories"].indexOf("[")+1,result["xAxisCategories"].indexOf("]")).split(",").reverse();
 		 		for(var item in categorie){
 		 			for(var index in level){
 		 				for(var i in state){
 		 					var tem=tem= {name:categorie[item]+level[index]["name"]+state[i].name+"线路" ,color: color[0][colorIndex],type: 'line',data:new Array()};//null;
/*  		 					if(state[i].column=="PRESSURE_LOSS"){
     		 					tem= {name:categorie[item]+level[index]["name"]+state[i].name+"线路" ,color: color[0][colorIndex],type: 'line',data:new Array()};
 		 					}else{
 		 						tem= {name:categorie[item]+level[index]["name"]+state[i].name+"线路" ,color: color[0][colorIndex],type: 'line',data:new Array()};
 		 					} */
 		 					colorIndex++;
 		 					//var tem= {name:categorie[item]+level[index]["name"]+state[i].name+"线路" ,color: '#FF3300',type: 'line',data:new Array()};
 		 		 			for(var data=0;data<result.data.length/categorie.length;data++){	
	    		 				if(state[i].column=="PRESSURE_LOSS"){
	    		 					console.log("==="+state[i].column);
	    		 					console.log("==="+level[index].column);
	    		 					console.log("==="+(state[i].column+"_"+level[index].column));
	    		 					console.log("==="+result.data[parseInt(data*categorie.length)+parseInt(item)][state[i].column+"_"+level[index].column]);
	    		 					console.log("NO_RECOVER_"+level[index].column);
	    		 					console.log(JSON.stringify(result.data[parseInt(data*categorie.length)+parseInt(item)]));
	    		 					console.log("==="+changeQ(result.data[parseInt(data*categorie.length)+parseInt(item)]["NO_RECOVER_"+level[index].column]));
	    		 					
	    		 					tem.data.push(changeQ(result.data[parseInt(data*categorie.length)+parseInt(item)][state[i].column+"_"+level[index].column])-changeQ(result.data[parseInt(data*categorie.length)+parseInt(item)]["NO_RECOVER_"+level[index].column]));
	    		 				}else{
	    		 					console.log("=="+(state[i].column+"_"+level[index].column))
	    		 					tem.data.push(changeQ(result.data[parseInt(data*categorie.length)+parseInt(item)][state[i].column+"_"+level[index].column]));
	    		 				}
	         		 		}
	     		 			series.push(tem);
 		 				}
 		 			}
 	
 		 		}
     		 		console.log("categories===="+JSON.stringify({categories:categories}))
     		 		console.log("series===="+JSON.stringify({series:series}))
 
 		 		var options={	
 						"title.text":"",
 						"xAxis.categories":categories,
 						"yAxis.title.text":"单位：(/座)",
 						"subtitle.text":"数据来源：人工填报<br/>时间："+getNowDateTime(),
 						series:series

 		    		}
 		 		
 				$("#container").createChart(options,null);
   			}
    		
    		

   </script>
  </body>
</html>