pu428f3pz
/
datacenter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

3个开通完成

Browse Source
dev
陈博文 3 years ago
parent bb13fc02c1
commit 842a217234
16 changed files with 395 additions and 821 deletions
Show Stats Download Patch File Download Diff File

5
.umirc.ts
Unescape View File

@ -40,6 +40,11 @@ export default defineConfig({
component: '@/pages/Equipment/List/DataCenter', component: '@/pages/Equipment/List/DataCenter',
exact: true, exact: true,
}, },
{
path: '/equipment/localManager',
component: '@/pages/Equipment/List/LocalManager',
exact: true,
},
{ {
path: '/equipment', path: '/equipment',
component: '@/pages/Equipment/Header', component: '@/pages/Equipment/Header',

29
src/pages/Equipment/List/Certificate/Step1/index.less
Unescape View File

@ -1,29 +0,0 @@
.page {
background-color: #fff;
width: 1200px;
margin: 0 auto;
min-height: 600px;
overflow: hidden;
padding-bottom: 20px;
.name {
display: flex;
align-items: center;
margin-bottom: 50px;
margin-top: 30px;
b {
width: 6px;
height: 20px;
background: #464f66;
border-radius: 4px;
display: inline-block;
margin-right: 4px;
}
span {
font-size: 24px;
font-weight: 500;
color: #232b40;
}
}
}

182
src/pages/Equipment/List/Certificate/Step1/index.tsx
Unescape View File

@ -1,182 +0,0 @@
import styles from './index.less';
import { Input, Button, Row, Form, Select, message } from 'antd';
import { FC } from 'react';
import { connect, Dispatch, BasicInfoModelState } from 'umi';
import Fetch from '@/utils/fetch';
interface PageProps {
basic: BasicInfoModelState;
dispatch: Dispatch;
}
const Page: FC<PageProps> = ({ basic, dispatch }) => {
const [form] = Form.useForm();
const { certificateInfo } = basic;
const { step } = certificateInfo;
console.log(certificateInfo, 'certificateInfo');
const handleValuesChange = (v: any) => {
dispatch({
type: 'basic/setCertificateInfo',
payload: v,
});
};
const testLink = async () => {
const res = await Fetch('/openi/resource/dbTestConnection', {
method: 'post',
data: {
dbType: certificateInfo.dbType,
dbDrive: certificateInfo.dbDrive,
dbIp: certificateInfo.dbIp,
dbPort: certificateInfo.dbPort,
dbName: certificateInfo.dbName,
dbUser: certificateInfo.dbUser,
dbPasswd: certificateInfo.dbPasswd,
},
});
if (res.result === 'success') {
const data = res?.data?.[0];
dispatch({
type: 'basic/setCertificateInfo',
payload: {
dbIsConn: data?.isConn,
},
});
} else {
message.error(res.errorMsg);
}
};
return (
<div
style={{ display: step === 1 ? 'block' : 'none' }}
className={styles.page}
>
<div className={styles.name}>
<b /> <span>数据库配置</span>
</div>
<Form
form={form}
colon={false}
layout="horizontal"
labelCol={{ span: 5 }}
size="large"
wrapperCol={{ span: 14 }}
onValuesChange={handleValuesChange}
onFinish={() => {
dispatch({
type: 'basic/setCertificateInfo',
payload: { step: 2 },
});
}}
>
<Form.Item
label="数据库类型"
name="dbType"
rules={[
{
required: true,
message: `请输入数据库类型`,
},
]}
>
<Select>
<Select.Option key={'ORACEL'}>ORACEL</Select.Option>
<Select.Option key={'SQL'}>SQL</Select.Option>
<Select.Option key={'SERVER'}>SERVER</Select.Option>
</Select>
</Form.Item>
<Form.Item
label="数据库驱动"
name="dbDrive"
rules={[
{
required: true,
message: `请输入数据库驱动`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="IP地址"
name="dbIp"
rules={[
{
required: true,
message: `请输入IP地址`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="端口号"
name="dbPort"
rules={[
{
required: true,
message: `请输入端口号`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="数据库名"
name="dbName"
rules={[
{
required: true,
message: `请输入数据库名`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="数据库用户名"
name="dbUser"
rules={[
{
required: true,
message: `请输入数据库用户名`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="数据库密码"
name="dbPasswd"
rules={[
{
required: true,
message: `请输入数据库密码`,
},
]}
>
<Input.Password autoComplete="new-password" />
</Form.Item>
</Form>
<Row justify="end">
<Button onClick={testLink} type="primary">
测试链接
</Button>
<Button
type="primary"
ghost
onClick={() => form.submit()}
className="ml20"
>
下一步
</Button>
</Row>
</div>
);
};
export default connect(({ basic }: { basic: BasicInfoModelState }) => ({
basic,
}))(Page);

51
src/pages/Equipment/List/Certificate/Step2/index.less
Unescape View File

@ -1,51 +0,0 @@
.page {
background-color: #fff;
width: 1200px;
margin: 0 auto;
min-height: 600px;
overflow: hidden;
padding-bottom: 20px;
.name {
display: flex;
align-items: center;
margin-bottom: 50px;
margin-top: 30px;
b {
width: 6px;
height: 20px;
background: #464f66;
border-radius: 4px;
display: inline-block;
margin-right: 4px;
}
span {
font-size: 24px;
font-weight: 500;
color: #232b40;
}
}
.title {
display: flex;
align-items: center;
margin-left: 60px;
margin-bottom: 30px;
b {
width: 4px;
height: 14px;
background: #464f66;
border-radius: 4px;
display: inline-block;
margin-right: 4px;
}
span {
font-size: 18px;
font-weight: 500;
color: #464f66;
}
}
}

169
src/pages/Equipment/List/Certificate/Step2/index.tsx
Unescape View File

@ -1,169 +0,0 @@
import styles from './index.less';
import { Input, Button, Row, Form } from 'antd';
import { FC } from 'react';
import { connect, Dispatch, BasicInfoModelState } from 'umi';
interface PageProps {
basic: BasicInfoModelState;
dispatch: Dispatch;
}
const Page: FC<PageProps> = ({ basic, dispatch }) => {
const [form] = Form.useForm();
const { certificateInfo } = basic;
const { step } = certificateInfo;
console.log(certificateInfo, 'certificateInfo');
const handleValuesChange = (v: any) => {
dispatch({
type: 'basic/setCertificateInfo',
payload: v,
});
};
return (
<div
style={{ display: step === 2 ? 'block' : 'none' }}
className={styles.page}
>
<div className={styles.name}>
<b /> <span>发布配置</span>
</div>
<Form
form={form}
colon={false}
layout="horizontal"
labelCol={{ span: 5 }}
size="large"
wrapperCol={{ span: 14 }}
onValuesChange={handleValuesChange}
onFinish={() => {
dispatch({
type: 'basic/setCertificateInfo',
payload: { step: 3 },
});
}}
>
<div className={styles.title}>
<b /> <span>数据库配置</span>
</div>
<Form.Item
label="服务器地址"
name="targetIp"
rules={[
{
required: true,
message: `请输入服务器地址`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="服务器端口"
name="targetPort"
rules={[
{
required: true,
message: `请输入服务器端口`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="用户DN"
name="targetUserdn"
rules={[
{
required: true,
message: `请输入用户DN`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="用户口令"
name="targetPasswd"
rules={[
{
required: true,
message: `请输入用户口令`,
},
]}
>
<Input.Password autoComplete="new-password" />
</Form.Item>
<div className={styles.title}>
<b /> <span>用户证书发布配置</span>
</div>
<Form.Item
label="文件路径"
name="certUrl"
rules={[
{
required: true,
message: `请输入文件路径`,
},
]}
>
<Input />
</Form.Item>
<div className={styles.title}>
<b /> <span>CRL发布配置</span>
</div>
<Form.Item
label="CRL发布点中的证书数量"
name="certNum"
rules={[
{
required: true,
message: `请输入CRL发布点中的证书数量`,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="CRL发布周期"
name="certCycle"
rules={[
{
required: true,
message: `请输入CRL发布周期`,
},
]}
>
<Input />
</Form.Item>
</Form>
<Row justify="end">
<Button
onClick={() => {
dispatch({
type: 'basic/setCertificateInfo',
payload: { step: 1 },
});
}}
type="primary"
ghost
>
上一步
</Button>
<Button
type="primary"
ghost
onClick={() => form.submit()}
className="ml20"
>
下一步
</Button>
</Row>
</div>
);
};
export default connect(({ basic }: { basic: BasicInfoModelState }) => ({
basic,
}))(Page);

48
src/pages/Equipment/List/Certificate/Step3/index.less
Unescape View File

@ -1,48 +0,0 @@
.page {
background-color: #fff;
width: 1200px;
margin: 0 auto;
min-height: 600px;
overflow: hidden;
padding-bottom: 20px;
.name {
display: flex;
align-items: center;
margin-bottom: 50px;
margin-top: 30px;
b {
width: 6px;
height: 20px;
background: #464f66;
border-radius: 4px;
display: inline-block;
margin-right: 4px;
}
span {
font-size: 24px;
font-weight: 500;
color: #232b40;
}
}
.row {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
sup {
color: red;
margin-top: 13px;
margin-right: 4px;
font-size: 14px;
}
button {
margin-left: 30px;
margin-right: 10px;
}
}
}

141
src/pages/Equipment/List/Certificate/Step3/index.tsx
Unescape View File

@ -1,141 +0,0 @@
import styles from './index.less';
import { message, Button, Row, Form } from 'antd';
import Fetch from '@/utils/fetch';
import { useState, FC } from 'react';
import { connect, Dispatch, BasicInfoModelState } from 'umi';
interface PageProps {
basic: BasicInfoModelState;
dispatch: Dispatch;
}
const Page: FC<PageProps> = ({ basic, dispatch }) => {
const { certificateInfo } = basic;
const { step, importCertFile1, importCertFile2 } = certificateInfo;
const [file1, setFile1] = useState<any>(null);
const [file2, setFile2] = useState<any>(null);
const [upload, setUpload] = useState<boolean>(true);
console.log(certificateInfo, 'certificateInfo');
const handleFile = (type: string) => {
var inputObj = document.createElement('input');
inputObj.setAttribute('id', '_ef');
inputObj.setAttribute('type', 'file');
inputObj.setAttribute('style', 'visibility:hidden');
document.body.appendChild(inputObj);
inputObj.click();
inputObj.onchange = (e: any) => {
if (type === 'file1') {
setFile1(e?.target?.files?.[0]);
} else {
setFile2(e?.target?.files?.[0]);
}
};
};
const uploadFile = async () => {
const data: any = new FormData();
data.append('files', file1);
data.append('files', file2);
const res = await Fetch('/openi/resource/importFiles', {
method: 'post',
data,
});
if (res.result === 'success') {
message.success('上传成功');
const data = res?.data?.[0];
dispatch({
type: 'basic/setCertificateInfo',
payload: {
importCertFile1: data[0],
importCertFile2: data[1],
},
});
setUpload(false);
}
};
const skip = async () => {
const res = await Fetch('/openi/resource/getCertInfomation');
if (res.errorCode === 500) {
message.error(res?.errorMsg);
return;
}
if (res.result === 'success') {
const data = res?.data?.[0];
dispatch({
type: 'basic/setCertificateInfo',
payload: {
result: data,
},
});
dispatch({
type: 'basic/setCertificateInfo',
payload: { step: 4 },
});
}
};
return (
<div
style={{ display: step === 3 ? 'block' : 'none' }}
className={styles.page}
>
<div className={styles.name}>
<b /> <span>导入颁发机构证书</span>
</div>
<div className={styles.row}>
<sup>*</sup>
<div>请选择ECCDSA359算法颁发机构证书链文件（*.p7b）</div>
<Button onClick={() => handleFile('file1')} type="primary" ghost>
{!!file1 ? '已选择' : '浏览'}
</Button>
<span>{importCertFile1}</span>
</div>
<div className={styles.row}>
<sup>*</sup>
<div>请选择ECCDSA279算法颁发机构证书链文件（*.p7b）</div>
<Button onClick={() => handleFile('file2')} type="primary" ghost>
{!!file2 ? '已选择' : '浏览'}
</Button>
<span>{importCertFile2}</span>
</div>
<div className={styles.row}>
<Button
disabled={!(file1 && file2)}
onClick={uploadFile}
type="primary"
>
上传至服务器
</Button>
</div>
<Row justify="end">
<Button
onClick={() => {
dispatch({
type: 'basic/setCertificateInfo',
payload: { step: 2 },
});
}}
type="primary"
ghost
>
上一步
</Button>
<Button
disabled={upload}
type="primary"
ghost
className="ml20"
onClick={skip}
>
下一步
</Button>
</Row>
</div>
);
};
export default connect(({ basic }: { basic: BasicInfoModelState }) => ({
basic,
}))(Page);

71
src/pages/Equipment/List/Certificate/Step4/index.less
Unescape View File

@ -1,71 +0,0 @@
.page {
background-color: #fff;
width: 1200px;
margin: 0 auto;
min-height: 600px;
overflow: hidden;
padding-bottom: 20px;
.name {
display: flex;
align-items: center;
margin-bottom: 50px;
margin-top: 30px;
b {
width: 6px;
height: 20px;
background: #464f66;
border-radius: 4px;
display: inline-block;
margin-right: 4px;
}
span {
font-size: 24px;
font-weight: 500;
color: #232b40;
}
}
.title {
display: flex;
align-items: center;
margin-left: 60px;
margin-bottom: 10px;
b {
width: 4px;
height: 14px;
background: #464f66;
border-radius: 4px;
display: inline-block;
margin-right: 4px;
}
span {
font-size: 18px;
font-weight: 500;
color: #464f66;
}
}
.row {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 0;
span {
margin: 0 10px;
width: 50%;
font-size: 14px;
color: #333;
}
span:first-child {
text-align: right;
color: #464f66;
}
}
}

106
src/pages/Equipment/List/Certificate/Step4/index.tsx
Unescape View File

@ -1,106 +0,0 @@
import styles from './index.less';
import { Button, Row, message } from 'antd';
import { FC } from 'react';
import Fetch from '@/utils/fetch';
import { connect, Dispatch, BasicInfoModelState, history } from 'umi';
interface PageProps {
basic: BasicInfoModelState;
dispatch: Dispatch;
}
const Page: FC<PageProps> = ({ basic, dispatch }) => {
const { certificateInfo } = basic;
const { step, result } = certificateInfo;
const handleClick = async () => {
const res = await Fetch('/openi/resource/openCertNow', {
method: 'post',
data: certificateInfo,
});
if (res.result === 'success') {
message.success('开通证书系统成功');
history.replace('/basic/login');
}
};
return (
<div
style={{ display: step === 4 ? 'block' : 'none' }}
className={styles.page}
>
<div className={styles.name}>
<b /> <span>发布配置</span>
</div>
<div className={styles.title}>
<b /> <span>ECCDSA359颁发机构信息</span>
</div>
<div className={styles.row}>
<span>颁发证书主题</span>
<span>{result?.[0]}</span>
</div>
<div className={styles.row}>
<span>证书序列号</span>
<span>{result?.[1]}</span>
</div>
<div className={styles.row}>
<span>证书主题</span>
<span>{result?.[2]}</span>
</div>
<div className={styles.row}>
<span>起始时间</span>
<span>{result?.[3]}</span>
</div>
<div className={styles.row}>
<span>结束时间</span>
<span>{result?.[4]}</span>
</div>
<div className={styles.title}>
<b /> <span>ECCDSA281颁发机构信息</span>
</div>
<div className={styles.row}>
<span>颁发证书主题</span>
<span>{result?.[5]}</span>
</div>
<div className={styles.row}>
<span>证书序列号</span>
<span>{result?.[6]}</span>
</div>
<div className={styles.row}>
<span>证书主题</span>
<span>{result?.[7]}</span>
</div>
<div className={styles.row}>
<span>起始时间</span>
<span>{result?.[8]}</span>
</div>
<div className={styles.row}>
<span>结束时间</span>
<span>{result?.[9]}</span>
</div>
<Row justify="end">
<Button
onClick={() => {
dispatch({
type: 'basic/setCertificateInfo',
payload: { step: 3 },
});
}}
type="primary"
ghost
>
上一步
</Button>
<Button type="primary" ghost className="ml20" onClick={handleClick}>
确认
</Button>
</Row>
</div>
);
};
export default connect(({ basic }: { basic: BasicInfoModelState }) => ({
basic,
}))(Page);

4
src/pages/Equipment/List/Certificate/index.less
Unescape View File

@ -1,4 +0,0 @@
.page {
background-color: #fff;
margin-top: 20px;
}

18
src/pages/Equipment/List/Certificate/index.tsx
Unescape View File

@ -1,18 +0,0 @@
import styles from './index.less';
import { FC } from 'react';
import Step1 from './Step1';
import Step2 from './Step2';
import Step3 from './Step3';
import Step4 from './Step4';
const Page: FC<{}> = () => {
return (
<div className={styles.page}>
<Step1 />
<Step2 />
<Step3 />
<Step4 />
</div>
);
};
export default Page;

9
src/pages/Equipment/List/DataCenter/index.tsx
Unescape View File

@ -28,6 +28,7 @@ const Page: FC<PageProps> = () => {
const twoClick = async () => { const twoClick = async () => {
if (!value) { if (!value) {
message.warn('物理标识不能为空'); message.warn('物理标识不能为空');
return;
} }
const res = await Fetch('/openi/dataCenter/setHostFlag', { const res = await Fetch('/openi/dataCenter/setHostFlag', {
method: 'post', method: 'post',
@ -41,6 +42,10 @@ const Page: FC<PageProps> = () => {
}; };
const threeClick = async () => { const threeClick = async () => {
if (!file?.name) {
message.warn('初装资源不能为空');
return;
}
const data: any = new FormData(); const data: any = new FormData();
data.append('file', file); data.append('file', file);
const res = await Fetch('/openi/dataCenter/resourceImport', { const res = await Fetch('/openi/dataCenter/resourceImport', {
@ -111,8 +116,8 @@ const Page: FC<PageProps> = () => {
注入 注入
</Button> </Button>
</p> </p>
<Button disabled={!file?.name} type="primary" onClick={threeClick}> <Button type="primary" onClick={threeClick}>
确定 配置开通
</Button> </Button>
<aside>注入资源后完成密码卡初装，点击下一步导入</aside> <aside>注入资源后完成密码卡初装，点击下一步导入</aside>
{/* <section>开通过程共 6 步，当前第 3 步</section> */} {/* <section>开通过程共 6 步，当前第 3 步</section> */}

BIN
src/pages/Equipment/List/LocalManager/img/bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 MiB

BIN
src/pages/Equipment/List/LocalManager/img/c.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 706 KiB

211
src/pages/Equipment/List/LocalManager/index.less
Unescape View File

@ -0,0 +1,211 @@
.page {
height: 100vh;
background: url('./img/bg.png') no-repeat center center;
background-size: cover;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.red {
color: #ff3f41;
}
.box {
width: 902px;
height: 611px;
background: #ffffff;
border-radius: 20px;
display: flex;
background: url('./img/c.png') no-repeat center center;
background-size: cover;
.one {
width: 100%;
height: 470px;
margin-top: 130px;
display: flex;
flex-direction: column;
align-items: center;
> div {
font-size: 16px;
font-weight: bold;
color: #ffffff;
margin-top: 50px;
padding-right: 110px;
}
aside {
display: flex;
margin-top: 50px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
ul {
padding-left: 15px;
li {
list-style: none;
display: flex;
align-items: center;
margin-bottom: 20px;
cursor: pointer;
b {
display: inline-block;
width: 18px;
height: 18px;
background: #376042;
border: 2px solid #2fffdb;
border-radius: 50%;
margin-right: 10px;
}
.a {
position: relative;
&::after {
content: '';
width: 10px;
height: 10px;
position: absolute;
background-color: #2fffdb;
border-radius: 50%;
right: 2px;
top: 2px;
}
}
}
}
}
button {
width: 208px;
height: 42px;
background: rgba(22, 93, 255, 0.5);
border-radius: 4px;
}
> b {
color: #fff;
margin-top: 76px;
}
}
.two {
width: 100%;
height: 470px;
margin-top: 130px;
display: flex;
flex-direction: column;
align-items: center;
> span {
font-size: 22px;
font-weight: bold;
color: #ffffff;
margin-top: 38px;
}
> div {
font-size: 16px;
font-weight: bold;
color: #ffffff;
margin-top: 52px;
}
input {
width: 208px;
height: 40px;
border-radius: 4px;
border: 2px solid #2fffdb;
margin-top: 30px;
background-color: transparent;
color: #2fffdb;
}
button {
width: 208px;
height: 42px;
border-radius: 4px;
margin-top: 70px;
background: rgba(22, 93, 255, 0.5);
}
aside {
font-size: 16px;
font-weight: bold;
color: #ffffff;
margin-top: 66px;
}
}
.three {
width: 100%;
height: 470px;
margin-top: 130px;
display: flex;
flex-direction: column;
align-items: center;
> span {
font-size: 22px;
font-weight: bold;
color: #ffffff;
margin-top: 38px;
}
> div {
font-size: 16px;
font-weight: bold;
color: #ffffff;
margin-top: 52px;
}
p {
display: flex;
align-items: center;
margin-top: 10px;
input {
width: 160px;
height: 40px;
border-radius: 4px;
border: 2px solid #2fffdb;
background-color: transparent;
color: #2fffdb;
}
.btn {
width: 40px;
height: 40px;
background: #2fffdb;
border-radius: 4px;
border: 2px solid #2fffdb;
color: #10291d;
margin-left: 10px;
line-height: 38px;
text-align: center;
cursor: pointer;
}
}
> button {
width: 208px;
height: 42px;
border-radius: 4px;
margin-top: 70px;
background: rgba(22, 93, 255, 0.5);
}
aside {
font-size: 16px;
font-weight: bold;
color: #ffffff;
margin-top: 66px;
}
}
}
}

172
src/pages/Equipment/List/LocalManager/index.tsx
Unescape View File

@ -0,0 +1,172 @@
import styles from './index.less';
import { message, Input, Button, Row, Modal, Form, Tabs } from 'antd';
import Fetch from '@/utils/fetch';
import { useEffect, useState, FC, Fragment } from 'react';
import {
connect,
ConnectProps,
Dispatch,
BasicInfoModelState,
history,
} from 'umi';
import { cloneDeep } from 'lodash';
interface PageProps {}
const Page: FC<PageProps> = () => {
const [active, setActive] = useState<number>(1);
const [value, setValue] = useState<string>('');
const [file, setFile] = useState<any>(null);
const [terminalType, setTerminalType] = useState<string>('');
const oneClick = async () => {
if (!terminalType) {
message.warn('请选择终端类型');
return;
}
const res = await Fetch('/openi/localManager/startOpen', {
method: 'post',
data: {
terminalType,
},
});
if (res.result === 'success') {
setActive(2);
}
};
const twoClick = async () => {
if (!value) {
message.warn('物理标识不能为空');
return;
}
const res = await Fetch('/openi/localManager/setHostFlag', {
method: 'post',
data: {
hostFlag: value,
},
});
if (res.result === 'success') {
setActive(3);
}
};
const threeClick = async () => {
if (!file?.name) {
message.warn('初装资源不能为空');
return;
}
const data: any = new FormData();
data.append('file', file);
const res = await Fetch('/openi/dataCenter/resourceImport', {
method: 'post',
data,
});
if (res.result === 'success') {
message.success('操作成功');
history.replace('/equipment/index');
}
};
const handleFile = () => {
var inputObj = document.createElement('input');
inputObj.setAttribute('id', '_ef');
inputObj.setAttribute('type', 'file');
inputObj.setAttribute('style', 'visibility:hidden');
document.body.appendChild(inputObj);
inputObj.click();
inputObj.onchange = (e: any) => {
setFile(e?.target?.files?.[0]);
};
};
const items = [
{
name: '远程管理终端',
},
{
name: '本地管理终端',
},
{
name: '初装设备',
},
];
const renderOne = () => {
return (
<div className={styles.one}>
<div>
<span className="mr15">系统当前状态：</span>
<span className={styles.red}>未开通</span>
</div>
<aside>
<span>终端类型：</span>
<ul>
{items.map((e: any) => (
<li onClick={() => setTerminalType(e.name)}>
<b className={terminalType === e.name ? styles.a : ''} />
<span>{e.name}</span>
</li>
))}
</ul>
</aside>
<Button onClick={oneClick} type="primary">
下一步
</Button>
<b>
请选择<span className={styles.red}>远程管理终端</span>/
<span className={styles.red}>本地管理终端</span>/
<span className={styles.red}>初装设备</span>进行开通操作
</b>
</div>
);
};
const renderTwo = () => {
return (
<div className={styles.two}>
<span>设置宿主机物理标识</span>
<div>宿主机标识</div>
<Input value={value} onChange={(e: any) => setValue(e.target.value)} />
<Button type="primary" onClick={twoClick}>
设置
</Button>
<aside>设置设施密码卡和接入密码卡宿主机标识以便注入器自动加注</aside>
</div>
);
};
const renderThree = () => {
return (
<div className={styles.three}>
<span>注入初装资源</span>
<div>请注入设施密码卡的初装资源</div>
<p>
<Input
readOnly
value={file?.name || ''}
onChange={(e: any) => setValue(e.target.value)}
/>
<div className={styles.btn} onClick={handleFile}>
注入
</div>
</p>
<Button type="primary" onClick={threeClick}>
配置开通
</Button>
<aside>设置设施密码卡和接入密码卡宿主机标识以便注入器自动加注</aside>
</div>
);
};
return (
<div className={styles.page}>
<div className={styles.box}>
{active === 1 && renderOne()}
{active === 2 && renderTwo()}
{active === 3 && renderThree()}
</div>
</div>
);
};
export default Page;
Write Preview
Loading…
Cancel
Save