看板模块保存

app/components/common/navigator.jsx

@@ -20,7 +20,7 @@ class Navigator extends React.Component {
                 <Link to='/home'><Icon type="home" />我的</Link>
             </Menu.Item>
             <Menu.Item key="dashboards">
-                <Icon type="desktop" />看板与报告
+                <Link to='/dashboard'><Icon type="desktop" />看板与报告</Link>
             </Menu.Item>
             <Menu.Item key="charts">
                 <Link to='/chartdesigner'><Icon type="area-chart" />图表</Link>

app/components/dashboard/dashboard.jsx

@@ -1,27 +1,91 @@
 import React from 'react'
-import { Tabs } from 'antd'
-
+import { Tabs, Button, Icon, Input, Menu, Dropdown, Card, Col, Row, Avatar } from 'antd'
+import './dashboard.less'
+import dashboard from '../../models/dashboard'
+import { connect } from 'dva'
+const { Search } = Input
 const { TabPane } = Tabs
+const { Meta } = Card;
+
 
-class DashboardView extends React.Component {
+class Dashboard extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-
         }
-    };
+    }
+
+    generateCard() { 
+        const list = this.props.dashboard.myDashboardList
+        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 (      
-            <Tabs defaultActiveKey="1">
+        return (
+            <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" >
-                    {/* 我的看板VIEW */}
+                    <div style={{ display: 'flex', background: '#ECECEC', padding: '30px', flexWrap: 'wrap' }}>
+                        {this.generateCard()}
+                    </div>
+
+
                 </TabPane>
-                <TabPane tab="我的报表" key="2" >
+                <TabPane tab="我的报告" key="2" >
                     {/* 我的报表View */}
                 </TabPane>
                 <TabPane tab="最近打开" key="3" >
                     {/* 最近打开View */}
-                </TabPane>             
+                </TabPane>
             </Tabs>
         )
 
@@ -29,4 +93,9 @@ class DashboardView extends React.Component {
     }
 }
 
-export default DashboardView
+
+function mapStateToProps({present: {dashboard}}) {
+    return { dashboard }
+}
+
+export default connect(mapStateToProps)(Dashboard)

app/components/dashboard/dashboard.less

@@ -0,0 +1,18 @@
+.dashboard-tabs {
+    .ant-tabs-bar {
+        margin-bottom: 0;
+        .ant-tabs-extra-content {
+            height: 100%;
+            .dashboard-tabs-tools {
+                .ant-input-search {
+                    width: 200px;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+}
+
+.dashboard-card {
+    width: 300px 
+}

app/index.js

@@ -4,6 +4,7 @@ import main from './models/main'
 import chartDesigner from './models/chartDesigner'
 import dataSource from './models/dataSource'
 import dataConnect from './models/dataConnect'
+import dashboard from './models/dashboard'
 import './utils/baseUtils'
 import './index.less'
 
@@ -26,6 +27,7 @@ app.model(main); // 通用action
 app.model(chartDesigner); // 图表
 app.model(dataSource); // 数据源
 app.model(dataConnect); // 数据连接
+app.model(dashboard);
 
 // 4. Router
 app.router(require('./routes/router'));

app/models/dashboard.js

@@ -0,0 +1,41 @@
+import { routerRedux } from 'dva/router'
+import * as service from '../services/index'
+import { delay } from '../utils/baseUtils'
+import URLS from '../constants/url'
+
+export default {
+    namespace: 'dashboard',
+    state: {
+        newOne: {},
+        myDashboardList: [{
+            dashboardID: 1,
+            title: 'Card 1',
+            url: '',
+            description: 'Description 1',
+            coverImg:'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
+            coverAlt: '',
+            avatar: ''
+            
+    
+        },{
+            dashboardID: 2,
+            title: 'Card 2',
+            url: '',
+            description: 'Description 1',
+            coverImg:'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
+            coverAlt: '',
+            avatar:{}
+    
+        },{
+            dashboardID: 3,
+            title: 'Card 1',
+            url: '',
+            description: 'Description 1',
+            coverImg:'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
+            coverAlt: '',
+            avatar:{}
+        }
+    
+        ],
+    },
+}

app/routes/mainLayout.js

@@ -7,6 +7,7 @@ import Welcome from '../components/myPage/welcome'
 import ChartDesigner from '../components/chartDesigner/layout'
 import DataSource from '../components/datasource/dataSource'
 import DataSourceDetail from '../components/datasource/dataSourceDetail'
+import Dashboard from '../components/dashboard/dashboard'
 
 import './mainLayout.less';
 
@@ -20,6 +21,7 @@ const MainLayout = (history) => {
                 <Switch>
                     <Route exact path='/' component={Welcome}/>
                     <Route exact sensitive path='/datasource' component={DataSource}/>
+                    <Route exact sensitive path='/dashboard' component={Dashboard} />
                     <Route sensitive path='/datasource/:type/:code' component={DataSourceDetail}/>
                 </Switch>
             </Content>