对接完gql模块接口

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

@@ -1,17 +1,48 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
-import { Form, Input, Select } from 'antd';
+import { Form, Input, Select, message } from 'antd';
 import ButtonComp from '@/components/ButtonComp';
+import { useEffect } from 'react';
+import { remoteFileConfiSendData, remoteFileConfigClean } from '@/services/gql';
 
 // 网络GLQ配置 --> 远程文件配置--> 管理配置
 export default function Page() {
 
   const [form] = Form.useForm();
 
+  useEffect(() => {
+    form.setFieldsValue({
+      deviceLocation: '前端机平台',
+      deviceType: '类型1',
+      hotStandby: 'no',
+      deviceId: '',
+    })
+  }, [])
+
   const onFinish = (values: any) => {
-    console.log('表单提交:', values);
+    remoteFileConfiSendData({
+      jsonStr: JSON.stringify(values),
+      type: 4
+    }).then((res) => {
+      if (res?.result == "success") {
+        message.success('文件提交成功');
+        form.resetFields();
+      } else {
+        message.error(res?.errorMsg);
+      }
+    })
   };
 
+  const clearInfo = () => {
+    remoteFileConfigClean({type: 4}).then(res => {
+      if (res?.result == "success") {
+        message.success('清除信息成功');
+      }else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
+
 
   return (
     <div className={`${styles.params_warp}`}>
@@ -24,7 +55,7 @@ export default function Page() {
             onFinish={onFinish}
           >
             <Form.Item
-              name="a3"
+              name="deviceLocation"
               label="设备位置"
               rules={[
                 { required: true, message: '请选择设备位置' },
@@ -34,13 +65,13 @@ export default function Page() {
                 style={{ width: 560 }}
                 onChange={(e) => { }}
                 options={[
-                  { label: '前端机平台', value: 1 },
+                  { label: '前端机平台', value: '前端机平台' },
-                  { label: '后端机平台', value: 2 }
+                  { label: '后端机平台', value: '后端机平台' }
                 ]}
               />
             </Form.Item>
             <Form.Item
-              name="a2"
+              name="deviceType"
               label="设备类型"
               rules={[
                 { required: true, message: '请选择设备类型' },
@@ -50,13 +81,13 @@ export default function Page() {
                 style={{ width: 560 }}
                 onChange={(e) => { }}
                 options={[
-                  { label: '前端机平台', value: 1 },
+                  { label: '类型1', value: '类型1' },
-                  { label: '后端机平台', value: 2 }
+                  { label: '类型2', value: '类型2' }
                 ]}
               />
             </Form.Item>
             <Form.Item
-              name="a1"
+              name="hotStandby"
               label="存在热备"
               rules={[
                 { required: true, message: '请选择存在热备' },
@@ -66,13 +97,13 @@ export default function Page() {
                 style={{ width: 560 }}
                 onChange={(e) => { }}
                 options={[
-                  { label: 'no', value: 1 },
+                  { label: 'no', value: 'no' },
-                  { label: 'yes', value: 2 }
+                  { label: 'yes', value: 'yes' }
                 ]}
               />
             </Form.Item>
             <Form.Item
-              name="a5"
+              name="deviceId"
               label="设备标识"
               rules={[
                 { required: true, message: '请输入设备标识' },
@@ -83,7 +114,7 @@ export default function Page() {
           </Form>
           <div className={styles.btn_warp}>
             <ButtonComp style={{ marginRight: 20 }} text={'文件提交'} onClick={() => form.submit()} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => form.resetFields()} />
+            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => clearInfo()} />
           </div>
         </div>
       </ContentWarp>

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

@@ -5,7 +5,7 @@ import ButtonComp from '@/components/ButtonComp';
 import { useEffect, useState } from 'react';
 
 import { rowClassName } from '@/utils';
-import { getTextSecretInfo } from '@/services/gql';
+import { getTextSecretInfo, remoteFileConfiSendData } from '@/services/gql';
 import { validateIPAddress } from '@/utils/validate';
 
 // 网络GLQ配置 --> 远程文件配置--> 安全策略
@@ -17,9 +17,26 @@ export default function Page() {
     form.setFieldsValue({ip: '114.114.114.114'})
   }, [])
 
+
+  const columns: any = [
+    {
+      title: '序号', key: 'index', align: 'center', width: 100,
+      render: (a: any, b: any, c: any) => {
+        return <span>{c + 1}</span>;
+      },
+    },
+    { title: '单位名称', dataIndex: '单位名称', key: '单位名称', align: 'center' },
+    { title: '设备名称', dataIndex: '设备名称', key: '设备名称', align: 'center' },
+    { title: '设备IP',   dataIndex: '设备ip',  key: '设备ip',   align: 'center' },
+    { title: '电话号码', dataIndex: '电话号码', key: '电话号码', align: 'center' },
+    { title: '设备属性', dataIndex: '设备属性', key: '设备属性', align: 'center' },
+    { title: '设备型号', dataIndex: '设备型号', key: '设备型号', align: 'center' },
+  ]
+
   const onFinish = (values: any) => {
     getTextSecretInfo(values).then(res => {
       if (res?.result == "success") {
+        setTableData(res?.data[0].jsonStr)
         message.success('获取成功');
       } else {
         message.error(res?.errorMsg);
@@ -27,20 +44,23 @@ export default function Page() {
     })
   };
 
-  const columns: any = [
+  const sending = () => {
-    {
+    if (tableData.length == 0) {
-      title: '序号', key: 'index', align: 'center', width: 100,
+      message.info('请获取普密信息后再发送数据');
-      render: (a: any, b: any, c: any) => {
+      return
-        return <span>{c + 1}</span>;
+    }
-      },
+
-    },
+    remoteFileConfiSendData({
-    { title: '单位名称', dataIndex: 'name', key: 'name', align: 'center' },
+      jsonStr: JSON.stringify(tableData),
-    { title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
+      type: 3
-    { title: '设备IP', dataIndex: 'name', key: 'name', align: 'center' },
+    }).then( (res) => {
-    { title: '电话号码', dataIndex: 'name', key: 'name', align: 'center' },
+      if (res?.result == "success") {
-    { title: '设备属性', dataIndex: 'name', key: 'name', align: 'center' },
+        message.success('发送数据成功');
-    { title: '设备型号', dataIndex: 'name', key: 'name', align: 'center' },
+      }else {
-  ]
+        message.error(res?.errorMsg);
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
@@ -72,7 +92,7 @@ export default function Page() {
           <div className='mt20'>尚未连接普密对外服务器！</div>
 
           <div className={styles.btn_warp}>
-            <ButtonComp text={'发送数据'} onClick={() => { }} />
+            <ButtonComp text={'发送数据'} onClick={() => sending()} />
           </div>
         </div>
       </ContentWarp>

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

@@ -1,18 +1,85 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
 import styles1 from './index.less';
-import { Form, Input, Select } from 'antd';
+import { Form, Input, Select, Table, message } from 'antd';
 import ButtonComp from '@/components/ButtonComp';
+import { useEffect, useState } from 'react';
+import { rowClassName } from '@/utils';
+import { validateIPAddress } from '@/utils/validate';
+import { remoteFileConfiSendData, remoteFileConfigClean } from '@/services/gql';
 
 // 网络GLQ配置 --> 远程文件配置--> VPN策略
 export default function Page() {
 
   const [form] = Form.useForm();
+  const [tableData, setTableData] = useState<any>([]);
+  const [activeList, setActiveList] = useState<any>([]);
+
+  useEffect(() => {
+    form.setFieldsValue({
+      unitName: '',
+      deviceName: '',
+      deviceIp: '',
+      deviceId: '',
+      messageComm: 1,
+      pingComm: 1,
+    })
+  }, [])
+
+  const columns: any = [
+    {
+      title: '序号', key: 'index', align: 'center', width: 100,
+      render: (a: any, b: any, c: any) => {
+        return <span>{c + 1}</span>;
+      },
+    },
+    { title: '单位名称', dataIndex: 'unitName', key: 'unitName', align: 'center' },
+    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
+    { title: '设备IP', dataIndex: 'deviceIp', key: 'deviceIp', align: 'center' },
+    { title: '设备ID', dataIndex: 'deviceId', key: 'deviceId', align: 'center' },
+    { title: '报文通信策略', dataIndex: 'messageComm', key: 'messageComm', align: 'center' },
+    { title: 'PING通信策略', dataIndex: 'pingComm', key: 'pingComm', align: 'center' },
+  ]
 
   const onFinish = (values: any) => {
-    console.log('表单提交:', values);
+    values.rowKey = Math.floor(Math.random() * 10000);
+    setTableData([...tableData, values])
   };
 
+  const sending = () => {
+    if (tableData.length == 0) {
+      message.info('请添加数据');
+      return
+    }else if (activeList.length == 0) {
+      message.info('请勾选需要发送的数据');
+      return
+    }
+
+    let serviceList = activeList.map(({ unitName, deviceName, deviceIp, deviceId, messageComm, pingComm }: any) => {
+      return { unitName, deviceName, deviceIp, deviceId, messageComm, pingComm }
+    })
+    remoteFileConfiSendData({
+      jsonStr: JSON.stringify({ serviceList: serviceList }),
+      type: 5
+    }).then((res) => {
+      if (res?.result == "success") {
+        message.success('发送数据成功');
+        form.resetFields();
+      } else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
+
+  const clearInfo = () => {
+    remoteFileConfigClean({ type: 5 }).then(res => {
+      if (res?.result == "success") {
+        message.success('清除信息成功');
+      } else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
 
   return (
     <div className={`${styles.params_warp} ${styles1.params_warp1}`}>
@@ -25,50 +92,54 @@ export default function Page() {
             onFinish={onFinish}
           >
             <Form.Item
-              name="a3"
+              name="unitName"
               label="单位名称"
               rules={[
                 { required: true, message: '请输入单位名称' },
               ]}
             >
-              <Input style={{ width: '560px' }} />
+              <Input style={{ width: '630px' }} />
             </Form.Item>
             <Form.Item
-              name="a2"
+              name="deviceName"
               label="设备名称"
               rules={[
                 { required: true, message: '请输入设备名称' },
               ]}
             >
-              <Input style={{ width: '560px' }} />
+              <Input style={{ width: '630px' }} />
             </Form.Item>
+            <div style={{ display: 'flex' }}>
               <Form.Item
-              name="a1"
+                name="deviceIp"
                 label="设备IP"
                 rules={[
                   { required: true, message: '请输入设备IP' },
+                  { validator: validateIPAddress }
                 ]}
               >
-              <Input style={{ width: '560px' }} />
+                <Input style={{ width: '250px', marginRight: 20 }} />
               </Form.Item>
               <Form.Item
-              name="a5"
+                name="deviceId"
                 label="设备ID"
                 rules={[
                   { required: true, message: '请输入设备ID' },
                 ]}
               >
-              <Input style={{ width: '560px' }} />
+                <Input style={{ width: '250px' }} />
               </Form.Item>
+            </div>
+            <div style={{ display: 'flex' }}>
               <Form.Item
-              name="a53"
+                name="messageComm"
                 label="报文通信策略"
                 rules={[
                   { required: true, message: '请选择报文通信策略' },
                 ]}
               >
                 <Select
-                style={{ width: 560 }}
+                  style={{ width: 250, marginRight: 20 }}
                   onChange={(e) => { }}
                   options={[
                     { label: '加密通信', value: 1 },
@@ -78,14 +149,14 @@ export default function Page() {
                 />
               </Form.Item>
               <Form.Item
-              name="a21"
+                name="pingComm"
                 label="PING通信策略"
                 rules={[
                   { required: true, message: '请选择PING通信策略' },
                 ]}
               >
                 <Select
-                style={{ width: 560 }}
+                  style={{ width: 250, marginRight: 20 }}
                   onChange={(e) => { }}
                   options={[
                     { label: '允许互PING', value: 1 },
@@ -93,16 +164,28 @@ export default function Page() {
                   ]}
                 />
               </Form.Item>
-          </Form>
-
-          <div className='flex_aiC'>
-            <div className='mr20'>按住“Ctrl”或“Shift”对信息进行多选。</div>
               <ButtonComp text={'提交'} onClick={() => form.submit()} />
             </div>
+          </Form>
+
+          <Table
+            scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
+            pagination={false}
+            bordered
+            columns={columns}
+            dataSource={tableData}
+            rowKey={(record: any) => record?.rowKey}
+            rowClassName={rowClassName}
+            rowSelection={{
+              onChange: (selectedRowKeys: any, selectedRows: any) => {
+                setActiveList(selectedRows)
+              }
+            }}
+          />
 
           <div className={styles.btn_warp}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送数据'} onClick={() => { }} />
+            <ButtonComp style={{ marginRight: 20 }} text={'发送数据'} onClick={() => sending()} />
-            <ButtonComp type={'cancel'} text={'信息清空'} onClick={() => form.resetFields()} />
+            <ButtonComp type={'cancel'} text={'信息清空'} onClick={() => clearInfo()} />
           </div>
         </div>
       </ContentWarp>