diurnalStatistics.jsx 17 KB

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