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

const BaseConfig = () => {
10 11 12 13 14 15 16
  const [currentDataBase, setCurrentDataBase] = useState({
    userName: '',
    password: '',
    dbName: '',
    ip: '',
  });
  const [currentSiteInfo, setcurrentSiteInfo] = useState('');
mayongxin's avatar
mayongxin committed
17

皮倩雯's avatar
皮倩雯 committed
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
  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();
  };

45 46 47 48
  useEffect(() => {
    getCurrentConfig();
    getSiteCode();
  }, []);
mayongxin's avatar
mayongxin committed
49

50 51 52 53 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 => {
      if (res.code === 0) {
        setcurrentSiteInfo(res.data);
      }
    });
  };
mayongxin's avatar
mayongxin committed
64

65
  const encrypt = word => {
皮倩雯's avatar
皮倩雯 committed
66
    let aa = Decrypt(word);
67
    let encryptStr = '';
皮倩雯's avatar
皮倩雯 committed
68
    for (let i = 0; i < aa.length; i++) {
69
      encryptStr += '*';
mayongxin's avatar
mayongxin committed
70
    }
71 72
    return encryptStr;
  };
mayongxin's avatar
mayongxin committed
73

74 75 76 77 78 79
  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
80
        </div>
81 82 83 84 85 86
        <Divider />
        <span
          style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '30px' }}
        >
          站点编号:
        </span>
87
        <Input value={currentSiteInfo} disabled style={{ width: '300px' }} />
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
        <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>
  );
129

130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
  // 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
146

147 148 149 150 151 152
  //             </Descriptions>
  //         </div>
  //     </div>
  // )
};
export default BaseConfig;