Bläddra i källkod

feat 首页菜单

anxiaoxia 1 år sedan
förälder
incheckning
c7d46dff8a

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 4 - 0
src/assets/images/page-home/environment.svg


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 10 - 0
src/assets/images/page-home/equipment.svg


BIN
src/assets/images/page-home/qiyeLogo.png


+ 11 - 0
src/assets/images/page-home/runtime.svg

@@ -0,0 +1,11 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6537_41398)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.625C9.50862 2.625 2.625 9.50862 2.625 18C2.625 26.4914 9.50862 33.375 18 33.375C26.4914 33.375 33.375 26.4914 33.375 18C33.375 9.50862 26.4914 2.625 18 2.625ZM0.375 18C0.375 8.26598 8.26598 0.375 18 0.375C27.734 0.375 35.625 8.26598 35.625 18C35.625 27.734 27.734 35.625 18 35.625C8.26598 35.625 0.375 27.734 0.375 18Z" fill="#4D5262"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 7.875C18.6213 7.875 19.125 8.37868 19.125 9V17.3824L26.854 22.3009C27.3782 22.6345 27.5327 23.3298 27.1991 23.854C26.8655 24.3782 26.1702 24.5327 25.646 24.1991L17.396 18.9491C17.0715 18.7426 16.875 18.3846 16.875 18V9C16.875 8.37868 17.3787 7.875 18 7.875Z" fill="#4D5262"/>
+</g>
+<defs>
+<clipPath id="clip0_6537_41398">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 10 - 0
src/assets/images/page-home/set.svg


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 3 - 0
src/assets/images/page-home/staff.svg


+ 9 - 0
src/config/sagacare/sagacare_image.js

@@ -4,6 +4,15 @@ import envir_co2 from '@/assets/images/page-enviroment/co2.svg';
 import envir_pm25 from '@/assets/images/page-enviroment/pm25.svg';
 import envir_jiaquan from '@/assets/images/page-enviroment/jiaquan.svg';
 import envir_tvoc from '@/assets/images/page-enviroment/tvoc.svg';
+
+export const homeImgMap = {
+    staff: require('@/assets/images/page-home/staff.svg'),
+    environment: require('@/assets/images/page-home/environment.svg'),
+    equipment: require('@/assets/images/page-home/equipment.svg'),
+    runtime: require('@/assets/images/page-home/runtime.svg'),
+    set: require('@/assets/images/page-home/set.svg'),
+    qiyeLogo: require('@/assets/images/page-home/qiyeLogo.png'),
+}
 export const equipImageMap = {
   //   temperMapTop: require('@/assets/images/page-enviroment/temperMapTop.png'),
   //   co2MapTop: require('@/assets/images/page-enviroment/co2MapTop.png'),

+ 43 - 4
src/hooks/useMenuList.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { homeImgMap } from '@/config/sagacare/sagacare_image.js';
 
 export type menutype = {
   name: string;
@@ -9,11 +10,49 @@ export default function () {
   //进入时赋值
   useEffect(() => {
     setMenuList([
-      // { name: '环境信息', id: 'environment' },
-      { name: '设备管理', id: 'equipment' },
-      { name: '人员管理', id: 'member' },
-      // { name: '运行时间', id: 'runtime' },
+      {
+        title: '',
+        menus: [
+          {
+            id: 'member',
+            title: '成员',
+            icon: homeImgMap.staff,
+          },
+          {
+            id: 'company',
+            title: '企业信息',
+            icon: homeImgMap.staff,
+          },
+        ],
+      },
+
+      {
+        title: '运营服务',
+        menus: [
+          {
+            id: 'environment',
+            title: '环境信息',
+            icon: homeImgMap.environment,
+          },
+          {
+            id: 'equipment',
+            title: '设备管理',
+            icon: homeImgMap.equipment,
+          },
+          {
+            id: 'runtime',
+            title: '运行时间',
+            icon: homeImgMap.runtime,
+          },
+        ],
+      },
     ]);
+    // setMenuList([
+    //   // { name: '环境信息', id: 'environment' },
+    //   { name: '设备管理', id: 'equipment' },
+    //   { name: '人员管理', id: 'member' },
+    //   // { name: '运行时间', id: 'runtime' },
+    // ]);
   }, []);
 
   return { menuList };

+ 0 - 1
src/pages/Home/index.less

@@ -6,7 +6,6 @@
   }
   .right {
     width: 400px;
-    height: 300px;
     margin-top: -60px;
     overflow-y: auto;
     background: #fff;

+ 11 - 0
src/sagacare_components/navMenu/index.less

@@ -1,6 +1,7 @@
 .drawerDiv {
   //   width: 380px;
   //   height: 340px;
+  position: relative;
   padding: 0 24px;
   background-color: #fff;
   border-radius: 10px;
@@ -10,6 +11,16 @@
     height: 120px;
     font-size: 22px;
   }
+  .setOut {
+    position: absolute;
+    top: 42px;
+    right: 36px;
+  }
+  .groupTitle {
+    margin: 0 0 13px 10px;
+    color: #c4c4c4;
+    font-size: 16px;
+  }
   .menuList {
     padding-bottom: 60px;
 

+ 28 - 19
src/sagacare_components/navMenu/index.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
-import { Row, Col } from 'antd';
+import { Row, Col, Image } from 'antd';
 import styles from './index.less';
 import Icon from '@/tenants-ui/SgIcon';
 import useMenuList, { menutype } from '@/hooks/useMenuList';
 import { history, useModel, useLocation } from 'umi';
+import { homeImgMap } from '@/config/sagacare/sagacare_image.js';
 
 const NavMenu: React.FC = () => {
   const logo = require('@/assets/images/logo.png');
@@ -24,25 +25,33 @@ const NavMenu: React.FC = () => {
       <div className={styles.title}>
         <img src={logo} style={{ height: 70 }}></img>
       </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 className={styles.setOut}>
+        <img src={homeImgMap.set} />
       </div>
+      {menuList?.map((group, fidx) => {
+        return (
+          <div className={styles.menuList} key={fidx}>
+            {group.title && <div className={styles.groupTitle}>{group.title}</div>}
+            <Row gutter={[20, 20]}>
+              {(group.menus || []).map((item, index) => {
+                return (
+                  <Col span={8} key={'col' + index}>
+                    <div
+                      className={styles.menuItem}
+                      onClick={() => {
+                        menuClick(item);
+                      }}
+                    >
+                      <Image width={36} preview={false} src={item.icon} />
+                      <div className={styles.name}>{item.title}</div>
+                    </div>
+                  </Col>
+                );
+              })}
+            </Row>
+          </div>
+        );
+      })}
     </div>
   );
 };