Skip to content

B
bkunyun
Commit a0bd3079 authored by jiangzijing's avatar jiangzijing
Browse files
Options

Merge branch 'feat-20220801' of http://120.77.149.83/root/bkunyun into feat-20220801

parents cba70674 ad039d33
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 282 deletions
src/assets/style/public.css
View file @ a0bd3079
......@@ -7,7 +7,7 @@ main::-webkit-scrollbar {
div::-webkit-scrollbar-track,
main::-webkit-scrollbar-track {
background-color: #fff;
background-color: transparent;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
......
src/components/mui/MyInput.tsx
View file @ a0bd3079
......@@ -66,6 +66,7 @@ const MyInput = (props: MyInputProps) => {
styleOverrides: {
root: {
top: "-9px",
fontSize: "14px",
},
shrink: {
top: 0,
......
src/hooks/usePass.ts
View file @ a0bd3079
......@@ -9,6 +9,13 @@ const roleList: any[] = [
{ OWNER: 4 }
]
export const roleMap = {
VIEWER: '查看者',
USER: '研究员',
MANAGER: '管理员',
OWNER: '所有者',
}
const usePass = () => {
const { permissionStore } = useStores();
const { currentProjectStore } = useStores();
......
src/views/ConsoleLayout/index.module.css
View file @ a0bd3079
......@@ -54,6 +54,7 @@
z-index: 1002;
}
.productLi {
min-width: 142px;
height: 36px;
padding: 7px 50px 7px 16px;
font-size: 14px;
......@@ -109,16 +110,6 @@
color: #8a9099;
transform: rotate(180deg);
}
/* .ArrowDropDownIconRoot {
color: #8a9099;
transition: all 0.2s !important;
transform: rotate(0);
}
.ArrowDropDownIconRootOpen {
color: #8a9099;
transform: rotate(180deg);
} */
.menuPaper {
border: 1px solid #f0f2f5;
......
src/views/Project/ProjectOverview/TaskCard/index.module.css
View file @ a0bd3079
......@@ -72,7 +72,7 @@
.taskProgress {
height: 32px;
margin: 12px 0;
margin: 12px 0 16px;
}
.progressInfo {
......@@ -157,7 +157,7 @@
margin-right: 8px;
}
.outputTitle{
.outputTitle {
display: inline-block;
height: 22px;
line-height: 22px;
......
src/views/Project/ProjectOverview/index.module.css
View file @ a0bd3079
.topFixed {
position: sticky;
top: 0;
z-index: 10;
background-color: #fff;
position: sticky;
top: 0;
z-index: 10;
background-color: #fff;
}
.basicInformation {
display: flex;
justify-content: space-between;
margin: 0 24px;
padding: 20px 0;
border-bottom: 1px solid #EDEFF2;
display: flex;
justify-content: space-between;
margin: 0 24px;
padding: 24px 0 20px;
border-bottom: 1px solid #edeff2;
}
.basicInformationRight {
display: flex;
align-items: center;
font-size: 12px;
display: flex;
align-items: center;
font-size: 12px;
}
.titleBox {
display: flex;
align-items: flex-end;
display: flex;
align-items: flex-end;
}
.projectName {
margin-left: 12px;
font-size: 18px;
line-height: 26px;
font-weight: 600;
margin-left: 12px;
font-size: 18px;
line-height: 26px;
font-weight: 600;
}
.otherInformation {
display: flex;
font-size: 12px;
margin-top: 16px;
display: flex;
font-size: 12px;
margin-top: 16px;
}
.informationcolor {
color: #8A9099;
color: #8a9099;
}
.otherInformationBox {
margin-right: 24px;
color: #565C66;
margin-right: 24px;
color: #565c66;
}
.otherInformationBoxRight {
line-height: 22px;
margin-bottom: 4px;
color: #565C66;
line-height: 22px;
margin-bottom: 4px;
color: #565c66;
}
.numberDisplay {
font-size: 20px;
font-weight: 600;
color: #1E2633;
margin-right: 8px;
font-size: 20px;
font-weight: 600;
color: #1e2633;
margin-right: 8px;
}
.verticalLine {
height: 32px;
border-right: 1px solid #EBEDF0;
margin-left: 28px;
margin-right: 28px;
height: 32px;
border-right: 1px solid #ebedf0;
margin-left: 28px;
margin-right: 28px;
}
.searchBox {
display: flex;
justify-content: space-between;
margin: 24px 24px 0 24px;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
margin: 24px 24px 0 24px;
padding-bottom: 20px;
}
.searchLineLeft {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.taskOverview {
font-size: 16px;
font-weight: 500;
margin-right: 18px;
font-size: 16px;
font-weight: 500;
margin-right: 18px;
}
.projectDataSearch {
padding-left: 12px;
padding-right: 8px;
border-radius: 4px;
border: 1px solid #ebedf0;
padding-left: 12px;
padding-right: 8px;
border-radius: 4px;
border: 1px solid #ebedf0;
}
.taskDisplay {
position: relative;
margin: 0 24px 20px;
padding-bottom: 16px;
overflow: hidden;
background: #F7F8FA;
border-radius: 8px;
min-height: calc(100vh - 291px);
position: relative;
margin: 0 24px 20px;
padding-bottom: 16px;
overflow: hidden;
background: #f7f8fa;
border-radius: 8px;
min-height: calc(100vh - 291px);
}
.noDataBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.noDataText {
margin-top: 8px;
font-size: 14px;
line-height: 22px;
color: #8a9099;
margin-top: 8px;
font-size: 14px;
line-height: 22px;
color: #8a9099;
}
.loadingBox {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 100px);
}
\ No newline at end of file
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 100px);
}
src/views/Project/ProjectOverview/index.tsx
View file @ a0bd3079
import React, { useState, useCallback, useEffect, useMemo } from "react";
import React, { useState, useEffect } from "react";
import { observer } from "mobx-react-lite";
import _ from "lodash";
import moment from "moment";
import useMyRequest from "@/hooks/useMyRequest";
import {
getOverviewInfo,
getTaskOverview,
} from "@/api/project_api";
import { getOverviewInfo, getTaskOverview } from "@/api/project_api";
import { useStores } from "@/store/index";
import NoProject from "@/components/BusinessComponents/NoProject";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import Loading from "@/views/Loading";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import TaskCard from './TaskCard'
import TaskCard from "./TaskCard";
import projectImg from "@/assets/project/projectIconSmall.svg";
import noFile from "@/assets/project/noFile.svg";
import style from "./index.module.css";
const ProjectOverview = observer(() => {
const { currentProjectStore } = useStores();
// 概览基本信息
const [overviewInfo, setOverviewInfo] = useState<any>({});
// 任务概览列表
const [taskList, setTaskList] = useState([])
const [jobName, setJobName] = useState('')
const [page, setPage] = useState(0)
const [size, setSize] = useState(999)
// 选择近7天or近15天or近30天
const [day, setDay] = useState("7");
// 获取概览基本信息
const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
onSuccess: (result: any) => {
setOverviewInfo(result.data);
},
});
// 获取任务概览
const { run: getTaskOverviewList } = useMyRequest(getTaskOverview, {
onSuccess: (result: any) => {
setTaskList(result.data.content);
},
});
useEffect(() => {
// 切项目时重置为初始7
setDay("7");
if (currentProjectStore.currentProjectInfo.id) {
getOverview({
id: currentProjectStore.currentProjectInfo.id as string,
});
}
}, [currentProjectStore.currentProjectInfo.id, getOverview]);
const { currentProjectStore } = useStores();
// 概览基本信息
const [overviewInfo, setOverviewInfo] = useState<any>({});
// 任务概览列表
const [taskList, setTaskList] = useState([]);
const [jobName, setJobName] = useState("");
const [page, setPage] = useState(0);
const [size, setSize] = useState(999);
// 选择近7天or近15天or近30天
const [day, setDay] = useState("7");
// 获取概览基本信息
const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
onSuccess: (result: any) => {
setOverviewInfo(result.data);
},
});
// 获取任务概览
const { run: getTaskOverviewList } = useMyRequest(getTaskOverview, {
onSuccess: (result: any) => {
setTaskList(result.data.content);
},
});
useEffect(() => {
if (currentProjectStore.currentProjectInfo.id) {
getTaskOverviewList({
projectId: currentProjectStore.currentProjectInfo.id as string,
jobName: jobName,
day: Number(day),
page: page,
size: size,
});
}
}, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
useEffect(() => {
// 切项目时重置为初始7
setDay("7");
if (currentProjectStore.currentProjectInfo.id) {
getOverview({
id: currentProjectStore.currentProjectInfo.id as string,
});
}
}, [currentProjectStore.currentProjectInfo.id, getOverview]);
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
setJobName(e.target.value);
}
}
useEffect(() => {
if (currentProjectStore.currentProjectInfo.id) {
getTaskOverviewList({
projectId: currentProjectStore.currentProjectInfo.id as string,
jobName: jobName,
day: Number(day),
page: page,
size: size,
});
}
}, [
currentProjectStore.currentProjectInfo.id,
getTaskOverviewList,
day,
jobName,
]);
const handleKeyWordChangeBlur = (e: any) => {
setJobName(e.target.value);
}
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
setJobName(e.target.value);
}
};
const storageUnitFromB = (b: number) => {
if (b <= 0) {
return { data: '0.00', unit: 'KB' };
} else if (b < 1024 * 1024) {
return { data: (b / 1024).toFixed(2), unit: 'KB' };
} else if (b < 1024 * 1024 * 1024) {
return { data: (b / (1024 * 1024)).toFixed(2), unit: 'MB' };
} else if (b < 1024 * 1024 * 1024 * 1024) {
return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: 'G' };
} else {
return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: 'T' };
}
};
const handleKeyWordChangeBlur = (e: any) => {
setJobName(e.target.value);
};
if (currentProjectStore.currentProjectInfo.name) {
if (loading) {
return (
<div className={style.loadingBox}>
<Loading />
</div>
);
} else {
return (
<>
<div className={style.topFixed}>
<div className={style.basicInformation}>
<div>
<div className={style.titleBox}>
<img src={projectImg} alt="项目logo" style={{ width: 30, height: 30 }} />
<span className={style.projectName}>
{currentProjectStore.currentProjectInfo.name}
</span>
</div>
<div className={style.otherInformation}>
<div className={style.otherInformationBox}><span>角色：</span><span className={style.informationcolor}>{overviewInfo.projectRoleExhibit}</span></div>
<div className={style.otherInformationBox}><span>计算区：</span><span className={style.informationcolor}>{overviewInfo.zoneIdExhibit}</span></div>
<div className={style.otherInformationBox}><span>创建日期：</span><span className={style.informationcolor}>{moment(overviewInfo.createdAt).format('yyyy-MM-DD')}</span></div>
</div>
</div>
<div className={style.basicInformationRight}>
<div>
<div className={style.otherInformationBoxRight}>项目总消费</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBoxRight}>项目剩余预算</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBoxRight} style={{ marginRight: '20px' }}>项目存储大小</div>
<div>
<span className={style.numberDisplay}>{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).data : ''}</span>
{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).unit : ''}
</div>
</div>
</div>
</div>
<div className={style.searchBox}>
<div className={style.searchLineLeft}>
<div className={style.taskOverview}>任务概览</div>
<RadioGroupOfButtonStyle
value={day}
radioOptions={[
{ value: "7", label: "近7天" },
{ value: "15", label: "近15天" },
{ value: "30", label: "近30天" },
]}
handleRadio={setDay}
></RadioGroupOfButtonStyle>
</div>
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
onBlur={handleKeyWordChangeBlur}
sx={{ width: 340 }}
/>
</div>
</div>
<div className={style.taskDisplay}>
{/* 任务列表为空展示 */}
{taskList.length === 0 && (
<div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂无任务</span>
</div>
)}
{/* 任务列表卡片渲染 */}
{taskList.length > 0 && taskList.map((item: any) => {
return <TaskCard
id={item.id}
name={item.name}
creator={item.creator}
state={item.state}
completeNum={item.completeNum}
totalNum={item.totalNum}
costTime={item.costTime}
jobCost={item.jobCost}
outputs={item.outputs}
key={item.id}
/>
})}
</div>
</>
);
}
const storageUnitFromB = (b: number) => {
if (b <= 0) {
return { data: "0.00", unit: "KB" };
} else if (b < 1024 * 1024) {
return { data: (b / 1024).toFixed(2), unit: "KB" };
} else if (b < 1024 * 1024 * 1024) {
return { data: (b / (1024 * 1024)).toFixed(2), unit: "MB" };
} else if (b < 1024 * 1024 * 1024 * 1024) {
return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: "G" };
} else {
return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: "T" };
}
};
} else {
return <NoProject />;
}
})
export default ProjectOverview
\ No newline at end of file
if (currentProjectStore.currentProjectInfo.name) {
if (loading) {
return (
<div className={style.loadingBox}>
<Loading />
</div>
);
} else {
return (
<>
<div className={style.topFixed}>
<div className={style.basicInformation}>
<div>
<div className={style.titleBox}>
<img
src={projectImg}
alt="项目logo"
style={{ width: 30, height: 30 }}
/>
<span className={style.projectName}>
{currentProjectStore.currentProjectInfo.name}
</span>
</div>
<div className={style.otherInformation}>
<div className={style.otherInformationBox}>
<span>角色：</span>
<span className={style.informationcolor}>
{overviewInfo.projectRoleExhibit}
</span>
</div>
<div className={style.otherInformationBox}>
<span>计算区：</span>
<span className={style.informationcolor}>
{overviewInfo.zoneIdExhibit}
</span>
</div>
<div className={style.otherInformationBox}>
<span>创建日期：</span>
<span className={style.informationcolor}>
{moment(overviewInfo.createdAt).format("yyyy-MM-DD")}
</span>
</div>
</div>
</div>
<div className={style.basicInformationRight}>
<div>
<div className={style.otherInformationBoxRight}>
项目总消费
</div>
<div>
<span className={style.numberDisplay}>
{overviewInfo.projectCost?.toFixed(2)}
</span>
元
</div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBoxRight}>
项目剩余预算
</div>
<div>
<span className={style.numberDisplay}>
{overviewInfo.projectRemainingBudget?.toFixed(2)}
</span>
元
</div>
</div>
<div className={style.verticalLine}></div>
<div>
<div
className={style.otherInformationBoxRight}
style={{ marginRight: "20px" }}
>
项目存储大小
</div>
<div>
<span className={style.numberDisplay}>
{overviewInfo.projectStorage !== undefined
? storageUnitFromB(overviewInfo.projectStorage).data
: ""}
</span>
{overviewInfo.projectStorage !== undefined
? storageUnitFromB(overviewInfo.projectStorage).unit
: ""}
</div>
</div>
</div>
</div>
<div className={style.searchBox}>
<div className={style.searchLineLeft}>
<div className={style.taskOverview}>任务概览</div>
<RadioGroupOfButtonStyle
value={day}
radioOptions={[
{ value: "7", label: "近7天" },
{ value: "15", label: "近15天" },
{ value: "30", label: "近30天" },
]}
handleRadio={setDay}
></RadioGroupOfButtonStyle>
</div>
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
onBlur={handleKeyWordChangeBlur}
sx={{ width: 340 }}
/>
</div>
</div>
<div className={style.taskDisplay}>
{/* 任务列表为空展示 */}
{taskList.length === 0 && (
<div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂无任务</span>
</div>
)}
{/* 任务列表卡片渲染 */}
{taskList.length > 0 &&
taskList.map((item: any) => {
return (
<TaskCard
id={item.id}
name={item.name}
creator={item.creator}
state={item.state}
completeNum={item.completeNum}
totalNum={item.totalNum}
costTime={item.costTime}
jobCost={item.jobCost}
outputs={item.outputs}
key={item.id}
/>
);
})}
</div>
</>
);
}
} else {
return <NoProject />;
}
});
export default ProjectOverview;
src/views/Project/components/ProjectListPopper/index.module.css
View file @ a0bd3079
......@@ -2,14 +2,6 @@
width: calc(100vw - 220px);
height: calc(100vh - 57px);
background-color: rgba(0, 0, 0, 0.5);
/* width: 260px;
height: calc(100vh - 57px); */
/* width: 260px;
height: calc(100vh - 57px);
background-color: #fff;
border-right: 1px solid #ebedf0;
display: flex;
flex-direction: column; */
}
.mainBox {
......@@ -25,10 +17,11 @@
.searchBox {
box-sizing: border-box;
height: 56px;
padding: 17px;
padding: 12px 8px 12px 24px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.searchButton {
width: 22px;
......@@ -48,8 +41,11 @@
}
.add {
padding: 0 15px;
width: 22px;
height: 22px;
width: 32px;
height: 32px;
}
.add:hover {
border-radius: 4px;
}
.addIcon {
color: #1e2633;
......@@ -96,13 +92,14 @@
overflow: hidden;
}
.projectOwnerTime {
font-size: 12px;
display: flex;
justify-content: space-between;
}
.projectOwner {
font-size: 12px;
color: #565c66;
line-height: 20px;
font-size: 14px;
margin-right: 32px;
max-width: 60px;
white-space: nowrap;
......@@ -113,5 +110,5 @@
.projectTime {
color: #8a9099;
line-height: 20px;
font-size: 14px;
font-size: 12px;
}
src/views/Project/components/ProjectListPopper/index.tsx
View file @ a0bd3079
......@@ -14,8 +14,8 @@ import AddIcon from "@mui/icons-material/Add";
import classNames from "classnames";
import { useStores } from "@/store/index";
import moment from "moment";
import React, { useMemo, useState } from "react";
import { useClickAway } from 'ahooks';
import React, { useMemo, useState } from "react";
import { useClickAway } from "ahooks";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
......@@ -31,26 +31,52 @@ const ProjectListPopper = observer((props: any) => {
setName(e.target.value);
};
const getPower = (projectRole: string) => {
if (projectRole === "VIEWER") {
return "查看者";
} else if (projectRole === "USER") {
return "研究员";
} else if (projectRole === "MANAGER") {
return "管理员";
} else if (projectRole === "OWNER") {
return "所有者";
} else {
return "";
}
};
const list = useMemo(() => {
return projectList.filter((item: any) => {
return item.name?.indexOf(name) !== -1;
});
return projectList
.filter((item: any) => {
return item.name?.indexOf(name) !== -1;
})
.map((item) => {
return {
...item,
power: getPower(item.projectRole || ""),
};
});
}, [projectList, name]);
console.log(list);
const handleProjectBox = (e: React.SyntheticEvent) => {
setProjectListOpen(false);
};
useClickAway(
() => {
setProjectListOpen(false);
},
() => document.getElementById('use-click-projectList-mainBox'),
);
() => {
setProjectListOpen(false);
},
() => document.getElementById("use-click-projectList-mainBox")
);
return (
<div className={style.projectBox} onClick={handleProjectBox}>
<div className={style.mainBox} id="use-click-projectList-mainBox" onClick={(e: any)=>e.stopPropagation()}>
<div
className={style.mainBox}
id="use-click-projectList-mainBox"
onClick={(e: any) => e.stopPropagation()}
>
<div className={style.searchBox}>
<IconButton
type="submit"
......@@ -59,7 +85,7 @@ const ProjectListPopper = observer((props: any) => {
>
<SearchIcon
className={style.searchIcon}
style={{ color: "rgba(153, 153, 153, 1)" }}
style={{ color: "#8A9099", fontSize: "22px" }}
/>
</IconButton>
<InputBase
......@@ -68,6 +94,11 @@ const ProjectListPopper = observer((props: any) => {
inputProps={{ "aria-label": "请输入项目名称" }}
value={name}
onChange={nameChange}
sx={{
fontSize: "14px",
// color: "rgba(194, 198, 204, 1)",
height: "22px",
}}
/>
<IconButton
onClick={handleClickOpen}
......@@ -95,7 +126,7 @@ const ProjectListPopper = observer((props: any) => {
<div className={style.projectName}>{item.name}</div>
<div className={style.projectOwnerTime}>
<span className={style.projectOwner} title={item.owner}>
{item.owner}
{item.power}
</span>
<span className={style.projectTime}>
{moment(item.createdAt).format("YYYY-MM-DD")}
......
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