WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Report/Department.js

import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'dva';
import { Form, Table, DatePicker, Input, Button, Empty, Card, Affix, TreeSelect } from 'antd';
import styles from './report.less';
import UserRptModal from './UserRptModal';
import DepCompareModal from './DepCompareModal';
import moment from 'moment';
import { downloadFile, getToken } from '@/utils/utils.js';
import * as echarts from 'echarts';
import { CloseOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;
const initData = [
  // 上个月第一天
  moment()
    .subtract(1, 'month')
    .startOf('month'),
  // 上个月最后一天
  moment()
    .subtract(1, 'month')
    .endOf('month'),
];

function Department(props) {
  const { dispatch, loading, dep } = props;
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [modalFilter, setModalFilter] = useState({});
  const [current, setCurrent] = useState(null);
  const [currentDep, setCurrentDep] = useState(null);
  const chartRef = useRef(null);
  const columns = [
    {
      title: '部门名称',
      render: record => <a onClick={() => showUserModal(record)}>{record.dep_name}</a>,
      // render: record => <a onClick={() => setCurrent(record)}>{record.dep_name}</a>,
      width: '32%',
    },
    {
      title: '有效利用率',
      dataIndex: 'usage_percent',
      render: percent => (percent * 100).toFixed(2) + '%',
    },
    {
      title: '执行项目人日',
      dataIndex: 'type_project_cnt',
    },
    {
      title: '售前支持',
      dataIndex: 'type_sale_cnt',
    },
    {
      title: '市场品牌',
      dataIndex: 'type_market_cnt',
    },
    {
      title: '日常',
      dataIndex: 'type_normal_cnt',
    },
    {
      title: '标准化',
      dataIndex: 'type_standardize_cnt',
    },
    {
      title: '研发',
      dataIndex: 'type_rd_cnt',
    },
    // {
    //   title: '漏填工时',
    //   dataIndex: 'type_lost_cnt',
    // },
    {
      title: '应填报总工时',
      dataIndex: 'total_cnt',
    },
    // {
    //   title: '操作',
    //   width: 80,
    //   render: item => <a onClick={() => showDepCompare(item)}>详情</a>,
    // },
    // {
    //   title: '付费工时数',
    //   dataIndex: 'pay_workload_cnt',
    // },
    // {
    //   title: '付费工时率',
    //   dataIndex: 'pay_workload_percent',
    //   render: percent => (percent * 100).toFixed(2) + '%',
    // },
  ];
  const filterRef = useRef({ pageSize: 99999 });
  const handleSearch = () => {
    const { time } = form.getFieldsValue();
    filterRef.current.s_time = time[0] ? moment(time[0]).format('YYYY-MM') : null;
    filterRef.current.e_time = time[1] ? moment(time[1]).format('YYYY-MM') : null;

    dispatch({
      type: 'report/queryDepReport',
      payload: {
        filter: filterRef.current,
      },
      callback: list => handleChangeCurrent(list[0]),
    });
  };
  const handleDownload = () => {
    const token = getToken();
    const s_time = !filterRef.current.s_time ? '' : filterRef.current.s_time;
    const e_time = !filterRef.current.e_time ? '' : filterRef.current.e_time;
    downloadFile(
      `/api/v2/workload/rpt/dep/export2excel?JWT-TOKEN=${token}&s_time=${s_time}&e_time=${e_time}`,
      `项目报表${moment().format('YYYYMMDDHHMMSS')}.xlsx`
    );
  };
  const renderSearch = () => {
    return (
      <Form layout="inline" form={form}>
        <Form.Item label="时间" name="time" initialValue={initData}>
          <RangePicker placeholder="选择时间" allowClear={false} picker="month" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" loading={loading} onClick={handleSearch}>
            查询
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const onExpand = (expanded, record) => {
    return new Promise(resolve => {
      if (expanded && !record.isLoad) {
        dispatch({
          type: 'report/queryDepReport',
          payload: {
            filter: filterRef.current,
            record: record,
          },
          callback: resolve,
        });
      } else {
        resolve();
      }
    });
  };
  const showUserModal = item => {
    // const showDepCompare = item => {
    const { s_time, e_time } = filterRef.current;
    setModalFilter({
      s_time: s_time,
      e_time: e_time,
      dep_id: item.dep_id,
    });
    setVisible(true);
  };
  const renderChart = () => {
    current;
    chartRef.current.setOption({
      tooltip: {
        trigger: 'item',
      },
      graphic: {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: `有效利用率\n${
            current.usage_percent ? (current.usage_percent * 100).toFixed(2) : '-'
          }%`,
          textAlign: 'center',
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          data: current.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    });
  };

  const handleChangeCurrent = item => {
    let data = [
      { value: item.type_project_cnt, name: '执行项目人日' },
      { value: item.type_sale_cnt, name: '售前支持' },
      { value: item.type_market_cnt, name: '市场品牌' },
      { value: item.type_normal_cnt, name: '日常' },
      { value: item.type_standardize_cnt, name: '标准化' },
      { value: item.type_rd_cnt, name: '研发' },
    ];
    setCurrentDep(item.dep_id);
    // 过滤为0的值
    data = data.filter(item => item.value);
    if (data.length > 0) {
      data.push({
        value: item.type_lost_cnt,
        name: '漏填工时',
        itemStyle: { color: 'transparent' },
      });
      setCurrent({ data, usage_percent: item.usage_percent });
    } else {
      setCurrent(null);
    }
  };

  const renderDepSelect = () => {
    return (
      <TreeSelect
        showSearch
        allowClear
        placeholder="请选择部门"
        style={{ width: '80%' }}
        multiple={false}
        treeData={dep.list}
        fieldNames={{
          label: 'dep_name',
          value: 'dep_id',
        }}
        filterTreeNode={(input, option) => {
          return option.props.dep_name.includes(input);
        }}
        onSelect={(_, node) => {
          handleChangeCurrent(node);
        }}
        loadData={node => onExpand(true, node)}
        value={currentDep}
      />
    );
  };

  useEffect(() => {
    // dispatch({
    //   type: 'report/queryUserReport',
    // });
    handleSearch();
    chartRef.current = echarts.init(document.getElementById('chart'));
  }, []);

  useEffect(() => {
    if (current) {
      renderChart();
    }
  }, [current]);

  return (
    <div>
      <div className={styles.topPart}>
        {renderSearch()}
        <Button type="primary" onClick={handleDownload}>
          导出
        </Button>
      </div>
      <div style={{ marginTop: 20, display: 'flex' }}>
        <Table
          loading={loading}
          rowKey="dep_id"
          style={{ width: '100%' }}
          columns={columns}
          dataSource={dep.list}
          pagination={false}
          onExpand={onExpand}
        />
        <Affix offsetTop={20}>
          <Card
            // extra={<CloseOutlined onClick={() => setCurrent(null)} />}
            title={renderDepSelect()}
            style={{ display: 'block', marginLeft: 20 }}
          >
            {!current && <Empty style={{ width: 400 }} />}
            <div
              id="chart"
              style={{ width: 400, height: 340, display: current ? 'block' : 'none' }}
            ></div>
          </Card>
        </Affix>
      </div>

      {/* <UserRptModal filter={modalFilter} visible={visible} onCancel={() => setVisible(false)} /> */}
      <DepCompareModal filter={modalFilter} visible={visible} onCancel={() => setVisible(false)} />
    </div>
  );
}

export default connect(({ report, loading }) => ({
  dep: report.dep,
  loading: loading.models.report,
}))(Department);