meidu2021/daju/WebRoot/webpage/cn/com/lzt/userstats/userStats.js

var myChart = echarts.init(document.getElementById('attendanceStatsChar'),'walden');
var myChart2 = echarts.init(document.getElementById('attendanceStatsChar2'),'walden');
option = {
		color: ['#3398DB'],
	    tooltip: {
	        trigger: 'axis'
	    },
	    grid:{
	    	  left: '3%',
	          right: '4%',
	          bottom: '1%',
	          containLabel: true
		    },
	 
	    legend: {
	        data:[],
	    	width:'90%',
	        left:'center'
	    },
	    xAxis: 
	        {
	            type: 'category',
	            data: [],
	            axisLabel: {
	                interval: 0,
	                formatter:function(value)
	                {

	                    var ret = "";//拼接加\n返回的类目项
	                    var maxLength = 1;//每项显示文字个数
	                    var valLength = value.length;//X轴类目项的文字个数
	                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
	                    if (rowN > 1)//如果类目项的文字大于3,
	                    {
	                        for (var i = 0; i < rowN; i++) {
	                            var temp = "";//每次截取的字符串
	                            var start = i * maxLength;//开始截取的位置
	                            var end = start + maxLength;//结束截取的位置
	                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
	                            temp = value.substring(start, end) + "\n";
	                            ret += temp; //凭借最终的字符串
	                        }
	                        return ret;
	                    }
	                    else {
	                        return value;
	                    }
	                }
	            }
	        },
	       
	    yAxis: [
	        {
	            type: 'value',
	            name:'员工流动比例（%）',
	            axisLabel: {
	                show: true,
	                interval: 'auto',
	                formatter: function (value, index) {           
	             	 return value+"%";      
	                }   
	                //formatter: '{value} '
	              }
	        }
	    ],
	    dataZoom: [
		              
	               {
	                   type: 'inside',
	                   start: 0,
	                   end: 100
	                   
	               }
	           ],
	    series: [
	        {
	            name:'',
	            type:'bar',
	            data:[]
	        }
	    ]
	};

option2 = {
		color: ['#3398DB'],
	    tooltip: {
	        trigger: 'axis'
	    },
	    grid:{
	    	  left: '3%',
	          right: '4%',
	          bottom: '1%',
	          containLabel: true
		    },
	 
	    legend: {
	        data:[],
	    	width:'90%',
	        left:'center'
	    },
	    xAxis: 
	        {
	            type: 'category',
	            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
	            axisLabel: {
	                interval: 0,
	                formatter:function(value)
	                {

	                    var ret = "";//拼接加\n返回的类目项
	                    var maxLength = 1;//每项显示文字个数
	                    var valLength = value.length;//X轴类目项的文字个数
	                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
	                    if (rowN > 1)//如果类目项的文字大于3,
	                    {
	                        for (var i = 0; i < rowN; i++) {
	                            var temp = "";//每次截取的字符串
	                            var start = i * maxLength;//开始截取的位置
	                            var end = start + maxLength;//结束截取的位置
	                            //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
	                            temp = value.substring(start, end) + "\n";
	                            ret += temp; //凭借最终的字符串
	                        }
	                        return ret;
	                    }
	                    else {
	                        return value;
	                    }
	                }
	            }
	        },
	    yAxis: [
	        {
	            type: 'value',
	            name:'员工流动比例（%）',
	            axisLabel: {
	                show: true,
	                interval: 'auto',
	                formatter: function (value, index) {           
	             	 return value+"%";      
	                }   
	                //formatter: '{value} '
	              }
	        }
	    ],
	    dataZoom: [
		              
	               {
	                   type: 'inside',
	                   start: 0,
	                   end: 100
	                   
	               }
	           ],
	    series: [
	        {
	            name:'',
	            type:'bar',
	            data:[]
	        }
	    ]
	};




$(function() {
	$(document).ready(function() {     
		attendanceStatssearch();		
	});
});




function attendanceStatssearch(){
	 handleAjaxSimple("userStatsController.do?userStatsData", $("#attendanceStatsForm").serialize(), handleSuccess);
}

