fix: 预警记录添加od

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

@@ -16,9 +16,13 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
-    odRect:{
+    odRect:[{
-      "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
+      // "id": "456",
-    }
+      "x": 0.6519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -30,9 +34,13 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
-    odRect:{
+    odRect:[{
-      "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
+      // "id": "456",
-    }
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   }
 ]
 

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -1,8 +1,8 @@
 import { Card, Space, Divider, CardProps } from 'antd';
 import { theme } from 'antd/lib';
 import React, { useEffect, useRef } from 'react';
-import { get } from '@zhst/func';
 import dayjs from 'dayjs';
+import { CropperImage } from '@zhst/meta'
 import './index.less'
 export interface IRecord {
 
@@ -54,11 +54,13 @@ export interface IRecord {
      接收 od框 坐标
    */
   odRect?: {
+    id?: string;
     x: number;
     y: number;
     w: number;
     h: number;
-  }
+    selectAble?: boolean;
+}[]
 
 };
 
@@ -73,14 +75,17 @@ export interface WarningRecordCardProps {
 };
 
 export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
-
   const componentName = `zhst-biz-warning-record-card`;
   const { record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
-  const { imageKey, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect } = record || {}
+  const { imageKey, id, warningType, warningInfo = [], cabietText, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect = []} = record || {}
   const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
   const warningTimeShow = warningTime ? warningTime : formattedDate
   const { useToken } = theme
   const { token } = useToken()
+  const odRectDefault = odRect?.map(rect => ({
+    ...rect,
+    selectAble: rect.hasOwnProperty('selectAble') ? rect.selectAble : false
+  }));
   const selectedBorderStyle = {
     border: `2px solid ${token.colorPrimary}`, boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
   }
@@ -92,61 +97,23 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
     onRecordClick?.(record);
   };
 
-  // 显示 od  后期希望抽离出一个 自定义hook 重写 原先的 od 逻辑 实现复用 
-  // 定义图片和canvas的引用
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const imgRef = useRef<HTMLImageElement>(new Image())
 
 
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const img = imgRef.current
-
-    const ctx = canvas?.getContext('2d');
-    // 可能 有 宽高 有 px 这里取number 
-    img.width = imgStyle?.width ? parseInt(imgStyle?.width as string) : 336
-    img.height = imgStyle?.height ? parseInt(imgStyle?.height as string) : 203
-    if (!canvas || !ctx || !imageKey) return;
-    img.src = "imageKey";
-
-    img.onload = () => {
-
-      // 确保在图片加载完成后设置画布尺寸
-      canvas.width = img.width;
-      canvas.height = img.height;
-
-      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);
-    };
-
-    img.onerror = () => {
-      canvas.width = img.width;
-      canvas.height = img.height;
-      ctx.strokeStyle = '#AAA';
-      ctx.strokeRect(0, 0, img.width, img.height);
-    };
-
-    return () => {
-      img.onload = null;
-      img.onerror = null;
-    };
-
-  }, []);
 
 
   return (
     <div className={componentName} key={id} onClick={handleClick} style={style}>
       <Card
-        cover={<div className={`${componentName}-cover-img`} >
+        cover={
-          <canvas ref={canvasRef} />
+          <div style={{ width: 336, height: 203 ,...imgStyle}}>
-        </div>}
+          <CropperImage
+            type='line'
+            // editAble={true}
+            odList={ odRectDefault }
+            url={imageKey}
+          />
+      </div>
+       }
         style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
         {...cardProps}
       >

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

@@ -15,9 +15,13 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
-    odRect:{
+    odRect:[{
-      "x": 0.553125, "y": 0.29722223, "w": 0.048958335, "h": 0.2462963
+      // "id": "123",
-    }
+      "x": 0.5519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imageKey: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -29,9 +33,13 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
-    odRect:{
+    odRect:[{
-        "x": 0.333125, "y": 0.45722223, "w": 0.048958335, "h": 0.2462963
+      // "id": "456",
-      }
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   }
 ]