|
|
|
@ -1,18 +1,85 @@
|
|
|
|
|
import ContentWarp from '@/components/ContentWarp';
|
|
|
|
|
import styles from '../../index.less';
|
|
|
|
|
import styles1 from './index.less';
|
|
|
|
|
import { Form, Input, Select } from 'antd';
|
|
|
|
|
import { Form, Input, Select, Table, message } from 'antd';
|
|
|
|
|
import ButtonComp from '@/components/ButtonComp';
|
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
|
import { rowClassName } from '@/utils';
|
|
|
|
|
import { validateIPAddress } from '@/utils/validate';
|
|
|
|
|
import { remoteFileConfiSendData, remoteFileConfigClean } from '@/services/gql';
|
|
|
|
|
|
|
|
|
|
// 网络GLQ配置 --> 远程文件配置--> VPN策略
|
|
|
|
|
export default function Page() {
|
|
|
|
|
|
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
|
const [tableData, setTableData] = useState<any>([]);
|
|
|
|
|
const [activeList, setActiveList] = useState<any>([]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
form.setFieldsValue({
|
|
|
|
|
unitName: '',
|
|
|
|
|
deviceName: '',
|
|
|
|
|
deviceIp: '',
|
|
|
|
|
deviceId: '',
|
|
|
|
|
messageComm: 1,
|
|
|
|
|
pingComm: 1,
|
|
|
|
|
})
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
const columns: any = [
|
|
|
|
|
{
|
|
|
|
|
title: '序号', key: 'index', align: 'center', width: 100,
|
|
|
|
|
render: (a: any, b: any, c: any) => {
|
|
|
|
|
return <span>{c + 1}</span>;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{ title: '单位名称', dataIndex: 'unitName', key: 'unitName', align: 'center' },
|
|
|
|
|
{ title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
|
|
|
|
|
{ title: '设备IP', dataIndex: 'deviceIp', key: 'deviceIp', align: 'center' },
|
|
|
|
|
{ title: '设备ID', dataIndex: 'deviceId', key: 'deviceId', align: 'center' },
|
|
|
|
|
{ title: '报文通信策略', dataIndex: 'messageComm', key: 'messageComm', align: 'center' },
|
|
|
|
|
{ title: 'PING通信策略', dataIndex: 'pingComm', key: 'pingComm', align: 'center' },
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
const onFinish = (values: any) => {
|
|
|
|
|
console.log('表单提交:', values);
|
|
|
|
|
values.rowKey = Math.floor(Math.random() * 10000);
|
|
|
|
|
setTableData([...tableData, values])
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const sending = () => {
|
|
|
|
|
if (tableData.length == 0) {
|
|
|
|
|
message.info('请添加数据');
|
|
|
|
|
return
|
|
|
|
|
}else if (activeList.length == 0) {
|
|
|
|
|
message.info('请勾选需要发送的数据');
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let serviceList = activeList.map(({ unitName, deviceName, deviceIp, deviceId, messageComm, pingComm }: any) => {
|
|
|
|
|
return { unitName, deviceName, deviceIp, deviceId, messageComm, pingComm }
|
|
|
|
|
})
|
|
|
|
|
remoteFileConfiSendData({
|
|
|
|
|
jsonStr: JSON.stringify({ serviceList: serviceList }),
|
|
|
|
|
type: 5
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res?.result == "success") {
|
|
|
|
|
message.success('发送数据成功');
|
|
|
|
|
form.resetFields();
|
|
|
|
|
} else {
|
|
|
|
|
message.error(res?.errorMsg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const clearInfo = () => {
|
|
|
|
|
remoteFileConfigClean({ type: 5 }).then(res => {
|
|
|
|
|
if (res?.result == "success") {
|
|
|
|
|
message.success('清除信息成功');
|
|
|
|
|
} else {
|
|
|
|
|
message.error(res?.errorMsg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={`${styles.params_warp} ${styles1.params_warp1}`}>
|
|
|
|
@ -25,50 +92,54 @@ export default function Page() {
|
|
|
|
|
onFinish={onFinish}
|
|
|
|
|
>
|
|
|
|
|
<Form.Item
|
|
|
|
|
name="a3"
|
|
|
|
|
name="unitName"
|
|
|
|
|
label="单位名称"
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: true, message: '请输入单位名称' },
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Input style={{ width: '560px' }} />
|
|
|
|
|
<Input style={{ width: '630px' }} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item
|
|
|
|
|
name="a2"
|
|
|
|
|
name="deviceName"
|
|
|
|
|
label="设备名称"
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: true, message: '请输入设备名称' },
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Input style={{ width: '560px' }} />
|
|
|
|
|
<Input style={{ width: '630px' }} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<div style={{ display: 'flex' }}>
|
|
|
|
|
<Form.Item
|
|
|
|
|
name="a1"
|
|
|
|
|
name="deviceIp"
|
|
|
|
|
label="设备IP"
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: true, message: '请输入设备IP' },
|
|
|
|
|
{ validator: validateIPAddress }
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Input style={{ width: '560px' }} />
|
|
|
|
|
<Input style={{ width: '250px', marginRight: 20 }} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item
|
|
|
|
|
name="a5"
|
|
|
|
|
name="deviceId"
|
|
|
|
|
label="设备ID"
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: true, message: '请输入设备ID' },
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Input style={{ width: '560px' }} />
|
|
|
|
|
<Input style={{ width: '250px' }} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ display: 'flex' }}>
|
|
|
|
|
<Form.Item
|
|
|
|
|
name="a53"
|
|
|
|
|
name="messageComm"
|
|
|
|
|
label="报文通信策略"
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: true, message: '请选择报文通信策略' },
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Select
|
|
|
|
|
style={{ width: 560 }}
|
|
|
|
|
style={{ width: 250, marginRight: 20 }}
|
|
|
|
|
onChange={(e) => { }}
|
|
|
|
|
options={[
|
|
|
|
|
{ label: '加密通信', value: 1 },
|
|
|
|
@ -78,14 +149,14 @@ export default function Page() {
|
|
|
|
|
/>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item
|
|
|
|
|
name="a21"
|
|
|
|
|
name="pingComm"
|
|
|
|
|
label="PING通信策略"
|
|
|
|
|
rules={[
|
|
|
|
|
{ required: true, message: '请选择PING通信策略' },
|
|
|
|
|
]}
|
|
|
|
|
>
|
|
|
|
|
<Select
|
|
|
|
|
style={{ width: 560 }}
|
|
|
|
|
style={{ width: 250, marginRight: 20 }}
|
|
|
|
|
onChange={(e) => { }}
|
|
|
|
|
options={[
|
|
|
|
|
{ label: '允许互PING', value: 1 },
|
|
|
|
@ -93,16 +164,28 @@ export default function Page() {
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
|
|
<div className='flex_aiC'>
|
|
|
|
|
<div className='mr20'>按住“Ctrl”或“Shift”对信息进行多选。</div>
|
|
|
|
|
<ButtonComp text={'提交'} onClick={() => form.submit()} />
|
|
|
|
|
</div>
|
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
|
|
<Table
|
|
|
|
|
scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
|
|
|
|
|
pagination={false}
|
|
|
|
|
bordered
|
|
|
|
|
columns={columns}
|
|
|
|
|
dataSource={tableData}
|
|
|
|
|
rowKey={(record: any) => record?.rowKey}
|
|
|
|
|
rowClassName={rowClassName}
|
|
|
|
|
rowSelection={{
|
|
|
|
|
onChange: (selectedRowKeys: any, selectedRows: any) => {
|
|
|
|
|
setActiveList(selectedRows)
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div className={styles.btn_warp}>
|
|
|
|
|
<ButtonComp style={{ marginRight: 20 }} text={'发送数据'} onClick={() => { }} />
|
|
|
|
|
<ButtonComp type={'cancel'} text={'信息清空'} onClick={() => form.resetFields()} />
|
|
|
|
|
<ButtonComp style={{ marginRight: 20 }} text={'发送数据'} onClick={() => sending()} />
|
|
|
|
|
<ButtonComp type={'cancel'} text={'信息清空'} onClick={() => clearInfo()} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ContentWarp>
|
|
|
|
|