更新

config/routes/index.ts

@@ -34,7 +34,7 @@ const routes = [
   // ------------------------------网络GLQ配置----------------------------------
   // 获取配置信息
   { path: '/webGLQ/serviceListInfo', name: '服务列表信息', component: '@/pages/GLQ/WebGLQ/ServiceListInfo' },
-  { path: '/webGLQ/networkConfignInfo', name: '网络配置信息', component: '@/pages/GLQ/WebGLQ/NetworkConfignInfo' },
+  { path: '/webGLQ/networkConfigInfo', name: '网络配置信息', component: '@/pages/GLQ/WebGLQ/NetworkConfigInfo' },
   { path: '/webGLQ/securityPolicyInfo', name: '安全策略信息', component: '@/pages/GLQ/WebGLQ/SecurityPolicyInfo' },
   { path: '/webGLQ/manageConfigInfo', name: '管理配置信息', component: '@/pages/GLQ/WebGLQ/ManageConfigInfo' },
   { path: '/webGLQ/vpnPolicyInfo', name: 'VPN策略信息', component: '@/pages/GLQ/WebGLQ/VpnPolicyInfo' },

src/pages/GLQ/TeamViewer/ParamsSetting/index.tsx

@@ -3,18 +3,11 @@ import styles from '../../index.less';
 import { Form, Input, message } from 'antd';
 import ButtonComp from '@/components/ButtonComp';
 import { setParameter } from '@/services/gql';
+import { validateIPAddress } from '@/utils/validate';
 
 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) => {
     setParameter({
       ipAddress: values.ipAddress

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

@@ -1,11 +1,51 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
 import ButtonComp from '@/components/ButtonComp';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { getGlqInfo } from '@/services/gql';
+import ClearInfoDialog from '@/components/ClearInfoDialog';
+import SaveAs from '@/components/SaveAs';
 
-// 网络GLQ配置 --> 获取配置信息--> 日志记录信息
+// 网络GQL管理 --> 获取日志信息
 export default function Page() {
-  const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
+  const [lines, setLines] = useState<any>([]);
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [visibility, setVisibility] = useState<boolean>(false);
+  const outputRef: any = useRef(null);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentLineIndex < lines.length) {
+        setCurrentLineIndex((prevIndex) => prevIndex + 1);
+      } else {
+        clearInterval(timer);
+      }
+    }, 300);
+
+    if (outputRef.current.scrollHeight > 330) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+
+    return () => {
+      clearInterval(timer); // 组件卸载时清除定时器
+    };
+  }, [currentLineIndex, lines.length]);
+
+  const statusQuery = () => {
+    getGlqInfo({type: 4}).then((res) => {
+      if (res?.result == "success") {
+        setLines([
+          ...lines,
+          '发送命令成功',
+          `获取日志信息`,
+          `正在获取日志信息中...`,
+          `获取日志信息完成`
+        ])
+      } else {
+        setLines([`${res?.errorMsg}`])
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
@@ -13,16 +53,32 @@ export default function Page() {
         <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 ref={outputRef} className={styles.html_con}>
+            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
+              {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
+                <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
+              ))}
+            </div>
           </div>
           <div className={styles.btn_warp}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { }} />
-            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'文件另存'} onClick={() => { }} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
+            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { statusQuery() }} />
+            <SaveAs style={{ marginRight: 20}} fileName='获取日志信息' domId='messageInfo'/>
+            <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
           </div>
         </div>
       </ContentWarp>
+
+      <ClearInfoDialog
+        visibility={visibility}
+        onCancel={() => setVisibility(false)}
+        onOk={() => {
+          if (lines.length == 0) return;
+          setLines([]);
+          setCurrentLineIndex(0);
+          setVisibility(false);
+        }}>
+        <div>确定清空信息吗？</div>
+      </ClearInfoDialog>
     </div>
   );
 }

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

@@ -1,11 +1,51 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
 import ButtonComp from '@/components/ButtonComp';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { getGlqInfo } from '@/services/gql';
+import ClearInfoDialog from '@/components/ClearInfoDialog';
+import SaveAs from '@/components/SaveAs';
 
