feat: 数据集查看器

src/components/mui/MyTableNew.tsx

@@ -13,6 +13,7 @@ import descIcon from "@/assets/project/descIcon.svg";
 import sortIcon from "@/assets/project/sort.svg";
 import CircularProgress from "@mui/material/CircularProgress";
 import { createTheme, ThemeProvider } from "@mui/material";
+import MyTooltip from "./MyTooltip";
 import noFile from "@/assets/project/noFile.svg";
 
 type Order = "asc" | "desc"; // 升序为asc，降序为desc。
@@ -131,6 +132,7 @@ const MyTable = (props: IMyTableProps) => {
 				MuiTableCell: {
 					styleOverrides: {
 						root: {
+							boxSizing: "border-box",
 							fontSize: "14px",
 							lineHeight: "22px",
 							color: "rgba(30, 38, 51, 1)",
@@ -377,7 +379,23 @@ const MyTable = (props: IMyTableProps) => {
 						)}
 						{headCells.map((headCell, index) => (
 							<TableCell key={index} align="left" width={headCell.width}>
-								{row[headCell.id]}
+								{/* {row[headCell.id]} */}
+								{headCell.showOverflowTooltip && (
+									<MyTooltip title={row[headCell.id]}>
+										<div
+											style={{
+												// width: headCell.width,
+												width: Number(headCell.width) - 32 || "",
+												overflow: "hidden",
+												textOverflow: "ellipsis",
+												whiteSpace: "nowrap",
+											}}
+										>
+											{row[headCell.id]}
+										</div>
+									</MyTooltip>
+								)}
+								{!headCell.showOverflowTooltip && <>{row[headCell.id]}</>}
 							</TableCell>
 						))}
 					</TableRow>
@@ -463,12 +481,19 @@ const MyTable = (props: IMyTableProps) => {
 						position: "relative",
 					}}
 				>
-					<TableContainer component={Paper} sx={{ minHeight: "45px" }}>
-						<Table>{randerTableHead}</Table>
+					<TableContainer
+						component={Paper}
+						sx={{
+							minHeight: "45px",
+							overflowY: "scroll",
+							background: "rgba(247, 248, 250, 1)",
+						}}
+					>
+						<Table sx={{}}>{randerTableHead}</Table>
 					</TableContainer>
 					<TableContainer
 						component={Paper}
-						sx={{ flex: 1, minHeight: "200px" }}
+						sx={{ flex: 1, minHeight: "200px", overflowY: "scroll" }}
 					>
 						<Table>{randerTableBody}</Table>
 					</TableContainer>

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

+import { useState, useEffect, useMemo } from "react";
+
+type IDatasetCardTableProps = {};
+
+const DatasetCardTable = (props: IDatasetCardTableProps) => {
+	return (
+		<div>
+			table
+			<div style={{ height: "300px" }}>123</div>
+			<div style={{ height: "300px" }}>123</div>
+			<div style={{ height: "300px" }}>123</div>
+			<div style={{ height: "300px" }}>123</div>
+			<div style={{ height: "300px" }}>123</div>
+			<div style={{ height: "300px" }}>123</div>
+		</div>
+	);
+};
+
+export default DatasetCardTable;

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

+import { useState, useEffect, useMemo } from "react";
+import MyTable from "@/components/mui/MyTableNew";
+
+type IDatasetTableProps = {
+	list: Array<any>;
+	showData: Array<string>;
+};
+
+const DatasetTable = (props: IDatasetTableProps) => {
+	console.log(window.innerWidth);
+	const { list, showData } = props;
+	const headCells = useMemo(() => {
+		// let width = showData.length === 0 ? "100%" : `${100 / showData.length}%`;
+		let width =
+			showData.length === 0
+				? "100%"
+				: `${(window.innerWidth - 112) / showData.length}px`;
+		return showData.map((item, index) => {
+			return {
+				id: item,
+				label: item,
+				width,
+				showOverflowTooltip: true,
+				// width: index ? width : "",
+				// width: "100%",
+				// width: "200px",
+				sort: true,
+			};
+		});
+	}, [showData]);
+	return (
+		<MyTable
+			rows={list}
+			headCells={headCells}
+			hasCheckbox={true}
+			fixedHead={true}
+		></MyTable>
+	);
+};
+
+export default DatasetTable;

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;
+}

src/views/demo/MyTableDemo/index.tsx

@@ -17,7 +17,7 @@ const MyTableDemo = () => {
 
 	const rows = [
 		{
-			a: "as123",
+			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
 			b: "werewrw",
 			c: "asdfasf",
 			d: "asdfasdf",
@@ -117,27 +117,27 @@ const MyTableDemo = () => {
 		{
 			id: "a",
 			label: "属性a",
-			width: "25%",
+			width: "150",
 		},
 		{
 			id: "b",
 			label: "属性b",
-			width: "25%",
+			width: "250",
 		},
 		{
 			id: "c",
 			label: "属性c",
-			width: "25%",
+			width: "350",
 		},
 		{
 			id: "d",
 			label: "属性d",
-			width: "25%",
+			width: "250",
 		},
 		{
 			id: "caozuo",
 			label: "操作",
-			width: "25%",
+			width: "250",
 		},
 	];
 
@@ -145,22 +145,23 @@ const MyTableDemo = () => {
 		{
 			id: "a",
 			label: "属性a",
-			width: "25%",
+			width: "200",
+			showOverflowTooltip: true,
 		},
 		{
 			id: "b",
 			label: "属性b",
-			width: "25%",
+			width: "200",
 		},
 		{
 			id: "c",
 			label: "属性c",
-			width: "25%",
+			// width: "200",
 		},
 		{
 			id: "d",
 			label: "属性d",
-			width: "25%",
+			width: "200",
 		},
 	];
 
@@ -200,20 +201,20 @@ const MyTableDemo = () => {
 			<h2>常规表格</h2>
 			<div>
 				<MyTable
-					// rows={rows.map((row) => {
-					// 	return {
-					// 		...row,
-					// 		caozuo: (
-					// 			<MyButton
-					// 				text="删除"
-					// 				onClick={() => {
-					// 					handleDelete(row.id);
-					// 				}}
-					// 			></MyButton>
-					// 		),
-					// 	};
-					// })}
-					rows={[]}
+					rows={rows.map((row) => {
+						return {
+							...row,
+							caozuo: (
+								<MyButton
+									text="删除"
+									onClick={() => {
+										handleDelete(row.id);
+									}}
+								></MyButton>
+							),
+						};
+					})}
+					// rows={[]}
 					headCells={buttonHeadCells}
 					selectItems={selectItems}
 					setSelectItems={setSelectItems}
@@ -230,7 +231,7 @@ const MyTableDemo = () => {
 				/>
 			</div>
 			<h2>固定表头(需要指定每列宽度 不然对不齐)表格，内容滚动, </h2>
-			<div style={{ height: "300px" }}>
+			<div style={{ height: "300" }}>
 				<MyTable
 					rows={rows}
 					headCells={headCells}
@@ -259,7 +260,7 @@ const MyTableDemo = () => {
 				/>
 			</div>
 			<h2>带分页且固定表头(需要指定每列宽度 不然对不齐)的表格</h2>
-			<div style={{ height: "300px" }}>
+			<div style={{ height: "300" }}>
 				<MyTable
 					rows={rows}
 					headCells={headCells}