Skip to content

C
CivManage
Commit 8baa4ed2 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

m修改宿主管理界面样式

parent 9a4cc033
Pipeline #42309 skipped with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 664 additions and 685 deletions
          src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx
          View file @ 8baa4ed2
          /* eslint-disable react/jsx-no-undef */ /* eslint-disable react/jsx-no-undef */
          import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
          import { import { Card, Form, Input, Button, Select, message, Divider, Row, Col, Spin } from 'antd';
          Card,
          Form,
          Input,
          Button,
          Select,
          message,
          Divider,
          Row,
          Col,
          Spin,
          } from 'antd';
          import { CloseCircleFilled } from '@ant-design/icons'; import { CloseCircleFilled } from '@ant-design/icons';
          import styles from './IotConfig.less'; import styles from './IotConfig.less';
          import Internet from '../../../../assets/images/icons/物联.svg'; import Internet from '../../../../assets/images/icons/物联.svg';
          ...@@ -93,19 +82,6 @@ const IotConfig = () => { ...@@ -93,19 +82,6 @@ const IotConfig = () => {
          console.log(obj); console.log(obj);
          form.setFieldsValue(obj); form.setFieldsValue(obj);
          setCurrentIotConfig(val => ({ ...val, ...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 = () => { ...@@ -149,14 +125,11 @@ const IotConfig = () => {
          return ( return (
          <div className={styles.iot_container}> <div className={styles.iot_container}>
          <Card <Card
          title={`物联平台${ // title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ''}`}
          currentIotVersion.data ? `[${currentIotVersion.data}]` : ''
          }`}
          style={{ width: '100%', height: 'calc(100vh - 130px)' }} style={{ width: '100%', height: 'calc(100vh - 130px)' }}
          > >
          <Spin spinning={loading} tip="loading"> <Spin spinning={loading} tip="loading">
          <Form <Form
          {...layout}
          form={form} form={form}
          name="basic" name="basic"
          initialValues={{ remember: true }} initialValues={{ remember: true }}
          ...@@ -168,119 +141,95 @@ const IotConfig = () => { ...@@ -168,119 +141,95 @@ const IotConfig = () => {
          marginTop: '10px', marginTop: '10px',
          display: 'flex', display: 'flex',
          alignItems: 'center', alignItems: 'center',
          marginLeft: '15px',
          }} }}
          > >
          <img src={Internet} style={{ height: '16px' }} alt="" /> <img src={Internet} style={{ height: '16px' }} alt="" />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联平台</span>
          物联平台
          </span>
          </div> </div>
          <Divider /> <Divider />
          <Row> <Form.Item
          <Col span={18}> style={{ marginLeft: '20px' }}
          <Form.Item label="服务地址(平台)"
          label="服务地址(平台)" name="IotAddress"
          name="IotAddress" rules={[
          rules={[ {
          { required: true,
          required: true, pattern: new RegExp(
          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])$/,
          /^(([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',
          'g', ),
          ), message: '请输入正确的IP例如:192.168.12.231',
          message: '请输入正确的IP例如:192.168.12.231', },
          }, ]}
          ]} >
          > <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
          <Input style={{ width: '95%' }} /> <Input style={{ width: '300px', marginLeft: '15px' }} />
          </Form.Item>
          </Col>
          <Col span={3}>
          <Button type="primary" onClick={() => PingIot1()}>
          连接
          </Button>
          </Col>
          <Col span={3}>
          <span style={{ display: show1 }}> <span style={{ display: show1 }}>
          <img <img
          src={Yes} src={Yes}
          style={{ style={{
          height: '32px', height: '24px',
          marginRight: '20px', marginTop: '10px',
          marginTop: '5px', marginLeft: '26px',
          }} }}
          alt="" alt=""
          /> />
          <span style={{ verticalAlign: 'text-bottom' }}>已连接</span>
          </span> </span>
          <span style={{ display: show2 }}> <span style={{ display: show2 }}>
          <CloseCircleFilled <CloseCircleFilled
          style={{ style={{
          fontSize: '32px', fontSize: '24px',
          marginRight: '20px', marginTop: '10px',
          marginTop: '5px', 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> </span>
          </div> </div>
          <Divider /> </Form.Item>
          <Col span={18}> <Button type="primary" onClick={() => PingIot1()} style={{ marginLeft: '152px' }}>
          <Form.Item 连接
          label="服务地址(EMQ)" </Button>
          name="TcpAddress" <div
          rules={[ style={{
          { marginTop: '40px',
          required: true, display: 'flex',
          pattern: new RegExp(/^.*:.*$/), alignItems: 'center',
          message: '请输入正确的IP:端口', }}
          }, >
          ]} <img src={EMQ} style={{ height: '16px' }} alt="" />
          > <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>EMQ</span>
          <Input style={{ width: '95%' }} /> </div>
          </Form.Item> <Divider />
          </Col> <Form.Item
          <Col span={6} /> style={{ marginLeft: '20px' }}
          <Col span={18}> label="服务地址(EMQ)"
          <Form.Item name="TcpAddress"
          name="SSLSafe" rules={[
          label="SSL(EMQ)" {
          rules={[{ required: true, message: '请选择是否!' }]} required: true,
          > pattern: new RegExp(/^.*:.*$/),
          <Select placeholder="请选择是否!" style={{ width: '95%' }}> message: '请输入正确的IP:端口',
          <Option value="1">是</Option> },
          <Option value="0">否</Option> ]}
          </Select> >
          </Form.Item> <Input style={{ width: '300px', marginLeft: '13px' }} />
          </Col> </Form.Item>
          <Col span={6} /> <Form.Item
          <Col span={24}> style={{ marginLeft: '20px' }}
          <Form.Item {...tailLayout}> name="SSLSafe"
          <Button label="SSL(EMQ)"
          type="primary" rules={[{ required: true, message: '请选择是否!' }]}
          htmlType="submit" >
          disabled={currentIotConfig.TcpAddress.length > 0 ? 0 : 1} <Select placeholder="请选择是否!" style={{ width: '300px', marginLeft: '48px' }}>
          > <Option value="1">是</Option>
          保存 <Option value="0">否</Option>
          </Button> </Select>
          </Form.Item> </Form.Item>
          </Col> <Form.Item>
          </Row> <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
          保存
          </Button>
          </Form.Item>
          </Form> </Form>
          </Spin> </Spin>
          </Card> </Card>
          ......
          src/pages/platformCenter/hostmanager/baseConfig/BaseConfig.jsx
          View file @ 8baa4ed2
          import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react';
          import { Button, Descriptions, Input, Card, Divider, Row, Col } from 'antd' import { Button, Descriptions, Input, Card, Divider, Row, Col } from 'antd';
          import styles from './BaseConfig.less' import styles from './BaseConfig.less';
          import { S_GetDataBaseConfig, GetTCPConfigInfo, GetDataBaseConfig, GetBasicInfo } from '@/services/platform/hostmanager' import {
          import { VerticalAlignBottomOutlined } from '@ant-design/icons' S_GetDataBaseConfig,
          import servie from '../../../../assets/images/icons/服务器管理.svg' GetTCPConfigInfo,
          import configuration from '../../../../assets/images/icons/站点配置.svg' 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 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 getCurrentConfig = () => {
          const [currentSiteInfo, setcurrentSiteInfo] = useState(""); GetDataBaseConfig().then(res => {
          if (res.code === 0) {
          setCurrentDataBase(res.data);
          useEffect(() => { }
          getCurrentConfig() });
          getSiteCode() };
          }, []) const getSiteCode = () => {
          GetBasicInfo().then(res => {
          if (res.code === 0) {
          setcurrentSiteInfo(res.data);
          }
          });
          };
          const getCurrentConfig = () => { const encrypt = word => {
          let encryptStr = '';
          GetDataBaseConfig().then( for (let i = 0; i < word.length; i++) {
          res => { encryptStr += '*';
          if (res.code === 0) {
          setCurrentDataBase(res.data)
          }
          }
          )
          }
          const getSiteCode = () => {
          GetBasicInfo().then(
          res => {
          if (res.code === 0) {
          setcurrentSiteInfo(res.data)
          }
          }
          )
          } }
          return encryptStr;
          };
          const encrypt = (word) => { return (
          let encryptStr = "" <div className={styles.base_container}>
          for (let i = 0; i < word.length; i++) { <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
          encryptStr += "*" <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
          } <img src={configuration} style={{ height: '16px' }} />
          return encryptStr <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>站点配置</span>
          }
          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>
          </div> </div>
          ) <Divider />
          <span
          // return ( style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '30px' }}
          // <div className={styles.base_container}> >
          // <div style={{ backgroundColor: "white", padding: "10px", width: "100%" }}> 站点编号:
          // <Descriptions title="" bordered > </span>
          // <Descriptions.Item label="站点编号" span={3}> {currentSiteInfo ? (
          // { <Input value={currentSiteInfo} disabled={true} style={{ width: '300px' }} />
          // currentSiteInfo?<Input value={currentSiteInfo} disabled={true} style={{with:"200px"}}/>:<div> ) : (
          // <Input value={currentSiteInfo} style={{width:"200px"}} /> <div>
          // <Button style={{marginLeft:"10px"}}>生成编号</Button> <Input value={currentSiteInfo} style={{ width: '300px' }} />
          // </div> </div>
          // } )}
          // </Descriptions.Item> <br />
          // <Descriptions.Item label="服务器IP" span={3}>{currentDataBase.ip}</Descriptions.Item> <Button style={{ marginLeft: '116px', marginTop: '10px' }}>生成编号</Button>
          // <Descriptions.Item label="数据库名称" span={3}>{currentDataBase.dbName}</Descriptions.Item> <div style={{ marginTop: '50px', display: 'flex', alignItems: 'center' }}>
          // <Descriptions.Item label="登录名" span={1}>{currentDataBase.userName}</Descriptions.Item> <img src={servie} style={{ height: '16px' }} alt="" />
          // <Descriptions.Item label="密码" span={1}>{encrypt(currentDataBase.password)}</Descriptions.Item> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务器链接</span>
          </div>
          // </Descriptions> <Divider />
          // </div> <div style={{ marginBottom: '20px' }}>
          // </div> <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>
          );
          } // return (
          export default BaseConfig // <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
          View file @ 8baa4ed2
          ...@@ -44,42 +44,27 @@ const GateConfig = () => { ...@@ -44,42 +44,27 @@ const GateConfig = () => {
          <div className={styles.gateWay_container}> <div className={styles.gateWay_container}>
          <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}> <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
          <Spin spinning={loading} tip="loading"> <Spin spinning={loading} tip="loading">
          <div <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
          style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}
          >
          <img src={configuration} style={{ height: '16px' }} alt="" /> <img src={configuration} style={{ height: '16px' }} alt="" />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>网关配置</span>
          网关配置
          </span>
          </div> </div>
          <Divider /> <Divider />
          <div className={styles.operate_container}> <div className={styles.operate_container}>
          <Row <div
          gutter={[20, 25]} style={{
          style={{ display: 'flex', alignItems: 'center' }} marginLeft: '35px',
          }}
          > >
          <Col span={2}> 网关开启
          <div <Switch
          style={{ checkedChildren="开启"
          display: 'flex', unCheckedChildren="关闭"
          justifyContent: 'flex-end', checked={currentConfig}
          marginRight: '-10px', onChange={OperateNginx}
          }} style={{ marginLeft: '35px' }}
          > />
          网关开启 </div>
          </div> {console.log(currentConfig)}
          </Col>
          <Col span={22}>
          {console.log(currentConfig)}
          <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          checked={currentConfig}
          onChange={OperateNginx}
          style={{ marginLeft: '30px' }}
          />
          </Col>
          </Row>
          </div> </div>
          </Spin> </Spin>
          </Card> </Card>
          ......
          src/pages/platformCenter/hostmanager/messageConfig/messageConfig.jsx
          View file @ 8baa4ed2
          import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react';
          import { Card, Form, Input, Button, Select, message, Divider, Spin, Row, Col } from 'antd' import { Card, Form, Input, Button, Select, message, Divider, Spin, Row, Col } from 'antd';
          import styles from './messageConfig.less'; import styles from './messageConfig.less';
          import { GetMessageConfigInfo, SaveSystemInfo, ConnectMessPlatform, GetBasicInfo, GetDataBaseConfig } from '@/services/platform/hostmanager' import {
          import message11 from '../../../../assets/images/icons/消息.svg' GetMessageConfigInfo,
          SaveSystemInfo,
          ConnectMessPlatform,
          GetBasicInfo,
          GetDataBaseConfig,
          } from '@/services/platform/hostmanager';
          import message11 from '../../../../assets/images/icons/消息.svg';
          import Yes from '../../../../assets/images/icons/正确.svg'; import Yes from '../../../../assets/images/icons/正确.svg';
          import { CloseCircleFilled } from '@ant-design/icons'; import { CloseCircleFilled } from '@ant-design/icons';
          const layout = { const layout = {
          labelCol: { span: 3 }, labelCol: { span: 2 },
          wrapperCol: { span: 21 }, wrapperCol: { span: 21 },
          }; };
          const tailLayout = { const tailLayout = {
          wrapperCol: { offset: 11, span: 13 }, wrapperCol: { offset: 11, span: 13 },
          }; };
          const MessageConfig = () => { const MessageConfig = () => {
          const [loading, setLoading] = useState(false); // 加载
          const [loading, setLoading] = useState(false); // 加载 const [currentAddress, setCurrentAddress] = useState('');
          const [currentAddress, setCurrentAddress] = useState("") const [currentDataBase, setCurrentDataBase] = useState({});
          const [currentDataBase, setCurrentDataBase] = useState({}); const [currentSiteInfo, setcurrentSiteInfo] = useState('');
          const [currentSiteInfo, setcurrentSiteInfo] = useState(""); const [show1, setShow1] = useState('none');
          const [show1, setShow1] = useState('none') const [show2, setShow2] = useState('none');
          const [show2, setShow2] = useState('none')
          const [form] = Form.useForm();
          const [form] = Form.useForm(); const onFinish = values => {
          const onFinish = (values) => { //先测试连接再保存
          //先测试连接再保存 //1.测试链接
          //1.测试链接 setLoading(true);
          setLoading(true) ConnectMessPlatform({
          ConnectMessPlatform({ messAddress: values.messageAddress,
          messAddress: values.messageAddress, sqlServerIP: currentDataBase.ip,
          sqlServerIP: currentDataBase.ip, loginName: currentDataBase.userName,
          loginName: currentDataBase.userName, password: currentDataBase.password,
          password: currentDataBase.password, sqlName: currentDataBase.dbName,
          sqlName: currentDataBase.dbName, siteCode: currentSiteInfo,
          siteCode: currentSiteInfo }).then(res => {
          setLoading(false);
          if (res.code === 0) {
          setShow1('block');
          setShow2('none');
          //2.保存连接
          SaveSystemInfo({
          configName: '消息平台连接地址',
          configValue: values.messageAddress,
          }).then(res => { }).then(res => {
          setLoading(false) if (res.code === 0) {
          if (res.code === 0) { message.info('配置保存成功');
          setShow1('block') } else {
          setShow2('none') message.error(res.msg);
          //2.保存连接 }
          SaveSystemInfo({ });
          configName: "消息平台连接地址", } else {
          configValue: values.messageAddress setShow1('none');
          }).then( setShow2('block');
          res => { message.error(res.msg);
          if (res.code === 0) { }
          message.info("配置保存成功") });
          } else { };
          message.error(res.msg)
          } const getMessageConfig = (CurrentAddress, CurrentDataBase, currentSiteInfo) => {
          } setLoading(true);
          ) ConnectMessPlatform({
          } else { messAddress: CurrentAddress,
          setShow1('none') sqlServerIP: CurrentDataBase.ip,
          setShow2('block') loginName: CurrentDataBase.userName,
          message.error(res.msg) password: CurrentDataBase.password,
          } sqlName: CurrentDataBase.dbName,
          }) siteCode: currentSiteInfo,
          }).then(res => {
          }; setLoading(false);
          if (res.code === 0) {
          const getMessageConfig = (CurrentAddress, CurrentDataBase, currentSiteInfo) => { setShow1('block');
          setLoading(true) setShow2('none');
          ConnectMessPlatform({ } else {
          messAddress: CurrentAddress, setShow1('none');
          sqlServerIP: CurrentDataBase.ip, setShow2('block');
          loginName: CurrentDataBase.userName, message.error(res.msg);
          password: CurrentDataBase.password, }
          sqlName: CurrentDataBase.dbName, });
          siteCode: currentSiteInfo };
          }).then(res => {
          setLoading(false) const onFinishFailed = errorInfo => {
          if (res.code === 0) { console.log('Failed:', errorInfo);
          setShow1('block') };
          setShow2('none')
          } else { useEffect(() => {
          setShow1('none') GetMessageConfigInfo().then(res => {
          setShow2('block') if (res.code == 0) {
          message.error(res.msg) let CurrentAddress = res.data;
          } setCurrentAddress(res.data);
          }) form.setFieldsValue({ messageAddress: res.data });
          } GetDataBaseConfig().then(res => {
          if (res.code === 0) {
          const onFinishFailed = (errorInfo) => { let CurrentDataBase = res.data;
          console.log('Failed:', errorInfo); setCurrentDataBase(res.data);
          }; GetBasicInfo().then(res => {
          if (res.code === 0) {
          let currentSiteInfo = res.data;
          setcurrentSiteInfo(res.data);
          useEffect(() => { // getMessageConfig(CurrentAddress, CurrentDataBase, currentSiteInfo);
          GetMessageConfigInfo().then( }
          res => { });
          if (res.code == 0) { }
          let CurrentAddress = res.data });
          setCurrentAddress(res.data) } else {
          form.setFieldsValue({ messageAddress: res.data }); message.info('获取消息平台配置失败!');
          GetDataBaseConfig().then( }
          res => { });
          if (res.code === 0) { }, []);
          let CurrentDataBase = res.data
          setCurrentDataBase(res.data) return (
          GetBasicInfo().then( <div className={styles.message_container}>
          res => { <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
          if (res.code === 0) { <Spin spinning={loading} tip="loading">
          let currentSiteInfo = res.data <Form
          setcurrentSiteInfo(res.data) form={form}
          getMessageConfig(CurrentAddress, CurrentDataBase, currentSiteInfo) name="basic"
          } initialValues={{ remember: true }}
          } onFinish={onFinish}
          ) onFinishFailed={onFinishFailed}
          } >
          } <div
          ) style={{
          } else { marginTop: '10px',
          message.info("获取消息平台配置失败!") 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="服务地址(平台)"
          return ( name="messageAddress"
          <div className={styles.message_container}> rules={[
          <Card style={{ width: "100%", height: 'calc(100vh - 130px)' }}> {
          <Spin spinning={loading} tip="loading"> required: true,
          <Form pattern: new RegExp(
          {...layout} /^(([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*)$/,
          form={form} 'g',
          name="basic" ),
          initialValues={{ remember: true }} message: '请输入正确的IP例如:192.168.12.231:8231',
          onFinish={onFinish} },
          onFinishFailed={onFinishFailed} ]}
          > >
          <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', marginLeft: '15px' }}> <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
          <img src={message11} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>消息平台</span> <Input style={{ width: '300px', marginLeft: '15px' }} />
          </div> <span style={{ display: show1 }}>
          <Divider /> <img
          <Row> src={Yes}
          <Col span={21}> style={{ height: '24px', marginLeft: '26px', marginTop: '10px' }}
          <Form.Item alt=""
          label="服务地址(平台)" />
          name="messageAddress" </span>
          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' }]} <span style={{ display: show2 }}>
          > <CloseCircleFilled
          <Input style={{ width: '94%' }} /> style={{ fontSize: '24px', marginLeft: '26px', marginTop: '10px' }}
          </Form.Item> />
          </Col> </span>
          <Col span={3}> </div>
          <span style={{ display: show1 }}><img src={Yes} style={{ height: '32px', marginRight: '20px' }} alt="" /><span>已连接</span></span> </Form.Item>
          <span style={{ display: show2 }}><CloseCircleFilled style={{ fontSize: '32px', marginRight: '20px', marginTop: '5px' }} /><span style={{ verticalAlign: 'text-bottom' }}>未连接</span></span>
          </Col> <Form.Item>
          </Row> <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
          <Form.Item {...tailLayout}> 保存连接
          <Button type="primary" htmlType="submit" disabled={currentSiteInfo.length > 0 ? false : true}> </Button>
          保存连接 </Form.Item>
          </Button> </Form>
          </Form.Item> </Spin>
          </Form> </Card>
          </Spin> </div>
          </Card> );
          </div> };
          ) export default MessageConfig;
          }
          export default MessageConfig
          \ No newline at end of file
          src/pages/platformCenter/hostmanager/proxyConfig/ProxyConfig.jsx
          View file @ 8baa4ed2
          import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react';
          import { Card, Form, Input, Button, Switch, message, Divider, Row, Col, Spin } from 'antd' import { Card, Form, Input, Button, Switch, message, Divider, Row, Col, Spin } from 'antd';
          import styles from './ProxyConfig.less' import styles from './ProxyConfig.less';
          import { GetNginxConfigInfo, InsertNginxConfig, StartNginx, StopNginx, ReloadNginx, NginxCache, NginxLog } from '@/services/platform/hostmanager' import {
          GetNginxConfigInfo,
          InsertNginxConfig,
          StartNginx,
          StopNginx,
          ReloadNginx,
          NginxCache,
          NginxLog,
          } from '@/services/platform/hostmanager';
          import { ReloadOutlined } from '@ant-design/icons'; import { ReloadOutlined } from '@ant-design/icons';
          import configuration from '../../../../assets/images/icons/消息.svg' import configuration from '../../../../assets/images/icons/消息.svg';
          const layout = { const layout = {
          labelCol: { span: 2 }, labelCol: { span: 2 },
          wrapperCol: { span: 22 }, wrapperCol: { span: 22 },
          }; };
          const tailLayout = { const tailLayout = {
          wrapperCol: { offset: 11, span: 13 }, wrapperCol: { offset: 11, span: 13 },
          }; };
          const ProxyConfig = () => { const ProxyConfig = () => {
          const [loading, setLoading] = useState(false); // 加载
          const [form] = Form.useForm();
          const [loading, setLoading] = useState(false); // 加载 const [flag, setFlag] = useState(1);
          const [form] = Form.useForm(); const [currentConfig, setCurrentConfig] = useState({
          NginxPort: '',
          const [flag, setFlag] = useState(1) IISIPProt: '',
          const [currentConfig, setCurrentConfig] = useState({ EMQIPPort: '',
          NginxPort: "", IsStartNginx: false,
          IISIPProt: "", IsStartNginxCache: false,
          EMQIPPort: "", IsStartNginxLog: false,
          IsStartNginx: false, });
          IsStartNginxCache: false, const onFinish = values => {
          IsStartNginxLog: false setLoading(true);
          InsertNginxConfig({
          }) port: values.NginxPort,
          const onFinish = (values) => { iisLocation: values.IISIPProt,
          setLoading(true) emqLocation: values.EMQIPPort,
          InsertNginxConfig({ }).then(res => {
          port: values.NginxPort, setLoading(false);
          iisLocation: values.IISIPProt, if (res.code === 0) {
          emqLocation: values.EMQIPPort message.success('保存成功');
          }).then(res => { } else {
          setLoading(false) message.error('保存失败');
          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 ? "开启成功" : "关闭成功")
          } else { const onFinishFailed = errorInfo => {};
          message.error(res.msg)
          }
          }
          )
          }
          //开启/关闭日志
          const OperateNginxLog = (isOpen) => {
          NginxLog({
          isOpen: isOpen ? 1 : 0,
          }).then( const OperateNginx = checked => {
          res => { if (checked) {
          if (res.code === 0) { OperateStartNginx();
          setFlag(flag + 1) } else {
          message.success(isOpen ? "开启成功" : "关闭成功") OperateStopNginx();
          } else {
          message.error(res.msg)
          }
          }
          )
          } }
          };
          //开启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 = () => { useEffect(() => {
          ReloadNginx().then( GetNginxConfigInfo().then(res => {
          res => { if (res.code === 0) {
          if (res.code === 0) { setCurrentConfig({
          message.success("重载成功") NginxPort: res.data.NginxPort,
          } else { IISIPPort: res.data.IISIPPort,
          message.error("重载失败") EMQIPPort: res.data.EMQIPPort,
          } IsStartNginx: res.data.IsStartNginx,
          } IsStartNginxCache: res.data.IsStartNginxCache,
          ) IsStartNginxLog: res.data.IsStartNginxLog,
          } });
          let obj = {};
          useEffect(() => { Object.keys(currentConfig).forEach(k => {
          GetNginxConfigInfo().then( obj[k] = res.data[k];
          res => { });
          if (res.code === 0) { console.log(obj);
          setCurrentConfig({ form.setFieldsValue(obj);
          NginxPort: res.data.NginxPort, } else {
          IISIPPort: res.data.IISIPPort, message.errorInfo(res.msg);
          EMQIPPort: res.data.EMQIPPort, }
          IsStartNginx: res.data.IsStartNginx, });
          IsStartNginxCache: res.data.IsStartNginxCache, }, [flag]);
          IsStartNginxLog: res.data.IsStartNginxLog, // GetNginxConfigInfoOLD().then(
          }) // res => {
          let obj = {}; // if (res.say.statusCode === "0000") {
          Object.keys(currentConfig).forEach(k => { // setCurrentConfig({
          obj[k] = res.data[k]; // NginxPort: res.getMe[0].NginxPort,
          }); // IISIPProt: res.getMe[0].IISIPProt,
          console.log(obj) // EMQIPPort: res.getMe[0].EMQIPPort,
          form.setFieldsValue(obj); // IsStartNginx: res.getMe[0].IsStartNginx,
          } else { // IsStartNginxCache: res.getMe[0].IsStartNginxCache,
          message.errorInfo(res.msg) // IsStartNginxLog: res.getMe[0].IsStartNginxLog,
          } // })
          } // let obj = {};
          ) // Object.keys(currentConfig).forEach(k => {
          }, [flag]) // obj[k] = res.getMe[0][k];
          // GetNginxConfigInfoOLD().then( // });
          // res => { // console.log(obj)
          // if (res.say.statusCode === "0000") { // form.setFieldsValue(obj);
          // setCurrentConfig({ // } else {
          // NginxPort: res.getMe[0].NginxPort, // message.errorInfo(res.msg)
          // 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 ( return (
          <div className={styles.proxy_container}> <div className={styles.proxy_container}>
          <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}> <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
          <Spin spinning={loading} tip="loading"> <Spin spinning={loading} tip="loading">
          <Form <Form
          {...layout} form={form}
          form={form} name="basic"
          name="basic" initialValues={{ remember: true }}
          initialValues={{ remember: true }} onFinish={onFinish}
          onFinish={onFinish} onFinishFailed={onFinishFailed}
          onFinishFailed={onFinishFailed} >
          > <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
          <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}> <img src={configuration} style={{ height: '16px' }} />
          <img src={configuration} style={{ height: '16px' }} /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>配置文件管理</span> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>配置文件管理</span>
          </div> </div>
          <Divider /> <Divider />
          <Form.Item <Form.Item
          label="端口(ngnix)" style={{ marginLeft: '20px' }}
          name="NginxPort" label="端口(ngnix)"
          rules={[{ required: true, pattern: new RegExp(/^[1-9]\d*$/, 'g'), message: '请输入ngnix端口,例如:8091' }]} name="NginxPort"
          > rules={[
          <Input style={{marginLeft:'30px', width:'98%'}}/> {
          </Form.Item> 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 <div style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}>
          label="地址(IIS)" <img src={configuration} style={{ height: '16px' }} />
          name="IISIPProt" <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务管理</span>
          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>
          hasFeedback <Divider />
          > <div className={styles.operate_container}>
          <Input style={{marginLeft:'30px', width:'98%'}}/> <div style={{ marginLeft: '35px' }}>
          </Form.Item> 服务运行
          <Form.Item <Switch
          label="地址(EMQ)" checkedChildren="开启"
          name="EMQIPPort" unCheckedChildren="关闭"
          hasFeedback checked={currentConfig.IsStartNginx}
          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' }]} onChange={OperateNginx}
          > style={{ marginLeft: '35px' }}
          <Input style={{marginLeft:'30px', width:'98%'}}/> />
          </Form.Item> </div>
          <Form.Item {...tailLayout}> <div style={{ marginLeft: '35px', marginTop: '20px' }}>
          <Button type="primary" htmlType="submit" disabled={currentConfig.NginxPort.length > 0 ? 0 : 1}> 服务日志
          保存 <Switch
          </Button> checkedChildren="开启"
          </Form.Item> unCheckedChildren="关闭"
          </Form> checked={currentConfig.IsStartNginxLog}
          onChange={OperateNginxLog}
          <div style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}> disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
          <img src={configuration} style={{ height: '16px' }} /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务管理</span> style={{ marginLeft: '35px' }}
          </div> />
          <Divider /> </div>
          <div className={styles.operate_container}> <div style={{ marginLeft: '35px', marginTop: '20px' }}>
          <Row gutter={[20, 25]} style={{display:'flex', alignItems:'center'}}> 服务缓存
          <Col span={2}> <Switch
          <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务运行</div> checkedChildren="开启"
          </Col> unCheckedChildren="关闭"
          <Col span={22}> checked={currentConfig.IsStartNginxCache}
          <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={currentConfig.IsStartNginx} onChange={OperateNginx} style={{marginLeft:'30px'}}/> onChange={OperateNginxCache}
          </Col> disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
          <Col span={2}> style={{ marginLeft: '35px' }}
          <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务日志</div> />
          </Col> </div>
          <Col span={22}> <div style={{ marginLeft: '35px', marginTop: '20px' }}>
          <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={currentConfig.IsStartNginxLog} onChange={OperateNginxLog} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'30px'}}/> 服务重载
          </Col> <Button
          <Col span={2}> type="primary"
          <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务缓存</div> onClick={OperateReloadNginx}
          </Col> disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
          <Col span={22}> style={{ marginLeft: '35px' }}
          <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={currentConfig.IsStartNginxCache} onChange={OperateNginxCache} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'30px'}}/> >
          </Col> 重载
          <Col span={2}> </Button>
          <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务重载</div> </div>
          </Col> </div>
          <Col span={22}> </Spin>
          <Button type="primary" icon={<ReloadOutlined style={{marginTop:'-10px'}}/>} onClick={OperateReloadNginx} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'30px'}}>重载</Button> </Card>
          </Col> </div>
          </Row> );
          </div> };
          </Spin> export default ProxyConfig;
          </Card>
          </div>
          )
          }
          export default ProxyConfig;
          \ No newline at end of file
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment