wangdaping
/
wp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!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-->
    <link rel="stylesheet" type="text/css" href="/nwyj/page/cockpit/chartPage.css">
	<script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/dist/echarts-all.js"></script>
    <script type="text/javascript" src="/nwyj/page/cockpit/echarts-2.2.7/build/dist/chart/line.js"></script> 
    <script type="text/javascript" src=" /nwyj/page/cockpit/cockpit_echart.js"></script> 
	<script type="text/javascript" src="/nwyj/page/cockpit/laydate/laydate.js"></script>
	<script type="text/javascript" src="/nwyj/page/cockpit/webgis/util.js"></script>
	
	<link rel="stylesheet" type="text/css" href="/nwyj/css/cockpit/charTitle.css">
  <body>
   <div id="title" class="jsc_chartitle"></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>
			<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">
   
   
   /******************************************************查询条件***********************************************************/  
	// dept_id//user_id//user_name//dept_name
   var customMadeTool=["search","render","list","enlarge","resource"];//父页面显示的工具栏
   var urlParams=resolveUrl();//主页面传递的参数
   var timer=null;//定时器
   HTitle["fixed"]=urlParams["dept_name"];//固定显示的部门名称
   HTitle["change"]=urlParams["dept_name"];//查询部门的名称
   
   var text=HTitle[tState]+lossTitleTrend;
   
   var childId="'"+urlParams["dept_id"]+"'";//查询部门的ID
   var parentId=urlParams["parentId"];//父部门ID
   var startTime=defaultStartTime;//默认查询历史的初始时间
   var dateTime=getNowDateTime();//默认查询历史的截止时间
   var interval=intervalTime;//每次增加数据间隔的时间
   var list=intervalList;//选择间隔时间列表
   var n=xn;//x轴显示数据的数量
   var chart=null;//chart对象
   var categorie=[urlParams["dept_name"]];//部门名称
   
   var deptUrl=deptTreePath;
   var state=powerState;

   function init(){
	   	// 添加额外属性主要用于最初的初始节点
	   	$("#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");

   	    //加载刷新时间
   	 	loadSelect($("#selectList"),list);
   	    //绑定刷新事件
   	    $("._rend_command").on("click",rend);
   	    //绑定查询历史
   		$("._query_command").on("click",query);
	}

   //获取所有的参数
   function getParam(){
		getTime();//获取查询时间
		getDepartment($("#compTree"),lossTitleTrend);;//获取查询部门
		interval=getInterval($("#selectList"),interval);//获取间隔时间
		n=getN(n);//获取x轴显示的数据数量
   }
   
   //刷新
   function rend(){
   		//移除定时器，一面定时器中为完成的数据在加载后进行二次加载
   		timer=removeRendChart(timer);
   		//刷新全局参数
   		getParam();
		//alert("comId="+comId+"===childId="+childId+"===dateTime="+dateTime+"===interval="+interval+"===n="+n+"===rendState="+rendState);
		loadChart(parentId,childId,getNowDateTime(),interval,n,5);
		//定时刷新数据
		timer=outoRendChart(timer,interval,rendChart);
   }
   /**
    *查询历史记录
    *
    */
    function query(){
    	   //移除定时器，一面定时器中为完成的数据在加载后进行二次加载
    		timer=removeRendChart(timer);
    		getParam();
 			$.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getHistoryRecords",{startDate:startTime,endDate:dateTime,comId:parentId,typeId:"5"},function(result){
 				console.log(JSON.stringify(result));
 				//判断是否正确查询到数据
 				if(result.state=="FAILURE") throw new Error("查询失败");
 				//判断是否存在历史数据
 				if(result.rows.length<1){
 					alert("此区间段内尚无历史数据");
 					loadChart(parentId,childId,getNowDateTime(),interval,n,5);
 					return ;
 				}
 				var dateStr=getDateStr(result.rows);//拼接历史日期的字符串
	 			loadHistory(dateStr,5);//加载历史数据
 			},"json");
    }
    /*
     *初始化加载判断
     */
     function getInitParams(){
  	   if(loadState["outageStrend"]==0){
  		  loadChart(parentId,childId,getNowDateTime(),interval,n,5);
  		  timer=outoRendChart(timer,interval,rendChart);
  	   }else{
  		   $.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getParentsInfo",{comId:urlParams["dept_id"],count:loadState["outageStrend"]},function(result){
  			   categorie=[];
  			   HTitle["change"]="";
  			   childId="'"+result.rows.childId.join("','")+"'";
  			   categorie=result.rows.childName;
  			   HTitle["change"]='"'+categorie.join('","')+'"';
  			   text=HTitle[tState]+lossTitleTrend;
  			   parentId=urlParams["dept_id"];
  			   //检查查询条件是否合法
  			  // alert("parentId="+parentId+"===childId="+childId+"===dateTime="+dateTime+"===interval="+interval+"===n="+n+"===rendState="+rendState);
  			   loadChart(parentId,childId,getNowDateTime(),interval,n,5);
  			   timer=outoRendChart(timer,interval,rendChart);
  		   },"json");
  	   }
     }
   
      //初始化
      $(function(){
   	   init();
   	   getInitParams();
      })
   
      /**
       *自动刷新增加数据节点
       *
       */
    	function rendChart(){
    	   var nowTime=getNowTime();
    	   $.post("/nwyj/ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getChartInfo",{comId:parentId,childId:childId,typeId:"5",date:getNowDateTime()},function(result){
    		   var count=0;
    		   var tempArr=[];
    		   for(var item=0;item<categorie.length;item++){
    				var temp=[count, changeQ(result[item]["ENERGY_LOSS"]),false,false];
    				tempArr.push(temp);
    				count++;
    		   }
    		   tempArr[0].push(nowTime);
    		   chart.addData(tempArr);
    	   },"json");
      } 

   /*****************************************************************************************************************/
   			//加载历史
			function loadHistory(dateStr,typeId){
	  			getParam();
				$.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getHistoryInfos",{dateStr:dateStr,childId:childId,comId:parentId,typeId:typeId},function(result){
				rendState=0;
				loadData(result);
				},"json");
   			}
   			//加载最新数据
     		function loadChart(compId,childId,date,timeInterval,n,typeId){
     		 	$.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getChartInfos",{comId:compId,childId:childId,typeId:typeId,date:date,timeInterval:timeInterval,n:n},function(result){
     		 		loadData(result);
     			},"json"); 
     			$("#title").html(text) ; 
     		} 