-// 网络GLQ配置 --> 获取配置信息--> 管理配置信息
+// 网络GQL管理 --> 获取管理配置
 export default function Page() {
-  const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
+  const [lines, setLines] = useState<any>([]);
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [visibility, setVisibility] = useState<boolean>(false);
+  const outputRef: any = useRef(null);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentLineIndex < lines.length) {
+        setCurrentLineIndex((prevIndex) => prevIndex + 1);
+      } else {
+        clearInterval(timer);
+      }
+    }, 300);
+
+    if (outputRef.current.scrollHeight > 330) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+
+    return () => {
+      clearInterval(timer); // 组件卸载时清除定时器
+    };
+  }, [currentLineIndex, lines.length]);
+
+  const statusQuery = () => {
+    getGlqInfo({type: 4}).then((res) => {
+      if (res?.result == "success") {
+        setLines([
+          ...lines,
+          '发送命令成功',
+          `获取管理配置`,
+          `正在获取管理配置中...`,
+          `获取管理配置完成`
+        ])
+      } else {
+        setLines([`${res?.errorMsg}`])
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
@@ -13,16 +53,32 @@ export default function Page() {
         <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 ref={outputRef} className={styles.html_con}>
+            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
+              {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
+                <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
+              ))}
+            </div>
           </div>
           <div className={styles.btn_warp}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { }} />
-            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'文件另存'} onClick={() => { }} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
+            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { statusQuery() }} />
+            <SaveAs style={{ marginRight: 20}} fileName='获取管理配置' domId='messageInfo'/>
+            <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
           </div>
         </div>
       </ContentWarp>
+
+      <ClearInfoDialog
+        visibility={visibility}
+        onCancel={() => setVisibility(false)}
+        onOk={() => {
+          if (lines.length == 0) return;
+          setLines([]);
+          setCurrentLineIndex(0);
+          setVisibility(false);
+        }}>
+        <div>确定清空信息吗？</div>
+      </ClearInfoDialog>
     </div>
   );
-}
+}

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

@@ -0,0 +1,84 @@
+import ContentWarp from '@/components/ContentWarp';
+import styles from '../../index.less';
+import ButtonComp from '@/components/ButtonComp';
+import { useEffect, useRef, useState } from 'react';
+import { getGlqInfo } from '@/services/gql';
+import ClearInfoDialog from '@/components/ClearInfoDialog';
+import SaveAs from '@/components/SaveAs';
+
+// 网络GQL管理 --> 获取网络配置
+export default function Page() {
+  const [lines, setLines] = useState<any>([]);
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [visibility, setVisibility] = useState<boolean>(false);
+  const outputRef: any = useRef(null);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentLineIndex < lines.length) {
+        setCurrentLineIndex((prevIndex) => prevIndex + 1);
+      } else {
+        clearInterval(timer);
+      }
+    }, 300);
+
+    if (outputRef.current.scrollHeight > 330) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+
+    return () => {
+      clearInterval(timer); // 组件卸载时清除定时器
+    };
+  }, [currentLineIndex, lines.length]);
+
+  const statusQuery = () => {
+    getGlqInfo({type: 2}).then((res) => {
+      if (res?.result == "success") {
+        setLines([
+          ...lines,
+          '发送命令成功',
+          `获取网络配置`,
+          `正在获取网络配置中...`,
+          `获取网络配置完成`
+        ])
+      } else {
+        setLines([`${res?.errorMsg}`])
+      }
+    })
+  }
+
+  return (
+    <div className={styles.params_warp}>
+      <ContentWarp text={'获取网络配置'}>
+        <div className='pd20'>被控端网络状态信息配置情况</div>
+        <div className='line'></div>
+        <div className='pd20 pb100'>
+          <div ref={outputRef} className={styles.html_con}>
+            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
+              {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
+                <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
+              ))}
+            </div>
+          </div>
+          <div className={styles.btn_warp}>
+            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { statusQuery() }} />
+            <SaveAs style={{ marginRight: 20}} fileName='被控端网络状态信息配置情况' domId='messageInfo'/>
+            <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
+          </div>
+        </div>
+      </ContentWarp>
+
+      <ClearInfoDialog
+        visibility={visibility}
+        onCancel={() => setVisibility(false)}
+        onOk={() => {
+          if (lines.length == 0) return;
+          setLines([]);
+          setCurrentLineIndex(0);
+          setVisibility(false);
+        }}>
+        <div>确定清空信息吗？</div>
+      </ClearInfoDialog>
+    </div>
+  );
+}

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

