master_basic
parent
974041b860
commit
451803b302
@ -1,9 +1,86 @@
|
||||
import styles from './index.less';
|
||||
import ContentWarp from '@/components/ContentWarp';
|
||||
import styles from '../../index.less';
|
||||
import { Form, Input, Select } from 'antd';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
// 网络GLQ配置 --> 远程文件配置--> 管理配置
|
||||
export default function Page() {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
{'网络GLQ配置 --> 远程文件配置--> 管理配置'}
|
||||
<div className={styles.params_warp}>
|
||||
<ContentWarp text={'管理文件配置'}>
|
||||
<div className='pd20'>配置隔离器应用程序运行管理参数</div>
|
||||
<div className='line'></div>
|
||||
<div className='pd20 pb100'>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
labelCol={{ span: 2 }}
|
||||
>
|
||||
<Form.Item
|
||||
name="a3"
|
||||
label="设备位置"
|
||||
rules={[
|
||||
{ required: true, message: '请选择设备位置' },
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
style={{ width: 560 }}
|
||||
onChange={(e) => {}}
|
||||
options={[]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="a2"
|
||||
label="设备类型"
|
||||
rules={[
|
||||
{ required: true, message: '请选择设备类型' },
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
style={{ width: 560 }}
|
||||
onChange={(e) => {}}
|
||||
options={[]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="a1"
|
||||
label="存在热备"
|
||||
rules={[
|
||||
{ required: true, message: '请选择存在热备' },
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
style={{ width: 560 }}
|
||||
onChange={(e) => {}}
|
||||
options={[]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="a5"
|
||||
label="设备标识"
|
||||
rules={[
|
||||
{ required: true, message: '请输入设备标识' },
|
||||
]}
|
||||
>
|
||||
<Input style={{ width: '560px' }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div className={styles.btn_warp}>
|
||||
<div className='mr20'>
|
||||
<ButtonComp text={'文件提交'} onClick={() => form.submit()} />
|
||||
</div>
|
||||
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => form.resetFields()} />
|
||||
</div>
|
||||
</div>
|
||||
</ContentWarp>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,65 @@
|
||||
import styles from './index.less';
|
||||
import ContentWarp from '@/components/ContentWarp';
|
||||
import styles from '../../index.less';
|
||||
import { Form, Input } from 'antd';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
// 网络GLQ配置 --> 远程文件配置--> 网络参数
|
||||
export default function Page() {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
{'网络GLQ配置 --> 远程文件配置--> 网络参数'}
|
||||
<div className={styles.params_warp}>
|
||||
<ContentWarp text={'网络参数配置'}>
|
||||
<div className='pd20'>配置隔离器网络运行参数</div>
|
||||
<div className='line'></div>
|
||||
<div className='pd20 pb100'>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
labelCol={{ span: 2 }}
|
||||
>
|
||||
<Form.Item
|
||||
name="a3"
|
||||
label="IP地址"
|
||||
rules={[
|
||||
{ required: true, message: '请输入IP地址' },
|
||||
]}
|
||||
>
|
||||
<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="默认网关"
|
||||
rules={[
|
||||
{ required: true, message: '请输入默认网关' },
|
||||
]}
|
||||
>
|
||||
<Input style={{ width: '560px' }} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div className={styles.btn_warp}>
|
||||
<div className='mr20'>
|
||||
<ButtonComp text={'文件提交'} onClick={() => form.submit()} />
|
||||
</div>
|
||||
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => form.resetFields()} />
|
||||
</div>
|
||||
</div>
|
||||
</ContentWarp>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,97 @@
|
||||
import styles from './index.less';
|
||||
|
||||
import ContentWarp from '@/components/ContentWarp';
|
||||
import styles from '../../index.less';
|
||||
import { ConfigProvider, Form, Input, Table } from 'antd';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
import { useState } from 'react';
|
||||
import { tableTheme } from '@/utils/theme';
|
||||
|
||||
// 网络GLQ配置 --> 远程文件配置--> 服务列表
|
||||
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) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
|
||||
const columns: any = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
render: (text: any, record: any, index: any) => {
|
||||
return <span>{(page - 1) * limit + index + 1}</span>;
|
||||
},
|
||||
}, {
|
||||
title: '服务名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
render: (text: any) => <a>{text}</a>,
|
||||
}, {
|
||||
title: '服务器IP',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
align: 'center',
|
||||
}, {
|
||||
title: '服务端口',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
align: 'center',
|
||||
},
|
||||
]
|
||||
|
||||
const rowClassName = (record:any, index: any) => {
|
||||
return index % 2 === 0 ? 'even-row' : 'odd-row';
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{'网络GLQ配置 --> 远程文件配置--> 服务列表'}
|
||||
<div className={styles.params_warp}>
|
||||
<ContentWarp text={'服务列表配置'}>
|
||||
<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="服务名称" rules={[{ required: true, message: '请输入服务名称' }]} >
|
||||
<Input style={{ width: '280px', marginRight: 24 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="bbb" label="服务IP" rules={[{ required: true, message: '请输入服务名称' }]} >
|
||||
<Input style={{ width: '280px' }} />
|
||||
</Form.Item>
|
||||
<div style={{ display: 'flex', marginLeft: 20 }}>
|
||||
<div className='mr20'>
|
||||
<ButtonComp type={'cancel'} text={'端口'} onClick={() => { }} />
|
||||
</div>
|
||||
<ButtonComp text={'提交'} onClick={() => form.submit()} />
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{y: 451}}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={[{},{},{},{},{}]}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
|
||||
<div className={styles.btn_warp}>
|
||||
<div className='mr20'>
|
||||
<ButtonComp text={'发送数据'} onClick={() => { }} />
|
||||
</div>
|
||||
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
</ContentWarp>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
.ant-form-item .ant-form-item-label >label::after {
|
||||
.ant-form-item .ant-form-item-label>label::after {
|
||||
content: "";
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.ant-table-cell {
|
||||
padding: 9px !important;
|
||||
}
|
||||
|
||||
.ant-table-container,
|
||||
.ant-table-thead >tr>th,
|
||||
.ant-table-content >table >tbody>tr>td {
|
||||
border-color: #D8D8D8 !important;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
// 表格主题
|
||||
export const tableTheme = {
|
||||
components: {
|
||||
Table: {
|
||||
headerBg: 'linear-gradient(180deg, #FFFFFF 0%, #DEE7EB 100%)',
|
||||
headerBorderRadius: 0,
|
||||
headerColor: '#191919',
|
||||
rowHoverBg: '#e6f4ff'
|
||||
},
|
||||
},
|
||||
}
|
||||
Loading…
Reference in new issue