diurnalStatistics.jsx 16 KB

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