1

config/router.config.js

@@ -42,6 +42,22 @@ export default [
       },
     ],
   },
+  {
+    path: '/command',
+    component: '../layouts/CommandPlatformLayout',
+    routes: [
+      {
+        name: '平台1',
+        path: '/command/one',
+        component: './CommandPlatform/One',
+      },
+      {
+        name: '平台2',
+        path: '/command/two',
+        component: './CommandPlatform/Two',
+      },
+    ],
+  },
   {
     path: '/',
     component: '../layouts/SingalLayout',

src/layouts/CommandPlatformLayout.js

@@ -0,0 +1,178 @@
+/**
+ * Created by sciisc on 2018/12/6.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Layout } from 'antd';
+import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
+import pathToRegexp from 'path-to-regexp';
+import { ContainerQuery } from 'react-container-query';
+import DocumentTitle from 'react-document-title';
+import memoizeOne from 'memoize-one';
+import styles from './CommandPlatformLayout.less';
+import Context from './MenuContext';
+// Conversion router to menu.
+function formatter(data, parentPath = '', parentAuthority, parentName) {
+  return data.map(item => {
+    let locale = 'menu';
+    if (parentName && item.name) {
+      locale = `${parentName}.${item.name}`;
+    } else if (item.name) {
+      locale = `menu.${item.name}`;
+    } else if (parentName) {
+      locale = parentName;
+    }
+    const result = {
+      ...item,
+      locale,
+      authority: item.authority || parentAuthority,
+    };
+    if (item.routes) {
+      const children = formatter(item.routes, `${parentPath}${item.path}/`, item.authority, locale);
+      // Reduce memory usage
+      result.children = children;
+    }
+    delete result.routes;
+    return result;
+  });
+}
+
+const query = {
+  'm_screen-xs': {
+    maxWidth: 575,
+  },
+  'm_screen-sm': {
+    minWidth: 576,
+    maxWidth: 767,
+  },
+  'm_screen-md': {
+    minWidth: 768,
+    maxWidth: 991,
+  },
+  'm_screen-lg': {
+    minWidth: 992,
+    maxWidth: 1199,
+  },
+  'm_screen-xl': {
+    minWidth: 1200,
+    maxWidth: 1599,
+  },
+  'm_screen-xxl': {
+    minWidth: 1600,
+    maxWidth: 1920,
+  },
+  'm_screen-2k': {
+    minWidth: 1920 * 2 * 1.2,
+  },
+  'm_screen-8k': {
+    minWidth: 1920 * 4 * 1.2,
+  },
+};
+
+class CommandPlatformLayout extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.getPageTitle = memoizeOne(this.getPageTitle);
+    this.getBreadcrumbNameMap = memoizeOne(this.getBreadcrumbNameMap, isEqual);
+    this.breadcrumbNameMap = this.getBreadcrumbNameMap();
+  }
+
+  getContext() {
+    const { location } = this.props;
+    return {
+      location,
+      breadcrumbNameMap: this.breadcrumbNameMap,
+    };
+  }
+
+  getMenuData() {
+    const {
+      route: { routes },
+    } = this.props;
+    return formatter(routes);
+  }
+
+  /**
+   * 获取面包屑映射
+   * @param {Object} menuData 菜单配置
+   */
+  getBreadcrumbNameMap() {
+    const routerMap = {};
+    const mergeMenuAndRouter = data => {
+      data.forEach(menuItem => {
+        if (menuItem.children) {
+          mergeMenuAndRouter(menuItem.children);
+        }
+        // Reduce memory usage
+        routerMap[menuItem.path] = menuItem;
+      });
+    };
+    mergeMenuAndRouter(this.getMenuData());
+    return routerMap;
+  }
+
+  getPageTitle = pathname => {
+    let currRouterData = null;
+    // match params path
+    Object.keys(this.breadcrumbNameMap).forEach(key => {
+      if (pathToRegexp(key).test(pathname)) {
+        currRouterData = this.breadcrumbNameMap[key];
+      }
+    });
+    if (!currRouterData) {
+      return 'Hiatmp';
+    }
+    /* const message = formatMessage({
+      id: currRouterData.locale || currRouterData.name,
+      defaultMessage: currRouterData.name,
+    }); */
+    return `${currRouterData.name}`;
+  };
+  setRemPc = () => {
+    var docEl = document.documentElement,
+    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
+    recalc = function () {
+      var clientWidth = docEl.clientWidth;
+      if (!clientWidth) return;
+      if (location.href.indexOf("express") > -1) {
+        docEl.style.fontSize = "";
+      } else if (clientWidth >= 7680) {
+        docEl.style.fontSize = "100px"; //1rem  = 100px
+      } else {
+        docEl.style.fontSize = 100 * (clientWidth / 7680) + "px";
+      }
+    };
+    if (!document.addEventListener) return;
+    window.addEventListener(resizeEvt, recalc, false);
+    document.addEventListener("DOMContentLoaded", recalc, false);
+    // var whdef = 100 / 7680;
+    // var bodyWidth = document.body.clientWidth;
+    // var rem = bodyWidth * whdef;
+    // document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
+  }
+
+  componentDidMount(){
+    this.setRemPc()
+  }
+  render() {
+    const {
+      children,
+      location: { pathname },
+    } = this.props;
+
+    return (
+      <DocumentTitle title={this.getPageTitle(pathname)}>
+        <ContainerQuery query={query} className={styles.main}>
+          {params => (
+            <Context.Provider value={{ ...this.getContext(), ...params }}>
+              <div className={classNames({ ...params, defaulthiew: true })} style={{ overflowX: scroll }}>{children}</div>
+            </Context.Provider>
+          )}
+        </ContainerQuery>
+      </DocumentTitle>
+    );
+  }
+}
+
+export default CommandPlatformLayout;

