kede-client/js/component/manageCenter/index/statistics/cw.jsx

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 ShowModalDiv from "@/showModal.jsx";
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: {},
      htmlMenus: [],
    }
  },

  componentWillMount() {
    this.loadData();
    this.getData();
    this.mainMenu();
  },

  mainMenu() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/selectNavList",
      data: {},
      success: function (data) {
        if (!data.data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
            return;
          }
        }
        let menu = data.data;
        this.setState({
          htmlMenus: menu,
        });
      }.bind(this),
    }).always(
      function (data) {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  loadData() {
    const { releaseDate } = this.state
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/statistics/finance/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/finance/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();
  },

  getNewUrl(url, cd) {
    const { htmlMenus = [] } = this.state
    let id = ''
    htmlMenus.map(function (item) {
      if (item.url == url) {
        id = item.id;
      }
    });
    return `${url}?rid=${id}#${cd}`
  },

  render() {
    const { status, info, data } = this.state
    let array = window.adminData.shiroList.split(",");
    const list = [
      { color: "#99FFFF", title: "总派单审核数：", sum: info.orderCount, tit: "待派单审核数", number: info.orderUnauditedCount, url: this.getNewUrl('/admin/idea.html', 'shouKuang'), type: '' },
      { color: "#FFFFCC", title: "总报销数：", sum: info.expenseCount, tit: "待报销审核数", number: info.expenseUnauditedCount, url: this.getNewUrl('/admin/idea.html', 'accountExamine'), type: '' },
      { color: "#FFCCCC", title: "总开票数：", sum: info.invoiceCount, tit: "待开票数", number: info.invoiceUnauditedCount, url: this.getNewUrl('/admin/idea.html', 'invoiceApplyList'), type: '' },
      { color: "#99CCFF", title: "总会员项目审核数：", sum: info.memberCount, tit: "待会员审核数", number: info.memberUnauditedCount, url: this.getNewUrl('/admin/idea.html', 'projectvip'), type: '' },
      { color: "#99FFCC", title: "总应收款（万元）：", sum: info.receivables, tit: "应收款", number: info.rangeReceivables, url: this.getNewUrl('/admin/order.html', 'pressList'), type: '' },
      { color: "#CC99CC", title: "总成本审核数：", sum: info.paymentCount, tit: "待成本审核数", number: info.paymentUnauditedCount, url: this.getNewUrl('/admin/idea.html', 'costAuditList'), type: '' },
      { color: "#99CCCC", title: "总公出数：", sum: info.publicCount, tit: "公出数", number: info.rangePublicCount, url: '', type: '' },
      {
        color: "#FFCC99", title: "待紧急处理事项",
        list: [
          { key: "待变更审核：", value: info.changeCount, url: this.getNewUrl('/admin/idea.html', "contractChangeCwzy"), type: '1' },
          { key: "待变更退票处理：", value: info.changeInvoiceCount, url: this.getNewUrl('/admin/idea.html', "contractChangeCwzy"), type: '3' }]
      },
    ]
    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,
        // axisLabel: {
        //   interval: 0, // 设置X轴刻度间隔为0
        // },
        data: data.dates
      },
      yAxis: {
        type: 'value'
      },
      color: ['#99FFFF', '#cccca3', '#FFCCCC', '#99CCFF', '#99FFCC', '#CC99CC', '#CC99CC', '#99CCCC'],
      series: [
        {
          name: '订单数',
          type: 'line',
          data: data.orderList,
        },
        {
          name: '报销数',
          type: 'line',
          data: data.expenseList,
        },
        {
          name: '开票数',
          type: 'line',
          data: data.invoiceList,
        },
        {
          name: '会员审核数',
          type: 'line',
          data: data.memberList,
        },
        {
          name: '成本审核数',
          type: 'line',
          data: data.paymentList,
        },
        {
          name: '公出数',
          type: 'line',
          data: data.publicList,
        },
      ]
    }
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>数据统计</span>
        </div>
        <div className="user-search">
          <RadioGroup value={status}
            onChange={e => {
              this.setState({
                status: e.target.value
              })
              if (e.target.value == 0) {
                this.setState({
                  releaseDate: []
                })
              } else {
                this.setState({
                  releaseDate: getToday(e.target.value)
                }, () => {
                  this.loadData()
                })
              }
            }}
          >
            <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 &&
            <span>
              <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={{ margin: "0 15px" }} type="primary" onClick={this.search}>搜索</Button>
              <Button onClick={this.reset}>重置</Button>
            </span>
          }
        </div>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <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>
                      <a href={globalConfig.context + item.url}
                        onClick={() => {
                          localStorage.setItem('typeZxs', item.type);
                        }}
                      >
                        {item.title != "待紧急处理事项" && <span className='plisum'>{item.sum || 0}</span>}
                      </a>
                    </div>
                    {
                      item.title == "待紧急处理事项"
                        ? <div className='list'>
                          {
                            item.list.map((t, i) =>
                              <div key={i}>
                                <span>{t.key}</span>
                                <a href={globalConfig.context + t.url}
                                  onClick={() => {
                                    localStorage.setItem('typeCw', t.type);
                                  }}
                                >
                                  <span style={{ textDecoration: "underline", color: "#0000FF" }}>{t.value}</span>
                                </a>
                              </div>
                            )
                          }
                        </div>
                        : <div className='count'>
                          <a href={globalConfig.context + item.url}
                            onClick={() => {
                              localStorage.setItem('typeCw', item.type);
                            }}
                          ><div className='plinum'>{item.number || 0}</div></a>
                          <div className='plitit'>{item.tit}</div>
                        </div>
                    }
                  </div>
                )
              }
            </div>
          </Spin>
          <ReactEcharts option={option} echarts={echarts} />
        </div>
      </div>
    );
  },
});

export default Statistics;