diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
index 24056e9..63fa909 100644
--- a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
+++ b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import WindowToggle from './components/WindowToggle';
+import WindowToggle, { ISize } 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: ISize;
+  setSize: React.Dispatch<React.SetStateAction<ISize>>
 }
 
 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}
diff --git a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
index 9f10e78..1586f44 100644
--- a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
+++ b/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 ISize = 'large' | 'small'
 
 interface WindowToggleProps {
   dataSource?: VideoPlayerCardProps[];
   handleWindowClick?: (key?: string) => void;
   handleCloseButtonClick?: (key?: string) => void;
   selectedWindowKey?: string;
+  size: ISize;
+  setSize: React.Dispatch<React.SetStateAction<ISize>>
 }
 
 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()
 
@@ -44,7 +45,7 @@ export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
               const { windowKey } = dataSource[0]
               handleWindowClick?.(windowKey)
             }
-            setSize(value as Size)
+            setSize(value as ISize)
           }}
         />
       </div>
diff --git a/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx
index 0fa9c9a..e0a2197 100644
--- a/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx
+++ b/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx
@@ -1,2 +1,4 @@
 import WindowToggle from './WindowToggle'
-export default WindowToggle
\ No newline at end of file
+export default WindowToggle
+import type { ISize } from './WindowToggle';
+export type { ISize };
\ No newline at end of file
diff --git a/packages/biz/src/RealTimeMonitor/demo/base.tsx b/packages/biz/src/RealTimeMonitor/demo/base.tsx
index 144bcae..53a4584 100644
--- a/packages/biz/src/RealTimeMonitor/demo/base.tsx
+++ b/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>
   )
diff --git a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
index bcae926..1a7a164 100644
--- a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
+++ b/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);