dashboard/src/views/Credit_card_bill.js

import React, {Component, useContext} from 'react';
import {observer} from 'mobx-react';
import {Row, Col, Button, Tabs, Table} from 'antd';
import {stores_Context} from '../config'
import {useNavigate} from "react-router-dom";
import {
    SlackOutlined,
    SketchOutlined,
    AntCloudOutlined,
    SearchOutlined,
    GithubOutlined
} from '@ant-design/icons';
import BillTypeSelect from '../charts/BillTypeSelect'
import GroupSelect from '../charts/GroupSelect'
import Business_unit from '../charts/Business_unit'
import DatePickerCharts from '../charts/DatePickerCharts'
import {Line} from "@ant-design/charts";
import * as com from '../utils/commons'

const Credit_card_bill = () => {

    const {financial_store} = useContext(stores_Context);
    const {bill_type_data, credit_card_data} = financial_store;
    const data_source = !com.empty(credit_card_data.data) ? credit_card_data.data.billdate1 : [];
    const line_config = {
        data: data_source,
        padding: 'auto',
        xField: 'cb_datetime',
        yField: 'cb_usd',
        seriesField: 'groups',
        xAxis: {
            type: 'timeCat',
        },
        point: {
            size: 4,
            shape: 'cicle',
        },
        label: {},//显示标签
        legend: {
            itemValue: {
                formatter: (text, item) => {
                    const items = data_source.filter((d) => d.groups === item.value);//按站点筛选
                    return items.length ? Math.round(items.reduce((a, b) => a + b.cb_usd, 0)) : '';//计算总数
                },
            },
        },
        // tooltip: {
        //     customContent: (title, items) => {
        //         const data = items[0]?.data || {};
        //         return `<div>${title}</div><div>${data.seriesField} ${data.yField}</div>`;
        //     }
        // },
        smooth: true,
    };

    return (
        <div>
            <Row>
                <Col span={11}>
                    <h2>信用卡账单</h2>
                </Col>
                <Col span={10}>
                    <Row>
                        <Col span={24}><BillTypeSelect store={bill_type_data} show_all={true}/></Col>
                        <Col span={12}>
                            <Business_unit store={credit_card_data} show_all={true}/>
                            <GroupSelect store={credit_card_data} show_all={true}/>
                        </Col>
                        <Col span={12}>
                            <DatePickerCharts/>
                        </Col>
                    </Row>
                </Col>
                <Col span={1}></Col>
                <Col span={2}>
                    <Button type="primary" icon={<SearchOutlined/>} size='large' loading={credit_card_data.loading}
                            onClick={() => {
                                financial_store.get_credit_card_bills();
                            }}>统计</Button>
                </Col>
            </Row>

            <Row>
                <Col span={24}>
                    <Line {...line_config} />
                </Col>
            </Row>
        </div>
    );

}

export default observer(Credit_card_bill);