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, depUserTree } = props; const [form] = Form.useForm(); const [visible, setVisible] = useState(false); const [modalFilter, setModalFilter] = useState({}); const [current, setCurrent] = useState(null); const chartRef = useRef(null); const columns = [ { title: '部门名称', render: record => showUserModal(record)}>{record.dep_name}, // render: record => setCurrent(record)}>{record.dep_name}, 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 => showDepCompare(item)}>详情, // }, // { // 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, }, }); }; 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 (
); }; 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', }, series: [ { type: 'pie', radius: '70%', data: current, 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: '研发' }, ]; // 过滤为0的值 data = data.filter(item => item.value); setCurrent(data); }; const renderDepSelect = () => { return ( { return option.props.title === input; }} onSelect={(_, node) => { handleChangeCurrent(node); }} loadData={node => onExpand(true, node)} /> ); }; useEffect(() => { // dispatch({ // type: 'report/queryUserReport', // }); dispatch({ type: 'report/fetchDepV2', }); handleSearch(); chartRef.current = echarts.init(document.getElementById('chart')); }, []); useEffect(() => { if (current) { renderChart(); } }, [current]); return (
{renderSearch()}
setCurrent(null)} />} title={renderDepSelect()} style={{ display: 'block', marginLeft: 20 }} > {!current?.length && }
0 ? 'block' : 'none' }} >
{/* setVisible(false)} /> */} setVisible(false)} /> ); } export default connect(({ report, loading }) => ({ dep: report.dep, depUserTree: report.depUserTree, loading: loading.models.report, }))(Department);