master_basic
parent
5768e1e7b3
commit
0afb034377
@ -1,9 +1,63 @@
|
||||
import styles from './index.less';
|
||||
import ContentWarp from '@/components/ContentWarp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { Form, Input, Select } from 'antd';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
export default function Page() {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const formItemSty = { width: '31%', marginBottom: 20 };
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.params_warp}>
|
||||
<ContentWarp text={'明文密钥体载体包封'}>
|
||||
<div className='pd20' style={{paddingBottom: 30}}>
|
||||
<Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
|
||||
<Form.Item name="aaa" label="载体类型" style={formItemSty}>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="载体型号" style={formItemSty}>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="sss" label="文件路径" style={{ width: '80%', marginBottom: 20 }}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Input style={{ width: 500 }} />
|
||||
<div style={{ display: 'flex', marginLeft: 20 }}>
|
||||
<ButtonComp type={'cancel'} text={'选择'} onClick={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className='flex_jE mb20'>
|
||||
<ButtonComp text={'包封'} onClick={() => form.submit()} />
|
||||
</div>
|
||||
|
||||
<ContentWarp text={'包封结果'}>
|
||||
<div className='pd20'>
|
||||
<div className='flex_aC'>
|
||||
<div style={{ marginRight: 30 }}>产品名称</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
|
||||
<div className='ml20' style={{ marginRight: 30 }}>产品编号</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</div>
|
||||
|
||||
<div className='flex_aC mt20'>
|
||||
<div className='mr16' >发起者标识</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
|
||||
<div className='mr16 ml20' >接受者标识</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</div>
|
||||
</div>
|
||||
</ContentWarp>
|
||||
</div>
|
||||
</ContentWarp>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,9 +1,54 @@
|
||||
import styles from './index.less';
|
||||
import ContentWarp from '@/components/ContentWarp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { Form, Input, Select } from 'antd';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div>
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const formItemSty = { width: '31%', marginBottom: 20 };
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('表单提交:', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.params_warp}>
|
||||
<ContentWarp text={'明文密钥体载体包封'}>
|
||||
<div className='pd20 pb100'>
|
||||
<Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
|
||||
<Form.Item name="aaa" label="产品名称" style={formItemSty}>
|
||||
<Input style={{ width: 260 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="产品编号" style={formItemSty}>
|
||||
<Input style={{ width: 260 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="载体编号" style={formItemSty}>
|
||||
<Input style={{ width: 260 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="载体类型" style={formItemSty}>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="载体型号" style={formItemSty}>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
<Form.Item name="sss" label="文件路径" style={{ width: '80%', marginBottom: 20 }}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Input style={{ width: 500 }} />
|
||||
<div style={{ display: 'flex', marginLeft: 20 }}>
|
||||
<ButtonComp type={'cancel'} text={'选择'} onClick={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item name="aaa" label="载体位置" style={formItemSty}>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div className={styles.btn_warp}>
|
||||
<ButtonComp text={'包封'} onClick={() => form.submit()} />
|
||||
</div>
|
||||
</div>
|
||||
</ContentWarp>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,9 +1,98 @@
|
||||
import styles from './index.less';
|
||||
import TabsComp from '@/components/TabsComp';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, Form, Input, Radio, Select, Table } from 'antd';
|
||||
import { tableTheme } from '@/utils/theme';
|
||||
import { rowClassName } from '@/utils';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
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: 'IP地址', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
]
|
||||
|
||||
const columns1: any = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text: any, record: any, index: any) => {
|
||||
return <span>{index + 1}</span>;
|
||||
},
|
||||
},
|
||||
{ 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' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<TabsComp
|
||||
dataSource={[{ id: 1, name: '向专用密码管理系统配发密钥体' }]}
|
||||
activeTab={activeTab}
|
||||
onChange={(e) => setActiveTab(e)} />
|
||||
|
||||
<div style={{ display: 'flex' }}>
|
||||
<ButtonComp type={'special'} text={'向专用密码管理系统配发密钥体'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<div className='flex_aC mt20 mb20'>
|
||||
<div style={{ marginRight: 12 }}>目的系统</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
<div className='ml20' style={{ marginRight: 12 }}>产品名称</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
<div className='ml20' style={{ marginRight: 12 }}>产品编号</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
<div className='mr20 ml20'>
|
||||
<ButtonComp text={'添加'} onClick={() => { }} />
|
||||
</div>
|
||||
<ButtonComp text={'查询'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<div className='flex_jE mt20 mb20'>
|
||||
<ButtonComp text={'同步'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 9 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
|
||||
<div className='mb20' style={{ height: 1, background: '#EDEDED' }}></div>
|
||||
|
||||
<div className='mb20 flex_aC_jS'>
|
||||
<div>配发情况列表</div>
|
||||
<ButtonComp type={'cancel'} text={'全部'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 9 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns1}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,9 +1,51 @@
|
||||
import styles from './index.less';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, Table } from 'antd';
|
||||
import { tableTheme } from '@/utils/theme';
|
||||
import { rowClassName } from '@/utils';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
export default function Page() {
|
||||
const [tableData, setTableData] = useState([]);
|
||||
|
||||
const columns: any = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text: any, record: any, index: any) => {
|
||||
return <span>{index + 1}</span>;
|
||||
},
|
||||
},
|
||||
{ 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' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<ButtonComp type={'special'} text={'管理系统管理盘数据维护'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<div className='flex_aC mt20 mb20'>
|
||||
<ButtonComp text={'数据导入'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 10 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
.center_w {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(180deg, #87CDEE 0%, #69C0E9 34%, #7ECDF2 51%, #56B9E6 63%, #81D7FE 100%);
|
||||
box-shadow: 0px 2px 4px 0px #BDCDE2;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(76, 106, 118, 0.22);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 15%;
|
||||
}
|
||||
|
||||
.no_btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #E2F3FA;
|
||||
box-shadow: 0px 2px 4px 0px rgba(81,84,90,0.5);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(171, 207, 223, 0.22);
|
||||
cursor: not-allowed;
|
||||
|
||||
.sjx {
|
||||
border-left: 12px solid #9FB5BC;
|
||||
}
|
||||
|
||||
.sjx1 {
|
||||
border-left: 0px solid #9FB5BC;
|
||||
border-right: 12px solid #9FB5BC;
|
||||
}
|
||||
}
|
||||
|
||||
.sjx {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12px solid #fff;
|
||||
border-bottom: 12px solid transparent;
|
||||
border-top: 12px solid transparent;
|
||||
transition: all 0.15s ease-in;
|
||||
}
|
||||
|
||||
.sjx1 {
|
||||
border-left: 0px solid #fff;
|
||||
border-right: 12px solid #fff;
|
||||
}
|
||||
@ -1,9 +1,101 @@
|
||||
import styles from './index.less';
|
||||
import styles from '../../../GLQ/index.less';
|
||||
import styles1 from './index.less';
|
||||
import { useState } from 'react';
|
||||
import { ConfigProvider, Select, Table } from 'antd';
|
||||
import { tableTheme } from '@/utils/theme';
|
||||
import { rowClassName } from '@/utils';
|
||||
import ButtonComp from '@/components/ButtonComp';
|
||||
|
||||
export default function Page() {
|
||||
const [tableData, setTableData] = useState([]);
|
||||
const [tableData1, setTableData1] = useState([]);
|
||||
|
||||
let number = {
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: (text: any, record: any, index: any) => {
|
||||
return <span>{index + 1}</span>;
|
||||
},
|
||||
}
|
||||
|
||||
const columns: any = [
|
||||
number,
|
||||
{ title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '设备型号', dataIndex: 'name', key: 'name', align: 'center' }
|
||||
]
|
||||
|
||||
const columns1: any = [
|
||||
number,
|
||||
{ title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
|
||||
{ title: '设备型号', dataIndex: 'name', key: 'name', align: 'center' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={`${styles.params_warp}`}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<ButtonComp type={'special'} text={'管理系统管理盘数据维护'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<div className='flex_aC mt20'>
|
||||
<div className='mr16'>请选择源互通类型</div>
|
||||
<Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
|
||||
</div>
|
||||
|
||||
<div className='flex_aC mt20 mb20'>
|
||||
<ButtonComp text={'数据导入'} onClick={() => { }} />
|
||||
</div>
|
||||
|
||||
<div className='flex_jS'>
|
||||
{/* 左侧 */}
|
||||
<div style={{ width: '45%' }}>
|
||||
<div className='mb20' style={{ color: '#0087DA' }}>目标设备信息列表</div>
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 10 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
{/* 中间 */}
|
||||
<div className={`${styles1.center_w} mb20`}>
|
||||
<div className={`${styles1.btn} ${tableData.length == 0 ? styles1.no_btn : ''}`} style={{ margin: 40 }}>
|
||||
<div className={styles1.sjx} />
|
||||
</div>
|
||||
<div className={`${styles1.btn} ${tableData1.length == 0 ? styles1.no_btn : ''}`}>
|
||||
<div className={`${styles1.sjx} ${styles1.sjx1}`} />
|
||||
</div>
|
||||
</div>
|
||||
{/* 底部 */}
|
||||
<div style={{ width: '45%' }}>
|
||||
<div className='mb20' style={{ color: '#0087DA' }}>已经配置的设备信息</div>
|
||||
<ConfigProvider theme={tableTheme}>
|
||||
<Table
|
||||
scroll={{ y: 41 * 10 }}
|
||||
pagination={false}
|
||||
bordered
|
||||
columns={columns1}
|
||||
dataSource={tableData1}
|
||||
rowKey={(record: any) => record?.id}
|
||||
rowClassName={rowClassName}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex_jE' style={{ marginTop: 30 }}>
|
||||
<ButtonComp type={'cancel'} text={'取消'} onClick={() => { }} />
|
||||
<div className='mr20'></div>
|
||||
<ButtonComp text={'保存'} onClick={() => { }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in new issue