ext

最新推荐文章于 2019-08-31 18:35:42 发布
最新推荐文章于 2019-08-31 18:35:42 发布
阅读量93 收藏
点赞数
分类专栏： 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sailei666/article/details/84040942
版权 


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" > </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
					} ]
				});
			});
		});
	});


});
sailei666
关注
专栏目录
EXT学习
nb_cloud的博客
07-10 550
Ext常见组件 Ext常见组件 ExtMessageBox介绍 MessageBox的方法 ExtProgressBar进度条组件 ExttoolbarToolbar ExtbuttonButton ExtmenuMenu 1. Ext.MessageBox介绍 Ext.window.MessageBox是一个工具类，它继承自Ext.window.Window对象，用
EXT 学习(一)
llvyuanjie的博客
12-19 532
ExtJS用来开发富客户端的JS框架, 主要用于创建前端用户界面, 与后台技术无关, 后台可以任何开发语言。
Ext JS 容器Containers
wangchunbo的博客空间
08-25 4050
Ext JS 容器(Containers)
Ext JS 6.7 中文文档：路由的使用
Evan 的博客
08-31 5532
本篇翻译自 Ext JS 6.7.0 官方文档，主要讲解了 Ext 提供的路由功能，之所以把它翻译出来，是因为大多数前端路由都采用了相近的模式，通过本文可以更好地理解单页面应用路由功能的原理及其使用方法。
ext4_dirty_inode与ext4_do_update_inode函数详解
SweeNeil
02-26 2051
一、ext4_dirty_inode 定义在fs/ext4/inode.c中，其内容如下： void ext4_dirty_inode(struct inode *inode, int flags) {     handle_t *handle;     if (flags == I_DIRTY_TIME)         return;     handle = ext4_journ...
制作ext4文件系统工具
02-01
纯linux原生make_ext4fs工具 用于制作ext4文件系统，支持selinux标签 使用方法： ./make_ext4fs [filesystem] [output_file] [-S binary_policy -f spec_file -a mount_point] [-b block_size] [-O feature] [-l ...
openlayers的ol-ext插件包的源码
12-22
openlayers的ol-ext插件包的源码，课程基于openlayers开发局域网地图，可以实现地图显示、地点标注、绘制图形、添加图片与文字、地图保存与恢复、地点搜索查询、路径规划、二三维地图切换等功能，为局域网地图的开发...
ext4-exactor.zip
07-01
在Android系统中，EXT4文件系统是广泛使用的主文件系统，用于存储应用程序、系统文件和其他数据。EXT4-extractor是一个专为Android设计的工具，它能够帮助开发者和故障排除人员解析EXT4格式的镜像文件，将其转换为一...
Ext6.0文档教学_ext_ｗｅｂ_
09-29
ext6.0文档教学，入门级教程，介绍里面的组件
ext4tc-开源
05-29
"ext4tc"可能是Total Commander的一个扩展或插件，使得用户能够在Total Commander中直接管理和操作ext2、ext3及ext4格式的Linux分区。 **描述解析：** 描述中提到"ext4tc 是total Commander 的文件系统插件"，这...
KKобтьу╬kkx.net.url
09-14
KKобтьу╬kkx.net.url
『人事流程图新』人力资源培训计划制定工作流程图.xlsx
09-14
『人事流程图新』人力资源培训计划制定工作流程图.xlsx
Delphi XE Web开发使用嵌入版Firebird数据库，演示IntraWeb的使用
09-14
Delphi XE Web开发使用嵌入版Firebird数据库，演示IntraWeb的使用。 开发测试环境： Embarcadero Delphi XE Version 15.0.3890.34076 IntraWeb 14.0.32 Firebird 2.5.9 (Windows Build) 注：本delphi源代码参考官方文档，修改测试而成，都是本人实验成功的。(本人CSDN的ID:i8013)
基于Springboot和Mysql的汽车销售网代码，包括程序，中文注释，配置说明操作步骤
09-14
汽车销售网-汽车销售网-汽车销售网-汽车销售网-汽车销售网-汽车销售网-汽车销售网-汽车销售网-汽车销售网-汽车销售网-汽车销售网-汽车销售网 1、资源说明：汽车销售网源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件： ① 系统环境:Windows ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDEA、JDK、Maven、M
MATLAB的图像处理系统GUI设计.zip
09-14
linux常用命令大全
基于Flask的个人博客与小说爬取系统.zip
最新发布
09-14
该项目是一个基于Flask和requests框架的个人博客系统，并集成了小说爬取功能。用户可以在博客上发布文章，管理文章，同时还可以通过系统爬取小说并展示。项目提供了详细的安装教程和环境搭建步骤，以及清晰的用户界面展示。这是一个功能丰富，实用便捷的网站系统。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看READmE.文md件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
基于ssm的体育器材租借管理系统设计与实现.docx
09-14
基于ssm的体育器材租借管理系统设计与实现.docx
基于ResNet+BERT的多种融合方法实现的多模态情感分析源码+数据集+项目说明（人工智能课程实验）
09-14
基于ResNet+BERT的多种融合方法实现的多模态情感分析源码+数据集+项目说明（人工智能课程实验），本项目基于Hugging Face和torchvision实现，共有五种融合方法（2Naive 3Attention），在Models文件夹中查看 Project Structure |-- Multimodal-Sentiment-Analysis |-- Config.py |-- main.py |-- README.md |-- requirements.txt |-- Trainer.py |-- data | |-- .DS_Store | |-- test.json | |-- test_without_label.txt | |-- train.json | |-- train.txt | |-- data |-- Models | |-- CMACModel.py | |-- HSTECModel.py |
『人事流程图新』员工奖惩流程图.xls
09-14
『人事流程图新』员工奖惩流程图.xls
Ext JS实战指南
"Ext JS实战" 本文将深入探讨Ext JS这一强大的JavaScript框架，帮助读者掌握其在实际项目中的应用。Ext JS是一款用于构建富客户端Web应用程序的框架，以其丰富的组件库、强大的数据管理能力和优雅的API而闻名。"Ext...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值