Skip to content

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

feat:SearchInput组件封装

parent a96ed9fe
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 92 deletions
src/components/BusinessComponents/SearchInput/index.tsx 0 → 100644
View file @ 54417ef3
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/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ 54417ef3
...@@ -45,7 +45,7 @@ const TaskCard = (props: TaskCardProps) => { ...@@ -45,7 +45,7 @@ const TaskCard = (props: TaskCardProps) => {
return []; return [];
} }
}, [outputs]) }, [outputs])
// 结果跳转 // 结果文件跳转
const goToProjectData = (path: string) => { const goToProjectData = (path: string) => {
const lastIndex = path.lastIndexOf("/"); const lastIndex = path.lastIndexOf("/");
if (lastIndex !== -1) { if (lastIndex !== -1) {
...@@ -153,7 +153,6 @@ const TaskCard = (props: TaskCardProps) => { ...@@ -153,7 +153,6 @@ const TaskCard = (props: TaskCardProps) => {
<div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div> <div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
</div> </div>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/> <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/>
{/* <MyProgress color="info" value={80}/> */}
</div> </div>
<div className={style.bottomLine}> <div className={style.bottomLine}>
<img alt="" src={runTime} /> <img alt="" src={runTime} />
......
src/views/Project/ProjectOverview/index.module.css
View file @ 54417ef3
...@@ -86,20 +86,28 @@ ...@@ -86,20 +86,28 @@
min-height: calc(100vh - 291px); min-height: calc(100vh - 291px);
} }
.noDataBox{ .noDataBox {
position: absolute; position: absolute;
top: 50%; top: 50%;
left:50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.noDataText { .noDataText {
margin-top: 8px; margin-top: 8px;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: #8a9099; 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 @ 54417ef3
...@@ -9,16 +9,17 @@ import { ...@@ -9,16 +9,17 @@ import {
getTaskOverview, getTaskOverview,
} from "@/api/project_api"; } from "@/api/project_api";
import { useStores } from "@/store/index"; 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 NoProject from "@/components/BusinessComponents/NoProject";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle"; 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 projectImg from "@/assets/project/projectIconSmall.svg";
import noFile from "@/assets/project/noFile.svg"; import noFile from "@/assets/project/noFile.svg";
import style from "./index.module.css"; import style from "./index.module.css";
const ProjectOverview = observer(() => { const ProjectOverview = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
// 概览基本信息 // 概览基本信息
...@@ -27,11 +28,11 @@ const ProjectOverview = observer(() => { ...@@ -27,11 +28,11 @@ const ProjectOverview = observer(() => {
const [taskList, setTaskList] = useState([]) const [taskList, setTaskList] = useState([])
const [jobName, setJobName] = useState('') const [jobName, setJobName] = useState('')
const [page, setPage] = useState(0) const [page, setPage] = useState(0)
const [size, setSize] = useState(10) const [size, setSize] = useState(999)
// 选择近7天or近15天or近30天 // 选择近7天or近15天or近30天
const [day, setDay] = useState("7"); const [day, setDay] = useState("7");
// 获取概览基本信息 // 获取概览基本信息
const { run: getOverview } = useMyRequest(getOverviewInfo, { const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
onSuccess: (result: any) => { onSuccess: (result: any) => {
setOverviewInfo(result.data); setOverviewInfo(result.data);
}, },
...@@ -58,90 +59,97 @@ const ProjectOverview = observer(() => { ...@@ -58,90 +59,97 @@ const ProjectOverview = observer(() => {
}); });
}, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]); }, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
setJobName(e.target.value);
}
}
if (currentProjectStore.currentProjectInfo.name) { if (currentProjectStore.currentProjectInfo.name) {
return ( if (loading) {
<> return (
<div className={style.basicInformation}> <div className={style.loadingBox}>
<div> <Loading />
<div className={style.titleBox}> </div>
<img src={projectImg} alt="项目logo" style={{ width: 30, height: 30 }} /> );
<span className={style.projectName}> } else {
{currentProjectStore.currentProjectInfo.name} return (
</span> <>
</div> <div className={style.basicInformation}>
<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>
<div> <div>
<div className={style.otherInformationBox}>项目剩余预算</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>
<div className={style.otherInformationBox}>项目存储大小</div> <div className={style.otherInformationBox}>项目总消费</div>
<div><span className={style.numberDisplay}>{overviewInfo.projectStorage?.toFixed(2)}</span> G</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>
</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>
<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> </div>
)} <SearchInput
{/* 任务列表卡片渲染 */} onKeyUp={handleKeyWordChangeKeyUp}
{taskList.length > 0 && taskList.map((item: any) => { sx={{ width: 340 }}
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>
</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 { } else {
return <NoProject />; 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