diurnalStatisticsOne.jsx 15 KB

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