feat: 队列选择器开发完成

src/components/BusinessComponents/QueueSelect/index.tsx

@@ -25,6 +25,9 @@ type IQueueSelectProps = {
 	onChange: any;
 	originalCpuList: Array<IQueueLi>;
 	originalGpuList: Array<IQueueLi>;
+	error?: boolean;
+	helperText?: string;
+	disabled?: boolean;
 };
 
 type IMemoryLi = {
@@ -54,7 +57,15 @@ const queueTypes = [
 ];
 
 const QueueSelect = (props: IQueueSelectProps) => {
-	const { value, onChange, originalCpuList, originalGpuList } = props;
+	const {
+		value,
+		onChange,
+		originalCpuList,
+		originalGpuList,
+		error,
+		helperText,
+		disabled,
+	} = props;
 	const Message = useMessage();
 	const [activeId, setActiveId] = useState("");
 	const [open, setOpen] = useState(false);
@@ -133,6 +144,29 @@ const QueueSelect = (props: IQueueSelectProps) => {
 		},
 	];
 
+	const gpuHeadCells = [
+		{
+			id: "type",
+			label: "类型",
+			width: 510,
+		},
+		{
+			id: "gpuNumRender",
+			label: "节点卡数",
+			width: 100,
+		},
+		{
+			id: "coreNumRender",
+			label: "节点核数",
+			width: 100,
+		},
+		{
+			id: "gpuMemoryRender",
+			label: "节点内存容量",
+			width: 100,
+		},
+	];
+
 	const renderType = (item: IShowCPULi) => {
 		return (
 			<div className={style.cpuType}>
@@ -149,6 +183,14 @@ const QueueSelect = (props: IQueueSelectProps) => {
 		return item.coreNum + "核";
 	};
 
+	const renderGpuNum = (item: IQueueLi) => {
+		return item.gpuNum + "卡";
+	};
+
+	const renderGpuMemory = (item: IQueueLi) => {
+		return item.memory + "GB";
+	};
+
 	const setMemory = (id: string) => {
 		const copyShowCpuList: Array<IShowCPULi> = cloneDeep(showCpuList);
 		const selectIndex = copyShowCpuList.findIndex((item) => {
@@ -162,8 +204,6 @@ const QueueSelect = (props: IQueueSelectProps) => {
 			setActiveId(id);
 		}, 10);
 		setShowCpuList(copyShowCpuList);
-		console.log(id);
-		console.log(copyShowCpuList);
 	};
 
 	const renderMemory = (item: IShowCPULi) => {
@@ -189,7 +229,6 @@ const QueueSelect = (props: IQueueSelectProps) => {
 	};
 
 	const handleRow = (e: any) => {
-		console.log(e);
 		setActiveId(e.id);
 	};
 
@@ -226,7 +265,14 @@ const QueueSelect = (props: IQueueSelectProps) => {
 
 	return (
 		<>
-			<MyInput value={getTitle()} onClick={() => handleOpen()}></MyInput>
+			<MyInput
+				placeholder="请选择硬件队列"
+				value={getTitle()}
+				onClick={() => handleOpen()}
+				error={error}
+				helperText={helperText}
+				disabled={disabled}
+			></MyInput>
 			{open && (
 				<MyDialog
 					open={open}
@@ -267,13 +313,14 @@ const QueueSelect = (props: IQueueSelectProps) => {
 							)}
 							{queueType === "GPU" && (
 								<MyTable
-									rows={originalGpuList.map((item) => ({
+									rows={originalGpuList.map((item: any) => ({
 										...item,
-										// type: renderType(item),
-										// coreNumRender: renderCoreNum(item),
-										// memoryRender: renderMemory(item),
+										type: renderType(item),
+										gpuNumRender: renderGpuNum(item),
+										coreNumRender: renderCoreNum(item),
+										gpuMemoryRender: renderGpuMemory(item),
 									}))}
-									headCells={cpuHeadCells}
+									headCells={gpuHeadCells}
 									fixedHead={true}
 									handleRow={(e: any) => handleRow(e)}
 									activeId={activeId}

src/store/modules/currentProject.ts

@@ -13,6 +13,7 @@ type projectInfo = {
   desc?: string;
   projectRole?: string;
   filetoken?: string;
+  zoneId?: string;
 };
 
 type productInfo = {

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

 import moment from "moment";
 import classnames from "classnames";
-import { useState, useMemo, useImperativeHandle } from "react";
+import { useState, useMemo, useImperativeHandle, useEffect } from "react";
 
+import QueueSelect from "@/components/BusinessComponents/QueueSelect";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getHardwreList } from "@/api/project_api";
+import { IQueueLi } from "@/components/BusinessComponents/QueueSelect";
 import { ITemplateConfig, IRenderTasks } from "../interface";
 import MyInput from "@/components/mui/MyInput";
 import FileSelect, {
@@ -24,12 +28,42 @@ type ConfigFormProps = {
 	setParameter: any;
 	onRef?: React.Ref<any>;
 	setExternalSelectedNodeId: (val: string) => void;
+	zoneId: string;
 };
 
 const ConfigForm = (props: ConfigFormProps) => {
-	const { templateConfigInfo, setParameter, setExternalSelectedNodeId } = props;
+	const {
+		templateConfigInfo,
+		setParameter,
+		setExternalSelectedNodeId,
+		zoneId,
+	} = props;
 	const [name, setName] = useState<string>(""); // 任务名称
 	const [fileSelectType, setFileSelectType] = useState<FileSelectType>("path");
+	const [cpuList, setCpuList] = useState<Array<IQueueLi>>([]);
+	const [gpuList, setGpuList] = useState<Array<IQueueLi>>([]);
+
+	const { run: getHardwreListFn } = useMyRequest(getHardwreList, {
+		onSuccess: (res, params) => {
+			if (params[0].computeType === "CPU") {
+				setCpuList(res.data);
+			} else {
+				setGpuList(res.data);
+			}
+		},
+	});
+	useEffect(() => {
+		getHardwreListFn({
+			zoneId,
+			computeType: "CPU",
+		});
+	}, [getHardwreListFn, zoneId]);
+	useEffect(() => {
+		getHardwreListFn({
+			zoneId,
+			computeType: "GPU",
+		});
+	}, [getHardwreListFn, zoneId]);
 
 	const [nameHelp, setNameHelp] = useState({
 		error: false,
@@ -209,10 +243,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{parameter.classTypeName}
 							</span>
 						</div>
-						<MyTooltip
-							title={parameter.description}
-							placement="right"
-						>
+						<MyTooltip title={parameter.description} placement="right">
 							<div className={styles.parameterContent}>
 								{(parameter.domType || "").toLowerCase() === "file" && (
 									<MyInput
@@ -283,6 +314,26 @@ const ConfigForm = (props: ConfigFormProps) => {
 										size="medium"
 									></MyInput>
 								)}
+								{(parameter.domType || "").toLowerCase() === "partition" && (
+									<QueueSelect
+										value={parameter.value || ""}
+										onChange={(e: any) =>
+											handleParameterChange(
+												{
+													target: {
+														value: e,
+													},
+												},
+												taskId,
+												parameter.name || ""
+											)
+										}
+										originalCpuList={cpuList}
+										originalGpuList={gpuList}
+										error={parameter.error || false}
+										helperText={parameter.helperText}
+									></QueueSelect>
+								)}
 								{(parameter.domType || "").toLowerCase() === "input" && (
 									<MyInput
 										onFocus={() => {

src/views/Project/ProjectSubmitWork/index.tsx

@@ -34,6 +34,7 @@ const ProjectSubmitWork = observer(() => {
 	const Message = useMessage();
 	const { currentProjectStore } = useStores();
 	const projectId = toJS(currentProjectStore.currentProjectInfo.id);
+	const zoneId = toJS(currentProjectStore.currentProjectInfo.zoneId);
 	const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品ID
 	const [templateConfigInfo, setTemplateConfigInfo] =
 		useState<ITemplateConfig>();
@@ -319,6 +320,7 @@ const ProjectSubmitWork = observer(() => {
 							templateConfigInfo={templateConfigInfo}
 							setParameter={setParameter}
 							setExternalSelectedNodeId={setExternalSelectedNodeId}
+							zoneId={zoneId as string}
 						/>
 					</div>
 				)}

src/views/Project/components/ProjectListPopper/index.tsx

@@ -57,7 +57,6 @@ const ProjectListPopper = observer((props: any) => {
 				};
 			});
 	}, [projectList, name]);
-	console.log(list);
 
 	const handleProjectBox = (e: React.SyntheticEvent) => {
 		setProjectListOpen(false);

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

@@ -2,6 +2,10 @@ import _ from "lodash";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 
+import QueueSelect from "@/components/BusinessComponents/QueueSelect";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getHardwreList } from "@/api/project_api";
+import { IQueueLi } from "@/components/BusinessComponents/QueueSelect";
 import {
 	ITask,
 	IParameter,
@@ -28,9 +32,10 @@ type IParameterSettingProps = {
 	templateConfigInfo: ITask[];
 	taskId: string;
 	setTemplateConfigInfo: any;
+	zoneId: string;
 };
 const ParameterSetting = (props: IParameterSettingProps) => {
-	const { templateConfigInfo, setTemplateConfigInfo, taskId } = props; // 算子大数组
+	const { templateConfigInfo, setTemplateConfigInfo, taskId, zoneId } = props; // 算子大数组
 	const [isShowAllDese, setIsShowAllDese] = useState(false); // 是否展示全部描述
 	const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
 	const [fileSelectType, setFileSelectType] = useState<FileSelectType>("path");
@@ -38,6 +43,31 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	const resizeRef = useRef<HTMLDivElement>(null);
 	const [activeParamsTab, setActiveParamsTab] = useState<string>("");
 
+	const [cpuList, setCpuList] = useState<Array<IQueueLi>>([]);
+	const [gpuList, setGpuList] = useState<Array<IQueueLi>>([]);
+
+	const { run: getHardwreListFn } = useMyRequest(getHardwreList, {
+		onSuccess: (res, params) => {
+			if (params[0].computeType === "CPU") {
+				setCpuList(res.data);
+			} else {
+				setGpuList(res.data);
+			}
+		},
+	});
+	useEffect(() => {
+		getHardwreListFn({
+			zoneId,
+			computeType: "CPU",
+		});
+	}, [getHardwreListFn, zoneId]);
+	useEffect(() => {
+		getHardwreListFn({
+			zoneId,
+			computeType: "GPU",
+		});
+	}, [getHardwreListFn, zoneId]);
+
 	const size = useSize(resizeRef);
 
 	// 文件夹路线选择器弹窗
@@ -189,10 +219,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	const renderInput = useCallback(
 		(parameter: IParameter) => {
 			return (
-				<MyTooltip
-					title={parameter.description}
-					placement="right"
-				>
+				<MyTooltip title={parameter.description} placement="right">
 					<div>
 						{(parameter.domType || "").toLowerCase() === "file" && (
 							<MyInput
@@ -269,6 +296,26 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								disabled={parameter.parameterGroup === "out"}
 							></MyInput>
 						)}
+						{(parameter.domType || "").toLowerCase() === "partition" && (
+							<QueueSelect
+								value={parameter.value || ""}
+								onChange={(e: any) =>
+									handleParameterChange(
+										{
+											target: {
+												value: e,
+											},
+										},
+										parameter.name || ""
+									)
+								}
+								originalCpuList={cpuList}
+								originalGpuList={gpuList}
+								error={parameter.error || false}
+								helperText={parameter.helperText}
+								disabled={parameter.parameterGroup === "out"}
+							></QueueSelect>
+						)}
 						{(parameter.domType || "").toLowerCase() === "input" && (
 							<MyInput
 								value={parameter.defaultValue || ""}

src/views/WorkFlowEdit/index.tsx

@@ -8,6 +8,8 @@
  */
 import React, { useCallback, useEffect, useState, useMemo } from "react";
 import _ from "lodash";
+import { useStores } from "@/store";
+import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
@@ -49,6 +51,8 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const Message = useMessage();
 	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); // 算子大数组
 	const [showCustomOperator, setShowCustomOperator] = useState(false); // 是否显示自定义算子
+	const { currentProjectStore } = useStores();
+	const zoneId = toJS(currentProjectStore.currentProjectInfo.zoneId);
 	const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
 	const [title, setTitle] = useState(""); // 自定义模板名称
 	const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
@@ -243,6 +247,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 							templateConfigInfo={templateConfigInfo}
 							setTemplateConfigInfo={setTemplateConfigInfo}
 							taskId={selectTaskId || ""}
+							zoneId={zoneId as string}
 						/>
 					)}
 					<div

src/views/demo/QueueSelectDemo/index.tsx

@@ -9,7 +9,6 @@ const QueueSelectDemo = () => {
 	const [cpuList, setCpuList] = useState<Array<IQueueLi>>([]);
 	const [gpuList, setGpuList] = useState<Array<IQueueLi>>([]);
 	const onChange = (e: any) => {
-		console.log(e);
 		setValue(e);
 	};
 	const { run } = useMyRequest(getHardwreList, {
@@ -21,19 +20,6 @@ const QueueSelectDemo = () => {
 			}
 		},
 	});
-	// 	computeType
-	// coreNum
-	// cpuName
-	// gpuName
-	// gpuNum
-	// id
-	// memory
-	// name
-	// originalPrice
-	// partition
-	// partitionId
-	// picUrl
-	// price
 	useEffect(() => {
 		run({
 			zoneId: "CE-Z1",