feat:初始化概览页面

src/router/index.ts

@@ -18,6 +18,7 @@ import ProjectData from "@/views/Project/ProjectData";
 import ProjectWorkbench from "@/views/Project/ProjectWorkbench";
 import ProjectSubmitWork from "@/views/Project/ProjectSubmitWork";
 import ProjectJobDetail from "@/views/Project/ProjectJobDetail";
+import ProjectOverview from "@/views/Project/ProjectOverview";
 
 export type route = {
   id?: string;
@@ -54,7 +55,8 @@ export const elements: {
   ProjectData: ProjectData,
   ProjectWorkbench: ProjectWorkbench,
   ProjectSubmitWork: ProjectSubmitWork,
-  ProjectJobDetail: ProjectJobDetail
+  ProjectJobDetail: ProjectJobDetail,
+  ProjectOverview: ProjectOverview,
 };
 
 export const routes: Array<route | navigate> = [

src/views/Project/ProjectOverview/TaskCard/index.module.css

+.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

src/views/Project/ProjectOverview/TaskCard/index.tsx

+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

src/views/Project/ProjectOverview/index.module.css

+.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

src/views/Project/ProjectOverview/index.tsx

+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

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -23,6 +23,7 @@ import InformationDisplay from "@/components/CommonComponents/InformationDisplay
 import classnames from "classnames";
 import { Button, TextField } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
+import InputAdornment from '@mui/material/InputAdornment';
 import { useMessage } from "@/components/MySnackbar";
 import Loading from "@/views/Loading";
 import MyDialog from "@/components/mui/MyDialog";
@@ -114,6 +115,10 @@ const BaseInfo = observer(() => {
 				label: "创建人：",
 				value: projectInfo.owner,
 			},
+			{
+				label: "项目预算：",
+				value: "100.00",//todo改
+			},
 			{
 				label: "扣费账号：",
 				value: projectInfo.tenantUser,
@@ -317,6 +322,25 @@ const BaseInfo = observer(() => {
 						})}
 					></input>
 				</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.projectInfoListLiLabel}>扣费账号</div>
 					<input