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