nicecode/nicecode-v2
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 预警记录渲染卡顿

Browse Source
This commit is contained in:
苑宏博 2024-05-10 17:42:07 +08:00
parent a4ff47ea1a
commit faf0a5682e
5 changed files with 59 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
View File

@ -2,7 +2,6 @@ import React, { useImperativeHandle, useRef, useState, forwardRef, useContext }
import { Modal, ModalProps, Space, SpaceProps } from 'antd';
import theme from 'antd/lib/theme';
import { DownloadOutlined } from '@ant-design/icons';
import { pxToRem } from '@zhst/func';
import { ConfigProvider, CropperImage } from '@zhst/meta';
import './index.less'
@ -86,15 +85,14 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
{...modalProps}
>
<Space size={0} {...spaceProps}>
<div className={`${componentName}-left-img`}>
<div style={{ width: `${pxToRem('789px')}`, height: `${pxToRem('444px')}`, ...imgStyle }}>
<div className={`${componentName}-left-img`} style={{ ...imgStyle }}>
<CropperImage
// editAble={false}
// selectAble={false}
odList={odRectDefault}
url={imageKey}
/>
</div>
</div>
<div className='right-context'>
{warningData?.map(({ label, value }) => (
@ -103,7 +101,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
{value}
</div>
))}
{imageKey && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imageKey)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>}
{imageKey && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imageKey)} ><DownloadOutlined /><span className='img-download-text'>{downloadText}</span></div>}
</div>
</Space>
</Modal>

9
packages/biz/src/ViewLargerImageModal/index.less
View File

@ -1,6 +1,11 @@
.zhst-biz-warning-larger-image {
font-family: MicrosoftYaHei;
&-left-img {
width: 789px;
height: 444px;
}
.ant-modal-content {
padding: 0;
height: 492px;
@ -52,6 +57,10 @@
position: absolute;
bottom: 0;
cursor: pointer;
.img-download-text {
padding-left: 3px;
}
}
}

52
packages/biz/src/WarningRecordCard/WarningRecordCard.tsx
View File

@ -1,9 +1,7 @@
import { Card, Space, Divider, CardProps } from 'antd';
import { theme } from 'antd/lib';
import { Card, Space, Divider, CardProps, theme } from 'antd';
import React, { useContext } from 'react';
import dayjs from 'dayjs';
import { ConfigProvider, CropperImage } from '@zhst/meta';
import { pxToRem } from '@zhst/func';
import './index.less'
export interface IRecord {
@ -101,35 +99,37 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
const handleClick = () => {
onRecordClick?.(record);
};
return (
<div className={componentName} key={id} onClick={handleClick} style={style}>
<Card
cover={
<div style={{ width: `${pxToRem("356px")}`, height: `${pxToRem("203px")}`, ...imgStyle }}>
<CropperImage
// 无法触发 图片点击时间需要 加 selectAble
selectAble={false}
odList={odRectDefault}
url={imageKey}
/>
</div>
}
style={{ padding: `${pxToRem("10px")}`, borderRadius: `${pxToRem("4px")}`, ...selectedCardStyle, ...cardStyle }}
className={`${componentName}-card`}
style={{ ...selectedCardStyle, ...cardStyle }}
{...cardProps}
>
<div className={`${componentName}-left-context`}>
<div className={`${componentName}-left-context-warning-type`}>{warningType}</div>
<Space size={0} split={<Divider type="vertical" />}>
{warningInfo?.map((item, index) => (
<div key={index} className="info-item">
{item}
</div>
))}
</Space>
<div className={`${componentName}-left-context-warning-time`}>{warningTimeShow}</div>
<div className={`${componentName}-card-img`} style={{ ...imgStyle }}>
<CropperImage
// 无法触发 图片点击时间需要 加 selectAble
selectAble={false}
odList={odRectDefault}
url={imageKey}
/>
</div>
<div className={`${componentName}-cabietInfo`} >{cabietText}</div>
<div style={{ display: 'flex' }}>
<div className={`${componentName}-left-context`}>
<div className={`${componentName}-left-context-warning-type`}>{warningType}</div>
<Space size={0} split={<Divider type="vertical" />}>
{warningInfo?.map((item, index) => (
<div key={index} className="info-item">
{item}
</div>
))}
</Space>
<div className={`${componentName}-left-context-warning-time`}>{warningTimeShow}</div>
</div>
<div className={`${componentName}-cabietInfo`} >{cabietText}</div>
</div>
</Card>
</div>
);

6
packages/biz/src/WarningRecordCard/demo/base.tsx
View File

@ -6,7 +6,7 @@ import { Space } from 'antd';
// 例如 后端返回这样的数据结构
const backEndData = [
{
imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '1561561',
warningType: '火焰识别',
boxId: '2',
@ -24,7 +24,7 @@ const backEndData = [
}]
},
{
imageKey : 'https://i.yourimageshare.com/lRHiD2UnAT.png',
imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
id: '156156155',
warningType: '火焰识别',
boxId: '1',
@ -46,7 +46,7 @@ const backEndData = [
// 前端处理数据结构
const dataSource = backEndData.map(o => {
return {
imageKey : o.imageKey ,
imageKey: o.imageKey,
id: o.id,
warningType: o.warningType,
boxId: o.boxId,

29
packages/biz/src/WarningRecordCard/index.less
View File

@ -1,24 +1,31 @@
.zhst-biz-warning-record-card {
cursor: pointer;
.ant-card-body {
padding: 0;
font-family: MicrosoftYaHei;
line-height: 19px;
display: flex;
margin-top: 10px;
}
.ant-card-bordered {
border: 2px solid #f0f0f0;
}
&-cover-img img {
width: 336px;
height: 203px;
border-radius: 0,
&-card {
border-radius: 4px;
&-img {
width: 356px ;
height: 203px;
margin-bottom: 10px;
}
.ant-card-body {
padding: 10px;
font-family: MicrosoftYaHei;
line-height: 19px;
display: flex;
flex-direction: column;
}
}
&-left-context {
flex: 1;