master_basic
鲁誉程 1 year ago
parent 591a315517
commit 5d9de7af25

@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react';
import styles from './index.less';
interface PageProps {
style: any; // 样式
style?: any; // 样式
text: string; // 标题
children?: any; // 插槽内容
}

@ -3,8 +3,8 @@
@import './styles/antd.less';
::-webkit-scrollbar {
height: 4px;
width: 4px;
height: 3px;
width: 3px;
background: rgba(0, 0, 0, 0.1) !important;
}

@ -0,0 +1,45 @@
.bottom_warp {
width: 100%;
height: 140px;
background: #FFFFFF;
border-radius: 2px 0px 0px 0px;
border-top: 1px solid #D8D8D8;
display: flex;
align-items: center;
justify-content: space-between;
.item_con {
width: 50%;
height: 100%;
display: flex;
._img {
width: 54px;
height: 54px;
margin: 20px;
background-color: saddlebrown;
}
.item_info {
&:nth-child(2),
&:nth-child(3) {
height: 22px;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 22px;
}
}
.item_title {
margin-top: 34px;
height: 26px;
line-height: 26px;
font-size: 16px;
font-weight: 600;
color: #333333;
margin-bottom: 10px;
}
}
}

@ -0,0 +1,31 @@
import { FC, useEffect, useState } from 'react';
import styles from './index.less';
interface PageProps {
}
const BottomConfigInfo: FC<PageProps> = ({}) => {
return (
<div className={styles.bottom_warp}>
<div className={styles.item_con}>
<div className={styles._img}></div>
<div className={styles.item_info}>
<div className={styles.item_title}></div>
<div style={{ marginBottom: 6 }}>--</div>
<div>IP--</div>
</div>
</div>
<div className={styles.item_con}>
<div className={styles._img}></div>
<div className={styles.item_info}>
<div className={styles.item_title}></div>
<div style={{ marginBottom: 6 }}>--</div>
<div>--</div>
</div>
</div>
</div>
)
}
export default BottomConfigInfo

@ -143,8 +143,6 @@
.right_route {
position: relative;
height: calc(100vh - 114px - 52px);
min-height: calc(600px - 52px);
overflow: hidden;
overflow-y: auto;
background: #F9F9F9;

@ -6,6 +6,7 @@ import { MenuType, tabsType } from '@/utils/menu';
import { Select, message } from 'antd';
import LeftMenuOne from '@/components/LeftMenuOne';
import LeftMenuTwo from '@/components/LeftMenuTwo';
import BottomConfigInfo from '@/layouts/BottomConfigInfo';
const options2 = [
{ value: 1, label: 'GLQ管理' },
@ -13,7 +14,7 @@ const options2 = [
{ value: 3, label: 'SB管理' },
{ value: 4, label: 'SF管理' },
{ value: 5, label: 'SBJK二维版', disabled: true },
{ value: 6, label: '设备注册', disabled: true }
{ value: 6, label: '设备注册', disabled: true }
]
const leftMenuType: any = {
@ -171,9 +172,19 @@ export default function Layout() {
{/* 左侧内容 */}
<div className={styles.right_warp}>
<div className={styles.right_route}>
<div className={styles.right_route}
style={{
height: selectVal == 1 ?
'calc(100vh - 114px - 141px - 52px)' :
'calc(100vh - 114px - 52px)'
}}
>
<Outlet></Outlet>
</div>
{/* GQL管理整个模块页面底部的配置信息 */}
{selectVal == 1 && <BottomConfigInfo />}
{/* 底部信息 */}
<div className={styles.footer}>
<div>0.0.0</div>

@ -19,51 +19,31 @@ export default function Page() {
};
return (
<>
<div className={styles.params_warp}>
<ContentWarp text={'参数设置'} style={{ width: '100%', height: '230px' }}>
<div className='pd20'></div>
<div className='line'></div>
<div className='pd20 pb100'>
<Form form={form} onFinish={onFinish}>
<Form.Item
name="ipAddress"
label="本地GLQ后端IP"
rules={[
{ required: true, message: '请输入 IP 地址' },
{ validator: validateIPAddress },
]}
>
<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={() => { }} />
<div className={styles.params_warp}>
<ContentWarp text={'参数设置'}>
<div className='pd20'></div>
<div className='line'></div>
<div className='pd20 pb100'>
<Form form={form} onFinish={onFinish}>
<Form.Item
name="ipAddress"
label="本地GLQ后端IP"
rules={[
{ required: true, message: '请输入 IP 地址' },
{ validator: validateIPAddress },
]}
>
<Input style={{ width: '560px' }} />
</Form.Item>
</Form>
<div className={styles.btn_warp}>
<div className='mr20'>
<ButtonComp text={'建立连接'} onClick={() => form.submit()} />
</div>
</div>
</ContentWarp>
</div>
<div className={styles.bottom_warp}>
<div className={styles.item_con}>
<div className={styles._img}></div>
<div className={styles.item_info}>
<div className={styles.item_title}></div>
<div style={{marginBottom: 6}}>--</div>
<div>IP--</div>
</div>
</div>
<div className={styles.item_con}>
<div className={styles._img}></div>
<div className={styles.item_info}>
<div className={styles.item_title}></div>
<div style={{marginBottom: 6}}>--</div>
<div>--</div>
<ButtonComp type={'cancel'} text={'参数重置'} onClick={() => form.resetFields()} />
</div>
</div>
</div>
</>
</ContentWarp>
</div>
);
}

@ -1,10 +1,29 @@
import styles from './index.less';
import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import ButtonComp from '@/components/ButtonComp';
import { useState } from 'react';
// 网络MMJ管理 --> 密钥销毁
export default function Page() {
const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
return (
<div>
{'网络MMJ管理 --> 密钥销毁'}
<div className={styles.params_warp}>
<ContentWarp text={'密码销毁'}>
<div className='pd20'></div>
<div className='line'></div>
<div className='pd20 pb100'>
<div className={styles.html_con}>
<div style={{ padding: '20px 12px' }} dangerouslySetInnerHTML={{ __html: htmlText }}></div>
</div>
<div className={styles.btn_warp}>
<div className='mr20'>
<ButtonComp text={'发送命令'} onClick={() => { }} />
</div>
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
</div>
</div>
</ContentWarp>
</div>
);
}

@ -1,10 +1,30 @@
import styles from './index.less';
import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import ButtonComp from '@/components/ButtonComp';
import { useState } from 'react';
// 网络MMJ管理 --> MMJ遥毙
// 网络MMJ管理 --> 密码遥毙
export default function Page() {
const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
return (
<div>
{'网络MMJ管理 --> MMJ遥毙'}
<div className={styles.params_warp}>
<ContentWarp text={'密码遥毙'}>
<div className='pd20'></div>
<div className='line'></div>
<div className='pd20 pb100'>
<div className={styles.html_con}>
<div style={{ padding: '20px 12px' }} dangerouslySetInnerHTML={{ __html: htmlText }}></div>
</div>
<div className={styles.btn_warp}>
<div className='mr20'>
<ButtonComp text={'发送命令'} onClick={() => { }} />
</div>
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
</div>
</div>
</ContentWarp>
</div>
);
}

@ -14,72 +14,55 @@ export default function Page() {
return (
<>
<div className={styles.params_warp}>
<ContentWarp text={'参数设置'} style={{ width: '100%', height: '350px' }}>
<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: '请输入初装密钥' },
]}
>
<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={() => { }} />
<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: '请输入初装密钥' },
]}
>
<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>
</div>
</ContentWarp>
</div>
<div className={styles.bottom_warp}>
<div className={styles.item_con}>
<div className={styles._img}></div>
<div className={styles.item_info}>
<div className={styles.item_title}></div>
<div style={{ marginBottom: 6 }}>--</div>
<div>IP--</div>
</div>
</div>
<div className={styles.item_con}>
<div className={styles._img}></div>
<div className={styles.item_info}>
<div className={styles.item_title}></div>
<div style={{ marginBottom: 6 }}>--</div>
<div>--</div>
<div className='mr20'>
<ButtonComp type={'cancel'} text={'发送数据'} onClick={() => { }} />
</div>
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => form.resetFields()} />
</div>
</div>
</div>
</>
</ContentWarp>
</div>
);
}

