index.jsx 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. import React from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js';
  3. import $ from 'jquery/src/ajax';
  4. import moment from 'moment';
  5. import '@/manageCenter/financialManage/distribute/public.less';
  6. import { Button, Spin, DatePicker, Radio, message } from 'antd';
  7. import './index.less';
  8. import ReactEcharts from 'echarts-for-react/lib/core';
  9. import echarts from 'echarts/lib/echarts';
  10. import 'echarts/lib/chart/line';
  11. import 'echarts/lib/component/legend';
  12. import 'echarts/lib/component/title';
  13. import 'echarts/lib/component/tooltip';
  14. import 'echarts/lib/component/toolbox';
  15. import 'echarts/lib/component/grid';
  16. const RadioButton = Radio.Button;
  17. const RadioGroup = Radio.Group;
  18. const { RangePicker } = DatePicker
  19. const Statistics = React.createClass({
  20. getInitialState() {
  21. return {
  22. releaseDate: [],
  23. info: {}
  24. }
  25. },
  26. componentWillMount() {
  27. const now = new Date();
  28. const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
  29. console.log("-----------", yesterday)
  30. },
  31. loadData() {
  32. const { releaseDate } = this.state
  33. console.log("====", releaseDate)
  34. this.setState({
  35. loading: true,
  36. });
  37. $.ajax({
  38. method: "get",
  39. dataType: "json",
  40. crossDomain: false,
  41. url: globalConfig.context + "/api/admin/statistics/info",
  42. data: {
  43. startTime: releaseDate[0],
  44. endTime: releaseDate[1],
  45. },
  46. success: function (data) {
  47. ShowModal(this);
  48. this.setState({
  49. loading: false,
  50. });
  51. if (data.error && data.error.length === 0) {
  52. this.setState({
  53. info: data.data
  54. })
  55. } else {
  56. message.warning(data.error[0].message);
  57. }
  58. }.bind(this),
  59. }).always(
  60. function () {
  61. this.setState({
  62. loading: false,
  63. });
  64. }.bind(this)
  65. );
  66. },
  67. search() {
  68. this.loadData();
  69. },
  70. reset() {
  71. this.state.releaseDate = []
  72. this.loadData();
  73. },
  74. render() {
  75. const { status } = this.state
  76. const list = [
  77. { color: "#99FFFF", title: "全部签单客户数:", sum: 200, tit: "签单客户数", number: 50 },
  78. { color: "#FFFFCC", title: "全部私有客户数:", sum: 200, tit: "私有客户数", number: 50 },
  79. { color: "#FFCCCC", title: "全部渠道数:", sum: 200, tit: "私有渠道数", number: 50 },
  80. { color: "#99CCFF", title: "全部公出数:", sum: 200, tit: "公出企业数", number: 50 },
  81. { color: "#99FFCC", title: "全部跟进客户数:", sum: 200, tit: "跟进客户数", number: 50 },
  82. { color: "#CC99CC", title: "全部订单数:", sum: 200, tit: "订单数", number: 50 },
  83. { color: "#99CCCC", title: "全部应收款:", sum: 10.54, tit: "应收款", number: 0.25 },
  84. {
  85. color: "#FFCC99", title: "待紧急处理事项", sum: "", tit: "签单客户数", number: "",
  86. list: [{ key: "被驳回订单:", value: 2 }, { key: "待变更订单:", value: 2 }, { key: "待核对订单:", value: 2 }, { key: "暂停项目:", value: 2 },]
  87. },
  88. ]
  89. const option = {
  90. title: {
  91. text: ''
  92. },
  93. tooltip: {
  94. trigger: 'axis'
  95. },
  96. legend: {
  97. data: ['签单客户数', '私有客户数', '私有渠道数', '公出企业数', '跟进客户数', '订单数',]
  98. },
  99. grid: {
  100. left: '3%',
  101. right: '4%',
  102. bottom: '3%',
  103. containLabel: true
  104. },
  105. toolbox: {
  106. feature: {
  107. saveAsImage: {}
  108. }
  109. },
  110. xAxis: {
  111. type: 'category',
  112. boundaryGap: false,
  113. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  114. },
  115. yAxis: {
  116. type: 'value'
  117. },
  118. series: [
  119. {
  120. name: '签单客户数',
  121. type: 'line',
  122. data: [1, 2, 0, 2, 5, 3, 9]
  123. },
  124. {
  125. name: '私有客户数',
  126. type: 'line',
  127. data: [0, 0, 1, 2, 3, 4, 5]
  128. },
  129. {
  130. name: '私有渠道数',
  131. type: 'line',
  132. data: [1, 2, 5, 4, 8, 9, 1]
  133. },
  134. {
  135. name: '公出企业数',
  136. type: 'line',
  137. data: [1, 2, 5, 7, 8, 5, 2]
  138. },
  139. {
  140. name: '跟进客户数',
  141. type: 'line',
  142. data: [0, 4, 6, 3, 2, 7, 9]
  143. },
  144. {
  145. name: '订单数',
  146. type: 'line',
  147. data: [1, 2, 3, 5, 8, 6, 7]
  148. }
  149. ]
  150. }
  151. return (
  152. <div className="user-content">
  153. <div className="content-title" style={{ marginBottom: 10 }}>
  154. <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span>
  155. </div>
  156. <div className="user-search">
  157. <RadioGroup defaultValue="a"
  158. onChange={e => {
  159. this.setState({
  160. status: e.target.value
  161. })
  162. console.log("e==", e.target.value)
  163. }}
  164. >
  165. <RadioButton value={1}>今日</RadioButton>
  166. <RadioButton value={2}>昨日</RadioButton>
  167. <RadioButton value={3}>近7日</RadioButton>
  168. <RadioButton value={4}>近15日</RadioButton>
  169. <RadioButton value={5}>近30日</RadioButton>
  170. <RadioButton value={0}>自定义</RadioButton>
  171. </RadioGroup>
  172. {
  173. status == 0 &&
  174. <RangePicker
  175. style={{ width: 200, marginLeft: 15 }}
  176. value={[
  177. this.state.releaseDate[0]
  178. ? moment(this.state.releaseDate[0])
  179. : null,
  180. this.state.releaseDate[1]
  181. ? moment(this.state.releaseDate[1])
  182. : null,
  183. ]}
  184. onChange={(data, dataString) => {
  185. this.setState({ releaseDate: dataString })
  186. }}
  187. />
  188. }
  189. <Button style={{ marginLeft: 15 }} type="primary" onClick={this.search}>搜索</Button>
  190. <Button onClick={this.reset}>重置</Button>
  191. </div>
  192. <div className="patent-table">
  193. {/* <Spin spinning={this.state.loading}>
  194. </Spin> */}
  195. <ReactEcharts option={option} echarts={echarts} />
  196. <div className='plist'>
  197. {
  198. list.map((item, index) =>
  199. <div className='plitem' style={{ background: item.color }} key={index}>
  200. <div className='plititle'>
  201. <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span>
  202. <span className='plisum'>{item.sum}</span>
  203. </div>
  204. {
  205. item.title == "待紧急处理事项"
  206. ? <div className='list'>
  207. {
  208. item.list.map((t, i) =>
  209. <div key={i}>
  210. <span>{t.key}</span>
  211. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
  212. </div>
  213. )
  214. }
  215. </div>
  216. : <div className='count'>
  217. <div className='plinum'>{item.number}</div>
  218. <div className='plitit'>{item.tit}</div>
  219. </div>
  220. }
  221. </div>
  222. )
  223. }
  224. </div>
  225. </div>
  226. </div>
  227. );
  228. },
  229. });
  230. export default Statistics;