fix: 优化预警记录 od

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

@@ -16,6 +16,9 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect:{
+      "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
+    }
   },
   {
     imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -27,6 +30,9 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect:{
+      "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
+    }
   }
 ]
 
@@ -43,6 +49,7 @@ const dataSource = backEndData.map(o => {
     warningInfo: [`盒子${o.boxId}`, `位置${o.position}`],
     cabietText: `柜子ID: ${o.cabietId}`,
     warningTimestamp: o.warningTimestamp,
+    odRect: o.odRect
   }
 })
 

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -95,47 +95,42 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
 
   // 显示 od
   // 定义图片和canvas的引用
-  const imgRef = useRef<HTMLImageElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    // 获取图片和canvas元素
-    const img = imgRef.current;
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return
+    const img = new Image();
+    img.width = imgStyle?.width ? parseInt(imgStyle?.width as string) : 336
+    img.height = imgStyle?.height ? parseInt(imgStyle?.height as string) : 203
+    debugger
+    if (!canvas || !ctx || !imageKey) return;
+    img.src = imageKey;
 
-    // 确保图片已经加载完成
-    if (img?.complete) {
+    img.onload = () => {
 
-      // 设置canvas的尺寸与图片相同
+      // 确保在图片加载完成后设置画布尺寸
       canvas.width = img.width;
       canvas.height = img.height;
 
-      // const odRect = {
-      //   "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
-      // }
-      // 根据odRect对象计算矩形的起始坐标和尺寸
-
       const x = get(odRect, 'x', 0) * img.width;
       const y = get(odRect, 'y', 0) * img.height;
       const width = get(odRect, 'w', 0) * img.width;
       const height = get(odRect, 'h', 0) * img.height;
 
-      // 绘制矩形
+      // 绘制图片和矩形应在图片加载完成后进行
+      ctx.drawImage(img, 0, 0, img.width, img.height);
       ctx.strokeStyle = '#FFF566';
       ctx.strokeRect(x, y, width, height);
-    }
+    };
   }, []);
 
 
   return (
     <div className={componentName} key={id} onClick={handleClick} style={style}>
       <Card
-        //<img alt="预警图" src={imageKey} style={{ borderRadius: 0, ...imgStyle }} />
         cover={<div className={`${componentName}-cover-img`} >
-          <img ref={imgRef} alt="预警图" src={imageKey} style={{ borderRadius: 0, ...imgStyle }} />
-          <canvas ref={canvasRef} style={{ position: 'absolute', top: 10, left: 10 }} />
+          <canvas ref={canvasRef} />
         </div>}
         style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
         {...cardProps}