PerfectEquation
/
GZ


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
							<!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/bar.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"> 
  </head>
<body>
 <div id="title" class="jsc_chartitle"></div>
 <div id="container"></div> 
 <div id="choose_content">
		<h2>单位:</h2>
		 	<div id="compTree" class="selectTree _left_margin" selWidth="280" asyncMode="true"  multiMode="true"></div></br>
		<h2>电压等级:</h2>
			<div class="selectTree _left_margin" id="levelTree" selWidth="280" multiMode="true" keepDefaultStyle="true"></div></br>
		<h2>数据源:</h2>
			<div id="from">
				<input type="radio" class="_left_margin" name="from" value="sys" >系统数据源
				<input type="radio" class="_left_margin" name="from" value="peo" checked="checked">人工数据源
			</div>
		<h2>间隔时间：</h2>
			<select id="selectList" value=""></select><br/>
		<div class="_startTime _hide">
			<h2>起始时间(YYYY-MM-DD HH:mm:ss):</h2>
				<input id="startTime" class="_left_margin" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">		
		</div>
		<div class="_endTime">
			<h2>时间(YYYY-MM-DD HH:mm:ss):</h2>
				<input id="dataTime" class="_left_margin" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">	
		</div>	
		<h2 class="_center"><span class="_query_command">查询</span><span class="_rend_command">刷新</span></h2>
 </div>
 </div>
   <script type="text/javascript">
   /******************************************************查询条件***********************************************************/  
   //图表用参数
   // dept_id//user_id//user_name//dept_name
   var customMadeTool=["search","render","list","enlarge","resource"];//父页面显示的工具栏
   var interval=null;//定时器
   var dataFrom="peo";//数据源的状态
   var n=intervalTime;//初始化默认刷新时间
   var list=intervalList//刷新时间list列表
   var urlParams=resolveUrl();//主页面传递参数
   HTitle["fixed"]=urlParams["dept_name"];//固定标题
   HTitle["change"]=urlParams["dept_name"];//可变标题
   
    var text=HTitle[tState]+stationTitleChart;//图表标题
   
    var childId="'"+urlParams["dept_id"]+"'";//该部门的ID
    var bindChildId=childId.split(",");//绑定点击事件查询id
    var parentId=urlParams["parentId"];//该部门父部门的ID
    var dateTime=getNowDateTime();//获取现在的时间
    var chart=null;//图表对象
    var categorie=[urlParams["dept_name"]];//部门名称
    
	var level=defaultSubstationLevel;
	var state=substationState;//系统默认显示的状态
   
	   //查询条件配置参数
	var deptUrl=deptTreePath;
	var zNodes2 ={"treeNodes":substationLevel};
	
    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();
   	    //查询
   		$("._query_command").on("click",query);
   	    //刷新
   		$("._rend_command").on("click",rend);
   		$("#from").on("click",function(){
   			changeDataSource();
   		});
   		
	}
    //切换数据源
    function changeDataSource(){
    	dataFrom=$("#from input[name='from']:checked").val();
		if(dataFrom=="sys"){
			$("._startTime").removeClass("_hide");
			$("._endTime").find("h2").eq(0).text("截止时间:");
		}else{
			$("._startTime").addClass("_hide");
			$("._endTime").find("h2").eq(0).text("起始时间:");
		}
    }
    
    /**
    *时时数据刷新
    */
    function rend(){
    		//移除定时器
			interval=removeRendChart(interval);
			//获取刷新间隔时间
			n=getInterval($("#selectList"),n);
			//获取部门Id
	 		getDepartment($("#compTree"),stationTitleChart);
			//获取电压等级信息
			level=getLevel($("#levelTree"),level);
			//检查查询条件参数
			//alert("parentId="+parentId+";childId="+childId+";n="+n+";")
			//alert(JSON.stringify({level:level}));
			//加载表格
			rendChart();
		 	interval=outoRendChart(interval,n,rendChart);
		}
    
    /**
    *查询历史
    */
    function query(){
    		//移除定时器
    		interval=removeRendChart(interval);
	 		//获取部门
			getDepartment($("#compTree"),stationTitleChart);
			//获取电压等级信息
			level=getLevel($("#levelTree"),level);
			//获取时间
			dateTime=getTimeChart($("#dataTime"));
			//加载
			//检查查询条件的参数
			//alert("parentId="+parentId+";childId="+childId+";dateTime="+dateTime+";")
			//alert(JSON.stringify({level:level}));
			 loadChart(parentId,childId,dateTime,"2");
    }
	/**
	*初始化加载图表，
	*根据系统配置参数判断初始化加载本部门的数据还是直辖部门的数据
	*如果是直辖部门，根据配置初始化加载的部门数量选择加载该配置量的部门
	*/
   function getInitParams(){
		//当oadState["lineChart"]==0时，加载本部门的数据
		//否则加载直辖loadState["lineChart"]数量的部门，
		//如果直辖部门大于loadState["lineChart"]数量，则显示该数量部门
		//否则显示实际部门数量
	   if(loadState["stationChart"]==0){
		   rendChart(); 
	   }else{
		   $.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getParentsInfo",{comId:urlParams["dept_id"],count:loadState["stationChart"]},function(result){
			   categorie=[];
			   HTitle["change"]="";
			   childId="'"+result.rows.childId.join("','")+"'";
			   bindChildId=childId.split(",");
			   categorie=result.rows.childName;
			   HTitle["change"]='"'+categorie.join('","')+'"';
			   text=HTitle[tState]+stationTitleChart;
			   //alert("parentId="+parentId+";childId="+childId+";dateTime="+dateTime);
			   parentId=urlParams["dept_id"];
			   rendChart();
			   interval=outoRendChart(interval,n,rendChart);
		   },"json");
	   }
   }
    //初始化
   $(function(){
	   //初始化界面
	   init();
	   getInitParams();
   });

	function rendChart(){
	    loadChart(parentId,childId,getNowDateTime(),"2");
   }
	
	
   /*****************************************************************************************************************/


 		function loadChart(compId,childId,date,typeId){
 		 	$.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getChartInfo",{comId:compId,typeId:typeId,childId:childId,date:date},function(result){
	 			var leArr=[];//图例数组
	 			var xArr=[];//x轴数组
	 			var sArr=[];//主数据
	 			var opParams=null;
	 			/*
	 			*如果有数据，拼接数据
	 			*如果没有数据，则默认给一组空数据，echart自动进入没有数据画面，显示没有数据
	 			*/
	 			if(result.length>0){
	 				//拼接数据
	 				opParams=loadData(leArr,xArr,sArr,result,date);
	 			}else{
	 		 		opParams={
	 		 			title:"",//标题
	 		 			unit:"单位：条",//单位
	 		 			leArr:leArr,//图例
	 		 			xArr:xArr,//x轴
	 		 			sArr:sArr//主数据
	 		 		};
	 			}
				//创建图表并加载图表数据
 		 		chart=getEchart($("#container"),getOption,opParams,chart);
 		 		//监听窗口大小变化
 			   $(window).resize(function(){
 				   chart.resize();
 			   })
 			},"json");  
 			$("#title").html(text) ;
 		} 

 	   //拼接echart图表的数据
 	   function loadData(leArr,xArr,sArr,result,date){
 		   //遍历电压
		 	for(var index in level){
		 		//遍历状态
 		 		for(var i in state){
 		 		var temp={name:level[index]["name"]+state[i]["name"],
 		 				type:'bar',
 		 		      	data:[]
 		 		 	};
 		 		//压入图例
 		 		leArr.push(temp.name);
 		 			//遍历部门
			 		for(var item in categorie){
			 			//x轴坐标
			 			if(index==0&&i==0){
			 				//压入x轴坐标
			 				xArr.push(categorie[item]);
			 			}
			 			//判断堆叠
			 			if(0==item){
			 				temp.stack=categorie[item]+level[index]["column"];
			 			}
			 			//获取主数据
		 				if(state[i].column=="PRESSURE_LOSS"){
		 					temp.data.push({
								//图表数据
		 						value:changeQ(result[changeQ(item)][state[i].column+"_"+level[index].column])
		 							-changeQ(result[changeQ(item)]["NO_RECOVER_"+level[index].column])});
		 				}else{
		 					temp.data.push({
								//图表数据
		 						value:changeQ(result[changeQ(item)][state[i].column+"_"+level[index].column])});
 		 				}
			 		}
 		 			//压入主数据
 		 			sArr.push(temp);
 		 		}
 		
 		 	}
 			return {
 			 			title:"",//标题
 			 			unit:"单位：条",//单位
 			 			leArr:leArr,//图例
 			 			xArr:xArr,//x轴
 			 			sArr:sArr//主数据
 			 		};
 	   }
 	       		
   
   </script>
  </body>
</html>