Skip to content

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

feat:概览页面吸顶+结果文件对齐

parent 7fa0164d
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 54 deletions
src/views/Project/ProjectOverview/TaskCard/index.module.css
View file @ 385a8761
...@@ -120,6 +120,7 @@ ...@@ -120,6 +120,7 @@
.result { .result {
box-sizing: border-box; box-sizing: border-box;
font-size: 12px; font-size: 12px;
align-items: center;
color: #1e2633; color: #1e2633;
cursor: pointer; cursor: pointer;
height: 30px; height: 30px;
...@@ -152,6 +153,12 @@ ...@@ -152,6 +153,12 @@
} }
.outputLeftImg { .outputLeftImg {
vertical-align: middle; vertical-align: top;
margin-right: 8px; margin-right: 8px;
} }
.outputTitle{
display: inline-block;
height: 22px;
line-height: 22px;
}
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ 385a8761
...@@ -48,7 +48,7 @@ const TaskCard = (props: TaskCardProps) => { ...@@ -48,7 +48,7 @@ const TaskCard = (props: TaskCardProps) => {
}, [outputs]) }, [outputs])
// 结果文件跳转 // 结果文件跳转
const goToProjectData = (info: any) => { const goToProjectData = (info: any) => {
let { path = '' , type = '' } = info let { path = '', type = '' } = info
const lastIndex = path.lastIndexOf("/"); const lastIndex = path.lastIndexOf("/");
// /projectData // /projectData
// dataType // dataType
...@@ -87,7 +87,7 @@ const TaskCard = (props: TaskCardProps) => { ...@@ -87,7 +87,7 @@ const TaskCard = (props: TaskCardProps) => {
const renderStatusText = (data: string) => { const renderStatusText = (data: string) => {
switch (data) { switch (data) {
case "SUBMITTED": case "SUBMITTED":
return "正在启动"; return "正在启动";
case "RUNNING": case "RUNNING":
return '正在运行' return '正在运行'
case "ABORTED": case "ABORTED":
...@@ -190,7 +190,8 @@ const TaskCard = (props: TaskCardProps) => { ...@@ -190,7 +190,8 @@ const TaskCard = (props: TaskCardProps) => {
} }
alt="" alt=""
/> />
{item?.name}</div> <span className={style.outputTitle}>{item?.name}</span>
</div>
})} })}
</div> </div>
} }
......
src/views/Project/ProjectOverview/index.module.css
View file @ 385a8761
.topFixed {
position: sticky;
top: 0;
z-index: 10;
background-color: #fff;
}
.basicInformation { .basicInformation {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 24px 24px 0 24px; margin: 0 24px;
padding-bottom: 20px; padding: 20px 0;
border-bottom: 1px solid #EDEFF2; border-bottom: 1px solid #EDEFF2;
} }
...@@ -39,7 +46,7 @@ ...@@ -39,7 +46,7 @@
color: #565C66; color: #565C66;
} }
.otherInformationBoxRight{ .otherInformationBoxRight {
line-height: 22px; line-height: 22px;
margin-bottom: 4px; margin-bottom: 4px;
color: #565C66; color: #565C66;
...@@ -63,6 +70,7 @@ ...@@ -63,6 +70,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 24px 24px 0 24px; margin: 24px 24px 0 24px;
padding-bottom: 20px;
} }
.searchLineLeft { .searchLineLeft {
...@@ -85,7 +93,7 @@ ...@@ -85,7 +93,7 @@
.taskDisplay { .taskDisplay {
position: relative; position: relative;
margin: 20px 24px; margin: 0 24px 20px;
padding-bottom: 16px; padding-bottom: 16px;
overflow: hidden; overflow: hidden;
background: #F7F8FA; background: #F7F8FA;
......
src/views/Project/ProjectOverview/index.tsx
View file @ 385a8761
...@@ -72,7 +72,7 @@ const ProjectOverview = observer(() => { ...@@ -72,7 +72,7 @@ const ProjectOverview = observer(() => {
} }
} }
const handleKeyWordChangeBlur=(e:any)=>{ const handleKeyWordChangeBlur = (e: any) => {
setJobName(e.target.value); setJobName(e.target.value);
} }
...@@ -100,58 +100,60 @@ const ProjectOverview = observer(() => { ...@@ -100,58 +100,60 @@ const ProjectOverview = observer(() => {
} else { } else {
return ( return (
<> <>
<div className={style.basicInformation}> <div className={style.topFixed}>
<div> <div className={style.basicInformation}>
<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>
<div className={style.otherInformationBoxRight}>项目剩余预算</div> <div className={style.titleBox}>
<div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div> <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>
<div className={style.verticalLine}></div> <div className={style.basicInformationRight}>
<div>
<div className={style.otherInformationBoxRight} style={{ marginRight: '20px' }}>项目存储大小</div>
<div> <div>
<span className={style.numberDisplay}>{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).data : ''}</span> <div className={style.otherInformationBoxRight}>项目总消费</div>
{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).unit : ''} <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>
</div> </div>
</div> <div className={style.searchBox}>
<div className={style.searchBox}> <div className={style.searchLineLeft}>
<div className={style.searchLineLeft}> <div className={style.taskOverview}>任务概览</div>
<div className={style.taskOverview}>任务概览</div> <RadioGroupOfButtonStyle
<RadioGroupOfButtonStyle value={day}
value={day} radioOptions={[
radioOptions={[ { value: "7", label: "近7天" },
{ value: "7", label: "近7天" }, { value: "15", label: "近15天" },
{ value: "15", label: "近15天" }, { value: "30", label: "近30天" },
{ value: "30", label: "近30天" }, ]}
]} handleRadio={setDay}
handleRadio={setDay} ></RadioGroupOfButtonStyle>
></RadioGroupOfButtonStyle> </div>
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
onBlur={handleKeyWordChangeBlur}
sx={{ width: 340 }}
/>
</div> </div>
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
onBlur={handleKeyWordChangeBlur}
sx={{ width: 340 }}
/>
</div> </div>
<div className={style.taskDisplay}> <div className={style.taskDisplay}>
{/* 任务列表为空展示 */} {/* 任务列表为空展示 */}
......
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