timeStatisticsOne.jsx 15 KB

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