index.jsx 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  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, url: "/admin/customer.html?rid=a691e23c-d4bd-4346-b67e-8887a84a3637#companySign" },
  102. { color: "#FFFFCC", title: "全部私有客户数:", sum: info.privateSum, tit: "私有客户数", number: info.rangePrivateSum, url: "" },
  103. { color: "#FFCCCC", title: "全部渠道数:", sum: info.channelSum, tit: "私有渠道数", number: info.rangeChannelSum, url: "" },
  104. { color: "#99CCFF", title: "全部公出数:", sum: info.publicReleaseSum, tit: "公出企业数", number: info.rangePublicReleaseSum, url: "" },
  105. { color: "#99FFCC", title: "全部跟进客户数:", sum: info.followSum, tit: "跟进客户数", number: info.rangeFollowSum, url: "" },
  106. { color: "#CC99CC", title: "全部订单数:", sum: info.orderSum, tit: "订单数", number: info.rangeOrderSum, url: "" },
  107. { color: "#99CCCC", title: "全部应收款:", sum: info.receivables, tit: "应收款", number: info.rangeReceivables },
  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. // axisLabel: {
  138. // interval: 0, // 设置X轴刻度间隔为0
  139. // },
  140. data: data.dates
  141. },
  142. yAxis: {
  143. type: 'value'
  144. },
  145. series: [
  146. {
  147. name: '签单客户数',
  148. type: 'line',
  149. data: data.signList
  150. },
  151. {
  152. name: '私有客户数',
  153. type: 'line',
  154. data: data.privateList
  155. },
  156. {
  157. name: '私有渠道数',
  158. type: 'line',
  159. data: data.channelList
  160. },
  161. {
  162. name: '公出企业数',
  163. type: 'line',
  164. data: data.publicReleaseList
  165. },
  166. {
  167. name: '跟进客户数',
  168. type: 'line',
  169. data: data.userFollowList
  170. },
  171. {
  172. name: '订单数',
  173. type: 'line',
  174. data: data.orderList
  175. }
  176. ]
  177. }
  178. return (
  179. <div className="user-content">
  180. <div className="content-title" style={{ marginBottom: 10 }}>
  181. <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span>
  182. </div>
  183. <div className="user-search">
  184. <RadioGroup value={status}
  185. onChange={e => {
  186. this.setState({
  187. status: e.target.value
  188. })
  189. if (e.target.value == 0) {
  190. this.setState({
  191. releaseDate: []
  192. })
  193. } else {
  194. this.setState({
  195. releaseDate: getToday(e.target.value)
  196. }, () => {
  197. this.loadData()
  198. })
  199. }
  200. }}
  201. >
  202. <RadioButton value={1}>今日</RadioButton>
  203. <RadioButton value={2}>昨日</RadioButton>
  204. <RadioButton value={3}>近7日</RadioButton>
  205. <RadioButton value={4}>近15日</RadioButton>
  206. <RadioButton value={5}>近30日</RadioButton>
  207. <RadioButton value={0}>自定义</RadioButton>
  208. </RadioGroup>
  209. {
  210. status == 0 &&
  211. <span>
  212. <RangePicker
  213. style={{ width: 200, marginLeft: 15 }}
  214. value={[
  215. this.state.releaseDate[0]
  216. ? moment(this.state.releaseDate[0])
  217. : null,
  218. this.state.releaseDate[1]
  219. ? moment(this.state.releaseDate[1])
  220. : null,
  221. ]}
  222. onChange={(data, dataString) => {
  223. this.setState({ releaseDate: dataString })
  224. }}
  225. />
  226. <Button style={{ margin: "0 15px" }} type="primary" onClick={this.search}>搜索</Button>
  227. <Button onClick={this.reset}>重置</Button>
  228. </span>
  229. }
  230. </div>
  231. <div className="patent-table">
  232. <Spin spinning={this.state.loading}>
  233. <div className='plist'>
  234. {
  235. list.map((item, index) =>
  236. <div className='plitem' style={{ background: item.color }} key={index}>
  237. <div className='plititle'>
  238. <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span>
  239. <a href={globalConfig.context + item.url}>
  240. <span className='plisum'>{item.sum}</span>
  241. </a>
  242. </div>
  243. {
  244. item.title == "待紧急处理事项"
  245. ? <div className='list'>
  246. {
  247. item.list.map((t, i) =>
  248. <div key={i}>
  249. <span>{t.key}</span>
  250. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
  251. </div>
  252. )
  253. }
  254. </div>
  255. : <div className='count'>
  256. <div className='plinum'>{item.number}</div>
  257. <div className='plitit'>{item.tit}</div>
  258. </div>
  259. }
  260. </div>
  261. )
  262. }
  263. </div>
  264. </Spin>
  265. <ReactEcharts option={option} echarts={echarts} />
  266. </div>
  267. </div>
  268. );
  269. },
  270. });
  271. export default Statistics;