diff --git a/src/assets/images/MSXML/1.jpg b/src/assets/images/MSXML/1.jpg new file mode 100644 index 0000000..987340a Binary files /dev/null and b/src/assets/images/MSXML/1.jpg differ diff --git a/src/assets/images/MSXML/2.jpg b/src/assets/images/MSXML/2.jpg new file mode 100644 index 0000000..53e5d28 Binary files /dev/null and b/src/assets/images/MSXML/2.jpg differ diff --git a/src/assets/images/MSXML/3.jpg b/src/assets/images/MSXML/3.jpg new file mode 100644 index 0000000..9b6415f Binary files /dev/null and b/src/assets/images/MSXML/3.jpg differ diff --git a/src/assets/images/MSXML/4.jpg b/src/assets/images/MSXML/4.jpg new file mode 100644 index 0000000..29de759 Binary files /dev/null and b/src/assets/images/MSXML/4.jpg differ diff --git a/src/assets/images/MSXML/5.jpg b/src/assets/images/MSXML/5.jpg new file mode 100644 index 0000000..35178d8 Binary files /dev/null and b/src/assets/images/MSXML/5.jpg differ diff --git a/src/assets/images/MSXML/6.jpg b/src/assets/images/MSXML/6.jpg new file mode 100644 index 0000000..f77bb10 Binary files /dev/null and b/src/assets/images/MSXML/6.jpg differ diff --git a/src/assets/images/MSXML/7.jpg b/src/assets/images/MSXML/7.jpg new file mode 100644 index 0000000..da0b6a2 Binary files /dev/null and b/src/assets/images/MSXML/7.jpg differ diff --git a/src/assets/images/flashPlayer/1.png b/src/assets/images/flashPlayer/1.png new file mode 100644 index 0000000..9a7d3b0 Binary files /dev/null and b/src/assets/images/flashPlayer/1.png differ diff --git a/src/assets/images/flashPlayer/2.png b/src/assets/images/flashPlayer/2.png new file mode 100644 index 0000000..3d285e3 Binary files /dev/null and b/src/assets/images/flashPlayer/2.png differ diff --git a/src/assets/images/flashPlayer/3.png b/src/assets/images/flashPlayer/3.png new file mode 100644 index 0000000..4d2dc1e Binary files /dev/null and b/src/assets/images/flashPlayer/3.png differ diff --git a/src/assets/images/googleEarth/1.jpg b/src/assets/images/googleEarth/1.jpg new file mode 100644 index 0000000..7b20a60 Binary files /dev/null and b/src/assets/images/googleEarth/1.jpg differ diff --git a/src/assets/images/googleEarth/2.jpg b/src/assets/images/googleEarth/2.jpg new file mode 100644 index 0000000..c1d530a Binary files /dev/null and b/src/assets/images/googleEarth/2.jpg differ diff --git a/src/pages/InstallExe/exeDialog/FlashPlayer.tsx b/src/pages/InstallExe/exeDialog/FlashPlayer.tsx new file mode 100644 index 0000000..f40372d --- /dev/null +++ b/src/pages/InstallExe/exeDialog/FlashPlayer.tsx @@ -0,0 +1,76 @@ +import React, { FC, useEffect, useState } from 'react'; +import styles from './index.less'; +import { Input, Progress, message } from 'antd'; +interface PageProps { + open: boolean; + onCancel: () => void; +} + +const FlashPlayer: FC = ({ + open = false, + onCancel +}) => { + const [active, setActive] = useState(1); + const [percentVal, setPercentVal] = useState(0); + + // 监听是否到安装进度条步骤 + useEffect(() => { + if (active == 2) { + 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[2].select = true; + localStorage.setItem('installExe', JSON.stringify(data)); + message.success('FlashPlayer安装成功！') + onCancel() + } + + return <> + { + open && +
+
+ + + {active != 2 &&
{ + active == 1 ? setValue() : installSuccess() + }}> +
} + + {active == 2 &&
+ +
} +
+
+ } + +}; + +export default FlashPlayer; diff --git a/src/pages/InstallExe/exeDialog/GBase.tsx b/src/pages/InstallExe/exeDialog/GBase.tsx index 43946fe..4f00574 100644 --- a/src/pages/InstallExe/exeDialog/GBase.tsx +++ b/src/pages/InstallExe/exeDialog/GBase.tsx @@ -48,6 +48,7 @@ const GBase: FC = ({ let data = JSON.parse(installExe); data[0].select = true; localStorage.setItem('installExe', JSON.stringify(data)); + message.success('Gbase安装成功！') onCancel() } diff --git a/src/pages/InstallExe/exeDialog/HGoogleEarth.tsx b/src/pages/InstallExe/exeDialog/HGoogleEarth.tsx new file mode 100644 index 0000000..ddce074 --- /dev/null +++ b/src/pages/InstallExe/exeDialog/HGoogleEarth.tsx @@ -0,0 +1,72 @@ +import React, { FC, useEffect, useState } from 'react'; +import styles from './index.less'; +import { Input, Progress, message } from 'antd'; +interface PageProps { + open: boolean; + onCancel: () => void; +} + +const HGoogleEarth: FC = ({ + open = false, + onCancel +}) => { + const [active, setActive] = useState(1); + const [percentVal, setPercentVal] = useState(0); + + // 监听是否到安装进度条步骤 + useEffect(() => { + if (open) { + const interval = setInterval(() => { + setPercentVal((val) => { + const randomStep = Math.round(Math.random() * (100 / 10)); + const newPercent = val + randomStep; + + if (newPercent >= 100) { + clearInterval(interval); + installSuccess() + return 100; + } + + return newPercent; + }); + }, 500); + + return () => clearInterval(interval); + } + }, [open]) + + + // 安装完成后 记录安装的信息 + const installSuccess = () => { + let installExe: any = localStorage.getItem('installExe') + let data = JSON.parse(installExe); + data[6].select = true; + localStorage.setItem('installExe', JSON.stringify(data)); + message.success('HGoogleEarth安装成功！') + onCancel() + } + + // 设置安装步骤进度 + const setValue = () => { + setActive((e) => { return e + 1 }) + } + + return <> + { + open && +
+
+ + + {active == 1 &&
setValue()}>
} + + {active == 2 &&
+ +
} +
+
+ } + +}; + +export default HGoogleEarth; diff --git a/src/pages/InstallExe/exeDialog/MSXML.tsx b/src/pages/InstallExe/exeDialog/MSXML.tsx new file mode 100644 index 0000000..d9b62a4 --- /dev/null +++ b/src/pages/InstallExe/exeDialog/MSXML.tsx @@ -0,0 +1,81 @@ +import React, { FC, useEffect, useState } from 'react'; +import styles from './index.less'; +import { Input, Progress, message } from 'antd'; +interface PageProps { + open: boolean; + onCancel: () => void; +} + +const MSXML: FC = ({ + open = false, + onCancel +}) => { + 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 = () => { + let installExe: any = localStorage.getItem('installExe') + let data = JSON.parse(installExe); + data[3].select = true; + localStorage.setItem('installExe', JSON.stringify(data)); + message.success('MSXML安装成功！') + onCancel() + } + + return <> + { + open && +
+
+ + + {![6, 7].includes(active) &&
setValue()}> +
} + + {active == 6 &&
+ +
} + + {active == 7 &&
installSuccess()}> +
} +
+
+ } + +}; + +export default MSXML; diff --git a/src/pages/InstallExe/exeDialog/index.less b/src/pages/InstallExe/exeDialog/index.less index 648d232..f94d8ab 100644 --- a/src/pages/InstallExe/exeDialog/index.less +++ b/src/pages/InstallExe/exeDialog/index.less @@ -93,4 +93,31 @@ align-items: center; justify-content: center; } + + .g_e { + position: absolute; + width: 110px; + height: 28px; + bottom: 31px; + right: 155px; + cursor: pointer; + } + + .msx1 { + position: absolute; + width: 95px; + height: 25px; + bottom: 22px; + right: 214px; + cursor: pointer; + } + + .f_p { + position: absolute; + width: 170px; + height: 40px; + bottom: 135px; + right: 60px; + cursor: pointer; + } } \ No newline at end of file diff --git a/src/pages/InstallExe/index.tsx b/src/pages/InstallExe/index.tsx index 795dfad..f4d96d2 100644 --- a/src/pages/InstallExe/index.tsx +++ b/src/pages/InstallExe/index.tsx @@ -4,6 +4,9 @@ import styles from './index.less'; import ContentWarp from '@/components/ContentWarp'; import ButtonComp from '@/components/ButtonComp'; import GBase from './exeDialog/GBase' +import HGoogleEarth from './exeDialog/HGoogleEarth'; +import MSXML from './exeDialog/MSXML'; +import FlashPlayer from './exeDialog/FlashPlayer'; const typeData = [ // 依赖程序 @@ -34,6 +37,9 @@ interface PageProps { } const InstallExe: FC = ({ }) => { const [listData, setListData] = useState([]); const [open1, setOpen1] = useState(false); // Gbase + const [open2, setOpen2] = useState(false); // HGoogleEarth + const [open3, setOpen3] = useState(false); // MSXML4 + const [open4, setOpen4] = useState(false); // FlashPlayer useEffect(() => { let data = localStorage.getItem('installExe'); @@ -69,11 +75,14 @@ const InstallExe: FC = ({ }) => { case 'GBase': setOpen1(true) break; - case '': + case 'HGoogleEarth': + setOpen2(true) break; - case '': + case 'MSXML4': + setOpen3(true) break; - case '': + case 'FlashPlayer9': + setOpen4(true) break; case '': break; @@ -112,7 +121,10 @@ const InstallExe: FC = ({ }) => { {/* 安装程序弹窗 */} - setOpen1(false)}> + setOpen1(false)}/> + setOpen2(false)}/> + setOpen3(false)}/> + setOpen4(false)}/> ) }