更新

src/pages/InstallExe/exeDialog/Net.tsx

@@ -0,0 +1,80 @@
+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 Net: FC<PageProps> = ({
+  open = false,
+  onCancel
+}) => {
+  const [active, setActive] = useState(1);
+  const [percentVal, setPercentVal] = useState(0);
+
+  // 监听是否到安装进度条步骤
+  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[4].select = true;
+    localStorage.setItem('installExe', JSON.stringify(data));
+    message.success('Net安装成功！')
+    onCancel()
+  }
+
+  return <>
+    {
+      open &&
+      <div className={styles.modalOverlay}>
+        <div className={styles.modal} style={{width: 500, height: 460}}>
+          <img src={require(`../../../assets/images/net/${active}.png`)} width={500} height={460} />
+
+          {[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: 223, 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 Net;

src/pages/InstallExe/exeDialog/NetSP1.tsx

@@ -0,0 +1,80 @@
+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 NetSP1: FC<PageProps> = ({
+  open = false,
+  onCancel
+}) => {
+  const [active, setActive] = useState(1);
+  const [percentVal, setPercentVal] = useState(0);
+
+  // 监听是否到安装进度条步骤
+  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[5].select = true;
+    localStorage.setItem('installExe', JSON.stringify(data));
+    message.success('Net安装成功！')
+    onCancel()
+  }
+
+  return <>
+    {
+      open &&
+      <div className={styles.modalOverlay}>
+        <div className={styles.modal} style={{width: 500, height: 460}}>
+          <img src={require(`../../../assets/images/netsp1/${active}.png`)} width={500} height={460} />
+
+          {[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: 223, 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 NetSP1;

src/pages/InstallExe/exeDialog/index.less

@@ -120,4 +120,13 @@
     right: 60px;
     cursor: pointer;
   }
+
+  .net {
+    position: absolute;
+    width: 74px;
+    height: 20px;
+    bottom: 19px;
+    right: 110px;
+    cursor: pointer;
+  }
 }

src/pages/InstallExe/index.tsx

@@ -7,6 +7,8 @@ import GBase from './exeDialog/GBase'
 import HGoogleEarth from './exeDialog/HGoogleEarth';
 import MSXML from './exeDialog/MSXML';
 import FlashPlayer from './exeDialog/FlashPlayer';
+import Net from './exeDialog/Net';
+import NetSP1 from './exeDialog/NetSP1';
 
 const typeData = [
   // 依赖程序
@@ -15,7 +17,7 @@ const typeData = [
   { name: 'FlashPlayer9', select: false },
   { name: 'MSXML4', select: false },
   { name: '.NET 2.0', select: false },
-  { name: '.NET 2.0 SQL', select: false },
+  { name: '.NET 2.0 SP1', select: false },
   { name: 'HGoogleEarth', select: false },
   { name: 'MySQLServer 5.1', select: false },
   { name: 'MyODBC 3.51', select: false },
@@ -40,6 +42,8 @@ const InstallExe: FC<PageProps> = ({ }) => {
   const [open2, setOpen2] = useState(false); // HGoogleEarth
   const [open3, setOpen3] = useState(false); // MSXML4
   const [open4, setOpen4] = useState(false); // FlashPlayer
+  const [open5, setOpen5] = useState(false); // Net2.0
+  const [open6, setOpen6] = useState(false); // NET 2.0 SP1
 
   useEffect(() => {
     let data = localStorage.getItem('installExe');
@@ -84,9 +88,11 @@ const InstallExe: FC<PageProps> = ({ }) => {
       case 'FlashPlayer9':
         setOpen4(true)
         break;
-      case '':
+      case '.NET 2.0':
+        setOpen5(true)
         break;
-      case '':
+      case '.NET 2.0 SP1':
+        setOpen6(true)
         break;
     }
   }
@@ -125,6 +131,8 @@ const InstallExe: FC<PageProps> = ({ }) => {
       <HGoogleEarth open={open2} onCancel={() => setOpen2(false)}/>
       <MSXML open={open3} onCancel={() => setOpen3(false)}/>
       <FlashPlayer open={open4} onCancel={() => setOpen4(false)}/>
+      <Net open={open5} onCancel={() => setOpen5(false)}/>
+      <NetSP1 open={open6} onCancel={() => setOpen6(false)}/>
     </div>
   )
 }