fix: 视频显示od框，修复预警记录无法查看大图

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

@@ -36,7 +36,6 @@ export default () => {
   const handleWindowClick = (key?: string) => {
     setSelectedWindowKey(key)
   }
-
   const clearWindowData = (key?: string) => {
     // 当关闭窗口时 也要刷新 右侧 预警记录接口 不要忘记
     setVideoDataSource((pre) => {
@@ -49,12 +48,10 @@ export default () => {
       return newVideoDataSource
     })
   }
-
   const handleDownloadImg = (imageKey?: string) => {
     // 可以调用 下面 方法关闭弹窗
     // viewLargerImageModalRef.current?.handleCancel()
   }
-
   const onRecordClick = (record?: IRecord) => {
     // 点击的时候把数据 拿过来处理一下传给大图弹框
     const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect = [] } = record || {}
@@ -70,7 +67,6 @@ export default () => {
     ]
     // 调用这个方法打开弹框
     viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData, odRect: odRect })
-
     setSelectedRecordId(record?.id)
   }
 
@@ -90,7 +86,8 @@ export default () => {
     // 模拟 视频数据请求
     setTimeout(() => {
       // 对后端返回数据进行处理  组装一套符合属性的 数据 
-      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect }
+      // videoSrc : videoData.videoSrc 
+      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, odRect: videoData.odRect, videoSrc: videoData.videoSrc }
       setVideoDataSource((pre) => {
         const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
           // 传给 选中的视频窗口

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

@@ -1,6 +1,6 @@
 export const videoData = {
   imageKey: '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',
+  videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1',
   title: `盒子1 点位1`,
   odRect: [{
     "id": "456",

packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx

@@ -19,7 +19,7 @@ export interface VideoPlayerCardProps {
   handleCloseButtonClick?: (key?: string) => void;
   handleWindowClick?: (key?: string) => void;
   odRect?: {
-    id?: string;
+    id: string;
     x: number;
     y: number;
     w: number;
@@ -58,7 +58,7 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
       let contentElement: JSX.Element | null = null;
       if (videoSrc) {
         contentElement = (
-          <VideoPlayer ref={videoRef} url={videoSrc} />
+          <VideoPlayer ref={videoRef} url={videoSrc} showOD odList={odRectDefault} />
         );
         videoRef.current?.setShowCrop(true)
 

packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx

@@ -88,7 +88,8 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
           <div className={`${componentName}-left-img`}>
             <div style={{ width: 789, height: 444, ...imgStyle }}>
               <CropperImage
-                // editAble={true}
+                // editAble={false}
+                // selectAble={false}
                 odList={odRectDefault}
                 url={imageKey}
               />

packages/biz/src/WarningRecordCard/WarningRecordCard.tsx

@@ -55,7 +55,7 @@ export interface IRecord {
      接收 od框 坐标
    */
   odRect?: {
-    id?: string;
+    id: string;
     x: number;
     y: number;
     w: number;
@@ -82,8 +82,6 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
   const { getPrefixCls } = useContext(ConfigContext);
   const { prefixCls: customizePrefixCls, record, onRecordClick, style, cardProps, selectedRecordId, cardStyle, imgStyle } = props;
   const componentName = getPrefixCls('biz-warning-record-card', customizePrefixCls);
-
-;
   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
@@ -99,22 +97,18 @@ export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
   const selectedCardStyle: React.CSSProperties = {
     ...(selectedRecordId === record?.id ? selectedBorderStyle : {})
   };
-
   const handleClick = () => {
     onRecordClick?.(record);
   };
 
-
-
-
-
   return (
     <div className={componentName} key={id} onClick={handleClick} style={style}>
       <Card
         cover={
           <div style={{ width: 336, height: 203, ...imgStyle }}>
             <CropperImage
-              // editAble={true}
+              // 无法触发 图片点击时间需要 加  selectAble
+              selectAble={false}
               odList={odRectDefault}
               url={imageKey}
             />