@@ -1,28 +0,0 @@
-import ContentWarp from '@/components/ContentWarp';
-import styles from '../../index.less';
-import ButtonComp from '@/components/ButtonComp';
-import { useState } from 'react';
-
-// 网络GLQ配置 --> 获取配置信息--> 网络配置信息
-export default function Page() {
-  const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
-
-  return (
-    <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}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { }} />
-            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'文件另存'} onClick={() => { }} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
-          </div>
-        </div>
-      </ContentWarp>
-    </div>
-  );
-}

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

@@ -1,30 +1,84 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
 import ButtonComp from '@/components/ButtonComp';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { getGlqInfo } from '@/services/gql';
+import ClearInfoDialog from '@/components/ClearInfoDialog';
+import SaveAs from '@/components/SaveAs';
 
-// 网络GLQ配置 --> 获取配置信息--> 获取安全策略
+// 网络GQL管理 --> 获取安全策略
 export default function Page() {
-  const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
+  const [lines, setLines] = useState<any>([]);
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [visibility, setVisibility] = useState<boolean>(false);
+  const outputRef: any = useRef(null);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentLineIndex < lines.length) {
+        setCurrentLineIndex((prevIndex) => prevIndex + 1);
+      } else {
+        clearInterval(timer);
+      }
+    }, 300);
+
+    if (outputRef.current.scrollHeight > 330) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+
+    return () => {
+      clearInterval(timer); // 组件卸载时清除定时器
+    };
+  }, [currentLineIndex, lines.length]);
+
+  const statusQuery = () => {
+    getGlqInfo({type: 3}).then((res) => {
+      if (res?.result == "success") {
+        setLines([
+          ...lines,
+          '发送命令成功',
+          `获取安全策略`,
+          `正在获取安全策略中...`,
+          `获取安全策略完成`
+        ])
+      } else {
+        setLines([`${res?.errorMsg}`])
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
-      <ContentWarp text={'获取网络配置'}>
+      <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 ref={outputRef} className={styles.html_con}>
+            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
+              {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
+                <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
+              ))}
+            </div>
           </div>
           <div className={styles.btn_warp}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { }} />
-            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'文件另存'} onClick={() => { }} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
+            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { statusQuery() }} />
+            <SaveAs style={{ marginRight: 20}} fileName='获取安全策略' domId='messageInfo'/>
+            <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
           </div>
         </div>
       </ContentWarp>
+
+      <ClearInfoDialog
+        visibility={visibility}
+        onCancel={() => setVisibility(false)}
+        onOk={() => {
+          if (lines.length == 0) return;
+          setLines([]);
+          setCurrentLineIndex(0);
+          setVisibility(false);
+        }}>
+        <div>确定清空信息吗？</div>
+      </ClearInfoDialog>
     </div>
   );
-}
-
-
+}

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

@@ -1,19 +1,22 @@
 
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
-import { ConfigProvider, Form, Input, Table } from 'antd';
+import { ConfigProvider, Form, Input, Table, message } from 'antd';
 import ButtonComp from '@/components/ButtonComp';
 import { useState } from 'react';
 
 import { rowClassName } from '@/utils';
+import { validateIPAddress, validatePort } from '@/utils/validate';
+import { remoteFileConfiSendData, remoteFileConfigClean } from '@/services/gql';
 
 // 网络GLQ配置 --> 远程文件配置--> 服务列表
 export default function Page() {
   const [form] = Form.useForm();
-  const [tableData, setTableData] = useState([]);
+  const [tableData, setTableData] = useState<any>([]);
 
   const onFinish = (values: any) => {
-    console.log('表单提交:', values);
+    values.rowKey = Math.random();
+    setTableData([...tableData, values])
   };
 
   const columns: any = [
@@ -23,10 +26,41 @@ export default function Page() {
         return <span>{c + 1}</span>;
       },
     },
-    { title: '服务名称', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '服务器IP', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '服务端口', dataIndex: 'name', key: 'name', align: 'center' },
+    { title: '服务名称', dataIndex: 'serviceName', key: 'serviceName', align: 'center' },
+    { title: '服务器IP', dataIndex: 'serviceIP', key: 'serviceIP', align: 'center' },
+    { title: '服务端口', dataIndex: 'servicePort', key: 'servicePort', align: 'center' },
   ]
