把学生管理里面的 自定义统计抽成公共组件 让不同的学校不同的分支都能用

zyd_private/StatisticsInfo/Ability.css

+.sendBtn{
+    width: 120px;
+    height: 24px;
+    background: #FFB400;
+    border: none;
+    color: #fff;
+    padding: 0;
+    font-size: 14px;
+}
+
+.out{
+	text-align: center;
+	height:100px; /*这里需要自己调整，根据自己的需求调整高度*/
+    position: relative;
+    width: 186px;
+}
+
+.out:before {
+	content: "";
+    position: absolute;
+    width: 1px;
+    height: 198px;
+    top: 0;
+    left: 0;
+    background-color: gray;
+    display: block;
+    transform: rotate(-76deg);
+    transform-origin: top;
+    -ms-transform: rotate(-76deg);
+    -ms-transform-origin: top;
+}
+.out:after {
+	content: "";
+    position: absolute;
+    width: 1px;
+    height: 220px;
+    top: 0;
+    left: 0;
+    background-color: gray;
+    display: block;
+    transform: rotate(-61deg);
+    transform-origin: top;
+    -ms-transform: rotate(-61deg);
+    -ms-transform-origin: top;
+}
+.out2{
+	text-align: center;
+	height:100px; /*这里需要自己调整，根据自己的需求调整高度*/
+    position: relative;
+    width: 186px;
+}
+
+.out2:after {
+	content: "";
+    position: absolute;
+    width: 1px;
+    height: 220px;
+    top: 0;
+    left: 0;
+    background-color: gray;
+    display: block;
+    transform: rotate(-61deg);
+    transform-origin: top;
+    -ms-transform: rotate(-61deg);
+    -ms-transform-origin: top;
+}
+.title1{
+	position: absolute;
+	top: 0px;
+	right:14px;
+}
+.title2{
+	position: absolute;
+	top: 43px;
+    right:27px;
+
+    transform:rotate(30deg)
+}
+.title3{
+	position: absolute;
+	top: 30px;
+	left:0px;
+}
+
+.tableCantainer{
+    width: 100%;
+}
+.tableSty{
+    width: 1020px;
+}
+.tableBox{
+  width: 100%;
+  height:280px;
+  overflow-y: auto;
+}
+.tableStyl {
+    width: 1020px;
+    overflow-y: auto;
+    height: 240px;
+}
+.tableStyl tr{
+    width: 100%;
+    border-bottom: 1px solid #F0F0F0;
+}
+.tableStyl tr:hover{
+    width: 100%;
+    background: #FFE8B2;
+    border-bottom: 1px solid #F0F0F0;
+}
+.tableStyl tr td{
+   text-align: center;
+  padding: 10px 0;
+}
+.evaluation{
+    width: 400px;
+    height: 80px;
+    margin: 140px auto 20px;
+    background: #DFF3E2;
+padding: 0 25px;
+    display: flex;
+    align-items: center;
+}
+.evaluation p{
+
+   margin-bottom: 0;
+}
+.evaluation div{
+  width: 50%;
+ }
+ .imgs{
+     display: flex;
+justify-content: center;
+ }
+ .flow{
+     width:120px;
+     height: 620px;
+
+    background:url('../../../assets/img/QQ图片20180929095544.png') no-repeat left top;
+}
+.tree{
+    width: 600px;
+    height: 620px;
+    position: relative;
+    background:url('../../../assets/img/系统树.png') no-repeat left top;
+}
+.item{
+    display: flex;
+    align-items: center;
+    width: 200px;
+}
+
+.aboutTable{
+    width: 100%;
+}
+
+.aboutTable tr{
+    width: 100%;
+
+}
+.aboutTable tr td:nth-child(1){
+    padding: 11px 0;
+    text-align: center;
+    border-right:1px solid #D2D2D2;
+    width: 16%;
+    color: #617489;
+    font-size: 14px;
+}
+.aboutTable tr:nth-child(1){
+    border-bottom: none;
+    background: #E5EFF9;
+}
+.aboutTable tr:nth-child(2){
+    border-bottom: none;
+    background: #F2F7FC;
+}
+.aboutTable tr{
+    width: 100%;
+    border-bottom: 1px solid #D2D2D2;
+}
+.aboutTable tr td{
+    padding: 11px 0;
+    text-align: center;
+     width: 12%;
+     font-size: 14px;
+     color: #8393A4;
+
+ }
+.yjTable{
+    width: 100%;
+}
+.yjTable tr{
+    width: 100%;
+}
+.yjTable tr:nth-child(1){
+    width: 100%;
+
+    font-size: 14px;
+    color: #617489;
+}
+.yjTable tr td{
+ padding: 10px 0;
+ text-align: center;
+ font-size: 14px;
+ color: #666666;
+}
+.widthNum{
+    width: 100%
+}
+.tableStys{
+    width: 100%;
+    margin:24px 0 32px;
+}
+.tableStys tr{
+    width: 100%;
+
+
+}
+.tableStys tr:nth-child(1){
+    width: 100%;
+background:#E5EFF9;
+color: #617489;
+font-size: 14px;
+
+}
+.tableStys tr:nth-child(2){
+    width: 100%;
+    background: #F2F7FC;
+    color: #8393A4;
+    font-size: 14px;
+
+}
+.tableStys tr td{
+    width: 100%;
+  padding: 12px 0;
+  text-align: center;
+
+}

