页面大致完成

config/routes/index.ts

@@ -7,6 +7,14 @@ const routes = [
 
   // ------------------------------设备管理----------------------------------
   { path: '/machineManage/register', name: '设备注册', component: '@/pages/MachineManage/MachineRegister' },
+  { path: '/machineManage/offline/import', name: '离线管理导入', component: '@/pages/MachineManage/OffLineManage/ImportStep' },
+  { path: '/machineManage/offline/export', name: '离线管理导出', component: '@/pages/MachineManage/OffLineManage/ExportStep' },
+  // ---------------------------------------------------------------------------
+
+  // ------------------------------密钥管理----------------------------------
+  {path:'/secretmanage/receive',name:'接收预制密钥',component:'@/pages/SecretManage/ReceiveSecret'},
+  {path:'/secretmanage/detail',name:'预制密钥信息',component:'@/pages/SecretManage/SecretInfo'},
+  {path:'/secretmanage/assemble',name:'密钥装配',component:'@/pages/SecretManage/SecretAssemble'},
   // ---------------------------------------------------------------------------
 
   // 桌面

src/components/CheckInput/index.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams } from 'umi';
+import { Row, Col, Input, Checkbox } from 'antd';
+
+interface PageProps {
+  value?: number;
+  label: string;
+  clearAll:boolean;
+  onChange?: (value: any) => void;
+}
+
+const CheckInput = ({
+  value,
+  label,
+  clearAll,
+  onChange,
+}: PageProps) => {
+
+  const [isChecked, setIsChecked] = useState<boolean>(false)
+
+  const handleInputChange = (e) => {
+    onChange(e.target.value);
+  };
+
+  useEffect(()=>{
+    if(clearAll){
+      setIsChecked(false);
+    }
+  },[clearAll])
+
+  return (
+    <Row align='middle'  gutter={[8, 16]} >
+      <Col>
+        <Checkbox checked={isChecked} onChange={(e) => {
+          setIsChecked(e.target.checked);
+          onChange(undefined)
+        }}
+        />
+      </Col>
+      <Col><span>{label}</span></Col>
+      <Col>
+        <Input
+          placeholder="请输入"
+          style={{ width: '200px' }}
+          value={value}
+          onChange={handleInputChange}
+          disabled={!isChecked}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+export default CheckInput;

src/components/CheckSelect/index.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams } from 'umi';
+import { Row, Col, Select,Checkbox } from 'antd';
+
+interface PageProps {
+  value?: number;
+  label:string
+  clearAll:boolean 
+  onChange?: (value:any) => void;
+}
+
+const CheckSelect = ({
+  value,
+  label,
+  clearAll,
+  onChange,
+}: PageProps) => {
+
+  const [isChecked,setIsChecked] = useState<boolean>(false)
+  const [options, setOptions] = useState<any>([]);
+
+  useEffect(() => {
+    if(isChecked){
+      setOptions([
+        { label: '图形化', value: 'graph' },
+        { label: '命令行', value: 'webssh' },
+        { label: 'JupyterLab', value: 'jupyterlab' },
+        { label: 'JupyterNotebook', value: 'jupyternotebook' },
+      ])
+    }
+  }, [isChecked]);
+
+  useEffect(()=>{
+    if(clearAll){
+      setIsChecked(false);
+    }
+  },[clearAll])
+
+  const handleSelectChange = (repoId: number) => {
+    onChange(repoId);
+  };
+
+  return (
+    <Row align='middle'  gutter={[8, 16]}>
+      <Col>
+        <Checkbox checked={isChecked} onChange={(e)=>{
+          setIsChecked(e.target.checked);
+          onChange(undefined)
+        }}/>
+      </Col>
+      <Col><span>{label}</span></Col>
+      <Col>
+        <Select
+          placeholder="请选择"
+          value={value}
+          options={options}
+          onChange={handleSelectChange}
+          disabled={!isChecked}
+          style={{width:'200px'}}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+export default CheckSelect;

src/components/StepHeader/index.less

@@ -0,0 +1,13 @@
+.wrap {
+
+  .title {
+    font-size:18px;
+    color:#333;
+  }
+
+  .description {
+    margin-top:20px;
+    font-size:16px;
+    color:#666;
+  }
+}

src/components/StepHeader/index.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams } from 'umi';
+import { Divider } from 'antd';
+import styles from './index.less'
+
+interface PageProps {
+  title:string;
+  description:string
+}
+
+const StepHeader = ({
+  title,
+  description,
+}: PageProps) => {
+
+
+
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.description}>{description}</div>
+      <Divider />
+    </div>
+  );
+};
+
+export default StepHeader;

src/layouts/index.tsx

