Skip to content

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

bugfix:预算校验、存储展示

parent 665afd03
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 51 deletions
src/views/Project/ProjectOverview/TaskCard/index.module.css
View file @ 45c5f606
......@@ -38,6 +38,7 @@
.taskName {
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.taskStatus {
......
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ 45c5f606
......@@ -13,6 +13,7 @@ import fileIcon from "@/assets/project/fileIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
type TaskCardProps = {
id: string;
name: string;
creator: string;
state: string;
......@@ -24,7 +25,7 @@ type TaskCardProps = {
};
const TaskCard = (props: TaskCardProps) => {
const { name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
const navigate = useNavigate();
const randerOutputs = useMemo(() => {
if (outputs) {
......@@ -62,6 +63,12 @@ const TaskCard = (props: TaskCardProps) => {
});
}
}
// 跳转详情页
const gotoDetail = (id: string) => {
navigate(`/product/cadd/projectJobDetail`, {
state: { taskId: id },
});
}
// 渲染状态图标
const renderStatusIcon = (data: string) => {
switch (data) {
......@@ -140,7 +147,7 @@ const TaskCard = (props: TaskCardProps) => {
return <div className={style.cardBox}>
<div className={style.cardLeft}>
<div className={style.topLine}>
<div className={style.taskName}>{name}</div>
<div className={style.taskName} onClick={() => gotoDetail(id)}>{name}</div>
<div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
<img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
<span>{renderStatusText(state)}</span>
......@@ -152,7 +159,7 @@ const TaskCard = (props: TaskCardProps) => {
<div>Progress</div>
<div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
</div>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
</div>
<div className={style.bottomLine}>
<img alt="" src={runTime} />
......
src/views/Project/ProjectOverview/index.module.css
View file @ 45c5f606
......@@ -38,6 +38,10 @@
color: #565C66;
}
.otherInformationBoxRight{
color: #565C66;
}
.numberDisplay {
font-size: 20px;
font-weight: 600;
......@@ -48,7 +52,7 @@
.verticalLine {
height: 32px;
border: 1px solid #EBEDF0;
margin-left: 10px;
margin-left: 20px;
margin-right: 20px;
}
......
src/views/Project/ProjectOverview/index.tsx
View file @ 45c5f606
......@@ -44,19 +44,23 @@ const ProjectOverview = observer(() => {
},
});
useEffect(() => {
getOverview({
id: currentProjectStore.currentProjectInfo.id as string,
});
if (currentProjectStore.currentProjectInfo.id) {
getOverview({
id: currentProjectStore.currentProjectInfo.id as string,
});
}
}, [currentProjectStore.currentProjectInfo.id, getOverview]);
useEffect(() => {
getTaskOverviewList({
projectId: currentProjectStore.currentProjectInfo.id as string,
jobName: jobName,
day: Number(day),
page: page,
size: size,
});
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 handleKeyWordChangeKeyUp = (e: any) => {
......@@ -64,6 +68,21 @@ const ProjectOverview = observer(() => {
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' };
}
};
if (currentProjectStore.currentProjectInfo.name) {
if (loading) {
return (
......@@ -90,18 +109,21 @@ const ProjectOverview = observer(() => {
</div>
<div className={style.basicInformationRight}>
<div>
<div className={style.otherInformationBox}>项目总消费</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.otherInformationBox}>项目剩余预算</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.otherInformationBox}>项目存储大小</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectStorage?.toFixed(2)}</span> G</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>
......@@ -134,6 +156,7 @@ const ProjectOverview = observer(() => {
{/* 任务列表卡片渲染 */}
{taskList.length > 0 && taskList.map((item: any) => {
return <TaskCard
id={item.id}
name={item.name}
creator={item.creator}
state={item.state}
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ 45c5f606
......@@ -194,40 +194,47 @@ const BaseInfo = observer(() => {
});
};
const budgetChange = (e: any) => {
let inputValue = e.target.value.replace(".", "");
if (inputValue.indexOf(".") !== -1) {
setBudgetCheck({
error: true,
help: "格式错误，请输入正确的金额，可精确至分（两位小数）",
});
return;
}
if (isNaN(Number(inputValue))) {
setBudgetCheck({
error: true,
help: "格式错误，请输入正确的金额，可精确至分（两位小数）",
});
return;
const checkBudget = (budget: string, showMessage = false) => {
let help = "";
if (budget) {
if (isNaN(Number(budget)) || Number(budget) > 10000000 || Number(budget) < 0) {
help = "格式错误，请输入0~10000000之间的数值，结果最高保留两位小数。";
setBudgetCheck({
error: true,
help,
});
showMessage && message.error(help);
return false;
} else {
setBudgetCheck({
error: false,
help: "",
});
return true;
}
} else {
setProjectInfo({
...projectInfo,
projectBudget: e.target.value,
});
help = "格式错误，请输入0~10000000之间的数值，结果最高保留两位小数。";
setBudgetCheck({
error: false,
help: "",
error: true,
help,
});
showMessage && message.error(help);
return false;
}
};
const budgetBlur = (e: any) => {
}
const budgetChange = (e: any) => {
setProjectInfo({
...projectInfo,
projectBudget: Number(e.target.value).toFixed(2),
projectBudget: e.target.value,
});
setBudgetCheck({
error: false,
help: "",
checkBudget(e.target.value);
}
const budgetBlur = (e: any) => {
setProjectInfo({
...projectInfo,
projectBudget: Number(e.target.value) ? Number(e.target.value).toFixed(2) : e.target.value,
});
};
......@@ -245,7 +252,7 @@ const BaseInfo = observer(() => {
// 修改项目
const handleClickUpdate = () => {
if (checkName(projectInfo.name, true)) {
if (checkName(projectInfo.name, true) && checkBudget(projectInfo.projectBudget, true)) {
updateProjectRun({ ...projectInfo, product: "cadd" });
} else {
return;
......@@ -442,11 +449,11 @@ const BaseInfo = observer(() => {
variant="contained"
onClick={() => setDialogOpen(true)}
color="error"
// style={{
// backgroundColor: "#fff",
// color: "#FF4E4E",
// border: "1px solid #FF4E4E",
// }}
// style={{
// backgroundColor: "#fff",
// color: "#FF4E4E",
// border: "1px solid #FF4E4E",
// }}
/>
</div>
<MyDialog
......
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