/********************************************************************************************************************************************/
 
   			function loadData(result){
   	 			var leArr=[];
   	 			var xArr=[];
   	 			var sArr=[];
   				var colorIndex=0;
 		 		console.log("result====="+JSON.stringify(result));
 		 		console.log("resultthleng====="+result.length);
 		 		xArr=result["xAxisCategories"].substring(result["xAxisCategories"].indexOf("[")+1,result["xAxisCategories"].indexOf("]")).split(",");

		 		for(var item in categorie){
	 				for(var i in state){
	 					var tem=null; //{name:categorie[item]+state[i].name+"线路" ,color: '#FF3300',type: 'line',data:new Array()};
 		 					tem= {name:categorie[item]+state[i].name+"线路" ,color: color[0][colorIndex],type: 'line',data:new Array()};
 		 					leArr.push(tem.name);
 		 					colorIndex++;
	 					for(var data=0;data<result.data.length/categorie.length;data++){	
		 					tem.data.push(changeQ(result.data[parseInt(data*categorie.length)+parseInt(item)]["ENERGY_LOSS"]));
     		 		}
	 			}
	 				sArr.push(tem);
	 		}
     		 		var opParams={
 	 		 			title:"",//标题
 	 		 			unit:"单位：条",//单位
 	 		 			leArr:leArr,//图例
 	 		 			xArr:xArr,//x轴
 	 		 			sArr:sArr//主数据
 	 		 		};
 		 		//alert(JSON.stringify(opParams))
 	 		 	chart=getEchart($("#container"),getOption,opParams);
 	 		 	$(window).resize(function(){
	 				chart.resize();
	 			});
   			}
    		

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