Browse Source

帮忙写一些简单的组件

xiaoct 7 years ago
parent
commit
8db0b34928

+ 39 - 0
app/common/navigator.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {Affix, Menu, Icon} from 'antd'
+
+class Navigator extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            current: 'datasource'
+        }
+    };
+
+    render() {
+        return <div className='header'>
+        <Affix offsetTop={this.state.top_affix}>
+            <Menu
+              selectedKeys={[this.state.current]}
+              mode="horizontal"
+            >            
+                <Menu.Item key="datasource">
+                    <Icon type="database" />数据源
+                </Menu.Item>
+                <Menu.Item key="charts">
+                    <Icon type="area-chart" />图表
+                </Menu.Item>
+                <Menu.Item key="dashboards">
+                    <Icon type="desktop" />看板与报告
+                </Menu.Item>
+                <Menu.Item key="modeling">
+                    <Icon type="tool" />建模分析
+                </Menu.Item>
+            </Menu>
+        </Affix>
+        </div>
+    }
+}
+
+export default Navigator
+
+

+ 32 - 0
app/component/dashboard/dashboard.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Tabs } from 'antd'
+
+const { TabPane } = Tabs
+
+class DashboardView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    };
+    render() {
+        return (      
+            <Tabs defaultActiveKey="1">
+                <TabPane tab="我的看板" key="1" >
+                    {/* 我的看板VIEW */}
+                </TabPane>
+                <TabPane tab="我的报表" key="2" >
+                    {/* 我的报表View */}
+                </TabPane>
+                <TabPane tab="最近打开" key="3" >
+                    {/* 最近打开View */}
+                </TabPane>             
+            </Tabs>
+        )
+
+
+    }
+}
+
+export default DashboardView

+ 32 - 0
app/component/datasource/datasource.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Tabs } from 'antd'
+
+const { TabPane } = Tabs
+
+class DatasourceView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    };
+    render() {
+        return (      
+            <Tabs defaultActiveKey="1">
+                <TabPane tab="数据接口" key="1" >
+                    {/* 数据接口VIEW */}
+                </TabPane>
+                <TabPane tab="CSV/XLS表格" key="2" >
+                    {/* CSV/XLS组件 */}
+                </TabPane>
+                <TabPane tab="剪切板粘贴" key="3" >
+                    {/* 剪切板组件 */}
+                </TabPane>             
+            </Tabs>
+        )
+
+
+    }
+}
+
+export default DatasourceView

+ 47 - 0
app/component/welcome/fav.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Table } from 'antd';
+
+class FavView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        const columns = [{
+            title: '名称',
+            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 FavView;

+ 47 - 0
app/component/welcome/table.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Table } from 'antd';
+
+class TableView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        const columns = [{
+            title: '名称',
+            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 TableView;

+ 33 - 0
app/component/welcome/welcome.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Tabs } from 'antd'
+import TableView from './table'
+import FavView from './fav'
+const { TabPane } = Tabs
+
+class WelcomeView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    };
+    render() {
+        return (      
+            <Tabs defaultActiveKey="1">
+                <TabPane tab="报告与看板" key="1" >
+                    <TableView />
+                </TabPane>
+                <TabPane tab="最近打开" key="2" >
+                    <TableView />
+                </TabPane>
+                <TabPane tab="收藏夹" key="3" >
+                    <FavView />
+                </TabPane>             
+            </Tabs>
+        )
+
+
+    }
+}
+
+export default WelcomeView