visitStatistics.jsx 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  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, Select } from 'antd';
  6. var intentionalService = [];
  7. const TabPane = Tabs.TabPane;
  8. import moment from 'moment';
  9. const VisitStatistics = 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/followStatistic",
  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. depId: this.state.depId,
  50. depNo:this.state.departmentt
  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. followNo: thisdata.followNo,
  67. customerNo: thisdata.customerNo,
  68. telNo: thisdata.telNo,
  69. qqNo: thisdata.qqNo,
  70. visitNo: thisdata.visitNo,
  71. emailNo: thisdata.emailNo,
  72. letterNo: thisdata.letterNo,
  73. wxNo: thisdata.wxNo,
  74. });
  75. };
  76. this.state.pagination.current = data.data.pageNo;
  77. this.state.pagination.total = data.data.totalCount;
  78. };
  79. if(!data.data.list.length){
  80. this.state.pagination.current=0;
  81. this.state.pagination.total=0;
  82. }
  83. this.setState({
  84. dataSource: theArr,
  85. pagination: this.state.pagination
  86. });
  87. }.bind(this),
  88. }).always(function() {
  89. this.setState({
  90. loading: false
  91. });
  92. }.bind(this));
  93. },
  94. getInitialState() {
  95. return {
  96. releaseDate: [],
  97. loading: false,
  98. callnub: '1',
  99. pagination: {
  100. defaultCurrent: 1,
  101. defaultPageSize: 10,
  102. showQuickJumper: true,
  103. pageSize: 10,
  104. onChange: function(page) {
  105. this.call(page)
  106. }.bind(this),
  107. showTotal: function(total) {
  108. return '共' + total + '条数据';
  109. }
  110. },
  111. columns: [{
  112. title: '营销员',
  113. dataIndex: 'adminName',
  114. key: 'adminName',
  115. }, {
  116. title: '部门',
  117. dataIndex: 'departmentName',
  118. key: 'departmentName',
  119. }, {
  120. title: '拜访次数',
  121. dataIndex: 'followNo',
  122. key: 'followNo',
  123. }, {
  124. title: '拜访客户数',
  125. dataIndex: 'customerNo',
  126. key: 'customerNo',
  127. }, {
  128. title: '电话量',
  129. dataIndex: 'telNo',
  130. key: 'telNo',
  131. }, {
  132. title: '外拜量',
  133. dataIndex: 'visitNo',
  134. key: 'visitNo',
  135. }, {
  136. title: 'QQ量',
  137. dataIndex: 'qqNo',
  138. key: 'qqNo',
  139. }, {
  140. title: '邮件量',
  141. dataIndex: 'emailNo',
  142. key: 'emailNo',
  143. }, {
  144. title: '书信量',
  145. dataIndex: 'letterNo',
  146. key: 'letterNo',
  147. }, {
  148. title: '微信量',
  149. dataIndex: 'wxNo',
  150. key: 'wxNo',
  151. }, ]
  152. }
  153. },
  154. callback(e) {
  155. this.setState({
  156. callnub: e,
  157. releaseDate: []
  158. })
  159. this.loadData(1, e)
  160. },
  161. call(a) {
  162. this.loadData(a, this.state.callnub)
  163. },
  164. search() {
  165. if(this.state.releaseDate[0]) {
  166. this.setState({
  167. callnub: '1'
  168. })
  169. } else {
  170. this.state.releaseDate = []
  171. }
  172. this.loadData(1, this.state.callnub)
  173. },
  174. //部门
  175. departmentList() {
  176. this.setState({
  177. loading: true
  178. });
  179. $.ajax({
  180. method: "post",
  181. dataType: "json",
  182. crossDomain: false,
  183. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  184. data: {
  185. },
  186. success: function(data) {
  187. let thedata = data.data;
  188. let theArr=[];
  189. if(!thedata) {
  190. if(data.error && data.error.length) {
  191. message.warning(data.error[0].message);
  192. };
  193. thedata = {};
  194. }else{
  195. thedata.map(function(item,index){
  196. theArr.push({
  197. key:index,
  198. name:item.name,
  199. id:item.id,
  200. depNo:item.depNo
  201. })
  202. })
  203. }
  204. this.setState({
  205. departmentArr:theArr,
  206. })
  207. }.bind(this),
  208. }).always(function() {
  209. this.setState({
  210. loading: false
  211. });
  212. }.bind(this));
  213. },
  214. reset() {
  215. this.state.departmentt=undefined;
  216. this.state.releaseDate = [];
  217. this.loadData(1, this.state.callnub);
  218. },
  219. componentWillMount() {
  220. this.loadData();
  221. this.departmentList()
  222. },
  223. render() {
  224. const { RangePicker } = DatePicker;
  225. let departmentArr = this.state.departmentArr || [];
  226. return <div className="visitContant">
  227. <div className="visitTitle">
  228. <span className="titleTime">起止时间</span>
  229. <RangePicker
  230. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  231. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  232. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  233. <span style={{marginRight:'15px',marginLeft:'15px'}}>部门:</span>
  234. <Select placeholder="选择部门" style={{width:'150px'}}
  235. value={this.state.departmentt}
  236. onChange={(e) => { this.setState({ departmentt: e }) }}>
  237. {
  238. departmentArr.map(function (item) {
  239. return <Select.Option key={item.depNo} >{item.name}</Select.Option>
  240. })
  241. }
  242. </Select>
  243. <Button onClick={this.search} className="blue" style={{background:'red',color:'#ffffff',border:'none'}}>统计</Button>
  244. <Button onClick={this.reset} className="green" style={{background:'green',color:'#ffffff',border:'none'}}>重置</Button>
  245. <div className="clearfix" style={{marginTop:'30px',marginLeft:'20px'}}>
  246. <Tabs onChange={this.callback} type="card" activeKey={this.state.callnub} >
  247. <TabPane tab="所有客户拜访统计" key="1"></TabPane>
  248. <TabPane tab="本日客户拜访统计" key="2"></TabPane>
  249. <TabPane tab="本周客户拜访统计" key="3"></TabPane>
  250. <TabPane tab="本月客户拜访统计" key="4"></TabPane>
  251. <TabPane tab="本季客户拜访统计" key="5"></TabPane>
  252. <TabPane tab="本年客户拜访统计" key="6"></TabPane>
  253. </Tabs>
  254. </div>
  255. <div className="clearfix">
  256. <div className="maintitle">客户拜访情况统计表</div>
  257. <div className="patent-table">
  258. <Spin spinning={this.state.loading}>
  259. <Table columns={this.state.columns}
  260. dataSource={this.state.dataSource}
  261. pagination={this.state.pagination}
  262. onRowClick={this.tableRowClick} />
  263. </Spin>
  264. </div>
  265. </div>
  266. </div>
  267. </div>
  268. }
  269. })
  270. export default VisitStatistics;