+  
+  const sending = () => {
+    if(tableData.length == 0) {
+      message.info('请添加数据');
+      return
+    }
+    
+    let serviceList = tableData.map(({serviceName, serviceIP, servicePort}: any) => {
+      return {serviceName, serviceIP, servicePort}
+    })
+    remoteFileConfiSendData({
+      jsonStr: JSON.stringify({ serviceList: serviceList }),
+      type: 1
+    }).then( (res) => {
+      if (res?.result == "success") {
+        message.success('发送数据成功');
+      }else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
+  
+  const clearInfo = () => {
+    remoteFileConfigClean({type: 1}).then(res => {
+      if (res?.result == "success") {
+        message.success('清除信息成功');
+      }else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
@@ -36,16 +70,16 @@ export default function Page() {
         <div className='pd20 pb100'>
 
           <Form form={form} layout={'inline'} onFinish={onFinish} className='mb20'>
-            <Form.Item name="aaa" label="服务名称" rules={[{ required: true, message: '请输入服务名称' }]} >
-              <Input style={{ width: '280px', marginRight: 24 }} />
+            <Form.Item name="serviceName" label="服务名称" rules={[{ required: true, message: '请输入服务名称' }]} >
+              <Input style={{ width: '200px' }} />
             </Form.Item>
-            <Form.Item name="bbb" label="服务IP" rules={[{ required: true, message: '请输入服务名称' }]} >
-              <Input style={{ width: '280px' }} />
+            <Form.Item name="serviceIP" label="服务IP" rules={[{ required: true, message: '请输入服务IP' },{ validator: validateIPAddress }]} >
+              <Input style={{ width: '200px' }} />
             </Form.Item>
-            <div style={{ display: 'flex', marginLeft: 24 }}>
-              <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'端口'} onClick={() => { }} />
-              <ButtonComp text={'提交'} onClick={() => form.submit()} />
-            </div>
+            <Form.Item name="servicePort" label="服务端口" rules={[{ required: true, message: '请输入服务端口' },{ validator: validatePort }]} >
+              <Input style={{ width: '200px' }} />
+            </Form.Item>
+            <ButtonComp text={'提交'} onClick={() => form.submit()} />
           </Form>
 
           <Table
@@ -54,13 +88,13 @@ export default function Page() {
             bordered
             columns={columns}
             dataSource={tableData}
-            rowKey={(record: any) => record?.id}
+            rowKey={(record: any) => record?.rowKey}
             rowClassName={rowClassName}
           />
 
           <div className={styles.btn_warp}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送数据'} onClick={() => { }} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => { }} />
+            <ButtonComp style={{ marginRight: 20 }} text={'发送数据'} onClick={() => sending()} />
+            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => clearInfo()} />
           </div>
         </div>
       </ContentWarp>

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

@@ -1,11 +1,51 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
 import ButtonComp from '@/components/ButtonComp';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { getGlqInfo } from '@/services/gql';
+import ClearInfoDialog from '@/components/ClearInfoDialog';
+import SaveAs from '@/components/SaveAs';
 
-// 网络GLQ配置 --> 获取配置信息--> 服务列表信息
+// 网络GQL管理 --> 获取服务列表
 export default function Page() {
-  const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
+  const [lines, setLines] = useState<any>([]);
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [visibility, setVisibility] = useState<boolean>(false);
+  const outputRef: any = useRef(null);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentLineIndex < lines.length) {
+        setCurrentLineIndex((prevIndex) => prevIndex + 1);
+      } else {
+        clearInterval(timer);
+      }
+    }, 300);
+
+    if (outputRef.current.scrollHeight > 330) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+
+    return () => {
+      clearInterval(timer); // 组件卸载时清除定时器
+    };
+  }, [currentLineIndex, lines.length]);
+
+  const statusQuery = () => {
+    getGlqInfo({type: 1}).then((res) => {
+      if (res?.result == "success") {
+        setLines([
+          ...lines,
+          '发送命令成功',
+          `获取服务列表`,
+          `正在获取服务列表中...`,
+          `获取服务列表完成`
+        ])
+      } else {
+        setLines([`${res?.errorMsg}`])
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
@@ -13,17 +53,32 @@ export default function Page() {
         <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 ref={outputRef} className={styles.html_con}>
+            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
+              {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
+                <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
+              ))}
+            </div>
           </div>
           <div className={styles.btn_warp}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { }} />
-            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'文件另存'} onClick={() => { }} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
+            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { statusQuery() }} />
+            <SaveAs style={{ marginRight: 20}} fileName='获取服务列表' domId='messageInfo'/>
+            <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
           </div>
         </div>
       </ContentWarp>
+
+      <ClearInfoDialog
+        visibility={visibility}
+        onCancel={() => setVisibility(false)}
+        onOk={() => {
+          if (lines.length == 0) return;
+          setLines([]);
+          setCurrentLineIndex(0);
+          setVisibility(false);
+        }}>
+        <div>确定清空信息吗？</div>
+      </ClearInfoDialog>
     </div>
   );
-}
-
+}

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

