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 @@ ...@@ -8,12 +8,12 @@
*/ */
// 按钮样式的单选组 // 按钮样式的单选组
import classnames from "classnames"; import classnames from "classnames";
import { useMemo } from "react"; import { ReactElement, useMemo } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
type radioOption = { type radioOption = {
value: string; value: string;
label: string; label: string | ReactElement;
}; };
type IRadioGroupOfButtonStyleProps = { type IRadioGroupOfButtonStyleProps = {
...@@ -21,6 +21,7 @@ type IRadioGroupOfButtonStyleProps = { ...@@ -21,6 +21,7 @@ type IRadioGroupOfButtonStyleProps = {
value: string; value: string;
handleRadio: any; handleRadio: any;
RadiosBoxStyle?: object; RadiosBoxStyle?: object;
radioBoxStyle?: object;
radioStyle?: object; radioStyle?: object;
radioActiveBgBoxStyle?: object; radioActiveBgBoxStyle?: object;
}; };
...@@ -31,6 +32,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => { ...@@ -31,6 +32,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
value, value,
handleRadio, handleRadio,
RadiosBoxStyle, RadiosBoxStyle,
radioBoxStyle,
radioStyle, radioStyle,
radioActiveBgBoxStyle, radioActiveBgBoxStyle,
} = props; } = props;
...@@ -72,6 +74,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => { ...@@ -72,6 +74,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
key={options.value} key={options.value}
className={style.radioBox} className={style.radioBox}
onClick={() => handleRadio(options.value)} onClick={() => handleRadio(options.value)}
style={radioBoxStyle}
> >
<div <div
className={classnames({ className={classnames({
......
src/components/mui/MyMultipleMenu.tsx
View file @ 0683510d
...@@ -82,6 +82,7 @@ type IMyMultipleMenuProps = { ...@@ -82,6 +82,7 @@ type IMyMultipleMenuProps = {
showSelectAll?: boolean; // 是否显示全选 showSelectAll?: boolean; // 是否显示全选
selectAllText?: string; // 全选的文字 selectAllText?: string; // 全选的文字
showHiddenIcon?: boolean; // 是否显示 展开收起箭头 showHiddenIcon?: boolean; // 是否显示 展开收起箭头
iconColor?: string; // 展开收起箭头的颜色
}; };
const MyMultipleMenu = (props: IMyMultipleMenuProps) => { const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
...@@ -93,6 +94,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => { ...@@ -93,6 +94,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
showSelectAll = false, showSelectAll = false,
selectAllText = "全部", selectAllText = "全部",
showHiddenIcon = true, showHiddenIcon = true,
iconColor,
} = props; } = props;
// 下拉框展示的相对位置参考元素 // 下拉框展示的相对位置参考元素
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
...@@ -138,9 +140,15 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => { ...@@ -138,9 +140,15 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
const randerShowHiddenIcon = () => { const randerShowHiddenIcon = () => {
if (Boolean(anchorEl)) { if (Boolean(anchorEl)) {
return <ArrowDropUpIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />; return (
<ArrowDropUpIcon sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }} />
);
} else { } 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"; ...@@ -16,7 +16,7 @@ import { createTheme, ThemeProvider } from "@mui/material";
import MyTooltip from "./MyTooltip"; 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。
export type sortState = { export type sortState = {
field: string | null | undefined | ""; // 根据哪个属性来排序 field: string | null | undefined | ""; // 根据哪个属性来排序
...@@ -193,9 +193,6 @@ const MyTable = (props: IMyTableProps) => { ...@@ -193,9 +193,6 @@ const MyTable = (props: IMyTableProps) => {
left: 0, left: 0,
right: 0, right: 0,
margin: "auto", margin: "auto",
// top: "50%",
// left: "50%",
// transform: "translate(-50%, -50%)",
zIndex: 1, zIndex: 1,
}, },
}, },
...@@ -204,15 +201,16 @@ const MyTable = (props: IMyTableProps) => { ...@@ -204,15 +201,16 @@ const MyTable = (props: IMyTableProps) => {
}); });
}, [hasCheckbox, hasTableFooter, loading]); }, [hasCheckbox, hasTableFooter, loading]);
const onSelectAllClick = useCallback(() => { const onSelectAllClick = useCallback(
return (e: any) => { (e: any) => {
if (e.target.checked) { if (e.target.checked) {
setSelectItems && setSelectItems(rows.map((row) => row[key])); setSelectItems && setSelectItems(rows.map((row) => row[key]));
} else { } else {
setSelectItems && setSelectItems([]); setSelectItems && setSelectItems([]);
} }
}; },
}, [setSelectItems, key, rows]); [setSelectItems, key, rows]
);
const onSelectRowClick = useCallback( const onSelectRowClick = useCallback(
(e: any, itemValue: string) => { (e: any, itemValue: string) => {
...@@ -233,26 +231,26 @@ const MyTable = (props: IMyTableProps) => { ...@@ -233,26 +231,26 @@ const MyTable = (props: IMyTableProps) => {
const handleSort = useCallback( const handleSort = useCallback(
(field: string) => { (field: string) => {
if (sortState?.field === field) { if (sortState?.field === field) {
if (sortState?.order === "asc") { if (sortState?.order === "ASC") {
setSortState({ setSortState({
field, field,
order: "desc", order: "DESC",
}); });
} else if (sortState?.order === "desc") { } else if (sortState?.order === "DESC") {
setSortState({ setSortState({
field, field,
order: "asc", order: "ASC",
}); });
} else { } else {
setSortState({ setSortState({
field, field,
order: "desc", order: "DESC",
}); });
} }
} else { } else {
setSortState({ setSortState({
field, field,
order: "desc", order: "DESC",
}); });
} }
}, },
...@@ -270,7 +268,7 @@ const MyTable = (props: IMyTableProps) => { ...@@ -270,7 +268,7 @@ const MyTable = (props: IMyTableProps) => {
selectItems.length > 0 && selectItems.length < rows.length selectItems.length > 0 && selectItems.length < rows.length
} }
checked={rows.length > 0 && selectItems.length === rows.length} checked={rows.length > 0 && selectItems.length === rows.length}
onChange={onSelectAllClick} onChange={(e) => onSelectAllClick(e)}
/> />
</TableCell> </TableCell>
)} )}
...@@ -282,9 +280,9 @@ const MyTable = (props: IMyTableProps) => { ...@@ -282,9 +280,9 @@ const MyTable = (props: IMyTableProps) => {
<img <img
src={ src={
sortState?.field === headCell.id sortState?.field === headCell.id
? sortState?.order === "asc" ? sortState?.order === "ASC"
? ascIcon ? ascIcon
: sortState?.order === "desc" : sortState?.order === "DESC"
? descIcon ? descIcon
: sortIcon : sortIcon
: 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 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 ( return (
<div> <div
table className={style.datasetLiDataLi}
<div style={{ height: "300px" }}>123</div> key={index}
<div style={{ height: "300px" }}>123</div> >
<div style={{ height: "300px" }}>123</div> <span className={style.datasetLiDataLiKey}>
<div style={{ height: "300px" }}>123</div> {key}
<div style={{ height: "300px" }}>123</div> </span>
<div style={{ height: "300px" }}>123</div> <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>
</>
)}
{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 MyTable from "@/components/mui/MyTableNew";
import { sortState } from "@/components/mui/MyTableNew";
type IDatasetTableProps = { type IDatasetTableProps = {
list: Array<any>; list: Array<any>;
showData: Array<string>; showData: Array<string>;
selectItems: Array<any>;
setSelectItems: any;
sortState: sortState;
setSortState: any;
}; };
const DatasetTable = (props: IDatasetTableProps) => { const DatasetTable = (props: IDatasetTableProps) => {
console.log(window.innerWidth); const {
const { list, showData } = props; list,
showData,
selectItems,
setSelectItems,
sortState,
setSortState,
} = props;
const headCells = useMemo(() => { const headCells = useMemo(() => {
// let width = showData.length === 0 ? "100%" : `${100 / showData.length}%`;
let width = let width =
showData.length === 0 showData.length === 0
? "100%" ? window.innerWidth - 112
: `${(window.innerWidth - 112) / showData.length}px`; : `${(window.innerWidth - 112) / showData.length}`;
return showData.map((item, index) => { return showData.map((item, index) => {
return { return {
id: item, id: item,
label: item, label: item,
width, width,
showOverflowTooltip: true, showOverflowTooltip: true,
// width: index ? width : "",
// width: "100%",
// width: "200px",
sort: true, sort: true,
}; };
}); });
...@@ -34,6 +41,10 @@ const DatasetTable = (props: IDatasetTableProps) => { ...@@ -34,6 +41,10 @@ const DatasetTable = (props: IDatasetTableProps) => {
headCells={headCells} headCells={headCells}
hasCheckbox={true} hasCheckbox={true}
fixedHead={true} fixedHead={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
sortState={sortState}
setSortState={setSortState}
></MyTable> ></MyTable>
); );
}; };
......
src/views/Project/ProjectData/SeeDataset/components/Download/index.tsx
View file @ 0683510d
...@@ -102,7 +102,6 @@ const Download = (props: IDownloadProps) => { ...@@ -102,7 +102,6 @@ const Download = (props: IDownloadProps) => {
value={downloadType} value={downloadType}
options={options} options={options}
onChange={(e) => handleChange(e)} onChange={(e) => handleChange(e)}
// fullWidth={true}
title="下载格式" title="下载格式"
isTitle={true} isTitle={true}
sx={{ sx={{
......
src/views/Project/ProjectData/SeeDataset/index.module.css
View file @ 0683510d
...@@ -30,134 +30,114 @@ ...@@ -30,134 +30,114 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.screensRight { .separator {
display: flex; width: 1px;
justify-content: flex-end; height: 20px;
align-items: center; background-color: rgba(230, 232, 235, 1);
margin: 0 15px;
} }
.selectShowData { .graphicDimension {
margin-left: 24px; line-height: 22px;
font-size: 14px; padding: 5px 16px;
color: rgba(138, 144, 153, 1);
background-color: #fff;
border-radius: 4px;
cursor: pointer;
}
.graphicDimensionActive {
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
background-color: rgba(240, 242, 245, 1);
} }
.table { .marginRight20 {
flex: 1; margin-right: 20px;
overflow-y: overlay;
display: flex;
flex-direction: column;
} }
.list { .screensRight {
flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
flex-wrap: wrap; align-items: center;
position: relative;
} }
.datasetLi { .searchBox {
flex: 1; position: absolute;
min-width: 20%; top: 36px;
margin: 0 16px 16px 0; right: 0;
border: 1px solid rgba(235, 237, 240, 1); width: 662px;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
background-color: #fff;
border-radius: 4px; border-radius: 4px;
min-height: 275px; z-index: 10;
padding: 20px 24px 24px;
box-sizing: border-box; box-sizing: border-box;
position: relative; }
.searchBox img {
cursor: pointer; cursor: pointer;
} }
.datasetLi:nth-child(4n) { .searchTop {
margin-right: 0; margin-bottom: 12px;
} }
.datasetLi:nth-last-child(1) { .searchTopText {
margin-bottom: 0; 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) { .width250 {
margin-bottom: 0; width: 250px;
} }
.datasetLi:nth-last-child(3) { .width120 {
margin-bottom: 0; width: 120px;
} }
.datasetLi:nth-last-child(4) { .width180 {
margin-bottom: 0; width: 180px;
} }
.datasetLiTop { .searchList {
height: 55%; margin-bottom: 24px;
box-sizing: border-box;
} }
.datasetLiBottom { .searchLi {
height: 45%;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
display: flex; display: flex;
flex-direction: column; justify-content: flex-start;
} align-items: center;
.datasetLiTitle { margin-bottom: 16px;
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 { .searchFooter {
flex: 1;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; }
color: rgba(138, 144, 153, 1); .searchFooterLeft {
color: rgba(19, 112, 255, 1);
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
}
.datasetLiDataLi {
height: 20px;
line-height: 20px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
padding: 0 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
} align-items: center;
.datasetLiDataLi:nth-child(2n) { cursor: pointer;
background-color: rgba(235, 237, 240, 1);
}
.datasetLiDataLiKey {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
} }
.datasetLiDataLiValue { .selectShowData {
max-width: 50%; font-size: 14px;
white-space: nowrap; color: rgba(30, 38, 51, 1);
display: block;
overflow: hidden;
text-overflow: ellipsis;
} }
.pagination { .table {
height: 76px; flex: 1;
min-height: 76px; overflow-y: overlay;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
} }
.foot { .foot {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background-color: #fff; background-color: #fff;
width: 100%; width: calc(100vw - 64px);
box-sizing: border-box; box-sizing: border-box;
height: 64px; height: 76px;
padding: 0 32px; padding: 0 32px;
margin: 0 32px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
box-shadow: 0px -3px 10px 0px rgba(0, 24, 57, 0.04);
} }
.nullBox { .borderTop {
visibility: hidden; 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 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 RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import MyMultipleMenu, { IOption } from "@/components/mui/MyMultipleMenu"; 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 MyButton from "@/components/mui/MyButton";
import SearchIcon from "@mui/icons-material/Search";
import MyPagination from "@/components/mui/MyPagination"; 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 CloudEController from "@/api/fileserver/CloudEController";
import { getToken } from "@/utils/util"; import { getToken } from "@/utils/util";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
...@@ -20,8 +14,18 @@ import Save from "./components/Save"; ...@@ -20,8 +14,18 @@ import Save from "./components/Save";
import Download from "./components/Download"; import Download from "./components/Download";
import DatasetCardTable from "./components/DatasetCardTable"; import DatasetCardTable from "./components/DatasetCardTable";
import DatasetTable from "./components/DatasetTable"; 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 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 = { type ISeeDatasetProps = {
handleClose: any; handleClose: any;
...@@ -31,6 +35,12 @@ type ISeeDatasetProps = { ...@@ -31,6 +35,12 @@ type ISeeDatasetProps = {
name: string; name: string;
}; };
type IQuery = {
index: any;
compare: ">" | "<" | ">=" | "<=" | "=" | "≈";
query: any;
};
const SeeDataset = observer((props: ISeeDatasetProps) => { const SeeDataset = observer((props: ISeeDatasetProps) => {
const { path, name, fileToken, projectId } = props; const { path, name, fileToken, projectId } = props;
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
...@@ -39,11 +49,22 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -39,11 +49,22 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
const [tableType, setTableType] = useState<"table" | "card">("table"); 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 [showSearchBox, setShowSearchBox] = useState<boolean>(true); // 高级筛选显示隐藏控制
const [hasSmiles, setHasSmiles] = useState(false);
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 [sortState, setSortState] = useState<sortState>({
const [searchDataType, setSearchDataType] = useState<any>(null); // 搜索的数据属性 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 [page, setPage] = useState(0); // 当前页码 // 请求接口的页码是从0开始的
const size = 8; // 每页数量 const size = 8; // 每页数量
const [count, setCount] = useState(0); // 总页数 const [count, setCount] = useState(0); // 总页数
...@@ -53,13 +74,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -53,13 +74,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制 const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制
const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表 const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表
const handleSearchDataTypeChange = (e: any) => { // const handleSortChange = (e: any) => {
setSearchDataType(e); // setSort(e);
}; // };
const handleSortChange = (e: any) => {
setSort(e);
};
const pageChange = (value: number) => { const pageChange = (value: number) => {
setPage(value - 1); setPage(value - 1);
...@@ -78,9 +95,8 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -78,9 +95,8 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
name: name, name: name,
page: paramsPage, page: paramsPage,
size, size,
index: searchDataType ? `${searchDataType}` : "", index: "",
sort: sort === "null" ? "" : sort, sort: sort === "null" ? "" : sort,
query: keyword,
}) })
?.then((res) => { ?.then((res) => {
setList(res.data.list); setList(res.data.list);
...@@ -88,6 +104,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -88,6 +104,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
if (res.data.list && res.data.list.length > 0) { if (res.data.list && res.data.list.length > 0) {
if (res.data.list[0]) { if (res.data.list[0]) {
let arr: any = []; let arr: any = [];
let _hasSmiles = false;
Object.keys(res.data.list[0]).forEach((item) => { Object.keys(res.data.list[0]).forEach((item) => {
if ( if (
![ ![
...@@ -105,10 +122,26 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -105,10 +122,26 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
) { ) {
arr.push({ label: item, value: item }); arr.push({ label: item, value: item });
} }
if (item === "smiles") {
_hasSmiles = true;
}
}); });
if (firstGetList) { if (firstGetList) {
setdataTypes(arr); 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); setFirstGetList(false);
} }
...@@ -119,34 +152,59 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -119,34 +152,59 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
setList([]); setList([]);
}); });
}, },
[ [productId, projectId, token, fileToken, path, name, sort, firstGetList]
productId,
projectId,
token,
fileToken,
path,
name,
searchDataType,
sort,
keyword,
firstGetList,
]
); );
useEffect(() => { useEffect(() => {
getList(page); getList(page);
}, [page]); }, [page]);
// 选择/取消分子 const handleIndexChange = (e: any, subscriptIndex: number) => {
const handleSelectItem = (id: string) => { let arr = _.cloneDeep(querylist);
let list: string[] = [...selectItems]; console.log(e);
if (selectItems.filter((e) => e === id).length > 0) { arr[subscriptIndex].index = e;
list = list.filter((e) => e !== id); setQuerylist(arr);
setSelectItems(list); };
} else {
list.push(id); const handleCompareChange = (e: any, subscriptIndex: number) => {
setSelectItems(list); 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 ( return (
...@@ -161,41 +219,66 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -161,41 +219,66 @@ 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}>
{hasSmiles && (
<>
<RadioGroupOfButtonStyle <RadioGroupOfButtonStyle
handleRadio={setTableType} handleRadio={setTableType}
value={tableType} value={tableType}
radioBoxStyle={{ minWidth: "40px" }}
radioStyle={{ padding: "0" }}
radioOptions={[ radioOptions={[
{ {
value: "table", value: "table",
label: "表格", label: (
<img
src={tableType === "table" ? tableActive : table}
alt=""
></img>
),
}, },
{ {
value: "card", value: "card",
label: "卡片", label: (
<img
src={tableType === "card" ? cardActive : card}
alt=""
></img>
),
}, },
]} ]}
/> />
<div className={style.separator}>分隔线</div> <div className={style.separator}></div>
<RadioGroupOfButtonStyle </>
handleRadio={setGraphicDimension} )}
value={graphicDimension} {tableType === "card" && hasSmiles && (
radioOptions={[ <>
{ <div
value: "2D", className={classNames({
label: "2D", [style.graphicDimension]: true,
}, [style.graphicDimensionActive]: graphicDimension === "2D",
{ })}
value: "3D", onClick={() => setGraphicDimension("2D")}
label: "3D", >
}, 2D
]} </div>
RadiosBoxStyle={{ width: "132px" }} <div
/> className={classNames({
[style.graphicDimension]: true,
[style.graphicDimensionActive]: graphicDimension === "3D",
[style.marginRight20]: true,
})}
onClick={() => setGraphicDimension("3D")}
>
3D
</div>
</>
)}
<MyMultipleMenu <MyMultipleMenu
value={showData} value={showData}
options={dataTypes} options={dataTypes}
setValue={setShowData} setValue={setShowData}
showSelectAll={true} showSelectAll={true}
iconColor="rgba(138, 144, 153, 1)"
> >
<span className={style.selectShowData}> <span className={style.selectShowData}>
选择显示数据({showData.length}) 选择显示数据({showData.length})
...@@ -203,27 +286,182 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -203,27 +286,182 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
</MyMultipleMenu> </MyMultipleMenu>
</div> </div>
<div className={style.screensRight}> <div className={style.screensRight}>
<MyButton text="高级筛选" onClick={() => {}}></MyButton> <MyButton
</div> 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>
<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>
<div className={style.table}> );
<DatasetTable list={list} showData={showData}></DatasetTable> })}
</div> </div>
<div className={style.searchFooter}>
<div
className={style.searchFooterLeft}
onClick={() =>
setQuerylist([...querylist, { ...queryInit }])
}
>
<AddIcon sx={{ fontSize: "20px", marginRight: "6px" }} />
<span>添加条件</span>
</div> </div>
<div className={style.foot}> <div className={style.searchFooterRight}>
<MyButton <MyButton
variant="outlined" variant="outlined"
text={`下载(${selectItems.length})`} text="重置"
style={{ marginRight: "12px" }} style={{ marginRight: "12px" }}
disabled={selectItems.length === 0} onClick={() => handleInitQuerylist()}
onClick={() => setDownloadOpen(true)} color="secondary"
></MyButton>
<MyButton
text="筛选"
onClick={() => setSaveOpen(true)}
></MyButton> ></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 <MyButton
disabled={selectItems.length === 0}
text={`另存为(${selectItems.length})`} text={`另存为(${selectItems.length})`}
style={{ marginRight: "12px" }}
onClick={() => setSaveOpen(true)} onClick={() => setSaveOpen(true)}
></MyButton> ></MyButton>
<MyButton
variant="outlined"
text={`下载(${selectItems.length})`}
onClick={() => setDownloadOpen(true)}
></MyButton>
</>
)}
</div> </div>
{saveOpen && ( {saveOpen && (
<Save <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