timeStatisticsOne.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  1. import React from 'react';
  2. import { Select, Spin, Input, Table, Button ,DatePicker} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './report.less';
  6. import { post } from '../../../dataDic.js';
  7. const DiurnalStatisticsOne = React.createClass({
  8. loadData(timeTypes,totalArr) {
  9. let total=totalArr;
  10. this.setState({
  11. loading: true
  12. });
  13. $.ajax({
  14. method: "get",
  15. dataType: "json",
  16. crossDomain: false,
  17. url: globalConfig.context + "/api/admin/report/sales/marketingStatistics",
  18. data: {
  19. type:'0',
  20. timeType:this.state.releaseDate[0]?4:timeTypes,
  21. startDate: this.state.releaseDate[0]?(this.state.releaseDate[0]+' '+'00:00:00'):'',
  22. endDate: this.state.releaseDate[1]?(this.state.releaseDate[1]+' '+'00:00:00'):'',
  23. depId:this.state.superId,//部门机构
  24. },
  25. success: function(data) {
  26. let thedata = data.data;
  27. let theArr = [];
  28. if(!thedata) {
  29. if(data.error && data.error.length) {
  30. message.warning(data.error[0].message);
  31. };
  32. thedata = {};
  33. } else {
  34. thedata.map(function(item, index) {
  35. let nub=index+1;
  36. theArr.push({
  37. key: index,
  38. theNumber:false,
  39. nub:nub,
  40. id: item.id,
  41. name:item.name,//员工姓名
  42. departmentId:item.departmentId,//部门ID
  43. departmentName:item.departmentName,//部门名称
  44. departmentManagerName:item.departmentManagerName,//部门负责人名称
  45. roleName:item.roleName, //职位权限
  46. privateCustomersCount:item.privateCustomersCount,// 部门客户数
  47. dailyTelNo:item.dayTelNo,//日电话量
  48. dailyVisitNo:item.dayVisitNo,//日外拜量
  49. dailyFollowNo:item.dayFollowNo,//日营销总量
  50. dailyAVG:parseFloat(item.dayAVG).toFixed(2),//日人均营销量
  51. weekTelNo:item.weeklyTelNo,//周电话量
  52. weekFollowNo:item.weeklyFollowNo,//周总量
  53. weekVisitNo:item.weeklyVisitNo,//周外拜量
  54. monthsTelNo:item.monthTelNo,//月电话量
  55. monthsFollowNo:item.monthFollowNo,//月总量
  56. monthsVisitNo:item.monshVisitNo,//月外拜量
  57. annualTelNo:item.yearTelNo,//年电话量
  58. annualFollowNo:item.yearFollowNo,//年总量
  59. annualVisitNo:item.yearVisitNo,//年外拜量
  60. })
  61. })
  62. }
  63. if(theArr.length){
  64. theArr.push(
  65. {
  66. key:9999999,
  67. theNumber:true,
  68. name:'合计',
  69. privateCustomersCount:total.privateCustomersCount,// 私有客户数
  70. dailyTelNo:total.dayTelNo,//日电话量
  71. dailyVisitNo:total.dayVisitNo,//日外拜量
  72. dailyFollowNo:total.dayFollowNo,//日营销总量
  73. dailyAVG:parseFloat(total.dailyAVG).toFixed(2),//日人均营销量
  74. weekTelNo:total.weeklyTelNo,//周电话量
  75. weekFollowNo:total.weeklyFollowNo,//周总量
  76. weekVisitNo:total.weeklyVisitNo,//周外拜量
  77. monthsTelNo:total.monthTelNo,//月电话量
  78. monthsFollowNo:total.monthFollowNo,//月总量
  79. monthsVisitNo:total.monthVisitNo,//月外拜量
  80. annualTelNo:total.yearTelNo,//年电话量
  81. annualFollowNo:total.yearFollowNo,//年总量
  82. annualVisitNo:total.yearVisitNo,//年外拜量
  83. }
  84. )
  85. }
  86. this.setState({
  87. dataSource: theArr,
  88. })
  89. }.bind(this),
  90. }).always(function() {
  91. this.setState({
  92. loading: false
  93. });
  94. }.bind(this));
  95. },
  96. totalData(timeTypes) {
  97. this.setState({
  98. loading: true
  99. });
  100. $.ajax({
  101. method: "get",
  102. dataType: "json",
  103. crossDomain: false,
  104. url: globalConfig.context + "/api/admin/report/sales/countMarketingStatistics",
  105. data: {
  106. type:'0',
  107. timeType:this.state.releaseDate[0]?4:timeTypes,
  108. startDate: this.state.releaseDate[0]?(this.state.releaseDate[0]+' '+'00:00:00'):'',
  109. endDate: this.state.releaseDate[1]?(this.state.releaseDate[1]+' '+'00:00:00'):'',
  110. depId:this.state.superId,//部门机构
  111. },
  112. success: function(data) {
  113. let thedata = data.data;
  114. let theArr = [];
  115. if(!thedata) {
  116. if(data.error && data.error.length) {
  117. message.warning(data.error[0].message);
  118. };
  119. thedata = {};
  120. }
  121. this.loadData(timeTypes,thedata);
  122. this.selectSuperId();
  123. }.bind(this),
  124. }).always(function() {
  125. this.setState({
  126. loading: false
  127. });
  128. }.bind(this));
  129. },
  130. //时间选择
  131. selTime(value,index){
  132. this.setState({
  133. Dtime:value,
  134. selTime:index
  135. })
  136. },
  137. //获取上级组织
  138. selectSuperId() {
  139. this.state.data = []
  140. $.ajax({
  141. method: "post",
  142. dataType: "json",
  143. crossDomain: false,
  144. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  145. data:{
  146. },
  147. success: function (data) {
  148. let theArr = [];
  149. let theId=[];//用于保存上级组织的ID和名称
  150. let thedata=data.data;
  151. if (!thedata) {
  152. if (data.error && data.error.length) {
  153. message.warning(data.error[0].message);
  154. };
  155. thedata = {};
  156. };
  157. var contactIds=[];
  158. for(var i=0;i<data.data.length;i++){
  159. let theData = data.data[i];
  160. theArr.push(
  161. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  162. );
  163. theId.push(
  164. [theData.id,theData.name]
  165. );
  166. };
  167. this.setState({
  168. SuperArr:thedata,
  169. contactsOption: theArr,
  170. theId: theId,
  171. orderStatusOptions:data.data,
  172. });
  173. }.bind(this),
  174. }).always(function () {
  175. this.setState({
  176. loading: false
  177. });
  178. }.bind(this));
  179. },
  180. //判断浏览器类型
  181. getExplorer() {
  182. var explorer = window.navigator.userAgent;
  183. //ie
  184. if(explorer.indexOf("MSIE") >= 0) {
  185. return 'ie';
  186. }
  187. //firefox
  188. else if(explorer.indexOf("Firefox") >= 0) {
  189. return 'Firefox';
  190. }
  191. //Chrome
  192. else if(explorer.indexOf("Chrome") >= 0) {
  193. return 'Chrome';
  194. }
  195. //Opera
  196. else if(explorer.indexOf("Opera") >= 0) {
  197. return 'Opera';
  198. }
  199. //Safari
  200. else if(explorer.indexOf("Safari") >= 0) {
  201. return 'Safari';
  202. }
  203. },
  204. //导出为exel表格
  205. tabExel() {
  206. var table = document.querySelector('#daochu1');
  207. var idTmr;
  208. //debugger;
  209. //整个表格拷贝到EXCEL中
  210. if(this.getExplorer() == 'ie') {
  211. var curTbl = document.getElementById(tableid);
  212. var oXL = new ActiveXObject("Excel.Application");
  213. //创建AX对象excel
  214. var oWB = oXL.Workbooks.Add();
  215. //获取workbook对象
  216. var xlsheet = oWB.Worksheets(1);
  217. //激活当前sheet
  218. var sel = document.body.createTextRange();
  219. sel.moveToElementText(curTbl);
  220. //把表格中的内容移到TextRange中
  221. sel.select();
  222. //全选TextRange中内容
  223. sel.execCommand("Copy");
  224. //复制TextRange中内容
  225. xlsheet.Paste();
  226. //粘贴到活动的EXCEL中
  227. oXL.Visible = true;
  228. //设置excel可见属性
  229. try {
  230. var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  231. } catch(e) {
  232. print("Nested catch caught " + e);
  233. } finally {
  234. oWB.SaveAs(fname);
  235. oWB.Close(savechanges = false);
  236. //xls.visible = false;
  237. oXL.Quit();
  238. oXL = null;
  239. //结束excel进程,退出完成
  240. //window.setInterval("Cleanup();",1);
  241. idTmr = window.setInterval("Cleanup();", 1);
  242. }
  243. } else {
  244. console.log(table);
  245. this.tableToExcel(table,this.getExplorer());
  246. }
  247. function Cleanup() {
  248. window.clearInterval(idTmr);
  249. CollectGarbage();
  250. }
  251. },
  252. tableToExcel(table,name) {
  253. var uri = 'data:application/vnd.ms-excel;base64,',
  254. 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>',
  255. base64 = function(s) {
  256. return window.btoa(unescape(encodeURIComponent(s)))
  257. },
  258. format = function(s, c) {
  259. return s.replace(/{(\w+)}/g,
  260. function(m, p) {
  261. return c[p];
  262. })
  263. }
  264. console.log(table.nodeType);
  265. if(!table.nodeType) table = document.getElementById(table);
  266. console.log(table);
  267. var ctx = {
  268. worksheet: name || 'Worksheet',
  269. table: table.innerHTML
  270. };
  271. window.location.href = uri + base64(format(template, ctx))
  272. },
  273. getInitialState() {
  274. return {
  275. releaseDate: [],
  276. selectedRowKeys: [],
  277. selectedRows: [],
  278. loading: false,
  279. visible: false,
  280. showDesc: false,
  281. timeState:false,
  282. Dtime:undefined,
  283. selTime:'',
  284. columns: [
  285. {
  286. title: '序号',
  287. dataIndex: 'nub',
  288. width:50,
  289. key: 'nub',
  290. fixed:false,
  291. render:(text,record)=>{
  292. if(!record.theNumber){
  293. return text
  294. }else{
  295. return {
  296. children: text,
  297. props: {
  298. colSpan:0
  299. },
  300. }
  301. }
  302. }
  303. },{
  304. title: '姓名',
  305. width:100,
  306. fixed:false,
  307. dataIndex: 'name',
  308. key: 'name',
  309. render:(text,record)=>{
  310. if(!record.theNumber){
  311. return text
  312. }else{
  313. return {
  314. children: text,
  315. props: {
  316. colSpan:4
  317. },
  318. }
  319. }
  320. }
  321. },
  322. {
  323. title: '部门',
  324. dataIndex: 'departmentName',
  325. key: 'departmentName',
  326. width:100,
  327. fixed:false,
  328. render:(text,record)=>{
  329. if(!record.theNumber){
  330. return text&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  331. }else{
  332. return {
  333. children: text,
  334. props: {
  335. colSpan:0
  336. },
  337. }
  338. }
  339. }
  340. },{
  341. title: '职位',
  342. width:100,
  343. fixed:false,
  344. dataIndex: 'roleName',
  345. key: 'roleName',
  346. render:(text,record)=>{
  347. if(!record.theNumber){
  348. return text
  349. }else{
  350. return {
  351. children: text,
  352. props: {
  353. colSpan:0
  354. },
  355. }
  356. }
  357. }
  358. },
  359. {
  360. title: '私有客户数',
  361. width:100,
  362. fixed:false,
  363. dataIndex: 'privateCustomersCount',
  364. key: 'privateCustomersCount',
  365. render:(text,record)=>{
  366. if(!record.theNumber){
  367. return text
  368. }else{
  369. return {
  370. children: text,
  371. props: {
  372. colSpan:1
  373. },
  374. }
  375. }
  376. }
  377. },{
  378. title: '今日营销',
  379. children: [
  380. {
  381. title: '营销总量(所有)',
  382. width:100,
  383. dataIndex: 'dailyFollowNo',
  384. key: 'nudailyFollowNom',
  385. sorter: (a, b) => a.dailyFollowNo - b.dailyFollowNo,
  386. sorterOrder:'ascend'
  387. },{
  388. title: '电话量',
  389. width:80,
  390. dataIndex: 'dailyTelNo',
  391. key: 'dailyTelNo',
  392. sorter: (a, b) => a.dailyTelNo - b.dailyTelNo,
  393. },{
  394. title: '外拜量',
  395. width:80,
  396. dataIndex: 'dailyVisitNo',
  397. key: 'dailyVisitNo',
  398. sorter: (a, b) => a.dailyVisitNo - b.dailyVisitNo,
  399. }
  400. ],
  401. },
  402. {
  403. title: '周营销累计',
  404. children: [
  405. {
  406. title: '周营销总量(所有)',
  407. width:110,
  408. dataIndex: 'weekFollowNo',
  409. key: 'weekFollowNo',
  410. sorter: (a, b) => a.weekFollowNo - b.weekFollowNo,
  411. },{
  412. title: '电话量',
  413. width:80,
  414. dataIndex: 'weekTelNo',
  415. key: 'weekTelNo',
  416. sorter: (a, b) => a.weekTelNo - b.weekTelNo,
  417. },{
  418. title: '外拜量',
  419. width:80,
  420. dataIndex: 'weekVisitNo',
  421. key: 'weekVisitNo',
  422. sorter: (a, b) => a.weekVisitNo - b.weekVisitNo,
  423. }
  424. ],
  425. },{
  426. title: '月营销累计',
  427. children: [
  428. {
  429. title: '月营销总量(所有)',
  430. width:110,
  431. dataIndex: 'monthsFollowNo',
  432. key: 'monthsFollowNo',
  433. sorter: (a, b) => a.monthsFollowNo - b.monthsFollowNo,
  434. },{
  435. title: '电话量',
  436. width:80,
  437. dataIndex: 'monthsTelNo',
  438. key: 'monthsTelNo',
  439. sorter: (a, b) => a.monthsTelNo - b.monthsTelNo,
  440. },{
  441. title: '外拜量',
  442. width:80,
  443. dataIndex: 'monthsVisitNo',
  444. key: 'monthsVisitNo',
  445. sorter: (a, b) => a.monthsVisitNo - b.monthsVisitNo,
  446. }
  447. ],
  448. },{
  449. title: '年营销累计',
  450. children: [
  451. {
  452. title: '年营销总量(所有)',
  453. width:110,
  454. dataIndex: 'annualFollowNo',
  455. key: 'annualFollowNo',
  456. sorter: (a, b) => a.annualFollowNo - b.annualFollowNo,
  457. },{
  458. title: '电话量',
  459. width:80,
  460. dataIndex: 'annualTelNo',
  461. key: 'annualTelNo',
  462. sorter: (a, b) => a.annualTelNo - b.annualTelNo,
  463. },{
  464. title: '外拜量',
  465. width:80,
  466. dataIndex: 'annualVisitNo',
  467. key: 'annualVisitNo',
  468. sorter: (a, b) => a.annualVisitNo - b.annualVisitNo,
  469. }
  470. ],
  471. }
  472. ],
  473. dataSource: [],
  474. };
  475. },
  476. search() {
  477. this.totalData()
  478. },
  479. reset() {
  480. this.state.superId = undefined;//部门机构清零
  481. this.totalData();
  482. },
  483. week(){
  484. this.state.releaseDate[0] = undefined;//开始时间清零
  485. this.state.releaseDate[1] = undefined;//结束时间清零
  486. this.totalData(0);
  487. },
  488. month(){
  489. this.state.releaseDate[0] = undefined;//开始时间清零
  490. this.state.releaseDate[1] = undefined;//结束时间清零
  491. this.totalData(1);
  492. },
  493. quarter(){
  494. this.state.releaseDate[0] = undefined;//开始时间清零
  495. this.state.releaseDate[1] = undefined;//结束时间清零
  496. this.totalData(2);
  497. },
  498. year(){
  499. this.state.releaseDate[0] = undefined;//开始时间清零
  500. this.state.releaseDate[1] = undefined;//结束时间清零
  501. this.totalData(3);
  502. },
  503. componentWillMount() {
  504. this.totalData();
  505. let times=new Date();
  506. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  507. this.setState({
  508. Nowtime:nowTime
  509. })
  510. },
  511. render() {
  512. const { RangePicker } = DatePicker;
  513. let departmentArr = this.state.departmentArr || [];
  514. return(
  515. <div className='set-content'>
  516. <p style={{fontSize:'20px',marginBottom:'10px'}}>客户营销统计表(员工)</p>
  517. <div className="clearfix">
  518. <Button type="primary" onClick={this.tabExel} style={{float:'right'}}>导出到表格</Button>
  519. <span style={{fontSize:'16px'}}>部门机构 : </span>
  520. <Select placeholder="选择部门"
  521. style={{ width:'200px',marginRight:'10px' }}
  522. value={this.state.superId}
  523. onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
  524. {this.state.contactsOption}
  525. </Select>
  526. <Button onClick={this.week} style={{marginRight:'5px'}}>本周</Button>
  527. <Button onClick={this.month} style={{marginRight:'5px'}}>本月</Button>
  528. <Button onClick={this.quarter} style={{marginRight:'5px'}}>本季</Button>
  529. <Button onClick={this.year} style={{marginRight:'5px'}}>本年</Button>
  530. <span className="titleTime" style={{marginRight:'5px'}}>起止时间:</span>
  531. <RangePicker
  532. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  533. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  534. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  535. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  536. <Button onClick={this.reset}>重置</Button>
  537. </div>
  538. <div id='daochu1'>
  539. <div className="surfaceTitle">
  540. <span className="nowtime">{this.state.timeState?this.state.txtTime:this.state.Nowtime}</span>
  541. <span>客户营销统计表(员工)</span>
  542. </div>
  543. <div className="patent-table">
  544. <div className="scroll">
  545. <Spin spinning={this.state.loading}>
  546. <Table columns={this.state.columns}
  547. dataSource={this.state.dataSource}
  548. bordered
  549. pagination={false}
  550. />
  551. </Spin>
  552. </div>
  553. </div>
  554. </div>
  555. </div>
  556. )
  557. }
  558. });
  559. export default DiurnalStatisticsOne;