import React from 'react'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import moment from 'moment'; import '@/manageCenter/financialManage/distribute/public.less'; import { Button, Spin, DatePicker, Radio, message } from 'antd'; import { getToday, ShowModal } from '@/tools'; import './index.less'; import ReactEcharts from 'echarts-for-react/lib/core'; import echarts from 'echarts/lib/echarts'; import 'echarts/lib/chart/line'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/title'; import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/toolbox'; import 'echarts/lib/component/grid'; const RadioButton = Radio.Button; const RadioGroup = Radio.Group; const { RangePicker } = DatePicker const Statistics = React.createClass({ getInitialState() { return { status: 1, releaseDate: getToday(1), info: {}, data: {}, } }, componentWillMount() { this.loadData(); this.getData(); }, loadData() { const { releaseDate } = this.state this.setState({ loading: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/statistics/info", data: { startTime: releaseDate[0], endTime: releaseDate[1], }, success: function (data) { ShowModal(this); this.setState({ loading: false, }); if (data.error && data.error.length === 0) { this.setState({ info: data.data }) } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, getData() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/statistics/lists", success: function (data) { if (data.error && data.error.length === 0) { this.setState({ data: data.data, }) } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, search() { this.loadData(); }, reset() { this.state.releaseDate = [] this.loadData(); }, render() { const { status, info, data } = this.state const list = [ { color: "#99FFFF", title: "全部签单客户数:", sum: info.signSum, tit: "签单客户数", number: info.rangeSignSum }, { color: "#FFFFCC", title: "全部私有客户数:", sum: info.privateSum, tit: "私有客户数", number: info.rangePrivateSum }, { color: "#FFCCCC", title: "全部渠道数:", sum: info.channelSum, tit: "私有渠道数", number: info.rangeChannelSum }, { color: "#99CCFF", title: "全部公出数:", sum: info.publicReleaseSum, tit: "公出企业数", number: info.rangePublicReleaseSum }, { color: "#99FFCC", title: "全部跟进客户数:", sum: info.followSum, tit: "跟进客户数", number: info.rangeFollowSum }, { color: "#CC99CC", title: "全部订单数:", sum: info.orderSum, tit: "订单数", number: info.rangeOrderSum }, { color: "#99CCCC", title: "全部应收款:", sum: 10.54, tit: "应收款", number: 0.25 }, { color: "#FFCC99", title: "待紧急处理事项", sum: "", tit: "签单客户数", number: "", list: [{ key: "被驳回订单:", value: info.rejectSum }, { key: "待变更订单:", value: info.changeSum }, { key: "待核对订单:", value: info.projectCheckSum }, { key: "暂停项目:", value: info.projectStopSum },] }, ] const option = { title: { text: '' }, tooltip: { trigger: 'axis' }, legend: { data: ['签单客户数', '私有客户数', '私有渠道数', '公出企业数', '跟进客户数', '订单数',] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: data.dates }, yAxis: { type: 'value' }, series: [ { name: '签单客户数', type: 'line', data: data.signList }, { name: '私有客户数', type: 'line', data: data.privateList }, { name: '私有渠道数', type: 'line', data: data.channelList }, { name: '公出企业数', type: 'line', data: data.publicReleaseList }, { name: '跟进客户数', type: 'line', data: data.userFollowList }, { name: '订单数', type: 'line', data: data.orderList } ] } return (