更新

config/routes/index.ts

@@ -1,5 +1,5 @@
 const routes = [
-  { path: '/', redirect: '/index', },
+  { path: '/', redirect: '/installExe', },
 
   // 桌面
   { path: '/index', name: '桌面', component: '@/pages/index', layout: false },

src/pages/InstallExe/exeDialog/GBase.tsx

@@ -0,0 +1,104 @@
+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 GBase: FC<PageProps> = ({
+  open = false,
+  onCancel
+}) => {
+  const [active, setActive] = useState(1);
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [percentVal, setPercentVal] = useState(0);
+
+  // 监听是否到安装进度条步骤
+  useEffect(() => {
+    if (active == 11) {
+      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[0].select = true;
+    localStorage.setItem('installExe', JSON.stringify(data));
+    onCancel()
+  }
+
+  const verifyPassword = () => {
+    if (password.trim().length == 0 || confirmPassword.trim().length == 0) {
+      message.info('请输入密码！')
+      return true;
+    }
+
+    if (password != confirmPassword) {
+      message.error('两次输入的密码不相同！');
+      return true;
+    }
+  }
+
+  return <>
+    {
+      open &&
+      <div className={styles.modalOverlay}>
+        <div className={styles.modal}>
+          <img src={require(`../../../assets/images/gbase/${active}.png`)} width={689} height={508} />
+
+          {active == 1 && <div className={styles.a1} onClick={() => setValue()}></div>}
+          {(active > 1 && active != 11) && <div className={styles.a2} onClick={() => {
+
+            if (active == 8 && verifyPassword()) return
+
+            if (active == 12) { installSuccess(); return }
+
+            setValue()
+          }}></div>}
+
+          {/* 定位元素 */}
+          {active == 3 && <div>
+            <div className={styles.dian}></div>
+            <div className={`${styles.dian} ${styles.dian1}`}></div>
+            <div className={styles.last}>下一步(N)</div>
+          </div>}
+
+          {active == 8 && <div>
+            <Input value={password} onChange={(e) => { setPassword(e.target.value) }} className={styles.input1} />
+            <Input value={confirmPassword} onChange={(e) => { setConfirmPassword(e.target.value) }} className={styles.input2} />
+          </div>}
+
+          {active == 11 && <div className={styles.progress}>
+            <Progress percent={percentVal} steps={41} size={[9, 19]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
+          </div>}
+        </div>
+      </div>
+    }
+  </>
+};
+
+export default GBase;

src/pages/InstallExe/exeDialog/index.less

@@ -0,0 +1,96 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* 标准语法 */
+}
+
+.modal {
+  position: relative;
+  width: 689px;
+  height: 508px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+
+  .a1 {
+    position: absolute;
+    bottom: 8px;
+    left: 385px;
+    width: 40px;
+    height: 35px;
+    cursor: pointer;
+  }
+
+  .a2 {
+    position: absolute;
+    bottom: 8px;
+    right: 15px;
+    width: 115px;
+    height: 35px;
+    cursor: pointer;
+    z-index: 99;
+  }
+
+  .dian {
+    position: absolute;
+    bottom: 101px;
+    right: 324px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+
+  .dian1 {
+    bottom: 133px;
+    background-color: #333;
+  }
+
+  .last {
+    position: absolute;
+    bottom: 25px;
+    right: 40px;
+    color: #444;
+    font-weight: bold;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  
+  .input1, .input2 {
+    width: 344px;
+    height: 28px;
+  }
+
+  .input1 {
+    position: absolute;
+    bottom: 251px;
+    right: 32px;
+  }
+  
+  .input2 {
+    position: absolute;
+    bottom: 208px;
+    right: 32px;
+  }
+
+  .progress {
+    height: 20px;
+    width: 450px;
+    position: absolute;
+    bottom: 20px;
+    right: 15px;
+    background-color: #DCDFE6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/pages/InstallExe/index.tsx

@@ -3,50 +3,59 @@ import { history, useLocation } from "umi";
 import styles from './index.less';
 import ContentWarp from '@/components/ContentWarp';
 import ButtonComp from '@/components/ButtonComp';
+import GBase from './exeDialog/GBase'
+
+const typeData = [
+  // 依赖程序
+  { name: 'GBase', select: false },
+  { name: 'GBase升级程序', select: false },
+  { name: 'FlashPlayer9', select: false },
+  { name: 'MSXML4', select: false },
+  { name: '.NET 2.0', select: false },
+  { name: '.NET 2.0 SQL', select: false },
+  { name: 'HGoogleEarth', select: false },
+  { name: 'MySQLServer 5.1', select: false },
+  { name: 'MyODBC 3.51', select: false },
+  // 专用核心密码管理分系统
+  { name: '核心区安装程序', select: false },
+  { name: '执勤区安装程序', select: false },
+  { name: '密钥格式管理安装程序', select: false },
+  { name: '密码资源输入输出设备驱动', select: false },
+  // 一体化密码机
+  { name: '一体化密码机管理软件', select: false },
+  { name: '一体化密码机驱动安装程序', select: false },
+  // JJP903C密码钥匙
+  { name: '认证服务器Install', select: false },
+  { name: '用户登录组件', select: false },
+]
 
 interface PageProps { }
 
 const InstallExe: FC<PageProps> = ({ }) => {
-  const [listData, setListData] = useState<any>([
+  const [listData, setListData] = useState([])
-    // 依赖程序
+  const [open1, setOpen1] = useState(false); // Gbase
-    { name: 'GBase', select: false },
+
-    { name: 'GBase升级程序', select: false },
+  useEffect(() => {
-    { name: 'FlashPlayer9', select: false },
+    let data = localStorage.getItem('installExe');
-    { name: 'MSXML4', select: false },
+
-    { name: '.NET 2.0', select: false },
+    data ?
-    { name: '.NET 2.0 SQL', select: false },
+      setListData(JSON.parse(data)) :
-    { name: 'HGoogleEarth', select: false },
+      localStorage.setItem('installExe', JSON.stringify(listData));
-    { name: 'MySQLServer 5.1', select: false },
+  },[])
-    { name: 'MyODBC 3.51', select: false },
-    // 专用核心密码管理分系统
-    { name: '核心区安装程序', select: false },
-    { name: '执勤区安装程序', select: false },
-    { name: '密钥格式管理安装程序', select: false },
-    { name: '密码资源输入输出设备驱动', select: false },
-    // 一体化密码机
-    { name: '一体化密码机管理软件', select: false },
-    { name: '一体化密码机驱动安装程序', select: false },
-    // JJP903C密码钥匙
-    { name: '认证服务器Install', select: false },
-    { name: '用户登录组件', select: false },
-  ])
 
   let sty = { width: '28.5%', padding: '7vh 3vh 3vh 3vh' };
 
   const itemDom = (item: any, index: number) => {
     return (
-      <div className={`${styles.box} ${item.select ?  styles.active_box : ''}`} key={index}
+      <div className={`${styles.box} ${item.select ? styles.active_box : ''}`} key={index}
         onClick={() => {
           listData.forEach((data: any) => {
-            if (data.name == item.name) {
+            if (data.name === item.name) {
-              data.select = !data.select
+              if (data.select) return
+              openDialog(item.name)
+              data.select = !data.select;
             }
           })
-          // listData.filter((k: any, i: any, self: any) => {
-          //   return i === self.findIndex((t: any) => (
-          //     t.id === k.id && t.name === k.name
-          //   ));
-          // });
           setListData([...listData])
         }}>
         {item.name}
@@ -54,39 +63,63 @@ const InstallExe: FC<PageProps> = ({ }) => {
     )
   }
 
+  const openDialog = (name: string) => {
+    switch (name) {
+      case 'GBase':
+        setOpen1(true)
+        break;
+      case '':
+
+        break;
+      case '':
+
+        break;
+      case '':
+
+        break;
+      case '':
+
+        break;
+      case '':
+
+        break;
+    }
+  }
+
   return (
     <div className={styles.exeInstall}>
       <div className={styles.title_con}>一体化对称密码管理系统</div>
       <div className='flex_acB_jE'>
         {/* 左 */}
         <ContentWarp style={sty} text={'依赖程序'}>
-          { listData.slice(0, 9).map((item: any, index: number) => { return itemDom(item, index) })}
+          {listData.length > 0 && listData.slice(0, 9).map((item: any, index: number) => { return itemDom(item, index) })}
         </ContentWarp>
 
         {/* 中 */}
         <ContentWarp style={sty} text={'专用核心密码管理分系统'}>
-          {
+          {listData.length > 0 && listData.slice(9, 13).map((item: any, index: number) => { return itemDom(item, index) })}
-            listData.slice(9, 13).map((item: any, index: number) => { return itemDom(item, index) })}
         </ContentWarp>
 
         {/* 右 */}
         <div style={{ width: '28.5%' }}>
           <ContentWarp style={{ marginBottom: '8%', padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }} text={'一体化密码机'}>
-            {
+            {listData.length > 0 && listData.slice(13, 15).map((item: any, index: number) => { return itemDom(item, index) })}
-              listData.slice(13, 15).map((item: any, index: number) => { return itemDom(item, index) })}
           </ContentWarp>
 
           <ContentWarp text={'JJP903C密码钥匙'} style={{ padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }}>
-            {
+            {listData.length > 0 && listData.slice(15, 17).map((item: any, index: number) => { return itemDom(item, index) })}
-              listData.slice(15, 17).map((item: any, index: number) => { return itemDom(item, index) })}
           </ContentWarp>
         </div>
       </div>
       <div className='flex_jE' style={{ marginTop: '3vh', paddingRight: '4.5vh' }}>
         <ButtonComp text={'退出'} onClick={() => history.push('/index')} />
       </div>
+
+
+      {/* 安装程序弹窗 */}
+      <GBase open={open1} onCancel={() => setOpen1(false)}></GBase>
     </div>
   )
 }
 
-export default InstallExe
+export default InstallExe;