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