@@ -1,11 +1,51 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
 import ButtonComp from '@/components/ButtonComp';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { getGlqInfo } from '@/services/gql';
+import ClearInfoDialog from '@/components/ClearInfoDialog';
+import SaveAs from '@/components/SaveAs';
 
-// 网络GLQ配置 --> 获取配置信息--> VPN策略信息
+// 网络GQL管理 --> 获取VPN策略
 export default function Page() {
-  const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
+  const [lines, setLines] = useState<any>([]);
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [visibility, setVisibility] = useState<boolean>(false);
+  const outputRef: any = useRef(null);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentLineIndex < lines.length) {
+        setCurrentLineIndex((prevIndex) => prevIndex + 1);
+      } else {
+        clearInterval(timer);
+      }
+    }, 300);
+
+    if (outputRef.current.scrollHeight > 330) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+
+    return () => {
+      clearInterval(timer); // 组件卸载时清除定时器
+    };
+  }, [currentLineIndex, lines.length]);
+
+  const statusQuery = () => {
+    getGlqInfo({type: 4}).then((res) => {
+      if (res?.result == "success") {
+        setLines([
+          ...lines,
+          '发送命令成功',
+          `获取VPN策略`,
+          `正在获取VPN策略中...`,
+          `获取VPN策略完成`
+        ])
+      } else {
+        setLines([`${res?.errorMsg}`])
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
@@ -13,16 +53,32 @@ export default function Page() {
         <div className='pd20'>被控端VPN过滤策略配置情况</div>
         <div className='line'></div>
         <div className='pd20 pb100'>
-          <div className={styles.html_con}>
-            <div style={{ padding: '20px 12px' }} dangerouslySetInnerHTML={{ __html: htmlText }}></div>
+          <div ref={outputRef} className={styles.html_con}>
+            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
+              {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
+                <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
+              ))}
+            </div>
           </div>
           <div className={styles.btn_warp}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { }} />
-            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'文件另存'} onClick={() => { }} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
+            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { statusQuery() }} />
+            <SaveAs style={{ marginRight: 20}} fileName='获取VPN策略' domId='messageInfo'/>
+            <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
           </div>
         </div>
       </ContentWarp>
+
+      <ClearInfoDialog
+        visibility={visibility}
+        onCancel={() => setVisibility(false)}
+        onOk={() => {
+          if (lines.length == 0) return;
+          setLines([]);
+          setCurrentLineIndex(0);
+          setVisibility(false);
+        }}>
+        <div>确定清空信息吗？</div>
+      </ClearInfoDialog>
     </div>
   );
-}
+}

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

@@ -1,11 +1,51 @@
 import ContentWarp from '@/components/ContentWarp';
 import styles from '../../index.less';
 import ButtonComp from '@/components/ButtonComp';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { getGlqInfo } from '@/services/gql';
+import ClearInfoDialog from '@/components/ClearInfoDialog';
+import SaveAs from '@/components/SaveAs';
 
