| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615 | import React from 'react';import { Select, Spin, Input, Table, Button ,DatePicker, Form  , Tabs , Switch,message} from 'antd';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';import './report.less';import DiurnalStatisticsOne from './diurnalStatisticsOne.jsx';import { post } from '../../../dataDic.js';const TabPane = Tabs.TabPane;const DiurnalStatistics = React.createClass({	loadData(totalArr) {		let total=totalArr;		this.setState({			loading: true		});		$.ajax({			method: "get",			dataType: "json",			crossDomain: false,			url: globalConfig.context + "/api/admin/report/sales/marketingStatistics",			data: {				type:'1',				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,							id: item.id,							departmentId:item.departmentId,//部门ID							departmentName:item.departmentName,//部门名称							departmentManagerName:item.departmentManagerName,//部门负责人名称							departmentNumber:item.departmentNumber, //部门人数							privateCustomersCount:item.privateCustomersCount,// 部门客户数							dataCount:item.dataCount,// 新增客户数							dailyTelNo:item.dayTelNo,//日电话量							dailyVisitNo:item.dayVisitNo,//日外拜量							dailyFollowNo:item.dayFollowNo,//日营销总量							dailyAVG:parseFloat(item.dayAVG).toFixed(2),//日人均营销量							weekTelNo:item.weeklyTelNo,//周电话量							weekFollowNo:item.weeklyFollowNo,//周总量							weekVisitNo:item.weeklyVisitNo,//周外拜量							monthsTelNo:item.monthTelNo,//月电话量							monthsFollowNo:item.monthFollowNo,//月总量							monthsVisitNo:item.monthVisitNo,//月外拜量							annualTelNo:item.yearTelNo,//年电话量							annualFollowNo:item.yearFollowNo,//年总量							annualVisitNo:item.yearVisitNo,//年外拜量													})					})				}				if(theArr.length){					theArr.push(						{							key:9999999,							theNumber:true,							departmentName:'合计',														departmentNumber:total.departmentNumber, //部门人数							privateCustomersCount:total.privateCustomersCount,// 部门客户数							dataCount:total.dataCount,// 新增客户数							dailyTelNo:total.dayTelNo,//日电话量							dailyVisitNo:total.dayVisitNo,//日外拜量							dailyFollowNo:total.dayFollowNo,//日营销总量							dailyAVG:parseFloat(total.dayAVG).toFixed(2),//日人均营销量							weekTelNo:total.weeklyTelNo,//周电话量							weekFollowNo:total.weeklyFollowNo,//周总量							weekVisitNo:total.weeklyVisitNo,//周外拜量							monthsTelNo:total.monthTelNo,//月电话量							monthsFollowNo:total.monthFollowNo,//月总量							monthsVisitNo:total.monthVisitNo,//月外拜量							annualTelNo:total.yearTelNo,//年电话量							annualFollowNo:total.yearFollowNo,//年总量							annualVisitNo:total.yearVisitNo,//年外拜量						}					)				}				this.setState({					dataSource: theArr,				})			}.bind(this),		}).always(function() {			this.setState({				loading: false			});		}.bind(this));	},	totalData() {		this.setState({			loading: true		});		$.ajax({			method: "get",			dataType: "json",			crossDomain: false,			url: globalConfig.context + "/api/admin/report/sales/countMarketingStatistics",			data: {				type:'1',				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(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: "get",                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('#daochu');		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 {			selectedRowKeys: [],			selectedRows: [],			loading: false,			visible: false,			showDesc: false,			timeState: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: '部门',				dataIndex: 'departmentName',				key: 'departmentName',				width:230,				fixed:false,				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:3      						},				     	}				     					     }				     				}			}, {				title: '总经理',				width:100,				fixed:false,				dataIndex: 'departmentManagerName',				key: 'departmentManagerName',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:0      						},				     	}				     					     }				     				}			},			{				title: '部门人数',				width:100,				fixed:false,				dataIndex: 'departmentNumber',				key: 'departmentNumber',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			},			{				title: '部门客户数',				width:100,				fixed:false,				dataIndex: 'privateCustomersCount',				key: 'privateCustomersCount',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			},{				title: '新增客户数',				width:100,				fixed:false,				dataIndex: 'dataCount',				key: 'dataCount',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			},			{							title: '今日营销',				children: [					{						title: '营销总量(所有)',						width:100,						dataIndex: 'dailyFollowNo',						key: 'nudailyFollowNom',						sorter: (a, b) => a.dailyFollowNo - b.dailyFollowNo,//						sortOrder:'ascend'					},{						title: '电话量',						width:80,						dataIndex: 'dailyTelNo',						key: 'dailyTelNo',						sorter: (a, b) => a.dailyTelNo - b.dailyTelNo,					},{						title: '外拜量',						width:80,						dataIndex: 'dailyVisitNo',						key: 'dailyVisitNo',						sorter: (a, b) => a.dailyVisitNo - b.dailyVisitNo,					},{						title: '人均营销量',						width:110,						dataIndex: 'dailyAVG',						key: 'dailyAVG',						sorter: (a, b) => a.dailyAVG - b.dailyAVG,					}				],			}, 			{   				title: '周营销累计',				children: [					{						title: '周营销总量(所有)',						width:110,						dataIndex: 'weekFollowNo',						key: 'weekFollowNo',						sorter: (a, b) => a.weekFollowNo - b.weekFollowNo,					},{						title: '电话量',						width:80,						dataIndex: 'weekTelNo',						key: 'weekTelNo',						sorter: (a, b) => a.weekTelNo - b.weekTelNo,					},{						title: '外拜量',						width:80,						dataIndex: 'weekVisitNo',						key: 'weekVisitNo',						sorter: (a, b) => a.weekVisitNo - b.weekVisitNo,					}				],			},{				title: '月营销累计',				children: [					{						title: '月营销总量(所有)',						width:110,						dataIndex: 'monthsFollowNo',						key: 'monthsFollowNo',						sorter: (a, b) => a.monthsFollowNo - b.monthsFollowNo,					},{						title: '电话量',						width:80,						dataIndex: 'monthsTelNo',						key: 'monthsTelNo',						sorter: (a, b) => a.monthsTelNo - b.monthsTelNo,					},{						title: '外拜量',						width:80,						dataIndex: 'monthsVisitNo',						key: 'monthsVisitNo',						sorter: (a, b) => a.monthsVisitNo - b.monthsVisitNo,					}				],			},{				title: '年营销累计',				children: [					{						title: '年营销总量(所有)',						width:110,						dataIndex: 'annualFollowNo',						key: 'annualFollowNo',						sorter: (a, b) => a.annualFollowNo - b.annualFollowNo,					},{						title: '电话量',						width:80,						dataIndex: 'annualTelNo',						key: 'annualTelNo',						sorter: (a, b) => a.annualTelNo - b.annualTelNo,					},{						title: '外拜量',						width:80,						dataIndex: 'annualVisitNo',						key: 'annualVisitNo',						sorter: (a, b) => a.annualVisitNo - b.annualVisitNo,					}				],			}			],			dataSource: [],		};	},	search() {		this.totalData()	},	reset() {		this.state.superId = undefined;//部门机构清零		this.totalData()		this.setState({			order:"false"		})	},	//重构排序	tabChange(pagination,filter,sorter){		console.log(pagination)		console.log(sorter)	},	componentWillMount() {		//this.loadData();		this.totalData();		let times=new Date();		let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';		this.setState({			Nowtime:nowTime		})	},	render() {		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='daochu'>					<div className="surfaceTitle">						<span className="nowtime" style={{fontWeight:'bold'}}>{this.state.timeState?this.state.txtTime:this.state.Nowtime}</span>						<span style={{fontWeight:'bold'}}>客户营销统计表(部门)</span>					</div>					<div className="patent-table" id='daochu'>						<div className="scroll">		                    <Spin spinning={this.state.loading}>		                        <Table columns={this.state.columns}		                            dataSource={this.state.dataSource}		                            //scroll={{ x: 600,y:500}}		                            bordered		                            onChange={this.tabChange}		                            pagination={false}		                            />		                    </Spin>		                </div>		            </div>	            </div>			</div>		)	}});const Tablees=Form.create()(React.createClass({	//详情tab切换数据处理	callbacks(e) {		this.setState({			callnubs: e,		})		if(e == '1') {					}		if(e == '2') {					}			},	getInitialState() {		return {			callnubs: "1",		}	},	render() {		return(			<div className="clearfix" style={{marginTop:'0px',marginLeft:'10px'}}>			    <Tabs onChange={this.callbacks} type="card" activeKey={this.state.callnubs} style={{paddingLeft:'15px',paddingRight:'15px',marginRight:'20px'}}>			         <TabPane tab="客户营销统计表(部门)" key="1" >			         	<DiurnalStatistics />			         </TabPane>					 <TabPane tab="客户营销统计表(员工)" key="2">					 	<DiurnalStatisticsOne />					 </TabPane>			    </Tabs>			</div>		);	}}));export default Tablees;
 |