Skip to content

B
bkunyun
Commit 6704e629 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 路由调试

parent 69f74273
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 171 deletions
src/api/resourceCenter.ts
View file @ 6704e629
...@@ -56,7 +56,7 @@ const getActorenvList = (params: { ...@@ -56,7 +56,7 @@ const getActorenvList = (params: {
const deleteActorenv = (params: {id: string}) => { const deleteActorenv = (params: {id: string}) => {
return request({ return request({
url:`${Api.API_ACTORENV_DELETE}/${params.id}`, url:`${Api.API_ACTORENV_DELETE}/${params.id}`,
method: "get", method: "delete",
}); });
}; };
......
src/components/MyRouter/useMyRouter.ts
View file @ 6704e629
...@@ -42,12 +42,18 @@ const useMyRouter = () => { ...@@ -42,12 +42,18 @@ const useMyRouter = () => {
} }
}); });
} }
for (let item of menuInfo.res.data) { for (let item of menuInfo.res.data) {
for (let route of item.routes) { for (let route of item.routes) {
route.element = elements[route.element] || NotFound; route.element = elements[route.element] || NotFound;
route.path = `/product/${item.id}${route.path}`; route.path = `/product/${item.id}${route.path}`;
if (Array.isArray(route.children)) {
route.children.forEach((childrenItem: any, index: number) => {
route.children[index].element = elements[childrenItem.element] || NotFound;
route.children[index].path = `${route.path}${childrenItem.path}`;
})
}
} }
console.log(item.routes)
permissionStore.setAddRoutes(item.routes); permissionStore.setAddRoutes(item.routes);
} }
menuStore.initMenu(menuInfo.res.data); menuStore.initMenu(menuInfo.res.data);
......
src/router/index.ts
View file @ 6704e629
...@@ -13,6 +13,7 @@ import MenuLayout from "@/views/MenuLayout"; ...@@ -13,6 +13,7 @@ import MenuLayout from "@/views/MenuLayout";
import * as React from "react"; import * as React from "react";
import NotFound from "@/views/404"; import NotFound from "@/views/404";
import Demo from "@/views/demo"; import Demo from "@/views/demo";
import SeeEnv from "@/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv";
import ProjectSetting from "@/views/Project/ProjectSetting"; import ProjectSetting from "@/views/Project/ProjectSetting";
import ProjectData from "@/views/Project/ProjectData"; import ProjectData from "@/views/Project/ProjectData";
import ProjectWorkbench from "@/views/Project/ProjectWorkbench"; import ProjectWorkbench from "@/views/Project/ProjectWorkbench";
...@@ -54,6 +55,7 @@ export const elements: { ...@@ -54,6 +55,7 @@ export const elements: {
Demo: Demo, Demo: Demo,
SeeTemplate: Demo, SeeTemplate: Demo,
UserResources: UserResources, UserResources: UserResources,
SeeEnv: SeeEnv,
ProjectSetting: ProjectSetting, ProjectSetting: ProjectSetting,
ProjectData: ProjectData, ProjectData: ProjectData,
ProjectWorkbench: ProjectWorkbench, ProjectWorkbench: ProjectWorkbench,
......
src/views/Project/ProjectJobDetail/LogView/index.tsx
View file @ 6704e629
...@@ -8,168 +8,184 @@ import CloudEController from "@/api/fileserver/CloudEController"; ...@@ -8,168 +8,184 @@ import CloudEController from "@/api/fileserver/CloudEController";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { toJS } from "mobx"; import { toJS } from "mobx";
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer"; import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import useWindowSize from '@/hooks/useWindowSize' import useWindowSize from "@/hooks/useWindowSize";
type LogViewProps = { type LogViewProps = {
logs: any[]; logs: any[];
setShowLogView: any; setShowLogView: any;
}; };
const LogView = (props: LogViewProps) => { const LogView = (props: LogViewProps) => {
const { logs, setShowLogView } = props; const { logs, setShowLogView } = props;
const { currentProjectStore } = useStores(); console.log(logs);
const { width, height } = useWindowSize(); const { currentProjectStore } = useStores();
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken); const { width, height } = useWindowSize();
const projectId = toJS(currentProjectStore.currentProjectInfo.id); const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
// 当前选择的日志 const projectId = toJS(currentProjectStore.currentProjectInfo.id);
const [logCurrent, setLogCurrent] = useState<number>(0); // 当前选择的日志
// 当前日志的内容文本 const [logCurrent, setLogCurrent] = useState<number>(0);
const [logText, setLogText] = useState('') // 当前日志的内容文本
// 当前日志路径 const [logText, setLogText] = useState("");
const [logPath, setLogPath] = useState('') // 当前日志路径
const [logPath, setLogPath] = useState("");
const [displacement, setDisplacement] = useState(0)
const [displacement, setDisplacement] = useState(0);
const [middleDynamicWidth, setMiddleDynamicWidth] = useState(0)
const [middleDynamicWidth, setMiddleDynamicWidth] = useState(0);
const [leftButtonColor, setLeftButtonColor] = useState('#585D62')
const [rightButtonColor, setRightButtonColor] = useState('#585D62') const [leftButtonColor, setLeftButtonColor] = useState("#585D62");
const [rightButtonColor, setRightButtonColor] = useState("#585D62");
useEffect(() => {
setLogPath(logs[logCurrent]?.logPath) useEffect(() => {
}, [logs]); setLogPath(logs[logCurrent]?.logPath);
}, [logs]);
// 请求日志文本
useEffect(() => { // 请求日志文本
if (logPath) { useEffect(() => {
const path = logPath.slice(12) if (logPath) {
CloudEController.JobFileDownloadText( const path = logPath.slice(12);
path, CloudEController.JobFileDownloadText(
fileToken as string, path,
projectId as string fileToken as string,
)?.then((res) => { projectId as string
setLogText(res.data) )?.then((res) => {
}) setLogText(res.data);
} else { });
setLogText("") } else {
} setLogText("");
}, [logPath]); }
}, [logPath]);
// 选择日志时改变日志路径
useEffect(() => { // 选择日志时改变日志路径
setLogPath(logs[logCurrent]?.logPath) useEffect(() => {
}, [logCurrent]); setLogPath(logs[logCurrent]?.logPath);
}, [logCurrent]);
//获取盒子的总宽度，用于滑动效果判断
useEffect(() => { //获取盒子的总宽度，用于滑动效果判断
const box = document.getElementById('middleDynamic') useEffect(() => {
setMiddleDynamicWidth(box ? box.offsetWidth : 0) const box = document.getElementById("middleDynamic");
}, []) setMiddleDynamicWidth(box ? box.offsetWidth : 0);
}, []);
useEffect(() => {
if (middleDynamicWidth < width - 97) { useEffect(() => {
setLeftButtonColor('#585D62') if (middleDynamicWidth < width - 97) {
setRightButtonColor('#585D62') setLeftButtonColor("#585D62");
} setRightButtonColor("#585D62");
if (displacement === 0) { }
setLeftButtonColor('#585D62') if (displacement === 0) {
} else { setLeftButtonColor("#585D62");
setLeftButtonColor('#C0C5CD') } else {
} setLeftButtonColor("#C0C5CD");
if (middleDynamicWidth > width - 97 && displacement !== -middleDynamicWidth + width - 97) { }
setRightButtonColor('#C0C5CD') if (
} else { middleDynamicWidth > width - 97 &&
setRightButtonColor('#585D62') displacement !== -middleDynamicWidth + width - 97
} ) {
}, [width, middleDynamicWidth, displacement]) setRightButtonColor("#C0C5CD");
} else {
// 下载当前日志 setRightButtonColor("#585D62");
const handleDownLoad = () => { }
const path = logPath.slice(12) }, [width, middleDynamicWidth, displacement]);
CloudEController.JobFileDownload(
path, // 下载当前日志
fileToken as string, const handleDownLoad = () => {
projectId as string const path = logPath.slice(12);
); CloudEController.JobFileDownload(
} path,
fileToken as string,
const rightClick = () => { projectId as string
if (middleDynamicWidth < width - 97) { );
return };
}
if (-displacement > middleDynamicWidth - width * 1.8 + 97) { const rightClick = () => {
setDisplacement(-middleDynamicWidth + width - 97) if (middleDynamicWidth < width - 97) {
return return;
} }
const newDisplacement = displacement - width * 0.8; if (-displacement > middleDynamicWidth - width * 1.8 + 97) {
setDisplacement(newDisplacement) setDisplacement(-middleDynamicWidth + width - 97);
} return;
}
const leftClick = () => { const newDisplacement = displacement - width * 0.8;
if (-displacement < width * 0.8) { setDisplacement(newDisplacement);
setDisplacement(0) };
return
} const leftClick = () => {
const newDisplacement = displacement + width * 0.8; if (-displacement < width * 0.8) {
setDisplacement(newDisplacement) setDisplacement(0);
} return;
}
return ( const newDisplacement = displacement + width * 0.8;
<FullScreenDrawer handleClose={setShowLogView} zIndex={1002}> setDisplacement(newDisplacement);
<div className={style.logViewBox}> };
<div className={style.logViewContentMask}></div>
<div className={style.logViewTop}> return (
<div <FullScreenDrawer handleClose={setShowLogView} zIndex={1002}>
className={style.leftButton} <div className={style.logViewBox}>
onClick={leftClick} <div className={style.logViewContentMask}></div>
style={{ color: leftButtonColor, cursor: leftButtonColor === '#585D62' ? 'default' : 'pointer' }} <div className={style.logViewTop}>
> <div
<ChevronLeftIcon /> className={style.leftButton}
</div> onClick={leftClick}
<div className={style.middleFixed}> style={{
<div className={style.middleDynamic} id='middleDynamic' style={{ left: `${displacement}px` }}> color: leftButtonColor,
{logs.map((item: any, index: number) => { cursor: leftButtonColor === "#585D62" ? "default" : "pointer",
return <MyTooltip }}
title={item.logName} >
placement="bottom" <ChevronLeftIcon />
arrow={false} </div>
enterDelay={1000} <div className={style.middleFixed}>
> <div
<div className={style.middleDynamic}
key={index} id="middleDynamic"
onClick={() => { setLogCurrent(index) }} style={{ left: `${displacement}px` }}
className={classnames({ >
[style.logTitle]: true, {logs.map((item: any, index: number) => {
[style.logTitleSelected]: index === logCurrent, return (
})}> <MyTooltip
<InsertDriveFileOutlinedIcon className={style.fileIcon} /> title={item.logName}
<span className={style.logName}>{item.logName}</span> placement="bottom"
</div> arrow={false}
</MyTooltip> enterDelay={1000}
})} >
</div> <div
</div> key={index}
<div className={style.gradientBox}></div> onClick={() => {
<div setLogCurrent(index);
className={style.rightButton} }}
onClick={rightClick} className={classnames({
style={{ color: rightButtonColor, cursor: rightButtonColor === '#585D62' ? 'default' : 'pointer' }} [style.logTitle]: true,
> [style.logTitleSelected]: index === logCurrent,
<ChevronRightIcon /> })}
</div> >
</div> <InsertDriveFileOutlinedIcon className={style.fileIcon} />
<div className={style.logViewContent}> <span className={style.logName}>{item.logName}</span>
{logText} </div>
</div> </MyTooltip>
<div className={style.logViewBottom}> );
<MyButton text='下载当前日志' onClick={handleDownLoad} /> })}
</div> </div>
</div> </div>
</FullScreenDrawer> <div className={style.gradientBox}></div>
) <div
} className={style.rightButton}
onClick={rightClick}
style={{
color: rightButtonColor,
cursor: rightButtonColor === "#585D62" ? "default" : "pointer",
}}
>
<ChevronRightIcon />
</div>
</div>
<div className={style.logViewContent}>{logText}</div>
<div className={style.logViewBottom}>
<MyButton text="下载当前日志" onClick={handleDownLoad} />
</div>
</div>
</FullScreenDrawer>
);
};
export default LogView export default LogView;
\ No newline at end of file
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/EnvironmentDetails/index.tsx → src/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv/index.tsx
View file @ 6704e629
const EnvironmentDetails = () => { const SeeEnv = () => {
return <div>EnvironmentDetails</div>; return <div>EnvironmentDetails</div>;
}; };
export default EnvironmentDetails; export default SeeEnv;
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/index.tsx
View file @ 6704e629
// 应用环境 // 应用环境
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import style from "./index.module.css"; import style from "./index.module.css";
import SearchInput from "@/components/BusinessComponents/SearchInput"; import SearchInput from "@/components/BusinessComponents/SearchInput";
import MySelect from "@/components/mui/MySelect"; import MySelect from "@/components/mui/MySelect";
...@@ -7,6 +8,7 @@ import MyButton from "@/components/mui/MyButton"; ...@@ -7,6 +8,7 @@ import MyButton from "@/components/mui/MyButton";
import MyTable from "@/components/mui/MyTableNew"; import MyTable from "@/components/mui/MyTableNew";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { getActorenvList } from "@/api/resourceCenter"; import { getActorenvList } from "@/api/resourceCenter";
import Add from "@mui/icons-material/Add";
import moment from "moment"; import moment from "moment";
import jobFail from "@/assets/project/jobFail.svg"; import jobFail from "@/assets/project/jobFail.svg";
import jobRun from "@/assets/project/jobRun.svg"; import jobRun from "@/assets/project/jobRun.svg";
...@@ -15,6 +17,7 @@ import AddEnvironment from "./AddEnvironment"; ...@@ -15,6 +17,7 @@ import AddEnvironment from "./AddEnvironment";
import DeleteEnvironment from "./DeleteEnvironment"; import DeleteEnvironment from "./DeleteEnvironment";
const UserResourcesEnvironment = () => { const UserResourcesEnvironment = () => {
const navigate = useNavigate();
const [addOpen, setAddopen] = useState(false); const [addOpen, setAddopen] = useState(false);
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
const [type, setType] = useState<"BATCH" | "FLOW" | "">(""); const [type, setType] = useState<"BATCH" | "FLOW" | "">("");
...@@ -126,6 +129,16 @@ const UserResourcesEnvironment = () => { ...@@ -126,6 +129,16 @@ const UserResourcesEnvironment = () => {
setDeleteOpen(true); setDeleteOpen(true);
}; };
const hanleToSeeEnv = (item: any) => {
console.log("hanleToSeeEnv");
console.log(item.id);
// /product/userCenter/userInformation
// navigate("/product/resourceCenter/userResources/seeEnv", {
navigate("/product/userCenter/userInformation", {
state: { id: item.id },
});
};
const renderButtons = (item: any) => { const renderButtons = (item: any) => {
if (item.status === "FAILED") { if (item.status === "FAILED") {
return ( return (
...@@ -141,6 +154,7 @@ const UserResourcesEnvironment = () => { ...@@ -141,6 +154,7 @@ const UserResourcesEnvironment = () => {
}} }}
variant="text" variant="text"
size="medium" size="medium"
onClick={() => hanleToSeeEnv(item)}
/> />
<MyButton <MyButton
onClick={() => handleDelete(item)} onClick={() => handleDelete(item)}
...@@ -171,7 +185,7 @@ const UserResourcesEnvironment = () => { ...@@ -171,7 +185,7 @@ const UserResourcesEnvironment = () => {
}} }}
variant="text" variant="text"
size="medium" size="medium"
// onClick={() => hanleDownloadFile(item)} onClick={() => hanleToSeeEnv(item)}
/> />
); );
} }
...@@ -212,13 +226,8 @@ const UserResourcesEnvironment = () => { ...@@ -212,13 +226,8 @@ const UserResourcesEnvironment = () => {
<div className={style.topRight}> <div className={style.topRight}>
<MyButton <MyButton
text="构建应用环境" text="构建应用环境"
img={
<span
style={{ fontSize: "14px", marginRight: "8px" }}
className="iconfont icon-dianzan"
></span>
}
onClick={() => setAddopen(true)} onClick={() => setAddopen(true)}
startIcon={<Add />}
></MyButton> ></MyButton>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment