Skip to content

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

feat: MyPopconfirm样式优化

parent 1002e59b
Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 133 deletions
src/assets/project/information-outline.svg 0 → 100644
View file @ 1e253dc3
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>information-outline</title>
<g id="云平台视觉规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Feedback-反馈" transform="translate(-375.000000, -1027.000000)" fill="#1370FF" fill-rule="nonzero">
<g id="编组-17" transform="translate(355.000000, 1007.000000)">
<g id="information-outline" transform="translate(20.000000, 20.000000)">
<path d="M7.2,5.6 L8.8,5.6 L8.8,4 L7.2,4 M8,14.4 C4.472,14.4 1.6,11.528 1.6,8 C1.6,4.472 4.472,1.6 8,1.6 C11.528,1.6 14.4,4.472 14.4,8 C14.4,11.528 11.528,14.4 8,14.4 M8,-3.55271368e-16 C3.581722,-3.55271368e-16 -3.55271368e-16,3.581722 -3.55271368e-16,8 C-3.55271368e-16,10.1217319 0.842854723,12.1565632 2.34314575,13.6568542 C3.84343678,15.1571453 5.87826808,16 8,16 C10.1217319,16 12.1565632,15.1571453 13.6568542,13.6568542 C15.1571453,12.1565632 16,10.1217319 16,8 C16,5.87826808 15.1571453,3.84343678 13.6568542,2.34314575 C12.1565632,0.842854723 10.1217319,-3.55271368e-16 8,-3.55271368e-16 M7.2,12 L8.8,12 L8.8,7.2 L7.2,7.2 L7.2,12 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/tipsIcon.svg 0 → 100644
View file @ 1e253dc3
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 24</title>
<defs>
<filter color-interpolation-filters="auto" id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.540000 0 0 0 0 0.564000 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
<filter color-interpolation-filters="auto" id="filter-2">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.540000 0 0 0 0 0.564000 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g filter="url(#filter-1)" id="编组-24">
<g>
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g filter="url(#filter-2)" id="提示图标">
<g>
<line x1="8" y1="7.1" x2="8" y2="11.9" id="路径-7" stroke="#979797" stroke-width="1.6"></line>
<rect id="矩形" stroke="#979797" fill="#D8D8D8" x="7.75" y="4.6" width="1" height="1"></rect>
<circle id="椭圆形" stroke="#8A9099" stroke-width="1.5" cx="8" cy="8" r="7.25"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/mui/MyPopconfirm.tsx
View file @ 1e253dc3
...@@ -2,6 +2,7 @@ import * as React from "react"; ...@@ -2,6 +2,7 @@ import * as React from "react";
import { ReactNode } from "react"; import { ReactNode } from "react";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import ButtonComponent from "./Button"; import ButtonComponent from "./Button";
import tipsIcon from "@/assets/project/information-outline.svg";
import Popper from "@mui/material/Popper"; import Popper from "@mui/material/Popper";
type IMyPopconfirmProps = { type IMyPopconfirmProps = {
...@@ -56,27 +57,35 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => { ...@@ -56,27 +57,35 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
sx={{ sx={{
zIndex: 2000, zIndex: 2000,
bgcolor: "#fff", bgcolor: "#fff",
width: "200px", minWidth: "200px",
borderRadius: "2px", borderRadius: "2px",
padding: "16px 16px 8px", padding: "20px 16px",
boxShadow: boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
"0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d",
}} }}
> >
<Box sx={{ marginBottom: "8px" }}>{title}</Box> {/* "0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d", */}
<Box sx={{ marginBottom: "16px" }}>
<img
style={{ marginRight: "12px", position: "relative", top: "3px" }}
src={tipsIcon}
alt=""
/>
{title}
</Box>
<Box sx={{ display: "flex", justifyContent: "flex-end" }}> <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
{showCancel && ( {showCancel && (
<ButtonComponent <ButtonComponent
text={cancelText} text={cancelText}
variant="text" // variant="text"
size="small" size="small"
color="secondary" color="inherit"
click={handleCancel} click={handleCancel}
style={{ marginRight: "12px" }}
></ButtonComponent> ></ButtonComponent>
)} )}
<ButtonComponent <ButtonComponent
text={okText} text={okText}
variant="text" // variant="text"
size="small" size="small"
click={handleOk} click={handleOk}
></ButtonComponent> ></ButtonComponent>
......
src/views/Project/ProjectJobDetail/index.tsx
View file @ 1e253dc3
...@@ -22,6 +22,7 @@ import jobFail from "@/assets/project/jobFail.svg"; ...@@ -22,6 +22,7 @@ import jobFail from "@/assets/project/jobFail.svg";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { getDataFind } from "@/api/project_api";
import classNames from "classnames"; import classNames from "classnames";
import styles from "./index.module.css"; import styles from "./index.module.css";
...@@ -79,6 +80,59 @@ const ProjectSubmitWork = observer(() => { ...@@ -79,6 +80,59 @@ const ProjectSubmitWork = observer(() => {
}, },
}); });
const goToProjectData = (path: string) => {
navigate(`/product/cadd/projectData`, {
state: { pathName: "path" },
});
};
// const outputs = useMemo(() => {
// if (workFlowJobInfo?.outputs) {
// let result = Object.keys(workFlowJobInfo?.outputs);
// let arr = result.map((item) => {
// let type = "file";
// if (workFlowJobInfo?.outputs[item].indexOf("dataset") !== -1) {
// type = "dataset";
// }
// return {
// name: item,
// type,
// path: workFlowJobInfo?.outputs[item],
// };
// });
// arr.forEach(async (item) => {
// if (item.type === "dataset") {
// await getDataSetSize(item);
// } else {
// await getFileSize(item);
// }
// });
// } else {
// return [];
// }
// }, [workFlowJobInfo]);
// const getDataSetSize = async (item: any) => {
// const res = await getDataFind({
// projectId: projectId as string,
// path: item.path,
// });
// item.size = res.data[0].size;
// };
// const getFileSize = (item: any) => {
// CloudEController.JobOutFileList(
// item.path,
// fileToken as string,
// projectId as string,
// false
// )?.then((res) => {
// if (Array.isArray(res.data)) {
// item.size = res.data[0].size;
// }
// });
// };
const handleBatch = (id: string) => { const handleBatch = (id: string) => {
setActivePatchId(id); setActivePatchId(id);
if (id) { if (id) {
...@@ -153,8 +207,12 @@ const ProjectSubmitWork = observer(() => { ...@@ -153,8 +207,12 @@ const ProjectSubmitWork = observer(() => {
{!activePatchId && ( {!activePatchId && (
<div className={styles.taskInfo}> <div className={styles.taskInfo}>
<div className={styles.title}>任务结果</div> <div className={styles.title}>任务结果</div>
<div className={styles.taskResults}>任务结果</div> {workFlowJobInfo?.outputs && (
<div className={styles.notResults}>暂无结果文件</div> <div className={styles.taskResults}>任务结果</div>
)}
{!workFlowJobInfo?.outputs && (
<div className={styles.notResults}>暂无结果文件</div>
)}
<div className={styles.title}>任务信息</div> <div className={styles.title}>任务信息</div>
<div className={styles.taskInfoLi}> <div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务名称</div> <div className={styles.taskInfoParams}>任务名称</div>
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css
View file @ 1e253dc3
...@@ -39,6 +39,12 @@ ...@@ -39,6 +39,12 @@
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
margin-left: 12px; margin-left: 12px;
} }
.taskDescIcon {
margin-left: 8px;
}
.flowDescIcon {
margin-left: 8px;
}
.formItems { .formItems {
padding: 20px 44px 40px 44px; padding: 20px 44px 40px 44px;
} }
...@@ -66,15 +72,15 @@ ...@@ -66,15 +72,15 @@
padding: 24px 44px 40px 44px; padding: 24px 44px 40px 44px;
} }
.flowTitle { .flowTitle {
/* line-height: 22px; */
line-height: 16px; line-height: 16px;
/* margin-bottom: 24px; */
margin: 3px 0 27px; margin: 3px 0 27px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
border-left: 3px solid rgba(19, 112, 255, 1); border-left: 3px solid rgba(19, 112, 255, 1);
padding-left: 3px; padding-left: 3px;
display: flex;
align-items: center;
} }
.parameter { .parameter {
margin-bottom: 20px; margin-bottom: 20px;
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 1e253dc3
...@@ -13,6 +13,7 @@ import _ from "lodash"; ...@@ -13,6 +13,7 @@ import _ from "lodash";
import { getCheckResult } from "../util"; import { getCheckResult } from "../util";
import fileSelectIcon from "@/assets/project/fileSelect.svg"; import fileSelectIcon from "@/assets/project/fileSelect.svg";
import questionMark from "@/assets/project/questionMark.svg"; import questionMark from "@/assets/project/questionMark.svg";
import tipsIcon from "@/assets/project/tipsIcon.svg";
import jobSueIcon from "@/assets/project/jobSue.svg"; import jobSueIcon from "@/assets/project/jobSue.svg";
import { IParameter } from "../interface"; import { IParameter } from "../interface";
...@@ -417,13 +418,29 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -417,13 +418,29 @@ const ConfigForm = (props: ConfigFormProps) => {
alt="" alt=""
/> />
<span className={styles.backgroundTitleText}>{task.title}</span> <span className={styles.backgroundTitleText}>{task.title}</span>
{task.description && (
<Tooltip title={task.description} placement="top">
<img className={styles.taskDescIcon} src={tipsIcon} alt="" />
</Tooltip>
)}
</div> </div>
<div className={styles.taskConfigBox}> <div className={styles.taskConfigBox}>
{randerParameters(task.parameters, task.id)} {randerParameters(task.parameters, task.id)}
{task.flows.map((flow) => { {task.flows.map((flow) => {
return ( return (
<div className={styles.flowConfigBox} key={flow.id}> <div className={styles.flowConfigBox} key={flow.id}>
<div className={styles.flowTitle}>{flow.title}</div> <div className={styles.flowTitle}>
{flow.title}
{flow.description && (
<Tooltip title={flow.description} placement="top">
<img
className={styles.flowDescIcon}
src={tipsIcon}
alt=""
/>
</Tooltip>
)}
</div>
{randerParameters(flow.parameters, flow.id)} {randerParameters(flow.parameters, flow.id)}
</div> </div>
); );
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 1e253dc3
...@@ -53,9 +53,13 @@ const ProjectSubmitWork = () => { ...@@ -53,9 +53,13 @@ const ProjectSubmitWork = () => {
/** 获取模版数据 */ /** 获取模版数据 */
const { run } = useMyRequest(fetchTemplateConfigInfo, { const { run } = useMyRequest(fetchTemplateConfigInfo, {
onSuccess: (res: IResponse<ITemplateConfig>) => { onSuccess: (res: IResponse<ITemplateConfig>) => {
// setTemplateConfigInfo(templateConfigJson as ITemplateConfig);
setTemplateConfigInfo(res.data); setTemplateConfigInfo(res.data);
configFormRef.current.setInitName(res.data.title); configFormRef.current.setInitName(res.data.title);
}, },
onError: () => {
// setTemplateConfigInfo(templateConfigJson as ITemplateConfig);
},
}); });
const { run: submitWorkFlowRun } = useMyRequest(submitWorkFlow, { const { run: submitWorkFlowRun } = useMyRequest(submitWorkFlow, {
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 1e253dc3
...@@ -29,7 +29,7 @@ export interface IParameter { ...@@ -29,7 +29,7 @@ export interface IParameter {
helperText?: string; helperText?: string;
} }
export type IExecutionStatus = 'Pending' | 'Running' | 'Done' | 'Failed' export type IExecutionStatus = "Pending" | "Running" | "Done" | "Failed";
export interface ITask { export interface ITask {
id: string; id: string;
...@@ -44,7 +44,7 @@ export interface ITask { ...@@ -44,7 +44,7 @@ export interface ITask {
parameters: Array<IParameter>; parameters: Array<IParameter>;
edges: Array<IEdge>; edges: Array<IEdge>;
isCheck?: boolean; isCheck?: boolean;
executionStatus?: IExecutionStatus executionStatus?: IExecutionStatus;
} }
export interface ITemplateConfig { export interface ITemplateConfig {
...@@ -120,6 +120,7 @@ export interface ITaskInfo extends ITemplateConfig { ...@@ -120,6 +120,7 @@ export interface ITaskInfo extends ITemplateConfig {
createTime: string; createTime: string;
costTime: string; costTime: string;
logPath: string; logPath: string;
outputs?: any;
} }
type IState = "SUCCEEDED" | "RUNNING" | "ABORTED" | "FAILED"; type IState = "SUCCEEDED" | "RUNNING" | "ABORTED" | "FAILED";
src/views/Project/ProjectSubmitWork/mock.ts
View file @ 1e253dc3
import { IEdge } from "./interface";
export const templateConfigJson = { export const templateConfigJson = {
title: "slurm backend demo", title: "slurm backend demo",
version: "1.0.0", version: "1.0.0",
...@@ -8,6 +9,7 @@ export const templateConfigJson = { ...@@ -8,6 +9,7 @@ export const templateConfigJson = {
tags: ["Docking", "Gromax"], tags: ["Docking", "Gromax"],
source: "BASE64_ENCODED_WDL/CWL", source: "BASE64_ENCODED_WDL/CWL",
productId: "CADD", productId: "CADD",
id: "123",
tasks: [ tasks: [
{ {
id: "批式算子ID1", id: "批式算子ID1",
...@@ -18,11 +20,14 @@ export const templateConfigJson = { ...@@ -18,11 +20,14 @@ export const templateConfigJson = {
y: 0, y: 0,
}, },
type: "BATCH", type: "BATCH",
// parameters: [],
parameters: [ parameters: [
{ {
hidden: false, hidden: false,
name: "in", name: "in",
required: true, required: true,
classType: "input",
classTypeName: "input",
// domType: "input", // domType: "input",
domType: "select", domType: "select",
// domType: "multipleselect", // domType: "multipleselect",
...@@ -34,148 +39,116 @@ export const templateConfigJson = { ...@@ -34,148 +39,116 @@ export const templateConfigJson = {
description: "输入一段字符串", description: "输入一段字符串",
validators: [ validators: [
{ {
regex: '^[0-9]*$', regex: "^[0-9]*$",
message: '只能输入数字' message: "只能输入数字",
} },
], ],
choices: [ choices: [
{ {
key: '1', key: "1",
value: 'a' value: "a",
}, },
{ {
key: '2', key: "2",
value: '2' value: "2",
}, },
{ {
key: '3', key: "3",
value: '3' value: "3",
} },
], ],
language: '1', language: "1",
languageVersion: '1', languageVersion: "1",
tags:['1'], tags: ["1"],
source:'1', source: "1",
productId:'1', productId: "1",
tasks: [{ tasks: [
id: 'id', {
title: 'title', id: "id",
description: 'description', title: "title",
position: { description: "description",
x: 100, position: {
y: 200 x: 100,
y: 200,
},
type: "BATCH",
parentNode: "1",
parameters: [],
edges: [],
}, },
type: 'BATCH', ],
parentNode: '1',
parameters: [],
edges: []
}]
}, },
// {
// hidden: true,
// name: "out",
// required: true,
// domType: "File",
// dataType: "stringParameter",
// value: "/home/cloudam/task_a.out",
// description: "task_A的输出",
// validators: "",
// choices: [],
// },
], ],
edges: [], edges: [] as Array<IEdge>,
}, },
// { // {
// id: "流式算子ID1", // id: "批式算子ID1",
// title: "task_B", // title: "task_A",
// description: "这是task_B", // description: "这是task_A",
// position: { // position: {
// x: 100, // x: 0,
// y: 50, // y: 0,
// }, // },
// type: "batch", // type: "FLOW",
// parameters: [ // parameters: [
// { // {
// hidden: true,
// name: "in",
// required: true,
// domType: "pathSelect",
// // pathSelect-路径选择器 datasetSelect-数据集选择器 fileSelect-文件选择器 input-输入框 select-单选下拉框 multipleSelect-多选下拉框 radio-单选组 checkbox-多选组
// dataType: "stringParameter",
// value: "task_A.out",
// description: "这是task_B的输入",
// validators: "",
// choices: [],
// },
// {
// hidden: false, // hidden: false,
// name: "sb",
// required: false,
// domType: "input",
// // pathSelect-路径选择器 datasetSelect-数据集选择器 fileSelect-文件选择器 input-输入框 select-单选下拉框 multipleSelect-多选下拉框 radio-单选组 checkbox-多选组
// dataType: "stringParameter",
// value: "",
// description: "这是task_B的输入",
// validators: [],
// choices: [],
// },
// ],
// edges: [
// {
// id: "10001",
// source: "流式算子ID1",
// sourceHandle: "流式算子1出口A",
// target: "流式算子ID2",
// targetHandle: "流式算子2入口A",
// lable: "",
// },
// ],
// },
// {
// id: "流式算子ID2",
// title: "task_C",
// description: "这是task_C",
// position: {
// x: 100,
// y: 100,
// },
// type: "batch",
// parameters: [
// {
// hidden: true,
// name: "in", // name: "in",
// required: true, // required: true,
// domType: "pathSelect", // classType: "input",
// // pathSelect-路径选择器 datasetSelect-数据集选择器 fileSelect-文件选择器 input-输入框 select-单选下拉框 multipleSelect-多选下拉框 radio-单选组 checkbox-多选组 // classTypeName: "input",
// dataType: "stringParameter", // // domType: "input",
// value: "task_A.out", // domType: "select",
// description: "这是task_C的输入", // // domType: "multipleselect",
// validators: "", // // domType: "radio",
// choices: [], // // domType: "checkbox",
// },
// {
// hidden: false,
// name: "sc",
// required: false,
// domType: "input",
// // pathSelect-路径选择器 datasetSelect-数据集选择器 fileSelect-文件选择器 input-输入框 select-单选下拉框 multipleSelect-多选下拉框 radio-单选组 checkbox-多选组
// dataType: "stringParameter", // dataType: "stringParameter",
// value: "", // value: "",
// description: "这是task_C的输入", // // value: [],
// validators: [], // description: "输入一段字符串",
// choices: [], // validators: [
// }, // {
// ], // regex: "^[0-9]*$",
// edges: [ // message: "只能输入数字",
// { // },
// id: "10002", // ],
// source: "流式算子ID2", // choices: [
// sourceHandle: "流式算子1出口A", // {
// target: "流式算子ID2", // key: "1",
// targetHandle: "流式算子2入口A", // value: "a",
// lable: "", // },
// {
// key: "2",
// value: "2",
// },
// {
// key: "3",
// value: "3",
// },
// ],
// language: "1",
// languageVersion: "1",
// tags: ["1"],
// source: "1",
// productId: "1",
// tasks: [
// {
// id: "id",
// title: "title",
// description: "description",
// position: {
// x: 100,
// y: 200,
// },
// type: "BATCH",
// parentNode: "1",
// parameters: [],
// edges: [],
// },
// ],
// }, // },
// ], // ],
// edges: [] as Array<IEdge>,
// }, // },
], ],
}; };
......
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