YtIoT/WebRoot/view/dataSearch/scripts/rtudataSearch.js

/**
 * 
 */

Ext.Loader.setConfig({
    enabled: true
});

Ext.Loader.setPath('Ext.ux', '../../res/extjs/examples/ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.RowExpander',
    'Ext.selection.CheckboxModel'
]);
var myStore=null;
var StatusStore;
var baseUrl;
var centerLng;
var centerLat;
var company_code;
var theme;
var ConfirmStore
var pieWidth;
var pieMask;
var myMask;
var V_LOGINNAME='',V_PASSWORD='';
var maxHeight = 10000;
var maxWidth = 10000;
var dwtype;

var sm = Ext.create('Ext.selection.CheckboxModel');

Ext.define('VDevices',{
	extend: 'Ext.data.Model',
	fields: [
		{ name:'id', type:'int'},
		{ name:'orderIdx', type:'int'},
		{ name:'company',	type:'string' },
		{ name:'name',	type:'string' },
		{ name:'device_id',	type:'string' },
		{ name:'data_time',	type:'string' },
		{ name:'point_name',	type:'string' },
		{ name:'point_code', type:'string' },
		{ name:'point_data', type:'string' },
		{ name:'device_type', type:'string' },
		{ name:'company_code', type:'string' },
		{ name:'dwtype', type:'int' }
	]
});


Ext.define('CompanyComboStore',{
	extend:'Ext.data.Model',
	fields: [
		{name:'owner_name',  type:'string'},
		{name:'owner_id',type:'string'}
	]
});