@@ -267,16 +267,17 @@ export default function Layout() {
           <div className={styles.right_warp}>
             <div className={styles.right_route}
               style={{
-                height: selectVal == 1 ?
-                  'calc(100vh - 114px - 141px - 52px)' :
-                  'calc(100vh - 114px - 52px)'
+                // height: selectVal == 1 ?
+                //   'calc(100vh - 114px - 141px - 52px)' :
+                // height:'calc(100vh - 114px - 52px)'
+                height:'calc(100vh-114px)'
               }}
             >
               <Outlet></Outlet>
             </div>
 
             {/* GQL管理整个模块页面底部的配置信息 */}
-            {selectVal == 1 && <BottomConfigInfo />}
+            {/* {selectVal == 1 && <BottomConfigInfo />} */}
 
           </div>
         </div>

src/pages/MachineManage/MachineRegister/components/AddModal.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Modal, Form, Input } from 'antd';
+import ButtonComp from '@/components/ButtonComp';
+
+interface PageProps {
+  title?: string;
+  visibility: boolean;
+  onCancel: () => void;
+  onOk: () => void;
+}
+
+const AddModal = ({
+  title = "提示",
+  visibility = false,
+  onCancel,
+  onOk,
+  ...props
+}: PageProps) => {
+  const [form] = Form.useForm();
+
+  return (
+    <>
+      <Modal
+        title={title}
+        open={visibility}
+        centered
+        width={1200}
+        onCancel={onCancel}
+        footer={null}
+        maskClosable={false}
+        
+      >
+        <Form
+          form={form}
+          style={{maxHeight:'500px',overflow:'auto'}}
+        >
+          <Form.Item name="sysName" label="所属密码系统">
+            <Input placeholder="请输入所属密码系统" />
+          </Form.Item>
+          <Form.Item name="systype" label="所属设备类型">
+            <Input placeholder="请输入所属设备类型" />
+          </Form.Item>
+          <div style={{ display: 'flex' }}>
+            <Form.Item name="identifier" label="密码实体标识" rules={[{ required: true, message: '请选择密码实体标识' },]}>
+              <Input placeholder="请选择密码实体标识" />
+            </Form.Item>
+            <ButtonComp text={'选择'} style={{ marginLeft: '20px' }} onClick={() => { }} />
+          </div>
+          <div style={{ display: 'flex' }}>
+            <Form.Item name="order" label="密码设备序号" rules={[{ required: true, message: '请选择密码设备序号' },]}>
+              <Input placeholder="请选择密码设备序号" />
+            </Form.Item>
+            <div style={{ marginLeft: '20px' }}>（如0000001）</div>
+          </div>
+          <Form.Item name="order" label="密码设备编号" rules={[{ required: true, message: '请选择密码设备序号' },]}>
+            <Input placeholder="请选择密码设备序号" />
+          </Form.Item>
+          <Form.Item name="order" label="上级设备编号" rules={[{ required: true, message: '请选择密码设备序号' },]}>
+            <Input placeholder="请选择密码设备序号" />
+          </Form.Item>
+          <Form.Item name="order" label="设备使用单位" rules={[{ required: true, message: '请选择密码设备序号' },]}>
+            <Input placeholder="请选择密码设备序号" />
+          </Form.Item>
+          <Form.Item name="order" label="设备部署地点" rules={[{ required: true, message: '请选择密码设备序号' },]}>
+            <Input placeholder="请选择密码设备序号" />
+          </Form.Item>
+          <Form.Item name="order" label="设备管理单位" rules={[{ required: true, message: '请选择密码设备序号' },]}>
+            <Input placeholder="请选择密码设备序号" />
+          </Form.Item>
+          <Form.Item name="order" label="通信地址类型" rules={[{ required: true, message: '请选择密码设备序号' },]}>
+            <Input placeholder="请选择密码设备序号" />
+          </Form.Item>
+          <Form.Item name="order" label="隔离器外网Ip" rules={[{ required: true, message: '请选择密码设备序号' },]}>
+            <Input placeholder="请选择密码设备序号" />
+          </Form.Item>
+          <Form.Item name="order" label="设备生产厂商（可空）">
+            <Input placeholder="请选择密码设备序号" />
+          </Form.Item>
+          <Form.Item name="order" label="设备别名（可空）">
+            <Input placeholder="请选择设备别名" />
+          </Form.Item>
+          <Form.Item name="order" label="备注信息（可空）">
+            <Input placeholder="注册日期" />
+          </Form.Item>
+        </Form>
+        <div className='flex_jE mt20'>
+          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={onOk} />
+          <ButtonComp type="cancel" text={'取消'} onClick={onCancel} />
+        </div>
+      </Modal>
+
+    </>
+  );
+};
+
+export default AddModal;

src/pages/MachineManage/MachineRegister/index.tsx

@@ -1,43 +1,291 @@
 import { FC, useEffect, useState } from 'react';
 import { history, useLocation, useParams } from 'umi';
 import ButtonComp from '@/components/ButtonComp';
-import ClearInfoDialog from '@/components/ClearInfoDialog';
-import { getPlugCordResult } from '@/services/api';
-import { validateNumber } from '@/utils/validate';
-import theme from '@/styles/antd.theme';
-import { Select,Form } from 'antd';
+import { Table } from 'antd';
 import styles from './index.less';
