更新

src/components/LeftMenuOne/index.less

@@ -0,0 +1,52 @@
+.menu_item {
+  width: 260px;
+  height: 32px;
+  background: linear-gradient(180deg, #4AB4E4 0%, #A2E1FF 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: #FFFFFF;
+  cursor: pointer;
+  position: relative;
+
+  .triangle {
+    position: absolute;
+    right: 20px;
+    width: 0;
+    height: 0;
+    border-top: 6px solid #fff;
+    border-right: 6px solid transparent;
+    border-left: 6px solid transparent;
+    transition: transform 0.15s ease-in;
+  }
+}
+
+.item_warp {
+  transition: all 1s ease-in;
+
+  .item1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 20px 0;
+    cursor: pointer;
+  }
+
+  .item1_img {
+    width: 60px;
+    height: 60px;
+    background-color: saddlebrown;
+  }
+
+  .item1_name {
+    width: 80%;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: #1A374A;
+    margin-top: 6px;
+  }
+}

src/components/LeftMenuOne/index.tsx

@@ -0,0 +1,60 @@
+import { FC, useEffect, useState } from 'react';
+import styles from './index.less';
+
+interface PageProps {
+  data: Array<{
+    // 菜单名称
+    name: string;
+    // 是否展开
+    check: boolean;
+    // 菜单列表 ： name: 名称; url: 路由; img: 图标;
+    data: Array<{name: string; url: string; img: any;}>
+  }>
+}
+
+const LeftMenuCom: FC<PageProps> = ({ data }) => {
+
+  const [list, setList] = useState<any>([]);
+
+  useEffect(() => {
+    data.forEach((item,index) => {
+      item.check = (index == 0 ? true : false);
+    })
+    setList([...data])
+  }, [])
+
+  return (
+    <div>
+      {list.map((item: any, index: number) => {
+        return (
+          <div key={index}>
+            {/* 类型 */}
+            <div className={styles.menu_item} onClick={() => {
+              list[index].check = !list[index].check;
+              setList([...list])
+            }}>
+              <div>{item.name}</div>
+              <div className={styles.triangle} style={{ transform: list[index].check ? 'rotate(180deg)' : '' }}></div>
+            </div>
+            {/* 列表 */}
+            <div className={styles.item_warp} style={{ display: list[index].check ? 'block' : 'none' }}>
+              {
+                item.data.map((item1: any, index1: number) => {
+                  return (
+                    <div className={styles.item1} key={index1}>
+                      <div className={styles.item1_img}></div>
+                      <div className={styles.item1_name}>{item1.name}</div>
+                    </div>
+                  )
+                })
+              }
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default LeftMenuCom
+

src/components/LeftMenuTwo/index.less

@@ -0,0 +1,23 @@
+.item1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 20px 0;
+  cursor: pointer;
+}
+
+.item1_img {
+  width: 60px;
+  height: 60px;
+  background-color: saddlebrown;
+}
+
+.item1_name {
+  width: 80%;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: #1A374A;
+  margin-top: 6px;
+}

src/components/LeftMenuTwo/index.tsx

@@ -0,0 +1,38 @@
+import { FC, useEffect, useState } from 'react';
+import styles from './index.less';
+
+interface PageProps {
+  data: Array<{
+    // 名称
+    name: string;
+    // 路由
+    url: string;
+    // 图标
+    img: any;
+  }>
+}
+
+const LeftMenuCom: FC<PageProps> = ({ data }) => {
+
+  const [list, setList] = useState<any>([]);
+
+  useEffect(() => {
+    setList([...data])
+  }, [])
+
+  return (
+    <div>
+      {list.map((item: any, index: number) => {
+        return (
+          <div className={styles.item1} key={index}>
+            <div className={styles.item1_img}></div>
+            <div className={styles.item1_name}>{item.name}</div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default LeftMenuCom
+

src/layouts/index.less

@@ -7,6 +7,7 @@
   .nav_warp {
     width: 100%;
     height: auto;
+    user-select: none;
 
     .nav_warp_t,
     .logo_warp,
@@ -53,7 +54,7 @@
     .nav_warp_b {
       width: 100%;
       height: 40px;
-      background: #62BDE7;
+      background: linear-gradient(rgb(74, 180, 228) 0%, rgb(162, 225, 255) 100%);
       box-shadow: 0px 2px 4px 0px rgba(36, 57, 75, 0.5);
       display: flex;
 
@@ -90,7 +91,6 @@
         cursor: pointer;
         border-radius: 4px 4px 0px 0px;
         display: flex;
-        // align-items: center;
         padding-top: 8px;
 
         &:hover {
@@ -102,7 +102,7 @@
 
       .active_tab {
         border: 1px solid #fff;
-        background: #CAE9F7;
+        background: linear-gradient(180deg, #CAE9F7 0%, #FFFFFF 100%);
         color: #4A6B89;
       }
     }
@@ -121,6 +121,9 @@
       min-height: calc(100vh - 114px - 50px);
       background: #FFFFFF;
       border-right: 1px solid #D8D8D8;
+      overflow: hidden;
+      overflow-y: auto;
+      user-select: none;
     }
 
     .right_warp {

src/layouts/index.tsx

@@ -2,8 +2,10 @@
 import { Outlet } from 'umi';
 import styles from './index.less';
 import { useEffect, useState } from 'react';
-import { tabsType } from '@/utils/menu';
+import { MenuType, tabsType } from '@/utils/menu';
 import { Select } from 'antd';
+import LeftMenuOne from '@/components/LeftMenuOne';
+import LeftMenuTwo from '@/components/LeftMenuTwo';
 
 const options2 = [
   { value: 1, label: 'GLQ管理' },
@@ -14,15 +16,49 @@ const options2 = [
   { value: 6, label: '设备注册' }
 ]
 
+const leftMenuType: any = {
+  // GLQ管理
+  'GLQ远程维护': <LeftMenuOne key={1} data={MenuType['GLQ远程维护']} />,
+  '网络MMJ管理': <LeftMenuTwo key={2} data={MenuType['网络MMJ管理']}  />,
+  '网络GLQ配置': <LeftMenuOne key={3} data={MenuType['网络GLQ配置']} />,
+  // MY管理
+  '密钥体管理': <div />,
+  '密钥管理': <div />,
+  '邮箱管理': <div />,
+  // SB管理
+  '设备管理': <div />,
+  '日志管理': <div />,
+  '审计管理': <div />,
+  '境外任务管理': <div />,
+  // SF管理
+  '算法资源管理': <div />,
+  '算法配置管理': <div />,
+  '算法托收管理': <div />,
+  '算法邮箱管理': <div />,
+  // SBJK二维版
+  '设备监控二维版': <div />,
+  // 设备注册
+  '注册管理': <div />,
+  '位置管理': <div />
+}
+
 export default function Layout() {
   const [selectVal, setSelectVal] = useState<number>(1);
   const [tabList, setTabList] = useState<any>([]);
   const [active, setActive] = useState<number>(1);
-  
+  const [activeName, setActiveName] = useState<any>('GLQ远程维护');
+
   useEffect(() => {
     setTabList([...tabsType[selectVal]])
   }, [])
 
+  useEffect(() => {
+    if (tabList.length > 0) {
+      setActiveName(tabList[0].name)
+    }
+  }, [selectVal])
+
+
   return (
     <div id={styles.layout_main}>
       {/* 顶部导航 */}
@@ -40,6 +76,7 @@ export default function Layout() {
             onChange={(e) => {
               setSelectVal(e)
               setTabList([...tabsType[e]])
+              setActive(1)
             }}
             options={options2}
           />
@@ -66,6 +103,7 @@ export default function Layout() {
                 <div className={`${styles.tab_con} ${(index + 1) == active ? styles.active_tab : ''}`}
                   onClick={() => {
                     setActive(item.id)
+                    setActiveName(item.name)
                   }}>
                   {item.name}
                 </div>
@@ -79,7 +117,7 @@ export default function Layout() {
       <div className={styles.main_warp}>
         {/* 右侧菜单栏 */}
         <div className={styles.left_menu}>
-
+          {leftMenuType[activeName]}
         </div>
 
         {/* 左侧内容 */}

src/pages/Aaa/index.tsx

@@ -1,7 +0,0 @@
-export default function AaaPage() {
-  return (
-    <div>
-      aaaa
-    </div>
-  );
-}

src/pages/GLQ/TeamViewer/index.tsx

@@ -0,0 +1,10 @@
+import styles from './index.less';
+
+// GLQ远程维护
+export default function Page() {
+  return (
+    <div>
+      aaaa
+    </div>
+  );
+}

src/pages/GLQ/WebGLQ/index.tsx

@@ -0,0 +1,10 @@
+import styles from './index.less';
+
+// 网络GLQ配置
+export default function Page() {
+  return (
+    <div>
+      aaaa
+    </div>
+  );
+}

src/pages/GLQ/WebMMJ/index.tsx

@@ -0,0 +1,10 @@
+import styles from './index.less';
+
+// 网络MMJ管理
+export default function Page() {
+  return (
+    <div>
+      aaaa
+    </div>
+  );
+}

src/utils/menu.ts

@@ -1,6 +1,6 @@
 export const tabsType: any = {
   1: [
-    {id: 1, name: 'GLQ远程维护'},
+    {id: 1, name: 'GLQ远程维护',},
     {id: 2, name: '网络MMJ管理'},
     {id: 3, name: '网络GLQ配置'}
   ],
@@ -30,35 +30,54 @@ export const tabsType: any = {
   ],
 }
 
-
-export const menuType: any = {
-  1: [
-    {id: 1, name: 'GLQ远程维护'},
-    {id: 2, name: '网络MMJ管理'},
-    {id: 3, name: '网络GLQ配置'}
-  ],
-  2: [
-    {id: 1, name: '密钥体管理'},
-    {id: 2, name: '密钥管理'},
-    {id: 3, name: '邮箱管理'}
-  ],
-  3: [
-    {id: 1, name: '设备管理'},
-    {id: 2, name: '日志管理'},
-    {id: 3, name: '审计管理'},
-    {id: 4, name: '境外任务管理'}
+export const MenuType: any = {
+  'GLQ远程维护' : [
+    {
+      name: '建立远程连接',
+      check: true,
+      data: [{ name: '参数设置', url: '', img: '' }]
+    }, {
+      name: '交互维护命令',
+      check: false,
+      data: [
+        { name: '系统时间', url: '', img: '' },
+        { name: '当前IP', url: '', img: '' },
+        { name: 'PING命令', url: '', img: '' },
+        { name: 'TELNET命令', url: '', img: '' },
+        { name: '其他命令', url: '', img: '' },
+      ]
+    },
   ],
-  4: [
-    {id: 1, name: '算法资源管理'},
-    {id: 2, name: '算法配置管理'},
-    {id: 3, name: '算法托收管理'},
-    {id: 4, name: '算法邮箱管理'}
+  '网络MMJ管理' : [
+    { name: 'MMJ初装', url: '', img: '' },
+    { name: '状态查询', url: '', img: '' },
+    { name: '密钥销毁', url: '', img: '' },
+    { name: '密钥遥毙', url: '', img: '' },
+    { name: 'MMJ遥毙', url: '', img: '' },
   ],
-  5: [
-    {id: 1, name: '设备监控二维版'}
-  ],
-  6: [
-    {id: 1, name: '注册管理'},
-    {id: 2, name: '位置管理'}
+  '网络GLQ配置' : [
+    {
+      name: '获取配置信息',
+      check: true,
+      data: [
+        { name: '服务列表信息', url: '', img: '' },
+        { name: '网络配置信息', url: '', img: '' },
+        { name: '安全策略信息', url: '', img: '' },
+        { name: '管理配置信息', url: '', img: '' },
+        { name: 'VPN策略信息', url: '', img: '' },
+        { name: '防火墙策略信息', url: '', img: '' },
+        { name: '日志记录信息', url: '', img: '' }
+      ]
+    }, {
+      name: '远程文件配置',
+      check: false,
+      data: [
+        { name: '服务列表', url: '', img: '' },
+        { name: '网络参数', url: '', img: '' },
+        { name: '安全策略', url: '', img: '' },
+        { name: '管理配置', url: '', img: '' },
+        { name: 'VPN策略', url: '', img: '' },
+      ]
+    },
   ],
 }