fix: 在业务层控制窗口切换状态

packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import WindowToggle from './components/WindowToggle';
+import WindowToggle, { Size } from './components/WindowToggle';
 import WarningRecordList from './components/WarningRecordList';
 import { ConfigProvider } from '@zhst/meta';
 import { IRecord } from '../WarningRecordCard';
@@ -32,6 +32,8 @@ interface RealTimeMonitorProps {
   cardStyle?: React.CSSProperties;
   imgStyle?: React.CSSProperties;
   largeImageTitle?: string;
+  size: Size;
+  setSize: React.Dispatch<React.SetStateAction<Size>>
 }
 
 export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
@@ -50,6 +52,8 @@ export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
     onRecordClick,
     selectedRecordId,
     isRecordListLoading,
+    size,
+    setSize
   } = props
   const componentName = getPrefixCls('biz-real-time-monitor', customizePrefixCls);
 
@@ -60,6 +64,8 @@ export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
         dataSource={videoDataSource}
         handleWindowClick={handleWindowClick}
         handleCloseButtonClick={handleCloseButtonClick}
+        size = {size}
+        setSize = {setSize}
       />
       <WarningRecordList
         dataSource={warningDataSource}

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

@@ -6,19 +6,20 @@ import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 import { theme } from 'antd/lib';
 import './index.less'
 
-type Size = 'large' | 'small'
+export type Size = 'large' | 'small'
 
 interface WindowToggleProps {
   dataSource?: VideoPlayerCardProps[];
   handleWindowClick?: (key?: string) => void;
   handleCloseButtonClick?: (key?: string) => void;
   selectedWindowKey?: string;
+  size: Size;
+  setSize: React.Dispatch<React.SetStateAction<Size>>
 }
 
 export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
 
-  const { dataSource = [], handleWindowClick, handleCloseButtonClick, selectedWindowKey } = props
-  const [size, setSize] = useState<Size>("large");
+  const { dataSource = [], handleWindowClick, handleCloseButtonClick, selectedWindowKey , size = "large",setSize} = props
   const { useToken } = theme
   const { token } = useToken()
 

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

@@ -1,2 +1,4 @@
 import WindowToggle from './WindowToggle'
-export default WindowToggle
+export default WindowToggle
+import type { Size } from './WindowToggle';
+export type { Size };

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

@@ -23,6 +23,8 @@ export default () => {
       windowKey: 'forth-window',
     }
   ]
+  // 控制窗口切换
+  const [size,setSize] = useState<"large"| "small">('large')
   const [videoDataSource, setVideoDataSource] = useState<VideoPlayerCardProps[]>(initialVideoDataSource);
   const [warningDataSource, setWarningDataSource] = useState<IRecord[]>();
   const [selectedWindowKey, setSelectedWindowKey] = useState<string | undefined>('first-window');
@@ -151,7 +153,11 @@ export default () => {
         selectedRecordId={selectedRecordId}
         viewLargerImageModalRef={viewLargerImageModalRef}
         isRecordListLoading={isRecordListLoading}
-        recordListTitle="监控预警记录" />
+        recordListTitle="监控预警记录" 
+        size = {size}
+        setSize= {setSize}
+        />
+     
       <button onClick={() => { mockData() }}>模拟请求</button>
     </Space>
   )

packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx

@@ -1,6 +1,6 @@
 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 +18,15 @@ 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;
+  }[]
+  [key: string]: any
 }
 
 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, imageKey, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props;
+  const { prefixCls: customizePrefixCls, showType, imageKey, 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 (imageKey) {
         contentElement = (
-          <img
-            alt="首帧图"
-            src={imageKey}
-            style={{ width: "100%", height: "100%", display: 'block' }}
+
+          <div style={{ width: "100%", height: "100%", display: 'block' }}>
+          <CropperImage
+            // editAble={true}
+            odList={odRectDefault}
+            url={imageKey}
           />
+        </div>
+        
         );
       }
       setCardContent(contentElement);