function handleSuccess(data){
	if(data.cdata.noData){
		$(".content").hide();
		$("#uptb").hide();
		$("#upbg").hide();
		$("#upexport").hide();
		$(".err-info").show();
	}else{
		$(".content").show();
		$(".err-info").hide();
		//$("#upBtn").show();
		$("#uptb").show();
		$("#upbg").show();
		var srcstr = $("#uptb").attr("src");
		if(srcstr.indexOf("tb1.png") < 0){
			$("#upexport").show();
		}
		var rolefalg = $("#roleFlag").val();
		var prostr;
		if(rolefalg == 1){
			prostr = '项目';
		}else{
			prostr = '部门';
		}
		var charheadStr;
		var attType = $("#attType").val();
		if(attType == 0 ){
			charheadStr =$("#curYear").val()+"年"+$("#attMonth").val()+"月各"+prostr+"员工流动";
		}else if(attType == 1){
			var attQuarters = $("#attQuarters").val();
			if(attQuarters == 1){
				charheadStr = $("#curYear").val()+"年一季度(01月-03月)各"+prostr+"员工流动";
			}else if(attQuarters == 2){
				charheadStr = $("#curYear").val()+"年二季度(04月-06月)各"+prostr+"员工流动";
			}else if(attQuarters == 3){
				charheadStr = $("#curYear").val()+"年三季度(07月-09月)各"+prostr+"员工流动";
			}else {
				charheadStr = $("#curYear").val()+"年四季度(10月-12月)各"+prostr+"员工流动";
			}
		}else if(attType == 2){
			charheadStr = $("#curYear").val()+"年度各"+prostr+"员工流动";
		}
		$("#upcharheaddiv").html(charheadStr);
		initCharDate(data.cdata);
		initNdateList(data.tdata);
	}	
}
function initNdateList(data){
	var rolefalg = $("#roleFlag").val();
	var pjNamestr;
	var pidNamestr;
	if(rolefalg == 1){
		pjNamestr = '项目名称';
		pidNamestr='项目经理';
	}else{
		pjNamestr = '项目名称';
		pidNamestr='部门名称';
	}
	
	var attType = $("#attType").val();
	var eatryleMonthstr;
	var endMonthstr;
	if(attType == 0 ){
		eatryleMonthstr ="月初总人数";
		endMonthstr="月末总人数 ";
	}else if(attType == 1){
		eatryleMonthstr ="季初总人数";
		endMonthstr="季末总人数 ";
	}else{
		eatryleMonthstr ="年初总人数";
		endMonthstr="年末总人数 ";
	}
	var colums = [[ 
	      	        {field:'pName',title:pjNamestr,width:150},  
	      	        {field:'pidName',title:pidNamestr,width:150}, 
	      	        {field:'earlyMonthTotal',title:eatryleMonthstr,width:150,align:'right',halign:'center' },
	      	        {field:'entryTotal',title:'入职人数',width:150,align:'right',halign:'center' },
	      	        {field:'leaveTotal',title:'离职人数',width:150,align:'right',halign:'center' },
			      	{field:'endMonthTotal',title:endMonthstr,width:150,align:'right',halign:'center' },
			      	{field:'flowProportion',title:'员工流动比例（%）',width:150,align:'right',halign:'center' }
	      	 ]]  
	$('#attendanceStatsTable').datagrid({
        singleSelect : true,
        loadMsg:'数据加载中,请稍后……', 
        columns:colums,
        rownumbers:true,
        fitColumns:true
   }).datagrid('loadData',data);
	
	
}

function initCharDate(data){
	myChart.clear();
	option.xAxis.data = data.xAxisData;
	option.series = data.series;
	myChart.setOption(option);
	myChart.resize();
}


function showTabel(){
	$("#attendanceStatsChar").hide();
	$("#tablediv").show();  
	$("#upexport").show();
	$("#uptb").attr("src","images/tb.png");
	$("#upbg").attr("src","images/bg1.png");
	//$("#attendanceStatsTable").datagrid("resize");
	var h=$(".content").height();  
    $('#attendanceStatsTable').datagrid('resize', {  
        height :h-50  
    });  
	
}

function showChar(){
	$("#tablediv").hide();  
	$("#attendanceStatsChar").show();
	$("#upexport").hide();
	$("#uptb").attr("src","images/tb1.png");
	$("#upbg").attr("src","images/bg.png");
	myChart.resize();
}

myChart.on('click', function (params) {
	console.log(params);
	var rolefalg = $("#roleFlag").val();
	var attType = $("#attType").val();
	if(rolefalg == 1){
		$("#downcharheaddiv").html(params.name + "-"+$("#curYear").val()+"年01月~"+$("#curYear").val()+"年12月人员流动比例趋势变化");
		$("#upcharheaddiv2").html($("#curYear").val()+"年度人员流动比例趋势图");
		if(attType == 2){
			var data ={
					"attYear" : $("#curYear").val(),
					"pid":params.data.id
				};
			handleAjaxSimple("userStatsController.do?userYearInto", data, showDownChar);
		}
	}
})

