platform-bi-web/app/components/chart/list.jsx

import React from 'react'
import { Layout, Tabs, Button, Icon, Input, Menu, Dropdown, Card, Col, Row, Avatar } from 'antd'
import { Link } from 'react-router-dom'
const { Header, Content } = Layout
const { Search } = Input
const { TabPane } = Tabs
const { Meta } = Card
import { connect } from 'dva'
import '../../models/chart'


class ChartList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    generateCard() { 
        const list = this.props.chart.list;
        return list.map(i => {
            return (
                <Card key={i.dashboardID}
                    className='dashboard-card'
                    cover={<img alt={i.coverAlt} src={i.coverImg} />}
                    actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
                >
                    <Meta
                        avatar={<Avatar src={i.avatar} />}
                        title={i.title}
                        description={i.description}
                    />
                </Card>
            )
        })
    }

    render() {
        return (
            <Layout>
                <Header>
                    <div className='toolbar'>
                        <div>
                        </div>
                        <div className='tools'>
                            <Search
                                placeholder="请输入关键字"
                                onSearch={value => console.log(value)}
                            />
                            <Link to='/chart/chartdesigner/create'>
                                <Button>
                                    <Icon type="area-chart" />创建图表
                                </Button>
                            </Link>
                        </div>
                    </div>
                </Header>
                <Content>
                </Content>
            </Layout>
        )

        //     <Tabs
        //         className='dashboard-tabs'
        //         type="card"
        //         defaultActiveKey="1"
        //         tabBarExtraContent={
        //             <div className='dashboard-tabs-tools'>
        //                 <Button onClick={() => {
        //                     dispatch({ type: activeTab == 'dashboard' ? 'databoard/remoteList' : 'dashboard/testData' });
        //                 }}>测试数据</Button>
        //                 <Search
        //                     placeholder="请输入关键字"
        //                     onSearch={value => console.log(value)}
        //                 />
        //                 <Dropdown overlay={(
        //                     <Menu onClick={(item, key, keyPath) => {
        //                         const type = item.key;
        //                         dispatch({ type: 'dashboard/resetNewModel' });
        //                         dispatch({ type: 'dashboard/setNewModelField', name: 'type', value: type });
        //                         dispatch({ type: 'main/redirect', path: { pathname: '/dashboard/' + type + '/create' } });
        //                     }}>
        //                         <Menu.Item key='static'>报告</Menu.Item>
        //                         <Menu.Item key='dynamic'>看板</Menu.Item>
        //                     </Menu>
        //                 )} trigger={['click']}>
        //                     <Button style={{ display: 'inline-block' }}>
        //                         <Icon type="plus" />创建
        //                     </Button>
        //                 </Dropdown>
        //             </div>
        //         }
        //         onChange={(key) => {
        //             this.setState({
        //                 activeTab: key == '1' ? 'static' : 'dynamic'
        //             });
        //         }}

        //     >
        //         <TabPane tab="我的看板" key="1" >
        //             <div style={{ display: 'flex', background: '#ECECEC', padding: '30px', flexWrap: 'wrap' }}>
        //                 {this.generateCard()}
        //             </div>


        //         </TabPane>
        //         <TabPane tab="我的报告" key="2" >
        //             {/* 我的报表View */}
        //         </TabPane>
        //         <TabPane tab="最近打开" key="3" >
        //             {/* 最近打开View */}
        //         </TabPane>
        //     </Tabs>


    }
}


function mapStateToProps({present: {chart}}) {
    return { chart }
}

export default connect(mapStateToProps)(ChartList)