import React, { useState, useEffect } from 'react'; import { Tabs, Card, Form, Row, Col, Select, DatePicker, Table, Divider, Input, TreeSelect, Spin } from 'antd'; import { DownloadOutlined, 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 Tables from './Tables'; import DepartTree from './DepartTree'; import { FeeEchartData } from './eChartData' const { TabPane } = Tabs; const { RangePicker } = DatePicker; const { Search } = Input; const { Option } = Select; let number = 1; const RepaireFeeSta = (props) => { const { dispatch, feeLoading, deviceType, repaireType, systemData, user: { userTree }, statistical: { devicesList, repaireTaskFeeStaList }, } = props const [option, setOption] = useState({}) const [form] = Form.useForm(); const formItemLayout = { wrapperCol: { span: 16 }, }; const getListItem = (payload = {}) => { payload.planBusinessType = 'repair_task' dispatchHandle( dispatch, 'statistical/operation_service_statistics_repairTaskCostStatistics_post', payload, res => { setOption(FeeEchartData(res || [], ['维修费用'])) } ) } /** * @页面初始化 */ useEffect(() => { // 初始化值 getListItem() }, []) 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) number += 1 } const tableExport = ( <ExportFile name="导出记录" url="/device-service/status-record/export"> <a style={{ marginRight: '40px' }}><DownloadOutlined /> 导出记录</a> </ExportFile> ); const detailAction = (statisticalTime) => { const taskType = form.getFieldValue('taskType') || ''; const equipmentId = form.getFieldValue('equipmentId') || ''; history.push(`/ops/maintenance/order?statisticalTime=${statisticalTime}&taskType=${taskType}&equipmentId=${equipmentId}`) } const columnsFee = [ { title: '时间', dataIndex: 'yearsMonth', render: val => <span>{moment(val).format('YYYY-MM')}</span> }, { title: '维修费用(元)', dataIndex: 'cost' }, { title: '操作', dataIndex: 'action', render: (text, record) => <a onClick={() => detailAction(record?.yearsMonth)}>查看详情</a> }, ] return <> <div style={{ margin: '15px 0' }}> <Form form={form} onValuesChange={onValuesChange}> <Row> <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"> { devicesList && 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"> { repaireType && repaireType?.length > 0 && repaireType.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> </Row> </Form> <Divider style={{ marginTop: '0' }} /> <Spin spinning={feeLoading || false}> <Echarts keyIndex={number} option={option} /> </Spin> </div> <div > <Tabs // tabBarExtraContent={tableExport} > <TabPane tab={<span><TableOutlined style={{ marginRight: 5 }} />表格</span>} key='11' > <Table loading={feeLoading || false} columns={columnsFee} dataSource={repaireTaskFeeStaList || []} 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, feeLoading: loading.effects['statistical/operation_service_statistics_repairTaskCostStatistics_post'], }))(RepaireFeeSta);