feat: 数据集查看器优化提测

src/api/fileserver/CloudEController.ts

@@ -30,6 +30,27 @@ type IGetDatasetItemsListParams = {
   sort?: string; // 排序
 }
 
+export type IQuery = {
+	index: string;
+	compare: ">" | "<" | ">=" | "<=" | "=" | "≈";
+	query: string;
+};
+
+type IQuerylist = Array<IQuery>
+
+type IGetDatasetItemsListNewParamstype = {
+  type?: string;
+  projectId: string;
+  token: string;
+  filetoken: string;
+  path: string; // 数据集路径
+  name: string; // 数据集名称
+  page: number; // 
+  size: number; // 
+  index?: string; // 选择的属性
+  sort?: string; // 排序
+}
+
 type IGetDatasetSizeParams = {
   type?: string; // 产品id
   projectId: string;
@@ -281,6 +302,22 @@ class CloudEController {
     }
   }
 
+  // 获取数据集里的数据列表（新  可支持高级搜索）
+  static GetDatasetItemsListNew(params: IGetDatasetItemsListNewParamstype, querylist: IQuerylist) {
+    if (ApiUtils.getAuthorizationHeaders(headers)) {
+      headers["Cache-Control"] = "no-cache";
+      let url = getUrlThroughParams(params, ['filetoken','path','token'], '?')
+      return axios.post(
+        `${APIOPTION()}:5003/find/dataset/new${url}`,{
+          querylist
+        },
+        {
+          headers: headers,
+        }
+      );
+    }
+  }
+
   // 分子另存为
   static SaveDataset(params: ISaveDatasetParams) {
     if (ApiUtils.getAuthorizationHeaders(headers)) {

src/components/mui/MyPopover.tsx

@@ -8,7 +8,7 @@
  */
 import { useRef, useEffect, useState } from "react";
 import Popover, { PopoverProps } from "@mui/material/Popover";
-import Typography from "@mui/material/Typography";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 interface IProps extends Omit<PopoverProps, "open"> {
 	/** 触发行为 */
@@ -22,7 +22,18 @@ interface IProps extends Omit<PopoverProps, "open"> {
 	/** open 修改 */
 	changeOpen: (val: boolean) => void;
 }
-
+const theme = createTheme({
+	components: {
+		MuiPaper: {
+			styleOverrides: {
+				root: {
+					boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+				},
+			},
+		},
+	},
+});
+// .css-3bmhjh-MuiPaper-root-MuiPopover-paper
 const MyPopover = (props: IProps) => {
 	const [anchorEl, setAnchorEl] = useState<any | null>(null);
 	const ref = useRef(null);
@@ -61,40 +72,42 @@ const MyPopover = (props: IProps) => {
 	const id = open ? "simple-popover" : undefined;
 
 	return (
-		<div>
-			<Typography
-				ref={ref}
-				aria-owns={id}
-				onClick={trigger === "click" ? handelClick : undefined}
-				onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
-				onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
-			>
-				{children}
-			</Typography>
-			<Popover
-				id={id}
-				open={open}
-				anchorEl={anchorEl}
-				onClose={handlePopoverClose}
-				sx={{
-					pointerEvents: trigger === "hover" ? "none" : undefined,
-				}}
-				anchorOrigin={
-					anchorOrigin || {
-						vertical: "bottom",
-						horizontal: "center",
+		<ThemeProvider theme={theme}>
+			<div>
+				<div
+					ref={ref}
+					aria-owns={id}
+					onClick={trigger === "click" ? handelClick : undefined}
+					onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
+					onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
+				>
+					{children}
+				</div>
+				<Popover
+					id={id}
+					open={open}
+					anchorEl={anchorEl}
+					onClose={handlePopoverClose}
+					sx={{
+						pointerEvents: trigger === "hover" ? "none" : undefined,
+					}}
+					anchorOrigin={
+						anchorOrigin || {
+							vertical: "bottom",
+							horizontal: "center",
+						}
 					}
-				}
-				transformOrigin={
-					transformOrigin || {
-						vertical: "top",
-						horizontal: "center",
+					transformOrigin={
+						transformOrigin || {
+							vertical: "top",
+							horizontal: "center",
+						}
 					}
-				}
-			>
-				<Typography sx={{ p: 1 }}>{content}</Typography>
-			</Popover>
-		</div>
+				>
+					{content}
+				</Popover>
+			</div>
+		</ThemeProvider>
 	);
 };
 

src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.module.css

@@ -3,6 +3,7 @@
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
+	position: relative;
 }
 .datasetLi {
 	flex: 1;

src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.tsx

@@ -5,6 +5,7 @@ import MyTooltip from "@/components/mui/MyTooltip";
 import Checkbox from "@mui/material/Checkbox";
 import style from "./index.module.css";
 import classNames from "classnames";
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
 import NoData from "@/components/BusinessComponents/NoData";
 
 type IDatasetCardTableProps = {
@@ -13,11 +14,18 @@ type IDatasetCardTableProps = {
 	showData: Array<string>;
 	selectItems: Array<string>;
 	setSelectItems: any;
+	loading: boolean;
 };
 
 const DatasetCardTable = (props: IDatasetCardTableProps) => {
-	const { list, graphicDimension, showData, selectItems, setSelectItems } =
-		props;
+	const {
+		list,
+		graphicDimension,
+		showData,
+		selectItems,
+		setSelectItems,
+		loading,
+	} = props;
 
 	// 选择/取消分子
 	const handleSelectItem = (id: string) => {
@@ -34,7 +42,7 @@ const DatasetCardTable = (props: IDatasetCardTableProps) => {
 	// 空盒子用于布局
 	const nullBox = useMemo(() => {
 		if (list.length > 4) {
-			let nullBoxLength = 8 - list.length;
+			let nullBoxLength = Math.abs(8 - list.length);
 			return new Array(nullBoxLength).fill("");
 		} else {
 			return [];
@@ -46,6 +54,7 @@ const DatasetCardTable = (props: IDatasetCardTableProps) => {
 			{list.length !== 0 && (
 				<>
 					<div className={style.list}>
+						<MyCircularProgress loading={loading} />
 						{list.map((item, index) => {
 							return (
 								<div

src/views/Project/ProjectData/SeeDataset/components/DatasetTable/index.tsx

@@ -9,6 +9,7 @@ type IDatasetTableProps = {
 	setSelectItems: any;
 	sortState: sortState;
 	setSortState: any;
+	loading: boolean;
 };
 
 const DatasetTable = (props: IDatasetTableProps) => {
@@ -19,6 +20,7 @@ const DatasetTable = (props: IDatasetTableProps) => {
 		setSelectItems,
 		sortState,
 		setSortState,
+		loading,
 	} = props;
 	const headCells = useMemo(() => {
 		let width =
@@ -45,6 +47,7 @@ const DatasetTable = (props: IDatasetTableProps) => {
 			setSelectItems={setSelectItems}
 			sortState={sortState}
 			setSortState={setSortState}
+			loading={loading}
 		></MyTable>
 	);
 };

src/views/Project/ProjectData/SeeDataset/index.module.css

@@ -11,14 +11,14 @@
 	padding-bottom: 64px;
 }
 .top {
-	margin-bottom: 20px;
+	margin-bottom: 16px;
 }
 .title {
 	line-height: 22px;
 	color: rgba(30, 38, 51, 1);
 	font-size: 18px;
 	font-weight: 600;
-	margin-bottom: 20px;
+	margin-bottom: 16px;
 }
 .screens {
 	display: flex;
@@ -58,20 +58,17 @@
 	position: relative;
 }
 .searchBox {
-	position: absolute;
-	top: 36px;
-	right: 0;
 	width: 662px;
-	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
 	background-color: #fff;
-	border-radius: 4px;
-	z-index: 10;
 	padding: 20px 24px 24px;
 	box-sizing: border-box;
 }
-.searchBox img {
+.deleteIcon {
 	cursor: pointer;
 }
+.deleteIconDisabled {
+	cursor: not-allowed;
+}
 .searchTop {
 	margin-bottom: 12px;
 }

src/views/Project/ProjectData/SeeDataset/indexCopy.module.css

-.datasetBox {
-	padding: 24px 32px 0;
-	box-sizing: border-box;
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	height: 100%;
-}
-.datasetBoxShowFoot {
-	padding-bottom: 64px;
-}
-.top {
-	margin-bottom: 20px;
-}
-.title {
-	line-height: 22px;
-	color: rgba(30, 38, 51, 1);
-	font-size: 18px;
-	font-weight: 600;
-	margin-bottom: 20px;
-}
-.screens {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-.screensLeft {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-}
-.screensRight {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-}
-.selectShowData {
-	margin-left: 24px;
-	font-size: 14px;
-	color: rgba(19, 112, 255, 1);
-}
-.table {
-	flex: 1;
-	overflow-y: overlay;
-	display: flex;
-	flex-direction: column;
-}
-.list {
-	flex: 1;
-	display: flex;
-	justify-content: space-between;
-	flex-wrap: wrap;
-}
-.datasetLi {
-	flex: 1;
-	min-width: 20%;
-	margin: 0 16px 16px 0;
-	border: 1px solid rgba(235, 237, 240, 1);
-	border-radius: 4px;
-	min-height: 275px;
-	box-sizing: border-box;
-	position: relative;
-	cursor: pointer;
-}
-.datasetLi:nth-child(4n) {
-	margin-right: 0;
-}
-.datasetLi:nth-last-child(1) {
-	margin-bottom: 0;
-}
-.datasetLi:nth-last-child(2) {
-	margin-bottom: 0;
-}
-.datasetLi:nth-last-child(3) {
-	margin-bottom: 0;
-}
-.datasetLi:nth-last-child(4) {
-	margin-bottom: 0;
-}
-.datasetLiTop {
-	height: 55%;
-	box-sizing: border-box;
-}
-.datasetLiBottom {
-	height: 45%;
-	box-sizing: border-box;
-	background-color: RGBA(247, 248, 250, 1);
-	display: flex;
-	flex-direction: column;
-}
-.datasetLiTitle {
-	height: 38px;
-	line-height: 38px;
-	color: rgba(19, 112, 255, 1);
-	font-size: 14px;
-	text-align: center;
-	font-weight: 600;
-	width: 100%;
-	overflow: hidden;
-}
-.datasetLiDataList {
-	flex: 1;
-	overflow: overlay;
-}
-.noDataList {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: rgba(138, 144, 153, 1);
-	font-size: 14px;
-	line-height: 22px;
-}
-.datasetLiDataLi {
-	height: 20px;
-	line-height: 20px;
-	color: rgba(30, 38, 51, 1);
-	font-size: 12px;
-	padding: 0 16px;
-	display: flex;
-	justify-content: space-between;
-}
-.datasetLiDataLi:nth-child(2n) {
-	background-color: rgba(235, 237, 240, 1);
-}
-.datasetLiDataLiKey {
-	max-width: 50%;
-	white-space: nowrap;
-	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.datasetLiDataLiValue {
-	max-width: 50%;
-	white-space: nowrap;
-	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.pagination {
-	height: 76px;
-	min-height: 76px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-.foot {
-	position: absolute;
-	bottom: 0;
-	background-color: #fff;
-	width: 100%;
-	box-sizing: border-box;
-	height: 64px;
-	padding: 0 32px;
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	box-shadow: 0px -3px 10px 0px rgba(0, 24, 57, 0.04);
-}
-.nullBox {
-	visibility: hidden;
-}