|
@@ -0,0 +1,240 @@
|
|
|
+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 './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 {
|
|
|
+ releaseDate: [],
|
|
|
+ info: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ componentWillMount() {
|
|
|
+ const now = new Date();
|
|
|
+ const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
|
|
+ console.log("-----------", yesterday)
|
|
|
+ },
|
|
|
+
|
|
|
+ loadData() {
|
|
|
+ const { releaseDate } = this.state
|
|
|
+ console.log("====", releaseDate)
|
|
|
+ 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)
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ search() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+
|
|
|
+ reset() {
|
|
|
+ this.state.releaseDate = []
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { status } = this.state
|
|
|
+ const list = [
|
|
|
+ { color: "#99FFFF", title: "全部签单客户数:", sum: 200, tit: "签单客户数", number: 50 },
|
|
|
+ { color: "#FFFFCC", title: "全部私有客户数:", sum: 200, tit: "私有客户数", number: 50 },
|
|
|
+ { color: "#FFCCCC", title: "全部渠道数:", sum: 200, tit: "私有渠道数", number: 50 },
|
|
|
+ { color: "#99CCFF", title: "全部公出数:", sum: 200, tit: "公出企业数", number: 50 },
|
|
|
+ { color: "#99FFCC", title: "全部跟进客户数:", sum: 200, tit: "跟进客户数", number: 50 },
|
|
|
+ { color: "#CC99CC", title: "全部订单数:", sum: 200, tit: "订单数", number: 50 },
|
|
|
+ { color: "#99CCCC", title: "全部应收款:", sum: 10.54, tit: "应收款", number: 0.25 },
|
|
|
+ {
|
|
|
+ color: "#FFCC99", title: "待紧急处理事项", sum: "", tit: "签单客户数", number: "",
|
|
|
+ list: [{ key: "被驳回订单:", value: 2 }, { key: "待变更订单:", value: 2 }, { key: "待核对订单:", value: 2 }, { key: "暂停项目:", value: 2 },]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ 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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '签单客户数',
|
|
|
+ type: 'line',
|
|
|
+ data: [1, 2, 0, 2, 5, 3, 9]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '私有客户数',
|
|
|
+ type: 'line',
|
|
|
+ data: [0, 0, 1, 2, 3, 4, 5]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '私有渠道数',
|
|
|
+ type: 'line',
|
|
|
+ data: [1, 2, 5, 4, 8, 9, 1]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '公出企业数',
|
|
|
+ type: 'line',
|
|
|
+ data: [1, 2, 5, 7, 8, 5, 2]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '跟进客户数',
|
|
|
+ type: 'line',
|
|
|
+ data: [0, 4, 6, 3, 2, 7, 9]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '订单数',
|
|
|
+ type: 'line',
|
|
|
+ data: [1, 2, 3, 5, 8, 6, 7]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <div className="user-content">
|
|
|
+ <div className="content-title" style={{ marginBottom: 10 }}>
|
|
|
+ <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span>
|
|
|
+ </div>
|
|
|
+ <div className="user-search">
|
|
|
+ <RadioGroup defaultValue="a"
|
|
|
+ onChange={e => {
|
|
|
+ this.setState({
|
|
|
+ status: e.target.value
|
|
|
+ })
|
|
|
+ console.log("e==", e.target.value)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <RadioButton value={1}>今日</RadioButton>
|
|
|
+ <RadioButton value={2}>昨日</RadioButton>
|
|
|
+ <RadioButton value={3}>近7日</RadioButton>
|
|
|
+ <RadioButton value={4}>近15日</RadioButton>
|
|
|
+ <RadioButton value={5}>近30日</RadioButton>
|
|
|
+ <RadioButton value={0}>自定义</RadioButton>
|
|
|
+ </RadioGroup>
|
|
|
+ {
|
|
|
+ status == 0 &&
|
|
|
+ <RangePicker
|
|
|
+ style={{ width: 200, marginLeft: 15 }}
|
|
|
+ value={[
|
|
|
+ this.state.releaseDate[0]
|
|
|
+ ? moment(this.state.releaseDate[0])
|
|
|
+ : null,
|
|
|
+ this.state.releaseDate[1]
|
|
|
+ ? moment(this.state.releaseDate[1])
|
|
|
+ : null,
|
|
|
+ ]}
|
|
|
+ onChange={(data, dataString) => {
|
|
|
+ this.setState({ releaseDate: dataString })
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ <Button style={{ marginLeft: 15 }} type="primary" onClick={this.search}>搜索</Button>
|
|
|
+ <Button onClick={this.reset}>重置</Button>
|
|
|
+ </div>
|
|
|
+ <div className="patent-table">
|
|
|
+ {/* <Spin spinning={this.state.loading}>
|
|
|
+
|
|
|
+ </Spin> */}
|
|
|
+ <ReactEcharts option={option} echarts={echarts} />
|
|
|
+ <div className='plist'>
|
|
|
+ {
|
|
|
+ list.map((item, index) =>
|
|
|
+ <div className='plitem' style={{ background: item.color }} key={index}>
|
|
|
+ <div className='plititle'>
|
|
|
+ <span style={{ fontWeight: item.title == "待紧急处理事项" && "bold" }}>{item.title}</span>
|
|
|
+ <span className='plisum'>{item.sum}</span>
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ item.title == "待紧急处理事项"
|
|
|
+ ? <div className='list'>
|
|
|
+ {
|
|
|
+ item.list.map((t, i) =>
|
|
|
+ <div key={i}>
|
|
|
+ <span>{t.key}</span>
|
|
|
+ <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ : <div className='count'>
|
|
|
+ <div className='plinum'>{item.number}</div>
|
|
|
+ <div className='plitit'>{item.tit}</div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+export default Statistics;
|