-
+import CheckSelect from '@/components/CheckSelect';
+import CheckInput from '@/components/CheckInput';
+import AddModal from './components/AddModal';
 interface PageProps {
-  data: Array<{
-    // 菜单名称
-    name: string;
-    // 是否展开
-    check: boolean;
-    // 内容是否有目录结构
-    isTree?: boolean;
-    // 菜单列表 ： name: 名称; url: 路由; img: 图标;
-    data: Array<{ name: string; url: string; img: any; }>
-  }>;
+
 }
 
 const MachineRegister: FC<PageProps> = ({ }) => {
+
+  const [params, setParams] = useState({
+    page: 1,
+    limit: 10,
+    mdepart:null, //设备使用单位
+    mposition:null,//设备部署地点
+    mstate:null,//设备使用状态
+    midentifer:null,// 密码实体标识
+    mnumber:null,//上级设备编号
+  });
+  const [clearAll, setclearAll] = useState(false) // 点击复位按钮时所有的chebox都变为false
+  const [result, setResult] = useState({})
+  const [addModalVisible,setAddModalVisible] = useState<boolean>(false) //控制新增弹窗显隐
+
+  const columns = [{
+    title: '序号',
+    dataIndex: 'name',
+    key: 'name',
+    ellipsis: true,
+    fixed: 'left',
+    width: 60,
+    render: (text: any, record: any, index: any) => {
+      return (
+        <span style={{ color: "#333" }}>{params.limit * (params.page - 1) + index + 1}</span>
+      )
+    }
+  }, {
+    title: '密码设备编号',
+    dataIndex: 'school_info',
+    key: 'school_info',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span style={{ color: "#333" }}>{text.name}</span>
+  }, {
+    title: '设备类型名称',
+    dataIndex: 'department_info',
+    key: 'department_info',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span style={{ color: "#333" }}>{text.name}</span>
+  }, {
+    title: '密码实体标识',
+    dataIndex: 'teacher_count',
+    key: 'teacher_count',
+    width: 90,
+    ellipsis: true,
+    render: (text: any, record: any) => <span style={{ color: '#165DFF', cursor: 'pointer' }} onClick={() => { history.push(`/colleges/${record?.school_info?.id}/statistics`) }}>{text}</span>
+  }, {
+    title: '所属密码系统',
+    dataIndex: 'student_count',
+    key: 'student_count',
+    width: 90,
+    ellipsis: true,
+    render: (text: any, record: any) => <span style={{ color: '#165DFF', cursor: 'pointer' }} onClick={() => { history.push(`/colleges/${record?.school_info?.id}/statistics`) }}>{text}</span>
+  }, {
+    title: '上级设备编号',
+    dataIndex: 'type_cn',
+    key: 'type_cn',
+    width: 100,
+    ellipsis: true,
+    render: (text: any) => <span style={{ color: "#333" }}>{text}</span>
+  }, {
+    title: '设备出厂编号',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  },{
+    title: '设备使用单位',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  }, {
+    title: '设备部署地点',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  },{
+    title: '设备管理单位',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  },{
+    title: '设备生产厂商',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  },{
+    title: '设备地址类型',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  },{
+    title: '设备通信地址',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  },{
+    title: '设备注册日期',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  },{
+    title: '设备别名',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  },{
+    title: '备注信息',
+    dataIndex: 'status_cn',
+    key: 'status_cn',
+    align: "right",
+    ellipsis: true,
+    width: 70,
+    render: (text: any) => <span>
+      {text == '服务中' && <span style={{ color: '#00B187' }}>{text}</span>}
+      {text == '未开始' && <span style={{ color: '#849BB6' }}>{text}</span>}
+      {text == '已过期' && <span style={{ color: '#E30000' }}>{text}</span>}
+    </span>
+  }]
+
+  // 查找
+  const handleSearch = () => {
+    console.log("params-", params)
+
+  }
+
+  // 复位
+  const handleClear = () => {
+    params.mdepart=null;
+    params.mposition=null;
+    params.mstate=null;
+    params.midentifer=null;
+    params.mnumber=null;
+    setParams({...params})
+    setclearAll(true)
+  }
+
+  const getList = () => {
+
+  }
   
+  // 查询条件改变时设置参数
+  const handleChange = (value:any,param:string) =>{
+    params[`${param}`]=value;
+    setParams({...params})
+    setclearAll(false)
+  }
+
 
   return (
-    <section>
+    <section style={{ margin: '20px' }}>
       <div className={styles.nav}>
-        <ButtonComp type={'special'} text={'密钥管理'} onClick={() => { }} style={{marginRight:'20px'}} />
+        <ButtonComp type={'special'} text={'密钥管理'} onClick={() => { }} style={{ marginRight: '20px' }} />
         <ButtonComp type={'special'} text={'邮箱管理'} onClick={() => { }} />
       </div>
-      <div>
-        <Form>
-          
-        </Form>
+
+      <div style={{ marginTop: '20px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
+          <div>
+            <CheckSelect
+              value={params.mdepart}
+              label='设备使用单位'
+              onChange={(value)=>{handleChange(value,'mdepart')}}
+              clearAll={clearAll}
+            />
+          </div>
+          <div style={{ marginLeft: '50px', marginRight: '50px' }}>
+            <CheckSelect
+              value={params.mposition}
+              label='设备部署地点'
+              onChange={(value)=>{handleChange(value,'mposition')}}
+              clearAll={clearAll}
+            />
+          </div>
+          <div>
+            <CheckSelect
+              value={params.mstate}
+              label='设备使用状态'
+              onChange={(value)=>{handleChange(value,'mstate')}}
+              clearAll={clearAll}
+            />
+          </div>
+        </div>
+        <div style={{ marginTop: '20px', display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
+          <div>
+            <CheckInput
+              value={params.midentifer}
+              label='密码实体标识'
+              onChange={(value)=>{handleChange(value,'midentifer')}}
+              clearAll={clearAll}
+            />
+          </div>
+          <div style={{ marginLeft: '50px', marginRight: '50px' }}>
+            <CheckInput
+              value={params.mnumber}
+              label='上级设备编号'
+              onChange={(value)=>{handleChange(value,'mnumber')}}
+              clearAll={clearAll}
+            />
+          </div>
+          <div>
+            <div style={{ display: 'flex' }}>
+              <ButtonComp text={'查找'} style={{ marginRight: 20 }} onClick={() => { handleSearch() }} />
+              <ButtonComp text={'复位'} onClick={() => { handleClear() }} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ marginTop: '20px' }}>
+        <Table
+          columns={columns}
+          // loading={tableLoading}
+          dataSource={result?.list}
+          pagination={{
+            size: 'default',
+            showQuickJumper: true,
+            showSizeChanger: true,
+            pageSizeOptions: ['10', '15', '50', '100', '200'],
+            hideOnSinglePage: true,
+            pageSize: params.limit,
+            current: params.page,
+            position: ["bottomRight"],
+            onChange: (page, pagesize) => {
+              params.page = page;
+              params.limit = pagesize;
+              setParams({ ...params });
+              getList();
+            },
+            total: result?.count,
+            showTotal: (total, range) => <span>共<span style={{ color: '#165DFF' }}> {total} </span>条数据</span>
+          }}
+        />
+      </div>
+
+      <div className='flex_aiC_jB mt30 mb30'>
+        <div className='flex_aiC'>
+          <ButtonComp style={{ marginRight: 20 }} text={'第一页'} onClick={() => { }} />
+          <ButtonComp style={{ marginRight: 20 }} text={'上一页'} onClick={() => { }} />
+          <ButtonComp style={{ marginRight: 20 }} text={'下一页'} onClick={() => { }} />
+          <ButtonComp text={'最后一页'} onClick={() => { }} />
+        </div>
+        <div className='flex_aiC'>
+          <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'新增'} onClick={() => {setAddModalVisible(true) }} />
+          <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'修改'} onClick={() => { }} />
+          <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'删除'} onClick={() => { }} />
+          <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'退出'} onClick={() => { }} />
+        </div>
       </div>
