Skip to content

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

feat: 数据集查看器

parent 650d0f5e
Hide whitespace changes
Inline Side-by-side
Showing with 782 additions and 275 deletions
src/components/mui/MyTableNew.tsx
View file @ fdd7233b
...@@ -13,6 +13,7 @@ import descIcon from "@/assets/project/descIcon.svg"; ...@@ -13,6 +13,7 @@ import descIcon from "@/assets/project/descIcon.svg";
import sortIcon from "@/assets/project/sort.svg"; import sortIcon from "@/assets/project/sort.svg";
import CircularProgress from "@mui/material/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import { createTheme, ThemeProvider } from "@mui/material"; import { createTheme, ThemeProvider } from "@mui/material";
import MyTooltip from "./MyTooltip";
import noFile from "@/assets/project/noFile.svg"; import noFile from "@/assets/project/noFile.svg";
type Order = "asc" | "desc"; // 升序为asc，降序为desc。 type Order = "asc" | "desc"; // 升序为asc，降序为desc。
...@@ -131,6 +132,7 @@ const MyTable = (props: IMyTableProps) => { ...@@ -131,6 +132,7 @@ const MyTable = (props: IMyTableProps) => {
MuiTableCell: { MuiTableCell: {
styleOverrides: { styleOverrides: {
root: { root: {
boxSizing: "border-box",
fontSize: "14px", fontSize: "14px",
lineHeight: "22px", lineHeight: "22px",
color: "rgba(30, 38, 51, 1)", color: "rgba(30, 38, 51, 1)",
...@@ -377,7 +379,23 @@ const MyTable = (props: IMyTableProps) => { ...@@ -377,7 +379,23 @@ const MyTable = (props: IMyTableProps) => {
)} )}
{headCells.map((headCell, index) => ( {headCells.map((headCell, index) => (
<TableCell key={index} align="left" width={headCell.width}> <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> </TableCell>
))} ))}
</TableRow> </TableRow>
...@@ -463,12 +481,19 @@ const MyTable = (props: IMyTableProps) => { ...@@ -463,12 +481,19 @@ const MyTable = (props: IMyTableProps) => {
position: "relative", position: "relative",
}} }}
> >
<TableContainer component={Paper} sx={{ minHeight: "45px" }}> <TableContainer
<Table>{randerTableHead}</Table> component={Paper}
sx={{
minHeight: "45px",
overflowY: "scroll",
background: "rgba(247, 248, 250, 1)",
}}
>
<Table sx={{}}>{randerTableHead}</Table>
</TableContainer> </TableContainer>
<TableContainer <TableContainer
component={Paper} component={Paper}
sx={{ flex: 1, minHeight: "200px" }} sx={{ flex: 1, minHeight: "200px", overflowY: "scroll" }}
> >
<Table>{randerTableBody}</Table> <Table>{randerTableBody}</Table>
</TableContainer> </TableContainer>
......
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.tsx 0 → 100644
View file @ fdd7233b
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 0 → 100644
View file @ fdd7233b
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/index.tsx
View file @ fdd7233b
...@@ -16,9 +16,10 @@ import { observer } from "mobx-react-lite"; ...@@ -16,9 +16,10 @@ import { observer } from "mobx-react-lite";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { toJS } from "mobx"; import { toJS } from "mobx";
import classNames from "classnames"; import classNames from "classnames";
import Save from "./save"; import Save from "./components/Save";
import NoData from "@/components/BusinessComponents/NoData"; import Download from "./components/Download";
import Download from "./download"; import DatasetCardTable from "./components/DatasetCardTable";
import DatasetTable from "./components/DatasetTable";
import MyTooltip from "@/components/mui/MyTooltip"; import MyTooltip from "@/components/mui/MyTooltip";
import style from "./index.module.css"; import style from "./index.module.css";
...@@ -35,8 +36,10 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -35,8 +36,10 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品id 如：cadd const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品id 如：cadd
const token = getToken(); const token = getToken();
const [tableType, setTableType] = useState<"table" | "card">("table");
const [graphicDimension, setGraphicDimension] = useState("2D"); // 分子结构图是2D还是3D const [graphicDimension, setGraphicDimension] = useState("2D"); // 分子结构图是2D还是3D
const [showData, setShowData] = useState<Array<string>>([]); //显示的数据类型 const [showData, setShowData] = useState<Array<string>>([]); //显示的数据类型
console.log(showData);
const [dataTypes, setdataTypes] = useState<Array<IOption>>([]); // 可选的数据类型 const [dataTypes, setdataTypes] = useState<Array<IOption>>([]); // 可选的数据类型
const [sort, setSort] = useState("null"); // 排序方式 const [sort, setSort] = useState("null"); // 排序方式
const [keyword, setKeyword] = useState(""); // 关键字 const [keyword, setKeyword] = useState(""); // 关键字
...@@ -48,50 +51,20 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -48,50 +51,20 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
const [selectItems, setSelectItems] = useState<Array<any>>([]); const [selectItems, setSelectItems] = useState<Array<any>>([]);
const [saveOpen, setSaveOpen] = useState(false); // 另存为弹窗显示控制 const [saveOpen, setSaveOpen] = useState(false); // 另存为弹窗显示控制
const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制 const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制
const [showAnimation, setShowAnimation] = useState(true); // 弹窗动画变化中
const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表 const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表
// 解决图像渲染造成弹窗卡顿的问题
useEffect(() => {
setTimeout(() => {
setShowAnimation(false);
}, 300);
}, []);
const isCadd = useMemo(() => {
if (productId === "cadd") {
return true;
} else {
return false;
}
}, [productId]);
const handleSearchDataTypeChange = (e: any) => { const handleSearchDataTypeChange = (e: any) => {
setSearchDataType(e); setSearchDataType(e);
}; };
const handleSortChange = (e: any) => { const handleSortChange = (e: any) => {
setSort(e); setSort(e);
}; };
const handleKeywordChange = (e: any) => {
if (e.target.value.length <= 30) {
setKeyword(e.target.value);
}
};
const pageChange = (value: number) => { const pageChange = (value: number) => {
setPage(value - 1); setPage(value - 1);
}; };
// 空盒子用于布局
const nullBox = useMemo(() => {
if (list.length > 4) {
let nullBoxLength = 8 - list.length;
return new Array(nullBoxLength).fill("");
} else {
return [];
}
}, [list]);
// 获取分子列表 // 获取分子列表
const getList = useCallback( const getList = useCallback(
(paramsPage = 0) => { (paramsPage = 0) => {
...@@ -144,8 +117,6 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -144,8 +117,6 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
?.catch((error) => { ?.catch((error) => {
console.log(error); console.log(error);
setList([]); setList([]);
// Message.error(error?.response?.data?.message || "获取数据集信息失败");
// Message.error("未搜索到相关数据");
}); });
}, },
[ [
...@@ -159,7 +130,6 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -159,7 +130,6 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
sort, sort,
keyword, keyword,
firstGetList, firstGetList,
// Message,
] ]
); );
...@@ -191,23 +161,36 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -191,23 +161,36 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
<div className={style.title}>{name}</div> <div className={style.title}>{name}</div>
<div className={style.screens}> <div className={style.screens}>
<div className={style.screensLeft}> <div className={style.screensLeft}>
{isCadd && ( <RadioGroupOfButtonStyle
<RadioGroupOfButtonStyle handleRadio={setTableType}
handleRadio={setGraphicDimension} value={tableType}
value={graphicDimension} radioOptions={[
radioOptions={[ {
{ value: "table",
value: "2D", label: "表格",
label: "2D", },
}, {
{ value: "card",
value: "3D", label: "卡片",
label: "3D", },
}, ]}
]} />
RadiosBoxStyle={{ width: "132px" }} <div className={style.separator}>分隔线</div>
/> <RadioGroupOfButtonStyle
)} handleRadio={setGraphicDimension}
value={graphicDimension}
radioOptions={[
{
value: "2D",
label: "2D",
},
{
value: "3D",
label: "3D",
},
]}
RadiosBoxStyle={{ width: "132px" }}
/>
<MyMultipleMenu <MyMultipleMenu
value={showData} value={showData}
options={dataTypes} options={dataTypes}
...@@ -220,202 +203,22 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -220,202 +203,22 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
</MyMultipleMenu> </MyMultipleMenu>
</div> </div>
<div className={style.screensRight}> <div className={style.screensRight}>
<MySelect <MyButton text="高级筛选" onClick={() => {}}></MyButton>
options={dataTypes}
title={dataTypes.length === 0 ? "暂无属性" : "选择属性"}
isTitle={true}
value={searchDataType}
onChange={handleSearchDataTypeChange}
fullWidth={false}
disabled={dataTypes.length === 0}
sx={{
width: "160px",
marginRight: "16px",
height: "32px",
}}
></MySelect>
<MySelect
options={[
{
label: "无",
value: "null",
},
{
label: "正序",
value: "ASC",
},
{
label: "倒序",
value: "DESC",
},
]}
title="排序方式"
value={sort}
onChange={handleSortChange}
isTitle={true}
fullWidth={false}
sx={{
width: "160px",
marginRight: "16px",
height: "32px",
}}
></MySelect>
<MyInput
value={keyword}
onChange={handleKeywordChange}
placeholder="请输入关键词搜索"
fullWidth={false}
InputProps={{
endAdornment: <SearchIcon style={{ color: "#8A9099" }} />,
}}
sx={{
width: "340px",
marginRight: "16px",
}}
size="small"
></MyInput>
<MyButton
text="确认"
style={{ width: "68px" }}
onClick={() => {
getList();
}}
></MyButton>
</div> </div>
</div> </div>
</div> </div>
{!showAnimation && ( <div className={style.table}>
<div className={style.table}> <DatasetTable list={list} showData={showData}></DatasetTable>
{list.length !== 0 && ( </div>
<>
<div className={style.list}>
{list.map((item, index) => {
return (
<div
className={style.datasetLi}
key={item.id}
onClick={() => {
handleSelectItem(item.id);
}}
>
{isCadd && (
<div className={style.datasetLiTop}>
{graphicDimension === "2D" && (
<KekuleView id={`${index}2d`} smi={item.smiles} />
)}
{graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} />
)}
</div>
)}
<div className={style.datasetLiBottom}>
<div
className={style.datasetLiTitle}
title={item.smiles}
>
{item.smiles}
</div>
{showData.length !== 0 && (
<div className={style.datasetLiDataList}>
{Object.keys(item)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span
className={style.datasetLiDataLiKey}
>
{key}
</span>
<MyTooltip title={item[key]}>
<span
className={style.datasetLiDataLiValue}
>
{item[key]}
</span>
</MyTooltip>
</div>
);
})}
</div>
)}
{showData.length === 0 && (
<div className={style.noDataList}>
请选择显示数据
</div>
)}
</div>
{graphicDimension === "2D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{graphicDimension === "3D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
background: "RGBA(30, 38, 51, 1)",
border: "1px solid #565C66",
borderRadius: "2px",
}}
checked={selectItems.includes(item.id)}
/>
)}
</div>
);
})}
{nullBox.map((item, index) => {
return (
<div
className={classNames({
[style.datasetLi]: true,
[style.nullBox]: true,
})}
key={index + "null"}
></div>
);
})}
</div>
<div className={style.pagination}>
<MyPagination
page={page}
pageChange={pageChange}
count={count}
/>
</div>
</>
)}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</div>
)}
</div> </div>
<div className={style.foot}> <div className={style.foot}>
{isCadd && ( <MyButton
<MyButton variant="outlined"
variant="outlined" text={`下载(${selectItems.length})`}
text={`下载(${selectItems.length})`} style={{ marginRight: "12px" }}
style={{ marginRight: "12px" }} disabled={selectItems.length === 0}
disabled={selectItems.length === 0} onClick={() => setDownloadOpen(true)}
onClick={() => setDownloadOpen(true)} ></MyButton>
></MyButton>
)}
<MyButton <MyButton
disabled={selectItems.length === 0} disabled={selectItems.length === 0}
text={`另存为(${selectItems.length})`} text={`另存为(${selectItems.length})`}
......
src/views/Project/ProjectData/SeeDataset/indexCopy.module.css 0 → 100644
View file @ fdd7233b
.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/Project/ProjectData/SeeDataset/indexCopy.tsx 0 → 100644
View file @ fdd7233b
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import { useState, useMemo, useCallback, useEffect } from "react";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import MyMultipleMenu, { IOption } from "@/components/mui/MyMultipleMenu";
import MySelect from "@/components/mui/MySelect";
import MyInput from "@/components/mui/MyInput";
import MyButton from "@/components/mui/MyButton";
import SearchIcon from "@mui/icons-material/Search";
import MyPagination from "@/components/mui/MyPagination";
import NglView from "@/components/BusinessComponents/NglView";
import KekuleView from "@/components/BusinessComponents/KekuleView";
import Checkbox from "@mui/material/Checkbox";
import CloudEController from "@/api/fileserver/CloudEController";
import { getToken } from "@/utils/util";
import { observer } from "mobx-react-lite";
import { useStores } from "@/store";
import { toJS } from "mobx";
import classNames from "classnames";
import Save from "./components/Save";
import Download from "./components/Download";
import NoData from "@/components/BusinessComponents/NoData";
import MyTooltip from "@/components/mui/MyTooltip";
import style from "./index.module.css";
type ISeeDatasetProps = {
handleClose: any;
path: string;
fileToken: string;
projectId: string;
name: string;
};
const SeeDataset = observer((props: ISeeDatasetProps) => {
const { path, name, fileToken, projectId } = props;
const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品id 如：cadd
const token = getToken();
const [graphicDimension, setGraphicDimension] = useState("2D"); // 分子结构图是2D还是3D
const [showData, setShowData] = useState<Array<string>>([]); //显示的数据类型
const [dataTypes, setdataTypes] = useState<Array<IOption>>([]); // 可选的数据类型
const [sort, setSort] = useState("null"); // 排序方式
const [keyword, setKeyword] = useState(""); // 关键字
const [searchDataType, setSearchDataType] = useState<any>(null); // 搜索的数据属性
const [page, setPage] = useState(0); // 当前页码 // 请求接口的页码是从0开始的
const size = 8; // 每页数量
const [count, setCount] = useState(0); // 总页数
const [list, setList] = useState<Array<any>>([]); // 分子列表
const [selectItems, setSelectItems] = useState<Array<any>>([]);
const [saveOpen, setSaveOpen] = useState(false); // 另存为弹窗显示控制
const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制
const [showAnimation, setShowAnimation] = useState(true); // 弹窗动画变化中
const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表
// 解决图像渲染造成弹窗卡顿的问题
useEffect(() => {
setTimeout(() => {
setShowAnimation(false);
}, 300);
}, []);
const isCadd = useMemo(() => {
if (productId === "cadd") {
return true;
} else {
return false;
}
}, [productId]);
const handleSearchDataTypeChange = (e: any) => {
setSearchDataType(e);
};
const handleSortChange = (e: any) => {
setSort(e);
};
const handleKeywordChange = (e: any) => {
if (e.target.value.length <= 30) {
setKeyword(e.target.value);
}
};
const pageChange = (value: number) => {
setPage(value - 1);
};
// 空盒子用于布局
const nullBox = useMemo(() => {
if (list.length > 4) {
let nullBoxLength = 8 - list.length;
return new Array(nullBoxLength).fill("");
} else {
return [];
}
}, [list]);
// 获取分子列表
const getList = useCallback(
(paramsPage = 0) => {
setPage(paramsPage);
CloudEController.GetDatasetItemsList({
type: productId as string,
projectId: projectId as string,
token: token,
filetoken: fileToken as string,
path: path,
name: name,
page: paramsPage,
size,
index: searchDataType ? `${searchDataType}` : "",
sort: sort === "null" ? "" : sort,
query: keyword,
})
?.then((res) => {
setList(res.data.list);
setCount(res.data.totalPage - 1);
if (res.data.list && res.data.list.length > 0) {
if (res.data.list[0]) {
let arr: any = [];
Object.keys(res.data.list[0]).forEach((item) => {
if (
![
"meta",
"id",
// "canonical_smiles",
// "mol",
// "mol2",
// "pdb",
// "sdf",
// "sdf2d",
// "sdf3d",
// "smiles",
].includes(item)
) {
arr.push({ label: item, value: item });
}
});
if (firstGetList) {
setdataTypes(arr);
setSearchDataType(arr[0].value);
}
setFirstGetList(false);
}
}
})
?.catch((error) => {
console.log(error);
setList([]);
// Message.error(error?.response?.data?.message || "获取数据集信息失败");
// Message.error("未搜索到相关数据");
});
},
[
productId,
projectId,
token,
fileToken,
path,
name,
searchDataType,
sort,
keyword,
firstGetList,
// Message,
]
);
useEffect(() => {
getList(page);
}, [page]);
// 选择/取消分子
const handleSelectItem = (id: string) => {
let list: string[] = [...selectItems];
if (selectItems.filter((e) => e === id).length > 0) {
list = list.filter((e) => e !== id);
setSelectItems(list);
} else {
list.push(id);
setSelectItems(list);
}
};
return (
<FullScreenDrawer handleClose={props.handleClose} zIndex={1100}>
<div
className={classNames({
[style.datasetBox]: true,
[style.datasetBoxShowFoot]: true,
})}
>
<div className={style.top}>
<div className={style.title}>{name}</div>
<div className={style.screens}>
<div className={style.screensLeft}>
{isCadd && (
<RadioGroupOfButtonStyle
handleRadio={setGraphicDimension}
value={graphicDimension}
radioOptions={[
{
value: "2D",
label: "2D",
},
{
value: "3D",
label: "3D",
},
]}
RadiosBoxStyle={{ width: "132px" }}
/>
)}
<MyMultipleMenu
value={showData}
options={dataTypes}
setValue={setShowData}
showSelectAll={true}
>
<span className={style.selectShowData}>
选择显示数据({showData.length})
</span>
</MyMultipleMenu>
</div>
<div className={style.screensRight}>
<MySelect
options={dataTypes}
title={dataTypes.length === 0 ? "暂无属性" : "选择属性"}
isTitle={true}
value={searchDataType}
onChange={handleSearchDataTypeChange}
fullWidth={false}
disabled={dataTypes.length === 0}
sx={{
width: "160px",
marginRight: "16px",
height: "32px",
}}
></MySelect>
<MySelect
options={[
{
label: "无",
value: "null",
},
{
label: "正序",
value: "ASC",
},
{
label: "倒序",
value: "DESC",
},
]}
title="排序方式"
value={sort}
onChange={handleSortChange}
isTitle={true}
fullWidth={false}
sx={{
width: "160px",
marginRight: "16px",
height: "32px",
}}
></MySelect>
<MyInput
value={keyword}
onChange={handleKeywordChange}
placeholder="请输入关键词搜索"
fullWidth={false}
InputProps={{
endAdornment: <SearchIcon style={{ color: "#8A9099" }} />,
}}
sx={{
width: "340px",
marginRight: "16px",
}}
size="small"
></MyInput>
<MyButton
text="确认"
style={{ width: "68px" }}
onClick={() => {
getList();
}}
></MyButton>
</div>
</div>
</div>
{!showAnimation && (
<div className={style.table}>
{list.length !== 0 && (
<>
<div className={style.list}>
{list.map((item, index) => {
return (
<div
className={style.datasetLi}
key={item.id}
onClick={() => {
handleSelectItem(item.id);
}}
>
{isCadd && (
<div className={style.datasetLiTop}>
{graphicDimension === "2D" && (
<KekuleView id={`${index}2d`} smi={item.smiles} />
)}
{graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} />
)}
</div>
)}
<div className={style.datasetLiBottom}>
<div
className={style.datasetLiTitle}
title={item.smiles}
>
{item.smiles}
</div>
{showData.length !== 0 && (
<div className={style.datasetLiDataList}>
{Object.keys(item)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span
className={style.datasetLiDataLiKey}
>
{key}
</span>
<MyTooltip title={item[key]}>
<span
className={style.datasetLiDataLiValue}
>
{item[key]}
</span>
</MyTooltip>
</div>
);
})}
</div>
)}
{showData.length === 0 && (
<div className={style.noDataList}>
请选择显示数据
</div>
)}
</div>
{graphicDimension === "2D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{graphicDimension === "3D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
background: "RGBA(30, 38, 51, 1)",
border: "1px solid #565C66",
borderRadius: "2px",
}}
checked={selectItems.includes(item.id)}
/>
)}
</div>
);
})}
{nullBox.map((item, index) => {
return (
<div
className={classNames({
[style.datasetLi]: true,
[style.nullBox]: true,
})}
key={index + "null"}
></div>
);
})}
</div>
<div className={style.pagination}>
<MyPagination
page={page}
pageChange={pageChange}
count={count}
/>
</div>
</>
)}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</div>
)}
</div>
<div className={style.foot}>
{isCadd && (
<MyButton
variant="outlined"
text={`下载(${selectItems.length})`}
style={{ marginRight: "12px" }}
disabled={selectItems.length === 0}
onClick={() => setDownloadOpen(true)}
></MyButton>
)}
<MyButton
disabled={selectItems.length === 0}
text={`另存为(${selectItems.length})`}
onClick={() => setSaveOpen(true)}
></MyButton>
</div>
{saveOpen && (
<Save
type={productId as string}
projectId={projectId}
token={token}
fileToken={fileToken}
path={path}
name={name}
selectIds={selectItems}
open={saveOpen}
setOpen={setSaveOpen}
></Save>
)}
{downloadOpen && (
<Download
type={productId as string}
projectId={projectId}
token={token}
fileToken={fileToken}
path={path}
name={name}
selectIds={selectItems}
open={downloadOpen}
setOpen={setDownloadOpen}
></Download>
)}
</FullScreenDrawer>
);
});
export default SeeDataset;
src/views/demo/MyTableDemo/index.tsx
View file @ fdd7233b
...@@ -17,7 +17,7 @@ const MyTableDemo = () => { ...@@ -17,7 +17,7 @@ const MyTableDemo = () => {
const rows = [ const rows = [
{ {
a: "as123", a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
b: "werewrw", b: "werewrw",
c: "asdfasf", c: "asdfasf",
d: "asdfasdf", d: "asdfasdf",
...@@ -117,27 +117,27 @@ const MyTableDemo = () => { ...@@ -117,27 +117,27 @@ const MyTableDemo = () => {
{ {
id: "a", id: "a",
label: "属性a", label: "属性a",
width: "25%", width: "150",
}, },
{ {
id: "b", id: "b",
label: "属性b", label: "属性b",
width: "25%", width: "250",
}, },
{ {
id: "c", id: "c",
label: "属性c", label: "属性c",
width: "25%", width: "350",
}, },
{ {
id: "d", id: "d",
label: "属性d", label: "属性d",
width: "25%", width: "250",
}, },
{ {
id: "caozuo", id: "caozuo",
label: "操作", label: "操作",
width: "25%", width: "250",
}, },
]; ];
...@@ -145,22 +145,23 @@ const MyTableDemo = () => { ...@@ -145,22 +145,23 @@ const MyTableDemo = () => {
{ {
id: "a", id: "a",
label: "属性a", label: "属性a",
width: "25%", width: "200",
showOverflowTooltip: true,
}, },
{ {
id: "b", id: "b",
label: "属性b", label: "属性b",
width: "25%", width: "200",
}, },
{ {
id: "c", id: "c",
label: "属性c", label: "属性c",
width: "25%", // width: "200",
}, },
{ {
id: "d", id: "d",
label: "属性d", label: "属性d",
width: "25%", width: "200",
}, },
]; ];
...@@ -200,20 +201,20 @@ const MyTableDemo = () => { ...@@ -200,20 +201,20 @@ const MyTableDemo = () => {
<h2>常规表格</h2> <h2>常规表格</h2>
<div> <div>
<MyTable <MyTable
// rows={rows.map((row) => { rows={rows.map((row) => {
// return { return {
// ...row, ...row,
// caozuo: ( caozuo: (
// <MyButton <MyButton
// text="删除" text="删除"
// onClick={() => { onClick={() => {
// handleDelete(row.id); handleDelete(row.id);
// }} }}
// ></MyButton> ></MyButton>
// ), ),
// }; };
// })} })}
rows={[]} // rows={[]}
headCells={buttonHeadCells} headCells={buttonHeadCells}
selectItems={selectItems} selectItems={selectItems}
setSelectItems={setSelectItems} setSelectItems={setSelectItems}
...@@ -230,7 +231,7 @@ const MyTableDemo = () => { ...@@ -230,7 +231,7 @@ const MyTableDemo = () => {
/> />
</div> </div>
<h2>固定表头(需要指定每列宽度 不然对不齐)表格，内容滚动, </h2> <h2>固定表头(需要指定每列宽度 不然对不齐)表格，内容滚动, </h2>
<div style={{ height: "300px" }}> <div style={{ height: "300" }}>
<MyTable <MyTable
rows={rows} rows={rows}
headCells={headCells} headCells={headCells}
...@@ -259,7 +260,7 @@ const MyTableDemo = () => { ...@@ -259,7 +260,7 @@ const MyTableDemo = () => {
/> />
</div> </div>
<h2>带分页且固定表头(需要指定每列宽度 不然对不齐)的表格</h2> <h2>带分页且固定表头(需要指定每列宽度 不然对不齐)的表格</h2>
<div style={{ height: "300px" }}> <div style={{ height: "300" }}>
<MyTable <MyTable
rows={rows} rows={rows}
headCells={headCells} headCells={headCells}
......
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