| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552 | import React from 'react';import { Select, Spin, Input, Table, Button ,DatePicker} from 'antd';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';import './customer.less';import { post } from '@/dataDic.js';import moment from 'moment';const DiurnalStatisticsOne = React.createClass({	loadData(timeTypes,totalArr) {		let total=totalArr;		this.setState({			loading: true		});		$.ajax({			method: "get",			dataType: "json",			crossDomain: false,			url: globalConfig.context + "/api/admin/report/userDataStatistics",			data: {								depId:this.state.superId,//部门机构			},			success: function(data) {				let thedata = data.data;				let theArr = [];				if(!thedata) {					if(data.error && data.error.length) {						message.warning(data.error[0].message);					};					thedata = {};				} else {					thedata.map(function(item, index) {						let nub=index+1;						theArr.push({							key: index,							theNumber:false,							nub:nub,							depName: item.depName,//部门							name:item.name,//员工姓名							signUser:item.signUser,//签单客户数							fullUser:item.fullUser,//资料完善数							dayFullUser:item.dayFullUser,//今日完善数							dayNewUser:item.dayNewUser, //今日新增数							countUser:item.countUser,//私有客户数							signFullUser:item.signFullUser,//签单客户完善数						})					})				}				if(theArr.length){					theArr.push(						{							key:9999999,							theNumber:true,							name:'合计',							signUser:total.signUser,//签单客户数							fullUser:total.fullUser,//资料完善数							dayFullUser:total.dayFullUser,//今日完善数							dayNewUser:total.dayNewUser,//今日新增数							countUser:total.countUser,//私有客户数							signFullUser:total.signFullUser,//签单客户完整数						}					)				}				this.setState({					dataSource: theArr,				})			}.bind(this),		}).always(function() {			this.setState({				loading: false			});		}.bind(this));	},	totalData(timeTypes) {		this.setState({			loading: true		});		$.ajax({			method: "get",			dataType: "json",			crossDomain: false,			url: globalConfig.context + "/api/admin/report/userDataStatisticsCount",			data: {				depId:this.state.superId,//部门机构			},			success: function(data) {				let thedata = data.data;				let theArr = [];				if(!thedata) {					if(data.error && data.error.length) {						message.warning(data.error[0].message);					};					thedata = {};				} 				this.loadData(timeTypes,thedata);				this.selectSuperId();			}.bind(this),		}).always(function() {			this.setState({				loading: false			});		}.bind(this));	},	//时间选择    selTime(value,index){    	this.setState({    		Dtime:value,    		selTime:index    	})    },    //获取上级组织    selectSuperId() {      	this.state.data = []         $.ajax({                method: "post",                dataType: "json",                crossDomain: false,                url: globalConfig.context + "/api/admin/organization/selectSuperId",                data:{                                  },                success: function (data) {                	                  		let theArr = [];                		let theId=[];//用于保存上级组织的ID和名称					    let thedata=data.data;					    if (!thedata) {		                    if (data.error && data.error.length) {		                        message.warning(data.error[0].message);		                    };			                    thedata = {}; 		              };   					    var contactIds=[];				        for(var i=0;i<data.data.length;i++){		                    let theData = data.data[i];		                    theArr.push(		                        <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>		                    );		                    theId.push(		                        [theData.id,theData.name]		                    );		                };						this.setState({								SuperArr:thedata,		                    contactsOption: theArr, 		                    theId: theId, 		                    orderStatusOptions:data.data,	                    });	                    					}.bind(this),				}).always(function () {				this.setState({	                loading: false	            });	        }.bind(this));	},	//判断浏览器类型	getExplorer() {		var explorer = window.navigator.userAgent;		//ie 		if(explorer.indexOf("MSIE") >= 0) {			return 'ie';		}		//firefox 		else if(explorer.indexOf("Firefox") >= 0) {			return 'Firefox';		}		//Chrome		else if(explorer.indexOf("Chrome") >= 0) {			return 'Chrome';		}		//Opera		else if(explorer.indexOf("Opera") >= 0) {			return 'Opera';		}		//Safari		else if(explorer.indexOf("Safari") >= 0) {			return 'Safari';		}	},    //导出为exel表格	tabExel() {		var table = document.querySelector('#daochu1');		var idTmr;		//debugger;		//整个表格拷贝到EXCEL中		if(this.getExplorer() == 'ie') {			var curTbl = document.getElementById(tableid);			var oXL = new ActiveXObject("Excel.Application");			//创建AX对象excel 			var oWB = oXL.Workbooks.Add();			//获取workbook对象 			var xlsheet = oWB.Worksheets(1);			//激活当前sheet 			var sel = document.body.createTextRange();			sel.moveToElementText(curTbl);			//把表格中的内容移到TextRange中 			sel.select();			//全选TextRange中内容 			sel.execCommand("Copy");			//复制TextRange中内容  			xlsheet.Paste();			//粘贴到活动的EXCEL中       			oXL.Visible = true;			//设置excel可见属性			try {				var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");			} catch(e) {				print("Nested catch caught " + e);			} finally {				oWB.SaveAs(fname);				oWB.Close(savechanges = false);				//xls.visible = false;				oXL.Quit();				oXL = null;				//结束excel进程,退出完成				//window.setInterval("Cleanup();",1);				idTmr = window.setInterval("Cleanup();", 1);			}		} else {			this.tableToExcel(table,this.getExplorer());		}		function Cleanup() {			window.clearInterval(idTmr);			CollectGarbage();		}	},	tableToExcel(table,name) {		var uri = 'data:application/vnd.ms-excel;base64,',			template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',			base64 = function(s) {				return window.btoa(unescape(encodeURIComponent(s)))			},			format = function(s, c) {				return s.replace(/{(\w+)}/g,					function(m, p) {						return c[p];					})			}			if(!table.nodeType) table = document.getElementById(table);			var ctx = {				worksheet: name || 'Worksheet',				table: table.innerHTML			};			window.location.href = uri + base64(format(template, ctx))	},	getInitialState() {		return {			releaseDate: [],			selectedRowKeys: [],			selectedRows: [],			loading: false,			visible: false,			showDesc: false,			timeState:false,			weekColor:true,			monthColor:false,			quarterColor:false,			yearColor:false,			Dtime:undefined,			selTime:'',			columns: [			{				title: '序号',				dataIndex: 'nub',				width:50,				key: 'nub',				fixed:false,				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:0      						},				     	}				     					     }				     				}			},{				title: '姓名',				fixed:false,				dataIndex: 'name',				key: 'name',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:3      						},				     	}				     					     }				     				}			},			{				title: '部门',				dataIndex: 'depName',				key: 'depName',				fixed:false,				width:300,				render:(text,record)=>{				     if(!record.theNumber){				     	return text //&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:0      						},				     	}				     					     }				     				}			},{				title: '客户总数',				fixed:false,				dataIndex: 'countUser',				key: 'countUser',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			}, 			{				title: '今日新增客户数',				fixed:false,				dataIndex: 'dayNewUser',				key: 'dayNewUser',				sorter: (a, b) => a.dayNewUser - b.dayNewUser,				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			}, 			{				title: '完整客户总数',				fixed:false,				dataIndex: 'fullUser',				key: 'fullUser',				sorter: (a, b) => a.fullUser - b.fullUser,				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			}, 			{				title: '今日完整客户数',				fixed:false,				dataIndex: 'dayFullUser',				key: 'dayFullUser',				sorter: (a, b) => a.dayFullUser - b.dayFullUser,				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			}, 			{				title: '签单客户总数',				fixed:false,				dataIndex: 'signUser',				key: 'signUser',				sorter: (a, b) => a.signUser - b.signUser,				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			}, 			{				title: '签单完整客户数',				fixed:false,				dataIndex: 'signFullUser',				key: 'signFullUser',				sorter: (a, b) => a.signFullUser - b.signFullUser,				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			}			],			dataSource: [],		};	},	search() {		this.totalData(0)	},	reset() {		this.state.superId = undefined;//部门机构清零		this.totalData(0);	},	week(){		this.state.releaseDate[0] = undefined;//开始时间清零		this.state.releaseDate[1] = undefined;//结束时间清零		this.totalData(0);		this.setState({			weekColor:true,			monthColor:false,			quarterColor:false,			yearColor:false		})	},	month(){		this.state.releaseDate[0] = undefined;//开始时间清零		this.state.releaseDate[1] = undefined;//结束时间清零		this.totalData(1);		this.setState({			weekColor:false,			monthColor:true,			quarterColor:false,			yearColor:false		})	},	quarter(){		this.state.releaseDate[0] = undefined;//开始时间清零		this.state.releaseDate[1] = undefined;//结束时间清零		this.totalData(2);		this.setState({			weekColor:false,			monthColor:false,			quarterColor:true,			yearColor:false		})	},	year(){		this.state.releaseDate[0] = undefined;//开始时间清零		this.state.releaseDate[1] = undefined;//结束时间清零		this.totalData(3);		this.setState({			weekColor:false,			monthColor:false,			quarterColor:false,			yearColor:true		})	},	componentWillMount() {		this.totalData(0);		let times=new Date();		let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';		this.setState({			Nowtime:nowTime		})	},	render() {		const { RangePicker } = DatePicker;		let departmentArr = this.state.departmentArr || [];		return(			<div className='set-content'>				<p style={{fontSize:'20px',marginBottom:'10px'}}>客户资料填写统计</p>				<div className="clearfix">					<Button type="primary" onClick={this.tabExel} style={{float:'right'}}>导出到表格</Button>					<span style={{fontSize:'16px'}}>部门机构 : </span>					<Select placeholder="选择部门"                            style={{ width:'200px',marginRight:'10px' }}                            value={this.state.superId}                            onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">                            {this.state.contactsOption}		          	</Select>		          	                  	<Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>	                <Button onClick={this.reset}>重置</Button>				</div>				<div id='daochu1'>					<div className="surfaceTitle">						<span>客户资料填写统计表</span>					</div>					<div className="patent-table">						<div className="scroll">		                    <Spin spinning={this.state.loading}>		                        <Table columns={this.state.columns}		                            dataSource={this.state.dataSource}		                            bordered		                            pagination={false}		                            />		                    </Spin>		                </div>		            </div>	            </div>			</div>		)	}});export default DiurnalStatisticsOne;
 |