+      
+      {/* 添加按钮对应的弹窗 */}
+      <AddModal 
+        title='密码设备信息--新增'
+        visibility={addModalVisible}
+        onCancel={()=>(setAddModalVisible(false))}
+      />
     </section>
   )
-    
+
 }
 
 export default MachineRegister

src/pages/MachineManage/OffLineManage/ExportStep/index.less

@@ -0,0 +1,6 @@
+.contentWrap{
+  margin: 20px;
+  .radiostyle{
+    margin:20px;
+  }
+}

src/pages/MachineManage/OffLineManage/ExportStep/index.tsx

@@ -0,0 +1,254 @@
+import { FC, useEffect, useState } from 'react';
+import { history, useLocation, useParams } from 'umi';
+import { Radio, Table, Space } from 'antd';
+import styles from './index.less';
+import StepHeader from '@/components/StepHeader';
+import ContentWarp from '@/components/ContentWarp';
+import CheckSelect from '@/components/CheckSelect';
+import CheckInput from '@/components/CheckInput';
+import ButtonComp from '@/components/ButtonComp';
+
+interface PageProps {
+  data: Array<{
+    // 菜单名称
+    name: string;
+    // 是否展开
+    check: boolean;
+    // 内容是否有目录结构
+    isTree?: boolean;
+    // 菜单列表 ： name: 名称; url: 路由; img: 图标;
+    data: Array<{ name: string; url: string; img: any; }>
+  }>;
+}
+
+const ExportStep: FC<PageProps> = ({ }) => {
+  const [step, setStep] = useState(1)
+  const [radioValue, setRadioValue] = useState(1)
+  const [clearAll, setclearAll] = useState(false)
+  const [result, setResult] = useState({})
+  const [payloadValue, setPayloadValue] = useState(1)
+  const [secretValue, setSecretValue] = useState(1)
+  const [params, setParams] = useState({
+    page: 1,
+    limit: 10,
+    mtype: null, // 密码设备类型
+    midentifer: null,// 密码实体标识
+    mnumber: null,// 密码设备编号
+    mdepart: null,//设备管理单位
+    musedepart: null,//设备使用单位
+  });
+
+  const columns = [{
+    title: '序号',
+    dataIndex: 'name',
+    key: 'name',
+    ellipsis: true,
+    fixed: 'left',
+    width: 60,
+    render: (text: any, record: any, index: any) => {
+      return (
+        <span style={{ color: "#333" }}>{params.limit * (params.page - 1) + index + 1}</span>
+      )
+    }
+  }, {
+    title: '设备编号',
+    dataIndex: 'school_info',
+    key: 'school_info',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span style={{ color: "#333" }}>{text.name}</span>
+  }, {
+    title: '设备使用单位',
+    dataIndex: 'department_info',
+    key: 'department_info',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span style={{ color: "#333" }}>{text.name}</span>
+  }, {
+    title: '设备管理单位',
+    dataIndex: 'teacher_count',
+    key: 'teacher_count',
+    // width: 90,
+    ellipsis: true,
+    render: (text: any, record: any) => <span style={{ color: '#165DFF', cursor: 'pointer' }} onClick={() => { history.push(`/colleges/${record?.school_info?.id}/statistics`) }}>{text}</span>
+  }, {
+    title: '实体标识',
+    dataIndex: 'student_count',
+    key: 'student_count',
+    // width: 90,
+    ellipsis: true,
+    render: (text: any, record: any) => <span style={{ color: '#165DFF', cursor: 'pointer' }} onClick={() => { history.push(`/colleges/${record?.school_info?.id}/statistics`) }}>{text}</span>
+  }, {
+    title: '设备类型',
+    dataIndex: 'type_cn',
+    key: 'type_cn',
+    // width: 100,
+    ellipsis: true,
+    render: (text: any) => <span style={{ color: "#333" }}>{text}</span>
+  },]
+
+  const handleRadioChange = (e) => {
+    setRadioValue(e.target.value)
+  }
+
+  const handleChange = (value: any, key: string) => {
+    params[`${key}`] = value
+    setParams({ ...params })
+    setclearAll(false)
+  }
+
+  const handlePaylodChange = (e) => {
+    setPayloadValue(e.target.value)
+  }
+
+  const handlesecretChange = (e) => {
+    setSecretValue(e.target.value)
+  }
+
+
+  // 查找
+  const handleSearch = () => {
+    console.log("params-", params)
+
+  }
+
+  // 复位
+  const handleClear = () => {
+    params.mtype = null;
+    params.midentifer = null;
+    params.mnumber = null;
+    params.mdepart = null;
+    params.musedepart = null;
+    setParams({ ...params })
+    setclearAll(true)
+  }
+
+  const getList = () => {
+
+  }
+
+  return (
+    <section className={styles.contentWrap}>
+      <StepHeader title={`第${step}步`} description={`第${step}步的描述信息`} />
+      {step === 1 && <>
+        <ContentWarp text='离线管理目标方向'>
+          <Radio.Group className={styles.radiostyle} onChange={handleRadioChange} value={radioValue}>
+            <Radio value={1}>上级</Radio>
+            <Radio value={2}>平级</Radio>
+            <Radio value={3}>下级</Radio>
+          </Radio.Group>
+        </ContentWarp>
+
+        <div>
+          <div className='mt20'>请选择一个目标设备</div>
+          <div>
+            <div style={{ display: 'flex', marginTop: '20px' }}>
+              <CheckSelect
+                value={params.mtype}
+                label='密码设备类型'
+                onChange={(value) => { handleChange(value, 'mtype') }}
+                clearAll={clearAll}
+              />
+              <div className='ml30'>
+                <CheckInput
+                  value={params.midentifer}
+                  label='密码实体标识'
+                  onChange={(value) => { handleChange(value, 'midentifer') }}
+                  clearAll={clearAll}
+                />
+              </div>
+            </div>
+            <div style={{ display: 'flex', marginTop: '20px' }}>
+              <CheckSelect
+                value={params.mnumber}
+                label='密码设备编号'
+                onChange={(value) => { handleChange(value, 'mnumber') }}
+                clearAll={clearAll}
+              />
+              <div className='ml30'>
+                <CheckInput
+                  value={params.mdepart}
+                  label='设备管理单位'
+                  onChange={(value) => { handleChange(value, 'mdepart') }}
+                  clearAll={clearAll}
+                />
+              </div>
+            </div>
+            <div style={{ display: 'flex', marginTop: '20px' }}>
+              <CheckSelect
+                value={params.musedepart}
+                label='设备使用单位'
+                onChange={(value) => { handleChange(value, 'musedepart') }}
+                clearAll={clearAll}
+              />
+              <div style={{ display: 'flex', marginLeft: '30px' }}>
+                <ButtonComp text={'查找'} style={{ marginRight: 20 }} onClick={() => { handleSearch() }} />
+                <ButtonComp text={'复位'} onClick={() => { handleClear() }} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ marginTop: '20px' }}>
+          <Table
+            columns={columns}
+            // loading={tableLoading}
+            dataSource={result?.list}
+            pagination={{
+              size: 'default',
+              showQuickJumper: true,
+              showSizeChanger: true,
+              pageSizeOptions: ['10', '15', '50', '100', '200'],
+              hideOnSinglePage: true,
+              pageSize: params.limit,
+              current: params.page,
+              position: ["bottomRight"],
+              onChange: (page, pagesize) => {
+                params.page = page;
+                params.limit = pagesize;
+                setParams({ ...params });
+                getList();
+              },
+              total: result?.count,
+              showTotal: (total, range) => <span>共<span style={{ color: '#165DFF' }}> {total} </span>条数据</span>
+            }}
+          />
+        </div>
+      </>}
+
+      {step === 2 && <>
+        <ContentWarp text='离线管理载体选择'>
+          <div style={{display:'flex',padding:'20px'}}>
+          <Radio.Group onChange={handlePaylodChange} value={payloadValue}>
+            <Space direction="vertical">
+              <Radio value={1}>U盘</Radio>
+              <Radio value={2}>注入器</Radio>
+            </Space>
+          </Radio.Group>
+          <div style={{width:'200px',height:'200px',backgroundColor:'#ccc',marginLeft:'50px'}}></div>
+          </div>
+        </ContentWarp>
+        <ContentWarp text='离线管理载体选择' style={{marginTop:'20px'}}>
+          <div style={{display:'flex',margin:'20px'}}>
+          <Radio.Group onChange={handlesecretChange} value={secretValue}>
+            <Space direction="vertical">
+              <Radio value={1}>加密</Radio>
+              <Radio value={2}>不加密</Radio>
+            </Space>
+          </Radio.Group>
+          <div style={{width:'200px',height:'200px',backgroundColor:'#ccc',marginLeft:'50px'}}></div>
+          </div>
+        </ContentWarp>
+      </>
+      }
+
+      <div className='flex_jE mt20'>
+        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'下一步'} onClick={() => { setStep(2) }} />
+        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'上一步'} onClick={() => { setStep(1) }} />
+        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'退出'} onClick={() => { }} />
+      </div>
+
+    </section>
+  )
+
+}
+
+export default ExportStep

