<%@page import="com.jsh.util.Tools"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	String clientIp = Tools.getLocalIp(request);
	String type = request.getParameter("type");
	String location = "首页";
	if(null != type)
		location = "资产管理 &gt;资产概况";	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  	<head>
    	<title>erp</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- 指定以IE8的方式来渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    	<link rel="shortcut icon" href="<%=path%>/images/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="<%=path %>/js/easyui-1.3.5/themes/default/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="<%=path %>/js/easyui-1.3.5/themes/icon.css"/>
		<script type="text/javascript" src="<%=path %>/js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="<%=path %>/js/easyui-1.3.5/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="<%=path %>/js/easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="<%=path%>/js/highcharts/highcharts.js"></script>
		<script type="text/javascript" src="<%=path%>/js/highcharts/exporting.js"></script>
		<style>
			body{ margin:0; height:100%}
			html{ height:100%} /*兼容firefox的div高度100%*/
			#left{ width:150px; height:100%; float:left; _margin-right:-3px;}
			#right{ height:100%;}
			#leftdown{ width:150px; height:100%; float:left; _margin-right:-3px;}
			#rightdown{ height:100%;}
			<!--页面展示特殊要求-->
			.datagrid-body,.datagrid-footer,.datagrid-pager ,.datagrid-view
			{
				background-color:#EAF2FD;
			}
		</style>
  	</head>
  	<body>
  		<div id="position" class="easyui-panel" title="当前位置： <%=location %>" collapsible="false" closable="false"/>
		<!--按月统计资产柱状图 -->
		<div id = "tablePanel0"	class="easyui-panel" style="padding:1px;top:300px;" title="资产报表" iconCls="icon-chart-column" collapsible="true" maximizable="false" closable="false">
			<div id="left" class="easyui-tabs" style="width:630px;height:auto;padding:1px;">
				 <div title="综合图" style="padding:10px;background-color: #EAF2FD;height:340px;top:300px;" data-options="iconCls:'icon-chart-zonghe'">
		            <div id="zongheContainer" style="height: 340px;">综合图</div>
		        </div>
			</div>
			<div id="right" class="easyui-tabs" style="height:auto;padding:1px;">
				<div title="柱状图" style="padding:10px;background-color: #EAF2FD;height:340px;top:300px;" data-options="iconCls:'icon-chart-statistics'">
		        	<div id="culumnContainer" style="height: 340px;">柱状图</div>
		        </div>		
			</div>
			<div id="leftdown" class="easyui-tabs" style="width:630px;height:auto;padding:1px;">
		        <div title="折线图" data-options="iconCls:'icon-chart-polygram'" style="padding:10px;background-color: #EAF2FD;height:340px;top:300px;">
		            <div id="zxianContainer" style="height: 340px;">折现图</div>
		        </div>
			</div>
			<div id="rightdown" class="easyui-tabs" style="height:auto;padding:1px;">
				<div title="饼状图" data-options="iconCls:'icon-chart-pie'" style="padding:10px;background-color: #EAF2FD;height:340px;top:300px;">
		            <div id="pieContainer" style="height: 340px;">饼状图</div>
		        </div>	
			</div>
		</div>	
		
		<!-- 数据显示table -->
		<div id = "tablePanel"	class="easyui-panel" style="padding:1px;top:300px;" title="资产列表" iconCls="icon-list" collapsible="true" closable="false">
			<table id="tableData" style="height:360px;top:300px;border-bottom-color:#FFFFFF"></table>
		</div>
	    
		<script type="text/javascript">
			//控制图表显示个数
			var showNum = 10;
			//初始化界面
			$(function()
			{
				//progress();
				$.messager.progress({
	                title:'请稍候',
	                msg:'数据加载ing...'
	            });
			    //综合图
			    showComboChart();
			    //显示柱状图
			    showHistogram();
			    //折线图
			    showSpline();
			    //饼状图
			    showPieChart();
				initTableData();
				ininPager();	
				$.messager.progress('close');
			});	
			
			//加载进度条
			function progress()
			{
	            var win = $.messager.progress({
	                title:'请稍候',
	                msg:'数据加载ing...'
	            });
	            setTimeout(function(){
	                $.messager.progress('close');
	            },3300);
	        }
			
			//初始化表格数据
			function initTableData()
			{
				$('#tableData').datagrid({
					//title:'资产列表',
					//iconCls:'icon-save',
					//width:700,
					//height:480,
					nowrap: false,
					rownumbers: false,
					//动画效果
					animate:false,
					//选中单行
					singleSelect : true,
					collapsible:false,
					selectOnCheck:false,
					//fitColumns:true,
					//单击行是否选中
					checkOnSelect : false,
					//交替出现背景
					striped : true,
					url:'<%=path %>/asset/findBy.action',
					pagination: true,
					//loadFilter: pagerFilter,
					pageSize: 10,
					pageList: [10,20,30,50],
					frozenColumns:[[    
						{ field: 'id',width:35,align:"center",checkbox:true},
			          	{ title: '资产名称',field: 'assetname',width:100},
			          	{ title: '单价', field: 'price',width:70,align:"center"},
			          	{ title: '资产类型', field: 'category',width:115,align:"center"},
			          	{ title: '用户',field: 'username',width:100,align:"center"},
			          	{ title: '购买日期',field: 'purchasedate',width:90,align:"center"},
			          	{ title: '状态',field: 'status',width:50,align:"center"},
			          	{ title: '位置',field: 'location',width:100,align:"center"},
			          	{ title: '资产编号',field: 'assetnum',width:120,align:"center"},
			          	{ title: '序列号',field: 'serialnum',width:120,align:"center"}
					]], 
					columns:[[
			          { title: '有效日期',field: 'periodofvalidity',width:90,align:"center"},
			          { title: '保修日期',field: 'warrantydate',width:90,align:"center"},
			          { title: '供应商',field: 'supplier',width:100,align:"center"},
			          { title: '标签',field: 'labels',width:180,align:"center"},
			          { title: '描述',field: 'description',width:300}
					]],
					onLoadError:function()
					{
						$.messager.alert('页面加载提示','页面加载异常，请稍后再试！','error');
						return;
					}    
				});
			}
			
			//分页信息处理
			function ininPager()
			{
				try
				{
					var opts = $("#tableData").datagrid('options');  
					var pager = $("#tableData").datagrid('getPager'); 
					pager.pagination({  
						onSelectPage:function(pageNum, pageSize)
						{  
							opts.pageNumber = pageNum;  
							opts.pageSize = pageSize;  
							pager.pagination('refresh',
							{  
								pageNumber:pageNum,  
								pageSize:pageSize  
							});  
							showAssetDetails(pageNum,pageSize);
						}  
					}); 
				}
				catch (e) 
				{
					$.messager.alert('异常处理提示',"分页信息异常 :  " + e.name + ": " + e.message,'error');
				}
			}
			
			function showAssetDetails(pageNo,pageSize)
			{
				$.ajax({
					type:"post",
					url: "<%=path %>/asset/findBy.action",
					dataType: "json",
					data: ({
						assetNameID:$.trim($("#searchAssetNameID").val()),
						assetCategoryID:$.trim($("#searchCategoryID").val()),
						usernameID:$.trim($("#searchUsernameID").val()),
						status:$.trim($("#searchStatus").val()),
						supplierID:$.trim($("#searchSupplierID").val()),
						pageNo:pageNo,
						pageSize:pageSize
					}),
					success: function (data)
					{
						$("#tableData").datagrid('loadData',data);
						//$('#tableData').datagrid('reload');
					},
					//此处添加错误处理
		    		error:function()
		    		{
		    			$.messager.alert('查询提示','查询数据后台异常，请稍后再试！','error');
						return;
					}
				});
			}
			
			//设置饼状图为渐变色
			Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, 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
				       ]
				   };
			});
			
			
			//饼状图
			function showPieChart()
			{
				var pageData = null;
				$.ajax({
						type:"post",
						url: "<%=path%>/report/find.action",
						dataType: "json",
						//取消异步机制，保证页面数据返回再进行处理
						async: false,
						data: ({
							reportType : 2,
						}),
						success: function (reportInfo)
						{
							pageData = reportInfo.showModel.reportData;
							var msgTip = reportInfo.showModel.msgTip;
							if(msgTip == "get report data exception")
							{
								alert("查找报表信息异常,请与管理员联系！");
								return;
							}	
						}
				});
				//解决初始化范围变小问题
				$("#pieContainer").empty();	
				var getReportTypeInfo = "按供应商统计";
				//封装数据到数组中
				var allDataInfo = new Array();
				for(var i = 0;i < pageData.length; i++)
				{
					var dataInfo = new Array();
					var totalInfo = pageData[i]
					
					dataInfo.push(totalInfo[1]);
						
					dataInfo.push(totalInfo[0]);
					allDataInfo.push(dataInfo); 	
				}
								
				new Highcharts.Chart({
					chart: {
				    	renderTo: 'pieContainer',
				        plotBackgroundColor: null,
				        plotBorderWidth: null,
				        backgroundColor:'#EAF2FD',
				        plotShadow: false
					},
				    title: {
				    	text: getReportTypeInfo + "饼状图"
				    },
					tooltip: {
						formatter: function() {
							return this.point.name +':'+ this.y + "个";
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									if(this.point.name.length >10)
				        				return '<b>' + this.point.name.substr(0,10) + "</b>...:"+ this.y + "个";
									return '<b>' + this.point.name +'</b>:'+ this.y + "个";
								}
							}
						}
					},
				    series: [{
				    	type: 'pie',
				        name: '',
				        data: allDataInfo
					}]
				});
			}
			    
			//综合图
			function showComboChart()
			{
				var pageData = null;
				$.ajax({
						type:"post",
						url: "<%=path%>/report/find.action",
						dataType: "json",
						//取消异步机制，保证页面数据返回再进行处理
						async: false,
						data: ({
							reportType : 0
						}),
						success: function (reportInfo)
						{
							pageData = reportInfo.showModel.reportData;
							var msgTip = reportInfo.showModel.msgTip;
							if(msgTip == "get report data exception")
							{
								alert("查找报表信息异常,请与管理员联系！");
								return;
							}	
						}
				});
				//解决初始化范围变小问题
				$("#zongheContainer").empty();	
				var getReportTypeInfo = "按资产状态统计";
				//按照统计数据封装显示数据
				var xName = new Array();
				var columnData = new Array();
				var columnDataForm = null;
				var averageDataForm = null;
				var allDataSum = 0;
				
				var showNumInfo = 0;
				if(pageData.length >= showNum)
					showNumInfo = 10;
				else
					showNumInfo = pageData.length;
				for(var i = 0 ;i < showNumInfo;i ++)
				{
					var eachData = pageData[i];
					var sum = eachData[0];
					var totalInfo = eachData[1];
					if(0 == totalInfo)
						xName.push("在库");
					else if(1 == totalInfo)
						xName.push("在用");
					else if(2 == totalInfo)
						xName.push("消费");
					columnData.push(sum);
					allDataSum += sum;
				}	
				columnDataForm = 
					{
						type: 'column',
				        name: "资产总数",
				        data: columnData
					};	
					
				averageDataForm = {
			               type: 'spline',
			               name: getReportTypeInfo + '资产概况曲线',
			               data: columnData,
			               marker: {
			                	lineWidth: 2,
			                	lineColor: Highcharts.getOptions().colors[3],
			                	fillColor: 'white'
			               }
			           };
				sumDataForm =
				{
		              type: 'pie',
		              name: '总数',
		              data: [{
		                    name: '资产总数',
		                    y: allDataSum
		               }],
		               center: [450, 1],
		               size: 80,
		               showInLegend: false,
		               dataLabels: {
		                   enabled: true,
		                   align:'center'
		               }
		         }
				new Highcharts.Chart({
					chart: {
				    	renderTo: 'zongheContainer',
				    	backgroundColor:'#EAF2FD'
				  	},
				    title: {
				    	text: getReportTypeInfo + "综合图"
				    },
				    xAxis: {
				    	categories: xName
				   	},
				   	yAxis: {
			        	title: {
			        		text: ''
			      		},
			        	labels: {
			        		formatter: function() {
			            		return this.value;
			            	}
			        	}
			        },
			        plotOptions: {
		                column: {
		                    cursor: 'pointer',
		                    dataLabels: {
		                        enabled: true,
		                        style: {
		                            fontWeight: 'bold'
		                        },
		                        formatter: function() {
		                            return this.y;
		                        }
		                    },
		                    //设置是否显示最下面选项
		                    showInLegend: false
		                },
				    	spline: {
							marker: {
								radius: 4,
								lineColor: '#666666',
								lineWidth: 1
							},
							showInLegend: false
						},
						line: {
                    		dataLabels: {
                        		enabled: false
                    		},
                   	 		enableMouseTracking: true,
                			showInLegend: false
                		},
		                pie: {
							allowPointSelect: false,
							dataLabels: {
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '资产总数: '+ this.y;
								}
							}
						}
            		},
				    tooltip: {
				    	formatter: function() {
	            			return this.key  +':'+ this.y +' 个';
				     	}
				 	},
				    labels: {
		                items: [{
		                    html: '',
		                    style: {
		                        left: '40px',
		                        top: '8px',
		                        color: 'black'
		                    }
		                }]
		            },
				    series: [columnDataForm,averageDataForm,sumDataForm]
				});
			}         
			
			//折线图
			function showSpline()
			{
				var pageData = null;
				$.ajax({
						type:"post",
						url: "<%=path%>/report/find.action",
						dataType: "json",
						//取消异步机制，保证页面数据返回再进行处理
						async: false,
						data: ({
							reportType : 1
						}),
						success: function (reportInfo)
						{
							pageData = reportInfo.showModel.reportData;
							var msgTip = reportInfo.showModel.msgTip;
							if(msgTip == "get report data exception")
							{
								alert("查找报表信息异常,请与管理员联系！");
								return;
							}	
						}
				});
				//解决初始化范围变小问题
				$("#zxianContainer").empty();	
				var getReportTypeInfo = "按资产类型统计";
				var dataInfo = new Array();
				var nameData = new Array();
				var consumeSumInfo= null;
				
				
				var showNumInfo = 0;
				if(pageData.length >= showNum)
					showNumInfo = 10;
				else
					showNumInfo = pageData.length;
				for(var i = 0 ;i < showNumInfo;i ++)
				{
					var totalInfo = pageData[i]
					dataInfo.push(totalInfo[0]);
					nameData.push(totalInfo[1]);
				}
				consumeSumInfo= {
						name: getReportTypeInfo + '总共',
						marker: {
							symbol: 'square',
							labels: {
								formatter: function()
								{
									return this.value +'个';
								}
							}
						},
						data: dataInfo
				};
				
				new Highcharts.Chart({
					chart: {
			        	renderTo: 'zxianContainer',
			            type: 'line',
			            backgroundColor:'#EAF2FD'
			        },
			        title: {
			        	text: getReportTypeInfo + "曲线图"
			        },
			        subtitle: {
			        	text: ''
			       	},
			        xAxis: {
			        	categories: nameData,
			        	labels: { 
		                    rotation: -45,  //逆时针旋转45°，标签名称太长。 
		                    align: 'right',  //设置右对齐 
			        		formatter: function() {
			        			if(this.value.length >10)
			        				return this.value.substr(0,10) + "...";
			            		return this.value ;
			            	}
		                }
			       	},
			        yAxis: {
			        	title: {
			        		text: ''
			      		},
			        	labels: {
			        		formatter: function() {
			            		return this.value ;
			            	}
			        	}
			        },
			       	tooltip: {
			        	crosshairs: false,
			            shared: true,
			            formatter: function() {
		                    return  this.x + ":" +this.y +'个';
		                }
			      	},
			       	plotOptions: {
			        	spline: {
							marker: {
								radius: 4,
								lineColor: '#666666',
								lineWidth: 1
							},
							showInLegend: false
						},
						line: {
                    		dataLabels: {
                        		enabled: true
                    		},
                   	 		enableMouseTracking: true,
                   	 		showInLegend: false
                		}
			      	},
			        series: [consumeSumInfo]
				});
			}
			
			//柱状图
			function showHistogram()
			{	
				var pageData = null;
				$.ajax({
						type:"post",
						url: "<%=path%>/report/find.action",
						dataType: "json",
						//取消异步机制，保证页面数据返回再进行处理
						async: false,
						data: ({
							reportType : 3,
						}),
						success: function (reportInfo)
						{
							pageData = reportInfo.showModel.reportData;
							var msgTip = reportInfo.showModel.msgTip;
							if(msgTip == "get report data exception")
							{
								alert("查找报表信息异常,请与管理员联系！");
								return;
							}	
						}
				});
				//解决初始化范围变小问题
				$("#culumnContainer").empty();
				var getReportTypeInfo = "按资产名称统计";
				var dataInfo = new Array();
				var nameData = new Array();
				var consumeSumInfo= null;
				
				var showNumInfo = 0;
				if(pageData.length >= showNum)
					showNumInfo = 10;
				else
					showNumInfo = pageData.length;
				for(var i = 0 ;i < showNumInfo;i ++)
				{
					var totalInfo = pageData[i];
					dataInfo.push(totalInfo[0]);
					nameData.push(totalInfo[1]);
				}
				consumeSumInfo= {
		        	name: getReportTypeInfo + "柱状图",
		           	data: dataInfo
		        }
				
        		new Highcharts.Chart({
		            chart: {
		                renderTo: 'culumnContainer',
		                type: 'column',
		                backgroundColor:'#EAF2FD'
		            },
		            title: {
		                text: getReportTypeInfo + "柱状图"
		            },
		            xAxis: {
		                categories: nameData,
		                labels: { 
		                    rotation: -45,  //逆时针旋转45°，标签名称太长。 
		                    align: 'right',  //设置右对齐 
		                    formatter: function() {
			        			if(this.value.length >10)
			        				return this.value.substr(0,10) + "...";
			            		return this.value ;
			            	}
		                }
		            },
		            yAxis: {
			        	title: {
			        		text: ''
			      		},
			        	labels: {
			        		formatter: function() {
			            		return this.value;
			            	}
			        	}
			        },
		            plotOptions: {
		                column: {
		                    cursor: 'pointer',
		                    dataLabels: {
		                        enabled: true,
		                        style: {
		                            fontWeight: 'bold'
		                        },
		                        formatter: function() {
		                            return this.y;
		                        }
		                    },
		                    showInLegend: false
		                }
            		},
		            tooltip: {
		                formatter: function() {
		                    return  this.x + ":" +this.y +'个';
		                }
		            },
		            credits: {
		                enabled: false
		            },
		            series: [consumeSumInfo]
		        });
			}
			
			//返回统计类型字符串
			function getReportType()
			{
				var reportType = $("#searchReportType").val();
				if(reportType==0)
				{				    	
				  	return '按资产状态统计';
				}
				else if(reportType==1)
				{
				   	return '按资产类型统计';
				}
				else if(reportType==2)
				{
					return '按供应商统计';
				}
				else if(reportType==3)
				{
					return '按资产名称统计';
				}
				else if(reportType==4)
				{
					return '按所属用户统计';
				}				
			}
		</script>
	</body>
</html>