From 591a315517158fd9d349003d76cf307da22d8358 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=B2=81=E8=AA=89=E7=A8=8B?= <2659568239@qq.com> Date: Wed, 29 Nov 2023 11:07:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes/index.ts | 11 +++ src/components/ButtonComp/index.less | 25 ++++++ src/components/ButtonComp/index.tsx | 38 +++++++++ src/components/ContentWarp/index.less | 25 ++++++ src/components/ContentWarp/index.tsx | 24 ++++++ src/global.less | 6 +- src/layouts/index.less | 11 +++ src/layouts/index.tsx | 8 +- .../GLQ/TeamViewer/ParamsSetting/index.less | 0 .../GLQ/TeamViewer/ParamsSetting/index.tsx | 69 +++++++++++++-- .../GLQ/WebMMJ/MmjInitInstall/index.less | 0 src/pages/GLQ/WebMMJ/MmjInitInstall/index.tsx | 83 ++++++++++++++++++- src/pages/GLQ/index.less | 60 ++++++++++++++ src/styles/antd.less | 4 + src/styles/minix.less | 21 +++++ src/utils/menu.ts | 34 +++++++- 16 files changed, 402 insertions(+), 17 deletions(-) create mode 100644 src/components/ButtonComp/index.less create mode 100644 src/components/ButtonComp/index.tsx create mode 100644 src/components/ContentWarp/index.less create mode 100644 src/components/ContentWarp/index.tsx delete mode 100644 src/pages/GLQ/TeamViewer/ParamsSetting/index.less delete mode 100644 src/pages/GLQ/WebMMJ/MmjInitInstall/index.less create mode 100644 src/pages/GLQ/index.less create mode 100644 src/styles/antd.less create mode 100644 src/styles/minix.less diff --git a/config/routes/index.ts b/config/routes/index.ts index 41417b8..02787e0 100644 --- a/config/routes/index.ts +++ b/config/routes/index.ts @@ -101,6 +101,17 @@ const routes = [ { path: '/mailboxManage/index', name: '算法邮箱管理', component: '@/pages/SF/MailboxManage/index' }, // --------------------------------------------------------------------------- + + // ------------------------------SBJK二维版----------------------------------- + + // --------------------------------------------------------------------------- + + + // ------------------------------设备注册----------------------------------- + + // --------------------------------------------------------------------------- + + // 建设中页面 { path: '/construction', diff --git a/src/components/ButtonComp/index.less b/src/components/ButtonComp/index.less new file mode 100644 index 0000000..2d1ce0e --- /dev/null +++ b/src/components/ButtonComp/index.less @@ -0,0 +1,25 @@ +.btn { + height: 32px; + width: 112px; + padding: 0px 20px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.confirm_btn { + background: linear-gradient(180deg, #87CDEE 0%, #69C0E9 34%, #7ECDF2 51%, #56B9E6 63%, #81D7FE 100%); + box-shadow: 0px 1px 4px 0px rgba(189, 204, 224, 0.5); + border-radius: 4px; + border: 1px solid rgba(76, 106, 118, 0.22); + color: #fff; +} + +.cancel_btn { + background: linear-gradient(180deg, #E3F6FF 0%, #F3FBFF 37%, #FFFFFF 51%, #EBF9FF 60%, #FFFFFF 100%); + box-shadow: 0px 1px 4px 0px rgba(81, 84, 90, 0.5); + border-radius: 4px; + border: 1px solid rgba(171, 207, 223, 0.22); + color: #65686E; +} \ No newline at end of file diff --git a/src/components/ButtonComp/index.tsx b/src/components/ButtonComp/index.tsx new file mode 100644 index 0000000..86be8b2 --- /dev/null +++ b/src/components/ButtonComp/index.tsx @@ -0,0 +1,38 @@ +import { FC, useEffect, useState } from 'react'; +import styles from './index.less'; + +interface PageProps { + type?: string; // 按钮类型 + text?: string; // 按钮文字 + onClick: () => void; +} + +const ButtonComp: FC = ({ + type = 'confirm', + text = '确定', + onClick +}) => { + let timerId: any; + + const click = () => { + clearTimeout(timerId); + timerId = setTimeout(() => { + onClick() + }, 300); + } + + return ( + <> + { + type == 'confirm' && +
{text}
+ } + { + type == 'cancel' && +
{text}
+ } + + ) +} + +export default ButtonComp \ No newline at end of file diff --git a/src/components/ContentWarp/index.less b/src/components/ContentWarp/index.less new file mode 100644 index 0000000..2f142ae --- /dev/null +++ b/src/components/ContentWarp/index.less @@ -0,0 +1,25 @@ +.cont_warp { + position: relative; + background: #FFFFFF; + border-radius: 2px 0px 0px 0px; + border: 1px solid #D8D8D8; + margin-top: 8px; + padding-top: 25px; + + .cont_warp_title { + position: absolute; + top: -8px; + left: -1px; + padding: 0 30px; + height: 32px; + line-height: 32px; + background: linear-gradient(180deg, #F4FBFF 0%, #CFE9F6 100%); + border-radius: 4px 4px 4px 0px; + border: 1px solid #D0DAE7; + cursor: default; + + font-size: 16px; + font-weight: 400; + color: #333333; + } +} \ No newline at end of file diff --git a/src/components/ContentWarp/index.tsx b/src/components/ContentWarp/index.tsx new file mode 100644 index 0000000..099889c --- /dev/null +++ b/src/components/ContentWarp/index.tsx @@ -0,0 +1,24 @@ +import { FC, useEffect, useState } from 'react'; +import styles from './index.less'; + +interface PageProps { + style: any; // 样式 + text: string; // 标题 + children?: any; // 插槽内容 +} + +const ContentWarp: FC = ({ + style, + text, + ...props +}) => { + + return ( +
+
{text}
+ {props?.children} +
+ ) +} + +export default ContentWarp \ No newline at end of file diff --git a/src/global.less b/src/global.less index 6352b7a..fd808c0 100644 --- a/src/global.less +++ b/src/global.less @@ -1,8 +1,10 @@ @import './styles/reset.less'; +@import './styles/minix.less'; +@import './styles/antd.less'; ::-webkit-scrollbar { - height: 6px; - width: 6px; + height: 4px; + width: 4px; background: rgba(0, 0, 0, 0.1) !important; } diff --git a/src/layouts/index.less b/src/layouts/index.less index 71e1786..752aa9a 100644 --- a/src/layouts/index.less +++ b/src/layouts/index.less @@ -4,6 +4,7 @@ min-width: 1440px; min-height: 100vh; transition: all ease 2s; + font-size: 14px; .nav_warp { width: 100%; @@ -50,6 +51,14 @@ .times { margin-right: 20px; + font-size: 12px; + + div { + height: 20px; + line-height: 20px; + color: #666666; + margin-bottom: 4px; + } } .nav_warp_b { @@ -133,10 +142,12 @@ } .right_route { + position: relative; height: calc(100vh - 114px - 52px); min-height: calc(600px - 52px); overflow: hidden; overflow-y: auto; + background: #F9F9F9; } .footer { diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 0a44d18..6ebfd3f 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -12,8 +12,8 @@ const options2 = [ { value: 2, label: 'MY管理' }, { value: 3, label: 'SB管理' }, { value: 4, label: 'SF管理' }, - { value: 5, label: 'SBJK二维版' }, - { value: 6, label: '设备注册' } + { value: 5, label: 'SBJK二维版', disabled: true }, + { value: 6, label: '设备注册', disabled: true } ] const leftMenuType: any = { @@ -38,8 +38,8 @@ const leftMenuType: any = { // SBJK二维版 '设备监控二维版':
, // 设备注册 - '注册管理':
, - '位置管理':
+ '注册管理': , + '位置管理': } export default function Layout() { diff --git a/src/pages/GLQ/TeamViewer/ParamsSetting/index.less b/src/pages/GLQ/TeamViewer/ParamsSetting/index.less deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/GLQ/TeamViewer/ParamsSetting/index.tsx b/src/pages/GLQ/TeamViewer/ParamsSetting/index.tsx index 1bc8491..afde3f2 100644 --- a/src/pages/GLQ/TeamViewer/ParamsSetting/index.tsx +++ b/src/pages/GLQ/TeamViewer/ParamsSetting/index.tsx @@ -1,10 +1,69 @@ -import styles from './index.less'; +import ContentWarp from '@/components/ContentWarp'; +import styles from '../../index.less'; +import { Form, Input } from 'antd'; +import ButtonComp from '@/components/ButtonComp'; -// GLQ远程维护 --> 建立远程链接--> 参数设置 export default function Page() { + const [form] = Form.useForm(); + + // ip校验 + const validateIPAddress = (_: any, value: any) => { + if (value && !/^(\d{1,3}\.){3}\d{1,3}$/.test(value)) { + return Promise.reject(new Error('请输入正确的 IP 地址')); + } + return Promise.resolve(); + }; + + const onFinish = (values: any) => { + console.log('表单提交:', values); + }; + return ( -
- {'GLQ远程维护 --> 建立远程链接--> 参数设置'} -
+ <> +
+ +
配置与被控端连接的连接参数
+
+
+
+ + + +
+
+
+ form.submit()} /> +
+ { }} /> +
+
+ +
+
+
+
+
+
控制端系统配置信息
+
管理系统名称：--
+
系统IP：--
+
+
+
+
+
+
被控设备配置信息
+
设备名称：--
+
连接状态：--
+
+
+
+ ); } diff --git a/src/pages/GLQ/WebMMJ/MmjInitInstall/index.less b/src/pages/GLQ/WebMMJ/MmjInitInstall/index.less deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/GLQ/WebMMJ/MmjInitInstall/index.tsx b/src/pages/GLQ/WebMMJ/MmjInitInstall/index.tsx index f463d81..d7126f6 100644 --- a/src/pages/GLQ/WebMMJ/MmjInitInstall/index.tsx +++ b/src/pages/GLQ/WebMMJ/MmjInitInstall/index.tsx @@ -1,10 +1,85 @@ -import styles from './index.less'; +import ContentWarp from '@/components/ContentWarp'; +import styles from '../../index.less'; +import { Form, Input } from 'antd'; +import ButtonComp from '@/components/ButtonComp'; // 网络MMJ管理 --> MMJ初装 export default function Page() { + + const [form] = Form.useForm(); + + const onFinish = (values: any) => { + console.log('表单提交:', values); + }; + + return ( -
- {'网络MMJ管理 --> MMJ初装'} -
+ <> +
+ +
配置与被控端连接的连接参数
+
+
+
+ + + + + + + + + +
+
+
+ form.submit()} /> +
+ { }} /> +
+
+ +
+
+
+
+
+
控制端系统配置信息
+
管理系统名称：--
+
系统IP：--
+
+
+
+
+
+
被控设备配置信息
+
设备名称：--
+
连接状态：--
+
+
+
+ ); } diff --git a/src/pages/GLQ/index.less b/src/pages/GLQ/index.less new file mode 100644 index 0000000..6f84444 --- /dev/null +++ b/src/pages/GLQ/index.less @@ -0,0 +1,60 @@ +.params_warp { + position: relative; + padding: 20px; +} + +.btn_warp { + position: absolute; + bottom: 20px; + right: 20px; + display: flex; + align-items: flex-end; + justify-content: flex-end; +} + +.bottom_warp { + 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; +} + +.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; + } +} \ No newline at end of file diff --git a/src/styles/antd.less b/src/styles/antd.less new file mode 100644 index 0000000..b24fd44 --- /dev/null +++ b/src/styles/antd.less @@ -0,0 +1,4 @@ +.ant-form-item .ant-form-item-label >label::after { + content: ""; + margin-inline-end: 10px; +} \ No newline at end of file diff --git a/src/styles/minix.less b/src/styles/minix.less new file mode 100644 index 0000000..c04ec38 --- /dev/null +++ b/src/styles/minix.less @@ -0,0 +1,21 @@ +.pd20 { + padding: 20px; +} + +.pb100 { + padding-bottom: 100px; +} + +.mr20 { + margin-right: 20px; +} + +.ml20 { + margin-left: 20px; +} + +.line { + width: 100%; + height: 1px; + background: #EDEDED; +} \ No newline at end of file diff --git a/src/utils/menu.ts b/src/utils/menu.ts index bf34c9b..29933ee 100644 --- a/src/utils/menu.ts +++ b/src/utils/menu.ts @@ -170,7 +170,7 @@ export const MenuType: any = { { name: '算法集合配置', url: '/resourceManage/algorithmSetConfig', img: '' }, { name: '管理类参数所属网络配置', url: '/resourceManage/networkConfig', img: '' } ] - },{ + }, { name: '资源配发', check: true, data: [ @@ -197,5 +197,35 @@ export const MenuType: any = { { name: '数据同步', check: true, data: [] }, ], '算法托收管理': [], - '算法邮箱管理': [] + '算法邮箱管理': [], + '注册管理': [ + { name: '设备注册', check: true, data: [] }, + { + name: '注册信息管理', + check: true, + data: [ + { name: '管理盘维护', url: '', img: '' }, + { name: '设备照片维护', url: '', img: '' }, + { name: '设备查找', url: '', img: '' }, + { name: '应用系统配置', url: '', img: '' }, + ] + }, + { + name: '信息汇总', + check: true, + data: [ + { name: '信息汇总', url: '', img: '' }, + ] + } + ], + '位置管理': [ + { name: '单位位置管理', check: true, data: [] }, + { + name: '注册信息管理', + check: true, + data: [ + { name: '地域编辑', url: '', img: '' }, + ] + }, + ] } \ No newline at end of file