更新

config/routes/index.ts

@@ -101,6 +101,17 @@ const routes = [
   { path: '/mailboxManage/index', name: '算法邮箱管理', component: '@/pages/SF/MailboxManage/index' },
   // ---------------------------------------------------------------------------
 
+
+  // ------------------------------SBJK二维版-----------------------------------
+
+  // ---------------------------------------------------------------------------
+
+
+  // ------------------------------设备注册-----------------------------------
+  
+  // ---------------------------------------------------------------------------
+
+
   // 建设中页面
   {
     path: '/construction',

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;
+}

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<PageProps> = ({
+  type = 'confirm',
+  text = '确定',
+  onClick
+}) => {
+  let timerId: any;
+
+  const click = () => {
+    clearTimeout(timerId);
+    timerId = setTimeout(() => {
+      onClick()
+    }, 300);
+  }
+
+  return (
+    <>
+      {
+        type == 'confirm' &&
+        <div className={`${styles.btn} ${styles.confirm_btn}`} onClick={click}>{text}</div>
+      }
+      {
+        type == 'cancel' &&
+        <div className={`${styles.btn} ${styles.cancel_btn}`} onClick={onClick}>{text}</div>
+      }
+    </>
+  )
+}
+
+export default ButtonComp

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;
+  }
+}

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<PageProps> = ({ 
+  style,
+  text,
+  ...props
+}) => {
+  
+  return (
+    <div className={styles.cont_warp} style={style}>
+      <div className={styles.cont_warp_title}>{text}</div>
+      {props?.children}
+    </div>
+  )
+}
+
+export default ContentWarp

src/global.less

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

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 {

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: 5, label: 'SBJK二维版', disabled: true },
-  { value: 6, label: '设备注册' }
+  { value: 6, label: '设备注册', disabled: true  }
 ]
 
 const leftMenuType: any = {
@@ -38,8 +38,8 @@ const leftMenuType: any = {
   // SBJK二维版
   '设备监控二维版': <div />,
   // 设备注册
-  '注册管理': <div />,
+  '注册管理': <LeftMenuOne key={15} data={MenuType['注册管理']} />,
-  '位置管理': <div />
+  '位置管理': <LeftMenuOne key={16} data={MenuType['位置管理']} />
 }
 
 export default function Layout() {

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 (
-    <div>
+    <>
-      {'GLQ远程维护 --> 建立远程链接--> 参数设置'}
+      <div className={styles.params_warp}>
-    </div>
+        <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>
+          </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>
+        </div>
+      </div>
+    </>
   );
 }

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 (
-    <div>
+    <>
-      {'网络MMJ管理 --> MMJ初装'}
+      <div className={styles.params_warp}>
-    </div>
+        <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>
+          </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>
+        </div>
+      </div>
+    </>
   );
 }

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;
+  }
+}

src/styles/antd.less

@@ -0,0 +1,4 @@
+.ant-form-item .ant-form-item-label >label::after {
+  content: "";
+  margin-inline-end: 10px;
+}

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;
+}

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: '' },
+      ] 
+    },
+  ]
 }