function goBefore(){
	$("#attendanceStatsChar2").css("display","none");
	$("#tablediv2").hide();
	$("#searchColums").show();
	$("#downcharhead").hide();
	$("#attendanceStatsChar").show();
	$("#upcharhead").show();
	$("#upcharhead2").hide();
	$("#upBtn").show();
	$("#downBtn").hide();
	$("#downexport").hide();
	$("#downtb").attr("src","images/tb1.png");
	$("#downbg").attr("src","images/bg.png");
	myChart.resize();
}

//显示下钻图表
function showDownChar(data){
	$("#attendanceStatsChar").css("display","none");
	$("#attendanceStatsChar2").show();
	$("#upBtn").hide();
	$("#downBtn").show();
	$("#searchColums").hide();
	$("#downcharhead").show();
	$("#upcharhead").hide();
	$("#upcharhead2").show();
	$("#yearspan2").html($("#curYear").val());
	initDownCharDate(data.cdata);
	initDownTabDate(data.tdata);
	
}

function  initDownCharDate(data){
	myChart2.clear();
	option2.xAxis.data = data.xAxisData;
	option2.series = data.series;
	myChart2.setOption(option2);
	myChart2.resize();
}


function initDownTabDate(data){
	
	var attType = $("#attType").val();
	var eatryleMonthstr;
	var endMonthstr;
	if(attType == 0 ){
		eatryleMonthstr ="月初总人数";
		endMonthstr="月末总人数 ";
	}else if(attType == 1){
		eatryleMonthstr ="季初总人数";
		endMonthstr="季末总人数 ";
	}else{
		eatryleMonthstr ="年初总人数";
		endMonthstr="年末总人数 ";
	}
	var rolefalg = $("#roleFlag").val();
	var pjNamestr;
	var pidNamestr;
	var userNameField;
	var colums ;
	colums = [[ 
	    {field:'yearMonth',title:'日期范围',width:150},  
        {field:'pName',title:'项目名称',width:150},  
        {field:'pidName',title:'项目经理',width:150},  
        {field:'earlyMonthTotal',title:eatryleMonthstr,width:150,align:'right',halign:'center' },
        {field:'entryTotal',title:'入职人数',width:150,align:'right',halign:'center' },
        {field:'leaveTotal',title:'离职人数',width:150,align:'right',halign:'center' },
      	{field:'endMonthTotal',title:endMonthstr,width:150,align:'right',halign:'center' },
      	{field:'flowProportion',title:'员工流动比例（%）',width:150,align:'right',halign:'center' }
        ]]  
	$('#attendanceStatsTable2').datagrid({
        singleSelect : true,
        loadMsg:'数据加载中,请稍后……', 
        columns:colums,  
        rownumbers:true,
        fitColumns:true
   }).datagrid('loadData',data);
}

function showDownTabelBtn(){
	$("#attendanceStatsChar2").hide();
	$("#tablediv2").show();    
	$("#downexport").show();
	$("#downtb").attr("src","images/tb.png");
	$("#downbg").attr("src","images/bg1.png");
	//$("#attendanceStatsTable2").datagrid("resize");
	var h=$(".content").height();  
    $('#attendanceStatsTable2').datagrid('resize', {  
        height :h-50  
    });  
}

function showDownCharBtn(){
	$("#tablediv2").hide();  
	$("#downexport").hide();
	$("#downtb").attr("src","images/tb1.png");
	$("#downbg").attr("src","images/bg.png");
	$("#attendanceStatsChar2").show();
	myChart2.resize();
}

function exportExcel(flag){
	var opts;
	if(flag == 1){
		opts = $('#attendanceStatsTable').datagrid('getColumnFields'); //这是获取到所有的FIELD
	}else{
		opts = $('#attendanceStatsTable2').datagrid('getColumnFields'); //这是获取到所有的FIELD
	}
	var exceltitles=[];
	for(i=0;i<opts.length;i++)
	{
	  //var col = $('div[class$="'+opts[i]+'"] :not(.datagrid-sort-icon)').html();
		var col = $('td[field="'+opts[i]+'"] div :not(.datagrid-sort-icon)').html();
	    exceltitles.push(col);//把TITLEPUSH到数组里去
	}
	var formdom = '<form method="post" id="formdom" action="userStatsController.do?exportExcel"><input name="flag" value="'+flag+'" /><input name="exceltitles" value="'+exceltitles+'" /><input name="exceltitleIds" value="'+opts+'" /></form>';
	$("#export").html(formdom);
	$("#formdom").submit();
}