Merge branch 'master' of ssh://10.10.100.21/source/platform-bi-web

src/components/common/CardList.jsx

@@ -4,6 +4,7 @@ import { connect } from 'dva'
 import Ellipsis from 'ant-design-pro/lib/Ellipsis'
 import { dateFormat } from '../../utils/baseUtils'
 import Thumbnail from './thumbnail'
+import './CardList.less'
 const CardGrid = Card.Grid
 
 /**
@@ -60,7 +61,7 @@ class CardList extends React.Component {
         }).sort((a, b) => {
             return new Date(b.createTime) - new Date(a.createTime)
         }).map( (l, i) => (
-            <CardGrid className={(type === 'dashboard')? 'dashboard-card' : 'chart-card'} key={i} onClick={() => {
+            <CardGrid className={(type === 'dashboard')? 'recent-dashboard-card' : 'recent-chart-card'} key={i} onClick={() => {
                 this.setState({ selectedRecord: l })
             }}>
                 <Card

src/components/common/CardList.less

@@ -0,0 +1,146 @@
+.recent-chart-card {
+    width: 207px;
+    text-align: center;
+    margin: 5px;
+    padding: 0;
+
+    .ant-card-head {
+        min-height: 20px;
+        cursor: default;
+        .ant-card-head-title {
+            font-size: 14px;
+            padding: 6px 0;
+            .anticon {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .ant-card-cover {
+        height: 200px;
+        .cover-body {
+            padding: 10px;
+            .thumb {
+                height: 132px;
+                .deny-body {
+                    height: 100%;
+                    width: 100%;
+                    display: flex;
+                    position: absolute;
+                    text-align: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    z-index: 1;
+                    .deny-tip {
+                        height: 40px;
+                        line-height: 40px;
+                        background: rgba(218, 218, 218, 0.5);
+                        border: 2px solid #aaaaaa;
+                        font-weight: bold;
+                    }
+                }
+                cursor: pointer;
+                canvas {
+                    cursor: pointer;
+                }
+                .table-default {
+                    background-image: url(/images/table-default.png);
+                    width: 100%;
+                    height: 100%;
+                    background-position: center;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    cursor: pointer;
+                }
+                .chart-default {
+                    background-image: url(/images/chart-default.png);
+                    width: 100%;
+                    height: 100%;
+                    background-position: center;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    cursor: pointer;
+                    opacity: .3;
+                }
+            }
+            .desc {
+                text-align: left;
+                height: 41px;
+            }
+            .footer {
+                margin-top: 6px;
+            }
+        }
+        .ant-row-flex-bottom {
+            cursor: default;
+            .anticon {
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+.recent-dashboard-card {
+    width: 507px;
+    text-align: center;
+    margin: 5px;
+    padding: 0;
+
+    .ant-card-head {
+        min-height: 20px;
+        cursor: default;
+        .ant-card-head-title {
+            font-size: 14px;
+            padding: 6px 0;
+            .anticon {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .ant-card-cover {
+        height: 247px;
+        .cover-body {
+            padding: 10px;
+            .thumb {
+                height: 182px;
+                cursor: pointer;
+                canvas {
+                    cursor: pointer;
+                }
+                .table-default {
+                    background-image: url(/images/table-default.png);
+                    width: 100%;
+                    height: 100%;
+                    background-position: center;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    cursor: pointer;
+                }
+                .dashboard-default {
+                    background-image: url(/images/dashboard-default.png);
+                    width: 100%;
+                    height: 100%;
+                    background-position: center;
+                    background-size: contain;
+                    background-repeat: no-repeat;
+                    cursor: pointer;
+                    opacity: .3;
+                }
+            }
+            .desc {
+                text-align: left;
+                height: 41px;
+            }
+            .footer {
+                margin-top: 6px;
+            }
+        }
+        .ant-row-flex-bottom {
+            cursor: default;
+            .anticon {
+                cursor: pointer;
+            }
+        }
+    }
+}

src/components/homePage/homePage.jsx

@@ -3,7 +3,6 @@ import { Layout, Card } from 'antd'
 import CardList from '../common/CardList'
 import { connect } from 'dva'
 import Markdown from 'react-markdown'
-import './homePage.less'
 
 const markdown = `
 # 快速上手
@@ -32,17 +31,30 @@ class HomePage extends React.Component {
                 <Content>
                     <Layout>
                         <Content>
-                            <Card>
-                                <Markdown source={markdown}/>
-                            </Card>
-                            <Card>
+                            <Card style={{
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                justifyContent: 'left'
+                            }}
+                                bodyStyle={{
+                                    padding: '10px'
+                                }}
+                            >
                                 <CardList
                                     mode='homepage' 
                                     type='chart' 
                                     list={this.props.main.recentChart}
                                 />
                             </Card>
-                            <Card>
+                            <Card style={{
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                justifyContent: 'left'
+                            }}
+                                bodyStyle={{
+                                    padding: '10px'
+                            }}
+                            >
                                 <CardList
                                     mode='homepage' 
                                     type='dashboard' 
@@ -50,10 +62,10 @@ class HomePage extends React.Component {
                                 />
                             </Card>
                         </Content>
-                        <Sider width={300} style={{display: 'none'}}> 
+                        <Sider width={300}> 
                             {/* TODO: 主页尚未上线，暂时隐藏  */}
                             <Card>
-                                {/* 消息区 */}
+                                <Markdown source={markdown}/>
                             </Card>
                             <Card>
                                 {/* 公告与帮助区 */}

src/components/homePage/homePage.less

@@ -1,11 +0,0 @@
-.dashboard-default {
-    display: block;
-    background-image: url(/images/dashboard-default.png);
-    width: 100%;
-    height: 100%;
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
-    cursor: pointer;
-    opacity: .3;
-}