Skip to content

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

feat: MyPopconfirm样式优化

parent 1002e59b
Show whitespace changes
Inline Side-by-side
Showing with 227 additions and 118 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";
import { ReactNode } from "react";
import Box from "@mui/material/Box";
import ButtonComponent from "./Button";
import tipsIcon from "@/assets/project/information-outline.svg";
import Popper from "@mui/material/Popper";
type IMyPopconfirmProps = {
......@@ -56,27 +57,35 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
sx={{
zIndex: 2000,
bgcolor: "#fff",
width: "200px",
minWidth: "200px",
borderRadius: "2px",
padding: "16px 16px 8px",
boxShadow:
"0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d",
padding: "20px 16px",
boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
}}
>
<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" }}>
{showCancel && (
<ButtonComponent
text={cancelText}
variant="text"
// variant="text"
size="small"
color="secondary"
color="inherit"
click={handleCancel}
style={{ marginRight: "12px" }}
></ButtonComponent>
)}
<ButtonComponent
text={okText}
variant="text"
// variant="text"
size="small"
click={handleOk}
></ButtonComponent>
......
src/views/Project/ProjectJobDetail/index.tsx
View file @ 1e253dc3
......@@ -22,6 +22,7 @@ import jobFail from "@/assets/project/jobFail.svg";
import { useStores } from "@/store";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import { getDataFind } from "@/api/project_api";
import classNames from "classnames";
import styles from "./index.module.css";
......@@ -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) => {
setActivePatchId(id);
if (id) {
......@@ -153,8 +207,12 @@ const ProjectSubmitWork = observer(() => {
{!activePatchId && (
<div className={styles.taskInfo}>
<div className={styles.title}>任务结果</div>
{workFlowJobInfo?.outputs && (
<div className={styles.taskResults}>任务结果</div>
)}
{!workFlowJobInfo?.outputs && (
<div className={styles.notResults}>暂无结果文件</div>
)}
<div className={styles.title}>任务信息</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务名称</div>
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css
View file @ 1e253dc3
......@@ -39,6 +39,12 @@
color: rgba(30, 38, 51, 1);
margin-left: 12px;
}
.taskDescIcon {
margin-left: 8px;
}
.flowDescIcon {
margin-left: 8px;
}
.formItems {
padding: 20px 44px 40px 44px;
}
......@@ -66,15 +72,15 @@
padding: 24px 44px 40px 44px;
}
.flowTitle {
/* line-height: 22px; */
line-height: 16px;
/* margin-bottom: 24px; */
margin: 3px 0 27px;
color: rgba(30, 38, 51, 1);
font-size: 14px;
font-weight: 600;
border-left: 3px solid rgba(19, 112, 255, 1);
padding-left: 3px;
display: flex;
align-items: center;
}
.parameter {
margin-bottom: 20px;
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 1e253dc3
......@@ -13,6 +13,7 @@ import _ from "lodash";
import { getCheckResult } from "../util";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
import questionMark from "@/assets/project/questionMark.svg";
import tipsIcon from "@/assets/project/tipsIcon.svg";
import jobSueIcon from "@/assets/project/jobSue.svg";
import { IParameter } from "../interface";
......@@ -417,13 +418,29 @@ const ConfigForm = (props: ConfigFormProps) => {
alt=""
/>
<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 className={styles.taskConfigBox}>
{randerParameters(task.parameters, task.id)}
{task.flows.map((flow) => {
return (
<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)}
</div>
);
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 1e253dc3
......@@ -53,9 +53,13 @@ const ProjectSubmitWork = () => {
/** 获取模版数据 */
const { run } = useMyRequest(fetchTemplateConfigInfo, {
onSuccess: (res: IResponse<ITemplateConfig>) => {
// setTemplateConfigInfo(templateConfigJson as ITemplateConfig);
setTemplateConfigInfo(res.data);
configFormRef.current.setInitName(res.data.title);
},
onError: () => {
// setTemplateConfigInfo(templateConfigJson as ITemplateConfig);
},
});
const { run: submitWorkFlowRun } = useMyRequest(submitWorkFlow, {
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 1e253dc3
......@@ -29,7 +29,7 @@ export interface IParameter {
helperText?: string;
}
export type IExecutionStatus = 'Pending' | 'Running' | 'Done' | 'Failed'
export type IExecutionStatus = "Pending" | "Running" | "Done" | "Failed";
export interface ITask {
id: string;
......@@ -44,7 +44,7 @@ export interface ITask {
parameters: Array<IParameter>;
edges: Array<IEdge>;
isCheck?: boolean;
executionStatus?: IExecutionStatus
executionStatus?: IExecutionStatus;
}
export interface ITemplateConfig {
......@@ -120,6 +120,7 @@ export interface ITaskInfo extends ITemplateConfig {
createTime: string;
costTime: string;
logPath: string;
outputs?: any;
}
type IState = "SUCCEEDED" | "RUNNING" | "ABORTED" | "FAILED";
src/views/Project/ProjectSubmitWork/mock.ts
View file @ 1e253dc3
import { IEdge } from "./interface";
export const templateConfigJson = {
title: "slurm backend demo",
version: "1.0.0",
......@@ -8,6 +9,7 @@ export const templateConfigJson = {
tags: ["Docking", "Gromax"],
source: "BASE64_ENCODED_WDL/CWL",
productId: "CADD",
id: "123",
tasks: [
{
id: "批式算子ID1",
......@@ -18,11 +20,14 @@ export const templateConfigJson = {
y: 0,
},
type: "BATCH",
// parameters: [],
parameters: [
{
hidden: false,
name: "in",
required: true,
classType: "input",
classTypeName: "input",
// domType: "input",
domType: "select",
// domType: "multipleselect",
......@@ -34,148 +39,116 @@ export const templateConfigJson = {
description: "输入一段字符串",
validators: [
{
regex: '^[0-9]*$',
message: '只能输入数字'
}
regex: "^[0-9]*$",
message: "只能输入数字",
},
],
choices: [
{
key: '1',
value: 'a'
key: "1",
value: "a",
},
{
key: '2',
value: '2'
key: "2",
value: "2",
},
{
key: '3',
value: '3'
}
key: "3",
value: "3",
},
],
language: '1',
languageVersion: '1',
tags:['1'],
source:'1',
productId:'1',
tasks: [{
id: 'id',
title: 'title',
description: 'description',
language: "1",
languageVersion: "1",
tags: ["1"],
source: "1",
productId: "1",
tasks: [
{
id: "id",
title: "title",
description: "description",
position: {
x: 100,
y: 200
y: 200,
},
type: 'BATCH',
parentNode: '1',
type: "BATCH",
parentNode: "1",
parameters: [],
edges: []
}]
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",
// title: "task_B",
// description: "这是task_B",
// id: "批式算子ID1",
// title: "task_A",
// description: "这是task_A",
// position: {
// x: 100,
// y: 50,
// x: 0,
// y: 0,
// },
// type: "batch",
// type: "FLOW",
// parameters: [
// {
// hidden: true,
// hidden: false,
// 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,
// name: "sb",
// required: false,
// domType: "input",
// // pathSelect-路径选择器 datasetSelect-数据集选择器 fileSelect-文件选择器 input-输入框 select-单选下拉框 multipleSelect-多选下拉框 radio-单选组 checkbox-多选组
// classType: "input",
// classTypeName: "input",
// // domType: "input",
// domType: "select",
// // domType: "multipleselect",
// // domType: "radio",
// // domType: "checkbox",
// dataType: "stringParameter",
// value: "",
// description: "这是task_B的输入",
// validators: [],
// choices: [],
// },
// ],
// edges: [
// // value: [],
// description: "输入一段字符串",
// validators: [
// {
// id: "10001",
// source: "流式算子ID1",
// sourceHandle: "流式算子1出口A",
// target: "流式算子ID2",
// targetHandle: "流式算子2入口A",
// lable: "",
// regex: "^[0-9]*$",
// message: "只能输入数字",
// },
// ],
// },
// choices: [
// {
// id: "流式算子ID2",
// title: "task_C",
// description: "这是task_C",
// position: {
// x: 100,
// y: 100,
// key: "1",
// value: "a",
// },
// type: "batch",
// 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_C的输入",
// validators: "",
// choices: [],
// key: "2",
// value: "2",
// },
// {
// hidden: false,
// name: "sc",
// required: false,
// domType: "input",
// // pathSelect-路径选择器 datasetSelect-数据集选择器 fileSelect-文件选择器 input-输入框 select-单选下拉框 multipleSelect-多选下拉框 radio-单选组 checkbox-多选组
// dataType: "stringParameter",
// value: "",
// description: "这是task_C的输入",
// validators: [],
// choices: [],
// key: "3",
// value: "3",
// },
// ],
// edges: [
// language: "1",
// languageVersion: "1",
// tags: ["1"],
// source: "1",
// productId: "1",
// tasks: [
// {
// id: "10002",
// source: "流式算子ID2",
// sourceHandle: "流式算子1出口A",
// target: "流式算子ID2",
// targetHandle: "流式算子2入口A",
// lable: "",
// 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