ConserveTaskSta.jsx

import React, { useState, useEffect } from 'react';
import { Tabs, Form, Row, Col, Select, Button, Divider, Input, TreeSelect, Spin, Table } from 'antd';
import {
    LineChartOutlined,
    DownloadOutlined,
    PieChartOutlined,
    BarChartOutlined,
    TableOutlined
} from '@ant-design/icons';
import { connect, history } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import moment from 'moment';
import ExportFile from '@/components/Custom/ExportFile';
import CustormRangePicker from '@/components/CustormRangePicker';

import Echarts from "./Echarts";
import style from '../index.less';
import DepartTree from './DepartTree';
import { taskEChartData, pieEChartData } from './eChartData'

const { TabPane } = Tabs;
const { Option } = Select;
let number = 1;

const ConserveTaskSta = (props) => {
    const {
        dispatch,
        lineLoading,
        pieLoading,
        deviceType,
        maintainType,
        systemData,
        user: { userTree },
        statistical: {
            devicesList,
            repaireTaskStaList,
            repaireTaskStaPieList
        },
    } = props
    const list = [<LineChartOutlined />, <BarChartOutlined />, <PieChartOutlined />]

    const [currentIndex, setCurrentIndex] = useState(0);
    const [option, setOption] = useState({})
    const [selectDeviceName, setSelectDeviceName] = useState('')
    const [form] = Form.useForm();
    const formItemLayout = {
        wrapperCol: { span: 16 },
    };
    const getListItem = (payload = {}) => {
        payload.planBusinessType = 'curing';
        dispatchHandle(
            dispatch,
            'statistical/operation_service_statistics_brokenTaskStatistics_post',
            payload,
            res => {
                setOption(taskEChartData(res || [], 0))
            }
        )
    }
    const getListItems = (payload = {}) => {
        payload.planBusinessType = 'curing';
        dispatchHandle(
            dispatch,
            'statistical/operation_service_statistics_cakeTaskStatistics_post',
            payload,
            res => {
                setOption(pieEChartData(res || [], 0))
            }
        )
    }
    /**
     * @页面初始化
     */
    useEffect(() => {
        getListItem()
        getListItems()
    }, [])

    const echartsExchange = (index) => () => {
        setCurrentIndex(index)
        number += 1
        if (index === 0) {
            setOption(taskEChartData(repaireTaskStaList || [], 0))
        } else if (index === 1) {
            setOption(taskEChartData(repaireTaskStaList || [], 1))
        } else if (index === 2) {
            setOption(pieEChartData(repaireTaskStaPieList || [], 2))
        }
    }

    const selectDevice = (value, option) => {
        setSelectDeviceName(option?.children || '')
    }
    const tableExport = (
        <ExportFile name="导出记录" url="/device-service/status-record/export">
            <a style={{ marginRight: '40px' }}><DownloadOutlined /> 导出记录</a>
        </ExportFile>
    );

    const onValuesChange = (changedValues, allValues) => {
        const { date } = allValues
        const payload = {
            ...allValues,
            startMonth: (date && date.length > 0) ? moment(date[0]).format("YYYY-MM") : moment().startOf('year').format("YYYY-MM"),
            endMonth: (date && date.length > 0) ? moment(date[1]).format("YYYY-MM") : moment().endOf('year').format("YYYY-MM"),
        }
        delete payload.date
        getListItem(payload)
        getListItems(payload)
    }
    const detailAction = (statisticalTime) => {
        const taskType = form.getFieldValue('taskType') || '';
        const equipmentId = form.getFieldValue('equipmentId') || '';
        history.push(`/ops/mainmanage/maintask?statisticalTime=${statisticalTime}&taskType=${taskType}&equipmentId=${equipmentId}`)
    }
    const columns = [
        {
            title: '时间', dataIndex: 'yearsMonth'
        },
        {
            title: '任务完成率', dataIndex: 'completionRate',
            render: text => `${text}%`
        },
        { title: '任务总数（个）', dataIndex: 'total' },
        { title: '完成任务数（个）', dataIndex: 'complete' },
        { title: '异常任务数（个）', dataIndex: 'abnormal' },
        {
            title: '操作', dataIndex: 'action',
            render: (text, record) => <a onClick={() => detailAction(record?.yearsMonth)}>查看详情</a>
        },
    ]
    return <>
        <div style={{ margin: '24px 0' }}>
            <Form form={form} onValuesChange={onValuesChange}>
                <Row justify="space-between">
                    <Col span={6}>
                        <Form.Item name='departmentId' label='部门' {...formItemLayout}>
                            <DepartTree treeData={userTree} />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='equipmentSystem' label='设备系统' {...formItemLayout}>
                            <TreeSelect
                                allowClear
                                placeholder="请选择"
                                treeData={systemData}
                                showSearch
                                treeNodeFilterProp="title"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='equipmentType' label='设备类型' {...formItemLayout}>
                            <TreeSelect
                                allowClear
                                placeholder="请选择"
                                treeData={deviceType}
                                showSearch
                                treeNodeFilterProp="title"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='equipmentId' label='选择设备' {...formItemLayout}>
                            <Select placeholder="请选择" allowClear showSearch optionFilterProp="children" onChange={selectDevice}>
                                {
                                    devicesList.length > 0 &&
                                    devicesList.map(i => <Option value={i.id} key={i.id}>{i.name}</Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='taskType' label='养护类型' {...formItemLayout}>
                            <Select placeholder="请选择" allowClear showSearch optionFilterProp="children">
                                {
                                    maintainType && maintainType.length > 0 &&
                                    maintainType.map(i => <Option value={i.value} key={i.value}>{i.title}</Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item name='date' label='选择日期' {...formItemLayout}>
                            <CustormRangePicker style={{ width: '100%' }} picker="month" allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={12} style={{ textAlign: 'end', marginBottom: 24 }} className={style.kpitabs}>
                        {/* 图表切换按钮 */}
                        <div className={style.lineimg}>
                            {
                                list.map((item, index) => {
                                    return <Button key={index} className={currentIndex === index ? "active" : ''} icon={item} size="small" onClick={echartsExchange(index)} />
                                })
                            }
                        </div>
                    </Col>
                </Row>
            </Form>
            <Divider style={{ marginTop: '0' }} />
            <div>
                <span style={{ padding: '38%', color: '#999999' }}>{selectDeviceName ? `${selectDeviceName}运行记录` : ''}</span>
            </div>
            <Spin spinning={lineLoading || pieLoading || false}>
                <Echarts keyIndex={currentIndex} option={option} key={number} />
            </Spin>
        </div>
        <div >
            <Tabs
            // tabBarExtraContent={tableExport}
            >
                <TabPane tab={<span><TableOutlined style={{ marginRight: 5 }} />表格</span>} key='11' >
                    <Table
                        loading={lineLoading || false}
                        columns={columns}
                        dataSource={repaireTaskStaList || []}
                        rowKey={record => record.yearsMonth}
                        scroll={{
                            x: 1300,
                        }}
                        bordered={true}
                        pagination={{
                            defaultCurrent: 1,
                        }}
                        style={{ marginTop: '5px' }}
                    />
                </TabPane>
            </Tabs>
        </div>
    </>
}

export default connect(({ statistical, loading, dict, user }) => ({
    statistical, dict, user,
    lineLoading: loading.effects['statistical/operation_service_statistics_brokenTaskStatistics_post'],
    pieLoading: loading.effects['statistical/operation_service_statistics_cakeTaskStatistics_post'],
}))(ConserveTaskSta);