Browse Source

开发修改

zhaojijng 3 years ago
parent
commit
8301b37754

+ 1 - 1
mock/environment.ts

@@ -3,7 +3,7 @@ import { Request, Response } from 'express';
 export default {
   // 支持值为 Object 和 Array
   'POST /api/environment/map': (req: Request, res: Response) => {
-    debugger;
+    //debugger;
     res.send({
       data: [
         {

+ 0 - 16
src/components/PageHeader/index.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import styles from './index.less';
-
-export default ({ title, action }) => {
-  return (
-    <div>
-      <div className={styles.header}>
-        <div className={styles.title}>之江项目</div>
-      </div>
-      <div className={styles.c}>
-        <div className={styles.title}>{title}</div>
-        {action}
-      </div>
-    </div>
-  );
-};

+ 1 - 12
src/components/PageHeader/index.less

@@ -1,15 +1,4 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 100px;
-  .title {
-    color: #000000;
-    font-weight: 600;
-    font-size: 24px;
-  }
-}
-.c {
+.navHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;

+ 33 - 0
src/components/PageHeader/index.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import styles from './index.less';
+
+import { useModel, history } from 'umi';
+
+type PageHeaderProps = {
+  title: string;
+  action: React.ReactNode;
+};
+const PageHeader: React.FC<PageHeaderProps> = ({ title, action }) => {
+  //console.log('PageHeader');
+
+  useEffect(() => {
+    //console.log('PageHeader-useEffect');
+    const unlisten = history.listen((location, action) => {
+      //console.log('location,action', location, action);
+    });
+    return () => {
+      // console.log('un--PageHeader--useEffect');
+      unlisten();
+    };
+  }, []);
+  return (
+    <>
+      <div className={styles.navHeader}>
+        <div className={styles.title}>{title}</div>
+        {action}
+      </div>
+    </>
+  );
+};
+
+export default PageHeader;

+ 33 - 0
src/components/navMenu/index.less

@@ -0,0 +1,33 @@
+.drawerDiv {
+  //   width: 380px;
+  //   height: 340px;
+  padding: 0 24px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  .title {
+    display: flex;
+    align-items: center;
+    height: 100px;
+    font-size: 22px;
+  }
+  .menuList {
+    padding-bottom: 60px;
+
+    .menuItem {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      height: 120px;
+      color: #656872;
+      font-size: 14px;
+      border: 1px solid #eceff4;
+      border-radius: 20px;
+      cursor: pointer;
+      .name {
+        padding-top: 14px;
+      }
+    }
+  }
+}

+ 43 - 0
src/components/navMenu/index.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import { Row, Col } from 'antd';
+import styles from './index.less';
+import Icon from '@/tenants-ui/Icon';
+import useMenuList, { menutype } from '@/hooks/useMenuList';
+import { history, useModel } from 'umi';
+
+const NavMenu: React.FC = () => {
+  const { closeMenu } = useModel('controller');
+  const { menuList } = useMenuList();
+  //debugger;
+  const menuClick = (item: menutype) => {
+    closeMenu();
+    history.push(`/${item.id}`);
+  };
+  //   console.log('navMenu');
+
+  return (
+    <div className={styles.drawerDiv}>
+      <div className={styles.title}>头部</div>
+      <div className={styles.menuList}>
+        <Row gutter={[20, 20]}>
+          {(menuList || []).map((item, index) => {
+            return (
+              <Col span={8} key={'col' + index}>
+                <div
+                  className={styles.menuItem}
+                  onClick={() => {
+                    menuClick(item);
+                  }}
+                >
+                  <Icon className="" type={item.id} style={{ fontSize: 26 }}></Icon>
+                  <div className={styles.name}>{item.name}</div>
+                </div>
+              </Col>
+            );
+          })}
+        </Row>
+      </div>
+    </div>
+  );
+};
+export default NavMenu;

+ 0 - 16
src/hooks/useMenuList.js

@@ -1,16 +0,0 @@
-import { useState, useEffect } from 'react';
-import { getPanelMenu } from '../services';
-
-export default function useMenuList() {
-  const [list, setList] = useState([]);
-  useEffect(() => {
-    getPanelMenu().then((res) => {
-      if (res.code === 1) {
-        setList(res.data);
-      }
-    });
-  }, []);
-  return {
-    list,
-  };
-}

+ 21 - 0
src/hooks/useMenuList.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+export type menutype = {
+  name: string;
+  id?: string;
+};
+export default function () {
+  const [menuList, setMenuList] = useState<menutype[]>();
+  useEffect(() => {
+    //debugger;
+    setTimeout(() => {
+      setMenuList([
+        { name: '环境信息', id: 'environment' },
+        { name: '设备管理', id: 'equipment' },
+        { name: '运行时间', id: 'runtime' },
+      ]);
+    }, 0);
+  }, []);
+
+  return { menuList };
+}

+ 45 - 4
src/layouts/index.jsx

@@ -1,11 +1,52 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useModel, useLocation, useIntl } from 'umi';
 import styles from './index.less';
+import { MenuFoldOutlined } from '@ant-design/icons';
+import Icon from '@/tenants-ui/Icon';
+
+import { Drawer } from 'antd';
+import NavMenu from '@/components/navMenu';
 
 export default (props) => {
+  const { menuVisible, closeMenu, toggleMenu } = useModel('controller');
+
+  const showMenuClick = () => {
+    // toggleMenu();
+  };
   return (
-    <>
-      <div className={styles.layout}>{props.children}</div>
-    </>
+    <div className={styles.layout}>
+      <div className={styles.header}>
+        <div className={styles.title}>之江项目</div>
+        <div className={styles.right}>
+          <div className={styles.picture}></div>
+          <Icon className={styles.notify} type="notify" style={{ fontSize: 21 }}></Icon>
+          <MenuFoldOutlined style={{ fontSize: 24 }} onClick={showMenuClick} />
+        </div>
+      </div>
+
+      {props.children}
+      <Drawer
+        title=""
+        placement="right"
+        closable={false}
+        onClose={closeMenu}
+        visible={menuVisible}
+        drawerStyle={
+          {
+            //   height: 340,
+            //   width: 380,
+            //   background: 'transparent',
+            //   transform: 'translate(-50px,20px)',
+            // top: 100,
+            //right: 20,
+          }
+        }
+        maskStyle={{ background: 'transparent' }}
+        contentWrapperStyle={{ boxShadow: 'none' }}
+        bodyStyle={{ transform: 'translate(-20px,20px)' }}
+      >
+        <NavMenu></NavMenu>
+      </Drawer>
+    </div>
   );
 };

+ 41 - 1
src/layouts/index.less

@@ -3,5 +3,45 @@
   width: 1340px;
   height: 100%;
   margin: 0 auto;
-  padding: 22px;
+  padding: 20px;
+}
+
+:global {
+  .ant-drawer-content {
+    overflow: visible;
+    //  border-radius: 10px;
+    background: transparent;
+  }
+  .ant-drawer-content-wrapper {
+    // border-radius: 10px;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 100px;
+  padding: 20px 0 40px 0;
+  .title {
+    color: #000000;
+    font-weight: 600;
+    font-size: 24px;
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    .picture {
+      width: 40px;
+      height: 40px;
+      margin-right: 24px;
+      background-color: #4f4f4f;
+      border-radius: 40px;
+    }
+    .notify {
+      margin-right: 24px;
+      cursor: pointer;
+    }
+  }
 }

+ 17 - 0
src/models/controller.ts

@@ -0,0 +1,17 @@
+import React, { useState, useCallback } from 'react';
+
+export default function () {
+  const [menuVisible, setMenuVisible] = useState<boolean>(false);
+  const closeMenu: () => void = () => {
+    setMenuVisible(false);
+  };
+  const toggleMenu: () => void = () => {
+    //debugger;
+    setMenuVisible(!menuVisible);
+  };
+  return {
+    menuVisible,
+    toggleMenu,
+    closeMenu,
+  };
+}

+ 0 - 19
src/models/global.js

@@ -1,19 +0,0 @@
-import { useState, useCallback } from 'react';
-
-export default function useGlobalModel() {
-  const [controlCenter, setControlCenter] = useState(false);
-
-  const toggleControlCenter = useCallback(() => {
-    setControlCenter(!controlCenter);
-  }, [controlCenter]);
-
-  const closeControlCenter = useCallback(() => {
-    setControlCenter(false);
-  }, []);
-
-  return {
-    controlCenter,
-    toggleControlCenter,
-    closeControlCenter,
-  };
-}

+ 1 - 0
src/pages/Environment/components/topNavigator/index.tsx

@@ -36,6 +36,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
   const [selParamObj, setSelParamObj] = useState(navigatorList[0]);
 
   useEffect(() => {
+    //console.log('TopNavigator----getBuildingList');
     getBuildingList({}).then((res) => {
       //debugger;
       var resData = res.data || [];

+ 2 - 2
src/pages/Environment/index.less

@@ -3,7 +3,7 @@
 }
 .maptop {
   box-sizing: border-box;
-  height: 47px;
+  height: 44px;
   padding-top: 10px;
   padding-right: 20px;
   .right {
@@ -24,7 +24,7 @@
   }
 }
 .mapwrap {
-  height: calc(100% - 283px);
+  height: calc(100% - 280px);
   overflow: hidden;
 }
 

+ 2 - 2
src/pages/Equipment/index.less

@@ -3,7 +3,7 @@
 }
 .maptop {
   box-sizing: border-box;
-  height: 47px;
+  height: 44px;
   padding-top: 10px;
   .right {
     display: flex;
@@ -20,6 +20,6 @@
   }
 }
 .mapwrap {
-  height: calc(100% - 283px);
+  height: calc(100% - 280px);
   overflow: hidden;
 }

+ 3 - 0
src/pages/Runtime/components/topNavRight/index.tsx

@@ -36,6 +36,9 @@ const TopNavRight: React.FC<TopNavRightProps> = ({ runtimeNav }) => {
             bordered={false}
             defaultValue={moment('2015/01/01', dateFormat)}
             format={dateFormat}
+            allowClear={false}
+            inputReadOnly={true}
+            autoFocus={true}
           />
         </div>
       </div>

+ 2 - 2
src/pages/Runtime/index.less

@@ -9,7 +9,7 @@
 
 .maptop {
   box-sizing: border-box;
-  height: 47px;
+  height: 44px;
   padding-top: 10px;
   padding-right: 20px;
   .right {
@@ -19,6 +19,6 @@
 }
 
 .mapwrap {
-  height: calc(100% - 283px);
+  height: calc(100% - 280px);
   overflow: hidden;
 }

+ 1 - 1
src/tenants-ui/Icon/index.jsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const Icon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_3184967_qzvz17l2oz.js',
+  scriptUrl: '//at.alicdn.com/t/font_3184967_s7z4njiltfc.js',
 });
 
 export default ({ type, className, style = {} }) => {