m修改宿主管理界面样式

src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx

 /* eslint-disable react/jsx-no-undef */
 import React, { useEffect, useState } from 'react';
-import {
-  Card,
-  Form,
-  Input,
-  Button,
-  Select,
-  message,
-  Divider,
-  Row,
-  Col,
-  Spin,
-} from 'antd';
+import { Card, Form, Input, Button, Select, message, Divider, Row, Col, Spin } from 'antd';
 import { CloseCircleFilled } from '@ant-design/icons';
 import styles from './IotConfig.less';
 import Internet from '../../../../assets/images/icons/物联.svg';
@@ -93,19 +82,6 @@ const IotConfig = () => {
         console.log(obj);
         form.setFieldsValue(obj);
         setCurrentIotConfig(val => ({ ...val, ...obj }));
-        setLoading(true);
-        PingIOTPlatform({
-          ip: obj.IotAddress,
-        }).then(res => {
-          setLoading(false);
-          if (res.code === 0) {
-            setShow1('block');
-            setShow2('none');
-          } else {
-            setShow1('none');
-            setShow2('block');
-          }
-        });
       }
     });
   };
@@ -149,14 +125,11 @@ const IotConfig = () => {
   return (
     <div className={styles.iot_container}>
       <Card
-        title={`物联平台${
-          currentIotVersion.data ? `[${currentIotVersion.data}]` : ''
-        }`}
+        // title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ''}`}
         style={{ width: '100%', height: 'calc(100vh - 130px)' }}
       >
         <Spin spinning={loading} tip="loading">
           <Form
-            {...layout}
             form={form}
             name="basic"
             initialValues={{ remember: true }}
@@ -168,119 +141,95 @@ const IotConfig = () => {
                 marginTop: '10px',
                 display: 'flex',
                 alignItems: 'center',
-                marginLeft: '15px',
               }}
             >
               <img src={Internet} style={{ height: '16px' }} alt="" />
-              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>
-                物联平台
-              </span>
+              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联平台</span>
             </div>
             <Divider />
-            <Row>
-              <Col span={18}>
-                <Form.Item
-                  label="服务地址(平台)"
-                  name="IotAddress"
-                  rules={[
-                    {
-                      required: true,
-                      pattern: new RegExp(
-                        /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/,
-                        'g',
-                      ),
-                      message: '请输入正确的IP例如:192.168.12.231',
-                    },
-                  ]}
-                >
-                  <Input style={{ width: '95%' }} />
-                </Form.Item>
-              </Col>
-              <Col span={3}>
-                <Button type="primary" onClick={() => PingIot1()}>
-                  连接
-                </Button>
-              </Col>
-              <Col span={3}>
+            <Form.Item
+              style={{ marginLeft: '20px' }}
+              label="服务地址(平台)"
+              name="IotAddress"
+              rules={[
+                {
+                  required: true,
+                  pattern: new RegExp(
+                    /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/,
+                    'g',
+                  ),
+                  message: '请输入正确的IP例如:192.168.12.231',
+                },
+              ]}
+            >
+              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+                <Input style={{ width: '300px', marginLeft: '15px' }} />
                 <span style={{ display: show1 }}>
                   <img
                     src={Yes}
                     style={{
-                      height: '32px',
-                      marginRight: '20px',
-                      marginTop: '5px',
+                      height: '24px',
+                      marginTop: '10px',
+                      marginLeft: '26px',
                     }}
                     alt=""
                   />
-                  <span style={{ verticalAlign: 'text-bottom' }}>已连接</span>
                 </span>
                 <span style={{ display: show2 }}>
                   <CloseCircleFilled
                     style={{
-                      fontSize: '32px',
-                      marginRight: '20px',
-                      marginTop: '5px',
+                      fontSize: '24px',
+                      marginTop: '10px',
+                      marginLeft: '26px',
                     }}
                   />
-                  <span style={{ verticalAlign: 'text-bottom' }}>未连接</span>
-                </span>
-              </Col>
-
-              <div
-                style={{
-                  marginTop: '40px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  marginLeft: '15px',
-                }}
-              >
-                <img src={EMQ} style={{ height: '16px' }} alt="" />
-                <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>
-                  EMQ
                 </span>
               </div>
-              <Divider />
-              <Col span={18}>
-                <Form.Item
-                  label="服务地址(EMQ)"
-                  name="TcpAddress"
-                  rules={[
-                    {
-                      required: true,
-                      pattern: new RegExp(/^.*:.*$/),
-                      message: '请输入正确的IP:端口',
-                    },
-                  ]}
-                >
-                  <Input style={{ width: '95%' }} />
-                </Form.Item>
-              </Col>
-              <Col span={6} />
-              <Col span={18}>
-                <Form.Item
-                  name="SSLSafe"
-                  label="SSL(EMQ)"
-                  rules={[{ required: true, message: '请选择是否!' }]}
-                >
-                  <Select placeholder="请选择是否!" style={{ width: '95%' }}>
-                    <Option value="1">是</Option>
-                    <Option value="0">否</Option>
-                  </Select>
-                </Form.Item>
-              </Col>
-              <Col span={6} />
-              <Col span={24}>
-                <Form.Item {...tailLayout}>
-                  <Button
-                    type="primary"
-                    htmlType="submit"
-                    disabled={currentIotConfig.TcpAddress.length > 0 ? 0 : 1}
-                  >
-                    保存
-                  </Button>
-                </Form.Item>
-              </Col>
-            </Row>
+            </Form.Item>
+            <Button type="primary" onClick={() => PingIot1()} style={{ marginLeft: '152px' }}>
+              连接
+            </Button>
+            <div
+              style={{
+                marginTop: '40px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <img src={EMQ} style={{ height: '16px' }} alt="" />
+              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>EMQ</span>
+            </div>
+            <Divider />
+            <Form.Item
+              style={{ marginLeft: '20px' }}
+              label="服务地址(EMQ)"
+              name="TcpAddress"
+              rules={[
+                {
+                  required: true,
+                  pattern: new RegExp(/^.*:.*$/),
+                  message: '请输入正确的IP:端口',
+                },
+              ]}
+            >
+              <Input style={{ width: '300px', marginLeft: '13px' }} />
+            </Form.Item>
+            <Form.Item
+              style={{ marginLeft: '20px' }}
+              name="SSLSafe"
+              label="SSL(EMQ)"
+              rules={[{ required: true, message: '请选择是否!' }]}
+            >
+              <Select placeholder="请选择是否!" style={{ width: '300px', marginLeft: '48px' }}>
+                <Option value="1">是</Option>
+                <Option value="0">否</Option>
+              </Select>
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
+                保存
+              </Button>
+            </Form.Item>
           </Form>
         </Spin>
       </Card>

src/pages/platformCenter/hostmanager/baseConfig/BaseConfig.jsx

-import React, { useState, useEffect } from 'react'
-import { Button, Descriptions, Input, Card, Divider, Row, Col } from 'antd'
-import styles from './BaseConfig.less'
-import { S_GetDataBaseConfig, GetTCPConfigInfo, GetDataBaseConfig, GetBasicInfo } from '@/services/platform/hostmanager'
-import { VerticalAlignBottomOutlined } from '@ant-design/icons'
-import servie from '../../../../assets/images/icons/服务器管理.svg' 
-import configuration from '../../../../assets/images/icons/站点配置.svg'
-
-
+import React, { useState, useEffect } from 'react';
+import { Button, Descriptions, Input, Card, Divider, Row, Col } from 'antd';
+import styles from './BaseConfig.less';
+import {
+  S_GetDataBaseConfig,
+  GetTCPConfigInfo,
+  GetDataBaseConfig,
+  GetBasicInfo,
+} from '@/services/platform/hostmanager';
+import { VerticalAlignBottomOutlined } from '@ant-design/icons';
+import servie from '../../../../assets/images/icons/服务器管理.svg';
+import configuration from '../../../../assets/images/icons/站点配置.svg';
 
 const BaseConfig = () => {
+  const [currentDataBase, setCurrentDataBase] = useState({
+    userName: '',
+    password: '',
+    dbName: '',
+    ip: '',
+  });
+  const [currentSiteInfo, setcurrentSiteInfo] = useState('');
 
+  useEffect(() => {
+    getCurrentConfig();
+    getSiteCode();
+  }, []);
 
-    const [currentDataBase, setCurrentDataBase] = useState({ userName: "", password: "", dbName: "", ip: "" });
-    const [currentSiteInfo, setcurrentSiteInfo] = useState("");
-
-
-    useEffect(() => {
-        getCurrentConfig()
-        getSiteCode()
-    }, [])
+  const getCurrentConfig = () => {
+    GetDataBaseConfig().then(res => {
+      if (res.code === 0) {
+        setCurrentDataBase(res.data);
+      }
+    });
+  };
+  const getSiteCode = () => {
+    GetBasicInfo().then(res => {
+      if (res.code === 0) {
+        setcurrentSiteInfo(res.data);
+      }
+    });
+  };
 
-    const getCurrentConfig = () => {
-
-        GetDataBaseConfig().then(
-            res => {
-                if (res.code === 0) {
-                    setCurrentDataBase(res.data)
-                }
-            }
-        )
-    }
-    const getSiteCode = () => {
-        GetBasicInfo().then(
-            res => {
-                if (res.code === 0) {
-                    setcurrentSiteInfo(res.data)
-                }
-            }
-        )
+  const encrypt = word => {
+    let encryptStr = '';
+    for (let i = 0; i < word.length; i++) {
+      encryptStr += '*';
     }
+    return encryptStr;
+  };
 
-    const encrypt = (word) => {
-        let encryptStr = ""
-        for (let i = 0; i < word.length; i++) {
-            encryptStr += "*"
-        }
-        return encryptStr
-    }
-    return (
-        <div className={styles.base_container}>
-            <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
-                <div style={{display:'flex', alignItems:'center', marginTop:'10px'}}>
-                    <img src={configuration} style={{ height: '16px'}}/><span style={{ marginLeft: '10px', fontWeight:'bold' }}>站点配置</span>
-                </div>
-                <Divider />
-                <Row>
-                    <Col span={3}>
-                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>站点编号</span>
-                    </Col>
-                    <Col span={21}>
-                        {
-                            currentSiteInfo ? <Input value={currentSiteInfo} disabled={true} style={{width:'80%'}}/>
-                                : <div>
-                                    <Input value={currentSiteInfo} style={{width:'80%'}} />
-                                    <Button style={{ marginLeft: "10px" }}>生成编号</Button>
-                                </div>
-                        }
-                    </Col>
-                </Row>
-                <div style={{ marginTop: '50px', display:'flex', alignItems:'center'}}>
-                    <img src={servie} style={{ height: '16px'}} alt="" /><span style={{ marginLeft: '10px', fontWeight:'bold' }}>服务器链接</span>
-                </div>
-                <Divider />
-                <Row gutter={[8, 16]} >
-                    <Col span={3}>
-                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>服务器IP</span>
-                    </Col>
-                    <Col span={21}>
-                        <span style={{ lineHeight: '32px' }}>{currentDataBase.ip}</span>
-                    </Col>
-                    <Col span={3}>
-                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>数据库名称</span>
-                    </Col>
-                    <Col span={21}>
-                        <span style={{ lineHeight: '32px' }}>{currentDataBase.dbName}</span>
-                    </Col>
-                    <Col span={3}>
-                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>登录名</span>
-                    </Col>
-                    <Col span={21}>
-                        <span style={{ lineHeight: '32px' }}>{currentDataBase.userName}</span>
-                    </Col>
-                    <Col span={3}>
-                        <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>密码</span>
-                    </Col>
-                    <Col span={21}>
-                        <span style={{ lineHeight: '32px' }}>{encrypt(currentDataBase.password)}</span>
-                    </Col>
-                </Row>
-            </Card>
+  return (
+    <div className={styles.base_container}>
+      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
+        <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
+          <img src={configuration} style={{ height: '16px' }} />
+          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>站点配置</span>
         </div>
-    )
-
-    // return (
-    //     <div className={styles.base_container}>
-    //         <div style={{ backgroundColor: "white", padding: "10px", width: "100%" }}>
-    //             <Descriptions title="" bordered >
-    //                 <Descriptions.Item label="站点编号" span={3}>
-    //                     {
-    //                         currentSiteInfo?<Input value={currentSiteInfo} disabled={true} style={{with:"200px"}}/>:<div>
-    //                             <Input value={currentSiteInfo} style={{width:"200px"}} />
-    //                            <Button style={{marginLeft:"10px"}}>生成编号</Button>
-    //                         </div>
-    //                     }
-    //                 </Descriptions.Item>
-    //                 <Descriptions.Item label="服务器IP" span={3}>{currentDataBase.ip}</Descriptions.Item>
-    //                 <Descriptions.Item label="数据库名称" span={3}>{currentDataBase.dbName}</Descriptions.Item>
-    //                 <Descriptions.Item label="登录名" span={1}>{currentDataBase.userName}</Descriptions.Item>
-    //                 <Descriptions.Item label="密码" span={1}>{encrypt(currentDataBase.password)}</Descriptions.Item>
-
-    //             </Descriptions>
-    //         </div>
-    //     </div>
-    // )
+        <Divider />
+        <span
+          style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '30px' }}
+        >
+          站点编号:
+        </span>
+        {currentSiteInfo ? (
+          <Input value={currentSiteInfo} disabled={true} style={{ width: '300px' }} />
+        ) : (
+          <div>
+            <Input value={currentSiteInfo} style={{ width: '300px' }} />
+          </div>
+        )}
+        <br />
+        <Button style={{ marginLeft: '116px', marginTop: '10px' }}>生成编号</Button>
+        <div style={{ marginTop: '50px', display: 'flex', alignItems: 'center' }}>
+          <img src={servie} style={{ height: '16px' }} alt="" />
+          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务器链接</span>
+        </div>
+        <Divider />
+        <div style={{ marginBottom: '20px' }}>
+          <span
+            style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '30px' }}
+          >
+            服务器IP:
+          </span>
+          <span style={{ lineHeight: '32px' }}>{currentDataBase.ip}</span>
+        </div>
+        <div style={{ marginBottom: '20px' }}>
+          <span
+            style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '15px' }}
+          >
+            数据库名称:
+          </span>
+          <span style={{ lineHeight: '32px' }}>{currentDataBase.dbName}</span>
+        </div>
+        <div style={{ marginBottom: '20px' }}>
+          <span
+            style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '45px' }}
+          >
+            登录名:
+          </span>
+          <span style={{ lineHeight: '32px' }}>{currentDataBase.userName}</span>
+        </div>
+        <div style={{ marginBottom: '20px' }}>
+          <span
+            style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '60px' }}
+          >
+            密码:
+          </span>
+          <span style={{ lineHeight: '32px' }}>{encrypt(currentDataBase.password)}</span>
+        </div>
+      </Card>
+    </div>
+  );
 
