diurnalStatistics.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  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. this.tableToExcel(table,this.getExplorer());
  243. }
  244. function Cleanup() {
  245. window.clearInterval(idTmr);
  246. CollectGarbage();
  247. }
  248. },
  249. tableToExcel(table,name) {
  250. var uri = 'data:application/vnd.ms-excel;base64,',
  251. 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>',
  252. base64 = function(s) {
  253. return window.btoa(unescape(encodeURIComponent(s)))
  254. },
  255. format = function(s, c) {
  256. return s.replace(/{(\w+)}/g,
  257. function(m, p) {
  258. return c[p];
  259. })
  260. }
  261. if(!table.nodeType) table = document.getElementById(table);
  262. var ctx = {
  263. worksheet: name || 'Worksheet',
  264. table: table.innerHTML
  265. };
  266. window.location.href = uri + base64(format(template, ctx))
  267. },
  268. getInitialState() {
  269. return {
  270. selectedRowKeys: [],
  271. selectedRows: [],
  272. loading: false,
  273. visible: false,
  274. showDesc: false,
  275. timeState:false,
  276. Dtime:undefined,
  277. selTime:'',
  278. columns: [
  279. {
  280. title: '序号',
  281. dataIndex: 'nub',
  282. width:50,
  283. key: 'nub',
  284. fixed:false,
  285. render:(text,record)=>{
  286. if(!record.theNumber){
  287. return text
  288. }else{
  289. return {
  290. children: text,
  291. props: {
  292. colSpan:0
  293. },
  294. }
  295. }
  296. }
  297. },
  298. {
  299. title: '部门',
  300. dataIndex: 'departmentName',
  301. key: 'departmentName',
  302. width:230,
  303. fixed:false,
  304. render:(text,record)=>{
  305. if(!record.theNumber){
  306. return text//&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  307. }else{
  308. return {
  309. children: text,
  310. props: {
  311. colSpan:3
  312. },
  313. }
  314. }
  315. }
  316. }, {
  317. title: '总经理',
  318. width:100,
  319. fixed:false,
  320. dataIndex: 'departmentManagerName',
  321. key: 'departmentManagerName',
  322. render:(text,record)=>{
  323. if(!record.theNumber){
  324. return text
  325. }else{
  326. return {
  327. children: text,
  328. props: {
  329. colSpan:0
  330. },
  331. }
  332. }
  333. }
  334. },
  335. {
  336. title: '部门人数',
  337. width:100,
  338. fixed:false,
  339. dataIndex: 'departmentNumber',
  340. key: 'departmentNumber',
  341. render:(text,record)=>{
  342. if(!record.theNumber){
  343. return text
  344. }else{
  345. return {
  346. children: text,
  347. props: {
  348. colSpan:1
  349. },
  350. }
  351. }
  352. }
  353. },
  354. {
  355. title: '部门客户数',
  356. width:100,
  357. fixed:false,
  358. dataIndex: 'privateCustomersCount',
  359. key: 'privateCustomersCount',
  360. render:(text,record)=>{
  361. if(!record.theNumber){
  362. return text
  363. }else{
  364. return {
  365. children: text,
  366. props: {
  367. colSpan:1
  368. },
  369. }
  370. }
  371. }
  372. },{
  373. title: '新增客户数',
  374. width:100,
  375. fixed:false,
  376. dataIndex: 'dataCount',
  377. key: 'dataCount',
  378. render:(text,record)=>{
  379. if(!record.theNumber){
  380. return text
  381. }else{
  382. return {
  383. children: text,
  384. props: {
  385. colSpan:1
  386. },
  387. }
  388. }
  389. }
  390. },
  391. {
  392. title: '今日营销',
  393. children: [
  394. {
  395. title: '营销总量(所有)',
  396. width:100,
  397. dataIndex: 'dailyFollowNo',
  398. key: 'nudailyFollowNom',
  399. sorter: (a, b) => a.dailyFollowNo - b.dailyFollowNo,
  400. // sortOrder:'ascend'
  401. },{
  402. title: '电话量',
  403. width:80,
  404. dataIndex: 'dailyTelNo',
  405. key: 'dailyTelNo',
  406. sorter: (a, b) => a.dailyTelNo - b.dailyTelNo,
  407. },{
  408. title: '外拜量',
  409. width:80,
  410. dataIndex: 'dailyVisitNo',
  411. key: 'dailyVisitNo',
  412. sorter: (a, b) => a.dailyVisitNo - b.dailyVisitNo,
  413. },{
  414. title: '人均营销量',
  415. width:110,
  416. dataIndex: 'dailyAVG',
  417. key: 'dailyAVG',
  418. sorter: (a, b) => a.dailyAVG - b.dailyAVG,
  419. }
  420. ],
  421. },
  422. {
  423. title: '周营销累计',
  424. children: [
  425. {
  426. title: '周营销总量(所有)',
  427. width:110,
  428. dataIndex: 'weekFollowNo',
  429. key: 'weekFollowNo',
  430. sorter: (a, b) => a.weekFollowNo - b.weekFollowNo,
  431. },{
  432. title: '电话量',
  433. width:80,
  434. dataIndex: 'weekTelNo',
  435. key: 'weekTelNo',
  436. sorter: (a, b) => a.weekTelNo - b.weekTelNo,
  437. },{
  438. title: '外拜量',
  439. width:80,
  440. dataIndex: 'weekVisitNo',
  441. key: 'weekVisitNo',
  442. sorter: (a, b) => a.weekVisitNo - b.weekVisitNo,
  443. }
  444. ],
  445. },{
  446. title: '月营销累计',
  447. children: [
  448. {
  449. title: '月营销总量(所有)',
  450. width:110,
  451. dataIndex: 'monthsFollowNo',
  452. key: 'monthsFollowNo',
  453. sorter: (a, b) => a.monthsFollowNo - b.monthsFollowNo,
  454. },{
  455. title: '电话量',
  456. width:80,
  457. dataIndex: 'monthsTelNo',
  458. key: 'monthsTelNo',
  459. sorter: (a, b) => a.monthsTelNo - b.monthsTelNo,
  460. },{
  461. title: '外拜量',
  462. width:80,
  463. dataIndex: 'monthsVisitNo',
  464. key: 'monthsVisitNo',
  465. sorter: (a, b) => a.monthsVisitNo - b.monthsVisitNo,
  466. }
  467. ],
  468. },{
  469. title: '年营销累计',
  470. children: [
  471. {
  472. title: '年营销总量(所有)',
  473. width:110,
  474. dataIndex: 'annualFollowNo',
  475. key: 'annualFollowNo',
  476. sorter: (a, b) => a.annualFollowNo - b.annualFollowNo,
  477. },{
  478. title: '电话量',
  479. width:80,
  480. dataIndex: 'annualTelNo',
  481. key: 'annualTelNo',
  482. sorter: (a, b) => a.annualTelNo - b.annualTelNo,
  483. },{
  484. title: '外拜量',
  485. width:80,
  486. dataIndex: 'annualVisitNo',
  487. key: 'annualVisitNo',
  488. sorter: (a, b) => a.annualVisitNo - b.annualVisitNo,
  489. }
  490. ],
  491. }
  492. ],
  493. dataSource: [],
  494. };
  495. },
  496. search() {
  497. this.totalData()
  498. },
  499. reset() {
  500. this.state.superId = undefined;//部门机构清零
  501. this.totalData()
  502. this.setState({
  503. order:"false"
  504. })
  505. },
  506. //重构排序
  507. tabChange(pagination,filter,sorter){
  508. console.log(pagination)
  509. console.log(sorter)
  510. },
  511. componentWillMount() {
  512. //this.loadData();
  513. this.totalData();
  514. let times=new Date();
  515. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  516. this.setState({
  517. Nowtime:nowTime
  518. })
  519. },
  520. render() {
  521. let departmentArr = this.state.departmentArr || [];
  522. return(
  523. <div className='set-content'>
  524. <p style={{fontSize:'20px',marginBottom:'10px'}}>客户营销统计表(部门)</p>
  525. <div className="clearfix">
  526. <Button type="primary" onClick={this.tabExel} style={{ float:'right' }}>导出到表格</Button>
  527. <span style={{fontSize:'16px'}}>部门机构 : </span>
  528. <Select placeholder="选择部门"
  529. style={{ width:'200px',marginRight:'10px' }}
  530. value={this.state.superId}
  531. onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
  532. {this.state.contactsOption}
  533. </Select>
  534. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  535. <Button onClick={this.reset}>重置</Button>
  536. </div>
  537. <div id='daochu'>
  538. <div className="surfaceTitle">
  539. <span className="nowtime" style={{fontWeight:'bold'}}>{this.state.timeState?this.state.txtTime:this.state.Nowtime}</span>
  540. <span style={{fontWeight:'bold'}}>客户营销统计表(部门)</span>
  541. </div>
  542. <div className="patent-table" id='daochu'>
  543. <div className="scroll">
  544. <Spin spinning={this.state.loading}>
  545. <Table columns={this.state.columns}
  546. dataSource={this.state.dataSource}
  547. //scroll={{ x: 600,y:500}}
  548. bordered
  549. onChange={this.tabChange}
  550. pagination={false}
  551. />
  552. </Spin>
  553. </div>
  554. </div>
  555. </div>
  556. </div>
  557. )
  558. }
  559. });
  560. const Tablees=Form.create()(React.createClass({
  561. //详情tab切换数据处理
  562. callbacks(e) {
  563. this.setState({
  564. callnubs: e,
  565. })
  566. if(e == '1') {
  567. }
  568. if(e == '2') {
  569. }
  570. },
  571. getInitialState() {
  572. return {
  573. callnubs: "1",
  574. }
  575. },
  576. render() {
  577. return(
  578. <div className="clearfix" style={{marginTop:'0px',marginLeft:'10px'}}>
  579. <Tabs onChange={this.callbacks} type="card" activeKey={this.state.callnubs} style={{paddingLeft:'15px',paddingRight:'15px',marginRight:'20px'}}>
  580. <TabPane tab="客户营销统计表(部门)" key="1" >
  581. <DiurnalStatistics />
  582. </TabPane>
  583. <TabPane tab="客户营销统计表(员工)" key="2">
  584. <DiurnalStatisticsOne />
  585. </TabPane>
  586. </Tabs>
  587. </div>
  588. );
  589. }
  590. }));
  591. export default Tablees;