yxy.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  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, Icon } from 'antd';
  7. import { getToday, ShowModal } from '@/tools';
  8. import ShowModalDiv from "@/showModal.jsx";
  9. import './index.less';
  10. import ReactEcharts from 'echarts-for-react/lib/core';
  11. import echarts from 'echarts/lib/echarts';
  12. import 'echarts/lib/chart/line';
  13. import 'echarts/lib/component/legend';
  14. import 'echarts/lib/component/title';
  15. import 'echarts/lib/component/tooltip';
  16. import 'echarts/lib/component/toolbox';
  17. import 'echarts/lib/component/grid';
  18. const RadioButton = Radio.Button;
  19. const RadioGroup = Radio.Group;
  20. const { RangePicker } = DatePicker
  21. const Statistics = React.createClass({
  22. getInitialState() {
  23. return {
  24. status: 1,
  25. releaseDate: getToday(1),
  26. info: {},
  27. data: {},
  28. htmlMenus: [],
  29. }
  30. },
  31. componentWillMount() {
  32. this.loadData();
  33. this.getData();
  34. this.mainMenu();
  35. },
  36. mainMenu() {
  37. $.ajax({
  38. method: "get",
  39. dataType: "json",
  40. crossDomain: false,
  41. url: globalConfig.context + "/api/admin/selectNavList",
  42. data: {},
  43. success: function (data) {
  44. if (!data.data) {
  45. if (data.error && data.error.length) {
  46. message.warning(data.error[0].message);
  47. return;
  48. }
  49. }
  50. let menu = data.data;
  51. this.setState({
  52. htmlMenus: menu,
  53. });
  54. }.bind(this),
  55. }).always(
  56. function (data) {
  57. this.setState({
  58. loading: false,
  59. });
  60. }.bind(this)
  61. );
  62. },
  63. loadData() {
  64. const { releaseDate } = this.state
  65. this.setState({
  66. loading: true,
  67. });
  68. $.ajax({
  69. method: "get",
  70. dataType: "json",
  71. crossDomain: false,
  72. url: globalConfig.context + "/api/admin/statistics/info",
  73. data: {
  74. startTime: releaseDate[0],
  75. endTime: releaseDate[1],
  76. },
  77. success: function (data) {
  78. ShowModal(this);
  79. this.setState({
  80. loading: false,
  81. });
  82. if (data.error && data.error.length === 0) {
  83. this.setState({
  84. info: data.data
  85. })
  86. } else {
  87. message.warning(data.error[0].message);
  88. }
  89. }.bind(this),
  90. }).always(
  91. function () {
  92. this.setState({
  93. loading: false,
  94. });
  95. }.bind(this)
  96. );
  97. },
  98. getData() {
  99. $.ajax({
  100. method: "get",
  101. dataType: "json",
  102. crossDomain: false,
  103. url: globalConfig.context + "/api/admin/statistics/lists",
  104. success: function (data) {
  105. if (data.error && data.error.length === 0) {
  106. this.setState({
  107. data: data.data,
  108. })
  109. } else {
  110. message.warning(data.error[0].message);
  111. }
  112. }.bind(this),
  113. }).always(
  114. function () {
  115. this.setState({
  116. loading: false,
  117. });
  118. }.bind(this)
  119. );
  120. },
  121. clean() {
  122. this.setState({
  123. loading: true,
  124. });
  125. $.ajax({
  126. method: "get",
  127. dataType: "json",
  128. crossDomain: false,
  129. url: globalConfig.context + "/api/admin/statistics/salesTeam/clean",
  130. success: function (data) {
  131. if (data.error && data.error.length === 0) {
  132. ShowModal(this);
  133. this.setState({
  134. loading: false,
  135. });
  136. this.loadData();
  137. } else {
  138. message.warning(data.error[0].message);
  139. }
  140. }.bind(this),
  141. }).always(
  142. function () {
  143. this.setState({
  144. loading: false,
  145. });
  146. }.bind(this)
  147. );
  148. },
  149. search() {
  150. this.loadData();
  151. },
  152. reset() {
  153. this.state.releaseDate = []
  154. this.loadData();
  155. },
  156. getNewUrl(url, cd) {
  157. const { htmlMenus = [] } = this.state
  158. let id = ''
  159. htmlMenus.map(function (item) {
  160. if (item.url == url) {
  161. id = item.id;
  162. }
  163. });
  164. return `${url}?rid=${id}#${cd}`
  165. },
  166. isTime(second) {
  167. let time = "0秒"
  168. if (second > 3600) {
  169. time = moment.utc(second * 1000).format('h小时m分s秒')
  170. } else if (second > 60) {
  171. time = moment.utc(second * 1000).format('m分s秒')
  172. } else if (second > 0) {
  173. time = moment.utc(second * 1000).format('s秒')
  174. }
  175. return time
  176. },
  177. render() {
  178. const { status, info, data } = this.state
  179. const list = [
  180. { type: 0, color: "#99FFFF", title: "全部签单客户数:", sum: info.signSum, tit: "签单客户数", number: info.rangeSignSum, url: this.getNewUrl("/admin/customer.html", "companySign") },
  181. { type: 0, color: "#FFFFCC", title: "全部私有客户数:", sum: info.privateSum, tit: "私有客户数", number: info.rangePrivateSum, url: this.getNewUrl("/admin/customer.html", "companyIntention") },
  182. { type: 0, color: "#FFCCCC", title: "全部渠道数:", sum: info.channelSum, tit: "私有渠道数", number: info.rangeChannelSum, url: this.getNewUrl("/admin/channelList.html", "channelunit") },
  183. { type: 0, color: "#99CCFF", title: "全部公出数:", sum: info.publicReleaseSum, tit: "公出企业数", number: info.rangePublicReleaseSum, url: "" },
  184. { type: 0, color: "#99FFCC", title: "全部跟进客户数:", sum: info.followSum, tit: "跟进客户数", number: info.rangeFollowSum, url: this.getNewUrl("/admin/customer.html", "followUpSummaryOrdinary") },
  185. { type: 0, color: "#CC99CC", title: "全部订单数:", sum: info.orderSum, tit: "订单数", number: info.rangeOrderSum, url: this.getNewUrl("/admin/order.html", "billing") },
  186. { type: 0, color: "#99CCCC", title: "全部应收款:", sum: info.receivables, tit: "应收款", number: info.rangeReceivables, url: this.getNewUrl("/admin/order.html", "press") },
  187. {
  188. type: 0, color: "#FFCC99", title: "待紧急处理事项",
  189. list: [
  190. { key: "被驳回订单:", value: info.rejectSum, url: this.getNewUrl("/admin/order.html", "reject") },
  191. { key: "待变更订单:", value: info.changeSum, url: this.getNewUrl("/admin/order.html", "contractChangeYxy") },
  192. { key: "待核对专利:", value: info.projectCheckSum, url: this.getNewUrl("/admin/project.html", "businessManagement") },
  193. { key: "暂停项目:", value: info.projectStopSum, url: this.getNewUrl("/admin/order.html", "mysuspend") },]
  194. },
  195. {
  196. type: 1, color: "#FFCC99", title: "本人",
  197. list: [
  198. { key: "• 拨出次数:", value: info.callSum, url: "" },
  199. { key: "• 接通次数:", value: info.connectSum, url: "" },
  200. { key: "• 有效次数:", value: info.validSum, url: "" },
  201. { key: "• 时长:", value: this.isTime(info.callDurationSum), url: "" },
  202. ]
  203. },
  204. {
  205. type: 1, color: "#FFCC99", title: "本团队",
  206. list: [
  207. { key: "• 团队人数:", value: info.teamPeopleSum, url: "" },
  208. { key: "• 拨出次数:", value: info.teamCallSum, url: "" },
  209. { key: "• 接通次数:", value: info.teamConnectSum, url: "" },
  210. { key: "• 有效次数:", value: info.teamValidSum, url: "" },
  211. { key: "• 时长:", value: this.isTime(info.teamCallDurationSum), url: "" },
  212. ]
  213. }
  214. ]
  215. const option = {
  216. title: {
  217. text: ''
  218. },
  219. tooltip: {
  220. trigger: 'axis'
  221. },
  222. legend: {
  223. data: ['签单客户数', '私有客户数', '私有渠道数', '公出企业数', '跟进客户数', '订单数',]
  224. },
  225. grid: {
  226. left: '3%',
  227. right: '4%',
  228. bottom: '3%',
  229. containLabel: true
  230. },
  231. toolbox: {
  232. feature: {
  233. saveAsImage: {}
  234. }
  235. },
  236. xAxis: {
  237. type: 'category',
  238. boundaryGap: false,
  239. // axisLabel: {
  240. // interval: 0, // 设置X轴刻度间隔为0
  241. // },
  242. data: data.dates
  243. },
  244. yAxis: {
  245. type: 'value'
  246. },
  247. color: ['#99FFFF', '#cccca3', '#FFCCCC', '#99CCFF', '#99FFCC', '#CC99CC'],
  248. series: [
  249. {
  250. name: '签单客户数',
  251. type: 'line',
  252. data: data.signList,
  253. },
  254. {
  255. name: '私有客户数',
  256. type: 'line',
  257. data: data.privateList,
  258. },
  259. {
  260. name: '私有渠道数',
  261. type: 'line',
  262. data: data.channelList,
  263. },
  264. {
  265. name: '公出企业数',
  266. type: 'line',
  267. data: data.publicReleaseList,
  268. },
  269. {
  270. name: '跟进客户数',
  271. type: 'line',
  272. data: data.userFollowList,
  273. },
  274. {
  275. name: '订单数',
  276. type: 'line',
  277. data: data.orderList,
  278. }
  279. ]
  280. }
  281. return (
  282. <div className="user-content">
  283. <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
  284. <div className="content-title" style={{ marginBottom: 10 }}>
  285. <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span>
  286. </div>
  287. <div className="user-search">
  288. <RadioGroup value={status}
  289. onChange={e => {
  290. this.setState({
  291. status: e.target.value
  292. })
  293. if (e.target.value == 0) {
  294. this.setState({
  295. releaseDate: []
  296. })
  297. } else {
  298. this.setState({
  299. releaseDate: getToday(e.target.value)
  300. }, () => {
  301. this.loadData()
  302. })
  303. }
  304. }}
  305. >
  306. <RadioButton value={1}>今日</RadioButton>
  307. <RadioButton value={2}>昨日</RadioButton>
  308. <RadioButton value={3}>近7日</RadioButton>
  309. <RadioButton value={4}>近15日</RadioButton>
  310. <RadioButton value={5}>近30日</RadioButton>
  311. <RadioButton value={0}>自定义</RadioButton>
  312. </RadioGroup>
  313. {
  314. status == 0 &&
  315. <span>
  316. <RangePicker
  317. style={{ width: 200, marginLeft: 15 }}
  318. value={[
  319. this.state.releaseDate[0]
  320. ? moment(this.state.releaseDate[0])
  321. : null,
  322. this.state.releaseDate[1]
  323. ? moment(this.state.releaseDate[1])
  324. : null,
  325. ]}
  326. onChange={(data, dataString) => {
  327. this.setState({ releaseDate: dataString })
  328. }}
  329. />
  330. <Button style={{ margin: "0 15px" }} type="primary" onClick={this.search}>搜索</Button>
  331. <Button onClick={this.reset}>重置</Button>
  332. </span>
  333. }
  334. </div>
  335. <div className="patent-table">
  336. <Spin spinning={this.state.loading}>
  337. <div className='plist'>
  338. {
  339. list.map((item, index) => {
  340. return item.type == 0
  341. ? <div className='plitem' style={{ background: item.color }} key={index}>
  342. <div className='plititle'>
  343. <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span>
  344. <a href={globalConfig.context + item.url}>
  345. <span className='plisum'>{item.sum}</span>
  346. </a>
  347. </div>
  348. {
  349. item.title == "待紧急处理事项"
  350. ? <div className='list'>
  351. {
  352. item.list.map((t, i) =>
  353. <div key={i}>
  354. <span>{t.key}</span>
  355. <a href={globalConfig.context + t.url}>
  356. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
  357. </a>
  358. </div>
  359. )
  360. }
  361. </div>
  362. : <div className='count'>
  363. <a href={globalConfig.context + item.url}><div className='plinum'>{item.number}</div></a>
  364. <div className='plitit'>{item.tit}</div>
  365. </div>
  366. }
  367. </div> :
  368. (item.type == 1 && item.list[0].value !== null)
  369. ? <div className='plitems' style={{ background: item.color }} key={index}>
  370. <div className='pleft'>
  371. <div className='round'><Icon type="phone" style={{ fontSize: 40, color: "#fff" }} /></div>
  372. <div>{item.title}</div>
  373. </div>
  374. <div>
  375. {
  376. item.list.map((t, i) =>
  377. <div key={i}>
  378. <span>{t.key}</span>
  379. <a href="">
  380. <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
  381. </a>
  382. </div>
  383. )
  384. }
  385. </div>
  386. {/* <div className='refresh' onClick={this.clean}>刷新</div> */}
  387. </div> : null
  388. }
  389. )
  390. }
  391. </div>
  392. </Spin>
  393. <ReactEcharts option={option} echarts={echarts} />
  394. </div>
  395. </div>
  396. );
  397. },
  398. });
  399. export default Statistics;