feat: 算子详情界面开发

src/router/index.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-25 09:44:27
+ * @LastEditTime: 2022-10-25 21:27:26
  * @FilePath: /bkunyun/src/router/index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 import { AnyMap } from "immer/dist/internal";
@@ -55,8 +55,8 @@ export const elements: {
 } = {
   Demo: Demo,
   UserResources: UserResources,
-  SeeFloe: SeeEnv,
-  OperatorDetails: OperatorDetails,
+  SeeEnv: SeeEnv,
+  SeeFloe: OperatorDetails,
   ProjectSetting: ProjectSetting,
   ProjectData: ProjectData,
   ProjectWorkbench: ProjectWorkbench,

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-25 15:12:47
+ * @LastEditTime: 2022-10-25 21:32:49
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -46,9 +46,9 @@ const OperatorCard = observer((props: IProps) => {
 		}
 	};
 
-	const handleToSeeOperator = (item: any) => {
+	const handleToSeeOperator = () => {
 		navigate("/utility/resourceCenter/userResources/seeFloe", {
-			state: { id: item.id },
+			state: { id },
 		});
 	};
 

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.module.css

@@ -2,9 +2,38 @@
 	padding: 0 24px;
 }
 
-.titleBox {
+.baseInfoBox {
 	font-size: 16px;
 	color: #1e2633;
 	line-height: 24px;
 	padding: 20px 0;
 }
+
+.titleBox {
+	padding: 14px 24px;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	border-bottom: 1px solid rgba(235, 237, 240, 1);
+}
+.goBackIcon {
+	width: 22px;
+	height: 22px;
+	cursor: pointer;
+}
+.title {
+	margin-left: 2px;
+	font-size: 18px;
+	line-height: 26px;
+	color: rgba(30, 38, 51, 1);
+	font-weight: 550;
+	margin-right: 16px;
+}
+.type {
+	background-color: rgba(235, 237, 240, 1);
+	font-size: 12px;
+	line-height: 20px;
+	padding: 1px 9px;
+	color: #565c66;
+	border-radius: 2px;
+}

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.tsx

@@ -2,17 +2,25 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 10:30:55
+ * @LastEditTime: 2022-10-26 09:27:56
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
-import styles from "./index.module.css";
+import { observer } from "mobx-react-lite";
+import { useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
 import BasicInfo from "../../../../components/BasinInfo";
-import { useMemo, useState } from "react";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getOperatorDetail } from "@/api/resourceCenter";
+import { useStores } from "@/store";
+import goback from "@/assets/project/goback.svg";
 
-const OperatorDetails = () => {
+import styles from "./index.module.css";
+
+const OperatorDetails = observer(() => {
 	const contentTypeList = useMemo(() => {
 		return [
 			{ value: "flowChart", label: "流程图" },
@@ -21,31 +29,85 @@ const OperatorDetails = () => {
 		];
 	}, []);
 
+	/** 产品store */
+	const { productListStore } = useStores();
+	const navigate = useNavigate();
+
 	/** 详情类型 */
 	const [contentType, setContentType] = useState<string>("flowChart");
+	/** 详情数据 */
+	const [detailInfo, setDetailInfo] = useState<any>({});
+	/** 获取算子详情 */
+	const { run: fetchOperatorDetail } = useMyRequest(getOperatorDetail, {
+		onSuccess: (res: any) => {
+			if (res.message === "success") {
+				/** 设置详情信息 */
+				setDetailInfo(res.data);
+			}
+		},
+	});
+	const location = useLocation();
+	const locationInfo: any = location?.state;
+
+	const {
+		title = "",
+		version = "",
+		productId = "",
+		createdTime = "",
+		creator = "",
+		description = "",
+		type,
+	} = detailInfo;
 
 	/** 切换类型 */
 	const handleRadio = (val: string) => {
 		setContentType(val);
 	};
 
+	const productText = useMemo(() => {
+		const result = productListStore.productList?.filter((item) => {
+			return item.value === productId;
+		});
+		return result?.length ? result[0].label : "";
+	}, [productListStore.productList, productId]);
+
+	useEffect(() => {
+		fetchOperatorDetail(locationInfo.id);
+	}, [fetchOperatorDetail, locationInfo.id]);
+
 	return (
 		<div className={styles.detailsBox}>
-			<h2 className={styles.titleBox}>基础信息</h2>
+			<div className={styles.titleBox}>
+				<img
+					className={styles.goBackIcon}
+					src={goback}
+					alt=""
+					onClick={() =>
+						navigate("/utility/resourceCenter/userResources", {
+							state: { defaultTab: "USERRESOURCES_FLOE" },
+						})
+					}
+				/>
+				<div className={styles.title}>{title}</div>
+				<div className={styles.type}>
+					{type === "BATCH" ? "批算子" : "流算子"}
+				</div>
+			</div>
+			<h2 className={styles.baseInfoBox}>基础信息</h2>
 			<div style={{ border: "1px solid #EBEDF0" }}>
 				<BasicInfo
 					infoList={[
-						{ label: "33333331", value: "1" },
+						{ label: "所属产品", value: productText },
 						{
-							label: "1",
-							value: "42543253245325325432452345235432452323542352354235235321",
+							label: "创建时间",
+							value: createdTime,
 						},
-						{ label: "1", value: "1" },
-						{ label: "1", value: "1" },
-						{ label: "1", value: "1" },
+						{ label: "创建人", value: creator },
+						{ label: "算子版本", value: version },
+						{ label: "应用环境", value: "1" },
 					]}
 				/>
-				<BasicInfo infoList={[{ label: "2", value: "2" }]} />
+				<BasicInfo infoList={[{ label: "描述", value: description }]} />
 			</div>
 			<div style={{ padding: "26px 0 16px 0" }}>
 				<RadioGroupOfButtonStyle
@@ -58,6 +120,6 @@ const OperatorDetails = () => {
 			<div>11</div>
 		</div>
 	);
-};
+});
 
 export default OperatorDetails;