statusStatistics.jsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. import React from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js';
  3. import $ from 'jquery/src/ajax';
  4. import "./statistics.less"
  5. import { Button, Select, Table, Spin, message, Tabs, DatePicker } from 'antd';
  6. const TabPane = Tabs.TabPane;
  7. import moment from 'moment';
  8. import { intentionalService } from '../../../dataDic.js';
  9. const StatusStatistics = React.createClass({
  10. loadData(pageNo, nub) {
  11. this.state.data = [];
  12. this.setState({
  13. loading: true
  14. });
  15. let urls = '';
  16. switch(nub) {
  17. case "1":
  18. urls = "";
  19. break; //日
  20. case "2":
  21. urls = "daySpan";
  22. break; //日
  23. case "3":
  24. urls = "weekSpan";
  25. break; //周
  26. case "4":
  27. urls = "monthSpan";
  28. break; //月
  29. case "5":
  30. urls = "quarterSpan";
  31. break; //季
  32. case "6":
  33. urls = "yearSpan";
  34. break; //年
  35. default:
  36. urls ='';
  37. }
  38. $.ajax({
  39. method: "get",
  40. dataType: "json",
  41. crossDomain: false,
  42. url: globalConfig.context + "/api/admin/customer/customerStatistics",
  43. data: {
  44. pageNo: pageNo || 1,
  45. pageSize: this.state.pagination.pageSize,
  46. startDate: this.state.releaseDate[0],
  47. endDate: this.state.releaseDate[1],
  48. timeSpan:this.state.releaseDate[0]?'':urls,
  49. businessGlossoryId:this.state.intentionalSearch,
  50. depId:this.state.depId,
  51. },
  52. success: function(data) {
  53. let theArr = [];
  54. if(!data.data || !data.data.list) {
  55. if(data.error && data.error.length) {
  56. message.warning(data.error[0].message);
  57. };
  58. } else {
  59. for(let i = 0; i < data.data.list.length; i++) {
  60. let thisdata = data.data.list[i];
  61. theArr.push({
  62. key: i,
  63. id: thisdata.id,
  64. adminName: thisdata.adminName,
  65. departmentName: thisdata.departmentName,
  66. newNo: thisdata.newNo,
  67. intentionNo: thisdata.intentionNo,
  68. pointNo: thisdata.pointNo,
  69. interviewNo: thisdata.interviewNo,
  70. signNo: thisdata.signNo,
  71. refuseNo: thisdata.refuseNo,
  72. stopNo: thisdata.stopNo,
  73. });
  74. };
  75. this.state.pagination.current = data.data.pageNo;
  76. this.state.pagination.total = data.data.totalCount;
  77. };
  78. this.setState({
  79. dataSource: theArr,
  80. pagination: this.state.pagination
  81. });
  82. }.bind(this),
  83. }).always(function() {
  84. this.setState({
  85. loading: false
  86. });
  87. }.bind(this));
  88. },
  89. getInitialState() {
  90. return {
  91. releaseDate: [],
  92. loading: false,
  93. callnub:'1',
  94. pagination: {
  95. defaultCurrent: 1,
  96. defaultPageSize: 10,
  97. showQuickJumper: true,
  98. pageSize: 10,
  99. onChange: function(page) {
  100. this.call(page)
  101. }.bind(this),
  102. showTotal: function(total) {
  103. return '共' + total + '条数据';
  104. }
  105. },
  106. columns: [{
  107. title: '营销员',
  108. dataIndex: 'adminName',
  109. key: 'adminName',
  110. }, {
  111. title: '部门',
  112. dataIndex: 'departmentName',
  113. key: 'departmentName',
  114. }, {
  115. title: '新客户数',
  116. dataIndex: 'newNo',
  117. key: 'newNo',
  118. }, {
  119. title: '意向客户数',
  120. dataIndex: 'intentionNo',
  121. key: 'intentionNo',
  122. }, {
  123. title: '重点客户数',
  124. dataIndex: 'pointNo',
  125. key: 'pointNo',
  126. }, {
  127. title: '面谈客户数',
  128. dataIndex: 'interviewNo',
  129. key: 'interviewNo',
  130. }, {
  131. title: '签单客户数',
  132. dataIndex: 'stopNo',
  133. key: 'stopNo',
  134. }, {
  135. title: '被拒绝客户数',
  136. dataIndex: 'refuseNo',
  137. key: 'refuseNo',
  138. }]
  139. }
  140. },
  141. callback(e) {
  142. this.setState({
  143. callnub: e,
  144. releaseDate:[]
  145. })
  146. this.loadData(1, e)
  147. },
  148. call(a){
  149. this.loadData(a, this.state.callnub)
  150. },
  151. search() {
  152. if(this.state.releaseDate[0]){
  153. this.setState({
  154. callnub:'1'
  155. })
  156. }else{
  157. this.state.releaseDate=[]
  158. }
  159. this.loadData(1, this.state.callnub)
  160. },
  161. reset() {
  162. this.state.releaseDate = [];
  163. this.state.intentionalSearch = undefined;
  164. this.loadData(1, this.state.callnub);
  165. },
  166. componentWillMount() {
  167. this.loadData();
  168. },
  169. render() {
  170. const { RangePicker } = DatePicker;
  171. return <div className="visitContant">
  172. <div className="visitTitle">
  173. <span className="titleTime">起止时间</span>
  174. <RangePicker
  175. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  176. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  177. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  178. <span style={{marginRight:'15px',marginLeft:'15px'}}>业务类型:</span>
  179. <Select placeholder="业务品种" value={this.state.intentionalSearch} onChange={(e) => {
  180. this.setState({intentionalSearch:e})}} style={{width:'150px'}}>
  181. {
  182. intentionalService.map(function (item) {
  183. return <Select.Option key={item.value} >{item.key}</Select.Option>
  184. })
  185. }
  186. </Select>
  187. <Button onClick={this.search} className="blue" style={{background:'red',color:'#ffffff',border:'none'}}>统计</Button>
  188. <Button onClick={this.reset} className="green" style={{background:'green',color:'#ffffff',border:'none'}}>重置</Button>
  189. <div className="clearfix" style={{marginTop:'30px',marginLeft:'20px'}}>
  190. <Tabs onChange={this.callback} type="card" activeKey={this.state.callnub}>
  191. <TabPane tab="所有业务客户状态" key="1"></TabPane>
  192. <TabPane tab="本日业务客户状态" key="2"></TabPane>
  193. <TabPane tab="本周业务客户状态" key="3"></TabPane>
  194. <TabPane tab="本月业务客户状态" key="4"></TabPane>
  195. <TabPane tab="本季业务客户状态" key="5"></TabPane>
  196. <TabPane tab="本年业务客户状态" key="6"></TabPane>
  197. </Tabs>
  198. </div>
  199. <div className="clearfix">
  200. <div className="maintitle">业务客户状态情况统计表</div>
  201. <div className="patent-table">
  202. <Spin spinning={this.state.loading}>
  203. <Table columns={this.state.columns}
  204. dataSource={this.state.dataSource}
  205. pagination={this.state.pagination}
  206. onRowClick={this.tableRowClick} />
  207. </Spin>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. }
  213. });
  214. export default StatusStatistics;