fix: 视频显示od框，修复预警记录无法查看大图
This commit is contained in:
苑宏博
parent
38fb02e322
commit
7b09934be8
@ -24,7 +24,7 @@ export default () => {
|
||||
}
|
||||
]
|
||||
// 控制窗口切换
|
||||
const [size,setSize] = useState<"large"| "small">('large')
|
||||
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');
|
||||
@ -36,7 +36,6 @@ export default () => {
|
||||
const handleWindowClick = (key?: string) => {
|
||||
setSelectedWindowKey(key)
|
||||
}
|
||||
|
||||
const clearWindowData = (key?: string) => {
|
||||
// 当关闭窗口时 也要刷新 右侧 预警记录接口 不要忘记
|
||||
setVideoDataSource((pre) => {
|
||||
@ -49,15 +48,13 @@ 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 || {}
|
||||
const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss', odRect = [] } = record || {}
|
||||
const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
|
||||
const warningTimeShow = warningTime ? warningTime : formattedDate
|
||||
//用于渲染右侧的 信息
|
||||
@ -69,8 +66,7 @@ export default () => {
|
||||
{ label: '柜子ID', value: cabietId },
|
||||
]
|
||||
// 调用这个方法打开弹框
|
||||
viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData ,odRect:odRect})
|
||||
|
||||
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) => {
|
||||
// 传给 选中的视频窗口
|
||||
@ -153,11 +150,11 @@ export default () => {
|
||||
selectedRecordId={selectedRecordId}
|
||||
viewLargerImageModalRef={viewLargerImageModalRef}
|
||||
isRecordListLoading={isRecordListLoading}
|
||||
recordListTitle="监控预警记录"
|
||||
size = {size}
|
||||
setSize= {setSize}
|
||||
/>
|
||||
|
||||
recordListTitle="监控预警记录"
|
||||
size={size}
|
||||
setSize={setSize}
|
||||
/>
|
||||
|
||||
<button onClick={() => { mockData() }}>模拟请求</button>
|
||||
</Space>
|
||||
)
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
@ -34,7 +34,7 @@ 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 = '',odRect = [] } = 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
|
||||
@ -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)
|
||||
|
||||
@ -66,13 +66,13 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
|
||||
contentElement = (
|
||||
|
||||
<div style={{ width: "100%", height: "100%", display: 'block' }}>
|
||||
<CropperImage
|
||||
// editAble={true}
|
||||
odList={odRectDefault}
|
||||
url={imageKey}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CropperImage
|
||||
// editAble={true}
|
||||
odList={odRectDefault}
|
||||
url={imageKey}
|
||||
/>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
setCardContent(contentElement);
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useImperativeHandle, useRef, useState, forwardRef, useContext }
|
||||
import { Modal, ModalProps, Space, SpaceProps } from 'antd';
|
||||
import theme from 'antd/lib/theme';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { ConfigProvider,CropperImage} from '@zhst/meta';
|
||||
import { ConfigProvider, CropperImage } from '@zhst/meta';
|
||||
|
||||
import './index.less'
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
|
||||
@ -2,7 +2,7 @@ import { Card, Space, Divider, CardProps } from 'antd';
|
||||
import { theme } from 'antd/lib';
|
||||
import React, { useContext } from 'react';
|
||||
import dayjs from 'dayjs';
|
||||
import { ConfigProvider,CropperImage} from '@zhst/meta';
|
||||
import { ConfigProvider, CropperImage } from '@zhst/meta';
|
||||
|
||||
import './index.less'
|
||||
export interface IRecord {
|
||||
@ -55,7 +55,7 @@ export interface IRecord {
|
||||
接收 od框 坐标
|
||||
*/
|
||||
odRect?: {
|
||||
id?: string;
|
||||
id: string;
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
@ -77,13 +77,11 @@ export interface WarningRecordCardProps {
|
||||
};
|
||||
|
||||
export const WarningRecordCard: React.FC<WarningRecordCardProps> = (props) => {
|
||||
|
||||
|
||||
const { ConfigContext } = ConfigProvider;
|
||||
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}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user