搭建完GLQD模块的页面

src/pages/GLQ/WebGLQ/ManageConfig/index.tsx

@@ -14,7 +14,7 @@ export default function Page() {
 
 
   return (
-    <div className={styles.params_warp}>
+    <div className={`${styles.params_warp}`}>
       <ContentWarp text={'管理文件配置'}>
         <div className='pd20'>配置隔离器应用程序运行管理参数</div>
         <div className='line'></div>
@@ -22,7 +22,6 @@ export default function Page() {
           <Form
             form={form}
             onFinish={onFinish}
-            labelCol={{ span: 2 }}
           >
             <Form.Item
               name="a3"
@@ -34,7 +33,10 @@ export default function Page() {
               <Select
                 style={{ width: 560 }}
                 onChange={(e) => {}}
-                options={[]}
+                options={[
+                  {label: '前端机平台', value: 1},
+                  {label: '后端机平台', value: 2}
+                ]}
               />
             </Form.Item>
             <Form.Item
@@ -47,7 +49,10 @@ export default function Page() {
               <Select
                 style={{ width: 560 }}
                 onChange={(e) => {}}
-                options={[]}
+                options={[
+                  {label: '前端机平台', value: 1},
+                  {label: '后端机平台', value: 2}
+                ]}
               />
             </Form.Item>
             <Form.Item
@@ -60,7 +65,10 @@ export default function Page() {
               <Select
                 style={{ width: 560 }}
                 onChange={(e) => {}}
-                options={[]}
+                options={[
+                  {label: 'no', value: 1},
+                  {label: 'yes', value: 2}
+                ]}
               />
             </Form.Item>
             <Form.Item

src/pages/GLQ/WebGLQ/NetworkParams/index.less

@@ -0,0 +1,6 @@
+.params_warp1 {
+  [class~='ant-form-item-label'] {
+    width: 80px;
+    justify-content: flex-end;
+  }
+}

src/pages/GLQ/WebGLQ/NetworkParams/index.tsx

@@ -1,5 +1,6 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
+import styles1 from './index.less';
 import { Form, Input } from 'antd';
 import ButtonComp from '@/components/ButtonComp';
 
@@ -14,7 +15,7 @@ export default function Page() {
 
 
   return (
-    <div className={styles.params_warp}>
+    <div className={`${styles.params_warp} ${styles1.params_warp1}`}>
       <ContentWarp text={'网络参数配置'}>
         <div className='pd20'>配置隔离器网络运行参数</div>
         <div className='line'></div>
@@ -22,7 +23,6 @@ export default function Page() {
           <Form
             form={form}
             onFinish={onFinish}
-            labelCol={{ span: 2 }}
           >
             <Form.Item
               name="a3"

src/pages/GLQ/WebGLQ/SecurityPolicy/index.tsx

@@ -9,8 +9,6 @@ import { tableTheme } from '@/utils/theme';
 export default function Page() {
   const [form] = Form.useForm();
   const [tableData, setTableData] = useState([]);
-  const [page, setPage] = useState(1);
-  const [limit, setLimit] = useState(10);
   const [total, setTotal] = useState(0);
 
   const onFinish = (values: any) => {
@@ -22,22 +20,37 @@ export default function Page() {
       title: '序号',
       key: 'index',
       align: 'center',
+      width: 100,
       render: (text: any, record: any, index: any) => {
-        return <span>{(page - 1) * limit + index + 1}</span>;
+        return <span>{index + 1}</span>;
       },
     }, {
-      title: '服务名称',
+      title: '单位名称',
       dataIndex: 'name',
       key: 'name',
       align: 'center',
-      render: (text: any) => <a>{text}</a>,
     }, {
-      title: '服务器IP',
+      title: '设备名称',
       dataIndex: 'age',
       key: 'age',
       align: 'center',
     }, {
-      title: '服务端口',
+      title: '设备IP',
+      dataIndex: 'age',
+      key: 'age',
+      align: 'center',
+    }, {
+      title: '电话号码',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    }, {
+      title: '设备属性',
+      dataIndex: 'age',
+      key: 'age',
+      align: 'center',
+    }, {
+      title: '设备型号',
       dataIndex: 'age',
       key: 'age',
       align: 'center',
@@ -54,17 +67,6 @@ export default function Page() {
         <div className='pd20'>配置隔离器与外网设备通信白名单列表</div>
         <div className='line'></div>
         <div className='pd20 pb100'>
-
-          <Form form={form} layout={'inline'} onFinish={onFinish} className='mb20'>
-            <Form.Item name="aaa" label="普密对外服务器IP（仅Ⅱ型隔离器时需配置此项）" rules={[{ required: true, message: '请输入普密对外服务器IP' }]} >
-              <Input style={{ width: '280px' }} />
-            </Form.Item>
-            <div style={{ display: 'flex', marginLeft: 20 }}>
-              <ButtonComp text={'获取普密信息'} onClick={() => form.submit()} />
-            </div>
-            <div className={styles.erroInfo} style={{color: '#333'}}>尚未连接普密对外服务器！</div>
-          </Form>
-
           <ConfigProvider theme={tableTheme}>
             <Table
               scroll={{y: 451}}
@@ -77,6 +79,17 @@ export default function Page() {
             />
           </ConfigProvider>
 
+          <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
+            <Form.Item name="aaa" label="普密对外服务器IP（仅Ⅱ型隔离器时需配置此项）" rules={[{ required: true, message: '请输入普密对外服务器IP' }]} >
+              <Input style={{ width: '280px' }} />
+            </Form.Item>
+            <div style={{ display: 'flex', marginLeft: 20 }}>
+              <ButtonComp text={'获取普密信息'} onClick={() => form.submit()} />
+            </div>
+          </Form>
+
+          <div className='mt20'>尚未连接普密对外服务器！</div>
+
           <div className={styles.btn_warp}>
             <ButtonComp text={'发送数据'} onClick={() => { }} />
           </div>

src/pages/GLQ/WebGLQ/ServiceList/index.tsx

@@ -10,8 +10,6 @@ import { tableTheme } from '@/utils/theme';
 export default function Page() {
   const [form] = Form.useForm();
   const [tableData, setTableData] = useState([]);
-  const [page, setPage] = useState(1);
-  const [limit, setLimit] = useState(10);
   const [total, setTotal] = useState(0);
 
   const onFinish = (values: any) => {
@@ -22,16 +20,16 @@ export default function Page() {
     {
       title: '序号',
       key: 'index',
+      width: 100,
       align: 'center',
       render: (text: any, record: any, index: any) => {
-        return <span>{(page - 1) * limit + index + 1}</span>;
+        return <span>{index + 1}</span>;
       },
     }, {
       title: '服务名称',
       dataIndex: 'name',
       key: 'name',
       align: 'center',
-      render: (text: any) => <a>{text}</a>,
     }, {
       title: '服务器IP',
       dataIndex: 'age',
@@ -63,7 +61,7 @@ export default function Page() {
             <Form.Item name="bbb" label="服务IP" rules={[{ required: true, message: '请输入服务名称' }]} >
               <Input style={{ width: '280px' }} />
             </Form.Item>
-            <div style={{ display: 'flex', marginLeft: 20 }}>
+            <div style={{ display: 'flex', marginLeft: 24 }}>
               <div className='mr20'>
                 <ButtonComp type={'cancel'} text={'端口'} onClick={() => { }} />
               </div>

src/pages/GLQ/WebGLQ/VpnPolicy/index.less

@@ -0,0 +1,6 @@
+.params_warp1 {
+  [class~='ant-form-item-label'] {
+    width: 110px;
+    justify-content: flex-end;
+  }
+}

src/pages/GLQ/WebGLQ/VpnPolicy/index.tsx

@@ -1,9 +1,113 @@
-import styles from './index.less';
+import ContentWarp from '@/components/ContentWarp';
+import styles from '../../index.less';
+import styles1 from './index.less';
+import { Form, Input, Select } from 'antd';
+import ButtonComp from '@/components/ButtonComp';
 
+// 网络GLQ配置 --> 远程文件配置--> VPN策略
 export default function Page() {
+
+  const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    console.log('表单提交:', values);
+  };
+
+
   return (
-    <div>
+    <div className={`${styles.params_warp} ${styles1.params_warp1}`}>
-      {'网络GLQ配置 --> 远程文件配置--> VPN策略'}
+      <ContentWarp text={'VPN策略配置'}>
+        <div className='pd20'>配置本地Ⅰ型隔离器与对端Ⅰ型隔离器之间数据通信的VPN策略</div>
+        <div className='line'></div>
+        <div className='pd20 pb100'>
+          <Form
+            form={form}
+            onFinish={onFinish}
+          >
+            <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="设备IP"
+              rules={[
+                { required: true, message: '请输入设备IP' },
+              ]}
+            >
+              <Input style={{ width: '560px' }} />
+            </Form.Item>
+            <Form.Item
+              name="a5"
+              label="设备ID"
+              rules={[
+                { required: true, message: '请输入设备ID' },
+              ]}
+            >
+              <Input style={{ width: '560px' }} />
+            </Form.Item>
+            <Form.Item
+              name="a53"
+              label="报文通信策略"
+              rules={[
+                { required: true, message: '请选择报文通信策略' },
+              ]}
+            >
+              <Select
+                style={{ width: 560 }}
+                onChange={(e) => {}}
+                options={[
+                  {label: '加密通信', value: 1},
+                  {label: '数据明传', value: 2},
+                  {label: '通信阻断', value: 3}
+                ]}
+              />
+            </Form.Item>
+            <Form.Item
+              name="a21"
+              label="PING通信策略"
+              rules={[
+                { required: true, message: '请选择PING通信策略' },
+              ]}
+            >
+              <Select
+                style={{ width: 560 }}
+                onChange={(e) => {}}
+                options={[
+                  {label: '允许互PING', value: 1},
+                  {label: '阻断互PING', value: 2}
+                ]}
+              />
+            </Form.Item>
+          </Form>
+
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            <div className='mr20'>按住“Ctrl”或“Shift”对信息进行多选。</div>
+            <ButtonComp text={'提交'} onClick={() => form.submit()} />
+          </div>
+          
+          <div className={styles.btn_warp}>
+            <div className='mr20'>
+              <ButtonComp text={'发送数据'} onClick={() => { }} />
+            </div>
+            <ButtonComp type={'cancel'} text={'信息清空'} onClick={() => form.resetFields()} />
+          </div>
+        </div>
+      </ContentWarp>
     </div>
   );
-}
+}

src/pages/GLQ/WebMMJ/MmjInitInstall/index.less

@@ -0,0 +1,6 @@
+.params_warp1 {
+  [class~='ant-form-item-label'] {
+    width: 100px;
+    justify-content: flex-end;
+  }
+}

src/pages/GLQ/WebMMJ/MmjInitInstall/index.tsx

@@ -1,5 +1,6 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
+import styles1 from './index.less';
 import { Form, Input } from 'antd';
 import ButtonComp from '@/components/ButtonComp';
 
@@ -14,7 +15,7 @@ export default function Page() {
 
 
   return (
-    <div className={styles.params_warp}>
+    <div className={`${styles.params_warp} ${styles1.params_warp1}`}>
       <ContentWarp text={'密码机初装'}>
         <div className='pd20'>发送密码机初装数据到被控端设备</div>
         <div className='line'></div>
@@ -22,7 +23,6 @@ export default function Page() {
           <Form
             form={form}
             onFinish={onFinish}
-            labelCol={{ span: 2 }}
           >
             <Form.Item
               name="a3"

src/styles/minix.less

@@ -10,6 +10,10 @@
   margin-right: 20px;
 }
 
+.mt20 {
+  margin-top: 20px;
+}
+
 .ml20 {
   margin-left: 20px;
 }