Commit 682a7015 authored by jiangzijing's avatar jiangzijing

feat:初始化概览页面

parent ef48fa31
...@@ -18,6 +18,7 @@ import ProjectData from "@/views/Project/ProjectData"; ...@@ -18,6 +18,7 @@ import ProjectData from "@/views/Project/ProjectData";
import ProjectWorkbench from "@/views/Project/ProjectWorkbench"; import ProjectWorkbench from "@/views/Project/ProjectWorkbench";
import ProjectSubmitWork from "@/views/Project/ProjectSubmitWork"; import ProjectSubmitWork from "@/views/Project/ProjectSubmitWork";
import ProjectJobDetail from "@/views/Project/ProjectJobDetail"; import ProjectJobDetail from "@/views/Project/ProjectJobDetail";
import ProjectOverview from "@/views/Project/ProjectOverview";
export type route = { export type route = {
id?: string; id?: string;
...@@ -54,7 +55,8 @@ export const elements: { ...@@ -54,7 +55,8 @@ export const elements: {
ProjectData: ProjectData, ProjectData: ProjectData,
ProjectWorkbench: ProjectWorkbench, ProjectWorkbench: ProjectWorkbench,
ProjectSubmitWork: ProjectSubmitWork, ProjectSubmitWork: ProjectSubmitWork,
ProjectJobDetail: ProjectJobDetail ProjectJobDetail: ProjectJobDetail,
ProjectOverview: ProjectOverview,
}; };
export const routes: Array<route | navigate> = [ export const routes: Array<route | navigate> = [
......
.cardBox {
display: flex;
margin: 16px 16px 0;
height: 156px;
background: #FFFFFF;
box-shadow: 2px 2px 6px 0px rgba(0, 25, 57, 0.0300);
border-radius: 4px;
}
.dividingLine {
height: 156px;
border-left: 1px solid #EBEDF0;
position: relative;
}
.arrow {
position: absolute;
top: 65px;
left: -13px;
width: 26px;
height: 26px;
background-color: #fff;
border-top: 1px solid #EBEDF0;
border-right: 1px solid #EBEDF0;
transform: rotate(45deg);
}
.cardLeft {
flex: 1;
padding: 16px 24px;
}
.topLine {
display: flex;
justify-content: space-between;
}
.taskName {
font-size: 14px;
font-weight: 500;
}
.taskStatus {
display: flex;
align-items: center;
justify-content: center;
width: 78px;
height: 22px;
background: #EBF3FF;
border-radius: 2px;
font-size: 12px;
color: #1370FF;
}
.statusImg {
width: 10px;
height: 10px;
margin-right: 3px;
}
.taskCreator {
font-size: 12px;
color: #1E2633;
margin-top: 5px;
}
.taskProgress {
height: 40px;
margin: 12px 0;
}
.progressInfo {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 12px;
color: #565C66;
}
.bottomLine {
display: flex;
font-size: 12px;
color: #565C66;
}
.bottomInfo {
margin: 0 40px 0 4px;
}
.cardRight {
flex: 1;
display: flex;
position: relative;
}
.noResult {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: #8A9099;
}
\ No newline at end of file
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
import style from "./index.module.css";
import runTime from '../../../../assets/project/runTime.svg'
import jobCost from '../../../../assets/project/jobCost.svg'
import jobSue from '../../../../assets/project/jobSue.svg'
import jobFail from '../../../../assets/project/jobFail.svg'
import jobRun from '../../../../assets/project/jobRun.svg'
import jobCadence from '../../../../assets/project/jobCadence.svg'
import jobStop from '../../../../assets/project/jobStop.svg'
import jobDel from '../../../../assets/project/jobDel.svg'
import noData from '../../../../assets/project/noTemplate.svg'
import onload from '../../../../assets/project/onload.svg'
import fileIcon from "@/assets/project/fileIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
const TaskCard = () => {
return <div className={style.cardBox}>
<div className={style.cardLeft}>
<div className={style.topLine}>
<div className={style.taskName}>Docking兼分子动力学模拟</div>
<div className={style.taskStatus}>
<img src={jobRun} alt="" className={style.statusImg} />
<span>正在运行</span>
</div>
</div>
<div className={style.taskCreator}>jiangzijing</div>
<div className={style.taskProgress}>
<div className={style.progressInfo}>
<div>Progress</div>
<div>8/10</div>
</div>
<LinearProgress variant="determinate" value={80}
sx={{
borderRadius: '3px',
height: "6px",
backgroundColor: "#F0F2F5",
}}
/>
</div>
<div className={style.bottomLine}>
<img alt="" src={runTime} />
<div className={style.bottomInfo}>0小时26分钟</div>
<img alt="" src={jobCost} />
<div className={style.bottomInfo}>200.00元</div>
</div>
</div>
<div className={style.dividingLine}>
<div className={style.arrow}></div>
</div>
<div className={style.cardRight}>
{false?<div></div>:<div className={style.noResult}>暂无结果文件</div>}
</div>
</div>
}
export default TaskCard
\ No newline at end of file
.basicInformation {
display: flex;
justify-content: space-between;
margin: 28px 24px 0 24px;
padding-bottom: 20px;
border-bottom: 1px solid #F0F2F5;
}
.basicInformationRight {
display: flex;
align-items: center;
font-size: 12px;
}
.titleBox {
display: flex;
align-items: center;
}
.projectName {
margin-left: 12px;
font-size: 18px;
font-weight: 600;
}
.otherInformation {
display: flex;
font-size: 12px;
margin-top: 16px;
}
.informationcolor {
color: #8A9099;
}
.otherInformationBox {
margin-right: 24px;
color: #565C66;
}
.numberDisplay {
font-size: 20px;
font-weight: 600;
color: #1E2633;
margin-right: 8px;
}
.verticalLine {
height: 32px;
border: 1px solid #EBEDF0;
margin-left: 10px;
margin-right: 20px;
}
.searchBox {
display: flex;
justify-content: space-between;
margin: 28px 24px 0 24px;
}
.searchLineLeft {
display: flex;
align-items: center;
}
.taskOverview {
font-size: 16px;
font-weight: 500;
margin-right: 18px;
}
.projectDataSearch {
padding-left: 12px;
padding-right: 8px;
border-radius: 4px;
border: 1px solid #ebedf0;
}
.taskDisplay {
margin: 20px 24px;
overflow: hidden;
background: #F7F8FA;
border-radius: 8px;
min-height: calc(100vh - 275px);
}
\ No newline at end of file
import React, { useState, useCallback, useEffect, useMemo } from "react";
import { useStores } from "@/store/index";
import { InputBase, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import NoProject from "@/components/BusinessComponents/NoProject";
import { observer } from "mobx-react-lite";
import projectImg from "@/assets/project/projectIconSmall.svg";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import TaskCard from './TaskCard'
import style from "./index.module.css";
const ProjectOverview = observer(() => {
const { currentProjectStore } = useStores();
// 选择近7天or近15天or近30天
const [activeTab, setActiveTab] = useState("seven");
if (currentProjectStore.currentProjectInfo.name) {
return (
<>
<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}>管理员</span></div>
<div className={style.otherInformationBox}><span>计算区:</span><span className={style.informationcolor}>通用计算区</span></div>
<div className={style.otherInformationBox}><span>创建日期:</span><span className={style.informationcolor}>2022-07-07</span></div>
</div>
</div>
<div className={style.basicInformationRight}>
<div>
<div className={style.otherInformationBox}>项目总消费</div>
<div><span className={style.numberDisplay}>1,324</span></div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBox}>项目预算</div>
<div><span className={style.numberDisplay}>1,324</span></div>
</div>
<div className={style.verticalLine}></div>
<div>
<div className={style.otherInformationBox}>项目存储大小</div>
<div><span className={style.numberDisplay}>123</span> G</div>
</div>
</div>
</div>
<div className={style.searchBox}>
<div className={style.searchLineLeft}>
<div className={style.taskOverview}>任务概览</div>
<RadioGroupOfButtonStyle
value={activeTab}
radioOptions={[
{ value: "seven", label: "近7天" },
{ value: "fifteen", label: "近15天" },
{ value: "thirty", label: "近30天" },
]}
handleRadio={setActiveTab}
></RadioGroupOfButtonStyle>
</div>
<div className={style.projectDataSearch}>
<InputBase
className={style.searchInput}
placeholder="输入关键词搜索"
inputProps={{ "aria-label": "输入关键词搜索" }}
// value={keyWord}
// onChange={handleKeyWordChange}
style={{ width: "280px", fontSize: "14px" }}
// onKeyUp={handleKeyWordChangeKeyUp}
/>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
size="small"
style={{ padding: "4px" }}
// onClick={handleRefresh}
>
<SearchIcon
className={style.searchIcon}
style={{ color: "#999" }}
/>
</IconButton>
</div>
</div>
<div className={style.taskDisplay}>
<TaskCard />
<TaskCard />
</div>
</>
);
} else {
return <NoProject />;
}
})
export default ProjectOverview
\ No newline at end of file
...@@ -23,6 +23,7 @@ import InformationDisplay from "@/components/CommonComponents/InformationDisplay ...@@ -23,6 +23,7 @@ import InformationDisplay from "@/components/CommonComponents/InformationDisplay
import classnames from "classnames"; import classnames from "classnames";
import { Button, TextField } from "@mui/material"; import { Button, TextField } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton"; import LoadingButton from "@mui/lab/LoadingButton";
import InputAdornment from '@mui/material/InputAdornment';
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import Loading from "@/views/Loading"; import Loading from "@/views/Loading";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
...@@ -114,6 +115,10 @@ const BaseInfo = observer(() => { ...@@ -114,6 +115,10 @@ const BaseInfo = observer(() => {
label: "创建人:", label: "创建人:",
value: projectInfo.owner, value: projectInfo.owner,
}, },
{
label: "项目预算:",
value: "100.00",//todo改
},
{ {
label: "扣费账号:", label: "扣费账号:",
value: projectInfo.tenantUser, value: projectInfo.tenantUser,
...@@ -317,6 +322,25 @@ const BaseInfo = observer(() => { ...@@ -317,6 +322,25 @@ const BaseInfo = observer(() => {
})} })}
></input> ></input>
</div> </div>
<div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>项目预算</div>
<TextField
required
// error={nameCheck.error}
id="name"
variant="outlined"
value="100.00" //todo改
onChange={nameChange}
// helperText={nameCheck.help}
size="small"
sx={{
width: "560px",
}}
InputProps={{
startAdornment: <InputAdornment position="start">¥</InputAdornment>,
}}
/>
</div>
<div className={style.projectInfoListLi}> <div className={style.projectInfoListLi}>
<div className={style.projectInfoListLiLabel}>扣费账号</div> <div className={style.projectInfoListLiLabel}>扣费账号</div>
<input <input
......
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