nicecode-v2/packages/biz/src/RealTimeMonitor/RealTimeMonitor.tsx
2024-03-11 09:10:09 +08:00

69 lines
2.0 KiB
TypeScript

import React from 'react';
import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz';
import WindowToggle from './components/WindowToggle';
import WarningRecordList from './components/WarningRecordList';
interface RealTimeMonitorProps {
videoDataSource?: VideoPlayerCardProps[];
handleWindowClick?: (key?: string) => void;
handleCloseButtonClick?: (key?: string) => void;
selectedWindowKey?: string;
warningDataSource?: IRecord[];
viewLargerImageModalRef?: React.RefObject<ViewLargerImageModalRef>;
/*
处理 图片下载按钮点击事件
*/
handleDownloadImg?: (imgSrc?: string) => void;
/*
处理 预警记录卡片点击事件
*/
onRecordClick?: (record?: IRecord) => void;
/*
获取选中的 记录 id 用于 判断是否显示 选中样式
*/
selectedRecordId?: string;
isRecordListLoading?: boolean;
recordListTitle?: string;
style?: React.CSSProperties;
cardStyle?: React.CSSProperties;
imgStyle?: React.CSSProperties;
largeImageTitle?: string;
}
export const RealTimeMonitor: React.FC<RealTimeMonitorProps> = (props) => {
const { videoDataSource,
handleWindowClick,
handleCloseButtonClick,
selectedWindowKey,
warningDataSource,
viewLargerImageModalRef,
handleDownloadImg,
onRecordClick,
selectedRecordId,
isRecordListLoading,
} = props
return (
<div className='zhst-biz-real-time-monitor' style={{ display: 'flex' }} >
<WindowToggle
selectedWindowKey={selectedWindowKey}
dataSource={videoDataSource}
handleWindowClick={handleWindowClick}
handleCloseButtonClick={handleCloseButtonClick}
/>
<WarningRecordList
dataSource={warningDataSource}
handleDownloadImg={handleDownloadImg}
onRecordClick={onRecordClick}
selectedRecordId={selectedRecordId}
viewLargerImageModalRef={viewLargerImageModalRef}
isRecordListLoading={isRecordListLoading}
recordListTitle="监控预警记录"
/>
</div>
);
};
export default RealTimeMonitor;