Skip to content

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

Merge branch 'feat-20220718' into 'release' 

fix: 解决图像渲染造成弹窗卡顿的问题

See merge request !39
parents 821ac2bc c2dda2a3
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 108 deletions
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ c99d8093
......@@ -19,7 +19,6 @@ import classNames from "classnames";
import Save from "./save";
import NoData from "@/components/BusinessComponents/NoData";
import Download from "./download";
import { useMessage } from "@/components/MySnackbar";
import style from "./index.module.css";
type ISeeDatasetProps = {
......@@ -32,7 +31,6 @@ type ISeeDatasetProps = {
const SeeDataset = observer((props: ISeeDatasetProps) => {
const { path, name, fileToken, projectId } = props;
const Message = useMessage();
const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品id 如：cadd
const token = getToken();
......@@ -49,6 +47,14 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
const [selectItems, setSelectItems] = useState<Array<any>>([]);
const [saveOpen, setSaveOpen] = useState(false); // 另存为弹窗显示控制
const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制
const [showAnimation, setShowAnimation] = useState(true); // 弹窗动画变化中
// 解决图像渲染造成弹窗卡顿的问题
useEffect(() => {
setTimeout(() => {
setShowAnimation(false);
}, 1000);
}, []);
const isCadd = useMemo(() => {
if (productId === "cadd") {
......@@ -256,119 +262,125 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
</div>
</div>
</div>
<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} />
{!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.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>
)}
{graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} />
{showData.length === 0 && (
<div className={style.noDataList}>
请选择显示数据
</div>
)}
</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>
{graphicDimension === "2D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{showData.length === 0 && (
<div className={style.noDataList}>请选择显示数据</div>
{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>
{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>
);
})}
{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 className={style.pagination}>
<MyPagination
page={page}
pageChange={pageChange}
count={count}
/>
</div>
</>
)}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</div>
)}
</div>
<div className={style.foot}>
{isCadd && (
......
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