| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343 | 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 } = DatePickerconst 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;
 |