搭建完GLQD模块的页面

master_basic
鲁誉程 12 months ago
parent 451803b302
commit cf9e0ca82c

@ -14,7 +14,7 @@ export default function Page() {
return (
<div className={styles.params_warp}>
<div className={`${styles.params_warp}`}>
<ContentWarp text={'管理文件配置'}>
<div className='pd20'></div>
<div className='line'></div>
@ -22,7 +22,6 @@ export default function Page() {
<Form
form={form}
onFinish={onFinish}
labelCol={{ span: 2 }}
>
<Form.Item
name="a3"
@ -34,7 +33,10 @@ export default function Page() {
<Select
style={{ width: 560 }}
onChange={(e) => {}}
options={[]}
options={[
{label: '前端机平台', value: 1},
{label: '后端机平台', value: 2}
]}
/>
</Form.Item>
<Form.Item
@ -47,7 +49,10 @@ export default function Page() {
<Select
style={{ width: 560 }}
onChange={(e) => {}}
options={[]}
options={[
{label: '前端机平台', value: 1},
{label: '后端机平台', value: 2}
]}
/>
</Form.Item>
<Form.Item
@ -60,7 +65,10 @@ export default function Page() {
<Select
style={{ width: 560 }}
onChange={(e) => {}}
options={[]}
options={[
{label: 'no', value: 1},
{label: 'yes', value: 2}
]}
/>
</Form.Item>
<Form.Item

@ -0,0 +1,6 @@
.params_warp1 {
[class~='ant-form-item-label'] {
width: 80px;
justify-content: flex-end;
}
}

@ -1,5 +1,6 @@
import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import styles1 from './index.less';
import { Form, Input } from 'antd';
import ButtonComp from '@/components/ButtonComp';
@ -14,7 +15,7 @@ export default function Page() {
return (
<div className={styles.params_warp}>
<div className={`${styles.params_warp} ${styles1.params_warp1}`}>
<ContentWarp text={'网络参数配置'}>
<div className='pd20'></div>
<div className='line'></div>
@ -22,7 +23,6 @@ export default function Page() {
<Form
form={form}
onFinish={onFinish}
labelCol={{ span: 2 }}
>
<Form.Item
name="a3"

@ -9,8 +9,6 @@ import { tableTheme } from '@/utils/theme';
export default function Page() {
const [form] = Form.useForm();
const [tableData, setTableData] = useState([]);
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
const [total, setTotal] = useState(0);
const onFinish = (values: any) => {
@ -22,22 +20,37 @@ export default function Page() {
title: '序号',
key: 'index',
align: 'center',
width: 100,
render: (text: any, record: any, index: any) => {
return <span>{(page - 1) * limit + index + 1}</span>;
return <span>{index + 1}</span>;
},
}, {
title: '服务名称',
title: '单位名称',
dataIndex: 'name',
key: 'name',
align: 'center',
render: (text: any) => <a>{text}</a>,
}, {
title: '服务器IP',
title: '设备名称',
dataIndex: 'age',
key: 'age',
align: 'center',
}, {
title: '服务端口',
title: '设备IP',
dataIndex: 'age',
key: 'age',
align: 'center',
}, {
title: '电话号码',
dataIndex: 'name',
key: 'name',
align: 'center',
}, {
title: '设备属性',
dataIndex: 'age',
key: 'age',
align: 'center',
}, {
title: '设备型号',
dataIndex: 'age',
key: 'age',
align: 'center',
@ -54,17 +67,6 @@ export default function Page() {
<div className='pd20'></div>
<div className='line'></div>
<div className='pd20 pb100'>
<Form form={form} layout={'inline'} onFinish={onFinish} className='mb20'>
<Form.Item name="aaa" label="普密对外服务器IP仅Ⅱ型隔离器时需配置此项" rules={[{ required: true, message: '请输入普密对外服务器IP' }]} >
<Input style={{ width: '280px' }} />
</Form.Item>
<div style={{ display: 'flex', marginLeft: 20 }}>
<ButtonComp text={'获取普密信息'} onClick={() => form.submit()} />
</div>
<div className={styles.erroInfo} style={{color: '#333'}}></div>
</Form>
<ConfigProvider theme={tableTheme}>
<Table
scroll={{y: 451}}
@ -77,6 +79,17 @@ export default function Page() {
/>
</ConfigProvider>
<Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
<Form.Item name="aaa" label="普密对外服务器IP仅Ⅱ型隔离器时需配置此项" rules={[{ required: true, message: '请输入普密对外服务器IP' }]} >
<Input style={{ width: '280px' }} />
</Form.Item>
<div style={{ display: 'flex', marginLeft: 20 }}>
<ButtonComp text={'获取普密信息'} onClick={() => form.submit()} />
</div>
</Form>
<div className='mt20'></div>
<div className={styles.btn_warp}>
<ButtonComp text={'发送数据'} onClick={() => { }} />
</div>

@ -10,8 +10,6 @@ import { tableTheme } from '@/utils/theme';
export default function Page() {
const [form] = Form.useForm();
const [tableData, setTableData] = useState([]);
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(10);
const [total, setTotal] = useState(0);
const onFinish = (values: any) => {
@ -22,16 +20,16 @@ export default function Page() {
{
title: '序号',
key: 'index',
width: 100,
align: 'center',
render: (text: any, record: any, index: any) => {
return <span>{(page - 1) * limit + index + 1}</span>;
return <span>{index + 1}</span>;
},
}, {
title: '服务名称',
dataIndex: 'name',
key: 'name',
align: 'center',
render: (text: any) => <a>{text}</a>,
}, {
title: '服务器IP',
dataIndex: 'age',
@ -63,7 +61,7 @@ export default function Page() {
<Form.Item name="bbb" label="服务IP" rules={[{ required: true, message: '请输入服务名称' }]} >
<Input style={{ width: '280px' }} />
</Form.Item>
<div style={{ display: 'flex', marginLeft: 20 }}>
<div style={{ display: 'flex', marginLeft: 24 }}>
<div className='mr20'>
<ButtonComp type={'cancel'} text={'端口'} onClick={() => { }} />
</div>

@ -0,0 +1,6 @@
.params_warp1 {
[class~='ant-form-item-label'] {
width: 110px;
justify-content: flex-end;
}
}

@ -1,9 +1,113 @@
import styles from './index.less';
import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import styles1 from './index.less';
import { Form, Input, Select } from 'antd';
import ButtonComp from '@/components/ButtonComp';
// 网络GLQ配置 --> 远程文件配置--> VPN策略
export default function Page() {
const [form] = Form.useForm();
const onFinish = (values: any) => {
console.log('表单提交:', values);
};
return (
<div>
{'网络GLQ配置 --> 远程文件配置--> VPN策略'}
<div className={`${styles.params_warp} ${styles1.params_warp1}`}>
<ContentWarp text={'VPN策略配置'}>
<div className='pd20'>VPN</div>
<div className='line'></div>
<div className='pd20 pb100'>
<Form
form={form}
onFinish={onFinish}
>
<Form.Item
name="a3"
label="单位名称"
rules={[
{ required: true, message: '请输入单位名称' },
]}
>
<Input style={{ width: '560px' }} />
</Form.Item>
<Form.Item
name="a2"
label="设备名称"
rules={[
{ required: true, message: '请输入设备名称' },
]}
>
<Input style={{ width: '560px' }} />
</Form.Item>
<Form.Item
name="a1"
label="设备IP"
rules={[
{ required: true, message: '请输入设备IP' },
]}
>
<Input style={{ width: '560px' }} />
</Form.Item>
<Form.Item
name="a5"
label="设备ID"
rules={[
{ required: true, message: '请输入设备ID' },
]}
>
<Input style={{ width: '560px' }} />
</Form.Item>
<Form.Item
name="a53"
label="报文通信策略"
rules={[
{ required: true, message: '请选择报文通信策略' },
]}
>
<Select
style={{ width: 560 }}
onChange={(e) => {}}
options={[
{label: '加密通信', value: 1},
{label: '数据明传', value: 2},
{label: '通信阻断', value: 3}
]}
/>
</Form.Item>
<Form.Item
name="a21"
label="PING通信策略"
rules={[
{ required: true, message: '请选择PING通信策略' },
]}
>
<Select
style={{ width: 560 }}
onChange={(e) => {}}
options={[
{label: '允许互PING', value: 1},
{label: '阻断互PING', value: 2}
]}
/>
</Form.Item>
</Form>
<div style={{display: 'flex', alignItems: 'center'}}>
<div className='mr20'>CtrlShift</div>
<ButtonComp text={'提交'} onClick={() => form.submit()} />
</div>
<div className={styles.btn_warp}>
<div className='mr20'>
<ButtonComp text={'发送数据'} onClick={() => { }} />
</div>
<ButtonComp type={'cancel'} text={'信息清空'} onClick={() => form.resetFields()} />
</div>
</div>
</ContentWarp>
</div>
);
}
}

@ -0,0 +1,6 @@
.params_warp1 {
[class~='ant-form-item-label'] {
width: 100px;
justify-content: flex-end;
}
}

@ -1,5 +1,6 @@
import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import styles1 from './index.less';
import { Form, Input } from 'antd';
import ButtonComp from '@/components/ButtonComp';
@ -14,7 +15,7 @@ export default function Page() {
return (
<div className={styles.params_warp}>
<div className={`${styles.params_warp} ${styles1.params_warp1}`}>
<ContentWarp text={'密码机初装'}>
<div className='pd20'></div>
<div className='line'></div>
@ -22,7 +23,6 @@ export default function Page() {
<Form
form={form}
onFinish={onFinish}
labelCol={{ span: 2 }}
>
<Form.Item
name="a3"

@ -10,6 +10,10 @@
margin-right: 20px;
}
.mt20 {
margin-top: 20px;
}
.ml20 {
margin-left: 20px;
}

Loading…
Cancel
Save