diurnalStatistics.jsx 17 KB

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