ext

var seat_store,type_store,OD_store,obj_store,timetype_store,hour_store;
var  fa_store,time_store;

Ext.onReady(function() {
	var yxsj="";
	time_store=new Ext.data.JsonStore({
		fields : ["id", "name"]	
	});
	fa_store=new Ext.data.JsonStore({
		fields : ["id", "name"]	
	});
	HighStock.getAllfa(function(data) {
		fa_store.loadData(data);
	})
	obj_store= new  Ext.data.JsonStore({
		fields : ["id", "name"]	,
	
	});
	obj2_store= new  Ext.data.JsonStore({
		fields : ["id", "name"]	,
	data : [{id : "0",
		name : "总客流合计",	
	},{id : "1",name : "上行客流合计",
		
	},{id : "2", name : "下行客流合计",	
	},{id : "3", name : "单OD",}]
	});
	
	OD_store= new  Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [{name : "沪宁线",
				value : "5733",
			}]
	});
	hour_store= new  Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [{name : "0500-0530",
				value : "1",
			},{name : "0530-0600",
				value : "2",
			}
			,{name : "0600-0630",
				value : "3",
			}
			,{name : "0630-0700",
				value : "4",
			}
			,{name : "0700-0730",
				value : "5",
			}
			,{name : "0730-0800",
				value : "6",
			}
			,{name : "0800-0830",
				value : "7",
			}
			,{name : "0830-0900",
				value : "8",
			}
			,{name : "0900-0930",
				value : "9",
			},{name : "0930-1000",
				value : "10",
			},{name : "1000-1030",
				value : "11",
			},{name : "1030-1100",
				value : "12",
			}
			,{name : "1100-1130",
				value : "13",
			}
			,{name : "1130-1200",
				value : "14",
			}
			,{name : "1200-1230",
				value : "15",
			}
			,{name : "1230-1300",
				value : "16",
			}
			,{name : "1300-1330",
				value : "17",
			}
			,{name : "1330-1400",
				value : "18",
			}
			,{name : "1400-1430",
				value : "19",
			},{name : "1430-1500",
				value : "20",
			},{name : "1500-1530",
				value : "21",
			},{name : "1530-1600",
				value : "22",
			}
			,{name : "1600-1630",
				value : "23",
			}
			,{name : "1630-1700",
				value : "24",
			}
			,{name : "1700-1730",
				value : "25",
			}
			,{name : "1730-1800",
				value : "26",
			}
			,{name : "1800-1830",
				value : "27",
			}
			,{name : "1830-1900",
				value : "28",
			}
			,{name : "1900-1930",
				value : "29",
			},{name : "1930-2000",
				value : "30",
			},{name : "2000-2030",
				value : "31",
			},{name : "2030-2100",
				value : "32",
			}
			,{name : "2100-2130",
				value : "33",
			}
			,{name : "2130-2200",
				value : "34",
			},{name : "2200-2230",
				value : "35",
			}
			,{name : "2230-2300",
				value : "36",
			}				
			]
	}); 
	timetype_store= new  Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [{name : "按天",
			value : "day"},
			
			{name : "按半小时",
				value : "min",
			}]
	});
	type_store=new Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [
		        {
				name : "全部",
				value : "all",
			},{
			name : "高铁",
			value : "G"
		}]
	});
	seat_store = new Ext.data.JsonStore({
		fields : ["name", "value"],
		data : [{
			name : "全部",
			value : "all",
		}, {
			name : "一等座",
			value : "M"			
		}, {
			name : "二等座",
			value : "O"
		}]
	});
	new Ext.Viewport({

		layout : "border",
		items : [ {
			region : "north",
			height : 79,
			title : "预测精度监视/配置调整综合控制",
			xtype : 'tabpanel',
			activeTab:0,
			items : [{	title : 'OD客流方式',
				tbar:[{xtype : 'label',text:'线路/区段选择: '},{xtype : 'combo',id:'where1', emptyText:'请选择',
					 store:OD_store,mode : "local",triggerAction : "all",editable : false,
						selectOnFocus : true, displayField : "name",valueField : "value",
						listeners : {
							select : function() {
								var id = Ext.getCmp('where1').getValue();
								Ext.getCmp('where2').disable();
								Ext.getCmp('where6').disable();
								//alert(id);
								HighStock.getobj(id,function(data) {
									obj_store.loadData(data);
								});
								}},
						},
				      {xtype : 'label',text:'分析对象选择: '},
				      {xtype : 'combo',id:'where7', 
							 store:obj2_store,mode : "local",triggerAction : "all",editable : false,
								selectOnFocus : true, displayField : "name",valueField : "id",
									listeners : {
										select : function() {
											var id = Ext.getCmp('where7').getValue();
											//alert(id);
										if(id==3){
											Ext.getCmp('where2').enable(); 
										}else{
											Ext.getCmp('where2').disable(); 
										}
											}},
									},
				      {xtype : 'combo',id:'where2',emptyText:'请选择',
				    	  store:obj_store,mode : "local",triggerAction : "all",editable : false,
							selectOnFocus : true, displayField : "name",valueField : "id"},
				      {xtype : 'label',text:'列车等级选择:  '},{xtype : 'combo',id:'where3', value :'全部',
				    	  store:type_store,mode : "local",triggerAction : "all",editable : false,
							selectOnFocus : true, displayField : "name",valueField : "value"
				    	  },
				      {xtype : 'label',text:'座位等级选择:  '},{xtype : 'combo',value :'全部',id:'where4',
							store:seat_store,mode : "local",triggerAction : "all",editable : false,
							selectOnFocus : true, displayField : "name",valueField : "value"},
				],
			bbar : [{xtype : 'label',text:'数据统计时间单位:'},{xtype : 'combo',id:'where5', value :'按天',
				 store:timetype_store,mode : "local",triggerAction : "all",editable : false,
					selectOnFocus : true, displayField : "name",valueField : "value",
					listeners : {
						select : function() {
							var id = Ext.getCmp('where5').getValue();
							//alert(id);
						if(id=='day'){
							Ext.getCmp('where6').enable(); 
						}else{
							Ext.getCmp('where6').disable(); 
						}
							}},
					},
					{xtype : 'label',text:'指定时段:'},
					{xtype : 'combo',id:'where6', emptyText:'请选择',
						 store:hour_store,mode : "local",triggerAction : "all",editable : false,
							selectOnFocus : true, displayField : "name",valueField : "value"},

							{xtype:"button",id:"btnEnter",text:"<font color='blue'>生成图表</font>",
								 listeners:{
					                  "click":function(){
					                	  var xl = Ext.getCmp('where1').getValue();
					                	  var OD= Ext.getCmp('where2').getValue();
					                	  var train= Ext.getCmp('where3').getValue();
					                	  var seat= Ext.getCmp('where4').getValue();
					                	  alert(xl+OD+train+seat);
					                  }
					              },
								}
			        ]
				},
//			         {title : '区段客流密度方式',
//					tbar:[
//					      {xtype : 'label',text:'线路/区段选择: '},{xtype : 'combo',emptyText:'请选择',
//						 store:OD_store,mode : "local",triggerAction : "all",editable : false,
//							selectOnFocus : true, displayField : "name",valueField : "value"},
//					      {xtype : 'label',text:'列车等级选择: '},{xtype : 'combo',value :'全部',
//								store:type_store,mode : "local",triggerAction : "all",editable : false,
//								selectOnFocus : true, displayField : "name",valueField : "value"
//					    	  },
//					      {xtype : 'label',text:'座位等级选择: '},{xtype : 'combo',value :'全部',
//								store:seat_store,mode : "local",triggerAction : "all",editable : false,
//								selectOnFocus : true, displayField : "name",valueField : "value"},
//					      ],
//					      bbar : [{}],
//					}
			         ]
		},

		{
			region : "south",
         
			height : 50,
			html:'上海至苏州单OD的误差 为11%， 超出标准值5个百分点，建议调整预测配置',
			title : "<font color='red'>预警表示区域</font>"
		},

		{
			region : "center",
			width : 10000,
			height : 520,
			xtype : 'panel',
			items:[{
				html:'<div id="chart" style="width:100%;height:520px; margin: 0 auto"></div>'
			}],
			autoScroll:true,
			titleCollapse:true,
			title : "图表展示"
		},

		{
			region : "west",

			width : 160,
			height : 450,
			xtype : 'tabpanel',
			activeTab:0,
			items : [{
				title : '方案调整',
				items:[{tbar:[
				              {xtype : 'label',text:'方案选择: ' ,  autoWidth:true},
				              {xtype : 'combo',id:'plan',
									store:fa_store,mode : "local",triggerAction : "all",editable : false,
									selectOnFocus : true, displayField : "name",valueField : "id",width:120,
									listeners : {
										select : function() {
											id = Ext.getCmp('plan').getValue();
											HighStock.getTime(id,function(data) {
												Ext.getCmp('yxsj').setText('有效日期:'+data,true);
												//Ext.getCmp('cj').setText('场景:平时稳态',true);
												 myMask = new Ext.LoadMask("chart", {
														msg : "运算中，请稍候......"
													});
											});
											
											}},
									},
						 ]},
						 
						 {xtype : 'label',id:'yxsj',text:'有效日期:',}, 
						 
						
				]
			},
//			{
//				title : '数据修改',
//				items:[{xtype : 'label',text:'日期：'},
//				       {xtype : 'combo',emptyText:'2011-06-20'},
//				       {xtype : 'radio',boxLabel:'时间段方式：'},
//				       {xtype : 'combo',emptyText:'0600-0630'},
//				       {xtype : 'radio',boxLabel:'OD方式：'},
//				       {xtype : 'combo',emptyText:'上海-苏州'},
//				       {xtype : 'button',text:'数据修改>>'},
//				       {xtype : 'button',text:'数据保存<<'},
//				]
//			}
			],
			title : "左边面板"
		},

		{
			region : "east",

			width : 160,

			title : "对比分析信息表示区域",
			html:' <div id="show" >&nbsp;</div> '
		}

		]

	});	
	 myMask = new Ext.LoadMask("chart", {
		msg : "运算中，请稍候......"
	});
	myMask.show();
	var xList = new Array();
	var trueList= new Array();
	var guessList = new Array();
	var errorList=new Array();
	HighStock.getDateList(function(dateList){
		HighStock.getDateStringList(function(dateStringList){
			HighStock.getAllMapList(function(data) {
         
				for(var j=0;j<dateList.length;j++){
				//for(var j=0;j<1;j++){
					for(var i=0;i<data[dateStringList[j]].xList.length;i++){     //data[dateStringList[j]].xList.length 时间段
						
						var x=null;
						if(i%2==1){
						x=Date.UTC(dateList[j][0],dateList[j][1]-1,dateList[j][2],i/2+6,0);}
						else{
						x=Date.UTC(dateList[j][0],dateList[j][1]-1,dateList[j][2],i/2+5,30);}
						xList.push(data[dateStringList[j]].xList[i]);
						trueList.push([x,parseInt(data[dateStringList[j]].trueList[i])]);
						guessList.push([x,parseInt(data[dateStringList[j]].guessList[i])]);
						var tempTrue=parseInt(data[dateStringList[j]].trueList[i]);
						if(parseInt(data[dateStringList[j]].trueList[i])==0)tempTrue=1;
						
						temp=(parseInt(data[dateStringList[j]].guessList[i])-parseInt(data[dateStringList[j]].trueList[i]))/tempTrue*100;
						errorList.push([x,Math.round(temp*100)/100]);
					}

				}
				Array.prototype.indexOf=function(v) 
				{ 
				      for(var   i   in   this) 
				      { 
				            if(this[i]==v)   return   i; 
				      } 
				      return   -1; 
				}; 
				
				var chart = new Highcharts.StockChart({
					chart : {
						renderTo : 'chart',
						alignTicks: false,
						defaultSeriesType: 'line'//可选，默认为line。控制线条样式，line:折线;spline:平滑的线;area:折线、下边有颜色块儿;areaspline:平滑的线、下边有颜色块儿;column:柱状图;bar:横向条形图;pie:饼图;scatter:点状图;
					},
					global: {
						useUTC: true
					},
					title: {
						text: '数据对比分析图'
					},
					xAxis : {
						 type: 'datetime',
					        maxZoom:  3600000,
					        title: {
					            text: '日期'
					        }	
					},
					yAxis : [ {
						title : {
							text : '客流量（人）'
						},
						height : 200,
						lineWidth : 2
					}, {
						title : {
							text : '预测误差（%）'
						},
						labels: {
							formatter: function() {
								return this.value +'%'
							}
						},
						top : 300,
						height : 80,
						offset : 0,
						lineWidth : 2
					} ],
					navigator : {
						enabled : true
					},
					
					tooltip : {
						formatter: function(){
				            var point = this.points[0], 
								series = point.series, 
								unit = series.unit && series.unit[0], 
								format = '%A,%Y-%b-%e %H:%M', // with hours
				 				s;
                            var div=document.getElementById('show');
	                    	
	                    	
				            var temp=Highcharts.dateFormat(format,this.x);
				          
				            
				            
				            if (unit == 'day') { // skip hours
				                format = '%A,%Y-%b-%e';
				            }
				            var color="red";
				           if(parseInt(Highcharts.numberFormat(this.points[2].y, 1))<0) color="green"; else if(parseInt(Highcharts.numberFormat(this.points[2].y, 1))==0) color="black";
				            var html= '<b>' +temp+'</b>' +
				            
				            	'<br/><span style="color:' + this.points[0].series.color + '">'+this.points[0].series.name+': </span>' + Highcharts.numberFormat(this.points[0].y, 0) +'人'+
				            	'<br/><span style="color:' + this.points[1].series.color + '">'+this.points[1].series.name+': </span>' + Highcharts.numberFormat(this.points[1].y, 0) +'人'+
				            	//'<br/><span style="color:black">'+'相差人数'+': </span>' + Math.abs(parseInt(this.points[1].y)-parseInt(this.points[0].y)) +'人'+
				            	'<br/><span style="color:' + this.points[2].series.color + '">'+this.points[2].series.name+': </span><span style="color:' +color + '">'+Highcharts.numberFormat(this.points[2].y, 2) +'%</span>';
				           
				            var lenth=trueList.indexOf(this.x+","+this.points[0].y); 
				           if(lenth!=-1){
				        	   console.log(lenth);
					           var data=errorList[lenth];
					           var data2=errorList[lenth-1];
					           var data3=errorList[lenth-2];
					           console.log(data);
				            div.innerHTML='当前日期：'+temp+ '<br/> 前1：'+  data[1]+ '<br/> 前2：'+  data2[1]+ '<br/> 前3：'+  data3[1] ;}
				            return html;
						},
						shared : true,
						crosshairs:[{//控制十字线
							width:1,
							color:"red",
							dashStyle:"shortdot"
						},
						{
							width:1,
							color:"red",
							dashStyle:"shortdot"
						}]
					},
					plotOptions:{//绘图线条控制
						line:{
							marker:{
								enabled:false//是否显示点
							}
						},
						series: {
							cursor: 'pointer',
							point: {
								events: {
									click: function() {
										var str="人";
										var temp="客流量:";
										if(this.series.name=="预测误差"){str="%";temp="误差率:"};
										hs.htmlExpand(null, {
											pageOrigin: {
												x: this.pageX, 
												y: this.pageY
											},
											headingText: this.series.name,
											maincontentText: Highcharts.dateFormat('%A,%Y年 %b月 %e 号', this.x) +':<br/> '+temp+ 
											this.y +str,
											width: 200
										});
									}
								}
							},
							marker: {
								lineWidth: 1
							}
						}
					},
					rangeSelector : {
						enabled:true,
						buttons : [ {
							type : 'hour',
							count : 18,
							text : '一天'
						}, 
						{
							type : 'day',
							count : 7,
							text : '一周'
						},{
							type : 'all',
							text : '全部'
						}
						],
						selected : 1,
						inputEnabled : true
					},
					legend: {
						enabled:true,
						layout: 'vertical',
						verticalAlign: 'top',
						align: 'right',
						x:0,
						y:100,
						verticalAlign: 'top',
						borderWidth: 1,
						shadow:true
					},
					series : [ {
						name : '真实数据',
						data :trueList
					}, {
						name : '预测数据',
						data :guessList
					} , {
						type : 'column',
						name : '预测误差',
						data : errorList,
						yAxis : 1
					} ]
				});
			});
		});
	});
	

});