Skip to content

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

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

parents 3144251a 54417ef3
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 103 deletions
src/components/BusinessComponents/SearchInput/index.tsx 0 → 100644
View file @ cff4f4f8
import OutlinedInput, { OutlinedInputProps } from "@mui/material/OutlinedInput";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import SearchIcon from "@mui/icons-material/Search";
// 使用该搜索框组件时，width、height、font-size等样式属性可以在组件sx属性中覆盖掉当前组件内的样式
// 该组件默认搜索框高度为32px，宽度和容器一致，字体大小14px
// 若想自定义修改，写法：<SearchInput sx={{ width: 340 ,height: 36 ,fontSize: 12}} />
interface SearchInputProps extends OutlinedInputProps {
value?: any;
variant?: "standard" | "filled" | "outlined";
size?: "small" | "medium";
placeholder?: string;
fullWidth?: boolean; // 宽度是否和容器一致
error?: boolean;
};
const SearchInput = (props: SearchInputProps) => {
const {
size = "small",
placeholder = "输入关键词搜索",
fullWidth = true,
...other
} = props;
const theme = createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
height: "32px",
fontSize: "14px",
paddingRight: "8px",
":hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#1370ff",
},
},
},
input: {
padding: "5px 12px",
verticalAlign: "middle",
},
},
},
},
});
return (
<ThemeProvider theme={theme}>
<OutlinedInput
size={size}
placeholder={placeholder}
fullWidth={fullWidth}
endAdornment={<SearchIcon style={{ color: "#999" }} />}
{...other}
/>
</ThemeProvider>
);
}
export default SearchInput
\ No newline at end of file
src/components/mui/MyProgress.tsx
View file @ cff4f4f8
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-11 11:56:58
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-25 15:58:25
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-27 14:30:57
* @FilePath: /bkunyun/src/components/mui/MyProgress.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -58,7 +58,10 @@ const MyProgress = (props: IMyProgressProps) => {
height: "6px",
background: "#F0F2F5",
},
bar: backgroundColorInfo,
bar: {
borderRadius: 3,
...backgroundColorInfo
},
},
},
},
......
src/views/MenuLayout/index.module.css
View file @ cff4f4f8
......@@ -15,9 +15,6 @@
height: calc(100vh - 57px);
overflow: scroll;
}
.list {
/* background-color: red; */
}
.listItem {
padding: 8px 25px;
height: 38px;
......@@ -28,9 +25,7 @@
line-height: 22px;
}
.listItem:hover {
border-left: 3px solid #1370ff;
color: #1370ff;
background-color: #ebedf0;
background-color: #EEF1F5;
}
.active {
border-left: 3px solid #1370ff;
......
src/views/MenuLayout/index.tsx
View file @ cff4f4f8
......@@ -25,7 +25,7 @@ const MenuLayout = observer(() => {
<Box className={style.container}>
<Box className={style.aside}>
<CurrentProject />
<List className={style.list}>
<List>
{permissionStore.sidebarRouters.map((item, index) => {
if (item.show) {
return (
......@@ -33,7 +33,7 @@ const MenuLayout = observer(() => {
key={"sidebar" + index}
className={classnames({
[style.listItem]: true,
[style.active]: item.path === pathname,
[style.active]: `/v3${item.path}` === pathname,
})}
onClick={() => item.type === "page" && navigate(item.path)}
>
......
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ cff4f4f8
......@@ -45,7 +45,7 @@ const TaskCard = (props: TaskCardProps) => {
return [];
}
}, [outputs])
// 结果跳转
// 结果文件跳转
const goToProjectData = (path: string) => {
const lastIndex = path.lastIndexOf("/");
if (lastIndex !== -1) {
......@@ -153,7 +153,6 @@ const TaskCard = (props: TaskCardProps) => {
<div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
</div>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/>
{/* <MyProgress color="info" value={80}/> */}
</div>
<div className={style.bottomLine}>
<img alt="" src={runTime} />
......
src/views/Project/ProjectOverview/index.module.css
View file @ cff4f4f8
......@@ -86,20 +86,28 @@
min-height: calc(100vh - 291px);
}
.noDataBox{
.noDataBox {
position: absolute;
top: 50%;
left:50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
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
src/views/Project/ProjectOverview/index.tsx
View file @ cff4f4f8
......@@ -9,16 +9,17 @@ import {
getTaskOverview,
} from "@/api/project_api";
import { useStores } from "@/store/index";
import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search";
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 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();
// 概览基本信息
......@@ -27,11 +28,11 @@ const ProjectOverview = observer(() => {
const [taskList, setTaskList] = useState([])
const [jobName, setJobName] = useState('')
const [page, setPage] = useState(0)
const [size, setSize] = useState(10)
const [size, setSize] = useState(999)
// 选择近7天or近15天or近30天
const [day, setDay] = useState("7");
// 获取概览基本信息
const { run: getOverview } = useMyRequest(getOverviewInfo, {
const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
onSuccess: (result: any) => {
setOverviewInfo(result.data);
},
......@@ -58,90 +59,97 @@ const ProjectOverview = observer(() => {
});
}, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
setJobName(e.target.value);
}
}
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}>{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.otherInformationBox}>项目总消费</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
</div>
<div className={style.verticalLine}></div>
if (loading) {
return (
<div className={style.loadingBox}>
<Loading />
</div>
);
} else {
return (
<>
<div className={style.basicInformation}>
<div>
<div className={style.otherInformationBox}>项目剩余预算</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</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.verticalLine}></div>
<div>
<div className={style.otherInformationBox}>项目存储大小</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectStorage?.toFixed(2)}</span> G</div>
<div className={style.basicInformationRight}>
<div>
<div className={style.otherInformationBox}>项目总消费</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><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>
</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>
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
setJobName(e.target.value);
}, 1000)();
}}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32, fontSize: "14px" }}
endAdornment={<SearchIcon style={{ color: "#999" }} />}
/>
</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 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>
)}
{/* 任务列表卡片渲染 */}
{taskList.length > 0 && taskList.map((item: any) => {
return <TaskCard
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}
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
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
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 />;
}
......
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