//var body_resize = function(){
//	maxHeight =  document.documentElement.clientHeight;
//	maxWidth = document.documentElement.clientWidth;
//	Ext.getCmp('DeviceDataPanel').setHeight(maxHeight);
//	Ext.getCmp('DeviceDataPanel').setWidth(maxWidth);
//}
var draw_confirm = function(record){
//	$("#WaterPiePanel_title_string").html(ConfirmStore[0].company+'.'+ConfirmStore[0].name+'.水系统监控设备电池电量情况');
	var data_0 = new Array();
	var data_1 = new Array();
	var data_2 = new Array();
	var d_time = new Array();
	var tmp_0 = null, tmp_1 = null, tmp_2 = null,tmp_t = null;
	var themecolor = ((theme=='')||(theme=='access'))?'#ffffff':'#000000';
	if(ConfirmStore==null)
		return;
	for(var i=0;i<ConfirmStore.length;i++){
		var rec = ConfirmStore[i];
			tmp_0 = parseFloat(rec.point_data);
			tmp_t = rec.data_time;
			data_0.push(tmp_0);
			d_time.push(tmp_t);
			$("#operation_num_1").html(data_0[0].toFixed(4));
			$("#operation_num_2").html(d_time[0]);	
	}

	
		var max = data_0[0];

		for(var i = 1; i < data_0.length; i++) {
		   var cur = data_0[i];
		   cur >= max ? max = cur : null
		   if(max == cur){
				time = d_time[i];
			} 
		}
		$("#operation_num_3").html(max.toFixed(4));
		$("#operation_num_4").html(time);	
	
	
		var min = data_0[0];

		for(var i = 1; i < data_0.length; i++) {
		   var cur = data_0[i];
		   cur <= min ? min = cur : null
		   if(min == cur){
				min_time = d_time[i];
			} 
		}
		$("#operation_num_5").html(min.toFixed(4));
		$("#operation_num_6").html(min_time);	
	

		var mColor1= '#34abf5';//[ '#DDDF0D','#f66167', '#34abf5']
	    if(data_0[0]<60)
	        mColor1 = '#f66167';
	    else if(data_0[0]<80)
	        mColor1 = '#DDDF0D';
	    var mColor2= '#34abf5';//[ '#DDDF0D','#f66167', '#34abf5']
	    if(data_1[0]<3)
	        mColor2 = '#f66167';
	    else if(data_1[0]<4)
	        mColor2 = '#DDDF0D';
		Highcharts.getOptions().colors = Highcharts.map([mColor2,mColor2,mColor1,mColor1], function (color) {
	    	return {
	    		radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
	    		stops: [
	    			[0, color],
	    			[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
	    		]
	    	};
	    });
		var point_name = record.get('point_name');
		Highcharts.chart('operation_area',{
			chart:{
				type:'area',
//				zoomType: 'x',
				zoomType: 'xy',
				backgroundColor: 'rgba(0,0,0,0)'
			},
//			color:['#f66167', '#34abf5'],
			title:{
//				text:(companyName==null)?'水系统监控告警处理情况跟踪':companyName+'.水系统监控告警处理情况跟踪',
				text:'RTU近两周数据',
				float:true,
				style:{fontSize:'14px',color:themecolor,fontWeight:'bold'},
				enabled:false
			},
			legend:{
//				enabled:false,
				floating:true,
				x:410,
				y:-230,
				itemStyle:{fontSize:'12px',color:themecolor,fontWeight:'bold'}
			},
            exporting: {   
                enabled: false
            },
            credits: {
                enabled: false
            },
			xAxis:[{
				categories:d_time,
				labels:{
					enabled:false
				},
				crosshair: true
			}],
			yAxis:[{
				title:{
					// text:point_name,
					text:'',
					style:{fontSize:'10px',color:themecolor,fontWeight:'bold'}
				},
				gridLineColor:'rgba(0,0,0,0.2)',
				labels:{
					format:'{value}',
					style:{fontSize:'10px',color:themecolor,fontWeight:'bold'}
				},
				max:max+max*0.3,
				min:0
			}],
			tooltip:{
				shared:true
			},
			plotOptions:{
				area:{
					stackiung:'normal',
					marker:{
						lineWidth:0,
						enabled:false,
						radius:0
					}
				}
			},
			series:[{
					name:point_name,
					type: 'area',
					data:data_0,
					lineWidth:1,
					tooltip:{
						valueSuffix: ''
					},
					fillColor: {
						linearGradient: {
							x1: 0,
							y1: 0,
							x2: 0,
							y2: 1
						},
						stops: [
							[0, '#34abf5'],
							[1, Highcharts.Color('#34abf5').setOpacity(0.0).get('rgba')]
						]
					}
				}
			]
		});
}
var show_datapie = function(record){
	if(myStore==null)
		return;
	var themecolor = ((theme=='')||(theme=='access'))?'#ffffff':'#000000';
	var nrow = myStore.getCount();
	var device_id = record.get('device_id');
	var point_code = record.get('point_code');
	for(var i=0;i<nrow;i++){
		if(myStore.getAt(i).get('device_id')==device_id){
			$("#operation_num_1").html('');
			$("#operation_num_2").html('');
			$("#operation_num_3").html('');
			$("#operation_pie").html('');
			$("#operation_area").html('');
			pieMask.show();
			var query = new Object();
			// query.V_LOGINNAME = V_LOGINNAME;
			// query.V_PASSWORD = V_PASSWORD;
			query.device_id = device_id;
			query.point_code = point_code;
			
			$.ajax({
		        type:'POST',
		        url: baseUrl+"iot/data/view/getSyncDataRList",
		        data: {
		        	queryJson : Ext.JSON.encode(query)
		    	 },
		        success: function(result){
		            var json = eval('(' + result + ')');
		            if(json.action=='getSyncDataVList'){
		                ConfirmStore = json.RESULT;
		                draw_confirm(record);
		            }
		            pieMask.hide();
		        }
		    });
			break;
		}
	}
//	pieMask.hide();
}
var getCurrentData = function(){
	var div = Ext.getCmp('VWaterOptionListPanel');
	var model = div.getSelectionModel();
	var record = model.getSelection()[0];
	show_datapie(record);
}
var body_resize = function(){
	maxHeight =  document.documentElement.clientHeight;
	maxWidth = document.documentElement.clientWidth;
	Ext.getCmp('WaterAlarmPanel').setHeight(maxHeight);
	Ext.getCmp('WaterAlarmPanel').setWidth(maxWidth);
}
function exportbtn_click(){
	if(myStore==null)
		return;
	var div = Ext.getCmp('VWaterOptionListPanel');
	var model = div.getSelectionModel();
	var record = model.getSelection()[0];
	var nrow = myStore.getCount();
	var fields = '';
	var device_id = record.get('device_id');
	var point_code = record.get('point_code');
	var point_name = record.get('point_name');
	var array = ['id','device_id','name','point_code','point_data','company','data_time'];
	var name = ['编号','设备编号','设备名称','端口号','数据值','公司名称','添加时间'];
	for(var i=0;i<7;i++){
		if(i>0)
			fields += ',';
	    fields += '{id:"'+array[i]+'",title:"'+name[i]+'",shown:"'+true+'"}';
	}
			var query = new Object();
			query.device_id = device_id;
			query.point_code = point_code;
			query.EXPORT_FILE = 'RTU'+point_name+'数据监控列表';
			query.fields = '['+fields+']';
			$.ajax({
		        type:'POST',
		        url: baseUrl+"iot/excel/view/rtuexportexl",
		        data: {
		        	queryJson : Ext.JSON.encode(query)
		    	 },
		    	 success: function(result){
			            var json = eval('(' + result + ')');
			            if(json.action=='dormExport'){
			                ConfirmStore = json.RESULT;
			                var elemIF = document.createElement("iframe");
							elemIF.src = baseUrl+json.filename;
							elemIF.style.display = "none"; 
							document.body.appendChild(elemIF);
			            }
			            
			        }
		    });
			
}
Ext.onReady(function(){  
	baseUrl = document.getElementById('basePath').value;
	theme = document.getElementById('theme').value;
	company_code = document.getElementById('company_code').value;
	$("#V_LOGINNAME").val(sessionStorage.getItem('V_LOGINNAME'));
	$("#V_PASSWORD").val(sessionStorage.getItem('V_PASSWORD'));
	V_LOGINNAME = $("#V_LOGINNAME").val();
    V_PASSWORD = $("#V_PASSWORD").val();
	var currentWidth = document.documentElement.clientWidth;
	pieWidth = currentWidth/7;
	var chkIcon = '<img src="'+baseUrl+'res/img/common/check.gif"/>'
	var unchkIcon = '<img src="'+baseUrl+'res/img/common/uncheck.gif"/>'
	var countPerPage = 20;

	
	var chkBoolean = function(flag) {
		if(flag)
			return chkIcon;
		return unchkIcon;
	}
	var queryJson = new Object();
	queryJson.V_LOGINNAME = V_LOGINNAME;
	// queryJson.V_PASSWORD =  V_PASSWORD;
	queryJson.COMMSTATUS = 'NO';
	if((company_code!=null)&&(company_code!='null')&&(company_code.length>0))
		queryJson.company_code = company_code;
	myStore = Ext.create('Ext.data.Store', {
	    model: 'VDevices',
	    pageSize: countPerPage, 
	    proxy: {
	        type: 'ajax',
	        actionMethods: {
                create : 'POST',
                read   : 'POST', // by default GET
                update : 'POST',
                destroy: 'POST'
	        },
	        url: baseUrl+'iot/data/view/getSyncrtuDataVList',
	        reader: {
	            type: 'json',
	            root: 'RESULT',
	            totalProperty: 'totalCount'
	        },
	        extraParams:{
	        	queryJson:Ext.JSON.encode(queryJson)
	        }
	    },
	    sorters:[{
	    	property:'data_time',
	    	direction:'DESC'
	    }],
	    remoteSort: true
	});
	var CompanyStory = Ext.create('Ext.data.Store',{
		model: 'CompanyComboStore',
	    proxy: {
	        type: 'ajax',
	        actionMethods: {
                create : 'POST',
                read   : 'POST', // by default GET
                update : 'POST',
                destroy: 'POST'
	        },
	        url: baseUrl+'iot/company/view/getNameList',
	        reader: {
	            type: 'json',
	            root: 'RESULT',
	            totalProperty: 'totalCount'
	        },
	        extraParams:{
	        	queryJson:Ext.JSON.encode(queryJson)
	        }
	    }
	});
	var ClztStory = Ext.create('Ext.data.Store',{
		fields:['abbr','name'],
		data:[
			{'abbr':0,'name':'未处理'},
			{'abbr':1,'name':'已处理'}
		]
	});
	var FilterForm = Ext.create('Ext.form.Panel', {
		id: 'VFireOptionFilterForm',
		labelWidth: 55,
		defaultType: 'textfield',
		bodyPadding: 15,
		items: [{
			xtype:'combo',
			fieldLabel:'单位名称',
			id: 'ff_company_code',
			name:'ff_company_code',
			displayField : 'owner_name',  
	        valueField : 'owner_id',
	        editable : false,
	        width:330,
	        store:CompanyStory
		},{
        	xtype:'datefield',
            fieldLabel:"开始日期",
            minValue:'07/07/2017',
            minText:"当前日期选择应大于当天日期",
            format:"Y-m-d",
            columnWidth:0.5,
            id: 'ff_start_data',
            name:"ff_start_data",
            editable:false,//只读约束
            width:330
		},{
        	xtype:'datefield',
            fieldLabel:"结束日期",
            minValue:'07/07/2017',
            minText:"当前日期选择应大于当天日期",
            format:"Y-m-d",
            columnWidth:0.5,
            id: 'ff_end_data',
            name:"ff_end_data",
            editable:false,//只读约束
            width:330,
			listeners: {
				//添加日期选择事件
				"select": function (time) {
					var start = Ext.getCmp('ff_start_data').getValue()
					var end = Ext.getCmp('ff_end_data').getValue()
					if(start === null || start === ""){
						Ext.Msg.alert('操作失败', '请选择开始时间后再次选择!' , function(btn,txt){
							Ext.getCmp('ff_end_data').setValue('');
						});
					}else{
						if((end.valueOf() - start.valueOf()) < 0){
							Ext.Msg.alert('操作失败', '开始日期不能选择在结束日期后!' , function(btn,txt){
								Ext.getCmp('ff_end_data').setValue('');
							});
						}
					}
				},
			}
		},{
			fieldLabel:'设备名称',
			id: 'ff_clzt',
			name: 'ff_clzt',
			maxLength: 12,
			maxLengthText:'长度不得超出{0}',
	        width:330
		}],
		buttons: [{
	        text: '筛选',
	        iconCls:'ok_btn',
		    handler: function() {
		        var form = this.up('form').getForm();
		        if (form.isValid()) {
		        	var query = new Object();
//		        	var tmp = Ext.getCmp('ff_company_code');
		        	if(Ext.getCmp('ff_company_code').getValue()){
		        		query.company_code = Ext.getCmp('ff_company_code').getValue();
		        		$("#company_code").val(query.company_code);
		        		company_code = query.company_code;
		        		$("#FirePiePanel_title_string").html(Ext.getCmp('ff_company_code').getRawValue( )+'.监测设备列表');
		        	}else{
		        		$("#company_code").val('');
		        		$("#FirePiePanel_title_string").html('监测设备列表');
		        		company_code = null;
		        	}
		        	if(Ext.getCmp('ff_clzt').getValue()){
		        		query.name = Ext.getCmp('ff_clzt').getValue();
		        		$("#clzt").val(query.name);
		        		
		        	}else{
		        		$("#clzt").val('');
		        	}
		        	if(Ext.getCmp('ff_start_data').getValue()){
		        		query.time_start = Ext.getCmp('ff_start_data').getValue();
		        		var datetime=query.time_start.getFullYear() + '-' + (query.time_start.getMonth() + 1) + '-' + query.time_start.getDate() + ' ' + query.time_start.getHours() + ':' + query.time_start.getMinutes() + ':' + query.time_start.getSeconds();
		        		$("#time_start").val(datetime);
		        		
		        	}else{
		        		$("#time_start").val('');
		        	}
		        	if(Ext.getCmp('ff_end_data').getValue()){
		        		query.time_end = Ext.getCmp('ff_end_data').getValue();
		        		var datetime1=query.time_end.getFullYear() + '-' + (query.time_end.getMonth() + 1) + '-' + query.time_end.getDate() + ' ' + query.time_end.getHours() + ':' + query.time_end.getMinutes() + ':' + query.time_end.getSeconds();
		        		$("#time_end").val(datetime1);
		        		
		        	}else{
		        		$("#time_end").val('');
		        	}
//	        		query.name = Ext.getCmp('ff_clzt').getValue()==null?"":Ext.getCmp('ff_clzt').getValue();
// 	        		query.V_LOGINNAME = V_LOGINNAME;
// 	        		query.V_PASSWORD =  V_PASSWORD;
	        		query.COMMSTATUS = 'NO';
		        	var jsonstr = Ext.JSON.encode(query);
		        	myStore.getProxy().extraParams = {
		        		queryJson : jsonstr
		        	};
		        	Ext.getCmp('VFireOptionListPageToolbar').moveFirst();
		        	Ext.getCmp('ff_company_code').setValue('');
		        	Ext.getCmp('ff_clzt').setValue('');
					Ext.getCmp('ff_start_data').setValue('');
					Ext.getCmp('ff_end_data').setValue('');
		        	Ext.getCmp('VFireOptionFilterWin').hide();
//		        	getCurrentData();
		        }
		    }
		},{
			text: '关闭',
			iconCls: 'cancel_btn',
			handler: function() {
				Ext.getCmp('VFireOptionFilterWin').hide();
			}
		}]
	});
	var filterwin = function() {
		if(Ext.getCmp('VFireOptionFilterWin')==undefined){
			Ext.create('Ext.window.Window',{
				id: 'VFireOptionFilterWin',
				title: '监测设备筛选',
				height: 210,
				width: 400,
				layout: 'fit',
				items: FilterForm,
				closable:false,
				modal:true,
				closeAction: 'hide'
			}).show();
		}else
			Ext.getCmp('VFireOptionFilterWin').show();
		CompanyStory.reload();
	}
	var WaterOptionPanel = Ext.create('Ext.grid.Panel', {
		header :{
			height:0,
			border:'0px solid #000000'
		},
	    titleCollapse:true,
	    id: 'VWaterOptionListPanel',
	    region:'center',
	    store: myStore,
	    columns: [
	    	{ header: 'id', dataIndex:'id',hidden:true, menuDisabled:true},
	    	{ header: '序号',  dataIndex: 'orderIdx',width:50, menuDisabled:true },
	        { header: '单位名称',  dataIndex: 'company',width:240, menuDisabled:true },
	        { header: '设备名称', dataIndex: 'name', width:240, menuDisabled:true },
	        { header: '设备编号', dataIndex: 'device_id', width:240, menuDisabled:true },
	        { header: '设备类型', dataIndex: 'device_type', width:240, menuDisabled:true },
	        { header: '端口名称', dataIndex: 'point_name', width:230, menuDisabled:true },
	        { header: '端口编号', dataIndex: 'point_code', width:100, menuDisabled:true },
	        { header: '数据上传时间',  dataIndex: 'data_time', width:560,minWidth:400, maxWidth:1600,menuDisabled:true }
	    ],
	    columnLines: true,
    	height: maxHeight,
	    width: '100%',
	    tbar: new Ext.create('Ext.toolbar.Toolbar',{
	    	items:[{
		    	html:'<span id="FirePiePanel_title_string" style="color:#ffffff;background-color:rgba(0,0,0,0)">监测设备列表</span>'
	    	},'->',{
		    	xtype: 'button', 
		    	iconCls:'back_btn',  
				text: '<span style="color:#ffffff;background-color:rgba(0,0,0,0)">返回</span>',
				listeners: {
					click: function(){
						location.href=baseUrl+'view/frontpage/map.jsp?&theme='+theme+'&company_code='+company_code;
					}
				}
		    },'-',
		    	{
				  xtype: 'button', 
				  iconCls:'filter_btn',  
				  text: '<span style="color:#ffffff;background-color:rgba(0,0,0,0)">筛选</span>',
				  listeners: {
				        click: filterwin
				  }
		    },'-',
		    {
				  xtype: 'button', 
				  iconCls:'filter_btn',  
				  text: '<span style="color:#ffffff;background-color:rgba(0,0,0,0)">导出</span>',
				  listeners: {
				        click: exportbtn_click
				        
				  }
		    },'-']
	    }),
	    bbar: new Ext.PagingToolbar({  
            store: myStore,  
            id:'VFireOptionListPageToolbar',
            displayInfo: true,  
            pageSize: countPerPage,  
            prependButtons: true,  
            displayMsg : '显示第 {0}条到 {1}条记录，总共 {2}条',     
            emptyMsg : "没有记录",  
            firstText: '第一页',
            prevText: '前一页',
            nextText: '后一页',
            lastText: '最后一页',
            refreshText: '刷新'
        }),
        frame: true,  
        border:false,  
        iconCls: 'icon-grid',
        listeners:{
        	 'celldblclick' : function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){  
        		 show_datapie(record);
        	 }
        }
	});
//	myStore.reload();
//	getCurrentData();
	var piebar = Ext.create('Ext.panel.Panel',{
		id:'FirePiePanel',
		width:'100%',
		height:498,
		region:'north',
		layout:'border',
		defaults:{  
            border:false
        }, 
        html:'<div id="operation_body" class="operation_body"><div id="operation_dock_l" class="operation_dock_l"></div><div id="operation_dock_r" class="operation_dock_r"></div><img id="operation_title_icon" class="operation_title_icon" width="48" height="48" src="../../res/img/icons/3.png"/><div id="operation_title_text" class="operation_title_text">RTU数据情况</div><div id="operation_label_1" class="operation_label_11">最新数据</div><div id="operation_label_2" class="operation_label_12">最大数据</div><div id="operation_label_3" class="operation_label_13">最小数据</div><div id="operation_label_4" class="operation_label_14">时间</div><div id="operation_label_5" class="operation_label_15">时间</div><div id="operation_label_6" class="operation_label_16">时间</div><div id="operation_num_1" class="operation_num_11"></div><div id="operation_num_2" class="operation_num_12"></div><div id="operation_num_3" class="operation_num_13"></div><div id="operation_num_4" class="operation_num_14"></div><div id="operation_num_5" class="operation_num_15"></div><div id="operation_num_6" class="operation_num_16"></div><div id="operation_area_bg" class="operation_area_bg"></div><div id="operation_area" class="operation_area"></div></div>'
	});
	pieMask = new Ext.LoadMask(piebar,{msg:"Loading..."});
	myMask = new Ext.LoadMask(document.body,{msg:"Loading..."});
	new Ext.create('Ext.panel.Panel',{
		width:'100%',
		id: 'WaterAlarmPanel',
		layout:'border',
		items:[
			piebar,WaterOptionPanel
		],
	    renderTo: Ext.getBody()
	});
	pieMask.show();
	myStore.addListener('load',function(store,record,opts){
		pieMask.show();
		WaterOptionPanel.getSelectionModel().select(0,true);
		getCurrentData();
	});
	myStore.reload();
	$(window).resize(function(){
    	body_resize();
    });
	body_resize();
});