index.jsx 8.3 KB

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