PerfectEquation
/
GZ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
							<!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/highcharts/highcharts.js"></script> 
    <script type="text/javascript" src="/nwyj/page/cockpit/chart_pie.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>
  </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 _left_margin" selWidth="280" asyncMode="true"  multiMode="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 >间隔时间(/s（秒）):</h2>
			<input id="interval" class="_left_margin" type="text" val="5">
		<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>
 <script type="text/javascript">
   /******************************************************查询条件***********************************************************/  
   	// dept_id//user_id//user_name//dept_name
   var interval=null;//定时器
   var dataFrom="peo";//数据源的状态
   var n=5;//初始化默认刷新时间
   var list=intervalList
   var urlParams=resolveUrl();
   HTitle["fixed"]=urlParams["dept_name"];
   HTitle["change"]=urlParams["dept_name"];
   var text=HTitle[tState]+taiQuTitleChart;
   var childId="'"+urlParams["dept_id"]+"'";
   var bindChildId=childId.split(",");
   var parentId=urlParams["parentId"];
   var dateTime=getNowDateTime();
   var chart;
   var categorie=[urlParams["dept_name"]];
   var categories= [];
   var state=[ {name:"已恢复",column:"TD_COUNT" } , 
		       {name:"未恢复",column:"UNRECOVERED"}];
		
   var series= [
	             {name: '电量损失',color: '#FF3300', size: '60%',type: 'pie',data:[],  
	            	 dataLabels: {formatter: function () { return this.y > 5 ? this.point.name : null; },color: 'white',distance: -20} 
	             },
	             {name: '电量损失',color: '#FF3300',  size: '100%', innerSize: '60%',type: 'pie',data:[] },
	             ];
		
   var deptUrl=path+"ws/orgInDeptService/OrgInDeptService/getDeptRootById";
    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");
   		$("._query_command").on("click",query);
   		$("._rend_command").on("click",function(){
   			rendChart(dateTime);
   		});
   		$("._rend_command").on("click",function(){
   			getInterval();
   			removeRendChart();
   			outoRendChart();
   	 		getDepartment();
   			rendChart(getNowDateTime());
   		});
   		$("#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("截止时间(YYYY-MM-DD HH:mm:ss):");
		}else{
			$("._startTime").addClass("_hide");
			$("._endTime").find("h2").eq(0).text("时间(YYYY-MM-DD HH:mm:ss):");
		}
    }
	//更改查询条件
    function query(){
    	   removeRendChart();
		   categories=[];
		   series= [
		             {name: '电量损失',color: '#FF3300', size: '60%',type: 'pie',data:[],  
		            	 dataLabels: {formatter: function () { return this.y > 5 ? this.point.name : null; },color: 'white',distance: -20} 
		             },
		             {name: '电量损失',color: '#FF3300',  size: '100%', innerSize: '60%',type: 'pie',data:[] },
		             ];
			//获取部门
			getDepartment();
			//获取时间
			getTime();
			loadChart(parentId,childId,dateTime);
			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 getInterval(){
    	//********************************************************************************************************====校验正整数
   		if($("#selectList").data("selectedNode")==""||$("#selectList").data("selectedNode")==undefined)return;
   		n=$("#selectList").data("selectedNode").value;
    }
    //获取时间
    function getTime(){
    	//********************************************************************************************************====校验日期格式
    	dateTime=$("#dataTime").val()==""?getNowDateTime():$("#dataTime").val();
    }
    //获取部门相关信息
    function getDepartment(){
    	if($("#compTree").data("selectedNodes").length>0){
    		HTitle["change"]="";
     		categorie=[];
 			childId="";
 			bindChildId=[];
	    	$.each($("#compTree").data("selectedNodes"),function(index,item){
	    		HTitle["change"]+=',"'+item.name+'"';
				categorie.push(item.name)
				childId+="'"+item.id+"',"
				parentId=item.parentId;
			});
	    	childId=childId.substring(0,childId.lastIndexOf(","));
	    	bindChildId=childId.split(",");
	    	HTitle["change"]=HTitle["change"].substring(1,HTitle["change"].length);
	    	text=HTitle[tState]+taiQuTitleChart;
    	}
    	return false;
    }
    
    
    function getInitParams(){
    	   if(loadState["taiquChart"]==0){
    		   loadChart(parentId,childId,dateTime); 
    	   }else{
    		   $.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getParentsInfo",{comId:urlParams["dept_id"],count:loadState["taiquChart"]},function(result){
    			  // alert(JSON.stringify(result));
    			   categorie=[];
    			   childId="'"+result.rows.childId.join("','")+"'";
    			   bindChildId=childId.split(",");
    			   categorie=result.rows.childName;
     			   HTitle["change"]='"'+categorie.join('","')+'"';
    			   text=HTitle[tState]+taiQuTitleChart;
    			   parentId=urlParams["dept_id"];
    			   loadChart(parentId,childId,dateTime);
    			   outoRendChart();
    		   },"json");
    	   }
       }
   //初始化
   $(function(){
	   init();
	   getInitParams();
	  /*  loadChart(parentId,childId,dateTime);
	   outoRendChart(); */
   })
   //接触自动刷新
   function removeRendChart(){
	   clearInterval(interval)
   }
   //自动自动刷星表
   function outoRendChart(){
	   interval=setInterval(function(){
		 rendChart(dateTime);
	   },n*1000);
   }
   //刷新表格
	function rendChart(datetime){
		categories=[];
	   loadChart(parentId,childId,datetime);
	   
   }	

 	/********************************************************************************************************************/
 	 [
        {name:'访问来源',type:'pie',selectedMode: 'single',radius : [30, 70],
         x: '20%', width: '40%',funnelAlign: 'right',max: 1548,
         itemStyle : {
                normal:{
                	label : {position : 'inner'},
                    labelLine : {show : false}
                }
            },
            data:[
                {value:335, name:'直达'},
                {value:679, name:'营销广告'},
                {value:1548, name:'搜索引擎'}
            ]
        },
        {
            name:'访问来源',type:'pie',radius : [100, 140],x: '60%',
            width: '35%',funnelAlign: 'left',max: 1048,
            data:[]
        }
    ]

  
   
   
   /*****************************************************************************************************************/

		 		
		 		function loadChart(compId,childId,date){
		 			series= [
		 		             {name: '电量损失',color: '#FF3300', size: '60%',type: 'pie',data:[],  
		 		            	 dataLabels: {formatter: function () { return this.y > 5 ? this.point.name : null; },color: 'white',distance: -20} 
		 		             },
		 		             {name: '电量损失',color: '#FF3300',  size: '100%', innerSize: '60%',type: 'pie',data:[] },
		 		             ];
		 		 	$.post(path+"ws/ChartDaoServiceImpl/ChartDaoServiceImpl/getChartInfo",{comId:compId,childId:childId,typeId:"5",date:date},function(result){
		 		 		//非结构性代码，模拟数据
		 		 		console.log(JSON.stringify(result));
		 		 		console.log("aa"+categories.length);
		 		 		for(var index=0,len=result.length;index<len;index++){
		 		 		series[0].data.push({data:{url:path+"page/cockpit/power_loss/taiwan_area_blackout_grid.html",comId:compId,childId:bindChildId[index/bindChildId.length],typeId:"5",date:date},
		 		 								   name:categorie[index],
		 		 			color:color[0][index],
		 		 			y:changeQ(result[index]["TQ_TD_COUNT"])});
		 		 		series[1].data.push({data:{url:path+"page/cockpit/power_loss/taiwan_area_blackout_grid.html",
		 		 								   comId:compId,
		 		 								   childId:bindChildId[index],
		 		 								   typeId:"5",
		 		 								   date:date,
		 		 								   deptName:categorie[index]},
		 		 			                 name:categorie[index]+"以恢复",
		 		 			                 color:restorColor[colorStyle],
		 		 			                 y:changeQ(result[index]["TQ_TD_COUNT"])-parseInt(result[index]["TQ_UNRECOVERED"])});
		 		 		series[1].data.push({data:{url:path+"page/cockpit/power_loss/taiwan_area_blackout_grid.html",
		 		 								   comId:compId,
		 		 								   childId:bindChildId[index],
		 		 								   typeId:"5",
		 		 								   date:date,
		 		 								   deptName:categorie[index]},
		 		 		 					name:categorie[index]+"未恢复",
		 		 		 					color:recoveColor[colorStyle],
		 		 							y:changeQ(result[index]["TQ_UNRECOVERED"])
		 		 							});
		 		 		
	 		 		}
		 		 		console.log(JSON.stringify({bb:series}))
		 		 		console.log(JSON.stringify({AA:categories}))
		 		 		var options={	
		 						"title.text":"",
		 						"xAxis.categories":categorie,
		 						"yAxis.title.text":"单位：条",
		 						"subtitle.text":"数据：人工填报<br/>时间:"+getNowDateTime(),
		 						series:series
		 		    		}
		 			$("#container").createChart(options,null);	
		 			},"json");  
		 			$("#title").html(text) ;
		 		}; 
   </script>
  </body>
</html>