-// 网络GLQ配置 --> 获取配置信息--> 防火墙策略信息
+// 网络GQL管理 --> 获取防火墙策略
 export default function Page() {
-  const [htmlText, setHtmlText] = useState('<div>文本内容</div>')
+  const [lines, setLines] = useState<any>([]);
+  const [currentLineIndex, setCurrentLineIndex] = useState(0);
+  const [visibility, setVisibility] = useState<boolean>(false);
+  const outputRef: any = useRef(null);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (currentLineIndex < lines.length) {
+        setCurrentLineIndex((prevIndex) => prevIndex + 1);
+      } else {
+        clearInterval(timer);
+      }
+    }, 300);
+
+    if (outputRef.current.scrollHeight > 330) {
+      outputRef.current.scrollTop = outputRef.current.scrollHeight;
+    }
+
+    return () => {
+      clearInterval(timer); // 组件卸载时清除定时器
+    };
+  }, [currentLineIndex, lines.length]);
+
+  const statusQuery = () => {
+    getGlqInfo({type: 4}).then((res) => {
+      if (res?.result == "success") {
+        setLines([
+          ...lines,
+          '发送命令成功',
+          `获取防火墙策略`,
+          `正在获取防火墙策略中...`,
+          `获取防火墙策略完成`
+        ])
+      } else {
+        setLines([`${res?.errorMsg}`])
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
@@ -13,16 +53,32 @@ export default function Page() {
         <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 ref={outputRef} className={styles.html_con}>
+            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
+              {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
+                <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
+              ))}
+            </div>
           </div>
           <div className={styles.btn_warp}>
-            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { }} />
-            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'文件另存'} onClick={() => { }} />
-            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setHtmlText('')} />
+            <ButtonComp style={{ marginRight: 20 }} text={'发送命令'} onClick={() => { statusQuery() }} />
+            <SaveAs style={{ marginRight: 20}} fileName='获取防火墙策略' domId='messageInfo'/>
+            <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
           </div>
         </div>
       </ContentWarp>
+
+      <ClearInfoDialog
+        visibility={visibility}
+        onCancel={() => setVisibility(false)}
+        onOk={() => {
+          if (lines.length == 0) return;
+          setLines([]);
+          setCurrentLineIndex(0);
+          setVisibility(false);
+        }}>
+        <div>确定清空信息吗？</div>
+      </ClearInfoDialog>
     </div>
   );
 }

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

@@ -21,6 +21,7 @@ export default function Page() {
     let layoutInfo: any = localStorage.getItem('MMJInit');
     if (layoutInfo) {
       form.setFieldsValue({...JSON.parse(layoutInfo)})
+      setDataLoading(true);
     }
   }, [])
 
@@ -49,7 +50,7 @@ export default function Page() {
       if (res?.result == "success") {
         message.success('发送数据成功');
       } else {
-        message.error('发送数据失败');
+        message.error(res?.errorMsg);
       }
     })
   }
@@ -61,7 +62,7 @@ export default function Page() {
         form.resetFields()
         localStorage.removeItem('MMJInit');
       } else {
-        message.error('清空信息失败');
+        message.error(res?.errorMsg);
       }
     })
   }

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

@@ -70,7 +70,7 @@ export default function Page() {
           </div>
           <div className={styles.btn_warp}>
             <ButtonComp style={{ marginRight: 20 }} text={'状态查询'} onClick={() => { statusQuery() }} />
-            <SaveAs style={{ marginRight: 20}} domId='messageInfo'/>
+            <SaveAs style={{ marginRight: 20}} fileName='密码机状态' domId='messageInfo'/>
             <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
           </div>
         </div>

src/pages/InitialSystem/DeviceInstall/index.tsx

@@ -27,6 +27,7 @@ const DeviceInstall: FC<PageProps> = ({ }) => {
     let layoutInfo: any = localStorage.getItem('deviceInit');
     if (layoutInfo) {
       setFileInfo(JSON.parse(layoutInfo))
+      setDataLoading(true);
     }
   }, [])
 
@@ -79,7 +80,7 @@ const DeviceInstall: FC<PageProps> = ({ }) => {
               if (res?.result == "success") {
                 message.success('数据安装成功')
               } else {
-                message.error('数据加安装失败')
+                message.error(res?.errorMsg);
               }
             })
           }} />

src/services/gql.ts

@@ -5,8 +5,7 @@ export async function setParameter(data: any) {
   return postRequest(`/xgd/parameterSet/setParameter`, data);
 }
 
-// -----------------------------MMJ初装-------------------------
-// 清空信息
+// MMJ初装--清空信息
 export async function secretInit_cleanInfo(params: any) {
   return getRequest(`/xgd/secretInit/cleanInfo`, params);
 }
