87,910
社区成员
发帖
与我相关
我的任务
分享
/**
* 统计分析-河流流量统计(水文) 控制器
*/
Ext.define('MyApp.controller.statAnalysis.hydrology.FlowStatCtrl', {
extend : 'Ext.app.Controller',
requires : [],
stores : ['statAnalysis.hydrology.FlowStatStore','statAnalysis.hydrology.FlowStatComboStore'],
models : [],
views : ['statAnalysis.hydrology.container.FlowStatPanel','statAnalysis.hydrology.grid.FlowStatGrid',
'statAnalysis.hydrology.container.FlowStatChartPanel','component.HighChartView','component.MonthField',
'statAnalysis.hydrology.entry.FlowStatEntry'
],
refs : [{
ref : 'highchartview',
selector : 'flowstatentry highchartview'
}, {
ref : 'flowstatchartpanel',
selector : 'flowstatentry flowstatchartpanel'
}, {
ref : 'flowstatpanel',
selector : 'flowstatentry flowstatpanel'
}, {
ref : 'flowstatgrid',
selector : 'flowstatentry flowstatgrid'
}],
init : function() {
this.control({
'flowstatentry flowstatchartpanel combobox' : {
select : this.loadData
},//加载图表时第一次加载数据
'flowstatentry highchartview':{
afterrender:this.highchartviewFirstLoad
},
'flowstatentry flowstatpanel button[action=search]' :{
click : this.searchFlowStatData
},
'flowstatentry':{
close:this.onCloseTab
}
});
},
/**
* 关闭tab,清空数据
*/
onCloseTab:function(){
//取得grid中的store
var grid=this.getFlowstatgrid();
var store=grid.store;
//加载新数据之前清空
store.removeAll();
//给年份下拉框赋值
var combo = this.getFlowstatchartpanel().down('combobox[name=NF]');
var comboYF =this.getFlowstatchartpanel().down('combobox[name=YF]');
//清空时间数据
combo.store.removeAll();
comboYF.store.removeAll();
},
/**
* 年份和月份的combobox,select事件
*
*/
loadData:function(combo, records, eOpts){
var year = this.getFlowstatchartpanel().down('combobox[name=NF]').value;
var month = this.getFlowstatchartpanel().down('combobox[name=YF]').value;;
//通过年份得到store
var store=this.getStore('statAnalysis.hydrology.FlowStatStore');
//取得固定年份的值
var arr=store.query("NF", year);
var records=arr.items;
var arrData = [];
for(index in records){
if(records[index].get('YF')==month){
arrData.push(records[index])
}
}
//过滤后records,作为数据源给图表
getCtrl('statAnalysis.hydrology.FlowStatCtrl').loadDataToChart('月河流流量',year+'年'+month+'月',arrData);
},
/**
* chart数据加载
* @param title 标题(固定)
* @param subTitle 子标题(年份)
* @param store 数据
*/
loadDataToChart:function(title,subTitle,arrData){
var highchartview=this.getHighchartview();
var id=highchartview.getEl().id;
//判断有无数据
if (arrData.length==0){
subTitle = subTitle+'<span style="color:red">(无数据)</span>';
}else{
subTitle = subTitle
}
//定义图表基础配置
var options = {
chart: {
renderTo: id,
type: 'column',
spacingLeft:30,
spacingRight:40
},
credits:{
enabled:false
},
xAxis: {
},
yAxis: {
min: 0,
title: {
text: '流量(m3/s) '
}
},
tooltip: {
formatter:function(){
var str='<span style="font-size:10px">'+this.points[0].key+'</span><table>';
for(var i=0;i<arrData.length;i++){
str+='<tr><td style="color:'+this.points[i].series.color+';padding:0;font-size:12px;">'+
this.points[i].series.name+':</td><td style="padding:0;font-size:12px;"><b>';
if(this.points[i].y == -1){
str +='无数据';
}else{
str +=this.points[i].y+'(m3/s)';
}
str +='</b></td></tr>'
}
return str+'</table>';
},
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: []
};
options.title={
text: title
};
options.subtitle={
text:subTitle
};
var series=[];
for(var i in arrData){
var seriesOne={name:arrData[i].get('MC'),data:[]};
seriesOne.data.push(arrData[i].get('R1'));
seriesOne.data.push(arrData[i].get('R2'));
seriesOne.data.push(arrData[i].get('R3'));
seriesOne.data.push(arrData[i].get('R4'));
seriesOne.data.push(arrData[i].get('R5'));
seriesOne.data.push(arrData[i].get('R6'));
seriesOne.data.push(arrData[i].get('R7'));
seriesOne.data.push(arrData[i].get('R8'));
seriesOne.data.push(arrData[i].get('R9'));
seriesOne.data.push(arrData[i].get('R10'));
seriesOne.data.push(arrData[i].get('R11'));
seriesOne.data.push(arrData[i].get('R12'));
seriesOne.data.push(arrData[i].get('R13'));
seriesOne.data.push(arrData[i].get('R14'));
seriesOne.data.push(arrData[i].get('R15'));
seriesOne.data.push(arrData[i].get('R16'));
seriesOne.data.push(arrData[i].get('R17'));
seriesOne.data.push(arrData[i].get('R18'));
seriesOne.data.push(arrData[i].get('R19'));
seriesOne.data.push(arrData[i].get('R20'));
seriesOne.data.push(arrData[i].get('R21'));
seriesOne.data.push(arrData[i].get('R22'));
seriesOne.data.push(arrData[i].get('R23'));
seriesOne.data.push(arrData[i].get('R24'));
seriesOne.data.push(arrData[i].get('R25'));
seriesOne.data.push(arrData[i].get('R26'));
seriesOne.data.push(arrData[i].get('R27'));
seriesOne.data.push(arrData[i].get('R28'));
if(arrData[i].get('R29')=='-'){
seriesOne.data.push(-1);
}else{
seriesOne.data.push(parseFloat(arrData[i].get('R29')));
};
if(arrData[i].get('R30')=='-'){
seriesOne.data.push(-1);
}else{
seriesOne.data.push(parseFloat(arrData[i].get('R30')));
};
if(arrData[i].get('R31')=='-'){
seriesOne.data.push(-1);
}else{
seriesOne.data.push(parseFloat(arrData[i].get('R31')));
};
//添加到series
series.push(seriesOne);
};
//设置x轴
options.xAxis= {
categories:["一日","二日","三日","四日","五日","六日","七日","八日","九日","十日","十一日","十二日","十三日","十四日","十五日","十六日","十七日","十八日","十九日","二十日",
"二十一日","二十二日","二十三日","二十四日","二十五日","二十六日","二十七日","二十八日","二十九日","三十日","三十一日"],//X轴目录
labels:{
rotation:-20,
y:30
}
};
options.series =series;
var oldChart=highchartview.getChart();
if(oldChart){
oldChart.destroy();
};
//如果x轴超过8条加入滚动条
if(options.xAxis.categories.length>8){
options.scrollbar={
enabled:true
};
options.xAxis.max=7;
};
var newChart = new Highcharts.Chart(options);
highchartview.setChart(newChart);
highchartview.up('panel').getEl().unmask();
},
/**
* 首页图标第一次加载
*/
highchartviewFirstLoad:function(){
this.loadDataToChart('月河流流量','','');
},
/**
* 查询记录
*/
searchFlowStatData:function(butt){
//找到PANEL
var panel=butt.up('panel');
//通过PANEL找到查询条件的具体值
var MC=panel.down('combo[name=MC]').value;//河流名称
var startRQ=Ext.Date.format(panel.down('monthfield[name=startRQ]').value,'Y-m');
var endRQ=Ext.Date.format(panel.down('monthfield[name=endRQ]').value,'Y-m');
var startTime=Ext.Date.format(panel.down('monthfield[name=startRQ]').value,'Y');
var endTime=Ext.Date.format(panel.down('monthfield[name=endRQ]').value,'Y');
var searchField={};
searchField.MC = MC;
searchField.startRQ=startRQ;
searchField.endRQ=endRQ;
//对河流名称进行验证
if(MC==null||MC==''){
Ext.Msg.alert('提示','请选择河流名称,可多选');
return ;
}
//取得grid中的store
var grid=panel.down('flowstatgrid');
var store=grid.store;
//加载新数据之前清空
store.removeAll();
store.load();
//给年份下拉框赋值
var combo=panel.down('combobox[name=NF]');
var comboYF = panel.down('combobox[name=YF]');
//清空时间数据
combo.store.removeAll();
comboYF.store.removeAll();
var data=[];
for(startTime;startTime<=endTime;startTime++){
data.push({name:startTime,value:startTime});
};
combo.store.loadData(data);
var NF=Ext.Date.format(panel.down('monthfield[name=startRQ]').value,'Y');
var YF=Ext.Date.format(panel.down('monthfield[name=startRQ]').value,'m');
combo.setValue(NF);
comboYF.setValue(YF);
//发送到后台进行查询
Ext.Ajax.request({
url:'flowStat!queryList',
params:{
searchField:Ext.encode(searchField)
},
method:'POST',
//查询成功后,进行图标数据的加载
success:function(response,opt){
// console.log('Success!!!');
//返回一行记录
var res=Ext.decode(response.responseText);
var data = res.jsonObject.data;
store.loadData(data);
var arr=store.query("NF", NF);
var records=arr.items;
var arrData = [];
for(index in records){
if(records[index].get('YF')==YF){
arrData.push(records[index])
}
}
MyApp.app.getController('statAnalysis.hydrology.FlowStatCtrl').loadDataToChart('月河流流量',NF+'年'+YF+'月',arrData);
}
});
}
});