parent
5413075b4f
commit
f2659e1bf5
After Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,92 @@
|
|||||||
|
import React, { FC, useEffect, useState } from 'react';
|
||||||
|
import styles from './index.less';
|
||||||
|
import { Input, Progress, message } from 'antd';
|
||||||
|
import { countType } from '@/utils';
|
||||||
|
import { useParams } from 'umi';
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
open: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CodeDriver: FC<PageProps> = ({
|
||||||
|
open = false,
|
||||||
|
onCancel
|
||||||
|
}) => {
|
||||||
|
const [active, setActive] = useState(1);
|
||||||
|
const [percentVal, setPercentVal] = useState(0);
|
||||||
|
|
||||||
|
const urlParams = useParams();
|
||||||
|
|
||||||
|
// 监听是否到安装进度条步骤
|
||||||
|
useEffect(() => {
|
||||||
|
if (active == 3) {
|
||||||
|
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 = () => {
|
||||||
|
let installExe: any = localStorage.getItem('installExe')
|
||||||
|
let data = JSON.parse(installExe);
|
||||||
|
data[14].select = true;
|
||||||
|
localStorage.setItem('installExe', JSON.stringify(data));
|
||||||
|
message.success('一体化密码机驱动安装成功!')
|
||||||
|
onCancel()
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>
|
||||||
|
{
|
||||||
|
// open && <div>
|
||||||
|
|
||||||
|
// </div>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
open &&
|
||||||
|
<div className={styles.modalOverlay}>
|
||||||
|
<div className={styles.modal} style={{width: 500, height: 460}}>
|
||||||
|
<img src={require(`../../../assets/images/codemanage/${active}.png`)} width={500} height={460} />
|
||||||
|
|
||||||
|
{[1,2].includes(active)&&<div className={styles.title}>一体化密码机驱动 安装程序</div>}
|
||||||
|
{![1,2].includes(active)&&<div className={styles.title1}>一体化密码机驱动 安装程序</div>}
|
||||||
|
{active==1&&<div className={styles.pic1}>一体化密码机驱动安装程序</div>}
|
||||||
|
|
||||||
|
{[1,2].includes(active) && <div
|
||||||
|
className={styles.net}
|
||||||
|
onClick={() => setValue()}>
|
||||||
|
</div>}
|
||||||
|
|
||||||
|
{active == 3 && <div className={styles.progress} style={{background: '#fff', height: 15, width: 375, bottom: 222, left: 33,}}>
|
||||||
|
<Progress percent={percentVal} steps={42} size={[7, 14]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
|
||||||
|
</div>}
|
||||||
|
|
||||||
|
{active == 4 && <div
|
||||||
|
className={styles.net}
|
||||||
|
style={{bottom: 17, right: 27}}
|
||||||
|
onClick={() => installSuccess()}>
|
||||||
|
</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CodeDriver;
|
@ -0,0 +1,112 @@
|
|||||||
|
import React, { FC, useEffect, useState } from 'react';
|
||||||
|
import styles from './index.less';
|
||||||
|
import { Input, Progress, message } from 'antd';
|
||||||
|
import { countType } from '@/utils';
|
||||||
|
import { useParams } from 'umi';
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
open: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CodeManage: FC<PageProps> = ({
|
||||||
|
open = false,
|
||||||
|
onCancel
|
||||||
|
}) => {
|
||||||
|
const [active, setActive] = useState(1);
|
||||||
|
const [percentVal, setPercentVal] = useState(0);
|
||||||
|
|
||||||
|
const urlParams = useParams();
|
||||||
|
|
||||||
|
// 监听是否到安装进度条步骤
|
||||||
|
useEffect(() => {
|
||||||
|
if (active == 3) {
|
||||||
|
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 = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('http://localhost:3000/createShortcut', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
mode: "cors",
|
||||||
|
body: JSON.stringify({
|
||||||
|
folderPath: `c:/Users/向明星/Desktop/${countType[urlParams?.fileType]}`,
|
||||||
|
shortcutName: '专用核心密码综合管理系统',
|
||||||
|
shortcutURL: `http://localhost:8000/initialSystem/${urlParams?.fileType}`
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await response.text();
|
||||||
|
message.success(data)
|
||||||
|
|
||||||
|
// 储存信息
|
||||||
|
let installExe: any = localStorage.getItem('installExe')
|
||||||
|
let obj = JSON.parse(installExe);
|
||||||
|
obj[13].select = true;
|
||||||
|
localStorage.setItem('installExe', JSON.stringify(obj));
|
||||||
|
|
||||||
|
onCancel()
|
||||||
|
} catch (error) {
|
||||||
|
message.error(error); // 处理请求错误
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>
|
||||||
|
{
|
||||||
|
// open && <div>
|
||||||
|
|
||||||
|
// </div>
|
||||||
|
}
|
||||||
|
{
|
||||||
|
open &&
|
||||||
|
<div className={styles.modalOverlay}>
|
||||||
|
<div className={styles.modal} style={{width: 500, height: 460}}>
|
||||||
|
<img src={require(`../../../assets/images/codemanage/${active}.png`)} width={500} height={460} />
|
||||||
|
|
||||||
|
{[1,2].includes(active)&&<div className={styles.title}>一体化密码机管理软件 安装程序</div>}
|
||||||
|
{![1,2].includes(active)&&<div className={styles.title1}>一体化密码机管理软件 安装程序</div>}
|
||||||
|
{active==1&&<div className={styles.pic1}>一体化密码机管理软件安装程序</div>}
|
||||||
|
|
||||||
|
{[1,2].includes(active) && <div
|
||||||
|
className={styles.net}
|
||||||
|
onClick={() => setValue()}>
|
||||||
|
</div>}
|
||||||
|
|
||||||
|
{active == 3 && <div className={styles.progress} style={{background: '#fff', height: 15, width: 375, bottom: 222, left: 33,}}>
|
||||||
|
<Progress percent={percentVal} steps={42} size={[7, 14]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
|
||||||
|
</div>}
|
||||||
|
|
||||||
|
{active == 4 && <div
|
||||||
|
className={styles.net}
|
||||||
|
style={{bottom: 17, right: 27}}
|
||||||
|
onClick={() => installSuccess()}>
|
||||||
|
</div>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CodeManage;
|
Loading…
Reference in new issue