系统路由设置/数据源页面初步设计

app/common/navigator.jsx

@@ -1,39 +0,0 @@
-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
-
-

app/components/chartDesigner/charts/echartsView.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import Echarts from 'echarts-for-react';
 import { connect } from 'dva';
 import chartDesigner from '../../../models/chartDesigner';
-import chartOption from '../../../data/charts/option/bar.json';
 import resolveChartOption from './resolveChartOption';
 import { hashcode } from '../../../utils/baseUtils';
 

app/components/chartDesigner/header.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Input, Select, Icon, Button } from 'antd';
 const Option = Select.Option;
+import { Link } from 'react-router-dom'
 import './header.less';
 import { connect } from 'dva';
 import { ActionCreators } from 'redux-undo';
@@ -9,6 +10,11 @@ import chartDesigner from '../../models/chartDesigner';
 const Header = ({ chartDesigner, dispatch }) => {
     return (
         <div className='header'>
+            <div className='header-item toolbar-back'>
+                <Button>
+                    <Link to='/'>返回</Link>
+                </Button>
+            </div>
             <div className='header-item toolbar-title'>
                 <Input
                     className='input-title' 

app/components/chartDesigner/layout.jsx

@@ -10,7 +10,7 @@ import ChartDesignerContent from './content';
 
 class ChartDesignerLayout extends React.Component {
     render() {
-        return <Layout>
+        return <Layout className='chartdesigner-layout'>
             <Header>
                 <ChartDesignerHeader />
             </Header>

app/components/chartDesigner/layout.less

@@ -1,31 +1,37 @@
-html,body,#root{
-    width: 100%;
+.chartdesigner-layout {
     height: 100%;
-}
-.ant-layout {
-    height: 100%;
-}
-.ant-layout-header {
-    background: none;
-    padding: 0 10px;
-    height: 40px;
-    line-height: 40px;
-    border-width: 1px 0;
-    border-style: solid;
-    border-color: #CCCCCC;
-}
-.ant-layout-content {
-    flex: 1;
-}
-.ant-layout-sider {
-    background: none;
-    border-width: 0 1px 0 1px;
-    border-style: solid;
-    border-color: #CCCCCC;
-}
-.ant-tabs {
-}
-.ant-tabs-bar {
-    margin: 0;
+    .ant-layout-header {
+        background: none;
+        padding: 0 10px;
+        height: 40px;
+        line-height: 40px;
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: #CCCCCC;
+    }
+    .ant-layout-content {
+        flex: 1;
+        .ant-layout {
+            height: 100%;
+            .content-header {
+                height: auto;
+                border-top: none;
+            }
+        }
+    }
+    .ant-layout-sider {
+        background: none;
+        border-width: 0 1px 0 1px;
+        border-style: solid;
+        border-color: #CCCCCC;
+        .ant-form-item {
+            margin-bottom: 0;
+        }
+    }
+    .ant-tabs {
+    }
+    .ant-tabs-bar {
+        margin: 0;
+    }
 }
   

app/components/chartDesigner/sections/filterBox.less

@@ -1,3 +1,6 @@
+.ant-form-item {
+  margin-bottom: 0;
+}
 .dynamic-delete-button {
   cursor: pointer;
   position: relative;

app/components/common/navigator.jsx

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

app/components/datasource/dataSource.less

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

app/components/datasource/datasource.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { Tabs } from 'antd'
-
+import { Tabs, Input, Button, Table, Icon, Divider } from 'antd'
 const { TabPane } = Tabs
+const { Search } = Input
+import './dataSource.less'
 
-class DatasourceView extends React.Component {
+class DataSource extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -11,17 +12,62 @@ class DatasourceView extends React.Component {
         }
     };
     render() {
-        return (      
-            <Tabs defaultActiveKey="1">
-                <TabPane tab="数据接口" key="1" >
-                    {/* 数据接口VIEW */}
+        const columns = [{
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name'
+        }, {
+            title: '标签',
+            dataIndex: 'tag',
+            key: 'tag',
+        }, {
+            title: '说明',
+            dataIndex: 'description',
+            key: 'description',
+        }, {
+            title: '创建人',
+            dataIndex: 'creator',
+            key: 'creator'
+        }, {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime'
+        }, {
+            title: '操作',
+            key: 'action',
+            render: (text, record) => (
+                <span>
+                    <a href="javascript:;">Action 一 {record.name}</a>
+                    <Divider type="vertical" />
+                    <a href="javascript:;">Delete</a>
+                    <Divider type="vertical" />
+                    <a href="javascript:;" className="ant-dropdown-link">
+                        More actions <Icon type="down" />
+                    </a>
+                </span>
+            ),
+        }];
+        return (
+            <Tabs
+                className='datasource-tabs'
+                type="card"
+                defaultActiveKey="1"
+                tabBarExtraContent={
+                    <div className='datasource-tabs-tools'>
+                        <Search
+                            placeholder="input search text"
+                            onSearch={value => console.log(value)}
+                        />
+                        <Button><Icon type="plus" />添加数据源</Button>
+                    </div>
+                }
+            >
+                <TabPane tab="公共数据源" key="1" >
+                    <Table columns={columns} dataSource={[]} />
                 </TabPane>
-                <TabPane tab="CSV/XLS表格" key="2" >
+                <TabPane tab="我的数据源" key="2" >
                     {/* CSV/XLS组件 */}
                 </TabPane>
-                <TabPane tab="剪切板粘贴" key="3" >
-                    {/* 剪切板组件 */}
-                </TabPane>             
             </Tabs>
         )
 
@@ -29,4 +75,4 @@ class DatasourceView extends React.Component {
     }
 }
 
-export default DatasourceView
+export default DataSource

app/components/layout.jsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Layout, Menu, Breadcrumb, Icon, Tabs, Collapse } from 'antd';
-const { Header, Content, Sider } = Layout;
-const CollapsePanel = Collapse.Panel;
-const { TabPane } = Tabs;
-const SubMenu = Menu.SubMenu;
-
-class Layout extends React.Component {
-    render() {
-        return <Layout>
-            <Header>
-            </Header>
-            <Content>
-            </Content>
-        </Layout>
-    }
-}
-export default Layout;

app/index.js

@@ -2,6 +2,7 @@ import dva from 'dva';
 import undoable from 'redux-undo';
 import chartDesigner from './models/chartDesigner'
 import './utils/baseUtils';
+import './index.less';
 
 // 1. Initialize
 const app = dva({
@@ -18,7 +19,7 @@ const app = dva({
 app.model(chartDesigner);
 
 // 4. Router
-app.router(require('./router'));
+app.router(require('./routes/router'));
 
 // 5. Start
 app.start('#root');

app/index.less

@@ -1,26 +1 @@
-@import "./custom.less";
-
-.ant-collapse {
-    border: none;
-    border-radius: 0;
-    .ant-collapse-item {
-        .ant-collapse-header {
-            line-height: 14px;
-            padding: 10px 0 10px 40px;
-            color: rgba(0, 0, 0, 0.85);
-            cursor: pointer;
-            position: relative;
-            -webkit-transition: all .3s;
-            transition: all .3s;
-            .arrow {
-                line-height: 35px;
-            }
-        }
-    }
-}
-.ant-collapse-content > .ant-collapse-content-box {
-    padding: 4px;
-}
-.ant-form-item {
-    margin-bottom: 0;
-}
+@import "./custom.less";

app/models/chartDesigner.js

@@ -105,89 +105,6 @@ export default {
             obj[name] = value;
             let newState = Object.assign({}, state, obj);
             return newState;
-        },
-        /**
-         * 个体统计数据表选项-分析目标
-         */
-        'dataView/setTargetColumn'(state, action) {
-            const dataView = state.dataView;
-            let newDataView = Object.assign({}, dataView, {
-                targetColumn: action.targetColumn
-            });
-            let newState = Object.assign({}, state, {
-                dataView: newDataView
-            });
-            return newState;
-        },
-        /**
-         * 柱状图设置-设置横轴
-         */
-        'barConfig/setXAxis'(state, action) {
-            const barConfig = state.barConfig;
-            let newBarConfig = Object.assign({}, barConfig, {
-                xAxis: action.xAxis
-            });
-            let newState = Object.assign({}, state, {
-                barConfig: newBarConfig
-            });
-            return newState;
-        },
-        /**
-         * 柱状图设置-设置纵轴
-         */
-        'barConfig/setYAxis'(state, action) {
-            const barConfig = state.barConfig;
-            let newBarConfig = Object.assign({}, barConfig, {
-                yAxis: action.yAxis
-            });
-            let newState = Object.assign({}, state, {
-                barConfig: newBarConfig
-            });
-            return newState;
-        },
-        /**
-         * 个体统计数据表选项-分析目标
-         */
-        'dataView/setTargetColumn'(state, action) {
-            const dataView = state.dataView;
-            let newDataView = Object.assign({}, dataView, {
-                targetColumn: action.targetColumn
-            });
-            let newState = Object.assign({}, state, {
-                dataView: newDataView
-            });
-            return newState;
-        },
-        /**
-         * 数据预处理-分组
-         */
-        'preparing/setGroupBy'(state, action) {
-            let newState = Object.assign({}, state, {
-                preparing: {
-                    groupBy: action.groupBy
-                }
-            });
-            return newState;
-        },
-        /**
-         * 过滤规则-生成过滤规则
-         */
-        'filters/createFilters'(state, action) {
-            return { ...state, filters: action.filters};
-        },
-        /**
-         * 过滤规则-启用/反启用
-         */
-        'filters/setUsing'(state, action) {
-            return { ...state, ...{ filters: state.filters.map( f => {
-                if(f.key == action.key) {
-                    f = Object.assign({}, f, { using: !f.using });
-                }
-                return f;
-            }) } };
-        },
-        setOption(state, action) {
-            return { ...state, ...{ chartOption: action.chartOption } };
         }
     },
     effects: {
@@ -199,7 +116,7 @@ export default {
                 body: {
                     "tableName": "TEST_BI_DATA",
                     "groups": preparing.groupBy.map(g => g.key),
-                    "xAxis": barConfig.xAxis.key,
+                    "xAxis": barConfig.xAxis.column.value,
                     "yAxis": barConfig.yAxis.column.value,
                     "dataType": barConfig.yAxis.gauge.value
                 }
@@ -210,13 +127,13 @@ export default {
                 body: {
                     "tableName": "TEST_BI_DATA",
                     "groups": preparing.groupBy.map(g => g.key),
-                    "xAxis": barConfig.xAxis.key,
+                    "xAxis": barConfig.xAxis.column.value,
                     "yAxis": barConfig.yAxis.column.value,
                     "dataType": barConfig.yAxis.gauge.value
                 }
             })
             res.viewType = 'bar';
-            res.data.data.xTitle = barConfig.xAxis?barConfig.xAxis.label:null
+            res.data.data.xTitle = barConfig.xAxis?barConfig.xAxis.column.label:null
             res.data.data.yTitle = barConfig.yAxis?barConfig.yAxis.column.label:null;
             res.data.data.gauge = barConfig.yAxis?barConfig.yAxis.gauge.label:null;
             console.log(res);

app/router.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { LocaleProvider } from 'antd'
-import { Router, Route, Switch } from 'dva/router';
-import Welcome from './components/welcome/welcome';
-import ChartDesigner from './components/chartDesigner/layout';
-// 由于 antd 组件的默认文案是英文，所以需要修改为中文
-import zhCN from 'antd/lib/locale-provider/zh_CN';
-import './utils/baseUtils';
-import './index.less';
-
-function RouterConfig({ history }) {
-  return (
-    <LocaleProvider locale={zhCN}>
-    <Router history={history}>
-      <Switch>
-        <Route exact path='/' component={Welcome}/>
-        <Route path='/chartDesigner' component={ChartDesigner}/>
-      </Switch>
-    </Router>
-    </LocaleProvider>
-  );
-}
-
-export default RouterConfig;

app/routes/chartDesigner.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import { connect } from 'dva';
-import styles from './IndexPage.less';
-
-function IndexPage() {
-  return (
-    <div className={styles.normal}>
-      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
-      <div className={styles.welcome} />
-      <ul className={styles.list}>
-        <li>
-          To get started, edit <code>src/index.js</code> and save to reload.
-        </li>
-        <li>
-          <a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">
-            Getting Started
-          </a>
-        </li>
-      </ul>
-    </div>
-  );
-}
-
-IndexPage.propTypes = {};
-
-export default connect()(IndexPage);

app/routes/mainLayout.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Layout, Menu, Tabs } from 'antd';
+import { Route, Switch } from 'dva/router';
+const { Header, Content } = Layout;
+import Navigator from '../components/common/navigator'
+import Welcome from '../components/myPage/welcome'
+import ChartDesigner from '../components/chartDesigner/layout'
+import DataSource from '../components/datasource/dataSource'
+import './mainLayout.less';
+
+const MainLayout = (history) => {
+    return(
+        <Layout className='main-layout'>
+            <Header className='main-header'>
+                <Navigator />
+            </Header>
+            <Content className='main-content'>
+                <Switch>
+                    <Route exact path='/' component={Welcome}/>
+                    <Route path='/chartDesigner' component={ChartDesigner}/>
+                    <Route path='/dataSource' component={DataSource}/>
+                </Switch>
+            </Content>
+        </Layout>
+    )
+}
+export default MainLayout;

app/routes/mainLayout.less

@@ -0,0 +1,27 @@
+html,body,#root{
+    width: 100%;
+    height: 100%;
+}
+.main-layout {
+    height: 100%;
+    .main-header {
+        background: none;
+        padding: 0;
+        height: 48px;
+        line-height: 48px;
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: #CCCCCC;
+        .navigator-menu {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+        }
+    }
+    .main-content {
+        height: 100%;
+        margin: 0 10%;
+        background-color: white;
+        padding: 5px;
+    }
+}

app/routes/router.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { LocaleProvider, Layout,  } from 'antd'
+import { Router, Route, Switch } from 'dva/router';
+import MainLayout from './mainLayout';
+import ChartDesigner from '../components/chartDesigner/layout';
+// 由于 antd 组件的默认文案是英文，所以需要修改为中文
+import zhCN from 'antd/lib/locale-provider/zh_CN';
+
+function RouterConfig({ history }) {
+  return (
+    <LocaleProvider locale={zhCN}>
+      <Router history={history}>
+        <Switch>
+          <Route path='/chartDesigner' component={ChartDesigner}/>
+          <Route path='/' component={MainLayout}/>
+        </Switch>
+      </Router>
+    </LocaleProvider>
+  );
+}
+
+export default RouterConfig;