Skip to content

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

feat: 数据集优化完成、差联调

parent fdd7233b
Show whitespace changes
Inline Side-by-side
Showing with 744 additions and 204 deletions
src/assets/project/card.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 5</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/图表排序">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#8A9099" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形备份-3" fill="#8A9099" x="3" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-7" fill="#8A9099" x="3" y="7.75" width="3.25" height="3.25"></rect>
<rect id="矩形备份-4" fill="#8A9099" x="7.75" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-9" fill="#8A9099" x="7.75" y="7.75" width="3.25" height="3.25"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/cardActive.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/图表排序备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/图表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#1370FF" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形备份-3" fill="#1370FF" x="3" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-7" fill="#1370FF" x="3" y="7.75" width="3.25" height="3.25"></rect>
<rect id="矩形备份-4" fill="#1370FF" x="7.75" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-9" fill="#1370FF" x="7.75" y="7.75" width="3.25" height="3.25"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/filter.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/筛选备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/筛选备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组" transform="translate(1.780000, 2.250000)" stroke="#565C66" stroke-linejoin="round" stroke-width="1.5">
<polygon id="路径-37" points="0 0 12.4359884 0 7.73913801 5.73968697 7.73913801 12 4.97439538 10.7631496 4.97439538 5.85023682"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/table.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/列表排序备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/列表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#8A9099" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形" fill="#8A9099" x="3" y="3" width="8" height="1.5"></rect>
<rect id="矩形备份-10" fill="#8A9099" x="3" y="6.25" width="8" height="1.5"></rect>
<rect id="矩形备份-11" fill="#8A9099" x="3" y="9.5" width="8" height="1.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/tableActive.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/列表排序备份 2</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/列表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#1370FF" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形" fill="#1370FF" x="3" y="3" width="8" height="1.5"></rect>
<rect id="矩形备份-10" fill="#1370FF" x="3" y="6.25" width="8" height="1.5"></rect>
<rect id="矩形备份-11" fill="#1370FF" x="3" y="9.5" width="8" height="1.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx
View file @ 0683510d
......@@ -8,12 +8,12 @@
*/
// 按钮样式的单选组
import classnames from "classnames";
import { useMemo } from "react";
import { ReactElement, useMemo } from "react";
import style from "./index.module.css";
type radioOption = {
value: string;
label: string;
label: string | ReactElement;
};
type IRadioGroupOfButtonStyleProps = {
......@@ -21,6 +21,7 @@ type IRadioGroupOfButtonStyleProps = {
value: string;
handleRadio: any;
RadiosBoxStyle?: object;
radioBoxStyle?: object;
radioStyle?: object;
radioActiveBgBoxStyle?: object;
};
......@@ -31,6 +32,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
value,
handleRadio,
RadiosBoxStyle,
radioBoxStyle,
radioStyle,
radioActiveBgBoxStyle,
} = props;
......@@ -72,6 +74,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
key={options.value}
className={style.radioBox}
onClick={() => handleRadio(options.value)}
style={radioBoxStyle}
>
<div
className={classnames({
......
src/components/mui/MyMultipleMenu.tsx
View file @ 0683510d
......@@ -82,6 +82,7 @@ type IMyMultipleMenuProps = {
showSelectAll?: boolean; // 是否显示全选
selectAllText?: string; // 全选的文字
showHiddenIcon?: boolean; // 是否显示 展开收起箭头
iconColor?: string; // 展开收起箭头的颜色
};
const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
......@@ -93,6 +94,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
showSelectAll = false,
selectAllText = "全部",
showHiddenIcon = true,
iconColor,
} = props;
// 下拉框展示的相对位置参考元素
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
......@@ -138,9 +140,15 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
const randerShowHiddenIcon = () => {
if (Boolean(anchorEl)) {
return <ArrowDropUpIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
return (
<ArrowDropUpIcon sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }} />
);
} else {
return <ArrowDropDownIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
return (
<ArrowDropDownIcon
sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }}
/>
);
}
};
......
src/components/mui/MyTableNew.tsx
View file @ 0683510d
......@@ -16,7 +16,7 @@ import { createTheme, ThemeProvider } from "@mui/material";
import MyTooltip from "./MyTooltip";
import noFile from "@/assets/project/noFile.svg";
type Order = "asc" | "desc"; // 升序为asc，降序为desc。
type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
export type sortState = {
field: string | null | undefined | ""; // 根据哪个属性来排序
......@@ -193,9 +193,6 @@ const MyTable = (props: IMyTableProps) => {
left: 0,
right: 0,
margin: "auto",
// top: "50%",
// left: "50%",
// transform: "translate(-50%, -50%)",
zIndex: 1,
},
},
......@@ -204,15 +201,16 @@ const MyTable = (props: IMyTableProps) => {
});
}, [hasCheckbox, hasTableFooter, loading]);
const onSelectAllClick = useCallback(() => {
return (e: any) => {
const onSelectAllClick = useCallback(
(e: any) => {
if (e.target.checked) {
setSelectItems && setSelectItems(rows.map((row) => row[key]));
} else {
setSelectItems && setSelectItems([]);
}
};
}, [setSelectItems, key, rows]);
},
[setSelectItems, key, rows]
);
const onSelectRowClick = useCallback(
(e: any, itemValue: string) => {
......@@ -233,26 +231,26 @@ const MyTable = (props: IMyTableProps) => {
const handleSort = useCallback(
(field: string) => {
if (sortState?.field === field) {
if (sortState?.order === "asc") {
if (sortState?.order === "ASC") {
setSortState({
field,
order: "desc",
order: "DESC",
});
} else if (sortState?.order === "desc") {
} else if (sortState?.order === "DESC") {
setSortState({
field,
order: "asc",
order: "ASC",
});
} else {
setSortState({
field,
order: "desc",
order: "DESC",
});
}
} else {
setSortState({
field,
order: "desc",
order: "DESC",
});
}
},
......@@ -270,7 +268,7 @@ const MyTable = (props: IMyTableProps) => {
selectItems.length > 0 && selectItems.length < rows.length
}
checked={rows.length > 0 && selectItems.length === rows.length}
onChange={onSelectAllClick}
onChange={(e) => onSelectAllClick(e)}
/>
</TableCell>
)}
......@@ -282,9 +280,9 @@ const MyTable = (props: IMyTableProps) => {
<img
src={
sortState?.field === headCell.id
? sortState?.order === "asc"
? sortState?.order === "ASC"
? ascIcon
: sortState?.order === "desc"
: sortState?.order === "DESC"
? descIcon
: sortIcon
: sortIcon
......
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.module.css 0 → 100644
View file @ 0683510d
.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;
}
.nullBox {
visibility: hidden;
}
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.tsx
View file @ 0683510d
import { useState, useEffect, useMemo } from "react";
import { useMemo } from "react";
import NglView from "@/components/BusinessComponents/NglView";
import KekuleView from "@/components/BusinessComponents/KekuleView";
import MyTooltip from "@/components/mui/MyTooltip";
import Checkbox from "@mui/material/Checkbox";
import style from "./index.module.css";
import classNames from "classnames";
import NoData from "@/components/BusinessComponents/NoData";
type IDatasetCardTableProps = {};
type IDatasetCardTableProps = {
list: Array<any>;
graphicDimension: string;
showData: Array<string>;
selectItems: Array<string>;
setSelectItems: any;
};
const DatasetCardTable = (props: IDatasetCardTableProps) => {
const { list, graphicDimension, showData, selectItems, setSelectItems } =
props;
// 选择/取消分子
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);
}
};
// 空盒子用于布局
const nullBox = useMemo(() => {
if (list.length > 4) {
let nullBoxLength = 8 - list.length;
return new Array(nullBoxLength).fill("");
} else {
return [];
}
}, [list]);
return (
<>
{list.length !== 0 && (
<>
<div className={style.list}>
{list.map((item, index) => {
return (
<div
className={style.datasetLi}
key={item.id}
onClick={() => {
handleSelectItem(item.id);
}}
>
<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>
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
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>
</>
)}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</>
);
};
......
src/views/Project/ProjectData/SeeDataset/components/DatasetTable/index.tsx
View file @ 0683510d
import { useState, useEffect, useMemo } from "react";
import { useMemo } from "react";
import MyTable from "@/components/mui/MyTableNew";
import { sortState } from "@/components/mui/MyTableNew";
type IDatasetTableProps = {
list: Array<any>;
showData: Array<string>;
selectItems: Array<any>;
setSelectItems: any;
sortState: sortState;
setSortState: any;
};
const DatasetTable = (props: IDatasetTableProps) => {
console.log(window.innerWidth);
const { list, showData } = props;
const {
list,
showData,
selectItems,
setSelectItems,
sortState,
setSortState,
} = 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`;
? window.innerWidth - 112
: `${(window.innerWidth - 112) / showData.length}`;
return showData.map((item, index) => {
return {
id: item,
label: item,
width,
showOverflowTooltip: true,
// width: index ? width : "",
// width: "100%",
// width: "200px",
sort: true,
};
});
......@@ -34,6 +41,10 @@ const DatasetTable = (props: IDatasetTableProps) => {
headCells={headCells}
hasCheckbox={true}
fixedHead={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
sortState={sortState}
setSortState={setSortState}
></MyTable>
);
};
......
src/views/Project/ProjectData/SeeDataset/components/Download/index.tsx
View file @ 0683510d
......@@ -102,7 +102,6 @@ const Download = (props: IDownloadProps) => {
value={downloadType}
options={options}
onChange={(e) => handleChange(e)}
// fullWidth={true}
title="下载格式"
isTitle={true}
sx={{
......
src/views/Project/ProjectData/SeeDataset/index.module.css
View file @ 0683510d
......@@ -30,134 +30,114 @@
justify-content: flex-start;
align-items: center;
}
.screensRight {
display: flex;
justify-content: flex-end;
align-items: center;
.separator {
width: 1px;
height: 20px;
background-color: rgba(230, 232, 235, 1);
margin: 0 15px;
}
.selectShowData {
margin-left: 24px;
font-size: 14px;
.graphicDimension {
line-height: 22px;
padding: 5px 16px;
color: rgba(138, 144, 153, 1);
background-color: #fff;
border-radius: 4px;
cursor: pointer;
}
.graphicDimensionActive {
color: rgba(19, 112, 255, 1);
background-color: rgba(240, 242, 245, 1);
}
.table {
flex: 1;
overflow-y: overlay;
display: flex;
flex-direction: column;
.marginRight20 {
margin-right: 20px;
}
.list {
flex: 1;
.screensRight {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
position: relative;
}
.datasetLi {
flex: 1;
min-width: 20%;
margin: 0 16px 16px 0;
border: 1px solid rgba(235, 237, 240, 1);
.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;
min-height: 275px;
z-index: 10;
padding: 20px 24px 24px;
box-sizing: border-box;
position: relative;
}
.searchBox img {
cursor: pointer;
}
.datasetLi:nth-child(4n) {
margin-right: 0;
.searchTop {
margin-bottom: 12px;
}
.datasetLi:nth-last-child(1) {
margin-bottom: 0;
.searchTopText {
display: inline-block;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
margin-right: 16px;
font-weight: 600;
}
.datasetLi:nth-last-child(2) {
margin-bottom: 0;
.width250 {
width: 250px;
}
.datasetLi:nth-last-child(3) {
margin-bottom: 0;
.width120 {
width: 120px;
}
.datasetLi:nth-last-child(4) {
margin-bottom: 0;
.width180 {
width: 180px;
}
.datasetLiTop {
height: 55%;
box-sizing: border-box;
.searchList {
margin-bottom: 24px;
}
.datasetLiBottom {
height: 45%;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
.searchLi {
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;
justify-content: flex-start;
align-items: center;
margin-bottom: 16px;
}
.noDataList {
flex: 1;
.searchFooter {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
color: rgba(138, 144, 153, 1);
}
.searchFooterLeft {
color: rgba(19, 112, 255, 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;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.datasetLiDataLiValue {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
.selectShowData {
font-size: 14px;
color: rgba(30, 38, 51, 1);
}
.pagination {
height: 76px;
min-height: 76px;
.table {
flex: 1;
overflow-y: overlay;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.foot {
position: absolute;
bottom: 0;
background-color: #fff;
width: 100%;
width: calc(100vw - 64px);
box-sizing: border-box;
height: 64px;
height: 76px;
padding: 0 32px;
margin: 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;
.borderTop {
border-top: 1px solid rgba(240, 242, 245, 1);
}
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ 0683510d
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import { useState, useMemo, useCallback, useEffect } from "react";
import { useState, 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";
......@@ -20,8 +14,18 @@ import Save from "./components/Save";
import Download from "./components/Download";
import DatasetCardTable from "./components/DatasetCardTable";
import DatasetTable from "./components/DatasetTable";
import MyTooltip from "@/components/mui/MyTooltip";
import table from "@/assets/project/table.svg";
import tableActive from "@/assets/project/tableActive.svg";
import card from "@/assets/project/card.svg";
import cardActive from "@/assets/project/cardActive.svg";
import filter from "@/assets/project/filter.svg";
import jobDel from "@/assets/project/jobDel.svg";
import style from "./index.module.css";
import _ from "lodash";
import AddIcon from "@mui/icons-material/Add";
import MySelect from "@/components/mui/MySelect";
import { sortState } from "@/components/mui/MyTableNew";
import MyInput from "@/components/mui/MyInput";
type ISeeDatasetProps = {
handleClose: any;
......@@ -31,6 +35,12 @@ type ISeeDatasetProps = {
name: string;
};
type IQuery = {
index: any;
compare: ">" | "<" | ">=" | "<=" | "=" | "≈";
query: any;
};
const SeeDataset = observer((props: ISeeDatasetProps) => {
const { path, name, fileToken, projectId } = props;
const { currentProjectStore } = useStores();
......@@ -39,11 +49,22 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
const [tableType, setTableType] = useState<"table" | "card">("table");
const [graphicDimension, setGraphicDimension] = useState("2D"); // 分子结构图是2D还是3D
const [showData, setShowData] = useState<Array<string>>([]); //显示的数据类型
console.log(showData);
const [showSearchBox, setShowSearchBox] = useState<boolean>(true); // 高级筛选显示隐藏控制
const [hasSmiles, setHasSmiles] = useState(false);
const [dataTypes, setdataTypes] = useState<Array<IOption>>([]); // 可选的数据类型
const [sort, setSort] = useState("null"); // 排序方式
const [keyword, setKeyword] = useState(""); // 关键字
const [searchDataType, setSearchDataType] = useState<any>(null); // 搜索的数据属性
const [sortState, setSortState] = useState<sortState>({
field: null,
order: null,
});
console.log(sortState);
const [querylist, setQuerylist] = useState<Array<IQuery>>([]);
const [queryInit, setQueryInit] = useState<IQuery>({
index: "",
compare: ">",
query: "",
});
// const [searchDataType, setSearchDataType] = useState<any>(null); // 搜索的数据属性
const [page, setPage] = useState(0); // 当前页码 // 请求接口的页码是从0开始的
const size = 8; // 每页数量
const [count, setCount] = useState(0); // 总页数
......@@ -53,13 +74,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制
const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表
const handleSearchDataTypeChange = (e: any) => {
setSearchDataType(e);
};
const handleSortChange = (e: any) => {
setSort(e);
};
// const handleSortChange = (e: any) => {
// setSort(e);
// };
const pageChange = (value: number) => {
setPage(value - 1);
......@@ -78,9 +95,8 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
name: name,
page: paramsPage,
size,
index: searchDataType ? `${searchDataType}` : "",
index: "",
sort: sort === "null" ? "" : sort,
query: keyword,
})
?.then((res) => {
setList(res.data.list);
......@@ -88,6 +104,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
if (res.data.list && res.data.list.length > 0) {
if (res.data.list[0]) {
let arr: any = [];
let _hasSmiles = false;
Object.keys(res.data.list[0]).forEach((item) => {
if (
![
......@@ -105,10 +122,26 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
) {
arr.push({ label: item, value: item });
}
if (item === "smiles") {
_hasSmiles = true;
}
});
if (firstGetList) {
setdataTypes(arr);
setSearchDataType(arr[0].value);
setShowData(arr.slice(0, 5).map((item: any) => item.value));
setHasSmiles(_hasSmiles);
setQuerylist([
{
index: arr[0]?.value || "",
compare: ">",
query: "",
},
]);
setQueryInit({
index: arr[0]?.value || "",
compare: ">",
query: "",
});
}
setFirstGetList(false);
}
......@@ -119,34 +152,59 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
setList([]);
});
},
[
productId,
projectId,
token,
fileToken,
path,
name,
searchDataType,
sort,
keyword,
firstGetList,
]
[productId, projectId, token, fileToken, path, name, sort, firstGetList]
);
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);
}
const handleIndexChange = (e: any, subscriptIndex: number) => {
let arr = _.cloneDeep(querylist);
console.log(e);
arr[subscriptIndex].index = e;
setQuerylist(arr);
};
const handleCompareChange = (e: any, subscriptIndex: number) => {
let arr = _.cloneDeep(querylist);
console.log(e);
arr[subscriptIndex].compare = e;
setQuerylist(arr);
};
const handleQueryChange = (e: any, subscriptIndex: number) => {
let arr = _.cloneDeep(querylist);
console.log(e);
arr[subscriptIndex].query = e.target.value;
setQuerylist(arr);
};
const handleDeleteQuery = (index: number) => {
let arr = _.cloneDeep(querylist);
arr.splice(index, 1);
setQuerylist(arr);
};
const handleInitQuerylist = () => {
setQuerylist([{ ...queryInit }]);
};
// 点击其他地方隐藏高级筛选
useEffect(() => {
document.addEventListener("click", (e) => {
setShowSearchBox(false);
});
}, []);
// 高级筛选box取消冒泡
const handlestopBubble = (e: any) => {
e.nativeEvent.stopImmediatePropagation();
};
const handleShowSearchBox = (e: any) => {
e.nativeEvent.stopImmediatePropagation();
setShowSearchBox(!showSearchBox);
};
return (
......@@ -161,41 +219,66 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
<div className={style.title}>{name}</div>
<div className={style.screens}>
<div className={style.screensLeft}>
{hasSmiles && (
<>
<RadioGroupOfButtonStyle
handleRadio={setTableType}
value={tableType}
radioBoxStyle={{ minWidth: "40px" }}
radioStyle={{ padding: "0" }}
radioOptions={[
{
value: "table",
label: "表格",
label: (
<img
src={tableType === "table" ? tableActive : table}
alt=""
></img>
),
},
{
value: "card",
label: "卡片",
label: (
<img
src={tableType === "card" ? cardActive : card}
alt=""
></img>
),
},
]}
/>
<div className={style.separator}>分隔线</div>
<RadioGroupOfButtonStyle
handleRadio={setGraphicDimension}
value={graphicDimension}
radioOptions={[
{
value: "2D",
label: "2D",
},
{
value: "3D",
label: "3D",
},
]}
RadiosBoxStyle={{ width: "132px" }}
/>
<div className={style.separator}></div>
</>
)}
{tableType === "card" && hasSmiles && (
<>
<div
className={classNames({
[style.graphicDimension]: true,
[style.graphicDimensionActive]: graphicDimension === "2D",
})}
onClick={() => setGraphicDimension("2D")}
>
2D
</div>
<div
className={classNames({
[style.graphicDimension]: true,
[style.graphicDimensionActive]: graphicDimension === "3D",
[style.marginRight20]: true,
})}
onClick={() => setGraphicDimension("3D")}
>
3D
</div>
</>
)}
<MyMultipleMenu
value={showData}
options={dataTypes}
setValue={setShowData}
showSelectAll={true}
iconColor="rgba(138, 144, 153, 1)"
>
<span className={style.selectShowData}>
选择显示数据({showData.length})
......@@ -203,27 +286,182 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
</MyMultipleMenu>
</div>
<div className={style.screensRight}>
<MyButton text="高级筛选" onClick={() => {}}></MyButton>
</div>
<MyButton
text="高级筛选"
onClick={(e: any) => {
handleShowSearchBox(e);
}}
variant="outlined"
color="secondary"
img={
<img
src={filter}
alt=""
style={{ marginRight: "10px" }}
></img>
}
></MyButton>
{showSearchBox && (
<div
className={style.searchBox}
onClick={(e) => handlestopBubble(e)}
>
<div className={style.searchTop}>
<span
className={classNames({
[style.searchTopText]: true,
[style.width250]: true,
})}
>
选择属性
</span>
<span
className={classNames({
[style.searchTopText]: true,
[style.width120]: true,
})}
>
比较符
</span>
<span
className={classNames({
[style.searchTopText]: true,
[style.width180]: true,
})}
>
比较值
</span>
</div>
<div className={style.searchList}>
{querylist.map((item, index) => {
return (
<div className={style.searchLi}>
<MySelect
options={dataTypes}
placeholder="请选择属性"
value={item.index}
sx={{ marginRight: "16px", width: "250px" }}
onChange={(e) => handleIndexChange(e, index)}
></MySelect>
<MySelect
value={item.compare}
onChange={(e) => handleCompareChange(e, index)}
options={[
{
label: ">",
value: ">",
},
{
label: "<",
value: "<",
},
{
label: ">=",
value: ">=",
},
{
label: "<=",
value: "<=",
},
{
label: "=",
value: "=",
},
{
label: "≈",
value: "≈",
},
]}
sx={{ marginRight: "16px", width: "120px" }}
></MySelect>
<MyInput
value={item.query}
onChange={(e) => handleQueryChange(e, index)}
sx={{ marginRight: "16px", width: "180px" }}
></MyInput>
<img
onClick={() => handleDeleteQuery(index)}
src={jobDel}
alt=""
/>
</div>
<div className={style.table}>
<DatasetTable list={list} showData={showData}></DatasetTable>
);
})}
</div>
<div className={style.searchFooter}>
<div
className={style.searchFooterLeft}
onClick={() =>
setQuerylist([...querylist, { ...queryInit }])
}
>
<AddIcon sx={{ fontSize: "20px", marginRight: "6px" }} />
<span>添加条件</span>
</div>
<div className={style.foot}>
<div className={style.searchFooterRight}>
<MyButton
variant="outlined"
text={`下载(${selectItems.length})`}
text="重置"
style={{ marginRight: "12px" }}
disabled={selectItems.length === 0}
onClick={() => setDownloadOpen(true)}
onClick={() => handleInitQuerylist()}
color="secondary"
></MyButton>
<MyButton
text="筛选"
onClick={() => setSaveOpen(true)}
></MyButton>
</div>
</div>
</div>
)}
</div>
</div>
</div>
<div className={style.table}>
{tableType === "table" && (
<DatasetTable
list={list}
showData={showData}
selectItems={selectItems}
setSelectItems={setSelectItems}
sortState={sortState}
setSortState={setSortState}
></DatasetTable>
)}
{tableType === "card" && (
<DatasetCardTable
list={list}
graphicDimension={graphicDimension}
showData={showData}
selectItems={selectItems}
setSelectItems={setSelectItems}
></DatasetCardTable>
)}
</div>
</div>
<div
className={classNames({
[style.foot]: true,
[style.borderTop]: tableType === "table",
})}
>
{selectItems.length === 0 && (
<MyPagination page={page} pageChange={pageChange} count={count} />
)}
{selectItems.length !== 0 && (
<>
<MyButton
disabled={selectItems.length === 0}
text={`另存为(${selectItems.length})`}
style={{ marginRight: "12px" }}
onClick={() => setSaveOpen(true)}
></MyButton>
<MyButton
variant="outlined"
text={`下载(${selectItems.length})`}
onClick={() => setDownloadOpen(true)}
></MyButton>
</>
)}
</div>
{saveOpen && (
<Save
......
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