src/pages/MachineManage/OffLineManage/ImportStep/index.less

@@ -0,0 +1,6 @@
+.contentwrap{
+  margin: 20px;
+  .radiostyle{
+    margin:20px;
+  }
+}

src/pages/MachineManage/OffLineManage/ImportStep/index.tsx

@@ -0,0 +1,89 @@
+import { FC, useEffect, useState } from 'react';
+import { history, useLocation, useParams } from 'umi';
+import ButtonComp from '@/components/ButtonComp';
+import ClearInfoDialog from '@/components/ClearInfoDialog';
+import { getPlugCordResult } from '@/services/api';
+import { validateNumber } from '@/utils/validate';
+import theme from '@/styles/antd.theme';
+import { Radio, Space, Upload, UploadProps, } from 'antd';
+import styles from './index.less';
+import StepHeader from '@/components/StepHeader';
+import ContentWarp from '@/components/ContentWarp';
+
+interface PageProps {
+  data: Array<{
+    // 菜单名称
+    name: string;
+    // 是否展开
+    check: boolean;
+    // 内容是否有目录结构
+    isTree?: boolean;
+    // 菜单列表 ： name: 名称; url: 路由; img: 图标;
+    data: Array<{ name: string; url: string; img: any; }>
+  }>;
+}
+
+const ImportStep: FC<PageProps> = ({ }) => {
+  const [step, setStep] = useState(1)
+  const [radioValue, setRadioValue] = useState(1)
+
+  const uploadprops: UploadProps = {
+    maxCount: 1,
+    beforeUpload: (file: any) => {
+      const formData = new FormData();
+      formData.append('file', file, '11');
+      console.log("file--", file)
+      console.log("formData--", formData)
+      // secretInit_loadData(formData).then((res) => {
+      //   if (res?.result == "success" && res?.data.length > 0) {
+      //     message.success('加载数据成功');
+      //     form.setFieldsValue({ ...res?.data[0] })
+      //     localStorage.setItem('MMJInit', JSON.stringify(res?.data[0]));
+      //     setDataLoading(true);
+      //   } else {
+      //     message.error(res?.errorMsg);
+      //   }
+      // })
+    }
+  };
+
+  const handleRadioChange = (e) => {
+    setRadioValue(e.target.value)
+  }
+
+  return (
+    <section className={styles.contentwrap}>
+      <StepHeader title={`第${step}步`} description={`第${step}步的描述信息`} />
+      {step === 1 && <ContentWarp text='设备离线管理操作'>
+        <Radio.Group className={styles.radiostyle} onChange={handleRadioChange} value={radioValue}>
+          <Space direction="vertical">
+            <Radio value={1}>密码设备注册信息导入</Radio>
+            <Radio value={2}>密码设备注册信息导出</Radio>
+            <Radio value={3}>本设备初始化其他密码设备</Radio>
+          </Space>
+        </Radio.Group>
+      </ContentWarp>
+      }
+
+      {step === 2 && <ContentWarp text='操作过程信息' style={{ height: '200px' }}>
+        <div className='mt20 ml20'>这是一段描述信息</div>
+      </ContentWarp>
+      }
+
+
+
+
+      <div className='flex_jE mt20'>
+        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'下一步'} onClick={() => { setStep(2) }} />
+        {step ===2 && <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'上一步'} onClick={() => { setStep(1) }} />}
+        {step ===2 && <Upload {...uploadprops} showUploadList={false}>
+          <ButtonComp style={{ marginRight: 20 }} text={'加载数据'} />
+        </Upload>}
+        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'退出'} onClick={() => { }} />
+      </div>
+    </section>
+  )
+
+}
+
+export default ImportStep

