diurnalStatistics.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  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. dailyTelNo:item.dayTelNo,//日电话量
  46. dailyVisitNo:item.dayVisitNo,//日外拜量
  47. dailyFollowNo:item.dayFollowNo,//日营销总量
  48. dailyAVG:parseFloat(item.dayAVG).toFixed(2),//日人均营销量
  49. weekTelNo:item.weeklyTelNo,//周电话量
  50. weekFollowNo:item.weeklyFollowNo,//周总量
  51. weekVisitNo:item.weeklyVisitNo,//周外拜量
  52. monthsTelNo:item.monthTelNo,//月电话量
  53. monthsFollowNo:item.monthFollowNo,//月总量
  54. monthsVisitNo:item.monthVisitNo,//月外拜量
  55. annualTelNo:item.yearTelNo,//年电话量
  56. annualFollowNo:item.yearFollowNo,//年总量
  57. annualVisitNo:item.yearVisitNo,//年外拜量
  58. })
  59. })
  60. }
  61. if(theArr.length){
  62. theArr.push(
  63. {
  64. key:9999999,
  65. theNumber:true,
  66. departmentName:'合计',
  67. departmentNumber:total.departmentNumber, //部门人数
  68. privateCustomersCount:total.privateCustomersCount,// 部门客户数
  69. dailyTelNo:total.dayTelNo,//日电话量
  70. dailyVisitNo:total.dayVisitNo,//日外拜量
  71. dailyFollowNo:total.dayFollowNo,//日营销总量
  72. dailyAVG:parseFloat(total.dayAVG).toFixed(2),//日人均营销量
  73. weekTelNo:total.weeklyTelNo,//周电话量
  74. weekFollowNo:total.weeklyFollowNo,//周总量
  75. weekVisitNo:total.weeklyVisitNo,//周外拜量
  76. monthsTelNo:total.monthTelNo,//月电话量
  77. monthsFollowNo:total.monthFollowNo,//月总量
  78. monthsVisitNo:total.monthVisitNo,//月外拜量
  79. annualTelNo:total.yearTelNo,//年电话量
  80. annualFollowNo:total.yearFollowNo,//年总量
  81. annualVisitNo:total.yearVisitNo,//年外拜量
  82. }
  83. )
  84. }
  85. this.setState({
  86. dataSource: theArr,
  87. })
  88. }.bind(this),
  89. }).always(function() {
  90. this.setState({
  91. loading: false
  92. });
  93. }.bind(this));
  94. },
  95. totalData() {
  96. this.setState({
  97. loading: true
  98. });
  99. $.ajax({
  100. method: "get",
  101. dataType: "json",
  102. crossDomain: false,
  103. url: globalConfig.context + "/api/admin/report/sales/countMarketingStatistics",
  104. data: {
  105. type:'1',
  106. depId:this.state.superId,//部门机构
  107. },
  108. success: function(data) {
  109. let thedata = data.data;
  110. let theArr = [];
  111. if(!thedata) {
  112. if(data.error && data.error.length) {
  113. message.warning(data.error[0].message);
  114. };
  115. thedata = {};
  116. }
  117. this.loadData(thedata)
  118. this.selectSuperId();
  119. }.bind(this),
  120. }).always(function() {
  121. this.setState({
  122. loading: false
  123. });
  124. }.bind(this));
  125. },
  126. //时间选择
  127. selTime(value,index){
  128. this.setState({
  129. Dtime:value,
  130. selTime:index
  131. })
  132. },
  133. //获取上级组织
  134. selectSuperId() {
  135. this.state.data = []
  136. $.ajax({
  137. method: "post",
  138. dataType: "json",
  139. crossDomain: false,
  140. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  141. data:{
  142. },
  143. success: function (data) {
  144. let theArr = [];
  145. let theId=[];//用于保存上级组织的ID和名称
  146. let thedata=data.data;
  147. if (!thedata) {
  148. if (data.error && data.error.length) {
  149. message.warning(data.error[0].message);
  150. };
  151. thedata = {};
  152. };
  153. var contactIds=[];
  154. for(var i=0;i<data.data.length;i++){
  155. let theData = data.data[i];
  156. theArr.push(
  157. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  158. );
  159. theId.push(
  160. [theData.id,theData.name]
  161. );
  162. };
  163. this.setState({
  164. SuperArr:thedata,
  165. contactsOption: theArr,
  166. theId: theId,
  167. orderStatusOptions:data.data,
  168. });
  169. }.bind(this),
  170. }).always(function () {
  171. this.setState({
  172. loading: false
  173. });
  174. }.bind(this));
  175. },
  176. //判断浏览器类型
  177. getExplorer() {
  178. var explorer = window.navigator.userAgent;
  179. //ie
  180. if(explorer.indexOf("MSIE") >= 0) {
  181. return 'ie';
  182. }
  183. //firefox
  184. else if(explorer.indexOf("Firefox") >= 0) {
  185. return 'Firefox';
  186. }
  187. //Chrome
  188. else if(explorer.indexOf("Chrome") >= 0) {
  189. return 'Chrome';
  190. }
  191. //Opera
  192. else if(explorer.indexOf("Opera") >= 0) {
  193. return 'Opera';
  194. }
  195. //Safari
  196. else if(explorer.indexOf("Safari") >= 0) {
  197. return 'Safari';
  198. }
  199. },
  200. //导出为exel表格
  201. tabExel() {
  202. var table = document.querySelector('#daochu');
  203. var idTmr;
  204. //debugger;
  205. //整个表格拷贝到EXCEL中
  206. if(this.getExplorer() == 'ie') {
  207. var curTbl = document.getElementById(tableid);
  208. var oXL = new ActiveXObject("Excel.Application");
  209. //创建AX对象excel
  210. var oWB = oXL.Workbooks.Add();
  211. //获取workbook对象
  212. var xlsheet = oWB.Worksheets(1);
  213. //激活当前sheet
  214. var sel = document.body.createTextRange();
  215. sel.moveToElementText(curTbl);
  216. //把表格中的内容移到TextRange中
  217. sel.select();
  218. //全选TextRange中内容
  219. sel.execCommand("Copy");
  220. //复制TextRange中内容
  221. xlsheet.Paste();
  222. //粘贴到活动的EXCEL中
  223. oXL.Visible = true;
  224. //设置excel可见属性
  225. try {
  226. var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  227. } catch(e) {
  228. print("Nested catch caught " + e);
  229. } finally {
  230. oWB.SaveAs(fname);
  231. oWB.Close(savechanges = false);
  232. //xls.visible = false;
  233. oXL.Quit();
  234. oXL = null;
  235. //结束excel进程,退出完成
  236. //window.setInterval("Cleanup();",1);
  237. idTmr = window.setInterval("Cleanup();", 1);
  238. }
  239. } else {
  240. console.log(table);
  241. this.tableToExcel(table,this.getExplorer());
  242. }
  243. function Cleanup() {
  244. window.clearInterval(idTmr);
  245. CollectGarbage();
  246. }
  247. },
  248. tableToExcel(table,name) {
  249. var uri = 'data:application/vnd.ms-excel;base64,',
  250. 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>',
  251. base64 = function(s) {
  252. return window.btoa(unescape(encodeURIComponent(s)))
  253. },
  254. format = function(s, c) {
  255. return s.replace(/{(\w+)}/g,
  256. function(m, p) {
  257. return c[p];
  258. })
  259. }
  260. console.log(table.nodeType);
  261. if(!table.nodeType) table = document.getElementById(table);
  262. console.log(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:200,
  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. {
  375. title: '今日营销',
  376. children: [
  377. {
  378. title: '营销总量(所有)',
  379. width:100,
  380. dataIndex: 'dailyFollowNo',
  381. key: 'nudailyFollowNom',
  382. sorter: (a, b) => a.dailyFollowNo - b.dailyFollowNo,
  383. // sortOrder:'ascend'
  384. },{
  385. title: '电话量',
  386. width:80,
  387. dataIndex: 'dailyTelNo',
  388. key: 'dailyTelNo',
  389. sorter: (a, b) => a.dailyTelNo - b.dailyTelNo,
  390. },{
  391. title: '外拜量',
  392. width:80,
  393. dataIndex: 'dailyVisitNo',
  394. key: 'dailyVisitNo',
  395. sorter: (a, b) => a.dailyVisitNo - b.dailyVisitNo,
  396. },{
  397. title: '人均营销量',
  398. width:110,
  399. dataIndex: 'dailyAVG',
  400. key: 'dailyAVG',
  401. sorter: (a, b) => a.dailyAVG - b.dailyAVG,
  402. }
  403. ],
  404. },
  405. {
  406. title: '周营销累计',
  407. children: [
  408. {
  409. title: '周营销总量(所有)',
  410. width:110,
  411. dataIndex: 'weekFollowNo',
  412. key: 'weekFollowNo',
  413. sorter: (a, b) => a.weekFollowNo - b.weekFollowNo,
  414. },{
  415. title: '电话量',
  416. width:80,
  417. dataIndex: 'weekTelNo',
  418. key: 'weekTelNo',
  419. sorter: (a, b) => a.weekTelNo - b.weekTelNo,
  420. },{
  421. title: '外拜量',
  422. width:80,
  423. dataIndex: 'weekVisitNo',
  424. key: 'weekVisitNo',
  425. sorter: (a, b) => a.weekVisitNo - b.weekVisitNo,
  426. }
  427. ],
  428. },{
  429. title: '月营销累计',
  430. children: [
  431. {
  432. title: '月营销总量(所有)',
  433. width:110,
  434. dataIndex: 'monthsFollowNo',
  435. key: 'monthsFollowNo',
  436. sorter: (a, b) => a.monthsFollowNo - b.monthsFollowNo,
  437. },{
  438. title: '电话量',
  439. width:80,
  440. dataIndex: 'monthsTelNo',
  441. key: 'monthsTelNo',
  442. sorter: (a, b) => a.monthsTelNo - b.monthsTelNo,
  443. },{
  444. title: '外拜量',
  445. width:80,
  446. dataIndex: 'monthsVisitNo',
  447. key: 'monthsVisitNo',
  448. sorter: (a, b) => a.monthsVisitNo - b.monthsVisitNo,
  449. }
  450. ],
  451. },{
  452. title: '年营销累计',
  453. children: [
  454. {
  455. title: '年营销总量(所有)',
  456. width:110,
  457. dataIndex: 'annualFollowNo',
  458. key: 'annualFollowNo',
  459. sorter: (a, b) => a.annualFollowNo - b.annualFollowNo,
  460. },{
  461. title: '电话量',
  462. width:80,
  463. dataIndex: 'annualTelNo',
  464. key: 'annualTelNo',
  465. sorter: (a, b) => a.annualTelNo - b.annualTelNo,
  466. },{
  467. title: '外拜量',
  468. width:80,
  469. dataIndex: 'annualVisitNo',
  470. key: 'annualVisitNo',
  471. sorter: (a, b) => a.annualVisitNo - b.annualVisitNo,
  472. }
  473. ],
  474. }
  475. ],
  476. dataSource: [],
  477. };
  478. },
  479. search() {
  480. this.totalData()
  481. },
  482. reset() {
  483. this.state.superId = undefined;//部门机构清零
  484. this.totalData()
  485. this.setState({
  486. order:"false"
  487. })
  488. },
  489. //重构排序
  490. tabChange(pagination,filter,sorter){
  491. console.log(pagination)
  492. console.log(sorter)
  493. },
  494. componentWillMount() {
  495. //this.loadData();
  496. this.totalData();
  497. let times=new Date();
  498. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  499. this.setState({
  500. Nowtime:nowTime
  501. })
  502. },
  503. render() {
  504. let departmentArr = this.state.departmentArr || [];
  505. return(
  506. <div className='set-content'>
  507. <p style={{fontSize:'20px',marginBottom:'10px'}}>客户营销统计表(部门)</p>
  508. <div className="clearfix">
  509. <Button type="primary" onClick={this.tabExel} style={{ float:'right' }}>导出到表格</Button>
  510. <span style={{fontSize:'16px'}}>部门机构 : </span>
  511. <Select placeholder="选择部门"
  512. style={{ width:'200px',marginRight:'10px' }}
  513. value={this.state.superId}
  514. onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
  515. {this.state.contactsOption}
  516. </Select>
  517. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  518. <Button onClick={this.reset}>重置</Button>
  519. </div>
  520. <div id='daochu'>
  521. <div className="surfaceTitle">
  522. <span className="nowtime" style={{fontWeight:'bold'}}>{this.state.timeState?this.state.txtTime:this.state.Nowtime}</span>
  523. <span style={{fontWeight:'bold'}}>客户营销统计表(部门)</span>
  524. </div>
  525. <div className="patent-table" id='daochu'>
  526. <div className="scroll">
  527. <Spin spinning={this.state.loading}>
  528. <Table columns={this.state.columns}
  529. dataSource={this.state.dataSource}
  530. //scroll={{ x: 600,y:500}}
  531. bordered
  532. onChange={this.tabChange}
  533. pagination={false}
  534. />
  535. </Spin>
  536. </div>
  537. </div>
  538. </div>
  539. </div>
  540. )
  541. }
  542. });
  543. const Tablees=Form.create()(React.createClass({
  544. //详情tab切换数据处理
  545. callbacks(e) {
  546. this.setState({
  547. callnubs: e,
  548. })
  549. if(e == '1') {
  550. }
  551. if(e == '2') {
  552. }
  553. },
  554. getInitialState() {
  555. return {
  556. callnubs: "1",
  557. }
  558. },
  559. render() {
  560. return(
  561. <div className="clearfix" style={{marginTop:'0px',marginLeft:'10px'}}>
  562. <Tabs onChange={this.callbacks} type="card" activeKey={this.state.callnubs} style={{paddingLeft:'15px',paddingRight:'15px',marginRight:'20px'}}>
  563. <TabPane tab="客户营销统计表(部门)" key="1" >
  564. <DiurnalStatistics />
  565. </TabPane>
  566. <TabPane tab="客户营销统计表(员工)" key="2">
  567. <DiurnalStatisticsOne />
  568. </TabPane>
  569. </Tabs>
  570. </div>
  571. );
  572. }
  573. }));
  574. export default Tablees;