|
|
import React, { FC, useEffect, useState } from 'react';
|
|
|
import styles from './index.less';
|
|
|
import { Input, Progress, message } from 'antd';
|
|
|
|
|
|
interface PageProps {
|
|
|
open: boolean;
|
|
|
onCancel: (name?: string) => void;
|
|
|
setInstallExe: (index: number, text: string) => void;
|
|
|
}
|
|
|
|
|
|
const MSXML: FC<PageProps> = ({
|
|
|
open = false,
|
|
|
onCancel,
|
|
|
setInstallExe
|
|
|
}) => {
|
|
|
const [active, setActive] = useState(1);
|
|
|
const [percentVal, setPercentVal] = useState(0);
|
|
|
|
|
|
// 监听是否到安装进度条步骤
|
|
|
useEffect(() => {
|
|
|
if (active == 6) {
|
|
|
const interval = setInterval(() => {
|
|
|
setPercentVal((val) => {
|
|
|
const randomStep = Math.round(Math.random() * (100 / 10));
|
|
|
const newPercent = val + randomStep;
|
|
|
|
|
|
if (newPercent >= 100) {
|
|
|
clearInterval(interval);
|
|
|
setValue()
|
|
|
return 100;
|
|
|
}
|
|
|
|
|
|
return newPercent;
|
|
|
});
|
|
|
}, 500);
|
|
|
|
|
|
return () => clearInterval(interval);
|
|
|
}
|
|
|
}, [active])
|
|
|
|
|
|
// 设置安装步骤进度
|
|
|
const setValue = () => {
|
|
|
setActive((e) => { return e + 1 })
|
|
|
}
|
|
|
|
|
|
// 安装完成后 记录安装的信息
|
|
|
const installSuccess = () => {
|
|
|
setInstallExe(3, 'MSXML安装成功！')
|
|
|
onCancel()
|
|
|
}
|
|
|
|
|
|
return <>
|
|
|
{
|
|
|
open &&
|
|
|
<div className={styles.modalOverlay}>
|
|
|
<div className={styles.modal}>
|
|
|
<img src={require(`../../../assets/images/MSXML/${active}.jpg`)} width={689} height={508} />
|
|
|
|
|
|
{![6, 7].includes(active) && <div
|
|
|
className={styles.msx1}
|
|
|
style={active == 5 ? {width: 140, right: 170} : {}}
|
|
|
onClick={() => setValue()}>
|
|
|
</div>}
|
|
|
|
|
|
{active == 6 && <div className={styles.progress} style={{width: 482, bottom: 257, left: 59,}}>
|
|
|
<Progress percent={percentVal} steps={44} size={[9, 19]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
|
|
|
</div>}
|
|
|
|
|
|
{active == 7 && <div
|
|
|
className={styles.msx1}
|
|
|
style={{right: 105}}
|
|
|
onClick={() => installSuccess()}>
|
|
|
</div>}
|
|
|
</div>
|
|
|
</div>
|
|
|
}
|
|
|
</>
|
|
|
};
|
|
|
|
|
|
export default MSXML;
|
