导航完成

src/components/Nav/index.less

@@ -0,0 +1,24 @@
+.nav {
+  display: flex;
+  justify-content: space-between;
+  width: 1200px;
+  margin: auto;
+  padding-bottom: 20px;
+
+  > div {
+    width: 280px;
+    height: 260px;
+    background: #fff;
+    cursor: pointer;
+
+    b {
+      font-size: 18px;
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+      background: #d9d9d9;
+      display: inline-block;
+      width: 100%;
+    }
+  }
+}

src/components/Nav/index.tsx

@@ -0,0 +1,189 @@
+import styles from './index.less';
+import { Fragment, useEffect, FC } from 'react';
+import Fetch from '@/utils/fetch';
+import { connect, ConnectProps, Dispatch, history, useLocation } from 'umi';
+import ReactEcharts from 'echarts-for-react';
+
+interface PageProps {
+  dispatch: Dispatch;
+}
+
+const Nav: FC<PageProps> = ({ dispatch }) => {
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const location: any = useLocation();
+
+  const getData = async () => {};
+  const option1 = {
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: 20,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: ['15', '20', '64', '91', '128', 'ECC2', 'ECC3'],
+      axisLabel: {
+        rotate: 45,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        formatter: '{value}M',
+      },
+    },
+    series: [
+      {
+        data: [15, 8, 20, 91, 20, 15, 128],
+        type: 'bar',
+      },
+    ],
+  };
+
+  const option2Data = [
+    {
+      value: 335,
+      name: '已出库',
+    },
+    {
+      value: 310,
+      name: '已注册',
+    },
+    {
+      value: 234,
+      name: '已入库',
+    },
+  ];
+
+  const option2 = {
+    startAngle: 180,
+    color: ['#5470c6', '#91cc75', '#fac858', 'transparent'],
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: ['45%', '90%'],
+        avoidLabelOverlap: false,
+        startAngle: 180,
+        center: ['50%', '70%'],
+        label: {
+          normal: {
+            position: 'inner',
+            textStyle: {
+              color: '#fff',
+              fontSize: 12,
+            },
+          },
+        },
+        labelLine: {
+          normal: {
+            show: false,
+          },
+        },
+        data: option2Data.concat({
+          value:
+            option2Data[0].value + option2Data[1].value + option2Data[2].value,
+          name: '',
+        }),
+      },
+    ],
+  };
+
+  const option3 = {
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: 20,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: ['等待执行', '执行成功', '执行失败'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [
+          { itemStyle: { color: '#fac858' }, value: 15 },
+          { itemStyle: { color: '#5470c6' }, value: 5 },
+          { itemStyle: { color: '#ee6666' }, value: 34 },
+        ],
+        type: 'bar',
+      },
+    ],
+  };
+
+  return (
+    <div className={styles.nav}>
+      <div
+        onClick={() => {
+          history.push('/manager/passwordManager');
+        }}
+      >
+        <b
+          className={
+            location.pathname?.includes('/manager/passwordManager')
+              ? 'primary-color'
+              : ''
+          }
+        >
+          原始资源管理
+        </b>
+        <ReactEcharts
+          option={option1}
+          style={{ height: 220 }}
+          opts={{ renderer: 'svg' }}
+        />
+      </div>
+      <div
+        onClick={() => {
+          history.push('/manager/basicManager/register');
+        }}
+      >
+        <b
+          className={
+            location.pathname?.includes('/manager/basicManager')
+              ? 'primary-color'
+              : ''
+          }
+        >
+          装备信息管理
+        </b>
+        <ReactEcharts
+          option={option2}
+          style={{ height: 220 }}
+          opts={{ renderer: 'svg' }}
+        />
+      </div>
+      <div>
+        <b>任务管理</b>
+        <ReactEcharts
+          option={option3}
+          style={{ height: 220 }}
+          opts={{ renderer: 'svg' }}
+        />
+      </div>
+      <div>
+        <b>系统配置管理</b>
+        <div className="font18 ml20 mt20">
+          用户名称：<a style={{ fontWeight: 'bold' }}>详情</a>
+        </div>
+        <div className="font18 ml20 mt20">
+          单位名称：<strong className="primary-color">上海科技</strong>
+        </div>
+        <div className="font18 ml20 mt20">
+          软件版本：<strong className="primary-color">1.0.0.0</strong>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default connect(({}: {}) => ({}))(Nav);

src/pages/Manager/Header/index.tsx

@@ -2,6 +2,7 @@ import styles from './index.less';
 import { Fragment, useEffect } from 'react';
 import { history } from 'umi';
 import Fetch from '@/utils/fetch';
+import Nav from '@/components/Nav';
 import { message } from 'antd';
 const Header = ({ ...props }) => {
   useEffect(() => {
@@ -22,24 +23,34 @@ const Header = ({ ...props }) => {
 
   const pathname = props.location.pathname;
   const menu = [
+    {
+      id: '1',
+      name: '首页',
+      url: '',
+    },
+    {
+      id: '2',
+      name: '计划管理',
+      url: '',
+    },
     {
       id: '/passwordManager',
       name: '密码管理',
       url: '/manager/passwordManager',
     },
+    // {
+    //   id: '/basicManager',
+    //   name: '基础设施管理',
+    //   url: '/manager/basicManager/register',
+    // },
     {
-      id: '/basicManager',
-      name: '基础设施管理',
-      url: '/manager/basicManager/register',
-    },
-    {
-      id: '11',
-      name: '任务管理',
+      id: '3',
+      name: '证书管理',
       url: '',
     },
     {
-      id: '22',
-      name: '系统配置管理',
+      id: '4',
+      name: '运维管理',
       url: '',
     },
   ];
@@ -52,7 +63,7 @@ const Header = ({ ...props }) => {
           <ul>
             {menu.map((e: any) => (
               <li
-                className={pathname?.includes(e.id) ? styles.active : ''}
+                className={e.name === '密码管理' ? styles.active : ''}
                 key={e.id}
                 onClick={() => {
                   if (e.url) {
@@ -68,7 +79,10 @@ const Header = ({ ...props }) => {
           <div className="font14">版本号：V0.4.0.0</div>
         </section>
       </div>
-      <div className={styles.content}>{props.children}</div>
+      <div className={styles.content}>
+        {props.children}
+        <Nav />
+      </div>
     </Fragment>
   );
 };

src/styles/base.less

@@ -2,6 +2,10 @@
   font-weight: bold;
 }
 
+.primary-color {
+  color: @primary-color;
+}
+
 .mt0 {
   margin-top: 0px;
 }