-}
-export default BaseConfig
+  // return (
+  //     <div className={styles.base_container}>
+  //         <div style={{ backgroundColor: "white", padding: "10px", width: "100%" }}>
+  //             <Descriptions title="" bordered >
+  //                 <Descriptions.Item label="站点编号" span={3}>
+  //                     {
+  //                         currentSiteInfo?<Input value={currentSiteInfo} disabled={true} style={{with:"200px"}}/>:<div>
+  //                             <Input value={currentSiteInfo} style={{width:"200px"}} />
+  //                            <Button style={{marginLeft:"10px"}}>生成编号</Button>
+  //                         </div>
+  //                     }
+  //                 </Descriptions.Item>
+  //                 <Descriptions.Item label="服务器IP" span={3}>{currentDataBase.ip}</Descriptions.Item>
+  //                 <Descriptions.Item label="数据库名称" span={3}>{currentDataBase.dbName}</Descriptions.Item>
+  //                 <Descriptions.Item label="登录名" span={1}>{currentDataBase.userName}</Descriptions.Item>
+  //                 <Descriptions.Item label="密码" span={1}>{encrypt(currentDataBase.password)}</Descriptions.Item>
 
+  //             </Descriptions>
+  //         </div>
+  //     </div>
+  // )
+};
+export default BaseConfig;

