123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240 |
- 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;
|