更新

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<PageProps> = ({
+  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 &&
+      <div className={styles.modalOverlay}>
+        <div className={styles.modal}>
+          <img src={require(`../../../assets/images/flashPlayer/${active}.png`)} width={656} height={403} />
+
+          {active != 2  && <div 
+            className={styles.f_p}
+            onClick={() => {
+              active == 1 ? setValue() : installSuccess()
+            }}>
+          </div>}
+
+          {active == 2 && <div className={styles.progress} style={{background: '#222', width: 511, height: 29, bottom: 339, left: 66}}>
+            <Progress style={{left: 4, top: 4}} percent={percentVal} strokeLinecap="butt" size={[511, 29]} strokeColor={'rgba(96,156,212)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
+          </div>}
+        </div>
+      </div>
+    }
+  </>
+};
+
+export default FlashPlayer;

src/pages/InstallExe/exeDialog/GBase.tsx

@@ -48,6 +48,7 @@ const GBase: FC<PageProps> = ({
     let data = JSON.parse(installExe);
     data[0].select = true;
     localStorage.setItem('installExe', JSON.stringify(data));
+    message.success('Gbase安装成功！')
     onCancel()
   }
 

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<PageProps> = ({
+  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 &&
+      <div className={styles.modalOverlay}>
+        <div className={styles.modal} style={{ width: 'auto', height: ' auto' }}>
+          <img src={require(`../../../assets/images/googleEarth/${active}.jpg`)} />
+
+          {active == 1 && <div className={styles.g_e} onClick={() => setValue()}></div>}
+
+          {active == 2 && <div className={styles.progress} style={{background: 'rgba(0,0,0,0)', right: 42, top: 90}}>
+            <Progress percent={percentVal} steps={50} size={[8, 17]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
+          </div>}
+        </div>
+      </div>
+    }
+  </>
+};
+
+export default HGoogleEarth;

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<PageProps> = ({
+  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 &&
+      <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;

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;
+  }
 }

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<PageProps> = ({ }) => {
   const [listData, setListData] = useState<any[]>([]);
   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<PageProps> = ({ }) => {
       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<PageProps> = ({ }) => {
       </div>
 
       {/* 安装程序弹窗 */}
-      <GBase open={open1} onCancel={() => setOpen1(false)}></GBase>
+      <GBase open={open1} onCancel={() => setOpen1(false)}/>
+      <HGoogleEarth open={open2} onCancel={() => setOpen2(false)}/>
+      <MSXML open={open3} onCancel={() => setOpen3(false)}/>
+      <FlashPlayer open={open4} onCancel={() => setOpen4(false)}/>
     </div>
   )
 }