src/pages/platformCenter/hostmanager/gateWay/gateWay.jsx

@@ -44,42 +44,27 @@ const GateConfig = () => {
     <div className={styles.gateWay_container}>
       <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
         <Spin spinning={loading} tip="loading">
-          <div
-            style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}
-          >
+          <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
             <img src={configuration} style={{ height: '16px' }} alt="" />
-            <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>
-              网关配置
-            </span>
+            <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>网关配置</span>
           </div>
           <Divider />
           <div className={styles.operate_container}>
-            <Row
-              gutter={[20, 25]}
-              style={{ display: 'flex', alignItems: 'center' }}
+            <div
+              style={{
+                marginLeft: '35px',
+              }}
             >
-              <Col span={2}>
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    marginRight: '-10px',
-                  }}
-                >
-                  网关开启
-                </div>
-              </Col>
-              <Col span={22}>
-                {console.log(currentConfig)}
-                <Switch
-                  checkedChildren="开启"
-                  unCheckedChildren="关闭"
-                  checked={currentConfig}
-                  onChange={OperateNginx}
-                  style={{ marginLeft: '30px' }}
-                />
-              </Col>
-            </Row>
+              网关开启
+              <Switch
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                checked={currentConfig}
+                onChange={OperateNginx}
+                style={{ marginLeft: '35px' }}
+              />
+            </div>
+            {console.log(currentConfig)}
           </div>
         </Spin>
       </Card>

