Skip to content

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

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

parent 39a8d932
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 108 deletions
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ c2dda2a3
...@@ -19,7 +19,6 @@ import classNames from "classnames"; ...@@ -19,7 +19,6 @@ import classNames from "classnames";
import Save from "./save"; import Save from "./save";
import NoData from "@/components/BusinessComponents/NoData"; import NoData from "@/components/BusinessComponents/NoData";
import Download from "./download"; import Download from "./download";
import { useMessage } from "@/components/MySnackbar";
import style from "./index.module.css"; import style from "./index.module.css";
type ISeeDatasetProps = { type ISeeDatasetProps = {
...@@ -32,7 +31,6 @@ type ISeeDatasetProps = { ...@@ -32,7 +31,6 @@ type ISeeDatasetProps = {
const SeeDataset = observer((props: ISeeDatasetProps) => { const SeeDataset = observer((props: ISeeDatasetProps) => {
const { path, name, fileToken, projectId } = props; const { path, name, fileToken, projectId } = props;
const Message = useMessage();
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();
...@@ -49,6 +47,14 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -49,6 +47,14 @@ 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); // 弹窗动画变化中
// 解决图像渲染造成弹窗卡顿的问题
useEffect(() => {
setTimeout(() => {
setShowAnimation(false);
}, 1000);
}, []);
const isCadd = useMemo(() => { const isCadd = useMemo(() => {
if (productId === "cadd") { if (productId === "cadd") {
...@@ -256,119 +262,125 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -256,119 +262,125 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
</div> </div>
</div> </div>
</div> </div>
<div className={style.table}> {!showAnimation && (
{list.length !== 0 && ( <div className={style.table}>
<> {list.length !== 0 && (
<div className={style.list}> <>
{list.map((item, index) => { <div className={style.list}>
return ( {list.map((item, index) => {
<div return (
className={style.datasetLi} <div
key={item.id} className={style.datasetLi}
onClick={() => { key={item.id}
handleSelectItem(item.id); onClick={() => {
}} handleSelectItem(item.id);
> }}
{isCadd && ( >
<div className={style.datasetLiTop}> {isCadd && (
{graphicDimension === "2D" && ( <div className={style.datasetLiTop}>
<KekuleView id={`${index}2d`} smi={item.smiles} /> {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" && ( {showData.length === 0 && (
<NglView id={`${index}3d`} content={item.pdb} /> <div className={style.noDataList}>
请选择显示数据
</div>
)} )}
</div> </div>
)} {graphicDimension === "2D" && (
<div className={style.datasetLiBottom}> <Checkbox
<div size="small"
className={style.datasetLiTitle} sx={{
title={item.smiles} padding: "0px",
> position: "absolute",
{item.smiles} top: "16px",
</div> right: "20px",
{showData.length !== 0 && ( zIndex: 1,
<div className={style.datasetLiDataList}> }}
{Object.keys(item.meta) checked={selectItems.includes(item.id)}
.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 && ( {graphicDimension === "3D" && (
<div className={style.noDataList}>请选择显示数据</div> <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>
{graphicDimension === "2D" && ( );
<Checkbox })}
size="small" {nullBox.map((item, index) => {
sx={{ return (
padding: "0px", <div
position: "absolute", className={classNames({
top: "16px", [style.datasetLi]: true,
right: "20px", [style.nullBox]: true,
zIndex: 1, })}
}} key={index + "null"}
checked={selectItems.includes(item.id)} ></div>
/> );
)} })}
{graphicDimension === "3D" && ( </div>
<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}> <div className={style.pagination}>
<MyPagination <MyPagination
page={page} page={page}
pageChange={pageChange} pageChange={pageChange}
count={count} count={count}
/> />
</div> </div>
</> </>
)} )}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>} {list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</div> </div>
)}
</div> </div>
<div className={style.foot}> <div className={style.foot}>
{isCadd && ( {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