fix: 预警记录添加 od

packages/biz/package.json

@@ -46,6 +46,7 @@
     "antd": "^5.12.5",
     "classnames": "^2.5.1",
     "rc-util": "^5.38.1",
-    "dayjs": "^1.11.10"
+    "dayjs": "^1.11.10",
+    "lodash-es": "^4.17.21"
   }
 }

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -1,6 +1,8 @@
 import { Card, Space, Divider, CardProps } from 'antd';
 import { theme } from 'antd/lib';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { get } from 'lodash-es';
+
 import dayjs from 'dayjs';
 import './index.less'
 export interface IRecord {
@@ -49,6 +51,15 @@ export interface IRecord {
     @default YYYY-MM-DD HH:mm:ss
   */
   warningTimeFormat?: string;
+  /*
+     接收 od框 坐标
+   */
+  odRect?: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  }
 
 };
 
@@ -66,7 +77,7 @@ 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' } = 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
@@ -82,10 +93,50 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
     onRecordClick?.(record);
   };
 
+  // 显示 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
+
+    // 确保图片已经加载完成
+    if (img?.complete) {
+
+      // 设置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.strokeStyle = '#FFF566';
+      ctx.strokeRect(x, y, width, height);
+    }
+  }, []);
+
+
   return (
     <div className={componentName} key={id} onClick={handleClick} style={style}>
       <Card
-        cover={<div className={`${componentName}-cover-img`}><img alt="预警图" src={imageKey} style={{ borderRadius: 0, ...imgStyle }} /></div>}
+        //<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 }} />
+        </div>}
         style={{ width: 356, height: 302, padding: 10, borderRadius: 4, ...selectedCardStyle, ...cardStyle }}
         {...cardProps}
       >

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

@@ -15,6 +15,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',
@@ -26,6 +29,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
+      }
   }
 ]
 
@@ -41,6 +47,7 @@ const dataSource = backEndData.map(o => {
     warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`],
     // cabietText: `柜子ID: ${o.cabietId}`,  
     warningTimestamp: o.warningTimestamp,
+    odRect: o.odRect
   }
 })