fix: 预警记录大图添加od

packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx

@@ -2,6 +2,7 @@ import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react'
 import { Modal, ModalProps, Space, SpaceProps } from 'antd';
 import theme from 'antd/lib/theme';
 import { DownloadOutlined } from '@ant-design/icons';
+import { CropperImage } from '@zhst/meta'
 import './index.less'
 
 type ViewLargerImageModalParams = {
@@ -10,6 +11,14 @@ type ViewLargerImageModalParams = {
     label?: string;
     value?: string;
   }[];
+  odRect?: {
+    id?: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    selectAble?: boolean;
+  }[]
 };
 
 export interface ViewLargerImageModalRef {
@@ -30,12 +39,17 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
   (props, ref) => {
 
     const componentName = `zhst-biz-view-warning-larger-image-modal`;
-    const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
+    const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps, } = props
     const { useToken } = theme
     const { token } = useToken()
     const [open, setOpen] = useState<boolean>(false);
     const [imageKey, setimageKey] = useState<string>();
+    const [odRect, setOdRect] = useState<ViewLargerImageModalParams['odRect']>();
     const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();
+    const odRectDefault = odRect?.map(rect => ({
+      ...rect,
+      selectAble: rect.hasOwnProperty('selectAble') ? rect.selectAble : false
+    }));
 
     const handleCancel = () => {
       setOpen(false);
@@ -47,6 +61,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
           setOpen(true);
           setimageKey(_params?.imageKey)
           setWarningData(_params?.warningData)
+          setOdRect(_params?.odRect)
         },
         handleCancel
       };
@@ -65,7 +80,13 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
       >
         <Space size={0} {...spaceProps}>
           <div className={`${componentName}-left-img`}>
-          <img alt={title} src={imageKey} style={{ ...imgStyle }} />
+            <div style={{ width: 789, height: 444, ...imgStyle }}>
+              <CropperImage
+                // editAble={true}
+                odList={odRectDefault}
+                url={imageKey}
+              />
+            </div>
           </div>
           <div className='right-context'>
             {warningData?.map(({ label, value }) => (

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

@@ -16,7 +16,7 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
-    odRect:[{
+    odRect: [{
       // "id": "456",
       "x": 0.6519352,
       "y": 0.2965385,
@@ -34,7 +34,7 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
-    odRect:[{
+    odRect: [{
       // "id": "456",
       "x": 0.1519352,
       "y": 0.2965385,
@@ -78,7 +78,7 @@ export default () => {
 
   const handleClick = (record?: IRecord) => {
     // 点击的时候把数据 拿过来处理一下传给大图弹框
-    const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
+    const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect } = record || {}
     const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
     const warningTimeShow = warningTime ? warningTime : formattedDate
     //用于渲染右侧的 信息
@@ -90,8 +90,7 @@ export default () => {
       { label: '柜子ID', value: cabietId },
     ]
     // 调用这个方法打开弹框
-    viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData })
+    viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData, odRect: odRect })
-
     setSelectedRecordId(record?.id)
   }
 

packages/biz/src/ViewLargerImageModal/index.less

@@ -1,12 +1,6 @@
 .zhst-biz-view-warning-larger-image-modal {
   font-family: MicrosoftYaHei;
 
-  &-left-img img{
-    width: 789px;
-    height: 444px;
-    display: 'block',
-  }
-
   .ant-modal-content {
     padding: 0;
     height: 492px;

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -1,6 +1,6 @@
 import { Card, Space, Divider, CardProps } from 'antd';
 import { theme } from 'antd/lib';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import dayjs from 'dayjs';
 import { CropperImage } from '@zhst/meta'
 import './index.less'
@@ -60,7 +60,7 @@ export interface IRecord {
     w: number;
     h: number;
     selectAble?: boolean;
-}[]
+  }[]
 
 };
 
@@ -77,7 +77,7 @@ 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
@@ -105,11 +105,10 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
     <div className={componentName} key={id} onClick={handleClick} style={style}>
       <Card
         cover={
-          <div style={{ width: 336, height: 203 ,...imgStyle}}>
+          <div style={{ width: 336, height: 203, ...imgStyle }}>
             <CropperImage
-            type='line'
               // editAble={true}
-            odList={ odRectDefault }
+              odList={odRectDefault}
               url={imageKey}
             />
           </div>

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

@@ -15,7 +15,7 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
-    odRect:[{
+    odRect: [{
       // "id": "123",
       "x": 0.5519352,
       "y": 0.2965385,
@@ -33,7 +33,7 @@ const backEndData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
-    odRect:[{
+    odRect: [{
       // "id": "456",
       "x": 0.1519352,
       "y": 0.2965385,
@@ -62,9 +62,7 @@ export default () => {
 
   return (
     <Space size={[8, 16]} direction="vertical">
-      {
+      {dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} />)}
-        dataSource?.map((record) => <WarningRecordCard key={record?.id} record={record} />)
-      }
     </Space>
   )
 }

packages/biz/src/WarningRecordCard/index.less

@@ -9,6 +9,10 @@
     margin-top: 10px;
   }
 
+  .ant-card-bordered {
+    border: 2px solid #f0f0f0;
+  }
+
   &-cover-img img {
     width: 336px;
     height: 203px;