更新安装页面内容

master_basic
鲁誉程 1 year ago
parent b223f6ddff
commit b9b74d1980

@ -1,12 +1,13 @@
const routes = [
{ path: '/', redirect: '/installExe', },
{ path: '/', redirect: '/index', }, // 本地跑时为了方便先使用这个
// { path: '/', redirect: '/404', }, // 后续上线时开放
// 桌面
{ path: '/index', name: '桌面', component: '@/pages/index', layout: false },
// ------------------------------流程------------------------------
{ path: '/installExe', name: '01MMD049安装.exe', component: '@/pages/InstallExe', layout: false },
{ path: '/initialSystem', name: '初装系统', component: '@/pages/InitialSystem', layout: false },
{ path: '/installExe/:fileType', name: '01MMD049安装.exe', component: '@/pages/InstallExe', layout: false },
{ path: '/initialSystem/:fileType', name: '初装系统', component: '@/pages/InitialSystem', layout: false },
{ path: '/coreSystemEntrance', name: '核心管理系统', component: '@/pages/CoreSystemEntrance', layout: false },

@ -10,12 +10,15 @@
},
"dependencies": {
"antd": "^5.11.2",
"body-parser": "^1.20.2",
"dayjs": "^1.11.10",
"dva": "^2.4.1",
"express": "^4.18.2",
"moment": "^2.29.4",
"umi": "^4.0.88"
},
"devDependencies": {
"@types/cors": "^2.8.17",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"typescript": "^5.0.3"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 634 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 634 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 634 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 634 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 634 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 634 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 28 KiB

@ -33,6 +33,7 @@
justify-content: center;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
.left_menu {

@ -1,5 +1,5 @@
import { FC, useEffect, useState } from 'react';
import { history, useLocation } from 'umi';
import { history, useLocation, useParams } from 'umi';
import styles from './index.less';
import DeviceInstall from './DeviceInstall';
import PowerOnAuth from './PowerOnAuth';
@ -14,6 +14,8 @@ const InitialSystem: FC<PageProps> = ({ }) => {
const type = queryParams.get('type');
const count = queryParams.get('count');
const urlParams = useParams();
const MenuList: any = {
'admin': [
{ name: '算法加载', dom: <div></div>, img: '' },
@ -43,7 +45,7 @@ const InitialSystem: FC<PageProps> = ({ }) => {
return (
<div className={styles.item1} key={item.name} onClick={() => {
setActiveItem(item)
history.push(`/initialSystem?type=${type}&count=${index}`)
history.push(`/initialSystem/${urlParams?.fileType}?type=${type}&count=${index}`)
}}>
<div className={styles.item1_img}></div>
<div className={styles.item1_name} style={{ color: activeItem?.name == item.name ? 'red' : '' }}>
@ -57,7 +59,7 @@ const InitialSystem: FC<PageProps> = ({ }) => {
<div className={styles.initial_warp}>
{/* 头部 */}
<div className={styles.header_warp}>
<div className='ml20' style={{cursor: 'pointer'}} onClick={() => history.push('/')}><LeftOutlined /></div>
<div className='ml20'></div>
<div className='mr20'></div>
</div>
{/* 底部 */}

@ -34,7 +34,7 @@ const FlashPlayer: FC<PageProps> = ({
return () => clearInterval(interval);
}
}, [active])
// 设置安装步骤进度
const setValue = () => {
setActive((e) => { return e + 1 })
@ -54,19 +54,23 @@ const FlashPlayer: FC<PageProps> = ({
{
open &&
<div className={styles.modalOverlay}>
<div className={styles.modal}>
<div className={styles.modal} style={{ width: 656, height: 403 }}>
<img src={require(`../../../assets/images/flashPlayer/${active}.png`)} width={656} height={403} />
{active != 2 && <div
{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>}
{active == 2 &&
<>
<div className={styles.percentValVal}>{percentVal}</div>
<div className={styles.progress} style={{background: 'rgba(0,1,1,0)', width: 511, height: 26, bottom: 235, left: 66}}>
<Progress style={{left: 4, top: 4}} percent={percentVal} strokeLinecap="butt" size={[511, 26]} strokeColor={'rgba(96,156,212)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
</div>
</>}
</div>
</div>
}

@ -12,10 +12,11 @@ const HGoogleEarth: FC<PageProps> = ({
}) => {
const [active, setActive] = useState(1);
const [percentVal, setPercentVal] = useState(0);
const [showOk, setShowOk] = useState(false);
// 监听是否到安装进度条步骤
useEffect(() => {
if (open) {
if (active == 2) {
const interval = setInterval(() => {
setPercentVal((val) => {
const randomStep = Math.round(Math.random() * (100 / 10));
@ -23,7 +24,7 @@ const HGoogleEarth: FC<PageProps> = ({
if (newPercent >= 100) {
clearInterval(interval);
installSuccess()
setShowOk(true)
return 100;
}
@ -33,7 +34,7 @@ const HGoogleEarth: FC<PageProps> = ({
return () => clearInterval(interval);
}
}, [open])
}, [active])
// 安装完成后 记录安装的信息
@ -60,9 +61,12 @@ const HGoogleEarth: FC<PageProps> = ({
{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>}
{active == 2 && <>
{showOk && <div className={styles.h_g_e} onClick={() => installSuccess()}></div>}
<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>
}

@ -62,7 +62,7 @@ const Net: FC<PageProps> = ({
onClick={() => setValue()}>
</div>}
{active == 3 && <div className={styles.progress} style={{background: '#fff', height: 15, width: 375, bottom: 223, left: 33,}}>
{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>}

@ -116,8 +116,8 @@
position: absolute;
width: 170px;
height: 40px;
bottom: 135px;
right: 60px;
bottom: 30px;
right: 27px;
cursor: pointer;
}
@ -129,4 +129,30 @@
right: 110px;
cursor: pointer;
}
.percentValVal {
position: absolute;
width: 100px;
text-align: right;
top: 116px;
right: 95px;
color: rgba(255, 255, 255, .8);
font-size: 13px;
}
.h_g_e {
position: absolute;
width: 110px;
height: 26px;
color: #000;
background-color: rgba(153, 153, 153, 0.2);
border: 1px solid rgb(153, 153, 153);
display: flex;
align-items: center;
justify-content: center;
bottom: 20px;
right: 38px;
font-size: 13px;
cursor: pointer;
}
}

@ -1,5 +1,6 @@
import { FC, useEffect, useState } from 'react';
import { history, useLocation } from "umi";
import { history, useLocation, useParams } from "umi";
import { message } from 'antd';
import styles from './index.less';
import ContentWarp from '@/components/ContentWarp';
import ButtonComp from '@/components/ButtonComp';
@ -9,6 +10,7 @@ import MSXML from './exeDialog/MSXML';
import FlashPlayer from './exeDialog/FlashPlayer';
import Net from './exeDialog/Net';
import NetSP1 from './exeDialog/NetSP1';
import { countType } from '@/utils';
const typeData = [
// 依赖程序
@ -45,6 +47,8 @@ const InstallExe: FC<PageProps> = ({ }) => {
const [open5, setOpen5] = useState(false); // Net2.0
const [open6, setOpen6] = useState(false); // NET 2.0 SP1
const urlParams = useParams();
useEffect(() => {
let data = localStorage.getItem('installExe');
if (data) {
@ -59,9 +63,37 @@ const InstallExe: FC<PageProps> = ({ }) => {
return (
<div className={`${styles.box} ${item.select ? styles.active_box : ''}`} key={index}
onClick={() => {
const updatedList = listData.map((data: any) => {
const notRequireds = ['MySQLServer 5.1', 'MyODBC 3.51', '密钥格式管理安装程序', '密码资源输入输出设备驱动', '一体化密码机驱动安装程序', '认证服务器Install', '用户登录组件']
// needArr 校验依赖程序中是否有未安装的
let needArr = false;
listData.slice(0, 7).forEach((k, i) => {
if (!k.select) { needArr = true }
})
const updatedList = listData.map((data: any, key: number) => {
if (data.name === item.name) {
if (data.select) return data;
// 如果(选中) 或者 (不需要安装的) 就返回
if (data.select || notRequireds.includes(item.name)) return data;
// 暂时先gbase升级程序没找到安装流程图片通过点击就安装成功
if (data.name == 'GBase升级程序') {
message.success('GBase升级成功')
let installExe: any = localStorage.getItem('installExe')
let obj = JSON.parse(installExe);
obj[1].select = true;
localStorage.setItem('installExe', JSON.stringify(data));
return { ...data, select: !data.select };
}
// 依赖程序必安装的完成后才能点就右侧2块的内容专用核心密码管理分系统、一体化密码机、JJP903C密码钥匙)
if (key > 8 && needArr) {
message.info('请将需要的依赖程序安装完成!');
return data
}
openDialog(item.name);
return { ...data, select: !data.select };
}
@ -94,6 +126,29 @@ const InstallExe: FC<PageProps> = ({ }) => {
case '.NET 2.0 SP1':
setOpen6(true)
break;
case '核心区安装程序':
install()
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); // 处理请求错误
}
}
@ -127,12 +182,12 @@ const InstallExe: FC<PageProps> = ({ }) => {
</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)}/>
<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)} />
</div>
)
}

@ -1,3 +1,10 @@
export const countType = {
'hx1': '核心区一',
'hx2': '核心区二',
'zq1': '执勤区一',
'zq2': '执勤区二'
}
export const rowClassName = (record:any, index: any) => {
return index % 2 === 0 ? 'even-row' : 'odd-row';
};

@ -0,0 +1,52 @@
const express = require('express');
const fs = require('fs');
const path = require('path');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = 3000; // 可以根据需要修改端口号
app.use(cors());
app.use(bodyParser.json());
app.post('/createShortcut', (req, res) => {
// folderPath存放的路径 shortcutName 快捷方式名称 shortcutURL 快捷方式的访问地址
const { folderPath, shortcutName, shortcutURL } = req.body;
// 检查是否缺少任何一个值
if (!folderPath || !shortcutName || !shortcutURL) {
return res.status(400).send('少了参数!');
}
// 创建文件夹(如果不存在)
if (!fs.existsSync(folderPath)) {
fs.mkdirSync(folderPath, { recursive: true });
}
const shortcutFilePath = path.join(folderPath, `${shortcutName}.url`);
// 删除旧的快捷方式文件(如果存在)
if (fs.existsSync(shortcutFilePath)) {
fs.unlinkSync(shortcutFilePath);
}
// 创建快捷方式
const shortcutFolderPath = path.join(folderPath, shortcutName + '.url');
const shortcutFileContent = `[InternetShortcut]\nURL=${shortcutURL}`;
fs.writeFile(shortcutFolderPath, shortcutFileContent, (err) => {
if (err) {
console.error(err);
res.status(500).send('安装失败');
} else {
res.status(200).send('安装成功');
}
});
});
// 本地测试的话 需要进入到当前的文件夹目录打开终端 执行 node nodeService.js
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});

@ -45,12 +45,7 @@ export function getRequest(url: string, params: object) {
export function postRequest(url: string, data: object) {
return fetch(((hardCode ? DEV.PROXY_SERVER : '')) + url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'sec-ch-ua-mobile': '',
'User-Agent': '',
'sec-ch-ua': ''
},
headers: { 'Content-Type': 'application/json'},
mode: "cors",
body: JSON.stringify(data),
})

Loading…
Cancel
Save