BaseConfig.jsx

import React, { useState, useEffect } from 'react';
import { Button, Descriptions, Input, Card, Divider, Row, Col } from 'antd';
import CryptoJS from 'crypto-js';
import styles from './BaseConfig.less';
import { GetDataBaseConfig, GetBasicInfo } from '@/services/hostmanager/hostmanager';
import servie from '../../../../assets/images/icons/服务器管理.svg';
import configuration from '../../../../assets/images/icons/站点配置.svg';

const BaseConfig = () => {
  const [currentDataBase, setCurrentDataBase] = useState({
    userName: '',
    password: '',
    dbName: '',
    ip: '',
  });
  const [currentSiteInfo, setcurrentSiteInfo] = useState('');

  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();
  };

  useEffect(() => {
    getCurrentConfig();
    getSiteCode();
  }, []);

  const getCurrentConfig = () => {
    GetDataBaseConfig().then(res => {
      if (res.code === 0) {
        setCurrentDataBase(res.data);
      }
    });
  };
  const getSiteCode = () => {
    GetBasicInfo().then(res => {
      if (res.code === 0) {
        setcurrentSiteInfo(res.data);
      }
    });
  };

  const encrypt = word => {
    let aa = Decrypt(word);
    let encryptStr = '';
    for (let i = 0; i < aa.length; i++) {
      encryptStr += '*';
    }
    return encryptStr;
  };

  return (
    <div className={styles.base_container}>
      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
          <img src={configuration} style={{ height: '16px' }} />
          <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>站点配置</span>
        </div>
        <Divider />
        <span
          style={{ marginLeft: '27px', lineHeight: '32px', color: 'gray', marginRight: '30px' }}
        >
          站点编号:
        </span>
        <Input value={currentSiteInfo} disabled style={{ width: '300px' }} />
        <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>
  );

  // return (
  //     <div className={styles.base_container}>
  //         <div style={{ backgroundColor: "white", padding: "10px", width: "100%" }}>
  //             <Descriptions title="" bordered >
  //                 <Descriptions.Item label="站点编号" span={3}>
  //                     {
  //                         currentSiteInfo?<Input value={currentSiteInfo} disabled={true} style={{with:"200px"}}/>:<div>
  //                             <Input value={currentSiteInfo} style={{width:"200px"}} />
  //                            <Button style={{marginLeft:"10px"}}>生成编号</Button>
  //                         </div>
  //                     }
  //                 </Descriptions.Item>
  //                 <Descriptions.Item label="服务器IP" span={3}>{currentDataBase.ip}</Descriptions.Item>
  //                 <Descriptions.Item label="数据库名称" span={3}>{currentDataBase.dbName}</Descriptions.Item>
  //                 <Descriptions.Item label="登录名" span={1}>{currentDataBase.userName}</Descriptions.Item>
  //                 <Descriptions.Item label="密码" span={1}>{encrypt(currentDataBase.password)}</Descriptions.Item>

  //             </Descriptions>
  //         </div>
  //     </div>
  // )
};
export default BaseConfig;