@ -1,10 +1,30 @@
import styles from './index.less';
import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import ButtonComp from '@/components/ButtonComp';
import { useState } from 'react';
// 网络MMJ管理 --> MMJ遥毙
export default function Page() {
const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
return (
<div>
{'网络MMJ管理 --> MMJ遥毙'}
<div className={styles.params_warp}>
<ContentWarp text={'密码机遥毙'}>
<div className='pd20'></div>
<div className='line'></div>
<div className='pd20 pb100'>
<div className={styles.html_con}>
<div style={{ padding: '20px 12px' }} dangerouslySetInnerHTML={{ __html: htmlText }}></div>
</div>
<div className={styles.erroInfo}></div>
<div className={styles.btn_warp}>
<div className='mr20'>
<ButtonComp text={'发送命令'} onClick={() => { }} />
</div>
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
</div>
</div>
</ContentWarp>
</div>
);
}
}

@ -1,10 +1,32 @@
import styles from './index.less';
import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import ButtonComp from '@/components/ButtonComp';
import { useState } from 'react';
// 网络MMJ管理 --> 状态查询
export default function Page() {
const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
return (
<div>
{'网络MMJ管理 --> 状态查询'}
<div className={styles.params_warp}>
<ContentWarp text={'密码机状态'}>
<div className='pd20'></div>
<div className='line'></div>
<div className='pd20 pb100'>
<div className={styles.html_con}>
<div style={{ padding: '20px 12px' }} dangerouslySetInnerHTML={{ __html: htmlText }}></div>
</div>
<div className={styles.btn_warp}>
<div className='mr20'>
<ButtonComp text={'状态查询'} onClick={() => { }} />
</div>
<div className='mr20'>
<ButtonComp type={'cancel'} text={'文件另存'} onClick={() => { }} />
</div>
<ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
</div>
</div>
</ContentWarp>
</div>
);
}
}

@ -12,49 +12,22 @@
justify-content: flex-end;
}
.bottom_warp {
.erroInfo {
position: absolute;
bottom: 0;
width: 100%;
height: 140px;
background: #FFFFFF;
border-radius: 2px 0px 0px 0px;
opacity: 0.8;
border-top: 1px solid #D8D8D8;
display: flex;
align-items: center;
justify-content: space-between;
bottom: 20px;
left: 20px;
height: 32px;
line-height: 32px;
color: red;
}
.item_con {
width: 50%;
height: 100%;
display: flex;
._img {
width: 54px;
height: 54px;
margin: 20px;
background-color: saddlebrown;
}
.item_info {
&:nth-child(2), &:nth-child(3) {
height: 22px;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 22px;
}
}
.item_title {
margin-top: 34px;
height: 26px;
line-height: 26px;
font-size: 16px;
font-weight: 600;
color: #333333;
margin-bottom: 10px;
}
.html_con {
background: #FFFFFF;
box-shadow: inset 4px 4px 1px 0px rgba(35, 44, 48, 0.32);
border-radius: 1px;
border: 1px solid #E3E3E3;
width: 100%;
height: 330px;
overflow: hidden;
overflow-y: auto;
}
Loading…
Cancel
Save