src/layouts/CommandPlatformLayout.less

@@ -0,0 +1,9 @@
+html, body{
+    min-height: 2160px;
+    min-width: 7680px;
+    // width: 100%;
+    // height: 100%;
+}
+.defaulthiew{
+    height: auto;
+}

src/pages/CommandPlatform/One.js

@@ -0,0 +1,55 @@
+
+import styles from './One.less'
+import Congestion from '../../components/CommandPlatform/left/Congestion'
+import Rank from '../../components/CommandPlatform/left/Rank'
+import CongestionTrend from '../../components/CommandPlatform/left/CongestionTrend'
+import SpeedTrend from '../../components/CommandPlatform/left/SpeedTrend'
+
+import SituationNum from '../../components/CommandPlatform/left/SituationNum'
+import SituationDispose from '../../components/CommandPlatform/left/SituationDispose'
+
+import Controls from '../../components/CommandPlatform/right/Controls'
+import Cars from '../../components/CommandPlatform/right/Cars'
+import Construction from '../../components/CommandPlatform/right/Construction'
+import Baseline from '../../components/CommandPlatform/right/Baseline'
+import Opinion from '../../components/CommandPlatform/right/Opinion'
+
+class One extends React.PureComponent {
+    constructor(props) {
+        super(props);
+    }
+
+
+    render() {
+        return (
+            <div className={styles.container}>
+                <div className={styles.left}>
+                    <div style={{ width: '910px' }}>
+                        <Congestion />
+                        {/* <Rank />
+                        <CongestionTrend />
+                        <SpeedTrend /> */}
+                    </div>
+                    <div style={{ width: '860px' }}>
+                        {/* <SituationNum />
+                        <SituationDispose /> */}
+                    </div>
+                </div>
+                {/* <div className={styles.maps}></div>
+                <div className={styles.right}>
+                    <div style={{ width: '10.16rem' }}>
+                       <Controls />
+                       <Cars />
+                       <Construction />
+                    </div>
+                    <div style={{ width: '9.5rem' }}>
+                       <Baseline />
+                       <Opinion/>
+                    </div>
+                </div> */}
+            </div>
+        );
+    }
+}
+
+export default One;

src/pages/CommandPlatform/One.less

@@ -0,0 +1,40 @@
+// @import '../themes/default.less';
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.3rem;
+  background: url(../../assets/CommandPlatform/background.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+
+  .left {
+    width: 2136px;
+    height: 2064px;
+    padding: 0 76px 0 150px;
+    display: flex;
+    justify-content: space-between;
+
+    &>div {
+      border: 1px solid red;
+    }
+  }
+
+  .maps {
+    width: 1962px;
+    border: 1px solid red;
+  }
+
+  .right {
+    width: 2131px;
+    height: 2055px;
+    padding: 0 160px 0 60px;
+    display: flex;
+    justify-content: space-between;
+
+    &>div {
+      border: 1px solid red;
+    }
+  }
+}