import React, { useState, useEffect } from 'react'; import { Button, Descriptions, Input, Card, Divider, Row, Col, message } from 'antd'; import CryptoJS from 'crypto-js'; import styles from './BaseConfig.less'; import { GetDataBaseConfig, GetBasicInfo, CreateSiteCode, } 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 [isLoading, setLoading] = useState(false); 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 => { setLoading(true); 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; }; const createCode = () => { CreateSiteCode().then(res => { if (res.code === 0) { getSiteCode(); message.success('生成成功'); } else { message.error(res.msg); } }); }; 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' }} /> <Button style={{ marginLeft: '10px', display: `${!currentSiteInfo && isLoading ? 'inline-block' : 'none'}`, }} type="primary" onClick={createCode} > 生成编号 </Button> <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;