src/pages/SecretManage/ReceiveSecret/index.tsx

@@ -0,0 +1,62 @@
+import { FC, useEffect, useState } from 'react';
+import { history, useLocation, useParams } from 'umi';
+import { Form, Input, Select, Button, Row, Col } from 'antd';
+// import styles from './index.less';
+import ContentWarp from '@/components/ContentWarp';
+
+interface PageProps {
+  data: Array<{
+    // 菜单名称
+    name: string;
+    // 是否展开
+    check: boolean;
+    // 内容是否有目录结构
+    isTree?: boolean;
+    // 菜单列表 ： name: 名称; url: 路由; img: 图标;
+    data: Array<{ name: string; url: string; img: any; }>
+  }>;
+}
+
+const ReceiveSecret: FC<PageProps> = ({ }) => {
+  const [form] = Form.useForm();
+  const formItemSty = { width: 'auto', marginBottom: 20, marginRight: 30 };
+
+  const onFinish = () => {
+
+  }
+
+  return (
+    <section style={{ margin: '20px' }}>
+      <ContentWarp text='接收预制密钥体'>
+        <Form form={form} onFinish={onFinish} className='mt20 ml20'>
+          <Row>
+              <Form.Item name="productNum" label="预制密钥代号" style={formItemSty}>
+                <Input placeholder="请输入预制密钥代号" style={{ width: 260 }} />
+              </Form.Item>
+              <Form.Item name="askType" label="密钥记录格式" style={formItemSty}>
+                <Select style={{ width: 260 }} placeholder={'请选择密钥记录格式'} onChange={(e) => { }} options={[{ label: '11', value: '11' }]} />
+              </Form.Item>
+          </Row>
+          <Row>
+          <Form.Item name="productNum" label="每群密钥长度" style={formItemSty}>
+            <Input placeholder="请输入每群密钥长度" style={{ width: 260 }} />
+          </Form.Item>
+          <Form.Item name="productNum" label="预制密钥群数" style={formItemSty}>
+            <Input placeholder="请输入预制密钥群数" style={{ width: 260 }} />
+          </Form.Item>
+          </Row>
+          <div>
+            <div className='mb10'>请选择从机要局申请的预制密钥体数据文件</div>
+            <Form.Item name="askType" style={formItemSty}>
+              <Select style={{ width: 740 }} placeholder={'请选择从机要局申请的预制密钥体数据文件'} onChange={(e) => { }} options={[{ label: '11', value: '11' }]} />
+            </Form.Item>
+          </div>
+        </Form>
+        <div style={{display:'flex',justifyContent:'center',marginBottom:'20px'}}><Button>接收预制密钥</Button></div>
+      </ContentWarp>
+    </section>
+  )
+
+}
+
+export default ReceiveSecret

