|
|
|
|
@ -1,9 +1,112 @@
|
|
|
|
|
import styles from './index.less';
|
|
|
|
|
import TabsComp from '@/components/TabsComp';
|
|
|
|
|
import styles from '../../../GLQ/index.less';
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
import { Checkbox, ConfigProvider, DatePicker, Input, Select, Table } from 'antd';
|
|
|
|
|
import { tableTheme } from '@/utils/theme';
|
|
|
|
|
import { rowClassName } from '@/utils';
|
|
|
|
|
import ButtonComp from '@/components/ButtonComp';
|
|
|
|
|
import ContentWarp from '@/components/ContentWarp';
|
|
|
|
|
|
|
|
|
|
export default function Page() {
|
|
|
|
|
const [activeTab, setActiveTab] = useState(1)
|
|
|
|
|
const [tableData, setTableData] = useState([]);
|
|
|
|
|
|
|
|
|
|
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: '设备型号', 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' },
|
|
|
|
|
{ title: 'IP地址', dataIndex: 'name', key: 'name', align: 'center' },
|
|
|
|
|
{ title: '注册日期', dataIndex: 'name', key: 'name', align: 'center' }
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
let mr30 = { marginRight: 30 }
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={`${styles.params_warp}`}>
|
|
|
|
|
<TabsComp
|
|
|
|
|
dataSource={[{ id: 1, name: '管理盘维护' }]}
|
|
|
|
|
activeTab={activeTab}
|
|
|
|
|
onChange={(e) => setActiveTab(e)} />
|
|
|
|
|
|
|
|
|
|
<div className='mt30 mb30'>请输入或选择查找条件</div>
|
|
|
|
|
|
|
|
|
|
<div className='flex_aC_jS'>
|
|
|
|
|
{/* 左 */}
|
|
|
|
|
<div style={{ width: '30%' }}>
|
|
|
|
|
<div className='flex_aC_jS' style={{ marginBottom: 70 }}>
|
|
|
|
|
<div style={{ width: '45%' }}>
|
|
|
|
|
<div className='mb10'>单位名称</div>
|
|
|
|
|
<Input style={mr30} />
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ width: '45%' }}>
|
|
|
|
|
<div className='mb10'>设备名称</div>
|
|
|
|
|
<Input style={mr30} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div className='mt20 mb10'>实体标识</div>
|
|
|
|
|
<Input style={mr30} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className='mt10' style={{ color: '#666666' }}>提示：若输入项为空，则查找时忽略该条件。</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 中 */}
|
|
|
|
|
<div className='flex_aC_jS' style={{ width: '30%' }}>
|
|
|
|
|
<div style={{ width: '45%' }}>
|
|
|
|
|
<div className='mb10'>单位名称</div>
|
|
|
|
|
<Input style={mr30} />
|
|
|
|
|
<div className='mb10 mt20'>单位名称</div>
|
|
|
|
|
<Input style={mr30} />
|
|
|
|
|
<div className='mb10 mt20'>单位名称</div>
|
|
|
|
|
<Input style={mr30} />
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ width: '45%' }}>
|
|
|
|
|
<div className='mb10'>设备名称</div>
|
|
|
|
|
<Select style={{ width: '100%' }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
|
|
|
|
<div className='mb10 mt20'>单位名称</div>
|
|
|
|
|
<Select style={{ width: '100%' }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
|
|
|
|
<div className='mb10 mt20'>单位名称</div>
|
|
|
|
|
<Select style={{ width: '100%' }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* 右 */}
|
|
|
|
|
<div style={{ width: '30%' }}>
|
|
|
|
|
<ContentWarp
|
|
|
|
|
style={{ padding: '60px 20px 20px 20px' }}
|
|
|
|
|
text={<Checkbox onChange={() => { }}>按注册日期</Checkbox>}
|
|
|
|
|
>
|
|
|
|
|
<div className='flex_aC' style={{ marginBottom: 30 }}>
|
|
|
|
|
<div className='mr16'>从</div>
|
|
|
|
|
<DatePicker style={{ width: '70%' }} onChange={(e) => { }} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className='flex_aC' style={{ marginBottom: 30 }}>
|
|
|
|
|
<div className='mr16'>到</div>
|
|
|
|
|
<DatePicker style={{ width: '70%' }} onChange={(e) => { }} />
|
|
|
|
|
</div>
|
|
|
|
|
</ContentWarp>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='flex_jE mt20 mb20'>
|
|
|
|
|
<ButtonComp text={'查询'} onClick={() => { }} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ButtonComp type={'special'} text={'查找结果'} onClick={() => { }} />
|
|
|
|
|
<Table
|
|
|
|
|
scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
|
|
|
|
|
pagination={false}
|
|
|
|
|
bordered
|
|
|
|
|
columns={columns}
|
|
|
|
|
dataSource={tableData}
|
|
|
|
|
rowKey={(record: any) => record?.id}
|
|
|
|
|
rowClassName={rowClassName}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
