2 Commits 7ae19975d8 ... 7f66745bca

Author SHA1 Message Date
  anxiaoxia 7f66745bca Merge branch sagacare of http://39.106.8.246:3003/sagacloud/sagacloud-manager-control into sagacare 1 year ago
  anxiaoxia c7d46dff8a feat 首页菜单 1 year ago

File diff suppressed because it is too large
+ 4 - 0
src/assets/images/page-home/environment.svg


File diff suppressed because it is too large
+ 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>

File diff suppressed because it is too large
+ 10 - 0
src/assets/images/page-home/set.svg


File diff suppressed because it is too large
+ 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>
   );
 };