src/pages/SecretManage/SecretAssemble/index.tsx

@@ -0,0 +1,216 @@
+import { FC, useEffect, useState } from 'react';
+import { history, useLocation, useParams } from 'umi';
+import ButtonComp from '@/components/ButtonComp';
+import { Table } from 'antd';
+// import styles from './index.less';
+import CheckSelect from '@/components/CheckSelect';
+import CheckInput from '@/components/CheckInput';
+
+interface PageProps {
+
+}
+
+const MachineRegister: FC<PageProps> = ({ }) => {
+
+  const [params, setParams] = useState({
+    page: 1,
+    limit: 10,
+    musedepart:null, //设备使用单位
+    mposition:null,//设备部署地点
+    mdepart:null,//设备管理单位
+    midentifer:null,// 密码实体标识
+    mnumber:null,//上级设备编号
+    keystatus:null,//密钥装配状态
+  });
+  const [clearAll, setclearAll] = useState(false) // 点击复位按钮时所有的chebox都变为false
+  const [result, setResult] = useState({})
+  
+  const columns = [{
+    title: '序号',
+    dataIndex: 'name',
+    key: 'name',
+    ellipsis: true,
+    fixed: 'left',
+    width: 60,
+    render: (text: any, record: any, index: any) => {
+      return (
+        <span style={{ color: "#333" }}>{params.limit * (params.page - 1) + index + 1}</span>
+      )
+    }
+  }, {
+    title: '密码设备编号',
+    dataIndex: 'school_info',
+    key: 'school_info',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span style={{ color: "#333" }}>{text.name}</span>
+  }, {
+    title: '设备类型名称',
+    dataIndex: 'department_info',
+    key: 'department_info',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span style={{ color: "#333" }}>{text.name}</span>
+  }, {
+    title: '密码实体标识',
+    dataIndex: 'teacher_count',
+    key: 'teacher_count',
+    ellipsis: true,
+    render: (text: any, record: any) => <span style={{ color: '#165DFF', cursor: 'pointer' }} onClick={() => { history.push(`/colleges/${record?.school_info?.id}/statistics`) }}>{text}</span>
+  }, {
+    title: '所属密码系统',
+    dataIndex: 'student_count',
+    key: 'student_count',
+    ellipsis: true,
+    render: (text: any, record: any) => <span style={{ color: '#165DFF', cursor: 'pointer' }} onClick={() => { history.push(`/colleges/${record?.school_info?.id}/statistics`) }}>{text}</span>
+  }, {
+    title: '上级设备编号',
+    dataIndex: 'type_cn',
+    key: 'type_cn',
+    ellipsis: true,
+    render: (text: any) => <span style={{ color: "#333" }}>{text}</span>
+  },{
+    title: '设备使用单位',
+    dataIndex: 'service_end_time',
+    key: 'service_end_time',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span title={(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}
+      style={{ color: "#000" }}> {(record?.service_start_time && record?.service_end_time) ? `${moment(record?.service_start_time).format('YYYY-MM-DD HH:mm')} - ${moment(record?.service_end_time).format('YYYY-MM-DD HH:mm')}` : '--'}</span>
+  }, ]
+
+  // 查找
+  const handleSearch = () => {
+    console.log("params-", params)
+
+  }
+
+  // 复位
+  const handleClear = () => {
+    params.mdepart=null;
+    params.mposition=null;
+    params.mstate=null;
+    params.midentifer=null;
+    params.mnumber=null;
+    setParams({...params})
+    setclearAll(true)
+  }
+
+  const getList = () => {
+
+  }
+  
+  // 查询条件改变时设置参数
+  const handleChange = (value:any,param:string) =>{
+    params[`${param}`]=value;
+    setParams({...params})
+    setclearAll(false)
+  }
+
+
+  return (
+    <section style={{ margin: '20px' }}>
+
+      <div style={{ marginTop: '20px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
+          <div>
+            <CheckSelect
+              value={params.musedepart}
+              label='设备使用单位'
+              onChange={(value)=>{handleChange(value,'musedepart')}}
+              clearAll={clearAll}
+            />
+          </div>
+          <div style={{ marginLeft: '50px', marginRight: '50px' }}>
+            <CheckSelect
+              value={params.mposition}
+              label='设备部署地点'
+              onChange={(value)=>{handleChange(value,'mposition')}}
+              clearAll={clearAll}
+            />
+          </div>
+          <div>
+            <CheckSelect
+              value={params.mdepart}
+              label='设备管理单位'
+              onChange={(value)=>{handleChange(value,'mdepart')}}
+              clearAll={clearAll}
+            />
+          </div>
+        </div>
+        <div style={{ marginTop: '20px', display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
+          <div>
+            <CheckInput
+              value={params.midentifer}
+              label='密码实体标识'
+              onChange={(value)=>{handleChange(value,'midentifer')}}
+              clearAll={clearAll}
+            />
+          </div>
+          <div style={{ marginLeft: '50px', marginRight: '50px' }}>
+            <CheckInput
+              value={params.mnumber}
+              label='上级设备编号'
+              onChange={(value)=>{handleChange(value,'mnumber')}}
+              clearAll={clearAll}
+            />
+          </div>
+          <div>
+            <CheckSelect
+              value={params.keystatus}
+              label='密钥装配状态'
+              onChange={(value)=>{handleChange(value,'keystatus')}}
+              clearAll={clearAll}
+            />
+          </div>
+        </div>
+        <div>
+            <div style={{ display: 'flex',justifyContent:'flex-end' }}>
+              <ButtonComp text={'查找'} style={{ marginRight: 20 }} onClick={() => { handleSearch() }} />
+              <ButtonComp text={'复位'} onClick={() => { handleClear() }} />
+            </div>
+          </div>
+      </div>
+
+      <div style={{ marginTop: '20px' }}>
+        <Table
+          columns={columns}
+          // loading={tableLoading}
+          dataSource={result?.list}
+          pagination={{
+            size: 'default',
+            showQuickJumper: true,
+            showSizeChanger: true,
+            pageSizeOptions: ['10', '15', '50', '100', '200'],
+            hideOnSinglePage: true,
+            pageSize: params.limit,
+            current: params.page,
+            position: ["bottomRight"],
+            onChange: (page, pagesize) => {
+              params.page = page;
+              params.limit = pagesize;
+              setParams({ ...params });
+              getList();
+            },
+            total: result?.count,
+            showTotal: (total, range) => <span>共<span style={{ color: '#165DFF' }}> {total} </span>条数据</span>
+          }}
+        />
+      </div>
+
+      <div className='flex_aiC_jB mt30 mb30'>
+        <div className='flex_aiC'>
+          <ButtonComp style={{ marginRight: 20 }} text={'第一页'} onClick={() => { }} />
+          <ButtonComp style={{ marginRight: 20 }} text={'上一页'} onClick={() => { }} />
+          <ButtonComp style={{ marginRight: 20 }} text={'下一页'} onClick={() => { }} />
+          <ButtonComp text={'最后一页'} onClick={() => { }} />
+        </div>
+        <div className='flex_aiC'>
+          <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'查看'} onClick={() => { }} />
+          <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'退出'} onClick={() => { }} />
+        </div>
+      </div>
+      
+    </section>
+  )
+
+}
+
+export default MachineRegister

src/pages/SecretManage/SecretInfo/index.tsx

@@ -0,0 +1,109 @@
+import { FC, useEffect, useState } from 'react';
+import { history, useLocation, useParams } from 'umi';
+import { Table, Input } from 'antd';
+// import styles from './index.less';
+import ContentWarp from '@/components/ContentWarp';
+import ButtonComp from '@/components/ButtonComp';
+
+interface PageProps {
+
+}
+
+const ReceiveSecret: FC<PageProps> = ({ }) => {
+  const [result, setResult] = useState({});
+  const [params, setParams] = useState({
+    page: 1,
+    limit: 10,
+  })
+
+  const columns = [{
+    title: '序号',
+    dataIndex: 'name',
+    key: 'name',
+    ellipsis: true,
+    fixed: 'left',
+    width: 60,
+    render: (text: any, record: any, index: any) => {
+      return (
+        <span style={{ color: "#333" }}>{params.limit * (params.page - 1) + index + 1}</span>
+      )
+    }
+  }, {
+    title: '密钥代号',
+    dataIndex: 'school_info',
+    key: 'school_info',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span style={{ color: "#333" }}>{text.name}</span>
+  }, {
+    title: '密钥编号',
+    dataIndex: 'department_info',
+    key: 'department_info',
+    ellipsis: true,
+    render: (text: any, record: any, index: any) => <span style={{ color: "#333" }}>{text.name}</span>
+  }, {
+    title: '密钥组长',
+    dataIndex: 'teacher_count',
+    key: 'teacher_count',
+    ellipsis: true,
+    render: (text: any, record: any) => <span style={{ color: '#165DFF', cursor: 'pointer' }} onClick={() => { history.push(`/colleges/${record?.school_info?.id}/statistics`) }}>{text}</span>
+  }, {
+    title: '密钥组数',
+    dataIndex: 'student_count',
+    key: 'student_count',
+    ellipsis: true,
+    render: (text: any, record: any) => <span style={{ color: '#165DFF', cursor: 'pointer' }} onClick={() => { history.push(`/colleges/${record?.school_info?.id}/statistics`) }}>{text}</span>
+  }, {
+    title: '密钥文件名称',
+    dataIndex: 'type_cn',
+    key: 'type_cn',
+    ellipsis: true,
+    render: (text: any) => <span style={{ color: "#333" }}>{text}</span>
+  },]
+
+  const getList = () => {
+
+  }
+
+  const handleSearch = () => {
+
+  }
+
+  return (
+    <section style={{ margin: '20px' }}>
+      <ContentWarp text='本设备可用的预制密钥体信息'>
+        <div style={{ margin: '20px' }}>
+          <Table
+            columns={columns}
+            // loading={tableLoading}
+            dataSource={result?.list}
+            pagination={{
+              size: 'default',
+              showQuickJumper: true,
+              showSizeChanger: true,
+              pageSizeOptions: ['10', '15', '50', '100', '200'],
+              hideOnSinglePage: true,
+              pageSize: params.limit,
+              current: params.page,
+              position: ["bottomRight"],
+              onChange: (page, pagesize) => {
+                params.page = page;
+                params.limit = pagesize;
+                setParams({ ...params });
+                getList();
+              },
+              total: result?.count,
+              showTotal: (total, range) => <span>共<span style={{ color: '#165DFF' }}> {total} </span>条数据</span>
+            }}
+          />
+          <div style={{ marginTop: '50px', display: 'flex', alignItems: 'center' }}>
+            <span>密钥代号</span>
+            <Input placeholder="请输入密钥代号" style={{ width: '260px',marginLeft:'10px' }} />
+            <ButtonComp style={{ marginLeft: 30 }} type={'confirm'} text={'检索'} onClick={() => { handleSearch() }} />
+          </div>
+        </div>
+      </ContentWarp>
+    </section>
+  )
+}
+
+export default ReceiveSecret