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,8 +85,8 @@ 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}
@@ -95,7 +94,6 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
                 url={imageKey}
               />
           </div>
-          </div>
           <div className='right-context'>
             {warningData?.map(({ label, value }) => (
               <div key={label} >
@@ -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,12 +99,14 @@ 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 }}
+        {...cardProps}
+      >
+        <div className={`${componentName}-card-img`} style={{ ...imgStyle }}>
           <CropperImage
             // 无法触发 图片点击时间需要 加  selectAble
             selectAble={false}
@@ -114,10 +114,7 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
             url={imageKey}
           />
         </div>
-        }
+        <div style={{ display: 'flex' }}>
-        style={{ padding: `${pxToRem("10px")}`, borderRadius: `${pxToRem("4px")}`, ...selectedCardStyle, ...cardStyle }}
-        {...cardProps}
-      >
           <div className={`${componentName}-left-context`}>
             <div className={`${componentName}-left-context-warning-type`}>{warningType}</div>
             <Space size={0} split={<Divider type="vertical" />}>
@@ -130,6 +127,9 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
             <div className={`${componentName}-left-context-warning-time`}>{warningTimeShow}</div>
           </div>
           <div className={`${componentName}-cabietInfo`} >{cabietText}</div>
+
+        </div>
+
       </Card>
     </div>
   );

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;
+
+    &-img {
+      width: 356px ;
       height: 203px;
-    border-radius: 0,
+      margin-bottom: 10px;
     }
 
+    .ant-card-body {
+      padding: 10px;
+      font-family: MicrosoftYaHei;
+      line-height: 19px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+
   &-left-context {
     flex: 1;