fix: 预警记录渲染卡顿

packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx

@@ -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 className={`${componentName}-left-img`} style={{  ...imgStyle }}>
-            <div style={{ width: `${pxToRem('789px')}`, height: `${pxToRem('444px')}`, ...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>

packages/biz/src/ViewLargerImageModal/index.less

@@ -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;
+            }
           }
 
         }

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -1,9 +1,7 @@
-import { Card, Space, Divider, CardProps } from 'antd';
+import { Card, Space, Divider, CardProps, theme } from 'antd';
-import { theme } from 'antd/lib';
 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={
+        className={`${componentName}-card`}
-          <div style={{ width: `${pxToRem("356px")}`, height: `${pxToRem("203px")}`, ...imgStyle }}>
+        style={{ ...selectedCardStyle, ...cardStyle }}
-            <CropperImage
-              // 无法触发 图片点击时间需要 加  selectAble
-              selectAble={false}
-              odList={odRectDefault}
-              url={imageKey}
-            />
-          </div>
-        }
-        style={{ padding: `${pxToRem("10px")}`, borderRadius: `${pxToRem("4px")}`, ...selectedCardStyle, ...cardStyle }}
         {...cardProps}
       >
-        <div className={`${componentName}-left-context`}>
+        <div className={`${componentName}-card-img`} style={{ ...imgStyle }}>
-          <div className={`${componentName}-left-context-warning-type`}>{warningType}</div>
+          <CropperImage
-          <Space size={0} split={<Divider type="vertical" />}>
+            // 无法触发 图片点击时间需要 加  selectAble
-            {warningInfo?.map((item, index) => (
+            selectAble={false}
-              <div key={index} className="info-item">
+            odList={odRectDefault}
-                {item}
+            url={imageKey}
-              </div>
+          />
-            ))}
-          </Space>
-          <div className={`${componentName}-left-context-warning-time`}>{warningTimeShow}</div>
         </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>
   );

packages/biz/src/WarningRecordCard/demo/base.tsx

@@ -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,

packages/biz/src/WarningRecordCard/index.less

@@ -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 {
+  &-card {
-    width: 336px;
+    border-radius: 4px;
-    height: 203px;
+
-    border-radius: 0,
+    &-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;