Skip to content

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

feat: 新增暂无数据组件

parent dd3b18d9
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 92 deletions
src/components/BusinessComponents/NoData/index.module.css 0 → 100644
View file @ 55e5598b
.noDataBox {
background-color: #fff;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.noDataText {
margin-top: 8px;
font-size: 14px;
line-height: 22px;
color: #8a9099;
}
src/components/BusinessComponents/NoData/index.tsx 0 → 100644
View file @ 55e5598b
import noFile from "@/assets/project/noFile.svg";
import style from "./index.module.css";
type INoDataProps = {
text?: string;
noDataBoxStyle?: any;
};
const NoData = (props: INoDataProps) => {
return (
<div className={style.noDataBox} style={{ ...props.noDataBoxStyle }}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>
{props.text ? props.text : "暂无数据"}
</span>
</div>
);
};
export default NoData;
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ 55e5598b
......@@ -17,6 +17,7 @@ import { useStores } from "@/store";
import { toJS } from "mobx";
import classNames from "classnames";
import Save from "./save";
import NoData from "@/components/BusinessComponents/NoData";
import Download from "./download";
import style from "./index.module.css";
......@@ -62,7 +63,9 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
setSort(e);
};
const handleKeywordChange = (e: any) => {
setKeyword(e.target.value);
if (e.target.value.length <= 30) {
setKeyword(e.target.value);
}
};
const pageChange = (value: number) => {
......@@ -248,102 +251,117 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
</div>
</div>
<div className={style.table}>
<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}>
{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.meta)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span className={style.datasetLiDataLiKey}>
{key}
</span>
<span
className={style.datasetLiDataLiValue}
>
{item.meta[key]}
</span>
</div>
);
})}
</div>
)}
{showData.length === 0 && (
<div className={style.noDataList}>请选择显示数据</div>
)}
</div>
{graphicDimension === "2D" && (
<KekuleView id={`${index}2d`} smi={item.smiles} />
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} />
<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>
)}
<div className={style.datasetLiBottom}>
<div className={style.datasetLiTitle} title={item.smiles}>
{item.smiles}
</div>
{showData.length !== 0 && (
<div className={style.datasetLiDataList}>
{Object.keys(item.meta)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span className={style.datasetLiDataLiKey}>
{key}
</span>
<span className={style.datasetLiDataLiValue}>
{item.meta[key]}
</span>
</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>
);
})}
{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></NoData>}
</div>
</div>
<div className={style.foot}>
......
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