diurnalStatisticsOne.jsx 15 KB

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