From 786f1b280aac8307dc51e37d6d02af3f3f927b99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Thu, 25 Apr 2024 15:30:49 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E5=9C=A8=E4=B8=9A=E5=8A=A1=E5=B1=82?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E7=AA=97=E5=8F=A3=E5=88=87=E6=8D=A2=E7=8A=B6?= =?UTF-8?q?=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/RealTimeMonitor/RealTimeMonitor.tsx | 8 ++++- .../components/WindowToggle/WindowToggle.tsx | 7 +++-- .../components/WindowToggle/index.tsx | 4 ++- .../biz/src/RealTimeMonitor/demo/base.tsx | 8 ++++- .../src/VideoPlayerCard/VideoPlayerCard.tsx | 29 +++++++++++++++---- 5 files changed, 44 insertions(+), 12 deletions(-) diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx index 24056e9..bf2b116 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, { 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> } export const RealTimeMonitor: React.FC = (props) => { @@ -50,6 +52,8 @@ export const RealTimeMonitor: React.FC = (props) => { onRecordClick, selectedRecordId, isRecordListLoading, + size, + setSize } = props const componentName = getPrefixCls('biz-real-time-monitor', customizePrefixCls); @@ -60,6 +64,8 @@ export const RealTimeMonitor: React.FC = (props) => { dataSource={videoDataSource} handleWindowClick={handleWindowClick} handleCloseButtonClick={handleCloseButtonClick} + size = {size} + setSize = {setSize} /> void; handleCloseButtonClick?: (key?: string) => void; selectedWindowKey?: string; + size: Size; + setSize: React.Dispatch> } export const WindowToggle: React.FC = (props) => { - const { dataSource = [], handleWindowClick, handleCloseButtonClick, selectedWindowKey } = props - const [size, setSize] = useState("large"); + const { dataSource = [], handleWindowClick, handleCloseButtonClick, selectedWindowKey , size = "large",setSize} = props const { useToken } = theme const { token } = useToken() diff --git a/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx index 0fa9c9a..b4b89a7 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 { Size } from './WindowToggle'; +export type { Size }; \ 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(initialVideoDataSource); const [warningDataSource, setWarningDataSource] = useState(); const [selectedWindowKey, setSelectedWindowKey] = useState('first-window'); @@ -151,7 +153,11 @@ export default () => { selectedRecordId={selectedRecordId} viewLargerImageModalRef={viewLargerImageModalRef} isRecordListLoading={isRecordListLoading} - recordListTitle="监控预警记录" /> + recordListTitle="监控预警记录" + size = {size} + setSize= {setSize} + /> + ) 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 = (props) => { @@ -25,12 +34,16 @@ export const VideoPlayerCard: React.FC = (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(null); const { useToken } = theme const { token } = useToken() const videoRef = useRef(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 = (props) => { } else if (imageKey) { contentElement = ( - 首帧图 + + + ); } setCardContent(contentElement); From b915d80deae33e5d16ae7c8378ef1d859dce4710 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=91=E5=AE=8F=E5=8D=9A?= <9419827+yuan-hongbo@user.noreply.gitee.com> Date: Thu, 25 Apr 2024 17:39:07 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx | 6 +++--- .../components/WindowToggle/WindowToggle.tsx | 8 ++++---- .../src/RealTimeMonitor/components/WindowToggle/index.tsx | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx b/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx index bf2b116..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, { Size } from './components/WindowToggle'; +import WindowToggle, { ISize } from './components/WindowToggle'; import WarningRecordList from './components/WarningRecordList'; import { ConfigProvider } from '@zhst/meta'; import { IRecord } from '../WarningRecordCard'; @@ -32,8 +32,8 @@ interface RealTimeMonitorProps { cardStyle?: React.CSSProperties; imgStyle?: React.CSSProperties; largeImageTitle?: string; - size: Size; - setSize: React.Dispatch> + size: ISize; + setSize: React.Dispatch> } export const RealTimeMonitor: React.FC = (props) => { diff --git a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx index 8d516fc..1586f44 100644 --- a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx +++ b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx @@ -6,15 +6,15 @@ import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'; import { theme } from 'antd/lib'; import './index.less' -export type Size = 'large' | 'small' +export type ISize = 'large' | 'small' interface WindowToggleProps { dataSource?: VideoPlayerCardProps[]; handleWindowClick?: (key?: string) => void; handleCloseButtonClick?: (key?: string) => void; selectedWindowKey?: string; - size: Size; - setSize: React.Dispatch> + size: ISize; + setSize: React.Dispatch> } export const WindowToggle: React.FC = (props) => { @@ -45,7 +45,7 @@ export const WindowToggle: React.FC = (props) => { const { windowKey } = dataSource[0] handleWindowClick?.(windowKey) } - setSize(value as Size) + setSize(value as ISize) }} /> diff --git a/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx index b4b89a7..e0a2197 100644 --- a/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx +++ b/packages/biz/src/RealTimeMonitor/components/WindowToggle/index.tsx @@ -1,4 +1,4 @@ import WindowToggle from './WindowToggle' export default WindowToggle -import type { Size } from './WindowToggle'; -export type { Size }; \ No newline at end of file +import type { ISize } from './WindowToggle'; +export type { ISize }; \ No newline at end of file