zyd_private/StatisticsInfo/QueryItem.js

+import React from 'react'
+import { Select,Input,InputNumber,Button,DatePicker } from 'antd';
+import { connect } from 'dva';
+import moment from 'moment';
+import ButtonDiy from '@/baseComponent/ButtonDiy';
+
+const Option = Select.Option;
+
+
+export default class QueryItem extends React.Component {
+    constructor(props) {
+        super(props);
+        const value = props.value || {};
+        this.state = {
+            stringX:value.stringX,
+            string:value.string,
+            disabled:value.disabled||false
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        // Should be a controlled component.
+        if ('value' in nextProps) {
+            const value = nextProps.value;
+            this.setState(value);
+        }
+    }
+
+    triggerChange = (changedValue) => {
+        // Should provide an event to pass value to Form.
+        const onChange = this.props.onChange;
+        if (onChange) {
+            onChange(Object.assign({}, this.state, changedValue));
+        }
+    };
+
+    changeNumber=(e)=>{
+
+        if (!('value' in this.props)) {
+            this.setState({ string:e});
+        }
+        this.triggerChange({ string:e});
+    };
+    changeStringX=(e)=>{
+        var disabled = false
+
+        if(e=="IS NOT NULL"||e=="IS NULL"){
+            disabled=true;
+
+        }
+        if (!('value' in this.props)) {
+            this.setState({ stringX:e ,disabled});
+        }
+
+        this.triggerChange({ stringX:e ,disabled});
+    };
+    changeString=(e)=>{
+
+        if (!('value' in this.props)) {
+            this.setState({ string:e.target.value });
+        }
+        this.triggerChange({ string:e.target.value });
+    };
+    changeDate=(date)=>{
+        //console.log(date)
+        if (!('value' in this.props)) {
+            this.setState({ string:date.valueOf() });
+        }
+        this.triggerChange({ string:date.valueOf() });
+    };
+    render() {
+        const{obj} = this.props;
+        const {string,stringX,disabled} =this.state;
+        if(obj.options && obj.options.length>0){
+           return(<div> <Select onChange={this.changeStringX}
+                                value={stringX||"="}
+                                style={{width:100, paddingRight: 12}}>
+                                <Option value="=">等于</Option>
+                                <Option value="<>">不等于</Option>
+                                <Option value="IS NOT NULL">不为空</Option>
+                                <Option value="IS NULL">为空</Option>
+            </Select>
+           {disabled?"": <span style={{paddingRight: 12}}>
+            <Select onChange={this.changeNumber}
+                    value={string}
+                    style={{width:200}}>
+                {obj.options.map((r)=><Option key={r.v} value={r.v}>{r.l}</Option>)}
+
+                </Select>
+             </span>}
+             <ButtonDiy className='defaultRed'
+                        name="删除"
+                        handleClick={this.props.deleteQuery}/>
+            </div>)
+        }
+        if(obj.type === "java.lang.String"){
+        return (
+            <div>
+            <Select onChange={this.changeStringX}
+                    value={stringX||"="}
+                    style={{width:100, paddingRight: 12 }}>
+                <Option value="=">等于</Option>
+                <Option value="!=">不等于</Option>
+                <Option value="like">像</Option>
+                <Option value="IS NOT NULL">不为空</Option>
+                <Option value="IS NULL">为空</Option>
+            </Select>
+            {disabled?"": <span style={{paddingRight: 12}}>
+                <Input onChange={this.changeString}
+                       placeholder="请输入"
+                       value={string}
+                       style={{width:200,}}
+            />
+              </span>}
+              <ButtonDiy className='defaultRed'
+                         name="删除"
+                         handleClick={this.props.deleteQuery}/>
+                 </div>)
+
+         }else if(obj.type === "java.lang.Integer"||
+                  obj.type === "java.lang.Double" ||
+                  obj.type === "java.lang.Long"){
+            return ( <div> <Select onChange={this.changeStringX}
+                                   value={stringX||"="}
+                                   style={{width:100, paddingRight: 12}}>
+            <Option value="=">等于</Option>
+            <Option value="<>">不等于</Option>
+            <Option value=">">大于</Option>
+            <Option value=">=">大于等于</Option>
+            <Option value="<">小于</Option>
+            <Option value="<=">小于等于</Option>
+            <Option value="IS NOT NULL">不为空</Option>
+            <Option value="IS NULL">为空</Option>
+            </Select>
+            {disabled?"": <span style={{paddingRight: 12}}>
+            <InputNumber onChange={this.changeNumber}
+                         placeholder="请输入"
+                         value={string}
+                         style={{width:200}}
+            />
+              </span>}
+              <ButtonDiy className='defaultRed'
+                        style={{marginLeft: 12}}
+                         name="删除"
+                         handleClick={this.props.deleteQuery}/>
+            </div>)
+         }else if(obj.type === "java.lang.Boolean"){
+            return ( <div>
+              <Select onChange={this.changeStringX}
+                     value={stringX||"="}
+                      style={{width:100, paddingRight: 12}}>
+                <Option value="=">
+                  等于
+                </Option>
+                </Select>
+                {disabled?"":  <span style={{paddingRight: 12}}>
+                <Select onChange={this.changeNumber}
+                        value={string}
+                        style={{width:200}}
+                >
+                <Option value={true}>
+                  是
+                </Option>
+                <Option value={false}>
+                  否
+                </Option>
+                </Select>
+              </span>}
+              <ButtonDiy className='defaultRed'
+              style={{marginLeft: 12}}
+                         name="删除"
+                         handleClick={this.props.deleteQuery}/>
+            </div>)
+        }else if(obj.type === "java.util.Date"){
+            return(<div>
+              <Select onChange={this.changeStringX}
+                      value={stringX||"="}
+                      style={{width:100, paddingRight: 12}}>
+            <Option value="=">等于</Option>
+            <Option value="<>">不等于</Option>
+            <Option value=">">大于</Option>
+            <Option value=">=">大于等于</Option>
+            <Option value="<">小于</Option>
+            <Option value="<=">小于等于</Option>
+            <Option value="IS NOT NULL">不为空</Option>
+            <Option value="IS NULL">为空</Option>
+            </Select>
+            {disabled?"": <span style={{paddingRight: 12}}>
+              <DatePicker onChange={this.changeDate}
+                        showTime
+                        format="YYYY-MM-DD HH:mm:ss"
+                          allowClear={false}
+                          style={{width:200}}
+                          value={string?moment(string):null}
+              />
+              </span>}
+              <ButtonDiy className='defaultRed'
+              style={{marginLeft: 12}}
+                         name="删除"
+                         handleClick={this.props.deleteQuery}/>
+                </div>)
+
+        }else{
+            return (<span>暂无法处理</span>)
+         }
+
+
+    }
+}

zyd_private/StatisticsInfo/index.js

+import React, { Fragment } from 'react';
+import { Select, Button, Divider, Table, Row, Col, Tag, Alert, Form, message } from 'antd';
+import { connect } from 'dva';
+import { getToken } from '@/utils/authority';
+import config from '@/config/config';
+import ButtonDiy from '@/baseComponent/ButtonDiy';
+import QueryItem from './QueryItem';
+import styles from './Ability.css';
+import FormdataWrapper from '@/utils/object-to-formdata-custom';
+import moment from 'moment';
+import { controlNotification } from '@/baseComponent/utils';
+
+
+
+const Option = Select.Option;
+const nameSpan = {
+  small: 9,
+  big: 7,
+};
+const nameSpan2 = {
+  small: 0,
+  big: 0,
+};
+const nameSpan3 = {
+  small: 3,
+  big: 2,
+};
+var keyX = 1;
+
+
+const FormItem = Form.Item;
+@connect(({ cms, ExportFile, loading }) => ({
+  cms, ExportFile,
+  loading: loading.models.cms || loading.models.ExportFile,
+}))
+@Form.create()
+export default class StatisticsInfo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hisData: {
+        list: [],
+        pagination: {},
+      },
+      formValues: {},
+      exportLoading: false,
+      visiable: false,
+      queryVisiable: false,
+      sortVisiable: false,
+      currentQueryKey: null,
+      currentGroupKey: null,
+      orderVisiable: false,
+      currentOrderKey: null,
+      querys: [],
+      orders: [],
+      groups: [],
+      gs: [],
+      os: [],
+      qs: [],
+      x: null,
+      y: null,
+      z: null,
+      currentKey: null,
+      XxX: null,
+      mockData: [],
+      mockXZData: [],
+      targetKeys: [],
+      sourceSelectedKeys: [],
+      targetSelectedKeys: [],
+      infos: {},
+      columns: [],
+      dataSource: [],
+      flag: false,
+      showHistory: false,
+      showSearchItem: true,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.isShow) {
+      this.open();
+      this.getPage({
+        pageNo: 1,
+        pageSize: 10,
+      });
+    }
+
+  }
+
+  getPage = (params, values) => {
+
+    const pagination = this.state.hisData.pagination;
+    if (!values) {
+      values = this.state.formValues;
+    }
+    if (params == null) {
+      params = {
+        pageNo: pagination.current ? pagination.current : 1,
+        pageSize: pagination.pageSize ? pagination.pageSize : 10,
+        ...values,
+      };
+    }
+
+    this.props.dispatch({
+      type: 'ExportFile/fetch',
+      payload: { ...params, isExport: false, keyword: this.props.keyword ? this.props.keyword : this.props.modelClass },
+      callback: (payload) => {
+        this.setState({
+          hisData: {
+
+            list: payload.rows,
+            pagination: {
+              current: payload.pageNo,
+              pageSize: payload.pageSize,
+              total: payload.total,
+            },
+          },
+        });
+      },
+    });
+  };
+  columns = [{
+    title: '序号',
+    render: (text, record, index) => (index + 1),
+  },
+    {
+      title: '开始时间',
+      dataIndex: 'createTime',
+      render: (val) => moment(val).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      render: (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : null,
+    },
+    {
+      title: '状态',
+
+      render: (val, record) => record.endTime ? '已完成' : '生成中',
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        record.endTime ? <Fragment>
+
+          <a target="_blank" href={config.dfs + record.path}>下载</a>
+
+          <Divider type="vertical"/>
+
+          <a onClick={this.delete.bind(this, record.id)}>删除</a>
+
+        </Fragment> : <Fragment>
+
+
+          <a onClick={this.delete.bind(this, record.id)}>删除</a>
+
+        </Fragment>
+      ),
+    },
+  ];
+  delete = (id) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'ExportFile/remove',
+      payload: {
+        ids: [id],
+      },
+      callback: () => {
+        this.getPage({ pageNo: 1, pageSize: 10 });
+      },
+    });
+  };
+
+  batchDelete = (e) => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+    dispatch({
+      type: 'ExportFile/remove',
+      payload: {
+        ids: selectedRows.map(row => row.id).join(','),
+      },
+      callback: () => {
+        this.setState({
+          selectedRows: [],
+        });
+        this.getPage({ pageNo: 1, pageSize: 10 });
+      },
+    });
+  };
+
+  deleteQuery = (i) => {
+    const querys = this.state.querys;
+    querys.splice(i);
+    this.setState({ querys });
+  };
+
+  deleteGroup = (i) => {
+    const groups = this.state.groups;
+    groups.splice(i);
+    this.setState(
+      {
+        groups,
+      }, () => {
+        this.finish();
+      });
+  };
+  open = () => {
+    const { dispatch } = this.props;
+
+
+    dispatch({
+      type: 'cms/getExportInfo',
+      payload: {
+        modelClass: this.props.modelClass,
+      },
+      callback: (infos) => {
+        const filterXZKeys = this.props.filterXZKeys;
+        const mockData = [];
+        const mockXZData = [];
+        const qs = [];
+        const gs = [];
+        const os = [];
+        for (var key in infos) {
+          const x = infos[key];
+          mockData.push({
+            key: x.field,
+            title: x.name,
+            chosen: false,
+            hql: x.hql,
+          });
+          if (filterXZKeys != null) {
+            if (filterXZKeys.includes(key)) {
+              mockXZData.push({
+                key: x.field,
+                title: x.name,
+                chosen: false,
+                hql: x.hql,
+              });
+            }
+          } else {
+            mockXZData.push({
+              key: x.field,
+              title: x.name,
+              chosen: false,
+              hql: x.hql,
+            });
+          }
+          if (x.canQuery) {
+            qs.push(x);
+          }
+          if (x.canGroup) {
+            gs.push(x);
+          }
+          if (x.canOrder) {
+            os.push(x);
+          }
+        }
+
+        this.setState({
+          mockData, mockXZData, infos, visiable: true, qs, gs, os,
+        });
+        this.props.setShow(true);
+      },
+    });
+  };
+  onCancle = () => {
+    this.setState({ visiable: false });
+  };
+  handleChange = (targetKeys, direction, moveKeys) => {
+
+    this.setState({ targetKeys });
+  };
+
+  okGroup = () => {
+    const groups = this.state.groups;
+    if (!this.state.currentGroupKey) {
+      message.info('请选择一个聚合条件');
+      return false;
+    }
+    groups.push(this.state.infos[this.state.currentGroupKey]);
+    this.setState({
+      groups,
+      groupVisiable: false,
+      currentGroupKey: null,
+    });
+
+  };
+
+  addQuery = () => {
+
+    this.setState({ queryVisiable: true });
+
+  };
+  okQuery = () => {
+    if (!this.state.currentQueryKey) {
+      message.info('请选择一个查询条件');
+      return false;
+    }
+    const querys = this.state.querys;
+    querys.push(this.state.infos[this.state.currentQueryKey]);
+    this.setState({ querys, queryVisiable: false, currentQueryKey: null });
+
+  };
+  finish = () => {
+    const { dispatch, beanName, daoClass } = this.props;
+    const { x, y, z, infos, XxX, currentKey, groups } = this.state;
+    if (x == null) {
+      message.info('请选择横轴');
+      return;
+    }
+    if (y == null) {
+      message.info('请选择纵轴');
+      return;
+    }
+    this.props.form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      const qqs = this.props.mustQuerys || [];
+      const ggs = [];
+      for (var key in fieldsValue) {
+        var xx = key.indexOf('__');
+
+        let kk = key.substr(xx + 2); // 拿取查询星系
+
+        qqs.push({
+          notes: this.state.infos[kk].notes,
+          hql: this.state.infos[kk].hql,
+          c: this.state.infos[kk].type,
+          x: fieldsValue[key].stringX,
+          v: fieldsValue[key].string,
+        });
+
+
+      }
+
+      if (groups.length === 0) {
+        message.info('请至少选择一个聚合条件');
+        return;
+      }
+
+      for (var i = 0; i < groups.length; i++) {
+        ggs.push({ hql: groups[i].hql });
+      }
+      const tx = infos[x];
+      const ty = infos[y];
+
+      var ttx;
+      var tty;
+      var ttz;
+      if (tx.notes) {
+        if (tx.notes.indexOf('com.') == -1) {
+          ttx = infos[x].hql.replace('.id', '.dictName');
+        } else {
+          ttx = infos[x].hql;
+        }
+      } else {
+        ttx = infos[x].hql;
+      }
+      if (ty.notes) {
+        if (ty.notes.indexOf('com.') == -1) {
+          tty = infos[y].hql.replace('.id', '.dictName');
+        } else {
+          tty = infos[y].hql;
+        }
+      } else {
+        tty = infos[y].hql;
+      }
+      if (z != null) {
+        const tz = infos[z];
+        if (tz && tz.notes) {
+          if (tz.notes.indexOf('com.') == -1) {
+            ttz = infos[z].hql.replace('.id', '.dictName');
+          } else {
+            ttz = infos[z].hql;
+          }
+        } else {
+          ttz = infos[z].hql;
+        }
+      }
+      dispatch({
+        type: 'cms/getStatistics',
+        payload: {
+          x: ttx,
+          y: tty,
+          z: ttz,
+          beanName,
+          daoClass,
+          xXx: XxX,
+          hql: currentKey && infos[currentKey] ? infos[currentKey].hql : null,
+          querys: JSON.stringify(qqs),
+          groups: JSON.stringify(ggs),
+        },
+        callback: (data) => {
+          this.setState({
+            dataSource: data.dataSource,
+            columns: data.columns,
+            showSearchItem: false,
+          });
+        },
+
+      });
+
+    });
+
+
+  };
+
+  downloadFile(url, params) {
+    this.setState({ exportLoading: true });
+
+    fetch(url, {
+      method: 'POST',
+      body: FormdataWrapper(params),
+    }).then(res => {
+      if (res.status != '200') {
+        return res.json();
+      } else {
+        return res.blob();
+      }
+    }).then(data => {
+
+      if (data instanceof Blob) {
+        let a = document.createElement('a');
+        let url = window.URL.createObjectURL(data);
+        let filename = (this.props.fileName ? this.props.fileName : '统计文件') + '.xlsx';
+        a.href = url;
+        a.download = filename;
+        a.click();
+        window.URL.revokeObjectURL(url);
+        this.getPage({ pageNo: 1, pageSize: 10 });
+        a = null;
+      } else {
+        controlNotification({
+          message: `文件导出错误`,
+          description: data.errMsg,
+        });
+      }
+
+    }).catch(err => {
+      controlNotification({
+        message: `网络请求超时`,
+      });
+    }).finally(() => {
+      this.setState({ exportLoading: false });
+    });
+  }
+
+  export = () => {
+    const { dispatch, beanName, daoClass } = this.props;
+    const { x, y, z, infos, XxX, currentKey, groups } = this.state;
+
+    if (x == null) {
+      message.info('请选择第一统计项');
+      return;
+    }
+    if (y == null) {
+      message.info('请选择行数据');
+      return;
+    }
+    this.props.form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      const qqs = this.props.mustQuerys || [];
+      const ggs = [];
+      for (var key in fieldsValue) {
+        var xx = key.indexOf('__');
+
+        let kk = key.substr(xx + 2);
+
+        qqs.push({
+          notes: this.state.infos[kk].notes,
+          hql: this.state.infos[kk].hql,
+          c: this.state.infos[kk].type,
+          x: fieldsValue[key].stringX,
+          v: fieldsValue[key].string,
+        });
+
+
+      }
+
+      if (groups.length === 0) {
+        message.info('请至少选择一个聚合条件');
+        return;
+      }
+
+      for (var i = 0; i < groups.length; i++) {
+        ggs.push({ hql: groups[i].hql });
+      }
+      const tx = infos[x];
+      const ty = infos[y];
+
+      var ttx;
+      var tty;
+      var ttz;
+      if (tx.notes) {
+        if (tx.notes.indexOf('com.') == -1) {
+          ttx = infos[x].hql.replace('.id', '.dictName');
+        } else {
+          ttx = infos[x].hql;
+        }
+      } else {
+        ttx = infos[x].hql;
+      }
+      if (ty.notes) {
+        if (ty.notes.indexOf('com.') == -1) {
+          tty = infos[y].hql.replace('.id', '.dictName');
+        } else {
+          tty = infos[y].hql;
+        }
+      } else {
+        tty = infos[y].hql;
+      }
+      if (z != null) {
+        const tz = infos[z];
+        if (tz && tz.notes) {
+          if (tz.notes.indexOf('com.') == -1) {
+            ttz = infos[z].hql.replace('.id', '.dictName');
+          } else {
+            ttz = infos[z].hql;
+          }
+        } else {
+          ttz = infos[z].hql;
+        }
+      }
+      const param = {
+        x: ttx,
+        y: tty,
+        z: ttz,
+        beanName,
+        daoClass,
+        xXx: XxX,
+        keyword: this.props.keyword ? this.props.keyword : this.props.modelClass,
+        hql: currentKey && infos[currentKey] ? infos[currentKey].hql : null,
+        querys: JSON.stringify(qqs),
+        groups: JSON.stringify(ggs),
+
+      };
+      let downloadUrl = config.httpServer + '/CmsApi/exportStatistics?';
+      const token = getToken() != null && getToken() != 'null' ? getToken() : '0000';
+      downloadUrl = `${downloadUrl}token=${token}`;
+      this.downloadFile(downloadUrl, param);
+    });
+
+
+  };
+  cancelGroup = () => {
+    this.setState({ currentGroupKey: null, groupVisiable: false });
+  };
+  cancelQuery = () => {
+    this.setState({ currentQueryKey: null, queryVisiable: false });
+  };
+  cancelOrder = () => {
+    this.setState({ currentOrderKey: null, orderVisiable: false });
+  };
+  selectOrder = (e) => {
+
+    this.setState({ currentOrderKey: e });
+  };
+  selectQuery = (e) => {
+
+    this.setState({ currentQueryKey: e, flag: !this.state.flag });
+  };
+  selectGroup = (e) => {
+
+    this.setState({ currentGroupKey: e, flag: !this.state.flag });
+  };
+
+  changeX = (x) => {
+    this.setState({
+      x,
+      flag: !this.state.flag,
+
+    });
+  };
+  changeY = (y) => {
+    this.setState({
+      y,
+      flag: !this.state.flag,
+    }, () => {
+      this.finish();
+    });
+
+  };
+  changeZ = (z) => {
+    this.setState({ z, flag: !this.state.flag });
+  };
+  cancelZ = () => {
+    this.setState({ z: null, flag: !this.state.flag });
+  };
+  selectXxX = (XxX) => {
+    this.setState({ XxX, flag: !this.state.flag });
+  };
+  selectCurrentKey = (currentKey) => {
+    this.setState({ currentKey, XxX: null, flag: !this.state.flag });
+  };
+  cancelCurrentKey = () => {
+    this.setState({ currentKey: null, XxX: null, flag: !this.state.flag });
+  };
+
+
+  pageConfig = (item = 0) => {
+    const {
+      visiable, queryVisiable, querys, groups, currentKey, XxX,
+      infos, mockData, mockXZData, columns, dataSource, qs, os, gs, x, y, z, currentQueryKey, currentGroupKey, groupVisiable,
+    } = this.state;
+    let xxxs = [];
+    if (currentKey != null) {
+      if (infos[currentKey].type == 'java.lang.Integer' || infos[currentKey].type == 'java.lang.Double' || infos[currentKey].type == 'java.lang.Long') {
+        xxxs = [{ label: '数量', value: 'count' }, { label: '最大值', value: 'max' }, {
+          label: '最小值',
+          value: 'min',
+        }, { label: '平均值', value: 'avg' }, { label: '求和', value: 'sum' }];
+      } else {
+        xxxs = [{ label: '数量', value: 'count' }];
+      }
+    }
+
+    let optionQs = [];
+
+    for (let item of qs) {
+      let add = true;
+      for (let i = 0; i < querys.length; i++) {
+        if (querys[i].field === item.field) {
+          add = false;
+          break;
+        }
+      }
+      if (add) {
+        optionQs.push(item);
+      }
+    }
+
+    let optionGs = [];
+
+    for (let item of gs) {
+      let add = true;
+      for (let i = 0; i < groups.length; i++) {
+        if (groups[i].field === item.field) {
+          add = false;
+          break;
+        }
+      }
+      if (add) {
+        optionGs.push(item);
+      }
+    }
+
+    const config = [
+      {
+        required: true,
+        selectConfig: [
+          {
+            name: '横轴',
+            value: x,
+            onChange: this.changeX,
+            options: mockXZData,
+            optionKey: 'key',
+            optionName: 'title',
+          },
+        ],
+      },
+      {
+        required: false,
+        selectConfig: [
+          {
+            name: '第二横轴',
+            value: z,
+            onChange: this.changeZ,
+            options: mockXZData,
+            optionKey: 'key',
+            optionName: 'title',
+          },
+        ],
+        buttonConfig: [
+          {
+            name: '取消',
+            handleClick: this.cancelZ,
+            className: 'defaultRed',
+            key: 'cancel',
+          },
+        ],
+      },
+      {
+        required: true,
+        selectConfig: [
+          {
+            name: '纵轴',
+            value: y,
+            onChange: this.changeY,
+            options: mockXZData,
+            optionKey: 'key',
+            optionName: 'title',
+          },
+        ],
+      },
+      {
+        required: false,
+        selectConfig: [
+          {
+            name: '统计指标',
+            value: currentKey,
+            onChange: this.selectCurrentKey,
+            options: mockXZData,
+            optionKey: 'key',
+            optionName: 'title',
+          },
+          {
+            name: '',
+            value: XxX,
+            onChange: this.selectXxX,
+            options: xxxs,
+            optionKey: 'value',
+            optionName: 'label',
+          },
+        ],
+        buttonConfig: [
+          {
+            name: '取消',
+            handleClick: this.cancelCurrentKey,
+            className: 'defaultRed',
+            key: 'cancel',
+          },
+        ],
+
+      },
+      {
+        required: false,
+        selectConfig: [
+          {
+            name: '查询条件',
+            value: currentQueryKey,
+            onChange: this.selectQuery,
+            options: optionQs,
+            optionKey: 'field',
+            optionName: 'name',
+          },
+        ],
+        buttonConfig: [
+          {
+            name: '确定',
+            handleClick: this.okQuery,
+            className: 'defaultBlue',
+            key: 'confirm',
+          },
+          {
+            name: '取消',
+            handleClick: this.cancelQuery,
+            className: 'defaultRed',
+            key: 'cancel',
+          },
+        ],
+      },
+      {
+        required: false,
+        selectConfig: [
+          {
+            name: '聚合条件',
+            value: currentGroupKey,
+            onChange: this.selectGroup,
+            options: optionGs,
+            optionKey: 'field',
+            optionName: 'name',
+          },
+        ],
+        buttonConfig: [
+          {
+            name: '确定',
+            handleClick: this.okGroup,
+            className: 'defaultBlue',
+            key: 'confirm',
+          },
+          {
+            name: '取消',
+            handleClick: this.cancelGroup,
+            className: 'defaultRed',
+            key: 'cancel',
+          },
+        ],
+      },
+    ];
+    return config[item];
+  };
+
+  selectDom = (item) => {
+    const config = this.pageConfig(item);
+
+    return (
+      <Row>
+        {
+          config.selectConfig.map((selectConfigItem, dataIndex) => {
+            const nameSpanThis = dataIndex > 0 ? nameSpan2 : nameSpan;
+            return (
+              <Col span={5}
+                   style={{ paddingLeft: '15px' }}
+                   key={dataIndex}>
+                <FormItem label={selectConfigItem.name}
+                          required={config.required || false}
+                          colon={false}
+                          labelCol={{
+                            xl: nameSpanThis.small,
+                            xxl: nameSpanThis.big,
+                          }}
+                          wrapperCol={{
+                            xl: 24 - nameSpanThis.small,
+                            xxl: 24 - nameSpanThis.big,
+                          }}
+                >
+                  <Select style={{ width: '100%' }}
+                          onChange={selectConfigItem.onChange}
+                          value={selectConfigItem.value}>
+                    {selectConfigItem.options.map((r) => {
+                      return <Option key={r[selectConfigItem.optionKey]}
+                                     value={r[selectConfigItem.optionKey]}
+                      >{r[selectConfigItem.optionName]}
+                      </Option>;
+                    })}
+                  </Select>
+                </FormItem>
+              </Col>);
+          })}
+        {typeof config.buttonConfig !== 'undefined' && config.buttonConfig.length ?
+          config.buttonConfig.map((buttonDs) => {
+              return (
+                <Col span={2}
+                     key={buttonDs.key}
+                     style={{ paddingLeft: '15px' }}>
+                  <FormItem colon={false}
+                            labelCol={{
+                              xl: nameSpan.small,
+                              xxl: nameSpan.big,
+                            }}
+                            wrapperCol={{
+                              xl: 24 - nameSpan.small,
+                              xxl: 24 - nameSpan.big,
+                            }}
+                  >
+                    <ButtonDiy name={buttonDs.name}
+                               type='default'
+                               type={buttonDs.name === '确定' ? 'primary' : 'default'}
+                               className={buttonDs.className}
+                               handleClick={buttonDs.handleClick}/>
+                  </FormItem>
+                </Col>
+              );
+            },
+          )
+          : null}
+      </Row>
+    );
+
+  };
+
+
+  render() {
+    const { form, loading, isShow } = this.props;
+
+    const {
+      querys, groups, currentKey, exportLoading,
+      infos, columns, dataSource, x, y, z,
+      showHistory, showSearchItem,
+    } = this.state;
+    const loadingxxx = loading || exportLoading;
+    let columnsTemp = columns;
+    if (columnsTemp.length > 0) {
+      if (z == null) {
+        columnsTemp[0].title = <div className={styles.out2} style={{ fontSize: 14 }}>
+          <span className={styles.title1}>{infos[x] ? infos[x].name : ''}</span> <span
+          className={styles.title3}>{infos[y] ? infos[y].name : ''}</span>
+        </div>;
+        columnsTemp[0].width = 200;
+      } else {
+        columnsTemp[0].title = <div className={styles.out} style={{ fontSize: 14 }}>
+          <span className={styles.title1}>{infos[x] ? infos[x].name : ''}</span> <span
+          className={styles.title2}>{infos[z] ? infos[z].name : ''}</span> <span
+          className={styles.title3}>{infos[y] ? infos[y].name : ''}</span>
+        </div>;
+        columnsTemp[0].width = 200;
+      }
+    }
+    let xxxs = [];
+    if (currentKey != null) {
+      if (infos[currentKey].type === 'java.lang.Integer' ||
+        infos[currentKey].type === 'java.lang.Double' ||
+        infos[currentKey].type === 'java.lang.Long') {
+        xxxs = [{ label: '数量', value: 'count' }, { label: '最大值', value: 'max' }, {
+          label: '最小值',
+          value: 'min',
+        }, { label: '平均值', value: 'avg' }, { label: '求和', value: 'sum' }];
+      } else {
+        xxxs = [{ label: '数量', value: 'count' }];
+      }
+    }
+    if (!isShow) {
+      return <span><ButtonDiy name='自定义统计'
+                              type='default'
+                              className='defaultBlue'
+                              handleClick={() => this.props.setShow(true)}/></span>;
+    }
+    return (
+      <div style={{
+        backgroundColor: '#fff',
+        padding: '20px',
+      }}>
+        {/* 暂时屏蔽 */}
+        <ButtonDiy name='返回'
+                   type='default'
+                   className='defaultBlue'
+                   handleClick={() => this.props.setShow(false)}
+        />
+        <div id='downloadDiv'
+             style={{ display: 'none' }}>
+        </div>
+        <Alert
+          style={{ marginTop: 10, marginBottom: 10 }}
+          message="如出现超时情况，表明数据量过大，可在等候一段时间后在下方我的历史导出列表中下载"
+          type="warning"/>
+        <Row>
+          <Col span={24}>
+            {
+              showSearchItem ?
+                <Fragment>
+
+                  {this.selectDom(0)}
+                  {this.selectDom(1)}
+                  {this.selectDom(2)}
+                  {this.selectDom(3)}
+                  {this.selectDom(4)}
+                  <div style={{ textAlign: 'left', paddingLeft: '25px' }}>
+                    {querys.map((r, i) =>
+                      <FormItem key={r.field}
+                                labelCol={{
+                                  xl: nameSpan3.small,
+                                  xxl: nameSpan3.big,
+                                }}
+                                wrapperCol={{
+                                  xl: 24 - nameSpan3.small,
+                                  xxl: 24 - nameSpan3.big,
+                                }}
+                                label={r.name}>
+                        {form.getFieldDecorator(i + 'q__' + r.field, {
+                          initialValue: { stringX: '=' }, rules: [{
+                            validator: (rule, value, callback) => {
+                              var errors = [];
+                              if (value == null) {
+                                errors.push(new Error('请输入查询值!', rule.field));
+                              } else {
+                                if (value.stringX !== 'IS NOT NULL' && value.stringX !== 'IS NULL' && value.string == null) {
+                                  errors.push(new Error('请输入查询值!', rule.field));
+                                }
+                              }
+                              callback(errors);
+                            },
+                          }],
+                        })(<QueryItem obj={r}
+                                      deleteQuery={this.deleteQuery.bind(this, i)}/>)}
+                      </FormItem>)}
+                  </div>
+                  {this.selectDom(5)}
+                  <Row style={{
+                    textAlign: 'left',
+                    paddingLeft: '80px',
+                    paddingTop: '8px',
+                  }}>
+
+                    {groups.map((r, i) =>
+                      <Tag closable={true}
+                           key={i + r.field}
+                           onChange={this.deleteGroup.bind(this, i)}>
+                        {'按' + r.name + '聚合'}
+                      </Tag>,
+                    )}
+                  </Row>
+                </Fragment>
+                : null
+            }
+            <Row style={{ paddingTop: '20px' }}>
+              <Col span={24} style={{ textAlign: 'left' }}>
+                <ButtonDiy handleClick={this.finish}
+                           name={'开始统计'}
+                           type={'primary'}
+                           loading={loadingxxx}/>
+                <ButtonDiy handleClick={() => {
+                  this.setState({ showSearchItem: !showSearchItem });
+                }}
+                           name={showSearchItem ? '隐藏搜索条件' : '显示统计条件'}
+                />
+                {dataSource.length > 0 ? <ButtonDiy handleClick={this.export}
+                                                    name={'导出结果'}
+                                                    className='defaultBlue'
+                                                    loading={loadingxxx}/> : ''}
+
+              </Col>
+              {dataSource.length > 0 ? <Col span={24}>
+                <Table size="small" style={{ marginTop: 10 }}
+                       bordered
+                       style={{ scrollX: 'auto', maxWidth: '100%' }}
+                       dataSource={dataSource}
+                       rowKey={'col0'}
+                       pagination={{
+                         defaultPageSize: 30,
+                       }}
+                       scroll={{ x: 'max-content' /*y: 'max-content'*/ }}
+                       columns={columnsTemp}/>
+
+              </Col> : ''}
+            </Row>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <h1>我的历史统计
+              <a onClick={() => {
+                this.setState({ showHistory: !showHistory });
+              }}>
+                {showHistory ? '隐藏' : '显示'}
+              </a>
+            </h1>
+            {
+              showHistory ?
+                <Fragment>
+                  <div style={{ textAlign: 'left', marginBottom: 5, marginTop: 5 }}>
+                    <Button type="primary"
+                            size="small"
+                            onClick={this.getPage.bind(this, {
+                              pageNo: 1,
+                              pageSize: 10,
+                            }, this.state.formValues)}>刷新列表</Button>
+                  </div>
+                  <Table
+                    size="small"
+                    rowKey="id"
+                    columns={this.columns}
+                    dataSource={this.state.hisData.list}
+                    pagination={{ ...this.state.hisData.pagination, onChange: this.changeHisPage }}/>
+                </Fragment>
+                : null}
+          </Col>
+        </Row>
+
+      </div>
+    );
+  }
+}