调整路由

app/components/chartDesigner/layout.jsx

@@ -8,7 +8,7 @@ import './layout.less';
 import ChartDesignerHeader from './header';
 import ChartDesignerContent from './content';
 
-class ChartDesignerLayout extends React.Component {
+class ChartDesigner extends React.Component {
     render() {
         return <Layout className='chartdesigner-layout'>
             <Header>
@@ -20,4 +20,4 @@ class ChartDesignerLayout extends React.Component {
         </Layout>
     }
 }
-export default ChartDesignerLayout;
+export default ChartDesigner;

app/components/dashboard/dashboardDetail.jsx → app/components/dashboardDesigner/layout.jsx

@@ -1,9 +1,14 @@
 import React from 'react'
 import { connect } from 'dva'
-import { Responsive } from 'react-grid-layout'
+import { Responsive, WidthProvider } from 'react-grid-layout'
 import '../../models/dashboard'
+import '../../../node_modules/react-grid-layout/css/styles.css'
+import '../../../node_modules/react-resizable/css/styles.css'
 
-class DashboardDetail extends React.Component {
+const ResponsiveReactGridLayout = WidthProvider(Responsive);
+
+
+class DashboardDesigner extends React.Component {
 
     constructor(props) {
         super(props);
@@ -20,14 +25,16 @@ class DashboardDetail extends React.Component {
             { i: 'c', x: 4, y: 0, w: 1, h: 2 }
         ];
         return (
-            <Responsive
+            <ResponsiveReactGridLayout
                 className="grid-layout"
-                layout={layout}
+                layouts={layout}
+                breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+                cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}
             >
                 <div key="a">a</div>
                 <div key="b">b</div>
                 <div key="c">c</div>
-            </Responsive>
+            </ResponsiveReactGridLayout>
 
         )
     }
@@ -38,4 +45,4 @@ function mapStateToProps({present: {dashboard}}) {
     return { dashboard }
 }
 
-export default connect(mapStateToProps)(DashboardDetail)
+export default connect(mapStateToProps)(DashboardDesigner)

app/routes/mainLayout.js

@@ -4,14 +4,11 @@ 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 DataSourceDetail from '../components/datasource/dataSourceDetail'
 import Dashboard from '../components/dashboard/dashboard'
 import Chart from '../components/chart/list'
-
 import './mainLayout.less';
-import DashboardDetail from '../components/dashboard/dashboardDetail';
 
 const MainLayout = (history) => {
     return(
@@ -26,7 +23,6 @@ const MainLayout = (history) => {
                     <Route exact sensitive path='/datasource' component={DataSource}/>
                     <Route sensitive path='/datasource/:type/:code/:tab' component={DataSourceDetail}/>
                     <Route exact sensitive path='/dashboard' component={Dashboard} />
-                    <Route sensitive path='/dashboard/:code/' component={DashboardDetail}/>
                     <Route exact sensitive path='/chart' component={Chart} />
                 </Switch>
             </Content>

app/routes/router.js

@@ -3,6 +3,7 @@ import { LocaleProvider, Layout,  } from 'antd'
 import { Router, Route, Switch } from 'dva/router'
 import MainLayout from './mainLayout'
 import ChartDesigner from '../components/chartDesigner/layout'
+import DashboardDesigner from '../components/DashboardDesigner/layout'
 // 由于 antd 组件的默认文案是英文，所以需要修改为中文
 import zhCN from 'antd/lib/locale-provider/zh_CN'
 
@@ -11,7 +12,8 @@ function RouterConfig({ history }) {
     <LocaleProvider locale={zhCN}>
       <Router history={history}>
         <Switch>
-          <Route sensitive path='/chart/chartdesigner/:id' component={ChartDesigner}/>
+          <Route sensitive path='/chart/:id' component={ChartDesigner}/>
+          <Route sensitive path='/dashboard/:id/' component={DashboardDesigner}/>
           <Route path='/' component={MainLayout}/>
         </Switch>
       </Router>