src/pages/platformCenter/hostmanager/messageConfig/messageConfig.jsx

-import React, { useEffect, useState } from 'react'
-import { Card, Form, Input, Button, Select, message, Divider, Spin, Row, Col } from 'antd'
+import React, { useEffect, useState } from 'react';
+import { Card, Form, Input, Button, Select, message, Divider, Spin, Row, Col } from 'antd';
 import styles from './messageConfig.less';
-import { GetMessageConfigInfo, SaveSystemInfo, ConnectMessPlatform, GetBasicInfo, GetDataBaseConfig } from '@/services/platform/hostmanager'
-import message11 from '../../../../assets/images/icons/消息.svg'
+import {
+  GetMessageConfigInfo,
+  SaveSystemInfo,
+  ConnectMessPlatform,
+  GetBasicInfo,
+  GetDataBaseConfig,
+} from '@/services/platform/hostmanager';
+import message11 from '../../../../assets/images/icons/消息.svg';
 import Yes from '../../../../assets/images/icons/正确.svg';
 import { CloseCircleFilled } from '@ant-design/icons';
 
 const layout = {
-    labelCol: { span: 3 },
-    wrapperCol: { span: 21 },
-
+  labelCol: { span: 2 },
+  wrapperCol: { span: 21 },
 };
 const tailLayout = {
-    wrapperCol: { offset: 11, span: 13 },
-
+  wrapperCol: { offset: 11, span: 13 },
 };
 const MessageConfig = () => {
-
-    const [loading, setLoading] = useState(false); // 加载
-    const [currentAddress, setCurrentAddress] = useState("")
-    const [currentDataBase, setCurrentDataBase] = useState({});
-    const [currentSiteInfo, setcurrentSiteInfo] = useState("");
-    const [show1, setShow1] = useState('none')
-    const [show2, setShow2] = useState('none')
-
-    const [form] = Form.useForm();
-    const onFinish = (values) => {
-        //先测试连接再保存
-        //1.测试链接
-        setLoading(true)
-        ConnectMessPlatform({
-            messAddress: values.messageAddress,
-            sqlServerIP: currentDataBase.ip,
-            loginName: currentDataBase.userName,
-            password: currentDataBase.password,
-            sqlName: currentDataBase.dbName,
-            siteCode: currentSiteInfo
+  const [loading, setLoading] = useState(false); // 加载
+  const [currentAddress, setCurrentAddress] = useState('');
+  const [currentDataBase, setCurrentDataBase] = useState({});
+  const [currentSiteInfo, setcurrentSiteInfo] = useState('');
+  const [show1, setShow1] = useState('none');
+  const [show2, setShow2] = useState('none');
+
+  const [form] = Form.useForm();
+  const onFinish = values => {
+    //先测试连接再保存
+    //1.测试链接
+    setLoading(true);
+    ConnectMessPlatform({
+      messAddress: values.messageAddress,
+      sqlServerIP: currentDataBase.ip,
+      loginName: currentDataBase.userName,
+      password: currentDataBase.password,
+      sqlName: currentDataBase.dbName,
+      siteCode: currentSiteInfo,
+    }).then(res => {
+      setLoading(false);
+      if (res.code === 0) {
+        setShow1('block');
+        setShow2('none');
+        //2.保存连接
+        SaveSystemInfo({
+          configName: '消息平台连接地址',
+          configValue: values.messageAddress,
         }).then(res => {
-            setLoading(false)
-            if (res.code === 0) {
-                setShow1('block')
-                setShow2('none')
-                //2.保存连接
-                SaveSystemInfo({
-                    configName: "消息平台连接地址",
-                    configValue: values.messageAddress
-                }).then(
-                    res => {
-                        if (res.code === 0) {
-                            message.info("配置保存成功")
-                        } else {
-                            message.error(res.msg)
-                        }
-                    }
-                )
-            } else {
-                setShow1('none')
-                setShow2('block')
-                message.error(res.msg)
-            }
-        })
-
-    };
-
-    const getMessageConfig = (CurrentAddress, CurrentDataBase, currentSiteInfo) => {
-        setLoading(true)
-        ConnectMessPlatform({
-            messAddress: CurrentAddress,
-            sqlServerIP: CurrentDataBase.ip,
-            loginName: CurrentDataBase.userName,
-            password: CurrentDataBase.password,
-            sqlName: CurrentDataBase.dbName,
-            siteCode: currentSiteInfo
-        }).then(res => {
-            setLoading(false)
-            if (res.code === 0) {
-                setShow1('block')
-                setShow2('none')
-            } else {
-                setShow1('none')
-                setShow2('block')
-                message.error(res.msg)
-            }
-        })
-    }
-
-    const onFinishFailed = (errorInfo) => {
-        console.log('Failed:', errorInfo);
-    };
-
-
-
-    useEffect(() => {
-        GetMessageConfigInfo().then(
-            res => {
-                if (res.code == 0) {
-                    let CurrentAddress = res.data
-                    setCurrentAddress(res.data)
-                    form.setFieldsValue({ messageAddress: res.data });
-                    GetDataBaseConfig().then(
-                        res => {
-                            if (res.code === 0) {
-                                let CurrentDataBase = res.data
-                                setCurrentDataBase(res.data)
-                                GetBasicInfo().then(
-                                    res => {
-                                        if (res.code === 0) {
-                                            let currentSiteInfo = res.data
-                                            setcurrentSiteInfo(res.data)
-                                            getMessageConfig(CurrentAddress, CurrentDataBase, currentSiteInfo)
-                                        }
-                                    }
-                                )
-                            }
-                        }
-                    )
-                } else {
-                    message.info("获取消息平台配置失败!")
-                }
-
-            }
-        )
-
-
-    }, [])
-
-
-
-    return (
-        <div className={styles.message_container}>
-            <Card style={{ width: "100%", height: 'calc(100vh - 130px)' }}>
-                <Spin spinning={loading} tip="loading">
-                    <Form
-                        {...layout}
-                        form={form}
-                        name="basic"
-                        initialValues={{ remember: true }}
-                        onFinish={onFinish}
-                        onFinishFailed={onFinishFailed}
-                    >
-                        <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', marginLeft: '15px' }}>
-                            <img src={message11} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>消息平台</span>
-                        </div>
-                        <Divider />
-                        <Row>
-                            <Col span={21}>
-                                <Form.Item
-                                    label="服务地址(平台)"
-                                    name="messageAddress"
-                                    rules={[{ required: true, pattern: new RegExp(/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/, "g"), message: '请输入正确的IP例如:192.168.12.231:8231' }]}
-                                >
-                                    <Input style={{ width: '94%' }} />
-                                </Form.Item>
-                            </Col>
-                            <Col span={3}>
-                                <span style={{ display: show1 }}><img src={Yes} style={{ height: '32px', marginRight: '20px' }} alt="" /><span>已连接</span></span>
-                                <span style={{ display: show2 }}><CloseCircleFilled style={{ fontSize: '32px', marginRight: '20px', marginTop: '5px' }} /><span style={{ verticalAlign: 'text-bottom' }}>未连接</span></span>
-                            </Col>
-                        </Row>
-                        <Form.Item {...tailLayout}>
-                            <Button type="primary" htmlType="submit" disabled={currentSiteInfo.length > 0 ? false : true}>
-                                保存连接
-                            </Button>
-                        </Form.Item>
-                    </Form>
-                </Spin>
-            </Card>
-        </div>
-    )
-}
-export default MessageConfig
\ No newline at end of file
+          if (res.code === 0) {
+            message.info('配置保存成功');
+          } else {
+            message.error(res.msg);
+          }
+        });
+      } else {
+        setShow1('none');
+        setShow2('block');
+        message.error(res.msg);
+      }
+    });
+  };
+
+  const getMessageConfig = (CurrentAddress, CurrentDataBase, currentSiteInfo) => {
+    setLoading(true);
+    ConnectMessPlatform({
+      messAddress: CurrentAddress,
+      sqlServerIP: CurrentDataBase.ip,
+      loginName: CurrentDataBase.userName,
+      password: CurrentDataBase.password,
+      sqlName: CurrentDataBase.dbName,
+      siteCode: currentSiteInfo,
+    }).then(res => {
+      setLoading(false);
+      if (res.code === 0) {
+        setShow1('block');
+        setShow2('none');
+      } else {
+        setShow1('none');
+        setShow2('block');
+        message.error(res.msg);
+      }
+    });
+  };
+
+  const onFinishFailed = errorInfo => {
+    console.log('Failed:', errorInfo);
+  };
+
+  useEffect(() => {
+    GetMessageConfigInfo().then(res => {
+      if (res.code == 0) {
+        let CurrentAddress = res.data;
+        setCurrentAddress(res.data);
+        form.setFieldsValue({ messageAddress: res.data });
+        GetDataBaseConfig().then(res => {
+          if (res.code === 0) {
+            let CurrentDataBase = res.data;
+            setCurrentDataBase(res.data);
+            GetBasicInfo().then(res => {
+              if (res.code === 0) {
+                let currentSiteInfo = res.data;
+                setcurrentSiteInfo(res.data);
+                // getMessageConfig(CurrentAddress, CurrentDataBase, currentSiteInfo);
+              }
+            });
+          }
+        });
+      } else {
+        message.info('获取消息平台配置失败!');
+      }
+    });
+  }, []);
+
+  return (
+    <div className={styles.message_container}>
+      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
+        <Spin spinning={loading} tip="loading">
+          <Form
+            form={form}
+            name="basic"
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+          >
+            <div
+              style={{
+                marginTop: '10px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <img src={message11} style={{ height: '16px' }} alt="" />
+              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>消息平台</span>
+            </div>
+            <Divider />
+            <Form.Item
+              style={{ marginLeft: '20px' }}
+              label="服务地址(平台)"
+              name="messageAddress"
+              rules={[
+                {
+                  required: true,
+                  pattern: new RegExp(
+                    /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/,
+                    'g',
+                  ),
+                  message: '请输入正确的IP例如:192.168.12.231:8231',
+                },
+              ]}
+            >
+              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+                <Input style={{ width: '300px', marginLeft: '15px' }} />
+                <span style={{ display: show1 }}>
+                  <img
+                    src={Yes}
+                    style={{ height: '24px', marginLeft: '26px', marginTop: '10px' }}
+                    alt=""
+                  />
+                </span>
+                <span style={{ display: show2 }}>
+                  <CloseCircleFilled
+                    style={{ fontSize: '24px', marginLeft: '26px', marginTop: '10px' }}
+                  />
+                </span>
+              </div>
+            </Form.Item>
+
+            <Form.Item>
+              <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
+                保存连接
+              </Button>
+            </Form.Item>
+          </Form>
+        </Spin>
+      </Card>
+    </div>
+  );
+};
+export default MessageConfig;

src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.jsx

-import React, { useEffect, useState } from 'react'
-import { Card, Form, Input, Button, Switch, message, Divider, Row, Col, Spin } from 'antd'
-import styles from './ProxyConfig.less'
-import { GetNginxConfigInfo, InsertNginxConfig, StartNginx, StopNginx, ReloadNginx, NginxCache, NginxLog } from '@/services/platform/hostmanager'
+import React, { useEffect, useState } from 'react';
+import { Card, Form, Input, Button, Switch, message, Divider, Row, Col, Spin } from 'antd';
+import styles from './ProxyConfig.less';
+import {
+  GetNginxConfigInfo,
+  InsertNginxConfig,
+  StartNginx,
+  StopNginx,
+  ReloadNginx,
+  NginxCache,
+  NginxLog,
+} from '@/services/platform/hostmanager';
 import { ReloadOutlined } from '@ant-design/icons';
-import configuration from '../../../../assets/images/icons/消息.svg'
+import configuration from '../../../../assets/images/icons/消息.svg';
 
 const layout = {
-    labelCol: { span: 2 },
-    wrapperCol: { span: 22 },
-
+  labelCol: { span: 2 },
+  wrapperCol: { span: 22 },
 };
 const tailLayout = {
-    wrapperCol: { offset: 11, span: 13 },
-
+  wrapperCol: { offset: 11, span: 13 },
 };
 
 const ProxyConfig = () => {
+  const [loading, setLoading] = useState(false); // 加载
+  const [form] = Form.useForm();
 
-    const [loading, setLoading] = useState(false); // 加载
-    const [form] = Form.useForm();
-
-    const [flag, setFlag] = useState(1)
-    const [currentConfig, setCurrentConfig] = useState({
-        NginxPort: "",
-        IISIPProt: "",
-        EMQIPPort: "",
-        IsStartNginx: false,
-        IsStartNginxCache: false,
-        IsStartNginxLog: false
-
-    })
-    const onFinish = (values) => {
-        setLoading(true)
-        InsertNginxConfig({
-            port: values.NginxPort,
-            iisLocation: values.IISIPProt,
-            emqLocation: values.EMQIPPort
-        }).then(res => {
-            setLoading(false)
-                if (res.code === 0) {
-                    message.success("保存成功")
-                } else {
-                    message.error("保存失败")
-                }
-            }
-        )
-    };
-
-    const onFinishFailed = (errorInfo) => {
-
-    };
-
-    const OperateNginx = (checked) => {
-        if (checked) {
-            OperateStartNginx()
-        } else {
-            OperateStopNginx()
-        }
-    }
-    //开启Nginx
-    const OperateStartNginx = () => {
-        StartNginx().then(
-            res => {
-                if (res.code === 0) {
-                    message.success("开启成功")
-                    setFlag(flag + 1)
-                } else {
-                    message.error("开启失败")
-                }
-            }
-        )
-    }
-    //停止Nginx
-    const OperateStopNginx = () => {
-        StopNginx().then(
-            res => {
-                if (res.code === 0) {
-                    message.success("关闭成功")
-                    setFlag(flag + 1)
-                } else {
-                    message.error("关闭失败")
-                }
-            }
-        )
-    }
-    //开启/关闭缓存
-    const OperateNginxCache = (isOpen) => {
-        NginxCache({
-            isOpen: isOpen ? 1 : 0,
-        }).then(
-            res => {
-                if (res.code === 0) {
-                    setFlag(flag + 1)
-                    message.success(isOpen ? "开启成功" : "关闭成功")
+  const [flag, setFlag] = useState(1);
+  const [currentConfig, setCurrentConfig] = useState({
+    NginxPort: '',
+    IISIPProt: '',
+    EMQIPPort: '',
+    IsStartNginx: false,
+    IsStartNginxCache: false,
+    IsStartNginxLog: false,
+  });
+  const onFinish = values => {
+    setLoading(true);
+    InsertNginxConfig({
+      port: values.NginxPort,
+      iisLocation: values.IISIPProt,
+      emqLocation: values.EMQIPPort,
+    }).then(res => {
+      setLoading(false);
+      if (res.code === 0) {
+        message.success('保存成功');
+      } else {
+        message.error('保存失败');
+      }
+    });
+  };
 
-                } else {
-                    message.error(res.msg)
-                }
-            }
-        )
-    }
-    //开启/关闭日志
-    const OperateNginxLog = (isOpen) => {
-        NginxLog({
-            isOpen: isOpen ? 1 : 0,
+  const onFinishFailed = errorInfo => {};
 
-        }).then(
-            res => {
-                if (res.code === 0) {
-                    setFlag(flag + 1)
-                    message.success(isOpen ? "开启成功" : "关闭成功")
-                } else {
-                    message.error(res.msg)
-                }
-            }
-        )
+  const OperateNginx = checked => {
+    if (checked) {
+      OperateStartNginx();
+    } else {
+      OperateStopNginx();
     }
+  };
+  //开启Nginx
+  const OperateStartNginx = () => {
+    StartNginx().then(res => {
+      if (res.code === 0) {
+        message.success('开启成功');
+        setFlag(flag + 1);
+      } else {
+        message.error('开启失败');
+      }
+    });
+  };
+  //停止Nginx
+  const OperateStopNginx = () => {
+    StopNginx().then(res => {
+      if (res.code === 0) {
+        message.success('关闭成功');
+        setFlag(flag + 1);
+      } else {
+        message.error('关闭失败');
+      }
+    });
+  };
+  //开启/关闭缓存
+  const OperateNginxCache = isOpen => {
+    NginxCache({
+      isOpen: isOpen ? 1 : 0,
+    }).then(res => {
+      if (res.code === 0) {
+        setFlag(flag + 1);
+        message.success(isOpen ? '开启成功' : '关闭成功');
+      } else {
+        message.error(res.msg);
+      }
+    });
+  };
+  //开启/关闭日志
+  const OperateNginxLog = isOpen => {
+    NginxLog({
+      isOpen: isOpen ? 1 : 0,
+    }).then(res => {
+      if (res.code === 0) {
+        setFlag(flag + 1);
+        message.success(isOpen ? '开启成功' : '关闭成功');
+      } else {
+        message.error(res.msg);
+      }
+    });
+  };
 
+  const OperateReloadNginx = () => {
+    ReloadNginx().then(res => {
+      if (res.code === 0) {
+        message.success('重载成功');
+      } else {
+        message.error('重载失败');
+      }
+    });
+  };
 
-    const OperateReloadNginx = () => {
-        ReloadNginx().then(
-            res => {
-                if (res.code === 0) {
-                    message.success("重载成功")
-                } else {
-                    message.error("重载失败")
-                }
-            }
-        )
-    }
-
-    useEffect(() => {
-        GetNginxConfigInfo().then(
-            res => {
-                if (res.code === 0) {
-                    setCurrentConfig({
-                        NginxPort: res.data.NginxPort,
-                        IISIPPort: res.data.IISIPPort,
-                        EMQIPPort: res.data.EMQIPPort,
-                        IsStartNginx: res.data.IsStartNginx,
-                        IsStartNginxCache: res.data.IsStartNginxCache,
-                        IsStartNginxLog: res.data.IsStartNginxLog,
-                    })
-                    let obj = {};
-                    Object.keys(currentConfig).forEach(k => {
-                        obj[k] = res.data[k];
-                    });
-                    console.log(obj)
-                    form.setFieldsValue(obj);
-                } else {
-                    message.errorInfo(res.msg)
-                }
-            }
-        )
-    }, [flag])
-    //     GetNginxConfigInfoOLD().then(
-    //         res => {
-    //             if (res.say.statusCode === "0000") {
-    //                 setCurrentConfig({
-    //                     NginxPort: res.getMe[0].NginxPort,
-    //                     IISIPProt: res.getMe[0].IISIPProt,
-    //                     EMQIPPort: res.getMe[0].EMQIPPort,
-    //                     IsStartNginx: res.getMe[0].IsStartNginx,
-    //                     IsStartNginxCache: res.getMe[0].IsStartNginxCache,
-    //                     IsStartNginxLog: res.getMe[0].IsStartNginxLog,
-    //                 })
-    //                 let obj = {};
-    //                 Object.keys(currentConfig).forEach(k => {
-    //                     obj[k] = res.getMe[0][k];
-    //                 });
-    //                 console.log(obj)
-    //                 form.setFieldsValue(obj);
-    //             } else {
-    //                 message.errorInfo(res.msg)
-    //             }
-    //         }
-    //     )
-    // }, [])
+  useEffect(() => {
+    GetNginxConfigInfo().then(res => {
+      if (res.code === 0) {
+        setCurrentConfig({
+          NginxPort: res.data.NginxPort,
+          IISIPPort: res.data.IISIPPort,
+          EMQIPPort: res.data.EMQIPPort,
+          IsStartNginx: res.data.IsStartNginx,
+          IsStartNginxCache: res.data.IsStartNginxCache,
+          IsStartNginxLog: res.data.IsStartNginxLog,
+        });
+        let obj = {};
+        Object.keys(currentConfig).forEach(k => {
+          obj[k] = res.data[k];
+        });
+        console.log(obj);
+        form.setFieldsValue(obj);
+      } else {
+        message.errorInfo(res.msg);
+      }
+    });
+  }, [flag]);
+  //     GetNginxConfigInfoOLD().then(
+  //         res => {
+  //             if (res.say.statusCode === "0000") {
+  //                 setCurrentConfig({
+  //                     NginxPort: res.getMe[0].NginxPort,
+  //                     IISIPProt: res.getMe[0].IISIPProt,
+  //                     EMQIPPort: res.getMe[0].EMQIPPort,
+  //                     IsStartNginx: res.getMe[0].IsStartNginx,
+  //                     IsStartNginxCache: res.getMe[0].IsStartNginxCache,
+  //                     IsStartNginxLog: res.getMe[0].IsStartNginxLog,
+  //                 })
+  //                 let obj = {};
+  //                 Object.keys(currentConfig).forEach(k => {
+  //                     obj[k] = res.getMe[0][k];
+  //                 });
+  //                 console.log(obj)
+  //                 form.setFieldsValue(obj);
+  //             } else {
+  //                 message.errorInfo(res.msg)
+  //             }
+  //         }
+  //     )
+  // }, [])
 
-    return (
-        <div className={styles.proxy_container}>
-            <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
-            <Spin spinning={loading} tip="loading">
-                <Form
-                    {...layout}
-                    form={form}
-                    name="basic"
-                    initialValues={{ remember: true }}
-                    onFinish={onFinish}
-                    onFinishFailed={onFinishFailed}
-                >
-                    <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
-                        <img src={configuration} style={{ height: '16px' }} /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>配置文件管理</span>
-                    </div>
-                    <Divider />
-                    <Form.Item
-                        label="端口(ngnix)"
-                        name="NginxPort"
-                        rules={[{ required: true, pattern: new RegExp(/^[1-9]\d*$/, 'g'), message: '请输入ngnix端口,例如:8091' }]}
-                    >
-                        <Input style={{marginLeft:'30px', width:'98%'}}/>
-                    </Form.Item>
+  return (
+    <div className={styles.proxy_container}>
+      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
+        <Spin spinning={loading} tip="loading">
+          <Form
+            form={form}
+            name="basic"
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
+              <img src={configuration} style={{ height: '16px' }} />
+              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>配置文件管理</span>
+            </div>
+            <Divider />
+            <Form.Item
+              style={{ marginLeft: '20px' }}
+              label="端口(ngnix)"
+              name="NginxPort"
+              rules={[
+                {
+                  required: true,
+                  pattern: new RegExp(/^[1-9]\d*$/, 'g'),
+                  message: '请输入ngnix端口,例如:8091',
+                },
+              ]}
+            >
+              <Input style={{ marginLeft: '15px', width: '300px' }} />
+            </Form.Item>
+            <Form.Item
+              style={{ marginLeft: '20px' }}
+              label="地址(IIS)"
+              name="IISIPProt"
+              rules={[
+                {
+                  required: true,
+                  pattern: new RegExp(
+                    /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/,
+                    'g',
+                  ),
+                  message: '请输入正确的IP例如:192.168.12.231:8231',
+                },
+              ]}
+              hasFeedback
+            >
+              <Input style={{ marginLeft: '34px', width: '300px' }} />
+            </Form.Item>
+            <Form.Item
+              style={{ marginLeft: '20px' }}
+              label="地址(EMQ)"
+              name="EMQIPPort"
+              hasFeedback
+              rules={[
+                {
+                  required: true,
+                  pattern: new RegExp(
+                    /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/,
+                    'g',
+                  ),
+                  message: '请输入正确的IP例如:192.168.12.231:8231',
+                },
+              ]}
+            >
+              <Input style={{ marginLeft: '18px', width: '300px' }} />
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" htmlType="submit" style={{ marginLeft: '130px' }}>
+                保存
+              </Button>
+            </Form.Item>
+          </Form>
 
-                    <Form.Item
-                        label="地址(IIS)"
-                        name="IISIPProt"
-                        rules={[{ required: true, pattern: new RegExp(/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/, "g"), message: '请输入正确的IP例如:192.168.12.231:8231' }]}
-                        hasFeedback
-                    >
-                        <Input style={{marginLeft:'30px', width:'98%'}}/>
-                    </Form.Item>
-                    <Form.Item
-                        label="地址(EMQ)"
-                        name="EMQIPPort"
-                        hasFeedback
-                        rules={[{ required: true, pattern: new RegExp(/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/, "g"), message: '请输入正确的IP例如:192.168.12.231:8231' }]}
-                    >
-                        <Input style={{marginLeft:'30px', width:'98%'}}/>
-                    </Form.Item>
-                    <Form.Item {...tailLayout}>
-                        <Button type="primary" htmlType="submit" disabled={currentConfig.NginxPort.length > 0 ? 0 : 1}>
-                            保存
-                        </Button>
-                    </Form.Item>
-                </Form>
-                
-                <div style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}>
-                    <img src={configuration} style={{ height: '16px' }} /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务管理</span>
-                </div>
-                <Divider />
-                <div className={styles.operate_container}>
-                    <Row gutter={[20, 25]} style={{display:'flex', alignItems:'center'}}>
-                        <Col span={2}>
-                            <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务运行</div>
-                        </Col>
-                        <Col span={22}>
-                            <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={currentConfig.IsStartNginx} onChange={OperateNginx} style={{marginLeft:'30px'}}/>
-                        </Col>
-                        <Col span={2}>
-                            <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务日志</div>
-                        </Col>
-                        <Col span={22}>
-                            <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={currentConfig.IsStartNginxLog} onChange={OperateNginxLog} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'30px'}}/>
-                        </Col>
-                        <Col span={2}>
-                            <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务缓存</div>
-                        </Col>
-                        <Col span={22}>
-                            <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={currentConfig.IsStartNginxCache} onChange={OperateNginxCache} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'30px'}}/>
-                        </Col>
-                        <Col span={2}>
-                            <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务重载</div>
-                        </Col>
-                        <Col span={22}>
-                            <Button type="primary" icon={<ReloadOutlined style={{marginTop:'-10px'}}/>} onClick={OperateReloadNginx} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'30px'}}>重载</Button>
-                        </Col>
-                    </Row>
-                </div>
-                </Spin>
-            </Card>
-        </div>
-    )
-}
-export default ProxyConfig;
\ No newline at end of file
+          <div style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}>
+            <img src={configuration} style={{ height: '16px' }} />
+            <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务管理</span>
+          </div>
+          <Divider />
+          <div className={styles.operate_container}>
+            <div style={{ marginLeft: '35px' }}>
+              服务运行
+              <Switch
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                checked={currentConfig.IsStartNginx}
+                onChange={OperateNginx}
+                style={{ marginLeft: '35px' }}
+              />
+            </div>
+            <div style={{ marginLeft: '35px', marginTop: '20px' }}>
+              服务日志
+              <Switch
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                checked={currentConfig.IsStartNginxLog}
+                onChange={OperateNginxLog}
+                disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
+                style={{ marginLeft: '35px' }}
+              />
+            </div>
+            <div style={{ marginLeft: '35px', marginTop: '20px' }}>
+              服务缓存
+              <Switch
+                checkedChildren="开启"
+                unCheckedChildren="关闭"
+                checked={currentConfig.IsStartNginxCache}
+                onChange={OperateNginxCache}
+                disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
+                style={{ marginLeft: '35px' }}
+              />
+            </div>
+            <div style={{ marginLeft: '35px', marginTop: '20px' }}>
+              服务重载
+              <Button
+                type="primary"
+                onClick={OperateReloadNginx}
+                disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
+                style={{ marginLeft: '35px' }}
+              >
+                重载
+              </Button>
+            </div>
+          </div>
+        </Spin>
+      </Card>
+    </div>
+  );
+};
+export default ProxyConfig;