fix: 视频播放添加 图片od

packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx

@@ -52,14 +52,16 @@ export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
       <div className='body'>
         {
           dataSource?.map((item, index) => {
+            
             if (size === "large" && index > 0) return
             return (
               <VideoPlayerCard
                 key={item.windowKey}
                 selectedWindowKey={selectedWindowKey}
-                size={size} {...item}
+                size={size} 
                 handleWindowClick={handleWindowClick}
                 handleCloseButtonClick={handleCloseButtonClick}
+                {...item}
               />)
           })
         }

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

@@ -48,15 +48,15 @@ export default () => {
     })
   }
 
-  const handleDownloadImg = (imageKey?: string) => {
+  const handleDownloadImg = (imgSrc?: string) => {
-    console.log(imageKey)
+    console.log(imgSrc)
     // 可以调用 下面 方法关闭弹窗
     // viewLargerImageModalRef.current?.handleCancel()
   }
 
   const onRecordClick = (record?: IRecord) => {
     // 点击的时候把数据 拿过来处理一下传给大图弹框
-    const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
+    const { imgSrc, 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
     //用于渲染右侧的 信息
@@ -68,7 +68,7 @@ export default () => {
       { label: '柜子ID', value: cabietId },
     ]
     // 调用这个方法打开弹框
-    viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData })
+    viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData ,odRect:odRect})
 
     setSelectedRecordId(record?.id)
   }
@@ -89,7 +89,8 @@ export default () => {
     // 模拟 视频数据请求
     setTimeout(() => {
       // 对后端返回数据进行处理  组装一套符合属性的 数据 
-      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, }
+      debugger
+      const newVideoData: VideoPlayerCardProps = { imgSrc: videoData.imgSrc, title: videoData.title, odRect: videoData.odRect }
       setVideoDataSource((pre) => {
         const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
           // 传给 选中的视频窗口
@@ -121,7 +122,7 @@ export default () => {
     setTimeout(() => {
       const newWarningDataSource: IRecord[] = warningData.map(o => {
         return {
-          imageKey: o.imageKey,
+          imgSrc: o.imgSrc,
           id: o.id,
           warningType: o.warningType,
           boxId: o.boxId,
@@ -131,6 +132,7 @@ export default () => {
           warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`],
           // cabietText: `柜子ID: ${o.cabietId}`,
           warningTimestamp: o.warningTimestamp,
+          odRect: o.odRect
         }
       })
       setWarningDataSource(newWarningDataSource)

packages/biz/src/RealTimeMonitor/demo/mock.tsx

@@ -1,7 +1,14 @@
 export const videoData = {
   imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
   // videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1',
-  title: `盒子1 点位1`
+  title: `盒子1 点位1`,
+  odRect: [{
+    // "id": "456",
+    "x": 0.1519352,
+    "y": 0.2965385,
+    "w": 0.05185461,
+    "h": 0.24698898,
+  }]
 }
 
 export const warningData = [
@@ -15,6 +22,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -26,6 +40,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -37,6 +58,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -48,6 +76,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   },
   {
     imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@@ -59,6 +94,13 @@ export const warningData = [
     // warningTime: "2023-03-01 ",
     warningTimestamp: Date.now(),
     // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
   }
 ]
 

packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx

@@ -1,6 +1,7 @@
 import { Card, Space, CardProps, Spin, Button } from 'antd';
 import { theme } from 'antd/lib';
-import { ConfigProvider, VideoPlayer, type VideoViewRef, } from '@zhst/meta';
+import { ConfigProvider, VideoPlayer, CropperImage, type VideoViewRef, } from '@zhst/meta';
+
 import React, { useState, useEffect, ReactNode, useRef, useContext } from 'react';
 import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
 import './index.less'
@@ -18,6 +19,14 @@ export interface VideoPlayerCardProps {
   title?: string | ReactNode
   handleCloseButtonClick?: (key?: string) => void;
   handleWindowClick?: (key?: string) => void;
+  odRect?: {
+    id?: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    selectAble?: boolean;
+  }[]
 }
 
 export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
@@ -25,12 +34,16 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
 
   const { ConfigContext } = ConfigProvider;
   const { getPrefixCls } = useContext(ConfigContext);
-  const { prefixCls: customizePrefixCls, showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props;
+  const { prefixCls: customizePrefixCls, showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '',odRect = [] } = props;
   const componentName = getPrefixCls('biz-video-player-card', customizePrefixCls);
   const [cardContent, setCardContent] = useState<JSX.Element | null>(null);
   const { useToken } = theme
   const { token } = useToken()
   const videoRef = useRef<VideoViewRef>(null)
+  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)"
   }
@@ -51,11 +64,15 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
 
       } else if (imgSrc) {
         contentElement = (
-          <img
+
-            alt="首帧图"
+          <div style={{ width: "100%", height: "100%", display: 'block' }}>
-            src={imgSrc}
+          <CropperImage
-            style={{ width: "100%", height: "100%", display: 'block' }}
+            // editAble={true}
+            odList={odRectDefault}
+            url={imgSrc}
           />
+        </div>
+        
         );
       }
       setCardContent(contentElement);

packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx

@@ -7,7 +7,7 @@ import { ConfigProvider,CropperImage} from '@zhst/meta';
 import './index.less'
 
 type ViewLargerImageModalParams = {
-  imageKey?: string;
+  imgSrc?: string;
   warningData?: {
     label?: string;
     value?: string;
@@ -30,7 +30,7 @@ export interface ViewLargerImageModalRef {
 export interface ViewLargerImageModalProps {
   prefixCls?: string
   imgStyle?: React.CSSProperties;
-  downloadImg?: (imageKey?: string) => void;
+  downloadImg?: (imgSrc?: string) => void;
   title?: string;
   downloadText?: string;
   modalProps?: ModalProps
@@ -49,7 +49,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
     const { useToken } = theme
     const { token } = useToken()
     const [open, setOpen] = useState<boolean>(false);
-    const [imageKey, setimageKey] = useState<string>();
+    const [imgSrc, setimgSrc] = useState<string>();
     const [odRect, setOdRect] = useState<ViewLargerImageModalParams['odRect']>();
     const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();
     const odRectDefault = odRect?.map(rect => ({
@@ -65,7 +65,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
       return {
         show: (_params) => {
           setOpen(true);
-          setimageKey(_params?.imageKey)
+          setimgSrc(_params?.imgSrc)
           setWarningData(_params?.warningData)
           setOdRect(_params?.odRect)
         },
@@ -90,7 +90,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
               <CropperImage
                 // editAble={true}
                 odList={odRectDefault}
-                url={imageKey}
+                url={imgSrc}
               />
             </div>
           </div>
@@ -101,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>}
+            {imgSrc && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imgSrc)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>}
           </div>
         </Space>
       </Modal>