Skip to content

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

m修改宿主管理界面样式

parent 9a4cc033
Pipeline #42309 skipped with stages
          Show whitespace changes
          Inline Side-by-side
          Showing with 367 additions and 387 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,18 +141,14 @@ const IotConfig = () => { ...@@ -168,18 +141,14 @@ 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>
          <Col span={18}>
          <Form.Item <Form.Item
          style={{ marginLeft: '20px' }}
          label="服务地址(平台)" label="服务地址(平台)"
          name="IotAddress" name="IotAddress"
          rules={[ rules={[
          ...@@ -193,55 +162,46 @@ const IotConfig = () => { ...@@ -193,55 +162,46 @@ const IotConfig = () => {
          }, },
          ]} ]}
          > >
          <Input style={{ width: '95%' }} /> <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
          </Form.Item> <Input style={{ width: '300px', marginLeft: '15px' }} />
          </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> </span>
          </Col> </div>
          </Form.Item>
          <Button type="primary" onClick={() => PingIot1()} style={{ marginLeft: '152px' }}>
          连接
          </Button>
          <div <div
          style={{ style={{
          marginTop: '40px', marginTop: '40px',
          display: 'flex', display: 'flex',
          alignItems: 'center', alignItems: 'center',
          marginLeft: '15px',
          }} }}
          > >
          <img src={EMQ} style={{ height: '16px' }} alt="" /> <img src={EMQ} style={{ height: '16px' }} alt="" />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>EMQ</span>
          EMQ
          </span>
          </div> </div>
          <Divider /> <Divider />
          <Col span={18}>
          <Form.Item <Form.Item
          style={{ marginLeft: '20px' }}
          label="服务地址(EMQ)" label="服务地址(EMQ)"
          name="TcpAddress" name="TcpAddress"
          rules={[ rules={[
          ...@@ -252,35 +212,24 @@ const IotConfig = () => { ...@@ -252,35 +212,24 @@ const IotConfig = () => {
          }, },
          ]} ]}
          > >
          <Input style={{ width: '95%' }} /> <Input style={{ width: '300px', marginLeft: '13px' }} />
          </Form.Item> </Form.Item>
          </Col>
          <Col span={6} />
          <Col span={18}>
          <Form.Item <Form.Item
          style={{ marginLeft: '20px' }}
          name="SSLSafe" name="SSLSafe"
          label="SSL(EMQ)" label="SSL(EMQ)"
          rules={[{ required: true, message: '请选择是否!' }]} rules={[{ required: true, message: '请选择是否!' }]}
          > >
          <Select placeholder="请选择是否!" style={{ width: '95%' }}> <Select placeholder="请选择是否!" style={{ width: '300px', marginLeft: '48px' }}>
          <Option value="1">是</Option> <Option value="1">是</Option>
          <Option value="0">否</Option> <Option value="0">否</Option>
          </Select> </Select>
          </Form.Item> </Form.Item>
          </Col> <Form.Item>
          <Col span={6} /> <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
          <Col span={24}>
          <Form.Item {...tailLayout}>
          <Button
          type="primary"
          htmlType="submit"
          disabled={currentIotConfig.TcpAddress.length > 0 ? 0 : 1}
          >
          保存 保存
          </Button> </Button>
          </Form.Item> </Form.Item>
          </Col>
          </Row>
          </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: '',
          const [currentDataBase, setCurrentDataBase] = useState({ userName: "", password: "", dbName: "", ip: "" }); password: '',
          const [currentSiteInfo, setcurrentSiteInfo] = useState(""); dbName: '',
          ip: '',
          });
          const [currentSiteInfo, setcurrentSiteInfo] = useState('');
          useEffect(() => { useEffect(() => {
          getCurrentConfig() getCurrentConfig();
          getSiteCode() getSiteCode();
          }, []) }, []);
          const getCurrentConfig = () => { const getCurrentConfig = () => {
          GetDataBaseConfig().then(res => {
          GetDataBaseConfig().then(
          res => {
          if (res.code === 0) { if (res.code === 0) {
          setCurrentDataBase(res.data) setCurrentDataBase(res.data);
          }
          }
          )
          } }
          });
          };
          const getSiteCode = () => { const getSiteCode = () => {
          GetBasicInfo().then( GetBasicInfo().then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          setcurrentSiteInfo(res.data) setcurrentSiteInfo(res.data);
          }
          }
          )
          } }
          });
          };
          const encrypt = (word) => { const encrypt = word => {
          let encryptStr = "" let encryptStr = '';
          for (let i = 0; i < word.length; i++) { for (let i = 0; i < word.length; i++) {
          encryptStr += "*" encryptStr += '*';
          }
          return encryptStr
          } }
          return encryptStr;
          };
          return ( return (
          <div className={styles.base_container}> <div className={styles.base_container}>
          <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}> <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
          <div style={{display:'flex', alignItems:'center', marginTop:'10px'}}> <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
          <img src={configuration} style={{ height: '16px'}}/><span style={{ marginLeft: '10px', fontWeight:'bold' }}>站点配置</span> <img src={configuration} style={{ height: '16px' }} />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>站点配置</span>
          </div> </div>
          <Divider /> <Divider />
          <Row> <span
          <Col span={3}> style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '30px' }}
          <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>站点编号</span> >
          </Col> 站点编号:
          <Col span={21}> </span>
          { {currentSiteInfo ? (
          currentSiteInfo ? <Input value={currentSiteInfo} disabled={true} style={{width:'80%'}}/> <Input value={currentSiteInfo} disabled={true} style={{ width: '300px' }} />
          : <div> ) : (
          <Input value={currentSiteInfo} style={{width:'80%'}} /> <div>
          <Button style={{ marginLeft: "10px" }}>生成编号</Button> <Input value={currentSiteInfo} style={{ width: '300px' }} />
          </div> </div>
          } )}
          </Col> <br />
          </Row> <Button style={{ marginLeft: '116px', marginTop: '10px' }}>生成编号</Button>
          <div style={{ marginTop: '50px', display:'flex', alignItems:'center'}}> <div style={{ marginTop: '50px', display: 'flex', alignItems: 'center' }}>
          <img src={servie} style={{ height: '16px'}} alt="" /><span style={{ marginLeft: '10px', fontWeight:'bold' }}>服务器链接</span> <img src={servie} style={{ height: '16px' }} alt="" />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务器链接</span>
          </div> </div>
          <Divider /> <Divider />
          <Row gutter={[8, 16]} > <div style={{ marginBottom: '20px' }}>
          <Col span={3}> <span
          <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>服务器IP</span> style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '30px' }}
          </Col> >
          <Col span={21}> 服务器IP:
          </span>
          <span style={{ lineHeight: '32px' }}>{currentDataBase.ip}</span> <span style={{ lineHeight: '32px' }}>{currentDataBase.ip}</span>
          </Col> </div>
          <Col span={3}> <div style={{ marginBottom: '20px' }}>
          <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>数据库名称</span> <span
          </Col> style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '15px' }}
          <Col span={21}> >
          数据库名称:
          </span>
          <span style={{ lineHeight: '32px' }}>{currentDataBase.dbName}</span> <span style={{ lineHeight: '32px' }}>{currentDataBase.dbName}</span>
          </Col> </div>
          <Col span={3}> <div style={{ marginBottom: '20px' }}>
          <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>登录名</span> <span
          </Col> style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '45px' }}
          <Col span={21}> >
          登录名:
          </span>
          <span style={{ lineHeight: '32px' }}>{currentDataBase.userName}</span> <span style={{ lineHeight: '32px' }}>{currentDataBase.userName}</span>
          </Col> </div>
          <Col span={3}> <div style={{ marginBottom: '20px' }}>
          <span style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray' }}>密码</span> <span
          </Col> style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '60px' }}
          <Col span={21}> >
          密码:
          </span>
          <span style={{ lineHeight: '32px' }}>{encrypt(currentDataBase.password)}</span> <span style={{ lineHeight: '32px' }}>{encrypt(currentDataBase.password)}</span>
          </Col> </div>
          </Row>
          </Card> </Card>
          </div> </div>
          ) );
          // return ( // return (
          // <div className={styles.base_container}> // <div className={styles.base_container}>
          ...@@ -123,7 +132,5 @@ const BaseConfig = () => { ...@@ -123,7 +132,5 @@ const BaseConfig = () => {
          // </div> // </div>
          // </div> // </div>
          // ) // )
          };
          } export default BaseConfig;
          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
          gutter={[20, 25]}
          style={{ display: 'flex', alignItems: 'center' }}
          >
          <Col span={2}>
          <div <div
          style={{ style={{
          display: 'flex', marginLeft: '35px',
          justifyContent: 'flex-end',
          marginRight: '-10px',
          }} }}
          > >
          网关开启 网关开启
          </div>
          </Col>
          <Col span={22}>
          {console.log(currentConfig)}
          <Switch <Switch
          checkedChildren="开启" checkedChildren="开启"
          unCheckedChildren="关闭" unCheckedChildren="关闭"
          checked={currentConfig} checked={currentConfig}
          onChange={OperateNginx} onChange={OperateNginx}
          style={{ marginLeft: '30px' }} style={{ marginLeft: '35px' }}
          /> />
          </Col> </div>
          </Row> {console.log(currentConfig)}
          </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 => { }).then(res => {
          setLoading(false) setLoading(false);
          if (res.code === 0) { if (res.code === 0) {
          setShow1('block') setShow1('block');
          setShow2('none') setShow2('none');
          //2.保存连接 //2.保存连接
          SaveSystemInfo({ SaveSystemInfo({
          configName: "消息平台连接地址", configName: '消息平台连接地址',
          configValue: values.messageAddress configValue: values.messageAddress,
          }).then( }).then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          message.info("配置保存成功") message.info('配置保存成功');
          } else { } else {
          message.error(res.msg) message.error(res.msg);
          }
          } }
          ) });
          } else { } else {
          setShow1('none') setShow1('none');
          setShow2('block') setShow2('block');
          message.error(res.msg) message.error(res.msg);
          } }
          }) });
          }; };
          const getMessageConfig = (CurrentAddress, CurrentDataBase, currentSiteInfo) => { const getMessageConfig = (CurrentAddress, CurrentDataBase, currentSiteInfo) => {
          setLoading(true) setLoading(true);
          ConnectMessPlatform({ ConnectMessPlatform({
          messAddress: CurrentAddress, messAddress: CurrentAddress,
          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 => { }).then(res => {
          setLoading(false) setLoading(false);
          if (res.code === 0) { if (res.code === 0) {
          setShow1('block') setShow1('block');
          setShow2('none') setShow2('none');
          } else { } else {
          setShow1('none') setShow1('none');
          setShow2('block') setShow2('block');
          message.error(res.msg) message.error(res.msg);
          }
          })
          } }
          });
          };
          const onFinishFailed = (errorInfo) => { const onFinishFailed = errorInfo => {
          console.log('Failed:', errorInfo); console.log('Failed:', errorInfo);
          }; };
          useEffect(() => { useEffect(() => {
          GetMessageConfigInfo().then( GetMessageConfigInfo().then(res => {
          res => {
          if (res.code == 0) { if (res.code == 0) {
          let CurrentAddress = res.data let CurrentAddress = res.data;
          setCurrentAddress(res.data) setCurrentAddress(res.data);
          form.setFieldsValue({ messageAddress: res.data }); form.setFieldsValue({ messageAddress: res.data });
          GetDataBaseConfig().then( GetDataBaseConfig().then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          let CurrentDataBase = res.data let CurrentDataBase = res.data;
          setCurrentDataBase(res.data) setCurrentDataBase(res.data);
          GetBasicInfo().then( GetBasicInfo().then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          let currentSiteInfo = res.data let currentSiteInfo = res.data;
          setcurrentSiteInfo(res.data) setcurrentSiteInfo(res.data);
          getMessageConfig(CurrentAddress, CurrentDataBase, currentSiteInfo) // getMessageConfig(CurrentAddress, CurrentDataBase, currentSiteInfo);
          }
          } }
          ) });
          } }
          } });
          )
          } else { } else {
          message.info("获取消息平台配置失败!") message.info('获取消息平台配置失败!');
          }
          } }
          ) });
          }, []);
          }, [])
          return ( return (
          <div className={styles.message_container}> <div className={styles.message_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={{ marginTop: '10px', display: 'flex', alignItems: 'center', marginLeft: '15px' }}> <div
          <img src={message11} style={{ height: '16px' }} alt="" /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>消息平台</span> style={{
          marginTop: '10px',
          display: 'flex',
          alignItems: 'center',
          }}
          >
          <img src={message11} style={{ height: '16px' }} alt="" />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>消息平台</span>
          </div> </div>
          <Divider /> <Divider />
          <Row>
          <Col span={21}>
          <Form.Item <Form.Item
          style={{ marginLeft: '20px' }}
          label="服务地址(平台)" label="服务地址(平台)"
          name="messageAddress" 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' }]} 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%' }} /> <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>
          </Col>
          <Col span={3}> <Form.Item>
          <span style={{ display: show1 }}><img src={Yes} style={{ height: '32px', marginRight: '20px' }} alt="" /><span>已连接</span></span> <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
          <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> </Button>
          </Form.Item> </Form.Item>
          ...@@ -167,6 +177,6 @@ const MessageConfig = () => { ...@@ -167,6 +177,6 @@ const MessageConfig = () => {
          </Spin> </Spin>
          </Card> </Card>
          </div> </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 [loading, setLoading] = useState(false); // 加载
          const [form] = Form.useForm(); const [form] = Form.useForm();
          const [flag, setFlag] = useState(1) const [flag, setFlag] = useState(1);
          const [currentConfig, setCurrentConfig] = useState({ const [currentConfig, setCurrentConfig] = useState({
          NginxPort: "", NginxPort: '',
          IISIPProt: "", IISIPProt: '',
          EMQIPPort: "", EMQIPPort: '',
          IsStartNginx: false, IsStartNginx: false,
          IsStartNginxCache: false, IsStartNginxCache: false,
          IsStartNginxLog: false IsStartNginxLog: false,
          });
          }) const onFinish = values => {
          const onFinish = (values) => { setLoading(true);
          setLoading(true)
          InsertNginxConfig({ InsertNginxConfig({
          port: values.NginxPort, port: values.NginxPort,
          iisLocation: values.IISIPProt, iisLocation: values.IISIPProt,
          emqLocation: values.EMQIPPort emqLocation: values.EMQIPPort,
          }).then(res => { }).then(res => {
          setLoading(false) setLoading(false);
          if (res.code === 0) { if (res.code === 0) {
          message.success("保存成功") message.success('保存成功');
          } else { } else {
          message.error("保存失败") message.error('保存失败');
          }
          } }
          ) });
          }; };
          const onFinishFailed = (errorInfo) => { const onFinishFailed = errorInfo => {};
          };
          const OperateNginx = (checked) => { const OperateNginx = checked => {
          if (checked) { if (checked) {
          OperateStartNginx() OperateStartNginx();
          } else { } else {
          OperateStopNginx() OperateStopNginx();
          }
          } }
          };
          //开启Nginx //开启Nginx
          const OperateStartNginx = () => { const OperateStartNginx = () => {
          StartNginx().then( StartNginx().then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          message.success("开启成功") message.success('开启成功');
          setFlag(flag + 1) setFlag(flag + 1);
          } else { } else {
          message.error("开启失败") message.error('开启失败');
          }
          }
          )
          } }
          });
          };
          //停止Nginx //停止Nginx
          const OperateStopNginx = () => { const OperateStopNginx = () => {
          StopNginx().then( StopNginx().then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          message.success("关闭成功") message.success('关闭成功');
          setFlag(flag + 1) setFlag(flag + 1);
          } else { } else {
          message.error("关闭失败") message.error('关闭失败');
          }
          }
          )
          } }
          });
          };
          //开启/关闭缓存 //开启/关闭缓存
          const OperateNginxCache = (isOpen) => { const OperateNginxCache = isOpen => {
          NginxCache({ NginxCache({
          isOpen: isOpen ? 1 : 0, isOpen: isOpen ? 1 : 0,
          }).then( }).then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          setFlag(flag + 1) setFlag(flag + 1);
          message.success(isOpen ? "开启成功" : "关闭成功") message.success(isOpen ? '开启成功' : '关闭成功');
          } else { } else {
          message.error(res.msg) message.error(res.msg);
          }
          }
          )
          } }
          });
          };
          //开启/关闭日志 //开启/关闭日志
          const OperateNginxLog = (isOpen) => { const OperateNginxLog = isOpen => {
          NginxLog({ NginxLog({
          isOpen: isOpen ? 1 : 0, isOpen: isOpen ? 1 : 0,
          }).then(res => {
          }).then(
          res => {
          if (res.code === 0) { if (res.code === 0) {
          setFlag(flag + 1) setFlag(flag + 1);
          message.success(isOpen ? "开启成功" : "关闭成功") message.success(isOpen ? '开启成功' : '关闭成功');
          } else { } else {
          message.error(res.msg) message.error(res.msg);
          } }
          } });
          ) };
          }
          const OperateReloadNginx = () => { const OperateReloadNginx = () => {
          ReloadNginx().then( ReloadNginx().then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          message.success("重载成功") message.success('重载成功');
          } else { } else {
          message.error("重载失败") message.error('重载失败');
          }
          }
          )
          } }
          });
          };
          useEffect(() => { useEffect(() => {
          GetNginxConfigInfo().then( GetNginxConfigInfo().then(res => {
          res => {
          if (res.code === 0) { if (res.code === 0) {
          setCurrentConfig({ setCurrentConfig({
          NginxPort: res.data.NginxPort, NginxPort: res.data.NginxPort,
          ...@@ -141,19 +128,18 @@ const ProxyConfig = () => { ...@@ -141,19 +128,18 @@ const ProxyConfig = () => {
          IsStartNginx: res.data.IsStartNginx, IsStartNginx: res.data.IsStartNginx,
          IsStartNginxCache: res.data.IsStartNginxCache, IsStartNginxCache: res.data.IsStartNginxCache,
          IsStartNginxLog: res.data.IsStartNginxLog, IsStartNginxLog: res.data.IsStartNginxLog,
          }) });
          let obj = {}; let obj = {};
          Object.keys(currentConfig).forEach(k => { Object.keys(currentConfig).forEach(k => {
          obj[k] = res.data[k]; obj[k] = res.data[k];
          }); });
          console.log(obj) console.log(obj);
          form.setFieldsValue(obj); form.setFieldsValue(obj);
          } else { } else {
          message.errorInfo(res.msg) message.errorInfo(res.msg);
          }
          } }
          ) });
          }, [flag]) }, [flag]);
          // GetNginxConfigInfoOLD().then( // GetNginxConfigInfoOLD().then(
          // res => { // res => {
          // if (res.say.statusCode === "0000") { // if (res.say.statusCode === "0000") {
          ...@@ -183,7 +169,6 @@ const ProxyConfig = () => { ...@@ -183,7 +169,6 @@ const ProxyConfig = () => {
          <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 }}
          ...@@ -191,75 +176,120 @@ const ProxyConfig = () => { ...@@ -191,75 +176,120 @@ const ProxyConfig = () => {
          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' }} /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>配置文件管理</span> <img src={configuration} style={{ height: '16px' }} />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>配置文件管理</span>
          </div> </div>
          <Divider /> <Divider />
          <Form.Item <Form.Item
          style={{ marginLeft: '20px' }}
          label="端口(ngnix)" label="端口(ngnix)"
          name="NginxPort" name="NginxPort"
          rules={[{ required: true, pattern: new RegExp(/^[1-9]\d*$/, 'g'), message: '请输入ngnix端口,例如:8091' }]} rules={[
          {
          required: true,
          pattern: new RegExp(/^[1-9]\d*$/, 'g'),
          message: '请输入ngnix端口,例如:8091',
          },
          ]}
          > >
          <Input style={{marginLeft:'30px', width:'98%'}}/> <Input style={{ marginLeft: '15px', width: '300px' }} />
          </Form.Item> </Form.Item>
          <Form.Item <Form.Item
          style={{ marginLeft: '20px' }}
          label="地址(IIS)" label="地址(IIS)"
          name="IISIPProt" 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' }]} 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 hasFeedback
          > >
          <Input style={{marginLeft:'30px', width:'98%'}}/> <Input style={{ marginLeft: '34px', width: '300px' }} />
          </Form.Item> </Form.Item>
          <Form.Item <Form.Item
          style={{ marginLeft: '20px' }}
          label="地址(EMQ)" label="地址(EMQ)"
          name="EMQIPPort" name="EMQIPPort"
          hasFeedback 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' }]} 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%'}}/> <Input style={{ marginLeft: '18px', width: '300px' }} />
          </Form.Item> </Form.Item>
          <Form.Item {...tailLayout}> <Form.Item>
          <Button type="primary" htmlType="submit" disabled={currentConfig.NginxPort.length > 0 ? 0 : 1}> <Button type="primary" htmlType="submit" style={{ marginLeft: '130px' }}>
          保存 保存
          </Button> </Button>
          </Form.Item> </Form.Item>
          </Form> </Form>
          <div style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}> <div style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}>
          <img src={configuration} style={{ height: '16px' }} /><span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务管理</span> <img src={configuration} style={{ height: '16px' }} />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>服务管理</span>
          </div> </div>
          <Divider /> <Divider />
          <div className={styles.operate_container}> <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> <Switch
          </Col> checkedChildren="开启"
          <Col span={22}> unCheckedChildren="关闭"
          <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={currentConfig.IsStartNginx} onChange={OperateNginx} style={{marginLeft:'30px'}}/> checked={currentConfig.IsStartNginx}
          </Col> onChange={OperateNginx}
          <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> <Switch
          <Col span={2}> checkedChildren="开启"
          <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务缓存</div> unCheckedChildren="关闭"
          </Col> checked={currentConfig.IsStartNginxLog}
          <Col span={22}> onChange={OperateNginxLog}
          <Switch checkedChildren='开启' unCheckedChildren='关闭' checked={currentConfig.IsStartNginxCache} onChange={OperateNginxCache} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'30px'}}/> disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
          </Col> style={{ marginLeft: '35px' }}
          <Col span={2}> />
          <div style={{display:'flex', justifyContent:'flex-end', marginRight:'-10px'}}>服务重载</div> </div>
          </Col> <div style={{ marginLeft: '35px', marginTop: '20px' }}>
          <Col span={22}> 服务缓存
          <Button type="primary" icon={<ReloadOutlined style={{marginTop:'-10px'}}/>} onClick={OperateReloadNginx} disabled={currentConfig.IsStartNginx > 0 ? 0 : 1} style={{marginLeft:'30px'}}>重载</Button> <Switch
          </Col> checkedChildren="开启"
          </Row> 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> </div>
          </Spin> </Spin>
          </Card> </Card>
          </div> </div>
          ) );
          } };
          export default ProxyConfig; export default ProxyConfig;
          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