departmentReport.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568
  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 PersonalReport = React.createClass({
  8. loadData(totalArr) {
  9. if(this.state.selTime){
  10. var newTime=this.state.selTime;
  11. var timeArr=newTime.split('-');
  12. var txtTime=timeArr[0]+'年'+timeArr[1]+'月'+timeArr[2]+'日';
  13. this.setState({
  14. timeState:true,
  15. txtTime:txtTime,
  16. })
  17. }
  18. let total=totalArr;
  19. this.setState({
  20. loading: true
  21. });
  22. $.ajax({
  23. method: "get",
  24. dataType: "json",
  25. crossDomain: false,
  26. url: globalConfig.context + "/api/admin/report/sales/department",
  27. data: {
  28. date:this.state.selTime?(this.state.selTime+' '+'00:00:00'):'',
  29. },
  30. success: function(data) {
  31. let thedata = data.data;
  32. let theArr = [];
  33. if(!thedata) {
  34. if(data.error && data.error.length) {
  35. message.warning(data.error[0].message);
  36. };
  37. thedata = {};
  38. } else {
  39. thedata.map(function(item, index) {
  40. let nub=index+1;
  41. theArr.push({
  42. key: index,
  43. theNumber:false,
  44. nub:nub,
  45. id: item.id,
  46. departmentName:item.departmentName,//部门
  47. managerName:item.managerName,//负责人
  48. memberCount:item.memberCount, //部门人数
  49. enrollTime:item.enrollTime,// 入职时间
  50. dailyOrderCount:item.values.daily.orderCount,//日签单业绩
  51. dailyOrderAmount:item.values.daily.orderAmount,//日签单业绩
  52. weeklyOrderCount:item.values.weekly.orderCount,//周签单业绩
  53. weeklyOrderAmount:item.values.weekly.orderAmount,//周签单业绩
  54. monthlyOrderCount:item.values.monthly.orderCount,//月签单业绩
  55. monthlyOrderAmount:item.values.monthly.orderAmount,//月签单业绩
  56. quarterlyOrderCount:item.values.quarterly.orderCount,//季签单业绩
  57. quarterlyOrderAmount:item.values.quarterly.orderAmount,//季签单业绩
  58. annuallyOrderCount:item.values.annually.orderCount,//年签单业绩
  59. annuallyOrderAmount:item.values.annually.orderAmount,//年签单业绩
  60. })
  61. })
  62. }
  63. if(theArr.length){
  64. theArr.push(
  65. {
  66. key:9999999,
  67. theNumber:true,
  68. departmentName:'合计',
  69. dailyOrderCount:total.dailyTotalCount,//日签单业绩
  70. dailyOrderAmount:total.dailyTotalAmount,//日签单业绩
  71. weeklyOrderCount:total.weeklyTotalCount,//周签单业绩
  72. weeklyOrderAmount:total.weeklyTotalAmount,//周签单业绩
  73. monthlyOrderCount:total.monthlyTotalCount,//月签单业绩
  74. monthlyOrderAmount:total.monthlyTotalAmount,//月签单业绩
  75. quarterlyOrderCount:total.quarterlyTotalCount,//季签单业绩
  76. quarterlyOrderAmount:total.quarterlyTotalAmount,//季签单业绩
  77. annuallyOrderCount:total.annuallyTotalCount,//年签单业绩
  78. annuallyOrderAmount:total.annuallyTotalAmount,//年签单业绩
  79. }
  80. )
  81. }
  82. this.setState({
  83. dataSource: theArr,
  84. })
  85. }.bind(this),
  86. }).always(function() {
  87. this.setState({
  88. loading: false
  89. });
  90. }.bind(this));
  91. },
  92. totalData() {
  93. this.setState({
  94. loading: true
  95. });
  96. $.ajax({
  97. method: "get",
  98. dataType: "json",
  99. crossDomain: false,
  100. url: globalConfig.context + "/api/admin/report/sales/total",
  101. data: {
  102. },
  103. success: function(data) {
  104. let thedata = data.data;
  105. let theArr = [];
  106. if(!thedata) {
  107. if(data.error && data.error.length) {
  108. message.warning(data.error[0].message);
  109. };
  110. thedata = {};
  111. }
  112. this.loadData(thedata)
  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. getInitialState() {
  128. return {
  129. selectedRowKeys: [],
  130. selectedRows: [],
  131. loading: false,
  132. visible: false,
  133. showDesc: false,
  134. timeState:false,
  135. Dtime:undefined,
  136. selTime:'',
  137. columns: [
  138. {
  139. title: '序号',
  140. dataIndex: 'nub',
  141. width:50,
  142. key: 'nub',
  143. fixed:true,
  144. render:(text,record)=>{
  145. if(!record.theNumber){
  146. return text
  147. }else{
  148. return {
  149. children: text,
  150. props: {
  151. colSpan:0
  152. },
  153. }
  154. }
  155. }
  156. },
  157. {
  158. title: '部门',
  159. dataIndex: 'departmentName',
  160. key: 'departmentName',
  161. width:100,
  162. fixed:true,
  163. render:(text,record)=>{
  164. if(!record.theNumber){
  165. return text&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  166. }else{
  167. return {
  168. children: text,
  169. props: {
  170. colSpan:4
  171. },
  172. }
  173. }
  174. }
  175. },{
  176. title: '负责人',
  177. width:100,
  178. fixed:true,
  179. dataIndex: 'managerName',
  180. key: 'managerName',
  181. render:(text,record)=>{
  182. if(!record.theNumber){
  183. return text
  184. }else{
  185. return {
  186. children: text,
  187. props: {
  188. colSpan:0
  189. },
  190. }
  191. }
  192. }
  193. },
  194. {
  195. title: '部门人数',
  196. width:100,
  197. fixed:true,
  198. dataIndex: 'memberCount',
  199. key: 'memberCount',
  200. render:(text,record)=>{
  201. if(!record.theNumber){
  202. return text
  203. }else{
  204. return {
  205. children: text,
  206. props: {
  207. colSpan:0
  208. },
  209. }
  210. }
  211. }
  212. },{
  213. title: '当日业绩',
  214. children: [
  215. {
  216. title: '单量',
  217. dataIndex: 'dailyOrderCount',
  218. width:70,
  219. key: 'dailyOrderCount',
  220. sorter: (a, b) => a.dailyOrderCount - b.dailyOrderCount,
  221. },{
  222. title: '金额',
  223. dataIndex: 'dailyOrderAmount',
  224. width:70,
  225. key: 'dailyOrderAmount',
  226. sorter: (a, b) => a.dailyOrderAmount - b.dailyOrderAmount,
  227. }
  228. ],
  229. },
  230. {
  231. title: '当日人均业绩',
  232. children: [
  233. {
  234. title: '人均有效',
  235. dataIndex: 'num6611',
  236. key: 'num6611',
  237. width:100,
  238. sorter: (a, b) => a.num66 - b.num66,
  239. },{
  240. title: '人均单量',
  241. dataIndex: 'age262',
  242. key: 'age262',
  243. width:100,
  244. sorter: (a, b) => a.age - b.age,
  245. },{
  246. title: '人均金额',
  247. dataIndex: 'age26',
  248. width:100,
  249. key: 'age26',
  250. sorter: (a, b) => a.age - b.age,
  251. }
  252. ],
  253. },
  254. {
  255. title: '当日客户营销',
  256. children: [
  257. {
  258. title: '客户总量',
  259. dataIndex: 'anum66',
  260. key: 'anum66',
  261. width:100,
  262. sorter: (a, b) => a.num66 - b.num66,
  263. },{
  264. title: '新增营销',
  265. dataIndex: 'aage266',
  266. key: 'aage266',
  267. width:100,
  268. sorter: (a, b) => a.age - b.age,
  269. },
  270. {
  271. title: '营销回访',
  272. dataIndex: 'age266p',
  273. key: 'age266p',
  274. width:100,
  275. sorter: (a, b) => a.age - b.age,
  276. }
  277. ],
  278. },
  279. {
  280. title: '当日客户有效',
  281. children: [
  282. {
  283. title: '有效总量',
  284. width:100,
  285. dataIndex: 'num',
  286. key: 'num',
  287. sorter: (a, b) => a.num - b.num,
  288. },{
  289. title: '新增有效',
  290. width:100,
  291. dataIndex: 'age2',
  292. key: 'age2',
  293. sorter: (a, b) => a.age - b.age,
  294. },{
  295. title: '有效回访',
  296. width:100,
  297. dataIndex: 'age3',
  298. key: 'age3',
  299. sorter: (a, b) => a.age - b.age,
  300. }
  301. ],
  302. }, {
  303. title: '当日客户拜访',
  304. children: [
  305. {
  306. title: '拜访总量',
  307. width:100,
  308. dataIndex: 'age11',
  309. key: 'age11',
  310. sorter: (a, b) => a.age - b.age,
  311. },{
  312. title: '电话',
  313. width:70,
  314. dataIndex: 'age22',
  315. key: 'age22',
  316. sorter: (a, b) => a.age - b.age,
  317. },{
  318. title: '外拜',
  319. width:70,
  320. dataIndex: 'age33',
  321. key: 'age33',
  322. sorter: (a, b) => a.age - b.age,
  323. },{
  324. title: '邮件',
  325. width:70,
  326. dataIndex: 'age44',
  327. key: 'age44',
  328. sorter: (a, b) => a.age - b.age,
  329. },{
  330. title: '微信',
  331. width:70,
  332. dataIndex: 'age55',
  333. key: 'age55',
  334. sorter: (a, b) => a.age - b.age,
  335. }
  336. ],
  337. },
  338. {
  339. title: '本周业绩',
  340. children: [
  341. {
  342. title: '数量',
  343. width:70,
  344. dataIndex: 'weeklyOrderCount',
  345. key: 'weeklyOrderCount',
  346. sorter: (a, b) => a.weeklyOrderCount - b.weeklyOrderCount,
  347. },{
  348. title: '金额',
  349. width:70,
  350. dataIndex: 'weeklyOrderAmount',
  351. key: 'weeklyOrderAmount',
  352. sorter: (a, b) => a.weeklyOrderAmount - b.weeklyOrderAmount,
  353. }
  354. ],
  355. },{
  356. title: '本月业绩',
  357. children: [
  358. {
  359. title: '数量',
  360. width:70,
  361. dataIndex: 'monthlyOrderCount',
  362. key: 'monthlyOrderCount',
  363. sorter: (a, b) => a.monthlyOrderCount - b.monthlyOrderCount,
  364. },{
  365. title: '金额',
  366. width:70,
  367. dataIndex: 'monthlyOrderAmount',
  368. key: 'monthlyOrderAmount',
  369. sorter: (a, b) => a.monthlyOrderAmount - b.monthlyOrderAmount,
  370. }
  371. ],
  372. },{
  373. title: '本季业绩',
  374. children: [
  375. {
  376. title: '数量',
  377. width:70,
  378. dataIndex: 'quarterlyOrderCount',
  379. key: 'quarterlyOrderCount',
  380. sorter: (a, b) => a.quarterlyOrderCount - b.quarterlyOrderCount,
  381. },{
  382. title: '金额',
  383. width:70,
  384. dataIndex: 'quarterlyOrderAmount',
  385. key: 'quarterlyOrderAmount',
  386. sorter: (a, b) => a.quarterlyOrderAmount - b.quarterlyOrderAmount,
  387. }
  388. ],
  389. },{
  390. title: '本年业绩',
  391. children: [
  392. {
  393. title: '数量',
  394. width:70,
  395. dataIndex: 'annuallyOrderCount',
  396. key: 'annuallyOrderCount',
  397. sorter: (a, b) => a.annuallyOrderCount - b.annuallyOrderCount,
  398. },{
  399. title: '金额',
  400. width:70,
  401. dataIndex: 'annuallyOrderAmount',
  402. key: 'annuallyOrderAmount',
  403. sorter: (a, b) => a.annuallyOrderAmount - b.annuallyOrderAmount,
  404. }
  405. ],
  406. },
  407. {
  408. title: '本周人均',
  409. children: [
  410. {
  411. title: '有效',
  412. width:70,
  413. dataIndex: 'annuallyOrderCounty',
  414. key: 'annuallyOrderCounty',
  415. sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
  416. },{
  417. title: '单量',
  418. width:70,
  419. dataIndex: 'annuallyOrderAmountt',
  420. key: 'annuallyOrderAmountt',
  421. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  422. },
  423. {
  424. title: '金额',
  425. width:70,
  426. dataIndex: 'annuallyOrderAmount1',
  427. key: 'annuallyOrderAmount1',
  428. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  429. }
  430. ],
  431. },{
  432. title: '本月人均',
  433. children: [
  434. {
  435. title: '有效',
  436. width:70,
  437. dataIndex: 'annuallyOrderCountv',
  438. key: 'annuallyOrderCountv',
  439. sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
  440. },{
  441. title: '单量',
  442. width:70,
  443. dataIndex: 'annuallyOrderAmountv',
  444. key: 'annuallyOrderAmountv',
  445. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  446. },
  447. {
  448. title: '金额',
  449. width:70,
  450. dataIndex: 'annuallyOrderAmount1v',
  451. key: 'annuallyOrderAmount1v',
  452. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  453. }
  454. ],
  455. },{
  456. title: '本季人均',
  457. children: [
  458. {
  459. title: '有效',
  460. width:70,
  461. dataIndex: 'annuallyOrderCountc',
  462. key: 'annuallyOrderCountc',
  463. sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
  464. },{
  465. title: '单量',
  466. width:70,
  467. dataIndex: 'annuallyOrderAmountb',
  468. key: 'annuallyOrderAmountb',
  469. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  470. },
  471. {
  472. title: '金额',
  473. width:70,
  474. dataIndex: 'annuallyOrderAmounta',
  475. key: 'annuallyOrderAmounta',
  476. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  477. }
  478. ],
  479. },{
  480. title: '本年人均',
  481. children: [
  482. {
  483. title: '有效',
  484. width:70,
  485. dataIndex: 'annuallyOrderCount2',
  486. key: 'annuallyOrderCount2',
  487. sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
  488. },{
  489. title: '单量',
  490. width:70,
  491. dataIndex: 'annuallyOrderAmount3',
  492. key: 'annuallyOrderAmount3',
  493. sorter: (a, b) => a.annuallyOrderAmoun1t - b.annuallyOrderAmoun1t,
  494. },
  495. {
  496. title: '金额',
  497. width:70,
  498. dataIndex: 'annuallyOrderAmount4',
  499. key: 'annuallyOrderAmount4',
  500. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  501. }
  502. ],
  503. }
  504. ],
  505. dataSource: [],
  506. };
  507. },
  508. search() {
  509. this.totalData()
  510. },
  511. reset() {
  512. this.state.Dtime = undefined;
  513. this.state.selTime='';
  514. this.state.timeState=false;
  515. this.totalData()
  516. },
  517. componentWillMount() {
  518. this.totalData();
  519. let times=new Date();
  520. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  521. this.setState({
  522. Nowtime:nowTime
  523. })
  524. },
  525. render() {
  526. let departmentArr = this.state.departmentArr || [];
  527. return(
  528. <div className='set-content'>
  529. <p style={{fontSize:'20px',marginBottom:'10px'}}>部门业绩统计报表</p>
  530. <div className="clearfix">
  531. <span style={{fontSize:'16px'}}>选择日期 : </span>
  532. <DatePicker onChange={this.selTime} value={this.state.Dtime}/>
  533. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  534. <Button onClick={this.reset}>重置</Button>
  535. </div>
  536. <div className="surfaceTitle">
  537. <span className="nowtime">{this.state.timeState?this.state.txtTime:this.state.Nowtime}</span>
  538. <span>部门营销业绩统计表</span>
  539. <span>(每日17:00统计当天数据)</span>
  540. </div>
  541. <div className="patent-table">
  542. <div className="scroll">
  543. <Spin spinning={this.state.loading}>
  544. <Table columns={this.state.columns}
  545. dataSource={this.state.dataSource}
  546. scroll={{ x: 3200,y:500}}
  547. bordered
  548. pagination={false}
  549. />
  550. </Spin>
  551. </div>
  552. </div>
  553. </div>
  554. )
  555. }
  556. });
  557. export default PersonalReport;