提交

src/pages/InstallExe/exeDialog/CoreArea.tsx

@@ -0,0 +1,111 @@
+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 CoreArea: 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/lyc/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[9].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/coreArea/${active}.png`)} width={500} height={460} />
+
+          <div className={styles.title}>核心区 安装程序</div>
+          <div>核心区安装程序</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 CoreArea;

src/pages/InstallExe/exeDialog/DutyArea.tsx

@@ -0,0 +1,103 @@
+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 DutyArea: 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/lyc/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[10].select = true;
+        // localStorage.setItem('installExe', JSON.stringify(obj));
+
+        onCancel()
+      } catch (error) {
+        message.error(error); // 处理请求错误
+      }
+    }
+
+  return <>
+    {
+      open &&
+      <div className={styles.modalOverlay}>
+        <div className={styles.modal} style={{width: 500, height: 460}}>
+          <img src={require(`../../../assets/images/coreArea/${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: 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 DutyArea;

src/pages/InstallExe/index.tsx

@@ -10,7 +10,8 @@ import MSXML from './exeDialog/MSXML';
 import FlashPlayer from './exeDialog/FlashPlayer';
 import Net from './exeDialog/Net';
 import NetSP1 from './exeDialog/NetSP1';
-import { countType } from '@/utils';
+import CoreArea from './exeDialog/CoreArea';
+import DutyArea from './exeDialog/DutyArea';
 
 const typeData = [
   // 依赖程序
@@ -47,7 +48,8 @@ const InstallExe: FC<PageProps> = ({ }) => {
   const [open5, setOpen5] = useState(false); // Net2.0
   const [open6, setOpen6] = useState(false); // NET 2.0 SP1
 
-  const urlParams = useParams();
+  const [open7, setOpen7] = useState(false); // 核心区安装程序
+  const [open8, setOpen8] = useState(false); // 核心区安装程序
 
   useEffect(() => {
     let data = localStorage.getItem('installExe');
@@ -64,7 +66,15 @@ const InstallExe: FC<PageProps> = ({ }) => {
       <div className={`${styles.box} ${item.select ? styles.active_box : ''}`} key={index}
         onClick={() => {
 
-          const notRequireds = ['MySQLServer 5.1', 'MyODBC 3.51', '密钥格式管理安装程序', '密码资源输入输出设备驱动', '一体化密码机驱动安装程序', '认证服务器Install', '用户登录组件']
+          const notRequireds = [
+            'MySQLServer 5.1', 
+            'MyODBC 3.51', 
+            '密钥格式管理安装程序', 
+            '密码资源输入输出设备驱动', 
+            '一体化密码机驱动安装程序', 
+            '认证服务器Install', 
+            '用户登录组件'
+          ]
 
           // needArr 校验依赖程序中是否有未安装的
           let needArr = false;
@@ -127,28 +137,15 @@ const InstallExe: FC<PageProps> = ({ }) => {
         setOpen6(true)
         break;
       case '核心区安装程序':
-        install()
+        setOpen7(true)
+        break;
+      case '执勤区安装程序':
+        // setOpen8(true)
+        let data: any = localStorage.getItem('installExe')
+        let obj = JSON.parse(data);
+        obj[9].select = false;
+        localStorage.setItem('installExe', JSON.stringify(obj));
         break;
-    }
-  }
-
-  // 在指定的目录下安装快捷方式
-  const install = 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/lyc/Desktop/${countType[urlParams?.fileType]}`,
-          shortcutName: '专用核心密码机管理软件',
-          shortcutURL: `http://localhost:8000/initialSystem/${urlParams?.fileType}`
-        }),
-      });
-      const data = await response.text();
-      message.success(data); // 处理服务器返回的数据
-    } catch (error) {
-      message.error(error); // 处理请求错误
     }
   }
 
@@ -181,13 +178,17 @@ const InstallExe: FC<PageProps> = ({ }) => {
         <ButtonComp text={'退出'} onClick={() => history.push('/index')} />
       </div>
 
-      {/* 安装程序弹窗 */}
+      {/* 依赖程序安装--弹窗 */}
       <GBase open={open1} onCancel={() => setOpen1(false)} />
       <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)} />
+
+      {/* 专用核心密码管理分系统--弹窗 */}
+      <CoreArea open={open7} onCancel={() => setOpen7(false)} />
+      <DutyArea open={open8} onCancel={() => setOpen8(false)} />
     </div>
   )
 }

src/pages/index.tsx

@@ -8,7 +8,7 @@ import { getPlugCordResult } from '@/services/api';
 import { validateNumber } from '@/utils/validate';
 import ClearInfoDialog from '@/components/ClearInfoDialog';
 
-// 首页
+// 首页(目前无用了)
 export default function IndexPage() {
   // 是否认证通过
   const [isAuth, setIsAuth] = useState(false);

src/utils/nodeService.js

@@ -38,9 +38,9 @@ app.post('/createShortcut', (req, res) => {
   fs.writeFile(shortcutFolderPath, shortcutFileContent, (err) => {
     if (err) {
       console.error(err);
-      res.status(500).send('安装失败');
+      res.status(500).send('安装失败！');
     } else {
-      res.status(200).send('安装成功');
+      res.status(200).send('安装成功！');
     }
   });
 });