Ext.namespace('Ext.ux');
Ext.ux.WaterRealtimeDisplayPanel = function(treeNode, panelId, config) {
this.treeNode = treeNode;
this.panelId = panelId;
var series=[{"name":"實時數(shù)據(jù)顯示","data":[]}];
var temhum = new Ext.form.ComboBox({
name : 'temhunm',
fieldLabel : '狀態(tài)',
allowBlank : false,
blankText : '請選擇溫濕度',
editable : false,
triggerAction : 'all',//all表示把下拉框列表框的列表值全部顯示出來
store : new Ext.data.ArrayStore({
fields : [ 'name', 'value' ],
data : [ [ '溫度', '1' ], [ '濕度', '2' ] ]
}),
mode : 'local',
displayField : 'name',
valueField : 'value',
width : 60
});
var storeProvince = new Ext.data.JsonStore({
autoLoad:true,
url : path+"/wenshi/getnode",
root : "options",
fields : [ {
name : 'name'
}]
});
var nodeCtl = new Ext.form.ComboBox({
fieldLabel : '節(jié)點',
allowBlank : false,
blankText : '請選擇節(jié)點',
editable : false,
triggerAction : 'all',
store : storeProvince,
mode : 'local',
displayField : 'name',
valueField : 'name',
width : 140
});
var stTime = new Ext.form.DateField({
fieldLabel : '選擇時間',
allowBlank : false,
emptyText : '請選擇開始日期',
editable : false,
format : 'Y-m-d',
maxValue : new Date(),
width : 130
});
var data = [
['y','年'],
['m','月'],
['d','日']
// ['w','周']
];
var store = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: data
});
var combo = new Ext.form.ComboBox({
store: store,
fieldLabel:"請選擇時間對應(yīng)的類型",
emptyText: '請選擇篩選類型',
mode: 'local',
triggerAction : 'all',
valueField: 'value',
displayField: 'text'
});
Ext.ux.WaterRealtimeDisplayPanel.superclass.constructor.call(this, {
id : this.panelId,
title : this.treeNode.text,
closable : true,
autoScroll : true,
height : 400,
items:[
{
layout:'column',
border:false,
items:[{
//columnWidth: .25 ,
layout:'form',
border:false,
labelAlign:'right',
width : 200,
labelWidth:40,
items:[
temhum, nodeCtl]
}
,{
layout:'form',
width : 200,
labelWidth:60,
border:false,
labelAlign:'left',
items:[stTime]
},//combo
combo
,
{
layout:'form',
border:false,
scope:this,
items:[{
xtype:'button',
border:false,
width:70,
style:"margin-left:10px",
text:'查詢',
scope:this,
handler:function(){
// 獲取表單對象
var _params_ = this.getForm().getValues(false);
var nodeid = nodeCtl.getValue();//獲取節(jié)點id
var checktype=combo.getValue();//選擇的篩選類型
var checktime=stTime.getValue();//獲取時間的值
var th = temhum.getValue();
if (th == undefined || th == ''){
Ext.Msg.alert("提示","節(jié)點不能為空");
return;
}
if (nodeid == undefined || nodeid == ''){
Ext.Msg.alert("提示","節(jié)點不能為空");
return;
}
if(!stTime.isValid()){
Ext.Msg.alert('信息', '時間為必選項');
return;
}
if (checktype == undefined || checktype == ''){
Ext.Msg.alert("提示","篩選類型不能為空");
return;
}
// 獲得統(tǒng)計【就是顯示的那個圖】 配置文件對象
var _op_ = this.getOptions();
//首先從后臺獲得x軸上值
var categories=_op_.xAxis.categories;
categories=[];
$.ajax({
type:"POST", // 提交方式
url:path+'/wenshi/collectHositoryDataName', // 提交地址
dataType:"json", // 解釋格式
data:{"nodeid":nodeid,"checktime":checktime.format('Y-m-d'),"checktype":checktype,"th":th}, // 請求參數(shù)
success:function(iJson){
var results = eval(iJson); // 轉(zhuǎn)換成 JSON 數(shù)據(jù)
var r = results[0].data;
for(var i=0;i<r.length;i++){
categories.push(r[i]);
}
_op_.xAxis.categories=categories;
},
error:function(){
Ext.Msg.alert('系統(tǒng)操作','網(wǎng)絡(luò)不通暢或數(shù)據(jù)格式不對！');
}
});
// 獲得統(tǒng)計 對象的 數(shù)據(jù)
var _series_ = _op_.series;
// 清空 統(tǒng)計 對象的 數(shù)據(jù) 重新加載
_series_ = [] ;
// 創(chuàng)建一個統(tǒng)計 對象胡方法
var _createChart_ = function (obj){new Highcharts.Chart(obj);};
// 向后臺發(fā)送請求
var d = new Ext.util.DelayedTask(function(){
$.ajax({
type:"POST", // 提交方式
url:path+'/wenshi/collectHositoryData', // 提交地址
dataType:"json", // 解釋格式
data:{"nodeid":nodeid,"checktime":checktime.format('Y-m-d'),"checktype":checktype,"th":th}, // 請求參數(shù)
success:function(iJson){
var results = eval(iJson); // 轉(zhuǎn)換成 JSON 數(shù)據(jù)
for(var i =0 ; i < results.length;i++){ // 解釋和裝載數(shù)據(jù)
_series_.push({name:results[i].name,data:results[i].data});
}
_op_.series = _series_; // 賦值
_createChart_(_op_); // 重新創(chuàng)建一個統(tǒng)計
},
error:function(){
Ext.Msg.alert('系統(tǒng)操作','網(wǎng)絡(luò)不通暢或數(shù)據(jù)格式不對！');
}
});
});
d.delay(1000);
}
}]
}]
},
{
xtype:'panel', // 創(chuàng)建 Highcharts 所依賴的 div
html:'<div id="'+"test"+'" style="width:1000px; height: 500px; margin: 0 auto"></div>'
}
],
listeners : {
activate : function(p) {
var obj=this.getOptions();
obj.series=series;
var chart =new Highcharts.Chart(obj);
}
},
getOptions:function(){
return {
chart : {
renderTo :"test",
type: 'spline'
},
lang : {
exportButtonTitle : '導出圖表',
printButtonTitle : '打印報表'
},
title : {
text : '節(jié)點歷史參數(shù)曲線圖'
},
xAxis : {
title : {
text : '采集時間'
}
,
//categories : ['1秒', '2秒','3秒']//設(shè)置x軸上分類名稱
},
yAxis : {
title : {
text : '節(jié)點參數(shù)值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
//enabled: false, //是否顯示提示框
formatter: function() {
return "時間:"+this.x +'<br/>'+"參數(shù)值:"+ this.y;
}
}
//,
// series : [{
// name : '實時數(shù)據(jù)顯示',
// data : [141, 100, 4]
// }]
};
}
});
};
Ext.extend(Ext.ux.WaterRealtimeDisplayPanel, Ext.FormPanel, {
});
Ext.reg('ljsStudentTuPanel', Ext.ux.WaterRealtimeDisplayPanel);
后臺導出圖片的方法是：
public class ImageController extends Controller{
public void index(){
String type = getPara("type");
String svg =getPara("svg");
String filename = getPara("filename");
ServletOutputStream out1 = null;
try {
filename = filename==null?"chart":filename;
out1 = getResponse().getOutputStream();
if (null != type && null != svg) {
svg = svg.replaceAll(":rect", "rect");
String ext = "";
Transcoder t = null;
if (type.equals("image/png")) {
ext = "png";
t = new PNGTranscoder();
} else if (type.equals("image/jpeg")) {
ext = "jpg";
t = new JPEGTranscoder();
} else if(type.equals("image/svg+xml")) {
ext = "svg";
}else if(type.equals("application/pdf")){
t = new PDFTranscoder();
ext = "pdf";
}
getResponse().addHeader("Content-Disposition", "attachment; filename="+ filename + "."+ext);
getResponse().addHeader("Content-Type", type);
if (null != t) {
TranscoderInput input = new TranscoderInput(new StringReader(svg));
TranscoderOutput output = new TranscoderOutput(out1);
try {
t.transcode(input, output);
} catch (TranscoderException e) {
out1.print("Problem transcoding stream. See the web logs for more details.");
e.printStackTrace();
}
} else if (ext.equals("svg")) {
OutputStreamWriter writer = new OutputStreamWriter(out1, "UTF-8");
writer.append(svg);
writer.flush();
writer.close();
} else
out1.print("Invalid type: " + type);
} else {
//getResponse().addHeader("Content-Type", "text/html");
// out.println("Usage:\n\tParameter [svg]: The DOM Element to be converted." +
// "\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");
}
} catch (Exception e) {
e.printStackTrace();
}finally{
try {
out1.flush();
getResponse().flushBuffer();
out1.close();
} catch (Exception e2) {
}
}
renderNull();//不跳轉(zhuǎn)
}
}