@@ -30,4 +29,23 @@ export async function secretInit_sendCommand(params: any) {
 // 发送数据
 export async function secretInit_sendData(params: any) {
   return postRequest(`/xgd/secretInit/sendData`, params);
+}
+
+// 网络隔离器配置
+// @param type 1.服务器列表信息 2.网络配置信息 3安全策略信息 4.管理配置信息 5.VPN策略信息 6.防火墙策略信息 7.日志记录信息
+export async function getGlqInfo(params: any) {
+  return getRequest(`/xgd/netGlq/getGlqInfo`, params);
+}
+
+// 远程文件配置
+// @param jsonStr
+// @param type
+export async function remoteFileConfiSendData(params: any) {
+  return getRequest(`/xgd/netGlq/remoteFileConfiSendData`, params);
+}
+
+// 远程文件配置模块的所有--清空信息
+// @param type
+export async function remoteFileConfigClean(params: any) {
+  return getRequest(`/xgd/netGlq/remoteFileConfigClean`, params);
 }

src/utils/index.ts

@@ -1,70 +1,3 @@
 export const  rowClassName = (record:any, index: any) => {
   return index % 2 === 0 ? 'even-row' : 'odd-row';
-};
-
-const parseParamsStr = (v: any, method?: string) => {
-  const param: any = {};
-  const p = Object.assign(true, v, {});
-  const arr: any = [];
-  Object.keys(p)
-    .sort()
-    .forEach(function (key) {
-      p[key] = p[key] === true ? 'true' : p[key];
-      p[key] = p[key] === false ? 'false' : p[key];
-      if (method === 'GET') {
-        if (p[key] !== null) {
-          if (typeof p[key] === 'object') {
-            param[key] = p[key];
-          } else {
-            param[key] = String(p[key]);
-          }
-          if (typeof p[key] === 'object' && p[key] == '') return;
-          const _key = p[key] === null || p[key] === 'null' ? '' : p[key];
-          arr.push(
-            `${key}=${
-              typeof _key === 'string' || typeof _key === 'number' ? _key : JSON.stringify(_key)
-            }`,
-          );
-        }
-      } else {
-        const _key = p[key] === null || p[key] === 'null' ? '' : p[key];
-        arr.push(
-          `${key}=${
-            typeof _key === 'string' || typeof _key === 'number' ? _key : JSON.stringify(_key)
-          }`,
-        );
-        if (typeof p[key] === 'object') {
-          param[key] = p[key];
-        } else {
-          param[key] = p[key];
-        }
-      }
-    });
-  return arr.join('&');
-};
-
-const aKey = 'e83900ca9be33747397cc81a8f68ac11';
-const sKey = '6de3a75ae5718cde1e0907a593afd01f';
-
-export const setHeader = (newOptions: any, url?: string) => {
-  const timenow = Date.now();
-  const stringToSign =
-    'method=' +
-    newOptions.method +
-    '&' +
-    (!!Object.keys(newOptions?.params || {})?.length
-      ? parseParamsStr(newOptions.params, newOptions.method) + '&'
-      : '') +
-    (!!Object.keys(newOptions?.body || {})?.length
-      ? parseParamsStr(JSON.parse(newOptions.body)) + '&'
-      : '') +
-    'ak=' +
-    aKey +
-    '&sk=' +
-    sKey +
-    '&time=' +
-    timenow;
-
-  newOptions.headers['X-EDU-Timestamp'] = timenow;
-  return newOptions;
 };

src/utils/menu.ts

@@ -61,7 +61,7 @@ export const MenuType: any = {
       check: true,
       data: [
         { name: '服务列表信息', url: '/webGLQ/serviceListInfo', img: '' },
-        { name: '网络配置信息', url: '/webGLQ/networkConfignInfo', img: '' },
+        { name: '网络配置信息', url: '/webGLQ/networkConfigInfo', img: '' },
         { name: '安全策略信息', url: '/webGLQ/securityPolicyInfo', img: '' },
         { name: '管理配置信息', url: '/webGLQ/manageConfigInfo', img: '' },
         { name: 'VPN策略信息', url: '/webGLQ/vpnPolicyInfo', img: '' },

src/utils/validate.ts

@@ -0,0 +1,16 @@
+
+// 校验端口
+export const validatePort = (_: any, value: any, callback: any) => {
+  if (value && !/^\d+$/.test(value)) {
+    return Promise.reject(new Error('请输入有效的端口号'));
+  } 
+  return Promise.resolve();
+};
+
+// 校验ip
+export 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();
+};