|
|
|
@ -0,0 +1,109 @@
|
|
|
|
|
import ButtonComp from '@/components/ButtonComp';
|
|
|
|
|
import ContentWarp from '@/components/ContentWarp';
|
|
|
|
|
import { rowClassName } from '@/utils';
|
|
|
|
|
import { Input, Radio, Select, Table } from 'antd';
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
|
|
|
|
|
const { TextArea } = Input;
|
|
|
|
|
|
|
|
|
|
export default function Page() {
|
|
|
|
|
const [tableData, setTableData] = useState([]);
|
|
|
|
|
const [layer, setLayer] = useState(2);
|
|
|
|
|
|
|
|
|
|
const columns: any = [
|
|
|
|
|
{ title: '单位名称', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '实体标识', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '310标识', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '系统信号', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '管理盘号', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '所属网络', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: 'Ⅰ型隔离器外网IP', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '电话号码', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '联系人', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '联系方式', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '席位名称', dataIndex: 'name', key: 'name', align: 'center' }
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
let inputSty = { width: 220, marginLeft: 16, marginRight: 10 };
|
|
|
|
|
let inputSty1 = { width: 220, marginLeft: 18, marginRight: 10 };
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<div className='flex_jS'>
|
|
|
|
|
<ContentWarp text={'注册信息'} style={{ width: 'calc(72% - 25px)' }}>
|
|
|
|
|
<div className='pd20'>
|
|
|
|
|
<Radio.Group value={layer} onChange={(e) => { setLayer(e.target.value) }}>
|
|
|
|
|
<Radio value={1} style={{ marginRight: 70 }}> 上级 </Radio>
|
|
|
|
|
<Radio value={2} style={{ marginRight: 70 }}> 本级 </Radio>
|
|
|
|
|
<Radio value={3} style={{ marginRight: 70 }}> 下级 </Radio>
|
|
|
|
|
<Radio value={4} > 专用 </Radio>
|
|
|
|
|
</Radio.Group>
|
|
|
|
|
<div className='mb10 mt20 flex_aC'>
|
|
|
|
|
<div style={{ marginRight: 80 }}>级别:1</div>
|
|
|
|
|
<div className='mr16'>管理系统类型:</div>
|
|
|
|
|
<Radio.Group>
|
|
|
|
|
<Radio value="1" style={{ marginRight: 30 }}> 密钥分发平台 </Radio>
|
|
|
|
|
<Radio value="2" > 核心区安全隔离器 </Radio>
|
|
|
|
|
</Radio.Group>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='flex_jS' style={{ flexWrap: 'nowrap' }}>
|
|
|
|
|
<div style={{ width: '50%', minWidth: 450 }}>
|
|
|
|
|
<div className='flex_aC mt20 pl60'>
|
|
|
|
|
单位名称<Input style={inputSty} />
|
|
|
|
|
<ButtonComp text={'定位'} onClick={() => { }} />
|
|
|
|
|
</div>
|
|
|
|
|
{layer == 2 && <div className='flex_aC mt20 pl60'>设备名称<Input style={inputSty} /></div>}
|
|
|
|
|
<div className='flex_aC mt20 pl60'>系统名称<Input style={inputSty} /></div>
|
|
|
|
|
<div className='flex_aC mt20 pl60'>实体标识<Input style={inputSty} /></div>
|
|
|
|
|
<div className='flex_aC mt20 pl60'>310标识<Input style={inputSty} /></div>
|
|
|
|
|
<div className='flex_aC mt20'>Ⅰ型隔离器外网IP <Input style={inputSty1} /></div>
|
|
|
|
|
<div className='flex_aC mt20 pl60'>管理区域<Input style={inputSty} /></div>
|
|
|
|
|
{ layer == 3 && <div className='flex_aC mt20 pl60'>管理盘号<Input style={inputSty} /></div>}
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ width: '50%', minWidth: 400 }}>
|
|
|
|
|
<div className='flex_aC mt20 pl55'>电话号码<Input style={inputSty} /></div>
|
|
|
|
|
{layer == 2 && <>
|
|
|
|
|
<div className='flex_aC mt20'>Ⅰ型隔离器内网IP<Input style={inputSty} /></div>
|
|
|
|
|
<div className='flex_aC mt20'>密钥编制服务器IP<Input style={inputSty} /></div>
|
|
|
|
|
</>}
|
|
|
|
|
<div className='flex_aC mt20 pl55'>联系方式<Input style={inputSty} /></div>
|
|
|
|
|
<div className='flex_aC mt20 pl70'>联系人<Input style={inputSty} /></div>
|
|
|
|
|
<div className='flex_aC mt20 pl55'>席位名称 <Input style={inputSty1} /></div>
|
|
|
|
|
<div className='flex_aC mt20 pl55'>系统型号<Input style={inputSty} /></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ContentWarp>
|
|
|
|
|
|
|
|
|
|
<div className='ml20' style={{ height: 455, width: '27%', marginTop: 8 }}>
|
|
|
|
|
<div className='mb10'>设备照片</div>
|
|
|
|
|
<div style={{ height: [2,3].includes(layer) ? 217 : 193, border: '1px solid #d8d8d8', background: '#fff' }}></div>
|
|
|
|
|
<div className='mb10 mt20'>备注</div>
|
|
|
|
|
{/* <div style={{ height: [2,3].includes(layer) ? 217 : 193, border: '1px solid #d8d8d8', background: '#fff' }}>
|
|
|
|
|
<TextArea rows={4} placeholder="请输入备注" maxLength={6} />
|
|
|
|
|
</div> */}
|
|
|
|
|
<TextArea
|
|
|
|
|
style={{ height: [2,3].includes(layer) ? 217 : 193, resize: 'none' }}
|
|
|
|
|
placeholder="请输入备注" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='flex_jE mt30 mb30'>
|
|
|
|
|
<ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'修改'} onClick={() => { }} />
|
|
|
|
|
<ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'添加'} onClick={() => { }} />
|
|
|
|
|
<ButtonComp type={'cancel'} text={'删除'} onClick={() => { }} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Table
|
|
|
|
|
scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
|
|
|
|
|
pagination={false}
|
|
|
|
|
bordered
|
|
|
|
|
columns={columns}
|
|
|
|
|
dataSource={tableData}
|
|
|
|
|
rowKey={(record: any) => record?.id}
|
|
|
|
|
rowClassName={rowClassName}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|