visitStatistics.jsx 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  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, Table ,Spin, message,Tabs, DatePicker, } from 'antd';
  6. const TabPane = Tabs.TabPane;
  7. import moment from 'moment';
  8. const VisitStatistics=React.createClass({
  9. loadData(pageNo, nub) {
  10. this.state.data = [];
  11. this.setState({
  12. loading: true
  13. });
  14. let urls='';
  15. switch(nub){
  16. case "1":urls="/api/admin/achievement/delete";break;//日
  17. case "2":urls="/api/admin/achievement/delete2";break;//周
  18. case "3":urls="/api/admin/achievement/delete3";break;//月
  19. case "4":urls="/api/admin/achievement/delete4";break;//季
  20. case "5":urls="/api/admin/achievement/delete5";break;//年
  21. }
  22. $.ajax({
  23. method: "get",
  24. dataType: "json",
  25. crossDomain: false,
  26. url: globalConfig.context + urls?urls:"/api/admin/achievement/delete",
  27. data: {
  28. pageNo: pageNo || 1,
  29. pageSize: this.state.pagination.pageSize,
  30. releaseDateStartDate: this.state.releaseDate[0],
  31. releaseDateEndDate: this.state.releaseDate[1],
  32. },
  33. success: function (data) {
  34. let theArr = [];
  35. if (!data.data || !data.data.list) {
  36. if (data.error && data.error.length) {
  37. message.warning(data.error[0].message);
  38. };
  39. } else {
  40. for (let i = 0; i < data.data.list.length; i++) {
  41. let thisdata = data.data.list[i];
  42. theArr.push({
  43. key: i,
  44. id: thisdata.id,
  45. serialNumber: thisdata.serialNumber,
  46. });
  47. };
  48. this.state.pagination.current = data.data.pageNo;
  49. this.state.pagination.total = data.data.totalCount;
  50. };
  51. this.setState({
  52. dataSource: theArr,
  53. pagination: this.state.pagination
  54. });
  55. }.bind(this),
  56. }).always(function () {
  57. this.setState({
  58. loading: false
  59. });
  60. }.bind(this));
  61. },
  62. getInitialState(){
  63. return{
  64. releaseDate:[],
  65. loading:false,
  66. pagination: {
  67. defaultCurrent: 1,
  68. defaultPageSize: 10,
  69. showQuickJumper: true,
  70. pageSize: 10,
  71. onChange: function (page) {
  72. this.loadData(page,this.satet.callnub);
  73. }.bind(this),
  74. showTotal: function (total) {
  75. return '共' + total + '条数据';
  76. }
  77. },
  78. columns: [
  79. {
  80. title: '营销员',
  81. dataIndex: 'serialNumber',
  82. key: 'serialNumber',
  83. }, {
  84. title: '部门',
  85. dataIndex: 'name',
  86. key: 'name',
  87. }, {
  88. title: '拜访次数',
  89. dataIndex: 'keyword',
  90. key: 'keyword',
  91. }, {
  92. title: '拜访客户数',
  93. dataIndex: 'category',
  94. key: 'category',
  95. render: text => { return getAchievementCategory(text); }
  96. }, {
  97. title: '电话量',
  98. dataIndex: 'theName',
  99. key: 'theName',
  100. },{
  101. title: '外拜量',
  102. dataIndex: 'keyword1',
  103. key: 'keyword1',
  104. }, {
  105. title: 'QQ量',
  106. dataIndex: 'category2',
  107. key: 'category2',
  108. render: text => { return getAchievementCategory(text); }
  109. }, {
  110. title: '邮件量',
  111. dataIndex: 'theName3',
  112. key: 'theName3',
  113. }, {
  114. title: '书信量',
  115. dataIndex: 'theName4',
  116. key: 'theName4',
  117. }, {
  118. title: '微信量',
  119. dataIndex: 'theName5',
  120. key: 'theName5',
  121. },
  122. ]
  123. }
  124. },
  125. callback(e){
  126. this.setState({
  127. callnub:e
  128. })
  129. this.loadData(1,e)
  130. },
  131. search() {
  132. this.loadData(1,this.state.callnub)
  133. },
  134. reset() {
  135. this.state.releaseDate = [];
  136. this.loadData(1,this.state.callnub);
  137. },
  138. componentWillMount(){
  139. this.loadData();
  140. },
  141. render(){
  142. const { RangePicker } = DatePicker;
  143. return <div className="visitContant">
  144. <div className="visitTitle">
  145. <span className="titleTime">起止时间</span>
  146. <RangePicker
  147. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  148. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  149. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  150. <Button onClick={this.search} className="blue" style={{background:'red',color:'#ffffff',border:'none'}}>统计</Button>
  151. <Button onClick={this.reset} className="green" style={{background:'green',color:'#ffffff',border:'none'}}>重置</Button>
  152. <div className="clearfix" style={{marginTop:'30px',marginLeft:'20px'}}>
  153. <Tabs onChange={this.callback} type="card">
  154. <TabPane tab="本日客户拜访统计" key="1"></TabPane>
  155. <TabPane tab="本周客户拜访统计" key="2"></TabPane>
  156. <TabPane tab="本月客户拜访统计" key="3"></TabPane>
  157. <TabPane tab="本季客户拜访统计" key="4"></TabPane>
  158. <TabPane tab="本年客户拜访统计" key="5"></TabPane>
  159. </Tabs>
  160. </div>
  161. <div className="clearfix">
  162. <div className="maintitle">客户拜访情况统计表</div>
  163. <div className="patent-table">
  164. <Spin spinning={this.state.loading}>
  165. <Table columns={this.state.columns}
  166. dataSource={this.state.dataSource}
  167. pagination={this.state.pagination}
  168. onRowClick={this.tableRowClick} />
  169. </Spin>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. }
  175. })
  176. export default VisitStatistics;