Browse Source

调节"我的"和"报告与看板"界面结构

xiaoct 7 years ago
parent
commit
18cac3e56e

+ 2 - 2
app/components/common/navigator.jsx

@@ -21,7 +21,7 @@ class Navigator extends React.Component {
             mode="horizontal"
         >     
             <Menu.Item key="home">
-                <Link to='/home'><Icon type="home" />主页</Link>
+                <Link to='/home'><Icon type="home" />我的</Link>
             </Menu.Item>
             <Menu.Item key="dashboard">
                 <Link to='/dashboard'><Icon type="desktop" />报告与看板</Link>
@@ -33,7 +33,7 @@ class Navigator extends React.Component {
                 <Link to='/datasource'><Icon type="database" />数据源</Link>
             </Menu.Item>
             <Menu.Item key="modeling">
-                <Icon type="modeling" />建模分析
+                <Icon type="tool" />建模分析
             </Menu.Item>
         </Menu>
     }

+ 10 - 8
app/components/dashboard/dashboard.jsx

@@ -15,8 +15,12 @@ class Dashboard extends React.Component {
         }
     }
 
-    generateCard() { 
-        const list = this.props.dashboard.myDynamicDashboardList
+    generateCard(listType) { 
+        let listTypeMapper = {
+            "Dynamic": this.props.dashboard.myDynamicDashboardList,
+            "Static": this.props.dashboard.myStaticDashboardList, 
+        }
+        const list = listTypeMapper[listType];
         return list.map(i => {
             return (
                 <Card key={i.dashboardID}
@@ -74,18 +78,16 @@ class Dashboard extends React.Component {
 
             >
                 <TabPane tab="我的看板" key="1" >
-                    <div style={{ display: 'flex', background: '#ECECEC', padding: '30px', flexWrap: 'wrap' }}>
-                        {this.generateCard()}
+                    <div style={{ display: 'flex', justifyContent: 'space-around', background: '#ECECEC', padding: '30px', flexWrap: 'wrap' }}>
+                        {this.generateCard("Dynamic")}
                     </div>
 
 
                 </TabPane>
                 <TabPane tab="我的报告" key="2" >
-                    {/* 我的报表View */}
-                </TabPane>
-                <TabPane tab="最近打开" key="3" >
-                    {/* 最近打开View */}
+                    {/* 我的报表报告 */}
                 </TabPane>
+
             </Tabs>
         )
 

+ 20 - 0
app/components/dashboard/dashboardDetail.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { connect } from 'dva'
+
+class DashboardDetail extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            
+
+        }
+    }
+
+}
+
+function mapStateToProps({present: {dashboard}}) {
+    return { dashboard }
+}
+
+export default connect(mapStateToProps)(DashboardDetail)

+ 2 - 2
app/components/myPage/fav.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table } from 'antd';
 
-class FavView extends React.Component {
+class Fav extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -44,4 +44,4 @@ class FavView extends React.Component {
     }
 }
 
-export default FavView;
+export default Fav;

+ 47 - 0
app/components/myPage/homePage.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Table } from 'antd';
+
+class HomePage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        const columns = [{
+            title: 'HomePage',
+            key: 'c1',
+            dataIndex: 'name'
+        }, {
+            title: '创建人',
+            key: 'c2',
+            dataIndex: 'c2'
+        }, {
+            title: '最近修改时间',
+            key: 'c3',
+            dataIndex: 'c3'
+        }, {
+            title: '操作',
+            key: 'c4',
+            dataIndex: 'c4'
+        }];
+
+        const data = [{
+            key: '1',
+            c1: 'sssss',
+            c2: 'aaaaa'
+        }, {
+            key: '2',
+            c1: '啊啊啊啊',
+            c2: 'aaaadddbb'
+        }]
+
+        return (
+            <Table columns={columns} dataSource={data}/>
+        );
+    }
+}
+
+export default HomePage;

+ 2 - 2
app/components/myPage/table.jsx → app/components/myPage/recent.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table } from 'antd';
 
-class TableView extends React.Component {
+class Recent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -44,4 +44,4 @@ class TableView extends React.Component {
     }
 }
 
-export default TableView;
+export default Recent;

+ 16 - 11
app/components/myPage/welcome.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Tabs } from 'antd'
-import TableView from './table'
-import FavView from './fav'
+import Recent from './recent'
+import Fav from './fav'
+import HomePage from './homePage'
 const { TabPane } = Tabs
 
-class WelcomeView extends React.Component {
+class Welcome extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -13,15 +14,19 @@ class WelcomeView extends React.Component {
     };
     render() {
         return (      
-            <Tabs defaultActiveKey="1">
-                <TabPane tab="报告与看板" key="1" >
-                    <TableView />
+            <Tabs 
+                className='dashboard-tabs'
+                type="card"
+                defaultActiveKey="1"
+            >
+                <TabPane tab="主页" key="1" >
+                    <HomePage />
                 </TabPane>
-                <TabPane tab="最近打开" key="2" >
-                    <TableView />
+                <TabPane tab="收藏夹" key="2" >
+                    <Fav />
                 </TabPane>
-                <TabPane tab="收藏夹" key="3" >
-                    <FavView />
+                <TabPane tab="最近打开" key="3" >
+                    <Recent />
                 </TabPane>             
             </Tabs>
         )
@@ -30,4 +35,4 @@ class WelcomeView extends React.Component {
     }
 }
 
-export default WelcomeView
+export default Welcome

+ 12 - 9
app/models/dashboard.js

@@ -15,7 +15,8 @@ export default {
             description: 'Description 1',
             coverImg:'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
             coverAlt: '',
-            avatar: ''
+            avatar: '',
+            dashboardConfig: {}
             
     
         },{
@@ -26,7 +27,8 @@ export default {
             description: 'Description 1',
             coverImg:'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
             coverAlt: '',
-            avatar:{}
+            avatar:{},
+            dashboardConfig: {}
     
         },{
             dashboardID: 3,
@@ -36,7 +38,8 @@ export default {
             description: 'Description 1',
             coverImg:'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
             coverAlt: '',
-            avatar:{}
+            avatar:{},
+            dashboardConfig: {}
         }
     
         ],
@@ -48,7 +51,8 @@ export default {
             description: 'Description 1',
             coverImg:'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
             coverAlt: '',
-            avatar:{}
+            avatar:{},
+            dashboardConfig: {}
         },{
             dashboardID: 5,
             type: 'static',
@@ -57,12 +61,11 @@ export default {
             description: 'Description 1',
             coverImg:'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
             coverAlt: '',
-            avatar:{}
+            avatar:{},
+            dashboardConfig: {}
         }
 
         ],
-        myRecentDashboardList: [            //最近打开的Dashboard
-            
-        ]
-    },
+                    
+    }
 }