BaseConfig.jsx 6.02 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2
import { Button, Descriptions, Input, Card, Divider, Row, Col, message } from 'antd';
皮倩雯's avatar
皮倩雯 committed
3
import CryptoJS from 'crypto-js';
4
import styles from './BaseConfig.less';
5 6 7 8 9
import {
  GetDataBaseConfig,
  GetBasicInfo,
  CreateSiteCode,
} from '@/services/hostmanager/hostmanager';
10 11
import servie from '../../../../assets/images/icons/服务器管理.svg';
import configuration from '../../../../assets/images/icons/站点配置.svg';
mayongxin's avatar
mayongxin committed
12 13

const BaseConfig = () => {
14 15 16 17 18 19 20
  const [currentDataBase, setCurrentDataBase] = useState({
    userName: '',
    password: '',
    dbName: '',
    ip: '',
  });
  const [currentSiteInfo, setcurrentSiteInfo] = useState('');
21
  const [isLoading, setLoading] = useState(false);
mayongxin's avatar
mayongxin committed
22

皮倩雯's avatar
皮倩雯 committed
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
  const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); // 十六位十六进制数作为密钥
  const iv = CryptoJS.enc.Utf8.parse('1234567890000000');

  // 解密
  const Decrypt = word => {
    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
      iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  };

  // 加密
  const Encrypt = word => {
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    return encrypted.ciphertext.toString().toUpperCase();
  };

50 51 52 53
  useEffect(() => {
    getCurrentConfig();
    getSiteCode();
  }, []);
mayongxin's avatar
mayongxin committed
54

55 56 57 58 59 60 61 62 63
  const getCurrentConfig = () => {
    GetDataBaseConfig().then(res => {
      if (res.code === 0) {
        setCurrentDataBase(res.data);
      }
    });
  };
  const getSiteCode = () => {
    GetBasicInfo().then(res => {
64
      setLoading(true);
65 66 67 68 69
      if (res.code === 0) {
        setcurrentSiteInfo(res.data);
      }
    });
  };
mayongxin's avatar
mayongxin committed
70

71
  const encrypt = word => {
皮倩雯's avatar
皮倩雯 committed
72
    let aa = Decrypt(word);
73
    let encryptStr = '';
皮倩雯's avatar
皮倩雯 committed
74
    for (let i = 0; i < aa.length; i++) {
75
      encryptStr += '*';
mayongxin's avatar
mayongxin committed
76
    }
77 78
    return encryptStr;
  };
79 80 81 82 83 84 85 86 87 88
  const createCode = () => {
    CreateSiteCode().then(res => {
      if (res.code === 0) {
        getSiteCode();
        message.success('生成成功');
      } else {
        message.error(res.msg);
      }
    });
  };
89 90 91 92 93 94
  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>
mayongxin's avatar
mayongxin committed
95
        </div>
96 97 98 99 100 101
        <Divider />
        <span
          style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '30px' }}
        >
          站点编号:
        </span>
102
        <Input value={currentSiteInfo} disabled style={{ width: '300px' }} />
103 104 105 106 107 108 109 110 111 112
        <Button
          style={{
            marginLeft: '10px',
            display: `${!currentSiteInfo && isLoading ? 'inline-block' : 'none'}`,
          }}
          type="primary"
          onClick={createCode}
        >
          生成编号
        </Button>
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
        <br />
        <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>
  );
154

155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170
  // 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>
mayongxin's avatar
mayongxin committed
171

172 173 174 175 176 177
  //             </Descriptions>
  //         </div>
  //     </div>
  // )
};
export default BaseConfig;