Skip to content

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

feat:概览搜索+设置预算字段

parent aa9b7a11
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 71 deletions
src/views/Project/ProjectOverview/TaskCard/index.module.css
View file @ ed277d69
......@@ -94,28 +94,56 @@
.noResult {
position: absolute;
top:50%;
left:50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: #8A9099;
}
.resultBox{
.resultBox {
padding: 16px 24px 16px 42px;
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.result{
.result {
box-sizing: border-box;
font-size: 12px;
color: #1E2633;
cursor: pointer;
height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 8px;
}
@media screen and (max-width:1220px) {
.result {
width: 100%;
}
}
@media screen and (min-width:1220px) and (max-width:1600px) {
.result {
width: 50%;
}
}
@media screen and (min-width:1600px) {
.result {
width: 33.33%;
}
}
.result:hover{
.result:hover {
color: #1370FF;
}
.outputLeftImg{
vertical-align:middle;
.outputLeftImg {
vertical-align: middle;
margin-right: 8px;
}
\ No newline at end of file
src/views/Project/ProjectOverview/TaskCard/index.tsx
View file @ ed277d69
import { useMemo, useCallback, useEffect, useState } from "react";
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
import { useNavigate } from "react-router-dom";
import MyProgress from "@/components/mui/MyProgress";
import style from "./index.module.css";
......@@ -9,10 +9,6 @@ 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";
......@@ -29,6 +25,7 @@ type TaskCardProps = {
const TaskCard = (props: TaskCardProps) => {
const { name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
const navigate = useNavigate();
const randerOutputs = useMemo(() => {
if (outputs) {
let result = Object.keys(outputs);
......@@ -48,7 +45,23 @@ const TaskCard = (props: TaskCardProps) => {
return [];
}
}, [outputs])
console.log(randerOutputs)
// 结果跳转
const goToProjectData = (path: string) => {
const lastIndex = path.lastIndexOf("/");
if (lastIndex !== -1) {
path = path.slice(0, lastIndex + 1);
}
path = path.slice(12);
if (path) {
navigate(`/product/cadd/projectData`, {
state: { pathName: path },
});
} else {
navigate(`/product/cadd/projectData`, {
state: { pathName: "/" },
});
}
}
// 渲染状态图标
const renderStatusIcon = (data: string) => {
switch (data) {
......@@ -139,14 +152,8 @@ const TaskCard = (props: TaskCardProps) => {
<div>Progress</div>
<div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
</div>
{/* <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/> */}
<LinearProgress variant="determinate" value={(completeNum / totalNum) * 100}
sx={{
borderRadius: '3px',
height: "6px",
backgroundColor: "#F0F2F5",
}}
/>
<MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/>
{/* <MyProgress color="info" value={80}/> */}
</div>
<div className={style.bottomLine}>
<img alt="" src={runTime} />
......@@ -162,7 +169,7 @@ const TaskCard = (props: TaskCardProps) => {
{randerOutputs.length === 0 ? <div className={style.noResult}>暂无结果文件</div> :
<div className={style.resultBox}>
{randerOutputs.map((item, index) => {
return <div key={index} className={style.result}>
return <div key={index} className={style.result} onClick={() => goToProjectData(item.path)}>
<img
className={style.outputLeftImg}
src={
......
src/views/Project/ProjectOverview/index.module.css
View file @ ed277d69
......@@ -79,10 +79,11 @@
.taskDisplay {
position: relative;
margin: 20px 24px;
padding-bottom: 16px;
overflow: hidden;
background: #F7F8FA;
border-radius: 8px;
min-height: calc(100vh - 275px);
min-height: calc(100vh - 291px);
}
.noDataBox{
......
src/views/Project/ProjectOverview/index.tsx
View file @ ed277d69
import React, { useState, useCallback, useEffect, useMemo } from "react";
import { observer } from "mobx-react-lite";
import _ from "lodash";
import moment from "moment";
import useMyRequest from "@/hooks/useMyRequest";
import {
......@@ -7,13 +9,13 @@ import {
getTaskOverview,
} from "@/api/project_api";
import { useStores } from "@/store/index";
import { InputBase, IconButton } from "@mui/material";
import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search";
import NoProject from "@/components/BusinessComponents/NoProject";
import projectImg from "@/assets/project/projectIconSmall.svg";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import TaskCard from './TaskCard'
import projectImg from "@/assets/project/projectIconSmall.svg";
import noFile from "@/assets/project/noFile.svg";
import style from "./index.module.css";
......@@ -56,21 +58,6 @@ const ProjectOverview = observer(() => {
});
}, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
// 搜索值改变
const handleJobNameChange = (e: any) => {
if (e.target.value.length > 30) {
return;
}
setJobName(e.target.value);
};
// 按回车搜索
const handleJobNameChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
}
};
if (currentProjectStore.currentProjectInfo.name) {
return (
<>
......@@ -83,9 +70,9 @@ const ProjectOverview = observer(() => {
</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 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}>
......@@ -118,27 +105,17 @@ const ProjectOverview = observer(() => {
handleRadio={setDay}
></RadioGroupOfButtonStyle>
</div>
<div className={style.projectDataSearch}>
<InputBase
placeholder="输入关键词搜索"
inputProps={{ "aria-label": "输入关键词搜索" }}
value={jobName}
onChange={handleJobNameChange}
style={{ width: "280px", fontSize: "14px" }}
onKeyUp={handleJobNameChangeKeyUp}
/>
<IconButton
type="submit"
aria-label="search"
size="small"
style={{ padding: "4px" }}
// onClick={handleRefresh}
>
<SearchIcon
style={{ color: "#999" }}
/>
</IconButton>
</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}>
{/* 任务列表为空展示 */}
......
src/views/Project/ProjectSetting/BaseInfo/index.module.css
View file @ ed277d69
......@@ -40,6 +40,7 @@
line-height: 22px;
height: 82px;
padding: 7px 12px;
resize: none;
}
.projectInfoSelect {
width: 560px;
......
src/views/Project/ProjectSetting/BaseInfo/index.tsx
View file @ ed277d69
......@@ -33,6 +33,7 @@ import {
setFileServerEndPointLocalStorage,
getFiletokenAccordingToId,
} from "@/views/Project/project";
import MyInput from "@/components/mui/MyInput"
type zoneIdOption = {
id: string;
......@@ -48,6 +49,10 @@ const BaseInfo = observer(() => {
error: false,
help: "",
});
const [budgetCheck, setBudgetCheck] = useState({
error: false,
help: "",
});
const currentUserName = JSON.parse(
localStorage.getItem("userInfo") || "{}"
).name;
......@@ -69,7 +74,7 @@ const BaseInfo = observer(() => {
}, [currentUserName, projectInfo]);
const { run, loading } = useMyRequest(getProject, {
onSuccess: (result: any) => {
setProjectInfo(result.data);
setProjectInfo({ ...result.data, projectBudget: result.data.projectBudget.toFixed(2) });
},
});
useEffect(() => {
......@@ -169,7 +174,6 @@ const BaseInfo = observer(() => {
name: e.target.value,
});
checkName(e.target.value);
// setNameCheck
};
const descChange = (e: any) => {
......@@ -180,10 +184,40 @@ const BaseInfo = observer(() => {
};
const budgetChange = (e: any) => {
// console.log(e.target.value)
let inputValue = e.target.value.replace('.', '')
if (inputValue.indexOf('.') !== -1) {
setBudgetCheck({
error: true,
help: "格式错误，请输入正确的金额，可精确至分（两位小数）",
});
return
}
if (isNaN(Number(inputValue))) {
setBudgetCheck({
error: true,
help: "格式错误，请输入正确的金额，可精确至分（两位小数）",
});
return
} else {
setProjectInfo({
...projectInfo,
projectBudget: e.target.value
})
setBudgetCheck({
error: false,
help: "",
});
}
}
const budgetBlur = (e: any) => {
// console.log(e.target.value)
setProjectInfo({
...projectInfo,
projectBudget: Number(e.target.value).toFixed(2)
})
setBudgetCheck({
error: false,
help: "",
});
}
const { run: updateProjectRun, loading: updateLoading } = useMyRequest(
......@@ -277,6 +311,9 @@ const BaseInfo = observer(() => {
size="small"
sx={{
width: "560px",
'& .MuiOutlinedInput-root':{
height:'36px'
}
}}
/>
{/* <input
......@@ -333,16 +370,20 @@ const BaseInfo = observer(() => {
<div className={style.projectInfoListLiLabel}>项目预算</div>
<TextField
required
// error={nameCheck.error}
error={budgetCheck.error}
disabled={currentUserName !== projectInfo.tenantUser}
id="projectBudget"
variant="outlined"
value={projectInfo.projectBudget}
value={projectInfo.projectBudget}
onChange={budgetChange}
onBlur={budgetBlur}
// helperText={nameCheck.help}
helperText={budgetCheck.help}
size="small"
sx={{
width: "560px",
'& .MuiOutlinedInput-root':{
height:'36px'
}
}}
InputProps={{
startAdornment: <InputAdornment position="start">¥</InputAdornment>,
......
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