列表完成

package.json

@@ -21,6 +21,8 @@
   },
   "dependencies": {
     "@ant-design/pro-layout": "^6.5.0",
+    "echarts": "^5.3.3",
+    "echarts-for-react": "^3.0.2",
     "react": "17.x",
     "react-dom": "17.x",
     "umi": "^3.5.32"

src/pages/Encrypt/List/Index/index.tsx

@@ -82,8 +82,6 @@ const Page: FC<PageProps> = () => {
     }, 500);
   };
 
-  console.log(file, 222);
-
   const renderText = () => {
     let text: string = '';
     file.forEach((e: any) => {

src/pages/PasswordManager/List/Index/index.less

@@ -72,10 +72,14 @@
         cursor: pointer;
       }
     }
+
     .box {
       height: 500px;
+      margin-top: 20px;
     }
+
     .btn {
+      border-top: 1px solid #ebf3ff;
       height: 58px;
       display: flex;
       align-items: center;

src/pages/PasswordManager/List/Index/index.tsx

@@ -16,6 +16,7 @@ import { useEffect, useState, FC, useRef } from 'react';
 import { Link } from 'umi';
 import { downLoadLink } from '@/utils/download';
 import url from '@/utils/url';
+import ReactEcharts from 'echarts-for-react';
 
 interface PageProps {}
 
@@ -94,6 +95,61 @@ const Page: FC<PageProps> = () => {
 
   const title = item.find((e: any) => e.key === type).name;
 
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      boundaryGap: [0, 0.01],
+    },
+    yAxis: {
+      type: 'category',
+      data: data?.map((e: any) => e.length),
+    },
+    series: [
+      {
+        name: '库存数量',
+        type: 'bar',
+        barMaxWidth: 12,
+        data: data?.map((e: any) => e.count),
+      },
+    ],
+  };
+
+  const push = async () => {
+    if (!count) {
+      message.warn('推送组数不能为空');
+      return;
+    }
+    const res = await Fetch('/openi/secretKey/pushKey', {
+      method: 'post',
+      data: {
+        pushNode,
+        type,
+        length: Number(length),
+        count,
+        algorithm,
+      },
+    });
+    if (res.result === 'success') {
+      message.success('推出成功');
+      getData();
+    }
+  };
+
+  const mr = type === '2' ? 'mr15' : 'mr30';
+
   return (
     <div className={styles.page}>
       <div className={styles.left}>
@@ -121,16 +177,27 @@ const Page: FC<PageProps> = () => {
           <span>{title}资源列表 </span>
           <i className="iconfont icon-a-shuaxin2" />
         </div>
-        <div className={styles.box}></div>
+        <div className={styles.box}>
+          <ReactEcharts
+            option={option}
+            style={{ height: 500 }}
+            opts={{ renderer: 'svg' }}
+          />
+        </div>
         <div className={styles.btn}>
           <Button
             onClick={handleFile}
-            className="mr30"
-            icon={<i className="iconfont icon-daorushuju2 mr5" />}
+            className={mr}
+            icon={
+              <i
+                className="iconfont icon-daorushuju2 mr5"
+                style={{ fontSize: 14 }}
+              />
+            }
           >
             导入资源文件
           </Button>
-          <Row align="middle" className="mr30">
+          <Row align="middle" className={mr}>
             <span className="mr10">密码长度</span>
             <Select
               style={{ width: 96 }}
@@ -144,7 +211,7 @@ const Page: FC<PageProps> = () => {
               <Select.Option key="128">{'128'}</Select.Option>
             </Select>
           </Row>
-          <Row align="middle" className="mr30">
+          <Row align="middle" className={mr}>
             <span className="mr10">推送节点</span>
             <Select
               style={{ width: 160 }}
@@ -155,16 +222,31 @@ const Page: FC<PageProps> = () => {
               <Select.Option key="节点二">{'节点二'}</Select.Option>
             </Select>
           </Row>
-          <Row align="middle" className="mr30">
+          {type === '2' && (
+            <Row align="middle" className={mr}>
+              <span className="mr10">算法类型</span>
+              <Select
+                value={algorithm}
+                onChange={(k) => setAlgorithm(k)}
+                style={{ width: 100 }}
+              >
+                <Select.Option key="1">{'ECC359'}</Select.Option>
+                <Select.Option key="2">{'ECC281'}</Select.Option>
+              </Select>
+            </Row>
+          )}
+          <Row align="middle" className={mr}>
             <span className="mr10">推送组数</span>
             <InputNumber
               precision={0}
               value={count}
-              style={{ width: 218 }}
+              style={{ width: type === '2' ? 98 : 218 }}
               onChange={(k) => setCount(k)}
             />
           </Row>
-          <Button type="primary">推送</Button>
+          <Button onClick={push} type="primary">
+            推送
+          </Button>
         </div>
       </div>
     </div>